@rededor/cura 0.5.4 → 1.0.0-alpha.0

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

@@ -0,0 +1,127 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+export default {
+    title: 'Componentes/Card/Card',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var { slot } = _a, args = __rest(_a, ["slot"]);
+        return `<cura-card ${args.hasPadding === true
+            ? `
+  has-padding=${true}`
+            : `has-padding=${false}`}${args.hasShadow
+            ? `
+  has-shadow="${args.hasShadow}"`
+            : ''}${args.type
+            ? `
+  type="${args.type}"`
+            : ''}${args.colorMode
+            ? `
+  color-mode="${args.colorMode}"`
+            : ''}${args.href
+            ? `
+  href="${args.href}"`
+            : ''}${args.target
+            ? `
+  target="${args.target}"`
+            : ''}
+>
+  ${slot}
+</cura-card>`;
+    },
+    argTypes: {
+        hasPadding: {
+            name: 'has-padding',
+            control: 'boolean',
+            description: 'Adiciona padding ao card.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'true' },
+            },
+        },
+        hasShadow: {
+            name: 'has-shadow',
+            control: 'boolean',
+            description: 'Adiciona sombra ao card. No modo transparent o card não possui shadow',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'false' },
+            },
+        },
+        type: {
+            control: { type: 'inline-radio' },
+            options: ['solid', 'transparent'],
+            description: 'Tipo do card (solid ou transparent).',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'solid' },
+            },
+        },
+        href: {
+            control: 'text',
+            description: 'Se definido, o elemento de ação renderizado internamente será um link e o card terá um estilo de card link',
+            name: 'href',
+            table: {
+                category: 'Properties Card Link',
+            },
+        },
+        target: {
+            control: 'text',
+            description: 'Se houver um href definido, define o comportamento de abertura do link.',
+            name: 'target',
+            table: {
+                category: 'Properties Card Link',
+                defaultValue: { summary: '_self' },
+            },
+        },
+        colorMode: {
+            control: { type: 'inline-radio' },
+            options: ['light', 'dark'],
+            description: 'Se houver um href definido, muda a cord de fundo do card (light ou dark).',
+            table: {
+                category: 'Properties Card Link',
+                defaultValue: { summary: 'light' },
+            },
+            name: 'color-mode',
+        },
+        slot: {
+            name: 'content',
+            control: 'text',
+            description: 'Conteúdo a ser exibido dentro do card. Aceita tags HTML.',
+            table: {
+                category: 'Slot',
+            },
+        },
+    },
+};
+export const CuraCard = {
+    args: {
+        hasPadding: true,
+        hasShadow: true,
+        type: 'solid',
+        colorMode: 'light',
+        target: '_self',
+        href: '',
+        slot: `<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;">
+       contentArea
+    </div>`,
+    },
+};
+//# sourceMappingURL=cura-card.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-card.stories.js","sourceRoot":"","sources":["../../../src/components/cura-card/cura-card.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Componentes/Card/Card',\n  tags: ['autodocs'],\n  render: ({ slot, ...args }) => {\n    return `<cura-card ${\n      args.hasPadding === true\n        ? `\n  has-padding=${true}`\n        : `has-padding=${false}`\n    }${\n      args.hasShadow\n        ? `\n  has-shadow=\"${args.hasShadow}\"`\n        : ''\n    }${\n      args.type\n        ? `\n  type=\"${args.type}\"`\n        : ''\n    }${\n      args.colorMode\n        ? `\n  color-mode=\"${args.colorMode}\"`\n        : ''\n    }${\n      args.href\n        ? `\n  href=\"${args.href}\"`\n        : ''\n    }${\n      args.target\n        ? `\n  target=\"${args.target}\"`\n        : ''\n    }\n>\n  ${slot}\n</cura-card>`;\n  },\n  argTypes: {\n    hasPadding: {\n      name: 'has-padding',\n      control: 'boolean',\n      description: 'Adiciona padding ao card.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'true' },\n      },\n    },\n    hasShadow: {\n      name: 'has-shadow',\n      control: 'boolean',\n      description: 'Adiciona sombra ao card. No modo transparent o card não possui shadow',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'false' },\n      },\n    },\n    type: {\n      control: { type: 'inline-radio' },\n      options: ['solid', 'transparent'],\n      description: 'Tipo do card (solid ou transparent).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'solid' },\n      },\n    },\n    href: {\n      control: 'text',\n      description: 'Se definido, o elemento de ação renderizado internamente será um link e o card terá um estilo de card link',\n      name: 'href',\n      table: {\n        category: 'Properties Card Link',\n      },\n    },\n    target: {\n      control: 'text',\n      description: 'Se houver um href definido, define o comportamento de abertura do link.',\n      name: 'target',\n      table: {\n        category: 'Properties Card Link',\n        defaultValue: { summary: '_self' },\n      },\n    },\n    colorMode: {\n      control: { type: 'inline-radio' },\n      options: ['light', 'dark'],\n      description: 'Se houver um href definido, muda a cord de fundo do card (light ou dark).',\n      table: {\n        category: 'Properties Card Link',\n        defaultValue: { summary: 'light' },\n      },\n      name: 'color-mode',\n    },\n\n    slot: {\n      name: 'content',\n      control: 'text',\n      description: 'Conteúdo a ser exibido dentro do card. Aceita tags HTML.',\n      table: {\n        category: 'Slot',\n      },\n    },\n  },\n};\n\nexport const CuraCard = {\n  args: {\n    hasPadding: true,\n    hasShadow: true,\n    type: 'solid',\n    colorMode: 'light',\n    target: '_self',\n    href: '',\n    slot: `<div\n    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       contentArea\n    </div>`,\n  },\n};\n"]}

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

@@ -1,15 +1,15 @@
 export const microIcons = ['arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'check', 'checkDouble', 'close', 'closeCircle', 'collapse', 'down', 'expand', 'linkExternal', 'link', 'left', 'minus', 'minusCircle', 'minusSquare', 'order', 'subItem', 'right', 'plus', 'plusCircle', 'plusSquare', 'up', 'filter', 'swap'];
 export const iconSizes = {
-  "128": { size: 128, stroke: 5.25 },
-  "72": { size: 72, stroke: 3.5 },
-  "64": { size: 64, stroke: 3.25 },
-  "48": { size: 48, stroke: 2.75 },
-  "40": { size: 40, stroke: 2.5 },
-  "32": { size: 32, stroke: 2.25 },
-  "24": { size: 24, stroke: 2 },
-  "20": { size: 20, stroke: 1.75 },
-  "16": { size: 16, stroke: 1.5 },
-  "micro": { size: 12, stroke: 1.5 },
-  "default": { size: 24, stroke: 2 }
+    "128": { size: 128, stroke: 5.25 },
+    "72": { size: 72, stroke: 3.5 },
+    "64": { size: 64, stroke: 3.25 },
+    "48": { size: 48, stroke: 2.75 },
+    "40": { size: 40, stroke: 2.5 },
+    "32": { size: 32, stroke: 2.25 },
+    "24": { size: 24, stroke: 2 },
+    "20": { size: 20, stroke: 1.75 },
+    "16": { size: 16, stroke: 1.5 },
+    "micro": { size: 12, stroke: 1.5 },
+    "default": { size: 24, stroke: 2 }
 };
 //# sourceMappingURL=cura-icon.definitions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cura-icon.definitions.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,WAAW,EAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAC,aAAa,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,YAAY,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,CAAC,CAAC;AAEnS,MAAM,CAAC,MAAM,SAAS,GAAG;EACvB,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAC;EAChC,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;EAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;EAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;EAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;EAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;EAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;EAC3B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;EAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;EAC7B,OAAO,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;EACjC,SAAS,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;CACjC,CAAC","sourcesContent":["export const microIcons = ['arrowDown','arrowLeft','arrowRight','arrowUp','check','checkDouble','close','closeCircle','collapse','down','expand','linkExternal','link','left','minus','minusCircle','minusSquare','order','subItem','right','plus','plusCircle','plusSquare','up','filter','swap'];\n\nexport const iconSizes = {\n  \"128\": {size: 128, stroke: 5.25},\n  \"72\": {size: 72, stroke: 3.5},\n  \"64\": {size: 64, stroke: 3.25},\n  \"48\": {size: 48, stroke: 2.75},\n  \"40\": {size: 40, stroke: 2.5},\n  \"32\": {size: 32, stroke: 2.25},\n  \"24\": {size: 24, stroke: 2},\n  \"20\": {size: 20, stroke: 1.75},\n  \"16\": {size: 16, stroke: 1.5},\n  \"micro\": {size: 12, stroke: 1.5 },\n  \"default\": {size: 24, stroke: 2}\n};\n"]}
+{"version":3,"file":"cura-icon.definitions.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,WAAW,EAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAC,aAAa,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,YAAY,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,CAAC,CAAC;AAEnS,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAC;IAChC,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;IAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;IAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;IAC3B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;IAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;IAC7B,OAAO,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACjC,SAAS,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;CACjC,CAAC","sourcesContent":["export const microIcons = ['arrowDown','arrowLeft','arrowRight','arrowUp','check','checkDouble','close','closeCircle','collapse','down','expand','linkExternal','link','left','minus','minusCircle','minusSquare','order','subItem','right','plus','plusCircle','plusSquare','up','filter','swap'];\n\nexport const iconSizes = {\n  \"128\": {size: 128, stroke: 5.25},\n  \"72\": {size: 72, stroke: 3.5},\n  \"64\": {size: 64, stroke: 3.25},\n  \"48\": {size: 48, stroke: 2.75},\n  \"40\": {size: 40, stroke: 2.5},\n  \"32\": {size: 32, stroke: 2.25},\n  \"24\": {size: 24, stroke: 2},\n  \"20\": {size: 20, stroke: 1.75},\n  \"16\": {size: 16, stroke: 1.5},\n  \"micro\": {size: 12, stroke: 1.5 },\n  \"default\": {size: 24, stroke: 2}\n};\n"]}

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

@@ -1,155 +1,155 @@
-import { Host, h } from '@stencil/core';
-import { microIcons, iconSizes } from './cura-icon.definitions';
+import { Host, h } from "@stencil/core";
+import { microIcons, iconSizes } from "./cura-icon.definitions";
 export class CuraIcon {
-  constructor() {
-    this.name = '';
-    this.color = 'neutral-base';
-    this.size = undefined;
-    this.iconset = 'default';
-    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.`);
+    constructor() {
+        this.name = '';
+        this.color = 'neutral-base';
+        this.size = undefined;
+        this.iconset = 'default';
+        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`;
+        };
+        this.setHostProperty('--size', iconSizes[`${size}`] ? `${iconSizes[size].size}px` : `${iconSizes.default.size}px`);
+        this.setHostProperty('--stroke', iconSizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
+    }
+    colorHandler() {
+        this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color || 'neutral'));
+    }
+    connectedCallback() {
+        this.assetsPath = window.CuraAPI.localAssetsPath;
+        this.sizeHandler(this.size);
+        this.colorHandler();
+    }
+    setHostProperty(prop, value) {
+        this.host.style.setProperty(prop, value);
+    }
+    render() {
+        return (h(Host, { key: 'd49f752d12f9babd6a82fe97ef384f89879e1db9' }, h("svg", { key: '0c6d9dad5f8f8b571dd422ebb5f7941a75b46336', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '88eab15bcbbff03713282d99055f140ccd424108', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+    }
+    static get is() { return "cura-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'neutral-base'"
+            },
+            "size": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "iconset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iconset",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "sizeHandler"
+            }, {
+                "propName": "color",
+                "methodName": "colorHandler"
+            }, {
+                "propName": "disabled",
+                "methodName": "colorHandler"
+            }];
     }
-    const scaledStroke = (iconSize) => {
-      return `${iconSizes[iconSize].stroke * (iconSizes.default.size / iconSizes[iconSize].size)}px`;
-    };
-    this.setHostProperty('--size', iconSizes[`${size}`] ? `${iconSizes[size].size}px` : `${iconSizes.default.size}px`);
-    this.setHostProperty('--stroke', iconSizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
-  }
-  colorHandler() {
-    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color || 'neutral'));
-  }
-  connectedCallback() {
-    this.assetsPath = window.CuraAPI.localAssetsPath;
-    this.sizeHandler(this.size);
-    this.colorHandler();
-  }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
-  }
-  render() {
-    return (h(Host, null, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
-  }
-  static get is() { return "cura-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'neutral-base'"
-      },
-      "size": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false
-      },
-      "iconset": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "iconset",
-        "reflect": true,
-        "defaultValue": "'default'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "size",
-        "methodName": "sizeHandler"
-      }, {
-        "propName": "color",
-        "methodName": "colorHandler"
-      }, {
-        "propName": "disabled",
-        "methodName": "colorHandler"
-      }];
-  }
 }
 //# sourceMappingURL=cura-icon.js.map

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;;gBAEW,EAAE;iBAChB,cAAc;;mBAEG,SAAS;oBACvB,KAAK;;EAKxB,WAAW,CAAC,IAAqB;IAC/B,IAAI,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAG;MACxD,IAAI,GAAG,EAAE,CAAC;MACV,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,sEAAsE,CAAC,CAAC;KACvG;IACD,MAAM,YAAY,GAAG,CAAC,QAAyB,EAAE,EAAE;MACjD,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;IACjG,CAAC,CAAA;IACD,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;IACnH,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;EACxG,CAAC;EAID,YAAY;IACV,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;EACnI,CAAC;EAID,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;IACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;EAC3C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,eAAe,EACnC,KAAK,EAAC,4BAA4B;QAClC,WACE,SAAS,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,IAAI,CAAC,OAAO,QAAQ,IAAI,CAAC,IAAI,EAAE,GAC1E,CACF,CACD,CACR,CAAC;EACJ,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,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"]}

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

@@ -1,76 +1,76 @@
 var __rest = (this && this.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s)
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
-import iconNames from '../../assets/icons/iconset-default-list';
+import iconNames from "../../assets/icons/iconset-default-list";
 import { getColorsWithDepths } from "../../utils/utils";
-import { iconSizes } from './cura-icon.definitions';
+import { iconSizes } from "./cura-icon.definitions";
 const colors = getColorsWithDepths();
 export default {
-  title: 'Componentes/Icons/Icon',
-  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
+    title: 'Componentes/Icons/Icon',
+    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}"
   size="${args.size}"
   disabled="${args.disabled}">
 </cura-icon>`;
-  },
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-      description: 'Estado desabilitado',
-      table: {
-        category: 'State',
-        defaultValue: { summary: 'false' }
-      }
     },
-    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.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: '24' }
-      }
+    argTypes: {
+        disabled: {
+            control: 'boolean',
+            description: 'Estado desabilitado',
+            table: {
+                category: 'State',
+                defaultValue: { summary: 'false' }
+            }
+        },
+        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.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '24' }
+            }
+        },
+        color: {
+            control: { type: 'select' },
+            options: ['', ...colors],
+            description: 'Define a cor do ícone. Aceita qualquer valor do esquema de cores do design system.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'neutral' }
+            }
+        },
+        name: {
+            control: { type: 'select' },
+            options: iconNames,
+            description: 'Define o ícone pelo seu nome no iconset.',
+            table: {
+                category: 'Properties'
+            }
+        }
     },
-    color: {
-      control: { type: 'select' },
-      options: ['', ...colors],
-      description: 'Define a cor do ícone. Aceita qualquer valor do esquema de cores do design system.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'neutral' }
-      }
-    },
-    name: {
-      control: { type: 'select' },
-      options: iconNames,
-      description: 'Define o ícone pelo seu nome no iconset.',
-      table: {
-        category: 'Properties'
-      }
-    }
-  },
 };
 export const Icon = {
-  args: {
-    name: iconNames[0],
-    size: '24',
-    color: '',
-    disabled: false,
-  },
+    args: {
+        name: iconNames[0],
+        size: '24',
+        color: '',
+        disabled: false,
+    },
 };
 //# sourceMappingURL=cura-icon.stories.js.map