@govbr-ds/webcomponents 2.0.0-next.5 → 2.0.0-next.6

package/dist/collection/components/icon/icon.js

@@ -0,0 +1,324 @@
+import { h, Host } from "@stencil/core";
+import "iconify-icon";
+import { inheritAriaAttributes } from "../../utils/inherited-attributes";
+export class Icon {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.IconName = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.class = undefined;
+        this.inline = false;
+        this.rotate = undefined;
+        this.flip = undefined;
+    }
+    connectedCallback() {
+        this.brConnectedCallback.emit(this);
+    }
+    componentWillLoad() {
+        this.brComponentWillLoad.emit(this);
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    componentDidLoad() {
+        this.brComponentDidLoad.emit(this);
+    }
+    componentWillRender() {
+        this.brComponentWillRender.emit(this);
+    }
+    componentDidRender() {
+        this.brComponentDidRender.emit(this);
+    }
+    componentShouldUpdate() {
+        this.brComponentShouldUpdate.emit(this);
+    }
+    componentWillUpdate() {
+        this.brComponentWillUpdate.emit(this);
+    }
+    componentDidUpdate() {
+        this.brComponentDidUpdate.emit(this);
+    }
+    disconnectedCallback() {
+        this.brDisconnectedCallback.emit(this);
+    }
+    render() {
+        return (h(Host, { key: 'b26b2da21c7f395e42c9f73d0f7c3663b1bd6d5c' }, h("iconify-icon", Object.assign({ key: 'eb22872b7e12ef49253ca6f2ed829929d5376fe8', flip: this.flip, width: this.width, class: this.class, icon: this.IconName, inline: this.inline, height: this.height, rotate: this.rotate }, this.inheritedAttributes))));
+    }
+    static get is() { return "br-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "IconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do \u00EDcone Iconify a ser exibido"
+                },
+                "attribute": "icon-name",
+                "reflect": true
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Altura do \u00EDcone, pode ser especificada em qualquer unidade CSS v\u00E1lida (px, em, rem, etc.)"
+                },
+                "attribute": "height",
+                "reflect": true
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Largura do \u00EDcone, pode ser especificada em qualquer unidade CSS v\u00E1lida (px, em, rem, etc.)"
+                },
+                "attribute": "width",
+                "reflect": true
+            },
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Classes CSS adicionais a serem aplicadas ao \u00EDcone"
+                },
+                "attribute": "class",
+                "reflect": true
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Adiciona alinhamento vertical ao \u00EDcone quando embutido no texto"
+                },
+                "attribute": "inline",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "rotate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Rotaciona o \u00EDcone em diferentes \u00E2ngulos. Aceita valores como \"90deg\", \"180deg\", \"270deg\"."
+                },
+                "attribute": "rotate",
+                "reflect": true
+            },
+            "flip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Espelha o \u00EDcone horizontalmente, verticalmente ou ambos. Aceita valores \"horizontal\", \"vertical\"."
+                },
+                "attribute": "flip",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brConnectedCallback",
+                "name": "brConnectedCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado quando o componente \u00E9 conectado ao DOM. Consulte a documenta\u00E7\u00E3o do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback)."
+                },
+                "complexType": {
+                    "original": "this",
+                    "resolved": "this",
+                    "references": {}
+                }
+            }, {
+                "method": "brComponentWillLoad",
+                "name": "brComponentWillLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado antes do componente ser carregado. Consulte a documenta\u00E7\u00E3o do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback)."
+                },
+                "complexType": {
+                    "original": "this",
+                    "resolved": "this",
+                    "references": {}
+                }
+            }, {
+                "method": "brComponentDidLoad",
+                "name": "brComponentDidLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado ap\u00F3s o componente ser carregado. Consulte a documenta\u00E7\u00E3o do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback)."
+                },
+                "complexType": {
+                    "original": "this",
+                    "resolved": "this",
+                    "references": {}
+                }
+            }, {
+                "method": "brComponentWillRender",
+                "name": "brComponentWillRender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado antes do componente ser renderizado. Consulte a documenta\u00E7\u00E3o do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback)."
+                },
+                "complexType": {
+                    "original": "this",
+                    "resolved": "this",
+                    "references": {}
+                }
+            }, {
+                "method": "brComponentDidRender",
+                "name": "brComponentDidRender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado ap\u00F3s o componente ser renderizado. Consulte a documenta\u00E7\u00E3o do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback)."
+                },
+                "complexType": {
+                    "original": "this",
+                    "resolved": "this",
+                    "references": {}
+                }
+            }, {
+                "method": "brComponentShouldUpdate",
+                "name": "brComponentShouldUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado antes do componente ser atualizado. Consulte a documenta\u00E7\u00E3o do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback)."
+                },
+                "complexType": {
+                    "original": "this",
+                    "resolved": "this",
+                    "references": {}
+                }
+            }, {
+                "method": "brComponentWillUpdate",
+                "name": "brComponentWillUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado antes do componente ser atualizado. Consulte a documenta\u00E7\u00E3o do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback)."
+                },
+                "complexType": {
+                    "original": "this",
+                    "resolved": "this",
+                    "references": {}
+                }
+            }, {
+                "method": "brComponentDidUpdate",
+                "name": "brComponentDidUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado ap\u00F3s o componente ser atualizado. Consulte a documenta\u00E7\u00E3o do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback)."
+                },
+                "complexType": {
+                    "original": "this",
+                    "resolved": "this",
+                    "references": {}
+                }
+            }, {
+                "method": "brDisconnectedCallback",
+                "name": "brDisconnectedCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado quando o componente \u00E9 desconectado do DOM. Consulte a documenta\u00E7\u00E3o do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback)."
+                },
+                "complexType": {
+                    "original": "this",
+                    "resolved": "this",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACvG,OAAO,cAAc,CAAA;AACrB,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAQpF,MAAM,OAAO,IAAI;;QA2BP,wBAAmB,GAAe,EAAE,CAAA;;;;;sBARA,KAAK;;;;IAYjD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACrC,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACnC,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAID,gBAAgB;QACd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC;IAID,mBAAmB;QACjB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACvC,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACtC,CAAC;IAID,qBAAqB;QACnB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC;IAID,mBAAmB;QACjB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACvC,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACtC,CAAC;IAID,oBAAoB;QAClB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mFACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,IACf,IAAI,CAAC,mBAAmB,EACd,CACX,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core'\nimport 'iconify-icon'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\n\n@Component({\n  tag: 'br-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Icon {\n  /** Elemento host */\n  @Element() el: HTMLElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /** Nome do ícone Iconify a ser exibido */\n  @Prop({ reflect: true }) IconName: string\n\n  /** Altura do ícone, pode ser especificada em qualquer unidade CSS válida (px, em, rem, etc.) */\n  @Prop({ reflect: true }) height: string\n\n  /** Largura do ícone, pode ser especificada em qualquer unidade CSS válida (px, em, rem, etc.) */\n  @Prop({ reflect: true }) width: string\n\n  /** Classes CSS adicionais a serem aplicadas ao ícone */\n  @Prop({ reflect: true }) class?: string\n\n  /** Adiciona alinhamento vertical ao ícone quando embutido no texto */\n  @Prop({ reflect: true }) inline?: boolean = false\n\n  /** Rotaciona o ícone em diferentes ângulos. Aceita valores como \"90deg\", \"180deg\", \"270deg\". */\n  @Prop({ reflect: true }) rotate?: string\n\n  /** Espelha o ícone horizontalmente, verticalmente ou ambos. Aceita valores \"horizontal\", \"vertical\". */\n  @Prop({ reflect: true }) flip?: string\n\n  private inheritedAttributes: Attributes = {}\n\n  /** Disparado quando o componente é conectado ao DOM. Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brConnectedCallback: EventEmitter<this>\n  connectedCallback() {\n    this.brConnectedCallback.emit(this)\n  }\n\n  /** Disparado antes do componente ser carregado. Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentWillLoad: EventEmitter<this>\n  componentWillLoad() {\n    this.brComponentWillLoad.emit(this)\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /** Disparado após o componente ser carregado. Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentDidLoad: EventEmitter<this>\n  componentDidLoad() {\n    this.brComponentDidLoad.emit(this)\n  }\n\n  /** Disparado antes do componente ser renderizado. Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentWillRender: EventEmitter<this>\n  componentWillRender() {\n    this.brComponentWillRender.emit(this)\n  }\n\n  /** Disparado após o componente ser renderizado. Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentDidRender: EventEmitter<this>\n  componentDidRender() {\n    this.brComponentDidRender.emit(this)\n  }\n\n  /** Disparado antes do componente ser atualizado. Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentShouldUpdate: EventEmitter<this>\n  componentShouldUpdate() {\n    this.brComponentShouldUpdate.emit(this)\n  }\n\n  /** Disparado antes do componente ser atualizado. Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentWillUpdate: EventEmitter<this>\n  componentWillUpdate() {\n    this.brComponentWillUpdate.emit(this)\n  }\n\n  /** Disparado após o componente ser atualizado. Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentDidUpdate: EventEmitter<this>\n  componentDidUpdate() {\n    this.brComponentDidUpdate.emit(this)\n  }\n\n  /** Disparado quando o componente é desconectado do DOM. Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brDisconnectedCallback: EventEmitter<this>\n  disconnectedCallback() {\n    this.brDisconnectedCallback.emit(this)\n  }\n\n  render() {\n    return (\n      <Host>\n        <iconify-icon\n          flip={this.flip}\n          width={this.width}\n          class={this.class}\n          icon={this.IconName}\n          inline={this.inline}\n          height={this.height}\n          rotate={this.rotate}\n          {...this.inheritedAttributes}\n        ></iconify-icon>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/icon/tests/icon.e2e.js

@@ -0,0 +1,107 @@
+// import AxeBuilder from '@axe-core/playwright'
+// import { expect, test } from '@playwright/test'
+// test.describe('br-icon', () => {
+//   test('should render with the "hydrated" class', async ({ page }) => {
+//     await page.goto('icon')
+//     await page.setContent('<br-icon></br-icon>')
+//     const element = await page.locator('br-icon')
+//     await expect(element).toHaveClass(/hydrated/)
+//   })
+//   test('should render with "brand" icon-style', async ({ page }) => {
+//     const props = [
+//       {
+//         name: 'name',
+//         value: 'node-js',
+//       },
+//       {
+//         name: 'icon-style',
+//         value: 'brand',
+//       },
+//     ]
+//     const expectedDataPrefix = 'fab'
+//     await page.goto('icon')
+//     await page.setContent(
+//       `<br-icon ${props[0].name}="${props[0].value}" ${props[1].name}="${props[1].value}"></br-icon>`
+//     )
+//     const svgIcon = await page.locator('br-icon svg')
+//     await expect(svgIcon).toHaveAttribute('data-prefix', expectedDataPrefix)
+//   })
+//   test('should render with "regular" icon-style', async ({ page }) => {
+//     const props = [
+//       {
+//         name: 'name',
+//         value: 'envelope',
+//       },
+//       {
+//         name: 'icon-style',
+//         value: 'regular',
+//       },
+//     ]
+//     const expectedDataPrefix = 'far'
+//     await page.goto('icon')
+//     await page.setContent(
+//       `<br-icon ${props[0].name}="${props[0].value}" ${props[1].name}="${props[1].value}"></br-icon>`
+//     )
+//     const svgIcon = await page.locator('br-icon svg')
+//     await expect(svgIcon).toHaveAttribute('data-prefix', expectedDataPrefix)
+//   })
+//   test('should render with "solid" icon-style', async ({ page }) => {
+//     const props = [
+//       {
+//         name: 'name',
+//         value: 'camera',
+//       },
+//       {
+//         name: 'icon-style',
+//         value: 'solid',
+//       },
+//     ]
+//     const expectedDataPrefix = 'fas'
+//     await page.goto('icon')
+//     await page.setContent(
+//       `<br-icon ${props[0].name}="${props[0].value}" ${props[1].name}="${props[1].value}"></br-icon>`
+//     )
+//     const svgIcon = await page.locator('br-icon svg')
+//     await expect(svgIcon).toHaveAttribute('data-prefix', expectedDataPrefix)
+//   })
+//   test('should render with a specified icon name', async ({ page }) => {
+//     const props = [
+//       {
+//         name: 'name',
+//         value: 'node-js',
+//       },
+//       {
+//         name: 'icon-style',
+//         value: 'brand',
+//       },
+//     ]
+//     await page.goto('icon')
+//     await page.setContent(
+//       `<br-icon ${props[0].name}="${props[0].value}" ${props[1].name}="${props[1].value}"></br-icon>`
+//     )
+//     const svgIcon = await page.locator('br-icon svg')
+//     await expect(svgIcon).toHaveAttribute('data-icon', props[0].value)
+//   })
+//   test('should not have any automatically detectable WCAG A or AA violations', async ({ page }) => {
+//     const props = [
+//       {
+//         name: 'name',
+//         value: 'camera',
+//       },
+//       {
+//         name: 'icon-style',
+//         value: 'solid',
+//       },
+//     ]
+//     await page.goto('icon')
+//     await page.setContent(
+//       `<br-icon ${props[0].name}="${props[0].value}" ${props[1].name}="${props[1].value}"></br-icon>`
+//     )
+//     const accessibilityScanResults = await new AxeBuilder({ page })
+//       .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+//       .disableRules(['color-contrast', 'html-has-lang', 'document-title'])
+//       .analyze()
+//     expect(accessibilityScanResults.violations).toEqual([])
+//   })
+// })
+//# sourceMappingURL=icon.e2e.js.map

package/dist/collection/components/icon/tests/icon.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.e2e.js","sourceRoot":"","sources":["../../../../src/components/icon/tests/icon.e2e.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,kDAAkD;AAElD,mCAAmC;AACnC,0EAA0E;AAC1E,8BAA8B;AAC9B,mDAAmD;AAEnD,oDAAoD;AACpD,oDAAoD;AACpD,OAAO;AAEP,wEAAwE;AACxE,sBAAsB;AACtB,UAAU;AACV,wBAAwB;AACxB,4BAA4B;AAC5B,WAAW;AACX,UAAU;AACV,8BAA8B;AAC9B,0BAA0B;AAC1B,WAAW;AACX,QAAQ;AACR,uCAAuC;AACvC,8BAA8B;AAC9B,6BAA6B;AAC7B,wGAAwG;AACxG,QAAQ;AAER,wDAAwD;AACxD,+EAA+E;AAC/E,OAAO;AAEP,0EAA0E;AAC1E,sBAAsB;AACtB,UAAU;AACV,wBAAwB;AACxB,6BAA6B;AAC7B,WAAW;AACX,UAAU;AACV,8BAA8B;AAC9B,4BAA4B;AAC5B,WAAW;AACX,QAAQ;AACR,uCAAuC;AACvC,8BAA8B;AAC9B,6BAA6B;AAC7B,wGAAwG;AACxG,QAAQ;AAER,wDAAwD;AACxD,+EAA+E;AAC/E,OAAO;AAEP,wEAAwE;AACxE,sBAAsB;AACtB,UAAU;AACV,wBAAwB;AACxB,2BAA2B;AAC3B,WAAW;AACX,UAAU;AACV,8BAA8B;AAC9B,0BAA0B;AAC1B,WAAW;AACX,QAAQ;AACR,uCAAuC;AACvC,8BAA8B;AAC9B,6BAA6B;AAC7B,wGAAwG;AACxG,QAAQ;AAER,wDAAwD;AACxD,+EAA+E;AAC/E,OAAO;AAEP,2EAA2E;AAC3E,sBAAsB;AACtB,UAAU;AACV,wBAAwB;AACxB,4BAA4B;AAC5B,WAAW;AACX,UAAU;AACV,8BAA8B;AAC9B,0BAA0B;AAC1B,WAAW;AACX,QAAQ;AACR,8BAA8B;AAC9B,6BAA6B;AAC7B,wGAAwG;AACxG,QAAQ;AAER,wDAAwD;AACxD,yEAAyE;AACzE,OAAO;AAEP,uGAAuG;AACvG,sBAAsB;AACtB,UAAU;AACV,wBAAwB;AACxB,2BAA2B;AAC3B,WAAW;AACX,UAAU;AACV,8BAA8B;AAC9B,0BAA0B;AAC1B,WAAW;AACX,QAAQ;AACR,8BAA8B;AAC9B,6BAA6B;AAC7B,wGAAwG;AACxG,QAAQ;AAER,sEAAsE;AACtE,gEAAgE;AAChE,6EAA6E;AAC7E,mBAAmB;AAEnB,8DAA8D;AAC9D,OAAO;AACP,KAAK","sourcesContent":["// import AxeBuilder from '@axe-core/playwright'\n// import { expect, test } from '@playwright/test'\n\n// test.describe('br-icon', () => {\n//   test('should render with the \"hydrated\" class', async ({ page }) => {\n//     await page.goto('icon')\n//     await page.setContent('<br-icon></br-icon>')\n\n//     const element = await page.locator('br-icon')\n//     await expect(element).toHaveClass(/hydrated/)\n//   })\n\n//   test('should render with \"brand\" icon-style', async ({ page }) => {\n//     const props = [\n//       {\n//         name: 'name',\n//         value: 'node-js',\n//       },\n//       {\n//         name: 'icon-style',\n//         value: 'brand',\n//       },\n//     ]\n//     const expectedDataPrefix = 'fab'\n//     await page.goto('icon')\n//     await page.setContent(\n//       `<br-icon ${props[0].name}=\"${props[0].value}\" ${props[1].name}=\"${props[1].value}\"></br-icon>`\n//     )\n\n//     const svgIcon = await page.locator('br-icon svg')\n//     await expect(svgIcon).toHaveAttribute('data-prefix', expectedDataPrefix)\n//   })\n\n//   test('should render with \"regular\" icon-style', async ({ page }) => {\n//     const props = [\n//       {\n//         name: 'name',\n//         value: 'envelope',\n//       },\n//       {\n//         name: 'icon-style',\n//         value: 'regular',\n//       },\n//     ]\n//     const expectedDataPrefix = 'far'\n//     await page.goto('icon')\n//     await page.setContent(\n//       `<br-icon ${props[0].name}=\"${props[0].value}\" ${props[1].name}=\"${props[1].value}\"></br-icon>`\n//     )\n\n//     const svgIcon = await page.locator('br-icon svg')\n//     await expect(svgIcon).toHaveAttribute('data-prefix', expectedDataPrefix)\n//   })\n\n//   test('should render with \"solid\" icon-style', async ({ page }) => {\n//     const props = [\n//       {\n//         name: 'name',\n//         value: 'camera',\n//       },\n//       {\n//         name: 'icon-style',\n//         value: 'solid',\n//       },\n//     ]\n//     const expectedDataPrefix = 'fas'\n//     await page.goto('icon')\n//     await page.setContent(\n//       `<br-icon ${props[0].name}=\"${props[0].value}\" ${props[1].name}=\"${props[1].value}\"></br-icon>`\n//     )\n\n//     const svgIcon = await page.locator('br-icon svg')\n//     await expect(svgIcon).toHaveAttribute('data-prefix', expectedDataPrefix)\n//   })\n\n//   test('should render with a specified icon name', async ({ page }) => {\n//     const props = [\n//       {\n//         name: 'name',\n//         value: 'node-js',\n//       },\n//       {\n//         name: 'icon-style',\n//         value: 'brand',\n//       },\n//     ]\n//     await page.goto('icon')\n//     await page.setContent(\n//       `<br-icon ${props[0].name}=\"${props[0].value}\" ${props[1].name}=\"${props[1].value}\"></br-icon>`\n//     )\n\n//     const svgIcon = await page.locator('br-icon svg')\n//     await expect(svgIcon).toHaveAttribute('data-icon', props[0].value)\n//   })\n\n//   test('should not have any automatically detectable WCAG A or AA violations', async ({ page }) => {\n//     const props = [\n//       {\n//         name: 'name',\n//         value: 'camera',\n//       },\n//       {\n//         name: 'icon-style',\n//         value: 'solid',\n//       },\n//     ]\n//     await page.goto('icon')\n//     await page.setContent(\n//       `<br-icon ${props[0].name}=\"${props[0].value}\" ${props[1].name}=\"${props[1].value}\"></br-icon>`\n//     )\n\n//     const accessibilityScanResults = await new AxeBuilder({ page })\n//       .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])\n//       .disableRules(['color-contrast', 'html-has-lang', 'document-title'])\n//       .analyze()\n\n//     expect(accessibilityScanResults.violations).toEqual([])\n//   })\n// })\n"]}

package/dist/collection/components/icon/tests/icon.spec.js

@@ -0,0 +1,80 @@
+// import { newSpecPage } from '@stencil/core/testing'
+// import { Icon } from '../icon'
+// describe('br-icon', () => {
+//   it('should render the icon with default style and icon name "camera"', async () => {
+//     const prop = {
+//       name: 'name',
+//       value: 'camera',
+//     }
+//     const page = await newSpecPage({
+//       components: [Icon],
+//       html: `<br-icon ${prop.name}="${prop.value}"></br-icon>`,
+//     })
+//     expect(page.root).toEqualHtml(`
+//       <br-icon icon-style="solid" name="camera">
+//         <mock:shadow-root>
+//           <div class="br-icon">
+//             <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="camera" class="svg-inline--fa fa-camera" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+//               <path fill="currentColor" d="M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"></path>
+//             </svg>
+//           </div>
+//         </mock:shadow-root>
+//       </br-icon>
+//     `)
+//   })
+//   it('should render the icon with brand style and icon name "node-js"', async () => {
+//     const prop = [
+//       {
+//         name: 'name',
+//         value: 'node-js',
+//       },
+//       {
+//         name: 'icon-style',
+//         value: 'brand',
+//       },
+//     ]
+//     const page = await newSpecPage({
+//       components: [Icon],
+//       html: `<br-icon ${prop[0].name}="${prop[0].value}" ${prop[1].name}="${prop[1].value}"></br-icon>`,
+//     })
+//     expect(page.root).toEqualHtml(`
+//       <br-icon icon-style="brand" name="node-js">
+//         <mock:shadow-root>
+//           <div class="br-icon">
+//             <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="node-js" class="svg-inline--fa fa-node-js" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+//               <path fill="currentColor" d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z"></path>
+//             </svg>
+//           </div>
+//         </mock:shadow-root>
+//       </br-icon>
+//     `)
+//   })
+//   it('should render the icon with regular style and icon name "envelope"', async () => {
+//     const prop = [
+//       {
+//         name: 'name',
+//         value: 'envelope',
+//       },
+//       {
+//         name: 'icon-style',
+//         value: 'regular',
+//       },
+//     ]
+//     const page = await newSpecPage({
+//       components: [Icon],
+//       html: `<br-icon ${prop[0].name}="${prop[0].value}" ${prop[1].name}="${prop[1].value}"></br-icon>`,
+//     })
+//     expect(page.root).toEqualHtml(`
+//       <br-icon icon-style="regular" name="envelope">
+//         <mock:shadow-root>
+//           <div class="br-icon">
+//             <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="envelope" class="svg-inline--fa fa-envelope" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+//               <path fill="currentColor" d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"></path>
+//             </svg>
+//           </div>
+//         </mock:shadow-root>
+//       </br-icon>
+//     `)
+//   })
+// })
+//# sourceMappingURL=icon.spec.js.map

package/dist/collection/components/icon/tests/icon.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.spec.js","sourceRoot":"","sources":["../../../../src/components/icon/tests/icon.spec.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,iCAAiC;AAEjC,8BAA8B;AAC9B,yFAAyF;AACzF,qBAAqB;AACrB,sBAAsB;AACtB,yBAAyB;AACzB,QAAQ;AACR,uCAAuC;AACvC,4BAA4B;AAC5B,kEAAkE;AAClE,SAAS;AAET,sCAAsC;AACtC,mDAAmD;AACnD,6BAA6B;AAC7B,kCAAkC;AAClC,mMAAmM;AACnM,2SAA2S;AAC3S,qBAAqB;AACrB,mBAAmB;AACnB,8BAA8B;AAC9B,mBAAmB;AACnB,SAAS;AACT,OAAO;AAEP,wFAAwF;AACxF,qBAAqB;AACrB,UAAU;AACV,wBAAwB;AACxB,4BAA4B;AAC5B,WAAW;AACX,UAAU;AACV,8BAA8B;AAC9B,0BAA0B;AAC1B,WAAW;AACX,QAAQ;AACR,uCAAuC;AACvC,4BAA4B;AAC5B,2GAA2G;AAC3G,SAAS;AAET,sCAAsC;AACtC,oDAAoD;AACpD,6BAA6B;AAC7B,kCAAkC;AAClC,qMAAqM;AACrM,mnCAAmnC;AACnnC,qBAAqB;AACrB,mBAAmB;AACnB,8BAA8B;AAC9B,mBAAmB;AACnB,SAAS;AACT,OAAO;AAEP,2FAA2F;AAC3F,qBAAqB;AACrB,UAAU;AACV,wBAAwB;AACxB,6BAA6B;AAC7B,WAAW;AACX,UAAU;AACV,8BAA8B;AAC9B,4BAA4B;AAC5B,WAAW;AACX,QAAQ;AACR,uCAAuC;AACvC,4BAA4B;AAC5B,2GAA2G;AAC3G,SAAS;AAET,sCAAsC;AACtC,uDAAuD;AACvD,6BAA6B;AAC7B,kCAAkC;AAClC,uMAAuM;AACvM,sXAAsX;AACtX,qBAAqB;AACrB,mBAAmB;AACnB,8BAA8B;AAC9B,mBAAmB;AACnB,SAAS;AACT,OAAO;AACP,KAAK","sourcesContent":["// import { newSpecPage } from '@stencil/core/testing'\n// import { Icon } from '../icon'\n\n// describe('br-icon', () => {\n//   it('should render the icon with default style and icon name \"camera\"', async () => {\n//     const prop = {\n//       name: 'name',\n//       value: 'camera',\n//     }\n//     const page = await newSpecPage({\n//       components: [Icon],\n//       html: `<br-icon ${prop.name}=\"${prop.value}\"></br-icon>`,\n//     })\n\n//     expect(page.root).toEqualHtml(`\n//       <br-icon icon-style=\"solid\" name=\"camera\">\n//         <mock:shadow-root>\n//           <div class=\"br-icon\">\n//             <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"camera\" class=\"svg-inline--fa fa-camera\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n//               <path fill=\"currentColor\" d=\"M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z\"></path>\n//             </svg>\n//           </div>\n//         </mock:shadow-root>\n//       </br-icon>\n//     `)\n//   })\n\n//   it('should render the icon with brand style and icon name \"node-js\"', async () => {\n//     const prop = [\n//       {\n//         name: 'name',\n//         value: 'node-js',\n//       },\n//       {\n//         name: 'icon-style',\n//         value: 'brand',\n//       },\n//     ]\n//     const page = await newSpecPage({\n//       components: [Icon],\n//       html: `<br-icon ${prop[0].name}=\"${prop[0].value}\" ${prop[1].name}=\"${prop[1].value}\"></br-icon>`,\n//     })\n\n//     expect(page.root).toEqualHtml(`\n//       <br-icon icon-style=\"brand\" name=\"node-js\">\n//         <mock:shadow-root>\n//           <div class=\"br-icon\">\n//             <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fab\" data-icon=\"node-js\" class=\"svg-inline--fa fa-node-js\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n//               <path fill=\"currentColor\" d=\"M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z\"></path>\n//             </svg>\n//           </div>\n//         </mock:shadow-root>\n//       </br-icon>\n//     `)\n//   })\n\n//   it('should render the icon with regular style and icon name \"envelope\"', async () => {\n//     const prop = [\n//       {\n//         name: 'name',\n//         value: 'envelope',\n//       },\n//       {\n//         name: 'icon-style',\n//         value: 'regular',\n//       },\n//     ]\n//     const page = await newSpecPage({\n//       components: [Icon],\n//       html: `<br-icon ${prop[0].name}=\"${prop[0].value}\" ${prop[1].name}=\"${prop[1].value}\"></br-icon>`,\n//     })\n\n//     expect(page.root).toEqualHtml(`\n//       <br-icon icon-style=\"regular\" name=\"envelope\">\n//         <mock:shadow-root>\n//           <div class=\"br-icon\">\n//             <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"envelope\" class=\"svg-inline--fa fa-envelope\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n//               <path fill=\"currentColor\" d=\"M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z\"></path>\n//             </svg>\n//           </div>\n//         </mock:shadow-root>\n//       </br-icon>\n//     `)\n//   })\n// })\n"]}

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

@@ -83,7 +83,7 @@ export class Input {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: 'ac4754444dbcdbcd9d1947a9e490bbea432feb4c' }, h("div", { key: 'd6b0c337087e8425337e8398f321fc28453c7aa7', class: this.getInputCssClassMap() }, this.label && (h("label", { key: '5774464ab8936bf6a8cbe311ed183b4da084f766', class: "text-nowrap", htmlFor: this.el.id }, this.label)), this.icon && (h("div", { key: '030195a9f2663f367fcd795c172e79b90350900e', class: "input-icon" }, h("slot", { key: '13592d36976c6b615307fe709462a39654f64e2d', name: "icon" }))), h("input", Object.assign({ key: 'cdc48565c110adb3b8ddd0776c8c0abce66c1df3', autocomplete: this.autocomplete, autofocus: this.autofocus, disabled: this.disabled, onInput: this.handleInput.bind(this), placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)), this.button && (h("br-button", { key: '5c52c25ad2a26285c66437082aa03fc0929e3e5d', class: "br-button", circle: true }, h("slot", { key: '9a0162c5cc0d1eec6d3a2c1804aea0704a1dd59d', name: "action" }))))));
+        return (h(Host, { key: '10d76e3d8526d57da98a8f3f03e58f78737cbf0a' }, h("div", { key: '674cdf3eda8f13021e02676ad04c4eccb40cf96e', class: this.getInputCssClassMap() }, this.label && (h("label", { key: '034e40975010c10833ef3bde1553fa57cdf654e3', class: "text-nowrap", htmlFor: this.el.id }, this.label)), this.icon && (h("div", { key: 'c2ace90ab1e4529f9993ee0848a7d22d362b84a5', class: "input-icon" }, h("slot", { key: '6a2bc341c47e7ace754c2a5f19040ed836645031', name: "icon" }))), h("input", Object.assign({ key: '55b8ddbe7ae043fa99428496cb8db7e9c2df2626', autocomplete: this.autocomplete, autofocus: this.autofocus, disabled: this.disabled, onInput: this.handleInput.bind(this), placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)), this.button && (h("br-button", { key: '34ef61913f82651b6c8aa34f27936b8048a70f08', class: "br-button", circle: true, "aria-label": 'bot\u00E3o de a\u00E7\u00E3o do \u00EDcone' }, h("slot", { key: 'abeca6596f1b146c26f3b6b41b11892c98f4e7c7', name: "action" }))))));
     }
     static get is() { return "br-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"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, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Consulte a [documentação GovBR-DS](https://www.gov.br/ds/components/input?tab=designer) para mais detalhes.\n *\n * @slot action Define a ação interna\n *\n */\n@Component({\n  tag: 'br-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input {\n  /** Elemento host */\n  @Element() el: HTMLInputElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /** Tipo de campo de entrada */\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  /**  Define o comportamento padrão do browser para autocomplete em formulários */\n  @Prop({ reflect: true }) autocomplete: 'on' | 'off'\n\n  /** Se definido como true, o campo de entrada receberá foco automaticamente quando o formulário for carregado */\n  @Prop({ reflect: true }) autofocus: boolean = false\n\n  /** Comportamento: densidade */\n  @Prop({ reflect: true }) density: 'small' | 'large' | '' = ''\n\n  /** Se definido como true, o campo de entrada é desabilitado e não pode ser interrompido. */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /** Define o label e input como comportamento inline */\n  @Prop({ reflect: true }) inline: boolean = false\n\n  /** Define se o input vai ser icon. Use o @slot icon para definir o ícone */\n  @Prop({ reflect: true }) icon: boolean = false\n\n  /** Define se o input vai ter um botão a direita */\n  @Prop({ reflect: true }) button: boolean = false\n\n  @Prop({ reflect: true }) highlight: boolean = false\n\n  @Prop({ reflect: true }) success: boolean = false\n\n  @Prop({ reflect: true }) danger: boolean = false\n\n  @Prop({ reflect: true }) info: boolean = false\n\n  @Prop({ reflect: true }) warning: boolean = false\n\n  /** Label para o input */\n  @Prop({ reflect: true }) label: string\n\n  /** Nome do campo de entrada */\n  @Prop({ reflect: true }) name: string\n\n  /** Uma dica ou sugestão exibida dentro do campo de entrada quando ele está vazio */\n  @Prop({ reflect: true }) placeholder: string\n\n  /** Se definido como true, o valor do campo de entrada pode ser exibido, mas não editado pelo usuário. */\n  @Prop({ reflect: true }) readonly: boolean = false\n\n  /** Se definido como true, o campo de entrada deve ser preenchido antes que o formulário possa ser enviado. */\n  @Prop({ reflect: true }) required: boolean = false\n\n  /** Valor inicial a ser exibido no campo de entrada. */\n  @Prop({ reflect: true, mutable: true }) value: string\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brConnectedCallback: EventEmitter<this>\n  connectedCallback() {\n    this.brConnectedCallback.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentWillLoad: EventEmitter<this>\n  componentWillLoad() {\n    this.brComponentWillLoad.emit(this)\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentDidLoad: EventEmitter<this>\n  componentDidLoad() {\n    this.brComponentDidLoad.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentWillRender: EventEmitter<this>\n  componentWillRender() {\n    this.brComponentWillRender.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentDidRender: EventEmitter<this>\n  componentDidRender() {\n    this.brComponentDidRender.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentShouldUpdate: EventEmitter<this>\n  componentShouldUpdate() {\n    this.brComponentShouldUpdate.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentWillUpdate: EventEmitter<this>\n  componentWillUpdate() {\n    this.brComponentWillUpdate.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentDidUpdate: EventEmitter<this>\n  componentDidUpdate() {\n    this.brComponentDidUpdate.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brDisconnectedCallback: EventEmitter<this>\n  disconnectedCallback() {\n    this.brDisconnectedCallback.emit(this)\n  }\n\n  /** Componente foi inserido em um `<form>` */\n  @Event() formAssociatedCallback: EventEmitter<this>\n  onFormAssociatedCallback(form) {\n    this.formAssociatedCallback.emit(form)\n  }\n\n  /** Componente foi removido de um `<form>` */\n  @Event() formDisassociatedCallback: EventEmitter<this>\n  onFormDisassociatedCallback(form) {\n    this.formDisassociatedCallback.emit(form)\n  }\n\n  private getInputCssClassMap(): CssClassMap {\n    return {\n      'br-input': true,\n      'input-button': this.button,\n      large: this.density === 'large',\n      small: this.density === 'small',\n      'input-inline': this.inline,\n      'input-highlight': this.highlight,\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  /** Valor atualizado do input */\n  @Event() valueChange!: EventEmitter<string>\n\n  private handleInput(event: Event) {\n    this.value = (event.target as HTMLInputElement).value\n    this.valueChange.emit(this.value)\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.label && (\n            <label class=\"text-nowrap\" htmlFor={this.el.id}>\n              {this.label}\n            </label>\n          )}\n          {this.icon && (\n            <div class=\"input-icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n          )}\n          <input\n            autocomplete={this.autocomplete}\n            autofocus={this.autofocus}\n            disabled={this.disabled}\n            onInput={this.handleInput.bind(this)}\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          {this.button && (\n            <br-button class=\"br-button\" circle>\n              <slot name=\"action\"></slot>\n            </br-button>\n          )}\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, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Consulte a [documentação GovBR-DS](https://www.gov.br/ds/components/input?tab=designer) para mais detalhes.\n *\n * @slot action Define a ação interna\n *\n */\n@Component({\n  tag: 'br-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input {\n  /** Elemento host */\n  @Element() el: HTMLInputElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /** Tipo de campo de entrada */\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  /**  Define o comportamento padrão do browser para autocomplete em formulários */\n  @Prop({ reflect: true }) autocomplete: 'on' | 'off'\n\n  /** Se definido como true, o campo de entrada receberá foco automaticamente quando o formulário for carregado */\n  @Prop({ reflect: true }) autofocus: boolean = false\n\n  /** Comportamento: densidade */\n  @Prop({ reflect: true }) density: 'small' | 'large' | '' = ''\n\n  /** Se definido como true, o campo de entrada é desabilitado e não pode ser interrompido. */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /** Define o label e input como comportamento inline */\n  @Prop({ reflect: true }) inline: boolean = false\n\n  /** Define se o input vai ser icon. Use o @slot icon para definir o ícone */\n  @Prop({ reflect: true }) icon: boolean = false\n\n  /** Define se o input vai ter um botão a direita */\n  @Prop({ reflect: true }) button: boolean = false\n\n  @Prop({ reflect: true }) highlight: boolean = false\n\n  @Prop({ reflect: true }) success: boolean = false\n\n  @Prop({ reflect: true }) danger: boolean = false\n\n  @Prop({ reflect: true }) info: boolean = false\n\n  @Prop({ reflect: true }) warning: boolean = false\n\n  /** Label para o input */\n  @Prop({ reflect: true }) label: string\n\n  /** Nome do campo de entrada */\n  @Prop({ reflect: true }) name: string\n\n  /** Uma dica ou sugestão exibida dentro do campo de entrada quando ele está vazio */\n  @Prop({ reflect: true }) placeholder: string\n\n  /** Se definido como true, o valor do campo de entrada pode ser exibido, mas não editado pelo usuário. */\n  @Prop({ reflect: true }) readonly: boolean = false\n\n  /** Se definido como true, o campo de entrada deve ser preenchido antes que o formulário possa ser enviado. */\n  @Prop({ reflect: true }) required: boolean = false\n\n  /** Valor inicial a ser exibido no campo de entrada. */\n  @Prop({ reflect: true, mutable: true }) value: string\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brConnectedCallback: EventEmitter<this>\n  connectedCallback() {\n    this.brConnectedCallback.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentWillLoad: EventEmitter<this>\n  componentWillLoad() {\n    this.brComponentWillLoad.emit(this)\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentDidLoad: EventEmitter<this>\n  componentDidLoad() {\n    this.brComponentDidLoad.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentWillRender: EventEmitter<this>\n  componentWillRender() {\n    this.brComponentWillRender.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentDidRender: EventEmitter<this>\n  componentDidRender() {\n    this.brComponentDidRender.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentShouldUpdate: EventEmitter<this>\n  componentShouldUpdate() {\n    this.brComponentShouldUpdate.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentWillUpdate: EventEmitter<this>\n  componentWillUpdate() {\n    this.brComponentWillUpdate.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brComponentDidUpdate: EventEmitter<this>\n  componentDidUpdate() {\n    this.brComponentDidUpdate.emit(this)\n  }\n\n  /** Consulte a documentação do [StencilJS](https://stenciljs.com/docs/component-lifecycle#connectedcallback). */\n  @Event() brDisconnectedCallback: EventEmitter<this>\n  disconnectedCallback() {\n    this.brDisconnectedCallback.emit(this)\n  }\n\n  /** Componente foi inserido em um `<form>` */\n  @Event() formAssociatedCallback: EventEmitter<this>\n  onFormAssociatedCallback(form) {\n    this.formAssociatedCallback.emit(form)\n  }\n\n  /** Componente foi removido de um `<form>` */\n  @Event() formDisassociatedCallback: EventEmitter<this>\n  onFormDisassociatedCallback(form) {\n    this.formDisassociatedCallback.emit(form)\n  }\n\n  private getInputCssClassMap(): CssClassMap {\n    return {\n      'br-input': true,\n      'input-button': this.button,\n      large: this.density === 'large',\n      small: this.density === 'small',\n      'input-inline': this.inline,\n      'input-highlight': this.highlight,\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  /** Valor atualizado do input */\n  @Event() valueChange!: EventEmitter<string>\n\n  private handleInput(event: Event) {\n    this.value = (event.target as HTMLInputElement).value\n    this.valueChange.emit(this.value)\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.label && (\n            <label class=\"text-nowrap\" htmlFor={this.el.id}>\n              {this.label}\n            </label>\n          )}\n          {this.icon && (\n            <div class=\"input-icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n          )}\n          <input\n            autocomplete={this.autocomplete}\n            autofocus={this.autofocus}\n            disabled={this.disabled}\n            onInput={this.handleInput.bind(this)}\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          {this.button && (\n            <br-button class=\"br-button\" circle aria-label='botão de ação do ícone'>\n              <slot name=\"action\"></slot>\n            </br-button>\n          )}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}