@govbr-ds/webcomponents 2.0.0-next.15 → 2.0.0-next.17

package/dist/collection/components/button/button.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }
@@ -714,6 +696,13 @@ a.br-button {
   animation: fill ease-in-out 2s;
   transform: rotate(9deg);
 }
+.loading[data-progress="8"] .br-loading-mask.full,
+.loading[data-progress="8"] .br-loading-fill,
+.br-loading[data-progress="8"] .br-loading-mask.full,
+.br-loading[data-progress="8"] .br-loading-fill {
+  animation: fill ease-in-out 2s;
+  transform: rotate(14.4deg);
+}
 .loading[data-progress="10"] .br-loading-mask.full,
 .loading[data-progress="10"] .br-loading-fill,
 .br-loading[data-progress="10"] .br-loading-mask.full,

package/dist/collection/components/checkbox/checkbox.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }

package/dist/collection/components/dropdown/dropdown.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }

package/dist/collection/components/icon/icon.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }

package/dist/collection/components/input/input.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }
@@ -506,6 +488,9 @@ code,
   margin-right: var(--spacing-scale-baseh);
   margin-top: calc(var(--input-size) * 0.5 - var(--spacing-scale-half));
 }
+.br-input.input-inline .input-content {
+  flex: 1;
+}
 .br-input .input-group {
   position: relative;
 }

package/dist/collection/components/input/input.js

@@ -27,11 +27,6 @@ export class Input {
                 }
             }
         };
-        this.togglePasswordVisibility = () => {
-            const input = this.el.shadowRoot.querySelector('input');
-            input.type = input.type === 'password' ? 'text' : 'password';
-            this.showIconTextPassword = input.type === 'password';
-        };
         this.renderInput = () => {
             return (h("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.defaultID, 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)));
         };
@@ -40,8 +35,34 @@ export class Input {
             return ((_a = this.helpText) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h("p", null, this.helpText) : h("slot", { name: "help-text" });
         };
         this.renderIconPassword = () => {
-            const showPassword = !this.showIconTextPassword;
-            return h("br-icon", { "icon-name": showPassword ? 'fa-solid:eye' : 'fa-solid:eye-slash' });
+            const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye';
+            return h("br-icon", { "icon-name": iconName });
+        };
+        this.togglePasswordVisibility = () => {
+            const input = this.el.shadowRoot.querySelector('input');
+            this.isPasswordVisible = !this.isPasswordVisible;
+            input.type = this.isPasswordVisible ? 'text' : 'password';
+        };
+        this.renderInlineInputContent = () => {
+            if (this.hasIconSlot) {
+                return (h("div", { class: "input-content" }, this.renderInputWithIcon()));
+            }
+            else {
+                return (h("div", { class: "input-content" }, this.renderInputWithoutIcon()));
+            }
+        };
+        this.renderInputContent = () => {
+            return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon();
+        };
+        this.renderInputWithIcon = () => {
+            return (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput(), this.renderButton(), this.renderHelpText()));
+        };
+        this.renderInputWithoutIcon = () => {
+            return [
+                this.renderInput(),
+                this.renderButton(),
+                this.renderHelpText()
+            ];
         };
         this.defaultID = `br-input-${uuidv4()}`;
         this.type = 'text';
@@ -61,7 +82,7 @@ export class Input {
         this.required = false;
         this.value = undefined;
         this.helpText = undefined;
-        this.showIconTextPassword = false;
+        this.isPasswordVisible = false;
         this.hasIconSlot = false;
         this.hasActionSlot = false;
     }
@@ -140,7 +161,7 @@ export class Input {
         return null;
     }
     render() {
-        return (h(Host, { key: '04d44896164c990470d07dde9bd531afa826dfe2' }, h("div", { key: '9605db5f9260861938915b37dda216b5babf2ea1', class: this.getInputCssClassMap() }, this.renderLabel(), this.hasIconSlot ? (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput())) : (this.renderInput()), this.renderButton(), this.renderHelpText())));
+        return (h(Host, { key: 'd589b969868e4d97d2aa6ac92a364a18eb8fc772' }, h("div", { key: '1f3dc623db346676c696c3b5347a4e39111fe581', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? (this.renderInlineInputContent()) : (this.renderInputContent()))));
     }
     static get is() { return "br-input"; }
     static get encapsulation() { return "shadow"; }
@@ -479,7 +500,7 @@ export class Input {
     }
     static get states() {
         return {
-            "showIconTextPassword": {},
+            "isPasswordVisible": {},
             "hasIconSlot": {},
             "hasActionSlot": {}
         };

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAC9G,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAA;AACnC,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;;;;GAOG;AAOH,MAAM,OAAO,KAAK;;QAsRR,wBAAmB,GAAe,EAAE,CAAA;QAM3B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YAC9C,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAA;YACrD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC,CAAA;QAEgB,gBAAW,GAAG,GAAG,EAAE;;YAClC,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,CAAC,EAAE,CAAC;gBAC3B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,OAAO,CACL,WAAK,KAAK,EAAC,aAAa;wBACtB,aAAO,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,SAAS,IAC/C,IAAI,CAAC,KAAK,CACL,CACJ,CACP,CAAA;gBACH,CAAC;qBAAM,CAAC;oBACN,OAAO,aAAO,OAAO,EAAE,IAAI,CAAC,SAAS,IAAG,IAAI,CAAC,KAAK,CAAS,CAAA;gBAC7D,CAAC;YACH,CAAC;QACH,CAAC,CAAA;QAEgB,6BAAwB,GAAG,GAAG,EAAE;YAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YACvD,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAA;YAC5D,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,CAAA;QACvD,CAAC,CAAA;QAMgB,gBAAW,GAAG,GAAG,EAAE;YAClC,OAAO,CACL,2BACE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,EAClD,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,IAAI,CAAC,mBAAmB,EAC5B,CACH,CAAA;QACH,CAAC,CAAA;QAEgB,mBAAc,GAAG,GAAG,EAAE;;YACrC,OAAO,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,aAAI,IAAI,CAAC,QAAQ,CAAK,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAAA;QAC5F,CAAC,CAAA;QAEgB,uBAAkB,GAAG,GAAG,EAAE;YACzC,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAA;YAC/C,OAAO,4BAAoB,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,GAAY,CAAA;QAC7F,CAAC,CAAA;yBAxU4C,YAAY,MAAM,EAAE,EAAE;oBAyBvD,MAAM;;uBAU+C,QAAQ;wBAK5B,KAAK;wBAKL,KAAK;2BAKF,KAAK;uBAKT,KAAK;sBAKN,KAAK;oBAKP,KAAK;uBAKF,KAAK;;;;wBAoBJ,KAAK;wBAKL,KAAK;;;oCAaT,KAAK;2BAEd,KAAK;6BAEH,KAAK;;IAOvC,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAC9C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;QAClD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAQD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;IAC7B,CAAC;IASD,sBAAsB,CAAC,IAAc;QACnC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC1C,CAAC;IASD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC5C,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAA;IACjC,CAAC;IAUD,wBAAwB,CAAC,KAAa,EAAE,KAAa;QACnD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IACtD,CAAC;IAEO,mBAAmB;QACzB,OAAO;YACL,UAAU,EAAE,IAAI;YAChB,cAAc,EAAE,IAAI,CAAC,aAAa;YAClC,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACjC,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,iBAAiB,EAAE,IAAI,CAAC,WAAW;YACnC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAA;IACH,CAAC;IAmCO,cAAc,CAAC,QAAgB;QACrC,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAA;IAC/D,CAAC;IA8BO,cAAc;QACpB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;gBACrB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACP,CAAA;QACH,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,OAAO,CACL,iBACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,OAAO,gBACJ,4CAAwB,EACnC,OAAO,EAAE,IAAI,CAAC,wBAAwB,IAErC,IAAI,CAAC,kBAAkB,EAAE,CAChB,CACb,CAAA;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;YACzC,OAAO,CACL,iBACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,OAAO,gBACJ,4CAAwB;gBAGnC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACjB,CACb,CAAA;QACH,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE;gBACnC,IAAI,CAAC,WAAW,EAAE;gBAElB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,WAAK,KAAK,EAAC,aAAa;oBACrB,IAAI,CAAC,cAAc,EAAE;oBACrB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,EAAE,CACnB;gBAEA,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,cAAc,EAAE,CAClB,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 campo de entrada.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) defaultID: 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    | '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   * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n   */\n  @Prop({ reflect: true }) success: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de validação com erro.\n   */\n  @Prop({ reflect: true }) danger: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado informativo.\n   */\n  @Prop({ reflect: true }) info: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de alerta.\n   */\n  @Prop({ reflect: true }) warning: boolean = false\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() showIconTextPassword: boolean = false\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\n\n  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n  }\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.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é associado ou removido de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n   *\n   * @param form - Dados do formulário associado.\n   */\n  @Event() brFormAssociatedCallback: EventEmitter<FormData>\n  formAssociatedCallback(form: FormData) {\n    this.brFormAssociatedCallback.emit(form)\n  }\n\n  /**\n   * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n   *\n   * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n   */\n  @Event() brFormDisabledCallback: EventEmitter<boolean>\n  formDisabledCallback(disabled: boolean) {\n    this.brFormDisabledCallback.emit(disabled)\n  }\n\n  /**\n   * Emite um evento quando um `<form>` é resetado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n   */\n  @Event() brFormResetCallback: EventEmitter<void>\n  formResetCallback() {\n    this.brFormResetCallback.emit()\n  }\n\n  /**\n   * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n   *\n   * @param state - Estado restaurado do formulário.\n   * @param _mode - Modo de preenchimento automático do navegador.\n   */\n  @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n  formStateRestoreCallback(state: string, _mode: string) {\n    this.brFormStateRestoreCallback.emit([state, _mode])\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.success,\n      danger: this.danger,\n      info: this.info,\n      warning: this.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.defaultID}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.defaultID}>{this.label}</label>\n      }\n    }\n  }\n\n  private readonly togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    input.type = input.type === 'password' ? 'text' : 'password'\n    this.showIconTextPassword = input.type === 'password'\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.defaultID}\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 showPassword = !this.showIconTextPassword\n    return <br-icon icon-name={showPassword ? 'fa-solid:eye' : 'fa-solid:eye-slash'}></br-icon>\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  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.hasIconSlot ? (\n            <div class=\"input-group\">\n              {this.renderIconSlot()}\n              {this.renderInput()}\n            </div>\n          ) : (\n            this.renderInput()\n          )}\n\n          {this.renderButton()}\n          {this.renderHelpText()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["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 campo de entrada.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) defaultID: 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    | '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   * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n   */\n  @Prop({ reflect: true }) success: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de validação com erro.\n   */\n  @Prop({ reflect: true }) danger: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado informativo.\n   */\n  @Prop({ reflect: true }) info: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de alerta.\n   */\n  @Prop({ reflect: true }) warning: boolean = false\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  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n  }\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.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é associado ou removido de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n   *\n   * @param form - Dados do formulário associado.\n   */\n  @Event() brFormAssociatedCallback: EventEmitter<FormData>\n  formAssociatedCallback(form: FormData) {\n    this.brFormAssociatedCallback.emit(form)\n  }\n\n  /**\n   * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n   *\n   * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n   */\n  @Event() brFormDisabledCallback: EventEmitter<boolean>\n  formDisabledCallback(disabled: boolean) {\n    this.brFormDisabledCallback.emit(disabled)\n  }\n\n  /**\n   * Emite um evento quando um `<form>` é resetado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n   */\n  @Event() brFormResetCallback: EventEmitter<void>\n  formResetCallback() {\n    this.brFormResetCallback.emit()\n  }\n\n  /**\n   * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n   *\n   * @param state - Estado restaurado do formulário.\n   * @param _mode - Modo de preenchimento automático do navegador.\n   */\n  @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n  formStateRestoreCallback(state: string, _mode: string) {\n    this.brFormStateRestoreCallback.emit([state, _mode])\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.success,\n      danger: this.danger,\n      info: this.info,\n      warning: this.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.defaultID}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.defaultID}>{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.defaultID}\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"]}

package/dist/collection/components/item/item.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }

package/dist/collection/components/list/list.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }

package/dist/collection/components/loading/loading.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }
@@ -569,6 +551,13 @@ code,
   animation: fill ease-in-out 2s;
   transform: rotate(9deg);
 }
+.loading[data-progress="8"] .br-loading-mask.full,
+.loading[data-progress="8"] .br-loading-fill,
+.br-loading[data-progress="8"] .br-loading-mask.full,
+.br-loading[data-progress="8"] .br-loading-fill {
+  animation: fill ease-in-out 2s;
+  transform: rotate(14.4deg);
+}
 .loading[data-progress="10"] .br-loading-mask.full,
 .loading[data-progress="10"] .br-loading-fill,
 .br-loading[data-progress="10"] .br-loading-mask.full,

package/dist/collection/components/message/message.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }

package/dist/collection/components/radio/radio.css

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -352,19 +347,6 @@ textarea,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }