@govbr-ds/webcomponents 2.0.0-next.4 → 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"]}