npm - @govbr-ds/webcomponents - Versions diffs - 2.0.0-next.19 → 2.0.0-next.20 - Mend

@govbr-ds/webcomponents 2.0.0-next.19 → 2.0.0-next.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/dist/esm/br-input.entry.js CHANGED Viewed

@@ -37,7 +37,7 @@ const Input = class {
             }
         };
         this.renderInput = () => {
-            return (h("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.customId, autocomplete: this.autocomplete, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)));
+            return (h("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.customId, autocomplete: this.autocomplete, disabled: this.disabled, autoCorrect: this.autocorrect, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, step: this.step, onInput: this.handleInput, placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)));
         };
         this.renderHelpText = () => {
             var _a;
@@ -54,10 +54,10 @@ const Input = class {
         };
         this.renderInlineInputContent = () => {
             if (this.hasIconSlot) {
-                return (h("div", { class: "input-content" }, this.renderInputWithIcon()));
+                return h("div", { class: "input-content" }, this.renderInputWithIcon());
             }
             else {
-                return (h("div", { class: "input-content" }, this.renderInputWithoutIcon()));
+                return h("div", { class: "input-content" }, this.renderInputWithoutIcon());
             }
         };
         this.renderInputContent = () => {
@@ -67,11 +67,7 @@ const Input = class {
             return (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput(), this.renderButton(), this.renderHelpText()));
         };
         this.renderInputWithoutIcon = () => {
-            return [
-                this.renderInput(),
-                this.renderButton(),
-                this.renderHelpText()
-            ];
+            return [this.renderInput(), this.renderButton(), this.renderHelpText()];
         };
         this.customId = `br-input-${v4()}`;
         this.type = 'text';
@@ -88,6 +84,14 @@ const Input = class {
         this.required = false;
         this.value = undefined;
         this.helpText = undefined;
+        this.autocorrect = 'off';
+        this.min = undefined;
+        this.max = undefined;
+        this.minlength = undefined;
+        this.maxlength = undefined;
+        this.multiple = false;
+        this.pattern = undefined;
+        this.step = undefined;
         this.isPasswordVisible = false;
         this.hasIconSlot = false;
         this.hasActionSlot = false;
@@ -130,7 +134,7 @@ const Input = class {
         return null;
     }
     render() {
-        return (h(Host, { key: '3c316887a4825f2a1b4f243da87de252ae962bc3' }, h("div", { key: '2c6368d72296cd596346dab44a7873d46e3bef9d', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? (this.renderInlineInputContent()) : (this.renderInputContent()))));
+        return (h(Host, { key: 'd5e8fec1c09589e9c9e9aa206b3c1669ef1f04f8' }, h("div", { key: '431430f8d91e3086b114d4bc7fa3b43e9b5b9eab', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent())));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/br-input.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"br-input.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/input/input.scss?tag=br-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/input/input.scss\";\n\n:host {\n display: block;\n\n .br-input .input-icon {\n margin-top: 0.1em;\n margin-left: var(--spacing-scale-base);\n }\n\n .br-input .input-icon + input {\n padding-left: calc(var(--input-padding-icon) + 3px);\n }\n}\n\n\n.br-input br-button {\n float: right;\n margin-right: var(--input-button-margin);\n margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);\n padding: 0;\n position: relative;\n}\n\n .button-transform{\n transform: translateY(calc((var(--input-size) - 32px) * 0.5));\n }\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, 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 \n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n \n @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n /\n@Component({\n tag: 'br-input',\n styleUrl: 'input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Input {\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: HTMLBrInputElement\n\n @AttachInternals() elementInternals: ElementInternals\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 Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n * - 'color': Seletor de cor\n * - 'email': Campo para e-mail\n * - 'hidden': Campo oculto\n * - 'password': Campo para senha\n * - 'range': Controle deslizante\n * - 'search': Campo de pesquisa\n * - 'number': Campo para números\n * - 'tel': Campo para números de telefone\n * - 'text': Campo de texto padrão\n * - 'url': Campo para URLs\n /\n @Prop({ reflect: true }) type:\n \| 'color'\n \| 'email'\n \| 'hidden'\n \| 'password'\n \| 'range'\n \| 'search'\n \| 'number'\n \| 'tel'\n \| 'text'\n \| 'file'\n \| 'url' = 'text'\n\n /\n Controla o comportamento de preenchimento automático do navegador para o input.\n /\n @Prop({ reflect: true }) autocomplete: 'on' \| 'off'\n\n /\n Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n /\n @Prop({ reflect: true }) density: 'large' \| 'medium' \| 'small' = 'medium'\n\n /\n Desativa o input, tornando-o não interativo.\n /\n @Prop({ reflect: true }) disabled: boolean = false\n\n /\n Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n /\n @Prop({ reflect: true }) isInline: boolean = false\n\n /\n Se verdadeiro, o input terá destaque visual.\n /\n @Prop({ reflect: true }) isHighlight: boolean = false\n\n /\n Define o estado do input\n * Os possíveis valores são:\n * - 'info': Mensagem informativa.\n * - 'warning': Mensagem de aviso.\n * - 'danger': Mensagem de erro ou alerta.\n * - 'success': Mensagem de sucesso.\n * O valor padrão é 'info'.\n /\n @Prop({ reflect: true }) state: 'info' \| 'warning' \| 'danger' \| 'success'\n\n /\n Texto exibido como rótulo do input.\n /\n @Prop({ reflect: true }) label: string\n\n /\n Nome do input, utilizado para identificação em formulários.\n /\n @Prop({ reflect: true }) name: string\n\n /\n Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n /\n @Prop({ reflect: true }) placeholder: string\n\n /\n Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n /\n @Prop({ reflect: true }) readonly: boolean = false\n\n /\n Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n /\n @Prop({ reflect: true }) required: boolean = false\n\n /\n Valor inicial exibido no input.\n * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n /\n @Prop({ reflect: true, mutable: true }) value: string\n\n /\n Texto adicional que fornece ajuda ou informações sobre o input.\n /\n @Prop({ reflect: true }) helpText: string\n\n @State() isPasswordVisible: boolean = false\n\n @State() hasIconSlot: boolean = false\n\n @State() hasActionSlot: boolean = false\n\n componentWillLoad() {\n this.hasIconSlot = this.hasSlotContent('icon')\n this.hasActionSlot = this.hasSlotContent('action')\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n private getInputCssClassMap(): CssClassMap {\n return {\n 'br-input': true,\n 'input-button': this.hasActionSlot,\n small: this.density === 'small',\n large: this.density === 'large',\n medium: this.density === 'medium',\n 'input-inline': this.isInline,\n 'input-highlight': this.isHighlight,\n success: this.state === 'success',\n danger: this.state === 'danger',\n info: this.state === 'info',\n warning: this.state === 'warning',\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n /\n Valor atualizado do input\n */\n @Event() valueChange!: EventEmitter<string>\n private readonly handleInput = (event: Event) => {\n this.value = (event.target as HTMLInputElement).value\n this.valueChange.emit(this.value)\n }\n\n private readonly renderLabel = () => {\n if (this.label?.length > 0) {\n if (this.isInline) {\n return (\n <div class=\"input-label\">\n <label class=\"text-nowrap\" htmlFor={this.customId}>\n {this.label}\n </label>\n </div>\n )\n } else {\n return <label htmlFor={this.customId}>{this.label}</label>\n }\n }\n }\n\n private hasSlotContent(slotName: string): boolean {\n return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n }\n\n private readonly renderInput = () => {\n return (\n <input\n class={this.isHighlight ? 'input-highlight' : null}\n id={this.customId}\n autocomplete={this.autocomplete}\n disabled={this.disabled}\n onInput={this.handleInput}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n title={this.el.title}\n type={this.type}\n value={this.value}\n {...this.inheritedAttributes}\n />\n )\n }\n\n private readonly renderHelpText = () => {\n return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n }\n\n private readonly renderIconPassword = () => {\n const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye';\n return <br-icon icon-name={iconName}></br-icon>;\n }\n\n private readonly togglePasswordVisibility = () => {\n const input = this.el.shadowRoot.querySelector('input')\n this.isPasswordVisible = !this.isPasswordVisible\n input.type = this.isPasswordVisible ? 'text' : 'password'\n }\n\n private renderIconSlot() {\n if (this.hasSlotContent('icon')) {\n return (\n <div class=\"input-icon\">\n <slot name=\"icon\"></slot>\n </div>\n )\n }\n }\n\n private renderButton() {\n if (this.type === 'password') {\n return (\n <br-button\n class=\"button-transform\"\n shape=\"circle\"\n density=\"small\"\n aria-label=\"botão de ação do ícone\"\n onClick={this.togglePasswordVisibility}\n >\n {this.renderIconPassword()}\n </br-button>\n )\n } else if (this.hasSlotContent('action')) {\n return (\n <br-button\n class=\"button-transform\"\n shape=\"circle\"\n density=\"small\"\n aria-label=\"botão de ação do ícone\"\n // onClick={this.onIconAction}\n >\n <slot name=\"action\"></slot>\n </br-button>\n )\n }\n return null\n }\n\n private readonly renderInlineInputContent = () => {\n if (this.hasIconSlot) {\n return (\n <div class=\"input-content\">\n {this.renderInputWithIcon()}\n </div>\n );\n } else {\n return (\n <div class=\"input-content\">\n {this.renderInputWithoutIcon()}\n </div>\n );\n }\n };\n\n private readonly renderInputContent = () => {\n return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon()\n }\n\n private readonly renderInputWithIcon = () => {\n return (\n <div class=\"input-group\">\n {this.renderIconSlot()}\n {this.renderInput()}\n {this.renderButton()}\n {this.renderHelpText()}\n </div>\n );\n };\n\n private readonly renderInputWithoutIcon = () => {\n return [\n this.renderInput(),\n this.renderButton(),\n this.renderHelpText()\n ]\n };\n\n render() {\n return (\n <Host>\n <div class={this.getInputCssClassMap()}>\n {this.renderLabel()}\n\n {this.isInline ? (\n this.renderInlineInputContent()\n ) : (\n this.renderInputContent()\n )}\n </div>\n </Host>\n )\n }\n}\n"],"version":3}
1	+ {"file":"br-input.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/input/input.scss?tag=br-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/input/input.scss\";\n\n:host {\n display: block;\n\n .br-input .input-icon {\n margin-top: 0.1em;\n margin-left: var(--spacing-scale-base);\n }\n\n .br-input .input-icon + input {\n padding-left: calc(var(--input-padding-icon) + 3px);\n }\n}\n\n\n.br-input br-button {\n float: right;\n margin-right: var(--input-button-margin);\n margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);\n padding: 0;\n position: relative;\n}\n\n .button-transform{\n transform: translateY(calc((var(--input-size) - 32px) * 0.5));\n }\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/*\n \n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n \n @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n /\n@Component({\n tag: 'br-input',\n styleUrl: 'input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Input {\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: HTMLBrInputElement\n\n @AttachInternals() elementInternals: ElementInternals\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 Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n * - 'color': Seletor de cor\n * - 'email': Campo para e-mail\n * - 'hidden': Campo oculto\n * - 'password': Campo para senha\n * - 'range': Controle deslizante\n * - 'search': Campo de pesquisa\n * - 'number': Campo para números\n * - 'tel': Campo para números de telefone\n * - 'text': Campo de texto padrão\n * - 'url': Campo para URLs\n /\n @Prop({ reflect: true }) type:\n \| 'color'\n \| 'email'\n \| 'hidden'\n \| 'password'\n \| 'range'\n \| 'search'\n \| 'number'\n \| 'tel'\n \| 'text'\n \| 'file'\n \| 'url' = 'text'\n\n /\n Controla o comportamento de preenchimento automático do navegador para o input.\n /\n @Prop({ reflect: true }) autocomplete: 'on' \| 'off'\n\n /\n Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n /\n @Prop({ reflect: true }) density: 'large' \| 'medium' \| 'small' = 'medium'\n\n /\n Desativa o input, tornando-o não interativo.\n /\n @Prop({ reflect: true }) disabled: boolean = false\n\n /\n Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n /\n @Prop({ reflect: true }) isInline: boolean = false\n\n /\n Se verdadeiro, o input terá destaque visual.\n /\n @Prop({ reflect: true }) isHighlight: boolean = false\n\n /\n Define o estado do input\n * Os possíveis valores são:\n * - 'info': Mensagem informativa.\n * - 'warning': Mensagem de aviso.\n * - 'danger': Mensagem de erro ou alerta.\n * - 'success': Mensagem de sucesso.\n * O valor padrão é 'info'.\n /\n @Prop({ reflect: true }) state: 'info' \| 'warning' \| 'danger' \| 'success'\n\n /\n Texto exibido como rótulo do input.\n /\n @Prop({ reflect: true }) label: string\n\n /\n Nome do input, utilizado para identificação em formulários.\n /\n @Prop({ reflect: true }) name: string\n\n /\n Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n /\n @Prop({ reflect: true }) placeholder: string\n\n /\n Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n /\n @Prop({ reflect: true }) readonly: boolean = false\n\n /\n Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n /\n @Prop({ reflect: true }) required: boolean = false\n\n /\n Valor inicial exibido no input.\n * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n /\n @Prop({ reflect: true, mutable: true }) value: string\n\n /\n Texto adicional que fornece ajuda ou informações sobre o input.\n /\n @Prop({ reflect: true }) helpText: string\n\n /\n Controla a correção automática do texto.\n /\n @Prop({ reflect: true }) autocorrect: 'off' \| 'on' = 'off'\n\n /\n Define o valor mínimo para campos de entrada numéricos.\n /\n @Prop({ reflect: true }) min: number\n\n /\n Define o valor máximo para campos de entrada numéricos.\n /\n @Prop({ reflect: true }) max: number\n\n /\n Define o comprimento mínimo do valor do campo de entrada.\n /\n @Prop({ reflect: true }) minlength: number\n\n /\n Define o comprimento máximo do valor do campo de entrada.\n /\n @Prop({ reflect: true }) maxlength: number\n\n /\n Se verdadeiro, permite a seleção de múltiplos arquivos.\n /\n @Prop({ reflect: true }) multiple: boolean = false\n\n /\n Define o padrão de entrada para validação.\n /\n @Prop({ reflect: true }) pattern: string\n\n /\n Define o valor do passo para campos de entrada numéricos.\n /\n @Prop({ reflect: true }) step: number\n\n @State() isPasswordVisible: boolean = false\n\n @State() hasIconSlot: boolean = false\n\n @State() hasActionSlot: boolean = false\n\n componentWillLoad() {\n this.hasIconSlot = this.hasSlotContent('icon')\n this.hasActionSlot = this.hasSlotContent('action')\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n private getInputCssClassMap(): CssClassMap {\n return {\n 'br-input': true,\n 'input-button': this.hasActionSlot,\n small: this.density === 'small',\n large: this.density === 'large',\n medium: this.density === 'medium',\n 'input-inline': this.isInline,\n 'input-highlight': this.isHighlight,\n success: this.state === 'success',\n danger: this.state === 'danger',\n info: this.state === 'info',\n warning: this.state === 'warning',\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n /\n Valor atualizado do input\n */\n @Event() valueChange!: EventEmitter<string>\n private readonly handleInput = (event: Event) => {\n this.value = (event.target as HTMLInputElement).value\n this.valueChange.emit(this.value)\n }\n\n private readonly renderLabel = () => {\n if (this.label?.length > 0) {\n if (this.isInline) {\n return (\n <div class=\"input-label\">\n <label class=\"text-nowrap\" htmlFor={this.customId}>\n {this.label}\n </label>\n </div>\n )\n } else {\n return <label htmlFor={this.customId}>{this.label}</label>\n }\n }\n }\n\n private hasSlotContent(slotName: string): boolean {\n return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n }\n\n private readonly renderInput = () => {\n return (\n <input\n class={this.isHighlight ? 'input-highlight' : null}\n id={this.customId}\n autocomplete={this.autocomplete}\n disabled={this.disabled}\n autoCorrect={this.autocorrect}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n multiple={this.multiple}\n name={this.name}\n pattern={this.pattern}\n step={this.step}\n onInput={this.handleInput}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n title={this.el.title}\n type={this.type}\n value={this.value}\n {...this.inheritedAttributes}\n />\n )\n }\n\n private readonly renderHelpText = () => {\n return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n }\n\n private readonly renderIconPassword = () => {\n const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye'\n return <br-icon icon-name={iconName}></br-icon>\n }\n\n private readonly togglePasswordVisibility = () => {\n const input = this.el.shadowRoot.querySelector('input')\n this.isPasswordVisible = !this.isPasswordVisible\n input.type = this.isPasswordVisible ? 'text' : 'password'\n }\n\n private renderIconSlot() {\n if (this.hasSlotContent('icon')) {\n return (\n <div class=\"input-icon\">\n <slot name=\"icon\"></slot>\n </div>\n )\n }\n }\n\n private renderButton() {\n if (this.type === 'password') {\n return (\n <br-button\n class=\"button-transform\"\n shape=\"circle\"\n density=\"small\"\n aria-label=\"botão de ação do ícone\"\n onClick={this.togglePasswordVisibility}\n >\n {this.renderIconPassword()}\n </br-button>\n )\n } else if (this.hasSlotContent('action')) {\n return (\n <br-button\n class=\"button-transform\"\n shape=\"circle\"\n density=\"small\"\n aria-label=\"botão de ação do ícone\"\n // onClick={this.onIconAction}\n >\n <slot name=\"action\"></slot>\n </br-button>\n )\n }\n return null\n }\n\n private readonly renderInlineInputContent = () => {\n if (this.hasIconSlot) {\n return <div class=\"input-content\">{this.renderInputWithIcon()}</div>\n } else {\n return <div class=\"input-content\">{this.renderInputWithoutIcon()}</div>\n }\n }\n\n private readonly renderInputContent = () => {\n return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon()\n }\n\n private readonly renderInputWithIcon = () => {\n return (\n <div class=\"input-group\">\n {this.renderIconSlot()}\n {this.renderInput()}\n {this.renderButton()}\n {this.renderHelpText()}\n </div>\n )\n }\n\n private readonly renderInputWithoutIcon = () => {\n return [this.renderInput(), this.renderButton(), this.renderHelpText()]\n }\n\n render() {\n return (\n <Host>\n <div class={this.getInputCssClassMap()}>\n {this.renderLabel()}\n\n {this.isInline ? this.renderInlineInputContent() : this.renderInputContent()}\n </div>\n </Host>\n )\n }\n}\n"],"version":3}

package/dist/esm/br-tag.entry.js ADDED Viewed

@@ -0,0 +1,84 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-aab4a630.js';
+import { i as inheritAriaAttributes } from './inherited-attributes-553a7c36.js';
+const tagCss = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.d-flex{display:-ms-flexbox !important;display:flex !important}.align-items-center{-ms-flex-align:center !important;align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter) * 0.5);padding-right:calc(var(--grid-gutter) * 0.5);width:100%}.col{-ms-flex:1 0 0%;flex:1 0 0%;min-width:8.3333333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.container{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mr-n2{margin-right:calc(var(--spacing-scale-base) * -1) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}.mr-auto{margin-right:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-webkit-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}:-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.text-primary-default{color:var(--color-primary-default) !important}.bg-support-01{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.text-base{font-size:var(--font-size-scale-base) !important}.highlight{background:var(--status-highlight-background) -webkit-gradient(linear, left top, left bottom, from(var(--status-highlight-overlay)), to(var(--status-highlight-overlay)));background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{-webkit-box-shadow:var(--surface-shadow-sm);box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.br-tag{--tag-size:var(--tag-medium);--tag-small:var(--spacing-scale-2xh);--tag-medium:var(--spacing-scale-3xh);--tag-large:var(--spacing-scale-4xh);-ms-flex-align:center;align-items:center;background:var(--background-dark);border-radius:var(--surface-rounder-sm);color:var(--color-dark);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);-ms-flex-pack:center;justify-content:center;margin:0;min-height:var(--tag-size);padding:0 var(--spacing-scale-baseh);align-items:center;background:var(--background-dark);border-radius:var(--surface-rounder-sm);color:var(--color-dark);display:inline-flex;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);justify-content:center;margin:0;min-height:var(--tag-size);padding:0 var(--spacing-scale-baseh)}.br-tag+.br-tag{margin-left:var(--spacing-scale-half)}.br-tag.interaction{--tag-small:var(--spacing-scale-4x);--tag-medium:var(--spacing-scale-5x);--tag-large:var(--spacing-scale-5xh);font-size:var(--font-size-scale-up-01)}.br-tag.interaction{background:var(--interactive)}.br-tag.interaction .br-button{--button-size:var(--spacing-scale-3xh);--focus:var(--focus-color-dark);--hover:var(--hover-dark);--interactive-rgb:var(--color-dark-rgb);background-color:var(--interactive-light);border-radius:50%;color:var(--color-dark);margin-left:var(--spacing-scale-baseh);padding:0;width:var(--button-size)}.br-tag.interaction:hover .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-tag.interaction:active .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}.br-tag.disabled input{cursor:not-allowed}.br-tag.status{--tag-small:var(--spacing-scale-baseh);--tag-medium:var(--spacing-scale-2x);--tag-large:var(--spacing-scale-3x);border:1px solid var(--background-light);border-radius:50%;min-width:var(--tag-size);padding:0}.br-tag.count{--tag-small:var(--spacing-scale-2xh);--tag-medium:var(--spacing-scale-3x);--tag-large:var(--spacing-scale-3xh);border:1px solid var(--background-light);border-radius:100em;min-width:var(--tag-size);padding-left:var(--spacing-scale-base);padding-right:var(--spacing-scale-base)}.br-tag.icon{--tag-small:var(--spacing-scale-3xh);--tag-medium:var(--spacing-scale-4x);--tag-large:var(--spacing-scale-5xh);border-radius:50%;min-width:var(--tag-size);padding:0}.br-tag.small{--tag-size:var(--tag-small)}.br-tag.medium{--tag-size:var(--tag-medium)}.br-tag.large{--tag-size:var(--tag-large)}.br-tag.interaction{--tag-small:var(--spacing-scale-4x);--tag-medium:var(--spacing-scale-5x);--tag-large:var(--spacing-scale-5xh);font-size:var(--font-size-scale-up-01)}.br-tag.interaction{background:var(--interactive)}.br-tag.interaction .br-button{--button-size:var(--spacing-scale-3xh);--focus:var(--focus-color-dark);--hover:var(--hover-dark);--interactive-rgb:var(--color-dark-rgb);background-color:var(--interactive-light);border-radius:50%;color:var(--color-dark);margin-left:var(--spacing-scale-baseh);padding:0;width:var(--button-size)}.br-tag.interaction:hover .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-tag.interaction:active .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}.br-tag.disabled input{cursor:not-allowed}.br-tag.interaction{--tag-small:var(--spacing-scale-4x);--tag-medium:var(--spacing-scale-5x);--tag-large:var(--spacing-scale-5xh);font-size:var(--font-size-scale-up-01)}.br-tag.interaction{background:var(--interactive)}.br-tag.interaction .br-button{--button-size:var(--spacing-scale-3xh);--focus:var(--focus-color-dark);--hover:var(--hover-dark);--interactive-rgb:var(--color-dark-rgb);background-color:var(--interactive-light);border-radius:50%;color:var(--color-dark);margin-left:var(--spacing-scale-baseh);padding:0;width:var(--button-size)}.br-tag.interaction:hover .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-tag.interaction:active .br-button{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}.br-tag.disabled input{cursor:not-allowed}.br-tag+.br-tag{margin-left:var(--spacing-scale-half)}.br-tag.small{--tag-size:var(--tag-small)}.br-tag.medium{--tag-size:var(--tag-medium)}.br-tag.large{--tag-size:var(--tag-large)}.br-tag.is-highlight,.br-tag.highlight,.br-tag[highlight]{background-color:#268744}.br-tag.success,.br-tag[success]{background-color:var(--success)}.br-tag.danger,.br-tag[danger]{background-color:var(--danger)}.br-tag.warning,.br-tag[warning]{background-color:var(--warning)}.br-tag.info,.br-tag[info]{background-color:var(--info)}:host{display:block}:host .tag-position{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-align:center;align-items:center}:host .tag-spacing-status{margin-left:var(--spacing-scale-half) !important}";
+const BrTagStyle0 = tagCss;
+const Tag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.brWillLoad = createEvent(this, "brWillLoad", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.elementInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.elementInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.elementInternals;
+        }
+        this.inheritedAttributes = {};
+        this.handleClose = () => {
+            this.el.remove();
+        };
+        this.label = '';
+        this.iconName = '';
+        this.color = '';
+        this.density = 'small';
+        this.shape = 'default';
+        this.status = false;
+        this.interaction = false;
+        this.disabled = false;
+        this.stateIconName = 'fa-solid:car';
+    }
+    componentWillLoad() {
+        this.brWillLoad.emit();
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    getCssClassMap() {
+        const classes = {
+            'br-tag': true,
+            interaction: this.interaction,
+            [this.color]: this.color !== '',
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+            count: this.shape === 'rounded' ? true : false,
+            icon: this.shape === 'circle' ? true : false,
+            status: this.status,
+        };
+        return classes;
+    }
+    renderIcon() {
+        if (this.iconName.trim().length === 0)
+            return null;
+        return h("br-icon", { style: { fontSize: 'var(--icon-size-base)' }, "icon-name": this.iconName, "aria-hidden": "true" });
+    }
+    renderLabel() {
+        if (this.shape === 'circle' || this.status)
+            return null;
+        return (h("span", { id: "interactivetag1", "aria-label": this.label }, this.label));
+    }
+    renderCloseButton() {
+        if (!this.interaction)
+            return null;
+        return (h("br-button", { type: "button", shape: "circle", emphasis: !this.interaction ? 'tertiary' : 'primary', "aria-label": "Fechar", colorMode: !this.interaction ? 'dark' : null, "aria-describedby": "interactivetag1", onClick: this.handleClose, disabled: this.disabled }, h("br-icon", { "icon-name": "fa-solid:times" })));
+    }
+    renderStatusLabel() {
+        if (!this.status)
+            return null;
+        return (h("span", { class: "tag-spacing-status", id: "interactivetag1", "aria-label": this.label }, this.label));
+    }
+    render() {
+        return (h(Host, { key: '2ae1b9e249097b66fb02e0c903e294f73aad6bc0' }, h("div", { key: '65f39b80147b977231e8bb9566f2aa1797597646', class: "tag-position" }, h("span", Object.assign({ key: '452777774bfdba4a5eed2af6bb429f02f8dd9ed3', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "alert", "aria-live": "assertive" }), this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", { key: 'c3cad61c4e5d7b683c9b4a6b66fbf0b62a56ac8a' })), this.renderStatusLabel())));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+};
+Tag.style = BrTagStyle0;
+export { Tag as br_tag };
+//# sourceMappingURL=br-tag.entry.js.map

package/dist/esm/br-tag.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"br-tag.entry.js","mappings":"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","names":[],"sources":["src/components/tag/tag.scss?tag=br-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/tag/tag.scss\";\n\n:host {\n display: block;\n\n .tag-position {\n display: flex;\n justify-content: space-around;\n align-items: center;\n }\n .tag-spacing-status {\n margin-left: var(--spacing-scale-half) !important;\n }\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\n\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/tag?tab=designer).\n *\n * @slot default - Slot utilizado para inserir conteúdo adicional na tag, como texto ou elementos HTML extras.\n */\n@Component({\n tag: 'br-tag',\n styleUrl: 'tag.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Tag {\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: HTMLBrTagElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\n * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n */\n @Prop({ reflect: true }) label: string = ''\n\n /**\n * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\n * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.\n */\n @Prop({ reflect: true }) iconName: string = ''\n\n /**\n * A propriedade 'color' permite definir a cor do componente.\n * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.\n */\n @Prop({ reflect: true }) color: string = ''\n\n /**\n * A propriedade 'density' permite definir a densidade do componente.\n * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.\n */\n @Prop({ reflect: true }) density: 'small' | 'medium' | 'large' = 'small'\n\n /**\n * A propriedade 'shape' define o formato do componente.\n * Valores possíveis:\n * - 'circle': Componente com formato circular.\n * - 'rounded': Componente com bordas arredondadas.\n * - 'default': Componente com formato padrão.\n */\n @Prop({ reflect: true }) shape: 'circle' | 'rounded' | 'default' = 'default'\n\n /**\n * A propriedade 'status' é um booleano que indica se o status deve ser exibido.\n * Se definido como true, o status será mostrado ao lado do texto.\n */\n @Prop({ reflect: true }) status: boolean = false\n\n /**\n * A propriedade 'interaction' é um booleano que indica se a interação deve ser habilitada.\n * Se definido como true, o componente permitirá interações do usuário.\n */\n @Prop({ reflect: true }) interaction: boolean = false\n\n /**\n * A propriedade 'disabled' é um booleano que indica se o componente deve estar desabilitado.\n * Se definido como true, o componente não permitirá interações do usuário.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n @State() stateIconName: string = 'fa-solid:car'\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n private getCssClassMap(): CssClassMap {\n const classes: CssClassMap = {\n 'br-tag': true,\n interaction: this.interaction,\n [this.color]: this.color !== '',\n small: this.density === 'small',\n medium: this.density === 'medium',\n large: this.density === 'large',\n count: this.shape === 'rounded' ? true : false,\n icon: this.shape === 'circle' ? true : false,\n status: this.status,\n }\n\n return classes\n }\n\n private inheritedAttributes: Attributes = {}\n\n private renderIcon() {\n if (this.iconName.trim().length === 0) return null\n return <br-icon style={{ fontSize: 'var(--icon-size-base)' }} icon-name={this.iconName} aria-hidden=\"true\" />\n }\n\n private renderLabel() {\n if (this.shape === 'circle' || this.status) return null\n return (\n <span id=\"interactivetag1\" aria-label={this.label}>\n {this.label}\n </span>\n )\n }\n\n private renderCloseButton() {\n if (!this.interaction) return null\n return (\n <br-button\n type=\"button\"\n shape=\"circle\"\n emphasis={!this.interaction ? 'tertiary' : 'primary'}\n aria-label=\"Fechar\"\n colorMode={!this.interaction ? 'dark' : null}\n aria-describedby=\"interactivetag1\"\n onClick={this.handleClose}\n disabled={this.disabled}\n >\n <br-icon icon-name=\"fa-solid:times\"></br-icon>\n </br-button>\n )\n }\n\n private renderStatusLabel() {\n if (!this.status) return null\n return (\n <span class=\"tag-spacing-status\" id=\"interactivetag1\" aria-label={this.label}>\n {this.label}\n </span>\n )\n }\n\n private handleClose = () => {\n this.el.remove()\n }\n\n render() {\n return (\n <Host>\n <div class=\"tag-position\">\n <span class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"alert\" aria-live=\"assertive\">\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderCloseButton()}\n <slot></slot>\n </span>\n {this.renderStatusLabel()}\n </div>\n </Host>\n )\n }\n}\n"],"version":3}

package/dist/esm/br-textarea.entry.js CHANGED Viewed

@@ -83,7 +83,7 @@ const Textarea = class {
     render() {
         const caracteresRestantes = this.maxlength - this.currentLength;
         const mostrarLimite = this.currentLength > 0;
-        return (h(Host, { key: 'defc8132cc310b1fdce9555584503b1091381f1a' }, h("div", Object.assign({ key: 'cb6c15fda32b51936b72e3841f0902c62dfb1b2b', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: '7f6c1f253f9ff2925cdd03979f2d59c094d33764', class: this.isInline ? 'row' : '' }, this.isInline ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.customId }, this.label))) : (h("label", { htmlFor: this.customId }, this.label)), h("div", { key: '3fdb79978863ec3748395a25f3314b70bc9e2c70', class: this.isInline ? 'col' : '' }, h("textarea", Object.assign({ key: '8fb3b0cfeb66e6a41ca043280848beca7a48b831', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: '15886ef7f481fa9f68dd57d4765283fae22e82a4', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: '793a5a2d1e8b5fb76c0ed96fc713544094c18809' }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres"))))), h("slot", { key: '0b6052b895a5b960bff7c3eb879e949ad4846cfa' }))))));
+        return (h(Host, { key: '8bb5ea9efb0e2ee82d1c4074d7f9a8332fcfb635' }, h("div", Object.assign({ key: 'cedcc004557860b4b2724c5180f2c012a109fcc1', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: '3998a88b69f3dddc63ea41d08db7de96af28d25d', class: this.isInline ? 'row' : '' }, this.isInline ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.customId }, this.label))) : (h("label", { htmlFor: this.customId }, this.label)), h("div", { key: '8f94f9c2aaf2758e5ee9be6938be50ce8c82db7c', class: this.isInline ? 'col' : '' }, h("textarea", Object.assign({ key: 'a642046a4dd9da93ac051eb6bf0ecfe711433680', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: 'b859da1b3f48ed513e32374251a31ad3fc0f108f', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: '0aaebed51ac98b00c4fca6e7d857664d117b0d74' }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres"))))), h("slot", { key: 'e24c4673cc638ce9e37acf05d2d80fea32b7f8fa' }))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/br-upload.entry.js CHANGED Viewed

@@ -152,7 +152,7 @@ const Upload = class {
         fileInput.click();
     }
     render() {
-        return (h(Host, { key: 'f1ec05f1b00cc4ab0b77857f59a131f58ee33453' }, h("div", { key: 'eb58edc7b74899f9d61e9a8f29f1ddb5e8770400', class: this.getCssClassMap() }, h("label", { key: 'ed176b30f6e6076e956509da99049023f0169050', class: "upload-label", form: "single-file" }, h("span", { key: 'f61bd68bc184ebb271e668c4e199b4cc4f2e9482' }, this.label)), h("button", { key: 'b5a5d360161ddebabe673bd5a0ab2ac5f357e5be', class: "upload-button", type: "button", "aria-hidden": "true", tabIndex: this.disabled ? -1 : 0, disabled: this.disabled, "aria-label": "Selecionar arquivo para upload", onClick: () => this.handleFileSelection(), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event) }, h("br-icon", { key: '693d40ea2e9717c0fd399b7ede95735ea96fd58c', "icon-name": "fa-solid:upload", height: "16", "aria-hidden": "true" }), h("span", { key: 'b545c00edd27ec1fd06dc8e48891da4a1868f4cf' }, "Selecione o arquivo")), h("input", Object.assign({ key: 'eec6d4db4a1b102321544e5ef676dc2000243a1d', class: "upload-input", id: "single-file", type: "file", "aria-hidden": "null", "aria-label": "enviar arquivo", onChange: ($event) => this.onInputChange($event.target.files) }, this.inheritedAttributes, { multiple: this.multiple, disabled: this.disabled, accept: this.accept })), h("div", { key: '0580a6d5e28685ec3e91e84d1082cabc8a5dc87c', id: "list-files", class: "upload-list" }, this.filesSelected ? this.renderFilesUploaded() : null))));
+        return (h(Host, { key: 'aab6988f0879747fdb594e3810704e497718635c' }, h("div", { key: '274726af605123e4be46cd995b295c8eb147cbf4', class: this.getCssClassMap() }, h("label", { key: '40753e4671f13bd2daab5c823284e64dd104214b', class: "upload-label", form: "single-file" }, h("span", { key: 'd49a6054c231e556bb40ee4c8b06f0c8ff950507' }, this.label)), h("button", { key: 'dafa2d9c447bb65f01e9b5dbd81f63dde33d38d2', class: "upload-button", type: "button", "aria-hidden": "true", tabIndex: this.disabled ? -1 : 0, disabled: this.disabled, "aria-label": "Selecionar arquivo para upload", onClick: () => this.handleFileSelection(), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event) }, h("br-icon", { key: '22b4bf3b4618ecdff30cdcb8db2185db6da0af5f', "icon-name": "fa-solid:upload", height: "16", "aria-hidden": "true" }), h("span", { key: 'f8a3fbc9629d7a8cd85eb434d922356b5c61ab22' }, "Selecione o arquivo")), h("input", Object.assign({ key: '83b65e6e1a55db70d42c6075bea037d58b86c457', class: "upload-input", id: "single-file", type: "file", "aria-hidden": "null", "aria-label": "enviar arquivo", onChange: ($event) => this.onInputChange($event.target.files) }, this.inheritedAttributes, { multiple: this.multiple, disabled: this.disabled, accept: this.accept })), h("div", { key: '0a7a7f508c8379986a56d1a2aa5773b0f0709c17', id: "list-files", class: "upload-list" }, this.filesSelected ? this.renderFilesUploaded() : null))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/index-aab4a630.js CHANGED Viewed

@@ -96,6 +96,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './br-switch.entry.js').then(processMod, consoleError);
+                case 'br-tag':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './br-tag.entry.js').then(processMod, consoleError);
                 case 'br-textarea':
                     return import(
                       /* webpackMode: "lazy" */

package/dist/esm/loader.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { g as globalScripts } from './app-globals-72548b13.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["br-input",[[65,"br-input",{"customId":[513,"id"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"state":[513],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"isPasswordVisible":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-upload",[[65,"br-upload",{"accept":[1],"label":[1],"disabled":[516],"state":[513],"multiple":[4],"filesSelected":[32],"file":[32]}]]],["br-avatar",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[1,"icon-width"],"iconHeight":[1,"icon-height"],"marginTop":[1,"margin-top"]}]]],["br-checkbox",[[65,"br-checkbox",{"indeterminate":[516],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[516,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-dropdown",[[65,"br-dropdown",{"isOpen":[1540,"is-open"],"open":[64],"hide":[64]},null,{"isOpen":["isOpenChanged"]}]]],["br-item",[[65,"br-item",{"disabled":[516],"isActive":[516,"is-active"],"isSelected":[516,"is-selected"],"isInteractive":[516,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list",[[65,"br-list",{"header":[513],"isHorizontal":[516,"is-horizontal"],"hideHeaderDivider":[516,"hide-header-divider"]}]]],["br-loading",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[516,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"]},[[8,"brDidChange","onBrDidChange"]]]]],["br-switch",[[65,"br-switch",{"disabled":[516],"checked":[516],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[516,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-textarea",[[65,"br-textarea",{"value":[1537],"label":[513],"placeholder":[513],"disabled":[516],"maxlength":[514],"state":[513],"density":[513],"isInline":[516,"is-inline"],"customId":[513,"id"],"currentLength":[32],"setValue":[64]},null,{"value":["valueChanged"]}]]],["br-button_2",[[65,"br-button",{"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"iconName":[513,"icon-name"],"height":[513],"width":[513],"cssClasses":[513,"css-classes"],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
+  return bootstrapLazy([["br-input",[[65,"br-input",{"customId":[513,"id"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"state":[513],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"autocorrect":[513],"min":[514],"max":[514],"minlength":[514],"maxlength":[514],"multiple":[516],"pattern":[513],"step":[514],"isPasswordVisible":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-tag",[[65,"br-tag",{"label":[513],"iconName":[513,"icon-name"],"color":[513],"density":[513],"shape":[513],"status":[516],"interaction":[516],"disabled":[516],"stateIconName":[32]}]]],["br-upload",[[65,"br-upload",{"accept":[1],"label":[1],"disabled":[516],"state":[513],"multiple":[4],"filesSelected":[32],"file":[32]}]]],["br-avatar",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[1,"icon-width"],"iconHeight":[1,"icon-height"],"marginTop":[1,"margin-top"]}]]],["br-checkbox",[[65,"br-checkbox",{"indeterminate":[516],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[516,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-dropdown",[[65,"br-dropdown",{"isOpen":[1540,"is-open"],"open":[64],"hide":[64]},null,{"isOpen":["isOpenChanged"]}]]],["br-item",[[65,"br-item",{"disabled":[516],"isActive":[516,"is-active"],"isSelected":[516,"is-selected"],"isInteractive":[516,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list",[[65,"br-list",{"header":[513],"isHorizontal":[516,"is-horizontal"],"hideHeaderDivider":[516,"hide-header-divider"]}]]],["br-loading",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[516,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"]},[[8,"brDidChange","onBrDidChange"]]]]],["br-switch",[[65,"br-switch",{"disabled":[516],"checked":[516],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[516,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-textarea",[[65,"br-textarea",{"value":[1537],"label":[513],"placeholder":[513],"disabled":[516],"maxlength":[514],"state":[513],"density":[513],"isInline":[516,"is-inline"],"customId":[513,"id"],"currentLength":[32],"setValue":[64]},null,{"value":["valueChanged"]}]]],["br-button_2",[[65,"br-button",{"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"iconName":[513,"icon-name"],"height":[513],"width":[513],"cssClasses":[513,"css-classes"],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
 };
 export { defineCustomElements };

package/dist/esm/webcomponents.js CHANGED Viewed

@@ -41,7 +41,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["br-input",[[65,"br-input",{"customId":[513,"id"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"state":[513],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"isPasswordVisible":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-upload",[[65,"br-upload",{"accept":[1],"label":[1],"disabled":[516],"state":[513],"multiple":[4],"filesSelected":[32],"file":[32]}]]],["br-avatar",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[1,"icon-width"],"iconHeight":[1,"icon-height"],"marginTop":[1,"margin-top"]}]]],["br-checkbox",[[65,"br-checkbox",{"indeterminate":[516],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[516,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-dropdown",[[65,"br-dropdown",{"isOpen":[1540,"is-open"],"open":[64],"hide":[64]},null,{"isOpen":["isOpenChanged"]}]]],["br-item",[[65,"br-item",{"disabled":[516],"isActive":[516,"is-active"],"isSelected":[516,"is-selected"],"isInteractive":[516,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list",[[65,"br-list",{"header":[513],"isHorizontal":[516,"is-horizontal"],"hideHeaderDivider":[516,"hide-header-divider"]}]]],["br-loading",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[516,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"]},[[8,"brDidChange","onBrDidChange"]]]]],["br-switch",[[65,"br-switch",{"disabled":[516],"checked":[516],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[516,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-textarea",[[65,"br-textarea",{"value":[1537],"label":[513],"placeholder":[513],"disabled":[516],"maxlength":[514],"state":[513],"density":[513],"isInline":[516,"is-inline"],"customId":[513,"id"],"currentLength":[32],"setValue":[64]},null,{"value":["valueChanged"]}]]],["br-button_2",[[65,"br-button",{"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"iconName":[513,"icon-name"],"height":[513],"width":[513],"cssClasses":[513,"css-classes"],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
+  return bootstrapLazy([["br-input",[[65,"br-input",{"customId":[513,"id"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"state":[513],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"autocorrect":[513],"min":[514],"max":[514],"minlength":[514],"maxlength":[514],"multiple":[516],"pattern":[513],"step":[514],"isPasswordVisible":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-tag",[[65,"br-tag",{"label":[513],"iconName":[513,"icon-name"],"color":[513],"density":[513],"shape":[513],"status":[516],"interaction":[516],"disabled":[516],"stateIconName":[32]}]]],["br-upload",[[65,"br-upload",{"accept":[1],"label":[1],"disabled":[516],"state":[513],"multiple":[4],"filesSelected":[32],"file":[32]}]]],["br-avatar",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[1,"icon-width"],"iconHeight":[1,"icon-height"],"marginTop":[1,"margin-top"]}]]],["br-checkbox",[[65,"br-checkbox",{"indeterminate":[516],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[516,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-dropdown",[[65,"br-dropdown",{"isOpen":[1540,"is-open"],"open":[64],"hide":[64]},null,{"isOpen":["isOpenChanged"]}]]],["br-item",[[65,"br-item",{"disabled":[516],"isActive":[516,"is-active"],"isSelected":[516,"is-selected"],"isInteractive":[516,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list",[[65,"br-list",{"header":[513],"isHorizontal":[516,"is-horizontal"],"hideHeaderDivider":[516,"hide-header-divider"]}]]],["br-loading",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[516,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"]},[[8,"brDidChange","onBrDidChange"]]]]],["br-switch",[[65,"br-switch",{"disabled":[516],"checked":[516],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[516,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-textarea",[[65,"br-textarea",{"value":[1537],"label":[513],"placeholder":[513],"disabled":[516],"maxlength":[514],"state":[513],"density":[513],"isInline":[516,"is-inline"],"customId":[513,"id"],"currentLength":[32],"setValue":[64]},null,{"value":["valueChanged"]}]]],["br-button_2",[[65,"br-button",{"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"iconName":[513,"icon-name"],"height":[513],"width":[513],"cssClasses":[513,"css-classes"],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map