@rededor/cura 1.4.0-alpha.0 → 1.4.0

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { microIcons, iconSizes } from "./cura-icon.definitions";
+import { iconSizes } from "./cura-icon.definitions";
 export class CuraIcon {
     constructor() {
         this.name = '';
@@ -9,10 +9,6 @@ export class CuraIcon {
         this.disabled = false;
     }
     sizeHandler(size) {
-        if (size === 'micro' && !microIcons.includes(this.name)) {
-            size = 16;
-            console.warn(`Icon ${this.name} doesn't support micro size. Minimum size of 16 was applied instead.`);
-        }
         const scaledStroke = (iconSize) => {
             return `${iconSizes[iconSize].stroke * (iconSizes.default.size / iconSizes[iconSize].size)}px`;
         };
@@ -31,7 +27,7 @@ export class CuraIcon {
         this.host.style.setProperty(prop, value);
     }
     render() {
-        return (h(Host, { key: '0ab55b86ccb41c3be1c1a114c35c81d8488e12cc' }, h("svg", { key: 'c787e2ff356af580215cef7c05225ef5ac716d21', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '71c4f67a6d50cd2112fcef7cbac7b506d662911e', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+        return (h(Host, { key: '0a9f6e85bc7be23072c17fd8f99ca88601e2a830' }, h("svg", { key: '00e4c6f5ce357b7a974d3dd0a27948fc1e8138ce', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '504a842d6b030539cb615cf60b090fbc9f771761', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
     }
     static get is() { return "cura-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cura-icon.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOhE,MAAM,OAAO,QAAQ;;oBAEW,EAAE;qBAChB,cAAc;;uBAEG,SAAS;wBACvB,KAAK;;IAKxB,WAAW,CAAC,IAAqB;QAC/B,IAAI,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAG,CAAC;YACzD,IAAI,GAAG,EAAE,CAAC;YACV,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,sEAAsE,CAAC,CAAC;QACxG,CAAC;QACD,MAAM,YAAY,GAAG,CAAC,QAAyB,EAAE,EAAE;YACjD,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QACjG,CAAC,CAAA;QACD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;QACnH,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;IACxG,CAAC;IAID,YAAY;QACV,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC;IACnI,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,eAAe,CAAC,IAAY,EAAE,KAAa;QACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,eAAe,EACnC,KAAK,EAAC,4BAA4B;gBAClC,4DACE,SAAS,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,IAAI,CAAC,OAAO,QAAQ,IAAI,CAAC,IAAI,EAAE,GAC1E,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\nimport { microIcons, iconSizes } from './cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icon',\n  styleUrl: 'cura-icon.scss',\n  shadow: true\n})\nexport class CuraIcon {\n\n  @Prop({reflect: true}) name = '';\n  @Prop() color = 'neutral-base';\n  @Prop() size: string | number;\n  @Prop({reflect: true}) iconset = 'default';\n  @Prop() disabled = false;\n\n  @Element() host: HTMLElement;\n\n  @Watch('size')\n  sizeHandler(size: string | number) {\n    if (size === 'micro' && !microIcons.includes(this.name) ) {\n      size = 16;\n      console.warn(`Icon ${this.name} doesn't support micro size. Minimum size of 16 was applied instead.`);\n    }\n    const scaledStroke = (iconSize: string | number) => {\n      return `${iconSizes[iconSize].stroke * (iconSizes.default.size / iconSizes[iconSize].size)}px`;\n    }\n    this.setHostProperty('--size', iconSizes[`${size}`] ? `${iconSizes[size].size}px` : `${iconSizes.default.size}px`);\n    this.setHostProperty('--stroke', iconSizes[`${size}`] ? scaledStroke(size) : scaledStroke(\"default\"));\n  }\n\n  @Watch('color')\n  @Watch('disabled')\n  colorHandler() {\n    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color || 'neutral'));\n  }\n\n  assetsPath: string;\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n    this.colorHandler();\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <svg\n          version=\"1.1\"\n          viewBox=\"0 0 24 24\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <use\n            xlinkHref={`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`}>\n          </use>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-icon.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOpD,MAAM,OAAO,QAAQ;;oBAEW,EAAE;qBAChB,cAAc;;uBAEG,SAAS;wBACvB,KAAK;;IAKxB,WAAW,CAAC,IAAqB;QAC/B,MAAM,YAAY,GAAG,CAAC,QAAyB,EAAE,EAAE;YACjD,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QACjG,CAAC,CAAA;QACD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;QACnH,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;IACxG,CAAC;IAID,YAAY;QACV,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC;IACnI,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,eAAe,CAAC,IAAY,EAAE,KAAa;QACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,eAAe,EACnC,KAAK,EAAC,4BAA4B;gBAClC,4DACE,SAAS,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,IAAI,CAAC,OAAO,QAAQ,IAAI,CAAC,IAAI,EAAE,GAC1E,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\nimport { iconSizes } from './cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icon',\n  styleUrl: 'cura-icon.scss',\n  shadow: true\n})\nexport class CuraIcon {\n\n  @Prop({reflect: true}) name = '';\n  @Prop() color = 'neutral-base';\n  @Prop() size: string | number;\n  @Prop({reflect: true}) iconset = 'default';\n  @Prop() disabled = false;\n\n  @Element() host: HTMLElement;\n\n  @Watch('size')\n  sizeHandler(size: string | number) {\n    const scaledStroke = (iconSize: string | number) => {\n      return `${iconSizes[iconSize].stroke * (iconSizes.default.size / iconSizes[iconSize].size)}px`;\n    }\n    this.setHostProperty('--size', iconSizes[`${size}`] ? `${iconSizes[size].size}px` : `${iconSizes.default.size}px`);\n    this.setHostProperty('--stroke', iconSizes[`${size}`] ? scaledStroke(size) : scaledStroke(\"default\"));\n  }\n\n  @Watch('color')\n  @Watch('disabled')\n  colorHandler() {\n    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color || 'neutral'));\n  }\n\n  assetsPath: string;\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n    this.colorHandler();\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <svg\n          version=\"1.1\"\n          viewBox=\"0 0 24 24\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <use\n            xlinkHref={`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`}>\n          </use>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-icon/cura-icon.stories.js

@@ -19,8 +19,6 @@ export default {
     tags: ['autodocs'],
     render: (_a) => {
         var { label } = _a, args = __rest(_a, ["label"]);
-        // You can either use a function to create DOM elements or use a plain html string!
-        // return `<div>${label}</div>`;
         return `<cura-icon
   name="${args.name}"
   color="${args.color}"
@@ -40,7 +38,7 @@ export default {
         size: {
             control: { type: 'select' },
             options: Object.keys(iconSizes).filter(key => key !== 'default'),
-            description: 'Define o tamanho. Alguns ícones suportam o tamanho <b>micro</b>. Consulte a documentação do iconset para mais detalhes.',
+            description: 'Define o tamanho.',
             table: {
                 category: 'Properties',
                 defaultValue: { summary: '24' }

package/dist/collection/components/cura-icon/cura-icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;YAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;QACvB,mFAAmF;QACnF,gCAAgC;QAChC,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;aACd,CAAC;IACZ,CAAC;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,qBAAqB;YAClC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;aAClC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC;YAChE,WAAW,EAAE,yHAAyH;YACtI,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;aAC/B;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC;YACxB,WAAW,EAAE,oFAAoF;YACjG,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;aACpC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;YAC1B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;QAClB,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\nimport { getColorsWithDepths } from \"../../utils/utils\";\nimport { iconSizes } from './cura-icon.definitions';\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Componentes/Icons/Icon',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-icon\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-icon>`;\n  },\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: Object.keys(iconSizes).filter(key => key !== 'default'),\n      description: 'Define o tamanho. Alguns ícones suportam o tamanho <b>micro</b>. Consulte a documentação do iconset para mais detalhes.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '24'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor do ícone. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral'}\n      }\n    },\n    name: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Define o ícone pelo seu nome no iconset.',\n      table: {\n        category: 'Properties'\n      }\n    }\n  },\n};\n\nexport const Icon = {\n  args: {\n    name: iconNames[0],\n    size: '24',\n    color: '',\n    disabled: false,\n  },\n};\n"]}
+{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;YAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;QACvB,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;aACd,CAAC;IACZ,CAAC;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,qBAAqB;YAClC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;aAClC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC;YAChE,WAAW,EAAE,mBAAmB;YAChC,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;aAC/B;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC;YACxB,WAAW,EAAE,oFAAoF;YACjG,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;aACpC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;YAC1B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;QAClB,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\nimport { getColorsWithDepths } from \"../../utils/utils\";\nimport { iconSizes } from './cura-icon.definitions';\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Componentes/Icons/Icon',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return `<cura-icon\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-icon>`;\n  },\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: Object.keys(iconSizes).filter(key => key !== 'default'),\n      description: 'Define o tamanho.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '24'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor do ícone. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral'}\n      }\n    },\n    name: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Define o ícone pelo seu nome no iconset.',\n      table: {\n        category: 'Properties'\n      }\n    }\n  },\n};\n\nexport const Icon = {\n  args: {\n    name: iconNames[0],\n    size: '24',\n    color: '',\n    disabled: false,\n  },\n};\n"]}

package/dist/collection/components/cura-icons-view/cura-icons-view.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import iconsetdefaulticons from "../../assets/icons/iconset-default-list";
-import { microIcons, iconSizes } from "../cura-icon/cura-icon.definitions";
+import { iconSizes } from "../cura-icon/cura-icon.definitions";
 export class CuraIconsView {
     constructor() {
         this.sizes = Object.keys(iconSizes).filter(key => key !== 'default');
@@ -14,10 +14,7 @@ export class CuraIconsView {
         this.sizes.unshift(this.sizes.pop());
     }
     render() {
-        return (h(Host, { key: '8852f24d59f30c812ac2e05be38bba10bccb1fd8' }, h("div", { key: '6b88398ca80b05a62681d7b6834d5d0f59d790fa', class: "iconDetail" }, h("cura-heading", { key: '5b3cab1aa26adc1b1b09dc3f3f5c0bd2ac394f89', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: 'eb974ce78dd33e56cd2c6118c6c399f029660547' }, this.selected)), h("div", { key: '46d600bbf0903861f5c982b0e73c4757447d0324', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '973355e41f1a10405c8224461625215aedabe0e3', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: 'acd2b60eb99238893fc97aa177e96f43a3c54bd1', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
-            h("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
+        return (h(Host, { key: '4c5839d8673f7b6cc5ef212f3dab12fbd7fa4a65' }, h("div", { key: '80ac970319cd6041b133a5808ff5c47a8e7b8aa6', class: "iconDetail" }, h("cura-heading", { key: 'd1a2fbd4455304a9f581e62207492cd172abcd93', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '67e7e479b00f6305af972c7de12e926c0d2067ca' }, this.selected)), h("div", { key: '8eb81c26431259818f299dd7ebcf708d1f664dc1', class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '2ff3b3a5868a68e2f6fa967fa2e3e9c2e5883451', class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: 'c3581991a1b8971447625ed67f4ba0d616efb855', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon))))));
     }
     static get is() { return "cura-icons-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-icons-view/cura-icons-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-icons-view.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { microIcons, iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = iconsetdefaulticons[0];\n\n  connectedCallback() {\n    this.sizes.unshift(this.sizes.pop());\n  }\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n              <cura-icon\n                name={icon}\n                size=\"32\"\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n              <cura-label\n                size=\"xsmall\"\n                weight={icon === this.selected ? 'bold' : 'regular'}\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n              { !microIcons.includes(icon) ? '' :\n                <cura-paragraph\n                  color='success-dark'\n                  size=\"xsmall\"\n                  margin-block=\"0px\"\n                  line-height='100%'>MICRO</cura-paragraph>\n              }\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-icons-view.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAO/D,MAAM,OAAO,aAAa;;QAExB,UAAK,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC;QAChE,WAAM,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAO9F,gBAAW,GAAG,CAAC,IAAI,EAAE,EAAE;YACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC,CAAA;wBARmB,mBAAmB,CAAC,CAAC,CAAC;;IAE1C,iBAAiB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;IACvC,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,YAAY;gBACrB,qEAAc,IAAI,EAAC,OAAO,kBAAc,QAAQ;;oBAAO,4DAAK,IAAI,CAAC,QAAQ,CAAM,CAAe;gBAC9F,4DAAK,KAAK,EAAC,WAAW,IAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CACvB,WAAK,KAAK,EAAC,MAAM;oBACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAc;oBACxD,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;gBACN,4DAAK,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CACvB,WAAK,KAAK,EAAC,MAAM;oBACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,eAAe,GAAa;oBAC9E,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG,CACF;YACN,4DAAK,KAAK,EAAC,OAAO,IACd,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC/B,WAAK,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBAChG,iBACE,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,GAAc;gBAC9E,kBACE,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnD,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,IAAG,IAAI,CAAc,CACjF,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = iconsetdefaulticons[0];\n\n  connectedCallback() {\n    this.sizes.unshift(this.sizes.pop());\n  }\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n              <cura-icon\n                name={icon}\n                size=\"32\"\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n              <cura-label\n                size=\"xsmall\"\n                weight={icon === this.selected ? 'bold' : 'regular'}\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-modal/cura-modal.css

@@ -92,8 +92,10 @@
   position: fixed;
   height: 100%;
   width: 100%;
-  top: 0px;
-  bottom: 0px;
+  top: var(--top-offset);
+  bottom: var(--bottom-offset);
+  left: var(--left-offset);
+  right: var(--right-offset);
   z-index: -1;
   margin-top: var(--offset-top);
 }

package/dist/collection/components/cura-modal/cura-modal.js

@@ -7,7 +7,10 @@ export class CuraModal {
         };
         this.open = false;
         this.background = 'light';
-        this.topOffset = 0;
+        this.top = 0;
+        this.bottom = 0;
+        this.left = 0;
+        this.right = 0;
         this.styles = {};
     }
     setColors() {
@@ -17,16 +20,31 @@ export class CuraModal {
         };
         this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': backgroundTheme[this.background] });
     }
-    setOffsetTop() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--offset-top': `${this.topOffset}px` });
+    setOffset(name, value) {
+        this.styles = Object.assign(Object.assign({}, this.styles), { [`--${name}-offset`]: `${value}px` });
+    }
+    setTop() {
+        this.setOffset('top', this.top);
+    }
+    setBottom() {
+        this.setOffset('bottom', this.bottom);
+    }
+    setLeft() {
+        this.setOffset('left', this.left);
+    }
+    setRight() {
+        this.setOffset('right', this.right);
     }
     connectedCallback() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'), '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
         this.setColors();
-        this.setOffsetTop();
+        this.setTop();
+        this.setBottom();
+        this.setLeft();
+        this.setRight();
     }
     render() {
-        return (h(Host, { key: '002525d3ad03f3271b11b0dacfd748ccfbfbaf1c', role: "dialog", "aria-modal": "true" }, h("div", { key: 'a684163919124acc33469b38cffeb6826dd2dd8d', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: 'bff07303351e5f7a75870b9c0f2b4a16736110bc', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: '4e8ac2fd00c10abf24060c644bbdcd6a5275bacb', class: "wrapper" }, h("button", { key: '6a0ab79a39181216882559f115107edf1c20a2c7', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: '3be3e5ee04fc5caa8786efaac0e03c946d0bdd14', name: "close", color: "error-dark", size: "small" })), h("slot", { key: '90fbd8951a449d41e2409ba10445a61e296c45e5' }), h("button", { key: '3075523254d90f7f7f4ca75f28a5724b2402f7d5', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: '9bfd171b87d0f1ff625b17f043ff90fa9dbad6e7', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: 'c17191a5570c08400cfb1409fa1ebf3f0e03a270', color: "error-dark", size: "small", marginBlock: "0" }, "Fechar"))))));
+        return (h(Host, { key: '5061e0536f1f06ae425a810fc15eb85d36caa271', role: "dialog", "aria-modal": "true" }, h("div", { key: '2afc242ddb391923dccfb6adc218179d32ee85e3', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: '5cf4d0d0817e23774984991467b8a34297f47336', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: 'ba6a2679ce03c87c88e42c4f28616ab9afc09116', class: "wrapper" }, h("button", { key: 'cc3126fa311ef7eb75dbdb56468d7b53af13740c', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: 'b116480ab348f69fafbbc5e8bef7ee5a43640b00', name: "close", color: "error-dark", size: "small" })), h("slot", { key: '7fd83b4991dee4e7cab92bf6e357efa4ce3c1d71' }), h("button", { key: '1351ba9d296c1362197496f336a20007cd6f45f0', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: '3d72c9f8981c380ab8ff19e4507497703011aece', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: '77e1144a9edb1c20e34f9f7e02ea97264d525143', color: "error-dark", size: "small", marginBlock: "0" }, "Fechar"))))));
     }
     static get is() { return "cura-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -78,7 +96,61 @@ export class CuraModal {
                 "reflect": false,
                 "defaultValue": "'light'"
             },
-            "topOffset": {
+            "top": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Property top to control modal top position.\nDefault: 0px"
+                },
+                "attribute": "top",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "bottom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Property bottom to control modal bottom position.\nDefault: 0px"
+                },
+                "attribute": "bottom",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "left": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Property left to control modal left position.\nDefault: 0px"
+                },
+                "attribute": "left",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "right": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -90,9 +162,9 @@ export class CuraModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Property offsetTop to control modal top position.\nDefault: 0px"
+                    "text": "Property right to control modal right position.\nDefault: 0px"
                 },
-                "attribute": "top-offset",
+                "attribute": "right",
                 "reflect": false,
                 "defaultValue": "0"
             }
@@ -126,8 +198,17 @@ export class CuraModal {
                 "propName": "background",
                 "methodName": "setColors"
             }, {
-                "propName": "topOffset",
-                "methodName": "setOffsetTop"
+                "propName": "top",
+                "methodName": "setTop"
+            }, {
+                "propName": "bottom",
+                "methodName": "setBottom"
+            }, {
+                "propName": "left",
+                "methodName": "setLeft"
+            }, {
+                "propName": "right",
+                "methodName": "setRight"
             }];
     }
 }

package/dist/collection/components/cura-modal/cura-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-modal.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO5F,MAAM,OAAO,SAAS;;QAuDZ,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC;oBArDuD,KAAK;0BAKtB,OAAO;yBAKlB,CAAC;sBAMZ,EAAE;;IAGpB,SAAS;QACP,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;YAChE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC;SACnE,CAAC;QAEF,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,GACvD,CAAC;IACJ,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,GACtC,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D,CAAC;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM;YACnC,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBACpF,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAQ;gBACnG,4DAAK,KAAK,EAAC,SAAS;oBAElB,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;wBACrD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAa,CAC7D;oBACT,8DAAa;oBAEb,+DAAQ,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;wBACpD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAa;wBACjE,uEAAgB,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,aAE9C,CACV,CACL,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property offsetTop to control modal top position.\n   * Default: 0px\n   */\n  @Prop() topOffset?: number = 0;\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  @Watch('topOffset')\n  setOffsetTop() {\n    this.styles = {\n      ...this.styles,\n      '--offset-top': `${this.topOffset}px`,\n    };\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setOffsetTop();\n  }\n\n  private handleClose = () => {\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\">\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            <button class=\"close desktop\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n            </button>\n            <slot></slot>\n            {/* Mobile button */}\n            <button class=\"close mobile\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n              <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n                Fechar\n              </cura-paragraph>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-modal.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property top to control modal top position.\n   * Default: 0px\n   */\n  @Prop() top?: number = 0;\n  /**\n   * Property bottom to control modal bottom position.\n   * Default: 0px\n   */\n  @Prop() bottom?: number = 0;\n  /**\n   * Property left to control modal left position.\n   * Default: 0px\n   */\n  @Prop() left?: number = 0;\n  /**\n   * Property right to control modal right position.\n   * Default: 0px\n   */\n  @Prop() right?: number = 0;\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  setOffset(name: string, value: number) {\n    this.styles = {\n      ...this.styles,\n      [`--${name}-offset`]: `${value}px`,\n    };\n  }\n\n  @Watch('top')\n  setTop() {\n    this.setOffset('top', this.top);\n  }\n\n  @Watch('bottom')\n  setBottom() {\n    this.setOffset('bottom', this.bottom);\n  }\n\n  @Watch('left')\n  setLeft() {\n    this.setOffset('left', this.left);\n  }\n\n  @Watch('right')\n  setRight() {\n    this.setOffset('right', this.right);\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setTop();\n    this.setBottom();\n    this.setLeft();\n    this.setRight();\n  }\n\n  private handleClose = () => {\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\">\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            <button class=\"close desktop\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n            </button>\n            <slot></slot>\n            {/* Mobile button */}\n            <button class=\"close mobile\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n              <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n                Fechar\n              </cura-paragraph>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-modal/cura-modal.stories.js

@@ -12,7 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 const renderCuraModal = (args) => `
   <div style="height: 500px">
-    <cura-modal open="${args.open}" background="${args.background}" top-offset="${args.topOffset}">${args.content}</cura-modal>
+    <cura-modal
+      open="${args.open}"
+      background="${args.background}"
+      top="${args.top}"
+      bottom="${args.bottom}"
+      left="${args.left}"
+      right="${args.right}"
+    >
+      ${args.content}
+    </cura-modal>
   </div>
 `;
 export default {
@@ -25,7 +34,7 @@ export default {
     argTypes: {
         open: {
             control: 'boolean',
-            description: 'Define se o modal está aberto ou fechado',
+            description: 'Define se o modal está aberto ou fechado.',
             table: {
                 category: 'Properties',
                 defaultValue: { summary: false },
@@ -40,19 +49,43 @@ export default {
                 defaultValue: { summary: 'light' },
             },
         },
-        topOffset: {
+        content: {
+            control: { type: 'text' },
+            description: 'Conteúdo do modal a ser exibido.',
+            table: {
+                category: 'Properties',
+            },
+        },
+        top: {
             control: { type: 'number' },
             description: 'Define o deslocamento superior do modal.',
             table: {
-                category: 'Properties',
+                category: 'Offset',
                 defaultValue: { summary: '0px' },
             },
         },
-        content: {
-            control: { type: 'text' },
-            description: 'Conteúdo do modal a ser exibido.',
+        bottom: {
+            control: { type: 'number' },
+            description: 'Define o deslocamento inferior do modal.',
             table: {
-                category: 'Properties',
+                category: 'Offset',
+                defaultValue: { summary: '0px' },
+            },
+        },
+        left: {
+            control: { type: 'number' },
+            description: 'Define o deslocamento esquerdo do modal.',
+            table: {
+                category: 'Offset',
+                defaultValue: { summary: '0px' },
+            },
+        },
+        right: {
+            control: { type: 'number' },
+            description: 'Define o deslocamento direito do modal.',
+            table: {
+                category: 'Offset',
+                defaultValue: { summary: '0px' },
             },
         },
         close: {
@@ -70,16 +103,19 @@ export const CuraModal = {
         background: 'light',
         open: true,
         content: `<div style="display:flex;
-    justify-content: center;
-    align-items: center;
-    align-self: stretch;
-    background-color:rgba(187, 107, 217, 0.4);
-    text-align: center;
-    height: 30px;
-    color: #9b51e0;">
-    content area
-  </div>`,
-        topOffset: 0,
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      background-color:rgba(187, 107, 217, 0.4);
+      text-align: center;
+      height: 30px;
+      color: #9b51e0;">
+      content area
+    </div>`,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
     },
 };
 //# sourceMappingURL=cura-modal.stories.js.map

package/dist/collection/components/cura-modal/cura-modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-modal.stories.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC;;wBAEf,IAAI,CAAC,IAAI,iBAAiB,IAAI,CAAC,UAAU,iBAAiB,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO;;CAEhH,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,WAAW,EAAE,4EAA4E;YACzF,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,OAAO;QACnB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE;;;;;;;;;SASJ;QACL,SAAS,EAAE,CAAC;KACb;CACF,CAAC","sourcesContent":["const renderCuraModal = (args: any) => `\n  <div style=\"height: 500px\">\n    <cura-modal open=\"${args.open}\" background=\"${args.background}\" top-offset=\"${args.topOffset}\">${args.content}</cura-modal>\n  </div>\n`;\n\nexport default {\n  title: 'Componentes/Feedback/Modal',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraModal(args);\n  },\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Define se o modal está aberto ou fechado',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    background: {\n      control: { type: 'select' },\n      options: ['dark', 'light'],\n      description: 'Define a cor do background do modal.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' },\n      },\n    },\n    topOffset: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento superior do modal.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    content: {\n      control: { type: 'text' },\n      description: 'Conteúdo do modal a ser exibido.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    close: {\n      action: 'close',\n      description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n      name: 'modalClose',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n};\n\nexport const CuraModal = {\n  args: {\n    background: 'light',\n    open: true,\n    content: `<div style=\"display:flex;\n    justify-content: center;\n    align-items: center;\n    align-self: stretch;\n    background-color:rgba(187, 107, 217, 0.4);\n    text-align: center;\n    height: 30px;\n    color: #9b51e0;\">\n    content area\n  </div>`,\n    topOffset: 0,\n  },\n};\n"]}
+{"version":3,"file":"cura-modal.stories.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC;;;cAGzB,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;aACtB,IAAI,CAAC,GAAG;gBACL,IAAI,CAAC,MAAM;cACb,IAAI,CAAC,IAAI;eACR,IAAI,CAAC,KAAK;;QAEjB,IAAI,CAAC,OAAO;;;CAGnB,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,GAAG,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,yCAAyC;YACtD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,WAAW,EAAE,4EAA4E;YACzF,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,OAAO;QACnB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE;;;;;;;;;WASF;QACP,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;KACT;CACF,CAAC","sourcesContent":["const renderCuraModal = (args: any) => `\n  <div style=\"height: 500px\">\n    <cura-modal\n      open=\"${args.open}\"\n      background=\"${args.background}\"\n      top=\"${args.top}\"\n      bottom=\"${args.bottom}\"\n      left=\"${args.left}\"\n      right=\"${args.right}\"\n    >\n      ${args.content}\n    </cura-modal>\n  </div>\n`;\n\nexport default {\n  title: 'Componentes/Feedback/Modal',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraModal(args);\n  },\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Define se o modal está aberto ou fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    background: {\n      control: { type: 'select' },\n      options: ['dark', 'light'],\n      description: 'Define a cor do background do modal.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' },\n      },\n    },\n    content: {\n      control: { type: 'text' },\n      description: 'Conteúdo do modal a ser exibido.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    top: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento superior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    bottom: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento inferior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    left: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento esquerdo do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    right: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento direito do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    close: {\n      action: 'close',\n      description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n      name: 'modalClose',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n};\n\nexport const CuraModal = {\n  args: {\n    background: 'light',\n    open: true,\n    content: `<div style=\"display:flex;\n      justify-content: center;\n      align-items: center;\n      align-self: stretch;\n      background-color:rgba(187, 107, 217, 0.4);\n      text-align: center;\n      height: 30px;\n      color: #9b51e0;\">\n      content area\n    </div>`,\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n};\n"]}

package/dist/collection/components/cura-page-template/cura-page-template.js

@@ -14,7 +14,7 @@ export class CuraPageTemplate {
         return classes;
     }
     render() {
-        return (h(Host, { key: 'd79c3d22ccbd93d8a56c700e3016507d18720464' }, h("div", { key: 'a717f44d6b5df9f00ffe61fff816721705748040', style: this.styles, class: "grid-template" }, h("div", { key: '7a3d585d4213799b32e2043327442b21833fd4fc', id: "sub-header" }, h("slot", { key: 'dbab9738fe221a426642e5d63e88130e1f351591', name: 'sub-header' })), h("div", { key: '39f2878cac260b70b8e53b57b6b9b5b07f658251', id: "header" }, h("slot", { key: '511af91f30dfcfde3ced7bce4c341a2802c88db8', name: 'header' })), h("div", { key: 'ed8d1b1e0d5ffca939c525ee8320da7f2afde95d', id: "pre-content" }, h("slot", { key: 'dd8c722ddd113f49965a6397625980aace8b78e8', name: 'pre-content' })), h("div", { key: '64a5767bbc858f18e44a3339b6bb567b3e5a8c0d', id: "content-container", class: this.getClasses() }, h("div", { key: '919e9d54e10f1469264f193545e80b680b63c801', id: "sidebar-left" }, h("slot", { key: '8ddeb7358bd9f6d0e08b1e3f323219b8980eec9c', name: 'sidebar-left' })), h("div", { key: '48e3860c1674658c386124c80a35b85bdb085e3e', id: "content" }, h("slot", { key: '8bc21a187897a5e9cd2e922285364a02425cefa6', name: "content" }), h("slot", { key: '587d13eed3fedcbf9e33dc4084cb2554ba70125d' })), h("div", { key: '7f620fd04b4cf4a051954dca8a95293c2a7c1d9a', id: "sidebar-right" }, h("slot", { key: '3499275e67a00fcaab4f044535dbeb19c1040569', name: 'sidebar-right' }))), h("div", { key: '59b9e4a5fe541f2ad6dac53a40588482b33e0cad', id: "post-body" }, h("slot", { key: '7493b3b330cabf263990a149c1b526501260de95', name: 'post-body' })), h("div", { key: '4a35c95f7ad04f04bb8673babc06d243e1b8f931', id: "footer" }, h("slot", { key: 'f69ffbd9c9cabe72e1ee4f147f7a1448311a7f0c', name: 'footer' })), h("div", { key: 'd53b60b2d9170797e7dc12b3179c24b7f76ac41d', id: "sub-footer" }, h("slot", { key: '75dcebb2f223ed1d0b1181ea3773fbb6bf096e33', name: 'sub-footer' })))));
+        return (h(Host, { key: '1e08a43c7701b7063cb652f6e040d3d5f5eb09a4' }, h("div", { key: '8aed196bdd1e4385a5cd397d531f32d5d6a34e45', style: this.styles, class: "grid-template" }, h("div", { key: '92bb8cc24ddc2a6c7cb81cca6326e3aae62fe9fb', id: "sub-header" }, h("slot", { key: 'af2542eb9aae107bb96009e1dbf234099e3fee06', name: 'sub-header' })), h("div", { key: '11ccbfe4b8f226d5f312b9db81cb10bf7aff6058', id: "header" }, h("slot", { key: 'f4cf6ce66934479b421841c0d85341ad771f8801', name: 'header' })), h("div", { key: 'b0af61b6a26cffbae8722a265bbf695984aeb192', id: "pre-content" }, h("slot", { key: '1c6e615377935f2d8bcdc0106a7f8ef46a4096c8', name: 'pre-content' })), h("div", { key: '7c9600de42ea9338571f59c7dfa07e8d83d907f3', id: "content-container", class: this.getClasses() }, h("div", { key: '8e9c4100038b1a7add298292b039098a66936fc3', id: "sidebar-left" }, h("slot", { key: '266eface0f8eb826fce97ec1c6eb8a5f2a983256', name: 'sidebar-left' })), h("div", { key: 'da2e6b2a9d72cb80f5f340e877388ce82e285d97', id: "content" }, h("slot", { key: '8e1fb56cad2e3b693fb40c87bc8b8813ac1c5cec', name: "content" }), h("slot", { key: '7fcfa41e62fbb3eb03e6350d2242119cea4a7172' })), h("div", { key: '561cdd39b2327375fbfab17b7d9ba61d3c8641e1', id: "sidebar-right" }, h("slot", { key: 'abb1a3c4b46a4e576f9720582e41237f323baedb', name: 'sidebar-right' }))), h("div", { key: '273e8172b1084ef92d125ec3c524bd0a357e740a', id: "post-body" }, h("slot", { key: '9c0ba47959028dd86b5d83fe9050e4cbd51b09f0', name: 'post-body' })), h("div", { key: 'ec53311edaed349b82cf37be5957d9a07e1e25d3', id: "footer" }, h("slot", { key: '16d56243b257ba7b3b6919c5fcd4b482d646b925', name: 'footer' })), h("div", { key: 'ed81fc5a890b564a6b437f61122259b6ea5a94f2', id: "sub-footer" }, h("slot", { key: '88c1d8297bd16ac01f7f5e81803cee6d1b13aa41', name: 'sub-footer' })))));
     }
     static get is() { return "cura-page-template"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-toast/cura-toast.js

@@ -21,7 +21,7 @@ export class CuraToast {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '467952f8386d659d44090163f3e14c0231dfcafd' }, h("div", { key: 'f510e12d309c79842d30cc24409b61433a6fe58e', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'acd2a9d52ad91565c7bd36bc205753bdfe6e3e59', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'dced39ca17901673360dacbf27764b1387eff20d', class: "content" }, h("cura-heading", { key: '6ac55c8ae757f654c808b72b4f44b54dc822107c', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'e8e83b891e0b7e02901999f1622a183afc94c28e', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '080891767b1b552520d7d3ed59002a9478eb0288' })), h("slot", { key: '0a43f99bbaf2e4cdd2fd7dc1d5a0431602b76361', name: "actions" })), this.closeButton && h("cura-icon", { key: '1ec27e6d6d44b82ed26a59cb6ba967858b4c8809', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '6457bb003e4706d3f60b85aa3faa3e0b6b276869', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: '0265d288e95db1331400e60d2ca694be22397294' }, h("div", { key: '2aee45d4fd237b703846272582e8258fbabb5238', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'c75ea1c8aceaf039e8d525c1ff406bcbf25b8554', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'e4d75da71aef899ec260666095f977caec86c19f', class: "content" }, h("cura-heading", { key: '3523fb7c3674854322dad502252cda7dd3bdca9e', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'a4d639691820e4e242a178604d9b20a97da7bccb', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '4b86678d47455798a0f5455a406c02eaf8000ba8' })), h("slot", { key: '28b9088b76b7b2084cf7024eb1f35f28b344e098', name: "actions" })), this.closeButton && h("cura-icon", { key: '20a3b18030bfc418439f75795bd98ebacbb1aeca', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '82b7e205ad8c5abae481bbed409109cd17661ce1', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();

package/dist/collection/components/cura-tooltip/cura-tooltip.js

@@ -25,7 +25,7 @@ export class CuraTooltip {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '732345360f527ffc69743818657643616b2ee611', role: "tooltip", id: this.elementId }, h("div", { key: '166aa0dd54c933f8b3b8ecc5c5c76824ef180d71', class: "container", style: this.styles }, h("div", { key: '7b54ec53f3b454979c45415ddcd164a71a9ab2b0', class: "content" }, h("cura-heading", { key: '71bf328ed2f9e5d704e6d06989a4bef6d7c4993d', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'a427a4b9df7bfae50300c9947db9df825a2f7da0', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '65875debf5bd3eec9f3070ab96cf644460897c3b' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'dac8229dc0f348b45ea3af9392c2001f638a0efb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '6c90921145206d47ab84eaee972a08b9dcad7cf0', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
+        return (h(Host, { key: 'a8e36ac08ca7a12c1ff893c0d7525e31bd820b32', role: "tooltip", id: this.elementId }, h("div", { key: '8d1c01e85f80b2c00846273c270d7a09d555a038', class: "container", style: this.styles }, h("div", { key: '39501b4a8dbfc71cb166ec539db8fa24d2e65db0', class: "content" }, h("cura-heading", { key: '7c9209d35ab4dd2c21af7de18e013546947b3937', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '21cef01e82c0000eaaecf4ba7351d5cc416a45f4', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'c752679de543d3d31d4b4a5a97c928c7a5cc9f1a' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '398b9a3579df7969e319c207814cdf43e0bd7b5a', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: 'dc605edcfa382bad86acb8d51510c35a6ee67b74', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
     }
     componentDidLoad() {
         this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js

@@ -147,7 +147,7 @@ export class CuraCheckbox {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: '876fa0a7aa0fc7110cbf0ffeb2d95d529fa78e64' }, h("div", { key: '3e6d730765590ee75d7e045cadc7d03e5fc035e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '0f7f6f3bc61a80e899d940d76fee266af1914f5a', class: "info" }, h("div", { key: 'a836cb0d7751a1a812364fe93a30403b02ec5c95', class: "label-wrapper" }, h("cura-label", { key: '5d180552ec71e22ddd8822727bd32d4167215f33', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '047413aa21a28bc33984d19ad4dc10a38289c205', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '68c9dd6f228ec3204647795f1cae32a8f8797bc2', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '3a35a1219f135002f1b9ae64c0eb4227529bc904' }))), h("div", { key: 'fe969ee332b3c64a259ec552f411b5d2d4bc81e4', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '2cbcbe56130bddb5853cfcc3a8ef1b421f39bc7b', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: '29437631c4078574a1123fcd27f471efd6738a2c' }, h("div", { key: '3821e17c78c011a7ab1fb4ab148258fe85be7d19', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '0f868dfa5f35c3cd11d870eca977bb2a9c67a7d7', class: "info" }, h("div", { key: '05cf807789ad779bf90946926176a2a17b1c4704', class: "label-wrapper" }, h("cura-label", { key: '979497d243d7296f2c8bb5347ab01d2e12568c01', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'a8e3a3b6a891bb4c2ade3271fe8d11674770c160', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'afcd5016c3f232e05684b38e8ec97d6e604b8f12', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'af27633296d454363d71d5b27227c40a26a4e119' }))), h("div", { key: 'd357e30a36326de76d1cd91332a32e3befeb03a9', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '0ef63518fced76e52746b79cd598f96065f83a60', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get is() { return "cura-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js

@@ -36,12 +36,12 @@ export class CuraDropdownSearchOption {
         }
     }
     render() {
-        return (h(Host, { key: '0dfb8d67f1aee692af5abdad170f2fc3e6c5ffc6', slot: "dropdown-search-option" }, h("div", { key: '6596c224bbfc0e9b5c3d2a39d064852019af5b74', style: this.styles, class: {
+        return (h(Host, { key: '333293644b47d0b7b8e288cf6a81e3e8916a82bd', slot: "dropdown-search-option" }, h("div", { key: '5a7f789204607805d65c3b0a586ffdeb54c10a02', style: this.styles, class: {
                 "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 disabled: !this.selectable
-            } }, h("div", { key: 'b73badabbcde37615c58707d8a62832363deb694', class: "content-container" }, h("div", { key: '6ea1e5cfa3aa5f7bb7d0a4a2c9c8aff6e076304c', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '9e6272b220a723fbc1b52a23f59873cb4eea0986', name: "image" }), h("cura-heading", { key: '4bec4f91fd5ef5759373d846c0876678e67b1b48', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'c485bfd68ddf4b5bcfa0c590c11344352939fe87' }))), h("slot", { key: '0ce8978f72401af3580c72919b6079ef222dcc0d', name: "action" })))));
+            } }, h("div", { key: '7ba5fd8f0f35fe0b5856fdaeedf09c7cb8d4fd24', class: "content-container" }, h("div", { key: '6618b6f7248e43be1f6915800662d48bf3a08f7c', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: 'c8c6d3a059d221ae3871f2cb048cb6145bec3546', name: "image" }), h("cura-heading", { key: '4678a347d5211c38c9e05dded43ab68840cebca2', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: '97a34c9bb70e3aaf34fb3ead81ef5e6a0cd05782' }))), h("slot", { key: 'fecb411b2de2c169f01cf1a8c1ca2ed14ee049e9', name: "action" })))));
     }
     static get is() { return "cura-dropdown-search-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CuraDropdownSearchOptionTitle {
     render() {
-        return (h(Host, { key: 'ed1d2aeeba08c3c53f04f434fa46cb178271f405', slot: "dropdown-search-option" }, h("cura-label", { key: '910b1ada8d333ace0171a3180ba6320e813e4fce', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '20816c3a0c9805a88074f36e060ad850157427e2' }))));
+        return (h(Host, { key: 'ff083af27d3250e4722c6f238b80b33f739cb64c', slot: "dropdown-search-option" }, h("cura-label", { key: '62e9b2a758e000eb1ce5e5a76c1e9e555b5a4c8c', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'e96fd0daa9b210bdea256d88c17b6cc9c425c5bc' }))));
     }
     static get is() { return "cura-dropdown-search-option-title"; }
     static get encapsulation() { return "shadow"; }