@rededor/cura 0.5.4 → 1.0.0-alpha.0

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

@@ -1,167 +1,185 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class CuraAlert {
-  constructor() {
-    this.handleClose = () => {
-      this.close.emit();
-      this.host.remove();
-    };
-    this.type = 'info';
-    this.floating = false;
-    this.label = undefined;
-    this.closeable = true;
-    this.styles = {};
-  }
-  setColors() {
-    const colors = [
-      { name: '--color-lighter', theme: `${this.type}-lighter` },
-      { name: '--neutral-black', theme: 'neutral-black' },
-      { name: '--color-light', theme: `${this.type}-light` },
-      { name: '--color-base', theme: `${this.type}-base` },
-    ];
-    colors.forEach(color => {
-      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);
-    });
-    this.styles = Object.assign({}, this.styles);
-  }
-  connectedCallback() {
-    this.setColors();
-  }
-  getClasses() {
-    const classes = {};
-    classes['conteiner'] = true;
-    classes['floating'] = this.floating;
-    return classes;
-  }
-  getNameIcon() {
-    const iconMapping = {
-      info: 'infoCircle',
-      success: 'checkCircle',
-      warning: 'alertCircle',
-      error: 'alertTriangle',
-    };
-    return iconMapping[this.type];
-  }
-  render() {
-    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("cura-icon", { name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { class: "content" }, h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", null)), h("div", { class: "actions" }, h("slot", { name: "actions" }))), this.closeable ?
-      (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
-      : '')));
-  }
-  static get is() { return "cura-alert"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-alert.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-alert.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'info' | 'success' | 'warning' | 'error'",
-          "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'info'"
-      },
-      "floating": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "floating",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": true
-      },
-      "closeable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "closeable",
-        "reflect": true,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "styles": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "close",
-        "name": "close",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "type",
-        "methodName": "setColors"
-      }];
-  }
+    constructor() {
+        this.handleClose = () => {
+            this.close.emit();
+            this.host.remove();
+        };
+        this.type = 'info';
+        this.floating = false;
+        this.label = undefined;
+        this.closeable = true;
+        this.icon = undefined;
+        this.styles = {};
+    }
+    setColors() {
+        const colors = [
+            { name: '--color-lighter', theme: `${this.type}-lighter` },
+            { name: '--neutral-black', theme: 'neutral-black' },
+            { name: '--color-light', theme: `${this.type}-light` },
+            { name: '--color-base', theme: `${this.type}-base` },
+        ];
+        colors.forEach(color => {
+            this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    connectedCallback() {
+        this.setColors();
+    }
+    getClasses() {
+        const classes = {};
+        classes['conteiner'] = true;
+        classes['floating'] = this.floating;
+        return classes;
+    }
+    getNameIcon() {
+        const iconMapping = {
+            info: 'infoCircle',
+            success: 'checkCircle',
+            warning: 'alertCircle',
+            error: 'alertTriangle',
+        };
+        return this.icon ? this.icon : iconMapping[this.type];
+    }
+    render() {
+        return (h(Host, { key: '874149c03df4a705e618cfdbfe98294cd1e3ef13' }, h("div", { key: 'ded92424295ffe7f082dc0152689f0bf6d862466', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'cac5d460fa77bb519d0cbdc2a651e52e024f2b80', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '9b7770169053ca34d9a96ef44f6c110d36ee1f87', class: "content" }, h("cura-label", { key: 'b131071ad2e29b165ce767e2c3ef68bb5464a57c', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: 'aa027c5e80769cf3a1446a9f629493eae2bd7263', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '3ca047a4f9a25c8f060bcd5e14adf0a1c66c7a25' })), h("div", { key: '0c2e0f5e6b88b780236aecedbc9b68413600e6be', class: "actions" }, h("slot", { key: '3866c4c4629f22fa76c034c5ba0bf9ef8f8bdf8b', name: "actions" }))), this.closeable ?
+            (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
+            : '')));
+    }
+    static get is() { return "cura-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-alert.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'info' | 'success' | 'warning' | 'error'",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'info'"
+            },
+            "floating": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "floating",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "closeable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "closeable",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "setColors"
+            }];
+    }
 }
 //# sourceMappingURL=cura-alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cura-alert.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({reflect: true}) closeable = true;\n  @State()\n  styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            <cura-label class=\"title\" size=\"small\" color=\"neutral-darker\" weight=\"bold\">\n              {this.label}\n            </cura-label>\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <div class=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-alert.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeable = true;\n  @Prop({ reflect: true }) icon: string;\n  @State()\n  styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            <cura-label class=\"title\" size=\"small\" color=\"neutral-darker\" weight=\"bold\">\n              {this.label}\n            </cura-label>\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <div class=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,95 +1,108 @@
 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";
 const renderCuraAlert = (label, args) => {
-  const block = `<cura-alert${label ? `
+    const block = `<cura-alert${label ? `
   label="${label}"` : ''}${args.type && args.type !== 'info' ? `
   type="${args.type}"` : ''}${args.closeable === false ? `
   closeable="${args.closeable}"` : ''}${args.floating ? `
-  floating="${args.floating}"` : ''}>
+  floating="${args.floating}"` : ''}${args.icon ? `
+  icon="${args.icon}"` : ''}>
   ${args.content}${args.actions ? `
   <cura-paragraph slot="actions" margin-block="0" spot-color="${args.type}-dark" size="xsmall">${args.actions}</cura-paragraph>` : ''}
 </cura-alert>
 `;
-  return `${block}`;
+    return `${block}`;
 };
 export default {
-  title: 'Componentes/Feedback/Alert',
-  tags: ['autodocs'],
-  render: (_a) => {
-    var { label } = _a, args = __rest(_a, ["label"]);
-    return renderCuraAlert(label, args);
-  },
-  argTypes: {
-    floating: {
-      control: 'boolean',
-      description: 'Define se o alerta é flutuante e aplica o sombreamento.',
-      table: {
-        category: 'State',
-        defaultValue: { summary: false },
-      },
+    title: 'Componentes/Feedback/Alert',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var { label } = _a, args = __rest(_a, ["label"]);
+        return renderCuraAlert(label, args);
     },
-    closeable: {
-      control: 'boolean',
-      description: 'Define se o alerta pode ser fechado.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: true },
-      },
+    argTypes: {
+        floating: {
+            control: 'boolean',
+            description: 'Define se o alerta é flutuante e aplica o sombreamento.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false },
+            },
+        },
+        closeable: {
+            control: 'boolean',
+            description: 'Define se o alerta pode ser fechado.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: true },
+            },
+        },
+        type: {
+            control: { type: 'select' },
+            options: ['', 'info', 'success', 'warning', 'error'],
+            description: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'info' },
+            },
+            name: 'type',
+        },
+        label: {
+            control: 'text',
+            description: 'Título do alerta.',
+            table: {
+                category: 'Properties',
+            },
+            name: 'label',
+        },
+        icon: {
+            control: { type: 'select' },
+            options: ['', ...iconNames],
+            description: 'Nome do ícone personalizado.',
+            table: {
+                category: 'Icons',
+                defaultValue: { summary: 'De acordo com o tipo de alert.' },
+            },
+            name: 'icon'
+        },
+        actions: {
+            control: 'text',
+            description: 'Conteúdo de itens de ação do alerta. É projetado no slot nomeado `actions`.',
+            defaultValue: '',
+            table: {
+                category: 'Slot',
+            },
+        },
+        content: {
+            control: 'text',
+            description: 'Conteúdo do texto principal do alerta. É projetado automaticamente dentro do slot padrão.',
+            defaultValue: '',
+            table: {
+                category: 'Slot',
+            },
+        },
     },
-    type: {
-      control: { type: 'select' },
-      options: ['', 'info', 'success', 'warning', 'error'],
-      description: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'info' },
-      },
-      name: 'type',
-    },
-    label: {
-      control: 'text',
-      description: 'Título do alerta.',
-      table: {
-        category: 'Properties',
-      },
-      name: 'label',
-    },
-    actions: {
-      control: 'text',
-      description: 'Conteúdo de itens de ação do alerta. É projetado no slot nomeado `actions`.',
-      defaultValue: '',
-      table: {
-        category: 'Slot',
-      },
-    },
-    content: {
-      control: 'text',
-      description: 'Conteúdo do texto principal do alerta. É projetado automaticamente dentro do slot padrão.',
-      defaultValue: '',
-      table: {
-        category: 'Slot',
-      },
-    },
-  },
 };
 export const Alert = {
-  args: {
-    label: 'Título do alerta',
-    type: 'info',
-    closeable: true,
-    floating: false,
-    content: 'Texto explicativo para o alert.',
-    actions: '<a href="https://www.rededorsaoluiz.com.br" target="_blank">Link</a>',
-  },
+    args: {
+        label: 'Título do alerta',
+        type: 'info',
+        closeable: true,
+        floating: false,
+        icon: '',
+        content: 'Texto explicativo para o alert.',
+        actions: '<a href="https://www.rededorsaoluiz.com.br" target="_blank">Link</a>',
+    },
 };
 //# sourceMappingURL=cura-alert.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cura-alert.stories.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,IAAS,EAAE,EAAE;EACnD,MAAM,KAAK,GAAG,cAAc,KAAK,CAAC,CAAC,CAAC;WAC3B,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;UACrD,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC;eAC1C,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;cAC1C,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;IAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;gEAC8B,IAAI,CAAC,IAAI,wBAAwB,IAAI,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,EAAE;;CAEpI,CAAC;EACA,OAAO,GAAG,KAAK,EAAE,CAAC;AACpB,CAAC,CAAA;AAED,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,OAAO,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;EACtC,CAAC;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,yDAAyD;MACtE,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,sCAAsC;MACnD,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;MACpD,WAAW,EAAE,0FAA0F;MACvG,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;MACD,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,mBAAmB;MAChC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;OACvB;MACD,IAAI,EAAE,OAAO;KACd;IACD,OAAO,EAAE;MACP,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,6EAA6E;MAC1F,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;OACjB;KACF;IACD,OAAO,EAAE;MACP,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,2FAA2F;MACxG,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;OACjB;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;EACnB,IAAI,EAAE;IACJ,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,iCAAiC;IAC1C,OAAO,EAAE,sEAAsE;GAChF;CACF,CAAC","sourcesContent":["const renderCuraAlert = (label: string, args: any) => {\n  const block = `<cura-alert${label ? `\n  label=\"${label}\"` : ''}${args.type && args.type !== 'info' ? `\n  type=\"${args.type}\"` : ''}${args.closeable === false ? `\n  closeable=\"${args.closeable}\"` : ''}${args.floating ? `\n  floating=\"${args.floating}\"` : ''}>\n  ${args.content}${args.actions ? `\n  <cura-paragraph slot=\"actions\" margin-block=\"0\" spot-color=\"${args.type}-dark\" size=\"xsmall\">${args.actions}</cura-paragraph>` : ''}\n</cura-alert>\n`;\n  return `${block}`;\n}\n\nexport default {\n  title: 'Componentes/Feedback/Alert',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraAlert(label, args);\n  },\n  argTypes: {\n    floating: {\n      control: 'boolean',\n      description: 'Define se o alerta é flutuante e aplica o sombreamento.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    closeable: {\n      control: 'boolean',\n      description: 'Define se o alerta pode ser fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n    },\n    type: {\n      control: { type: 'select' },\n      options: ['', 'info', 'success', 'warning', 'error'],\n      description: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'info' },\n      },\n      name: 'type',\n    },\n    label: {\n      control: 'text',\n      description: 'Título do alerta.',\n      table: {\n        category: 'Properties',\n      },\n      name: 'label',\n    },\n    actions: {\n      control: 'text',\n      description: 'Conteúdo de itens de ação do alerta. É projetado no slot nomeado `actions`.',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n    content: {\n      control: 'text',\n      description: 'Conteúdo do texto principal do alerta. É projetado automaticamente dentro do slot padrão.',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n  },\n};\n\nexport const Alert = {\n  args: {\n    label: 'Título do alerta',\n    type: 'info',\n    closeable: true,\n    floating: false,\n    content: 'Texto explicativo para o alert.',\n    actions: '<a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">Link</a>',\n  },\n};\n"]}
+{"version":3,"file":"cura-alert.stories.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\n\nconst renderCuraAlert = (label: string, args: any) => {\n  const block = `<cura-alert${label ? `\n  label=\"${label}\"` : ''}${args.type && args.type !== 'info' ? `\n  type=\"${args.type}\"` : ''}${args.closeable === false ? `\n  closeable=\"${args.closeable}\"` : ''}${args.floating ? `\n  floating=\"${args.floating}\"` : ''}${args.icon ? `\n  icon=\"${args.icon}\"` : ''}>\n  ${args.content}${args.actions ? `\n  <cura-paragraph slot=\"actions\" margin-block=\"0\" spot-color=\"${args.type}-dark\" size=\"xsmall\">${args.actions}</cura-paragraph>` : ''}\n</cura-alert>\n`;\n  return `${block}`;\n}\n\nexport default {\n  title: 'Componentes/Feedback/Alert',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraAlert(label, args);\n  },\n  argTypes: {\n    floating: {\n      control: 'boolean',\n      description: 'Define se o alerta é flutuante e aplica o sombreamento.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    closeable: {\n      control: 'boolean',\n      description: 'Define se o alerta pode ser fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n    },\n    type: {\n      control: { type: 'select' },\n      options: ['', 'info', 'success', 'warning', 'error'],\n      description: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'info' },\n      },\n      name: 'type',\n    },\n    label: {\n      control: 'text',\n      description: 'Título do alerta.',\n      table: {\n        category: 'Properties',\n      },\n      name: 'label',\n    },\n    icon: {\n      control: {type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone personalizado.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'De acordo com o tipo de alert.' },\n      },\n      name: 'icon'\n    },\n    actions: {\n      control: 'text',\n      description: 'Conteúdo de itens de ação do alerta. É projetado no slot nomeado `actions`.',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n    content: {\n      control: 'text',\n      description: 'Conteúdo do texto principal do alerta. É projetado automaticamente dentro do slot padrão.',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n  },\n};\n\nexport const Alert = {\n  args: {\n    label: 'Título do alerta',\n    type: 'info',\n    closeable: true,\n    floating: false,\n    icon: '',\n    content: 'Texto explicativo para o alert.',\n    actions: '<a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">Link</a>',\n  },\n};\n"]}

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

@@ -0,0 +1,24 @@
+:host {
+  display: inline-flex;
+}
+:host .conteiner {
+  display: flex;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  width: var(--size);
+  height: var(--size);
+  border: var(--border) solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: var(--background-color);
+  overflow: hidden;
+}
+:host .conteiner.floating {
+  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);
+}
+:host .conteiner img {
+  outline: none;
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,7 @@
+export const avatarSizes = {
+    '80': { border: 2.5 },
+    '40': { border: 2.25 },
+    '32': { border: 2 },
+    '24': { border: 1.75 },
+};
+//# sourceMappingURL=cura-avatar.definitions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-avatar.definitions.js","sourceRoot":"","sources":["../../../src/components/cura-avatar/cura-avatar.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACrB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;IACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;IACnB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;CACvB,CAAC","sourcesContent":["export const avatarSizes = {\n  '80': { border: 2.5 },\n  '40': { border: 2.25 },\n  '32': { border: 2 },\n  '24': { border: 1.75 },\n};\n"]}