@rededor/cura 1.6.1-alpha.8 → 1.7.0

package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.css

@@ -0,0 +1,168 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+/**
+ * Global Button Definitions.
+ * Required CSS Properties:
+ * --font-size
+ * --base-spacing
+ * --font-family
+ * --font-weight-medium
+ * --text-align
+ */
+/**
+ * Spacing sass vars
+ */
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+/**
+ * Buttons Host element definitions.
+ * Use: @include button-host() { ... }
+ */
+/**
+ * Buttons base definitions.
+ * Use: @include button-element() { ... }
+ */
+/**
+ * Button sizes definitions.
+ * Use: @include button-sizes() { ... }
+ */
+/**
+ * Button container definitions.
+ * Use: @include button-container() { ... }
+ */
+/**
+ * Button label definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button shadow definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button disabled state definitions
+ * Use: @include button-disabled() { ... }
+ */
+/**
+ * Button selected state definitions
+ * Use: @include button-selected() { ... }
+ */
+/**
+ * Button loading state definitions
+ * Use: @include button-loading() { ... }
+ */
+/**
+ * Button icon definitions
+ * Use: @include button-icon() { ... }
+ */
+/**
+ * Button icon only behavior definitions
+ * Use: @include button-icon-only-behavior() { ... }
+ */
+:host button,
+:host a {
+  outline: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none !important;
+  font-size: var(--font-size);
+  cursor: pointer;
+  transition: background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;
+  border-radius: var(--border-radius);
+  position: relative;
+  background-color: transparent;
+  box-sizing: border-box;
+  border: none;
+  min-width: 120px;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:host button:focus,
+:host a:focus {
+  outline: 2px solid #6EA8FF;
+}
+:host button.border-bottom,
+:host a.border-bottom {
+  border-bottom: 1px solid var(--border-bottom-color);
+}
+:host button.small,
+:host a.small {
+  padding: calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px);
+}
+:host button.medium,
+:host a.medium {
+  padding: calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px);
+}
+:host button.large,
+:host a.large {
+  padding: calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px);
+}
+:host button:not(.selected),
+:host a:not(.selected) {
+  border-color: var(--border-color);
+}
+:host button:focus,
+:host a:focus {
+  border-color: var(--primary-light);
+}
+:host button:not(.disabled, .selected):hover,
+:host a:not(.disabled, .selected):hover {
+  background-color: var(--background-color-hover);
+}
+:host button:not(.disabled, .selected):hover.dark,
+:host a:not(.disabled, .selected):hover.dark {
+  border-color: var(--neutral-purewhite);
+}
+:host button cura-icon,
+:host a cura-icon {
+  margin-right: calc(var(--cura-spacing-base) * 2px);
+}
+:host button.selected,
+:host a.selected {
+  cursor: pointer;
+}
+:host button.selected:not(.disabled),
+:host a.selected:not(.disabled) {
+  border-bottom: 1px solid var(--border-bottom-color-selected);
+}
+:host button.disabled,
+:host a.disabled {
+  cursor: not-allowed;
+}

package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.js

@@ -0,0 +1,258 @@
+import { h, Host } from "@stencil/core";
+import { labelSizes } from "../cura-tabs.definitions";
+export class CuraTabsTransparent {
+    constructor() {
+        this.name = undefined;
+        this.iconName = undefined;
+        this.selected = false;
+        this.disabled = false;
+        this.borderBottom = true;
+        this.size = 'large';
+        this.colorMode = 'light';
+        this.hovered = false;
+        this.styles = {};
+    }
+    setColors() {
+        const colors = [
+            {
+                name: '--border-bottom-color',
+                theme: this.colorMode === 'light' ? 'neutral-base' : 'primary',
+            },
+            {
+                name: '--border-bottom-color-selected',
+                theme: this.colorMode === 'light' ? 'primary-dark' : 'primary-lighter',
+            },
+        ];
+        colors.forEach(c => {
+            if (c.theme)
+                this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    computeContentColor() {
+        if (this.disabled)
+            return 'neutral-dark';
+        if (this.colorMode === 'dark') {
+            if (this.hovered && !this.selected) {
+                return 'neutral-purewhite';
+            }
+            return this.selected ? 'primary-lighter' : 'neutral-purewhite';
+        }
+        if (this.hovered && !this.selected) {
+            return 'primary-dark';
+        }
+        return this.selected ? 'primary-base' : 'neutral-black';
+    }
+    getIcon() {
+        if (!this.iconName)
+            return '';
+        const iconSize = this.size === 'large' ? 20 : 16;
+        const iconColor = this.computeContentColor();
+        return h("cura-icon", { name: this.iconName, size: iconSize, color: iconColor });
+    }
+    getClasses() {
+        return {
+            [this.size]: true,
+            [this.colorMode]: true,
+            'selected': this.selected,
+            'disabled': this.disabled,
+            'border-bottom': this.borderBottom,
+        };
+    }
+    connectedCallback() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
+        this.setColors();
+    }
+    handleMouseEnter() {
+        if (this.disabled)
+            return;
+        this.hovered = true;
+    }
+    handleMouseLeave() {
+        this.hovered = false;
+    }
+    handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.selected = !this.selected;
+        this.tabSelect.emit({ name: this.name });
+    }
+    render() {
+        const labelSize = labelSizes[this.size] || labelSizes['default'];
+        const labelColor = this.computeContentColor();
+        return (h(Host, { key: 'd3c9e277a079381def09397dc922d697aa99d70a', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, h("button", { key: 'ab4cac9782f48c367c4ada4e303f9422971dc38e', class: this.getClasses(), style: this.styles, onClick: e => this.handleClick(e), disabled: this.disabled, onMouseEnter: this.handleMouseEnter.bind(this), onMouseLeave: this.handleMouseLeave.bind(this) }, this.getIcon(), h("cura-label", { key: 'c6567bdf7b80efc3380a8a93bf52de966e1caa7d', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, h("slot", { key: '93c392107790a2c0e3499e5b7bd742219203a980' })))));
+    }
+    static get is() { return "cura-tabs-transparent"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-tabs-transparent.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-tabs-transparent.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
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-name",
+                "reflect": true
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "borderBottom": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "border-bottom",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'large'"
+            },
+            "colorMode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color-mode",
+                "reflect": true,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hovered": {},
+            "styles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabSelect",
+                "name": "tabSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string }",
+                    "resolved": "{ name: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "colorMode",
+                "methodName": "setColors"
+            }];
+    }
+}
+//# sourceMappingURL=cura-tabs-transparent.js.map

package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-tabs-transparent.js","sourceRoot":"","sources":["../../../../src/components/tabs/cura-tabs-transparent/cura-tabs-transparent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { labelSizes } from '../cura-tabs.definitions';\n\n@Component({\n  tag: 'cura-tabs-transparent',\n  styleUrl: 'cura-tabs-transparent.scss',\n  shadow: true,\n})\nexport class CuraTabsTransparent {\n  @Prop({ reflect: true }) name: string;\n  @Prop({ reflect: true }) iconName: string;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) borderBottom: boolean = true;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n  @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n  @State() hovered = false;\n  @State() styles: Record<string, string> = {};\n\n  @Event() tabSelect: EventEmitter<{ name: string }>;\n\n  @Watch('colorMode')\n  setColors() {\n    const colors = [\n      {\n        name: '--border-bottom-color',\n        theme: this.colorMode === 'light' ? 'neutral-base' : 'primary',\n      },\n      {\n        name: '--border-bottom-color-selected',\n        theme: this.colorMode === 'light' ? 'primary-dark' : 'primary-lighter',\n      },\n    ];\n\n    colors.forEach(c => {\n      if (c.theme) this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);\n    });\n\n    this.styles = { ...this.styles };\n  }\n\n  computeContentColor(): string {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.colorMode === 'dark') {\n      if (this.hovered && !this.selected) {\n        return 'neutral-purewhite';\n      }\n      return this.selected ? 'primary-lighter' : 'neutral-purewhite';\n    }\n\n    if (this.hovered && !this.selected) {\n      return 'primary-dark';\n    }\n\n    return this.selected ? 'primary-base' : 'neutral-black';\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    const iconColor = this.computeContentColor();\n\n    return <cura-icon name={this.iconName} size={iconSize} color={iconColor}></cura-icon>;\n  }\n\n  getClasses() {\n    return {\n      [this.size]: true,\n      [this.colorMode]: true,\n      'selected': this.selected,\n      'disabled': this.disabled,\n      'border-bottom': this.borderBottom,\n    };\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.tabSelect.emit({ name: this.name });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    const labelColor = this.computeContentColor();\n\n    return (\n      <Host role=\"button\" aria-pressed={this.selected} aria-disabled={this.disabled}>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={e => this.handleClick(e)}\n          disabled={this.disabled}\n          onMouseEnter={this.handleMouseEnter.bind(this)}\n          onMouseLeave={this.handleMouseLeave.bind(this)}\n        >\n          {this.getIcon()}\n          <cura-label size={labelSize} color={labelColor} lineHeight=\"0\" marginBlock=\"0\">\n            <slot></slot>\n          </cura-label>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.stories.js

@@ -0,0 +1,89 @@
+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;
+};
+import iconNames from "../../../assets/icons/iconset-default-list";
+const renderCuraTabsTransparent = (args) => `
+  <cura-tabs-transparent
+      name=${args.name}
+      icon-name=${args.iconName}
+      selected=${args.selected}
+      disabled=${args.disabled}
+      border-bottom=${args.borderBottom}
+      size=${args.size}
+      color-mode=${args.colorMode}
+    >
+      Label
+  </cura-tabs-transparent>
+`;
+export default {
+    title: 'Componentes/Tabs/Tabs Transparent',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return renderCuraTabsTransparent(args);
+    },
+    argTypes: {
+        name: {
+            control: 'text',
+            description: 'Define o identificador único do tabs. Obrigatório definir um "name" distinto para cada cura-tabs-transparent quando utilizado dentro de um tabs-group, garantindo o controle correto do estado e a seleção da aba ativa.',
+            table: {
+                category: 'Properties',
+            },
+        },
+        iconName: {
+            control: { type: 'select' },
+            options: ['', ...iconNames],
+            description: 'Define o nome do ícone exibido do iconset.',
+            table: {
+                category: 'Properties',
+            },
+        },
+        selected: { control: 'boolean', description: 'Define se a aba está selecionada.', table: { category: 'State', defaultValue: { summary: false } } },
+        disabled: { control: 'boolean', description: 'Define se a aba está desabilitada.', table: { category: 'State', defaultValue: { summary: false } } },
+        borderBottom: { control: 'boolean', description: 'Define se a borda inferior é exibida.', table: { category: 'Properties', defaultValue: { summary: 'true' } } },
+        size: {
+            control: 'select',
+            options: ['small', 'medium', 'large'],
+            description: 'Define o tamanho do elemento.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'large' },
+            },
+        },
+        colorMode: {
+            control: { type: 'inline-radio' },
+            options: ['light', 'dark'],
+            description: 'Define a cor de tema.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'light' },
+            },
+        },
+        tabSelect: {
+            action: 'tabSelect',
+            description: 'Evento disparado ao clicar na aba. Retorna o "name" da aba.',
+            table: { category: 'Events' },
+        },
+    },
+};
+export const CuraTabs = {
+    args: {
+        name: 'tab1',
+        iconName: 'infoCircle',
+        selected: false,
+        disabled: false,
+        borderBottom: true,
+        size: 'large',
+        colorMode: 'light',
+    },
+};
+//# sourceMappingURL=cura-tabs-transparent.stories.js.map

package/dist/collection/components/tabs/cura-tabs-transparent/cura-tabs-transparent.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-tabs-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/cura-tabs-transparent/cura-tabs-transparent.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,MAAM,yBAAyB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC;;aAEpC,IAAI,CAAC,IAAI;kBACJ,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,QAAQ;iBACb,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;aAC1B,IAAI,CAAC,IAAI;mBACH,IAAI,CAAC,SAAS;;;;CAIhC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,OAAO,yBAAyB,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EACT,0NAA0N;YAC5N,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;YAC3B,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,mCAAmC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QAClJ,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oCAAoC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QACnJ,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,uCAAuC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;QAChK,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,WAAW,EAAE,+BAA+B;YAC5C,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,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;YAC1B,WAAW,EAAE,uBAAuB;YACpC,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,6DAA6D;YAC1E,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;SAC9B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,YAAY,EAAE,IAAI;QAClB,IAAI,EAAE,OAAO;QACb,SAAS,EAAE,OAAO;KACnB;CACF,CAAC","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraTabsTransparent = (args: any) => `\n  <cura-tabs-transparent\n      name=${args.name}\n      icon-name=${args.iconName}\n      selected=${args.selected}\n      disabled=${args.disabled}\n      border-bottom=${args.borderBottom}\n      size=${args.size}\n      color-mode=${args.colorMode}\n    >\n      Label\n  </cura-tabs-transparent>\n`;\n\nexport default {\n  title: 'Componentes/Tabs/Tabs Transparent',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraTabsTransparent(args);\n  },\n  argTypes: {\n    name: {\n      control: 'text',\n      description:\n        'Define o identificador único do tabs. Obrigatório definir um \"name\" distinto para cada cura-tabs-transparent quando utilizado dentro de um tabs-group, garantindo o controle correto do estado e a seleção da aba ativa.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    iconName: {\n      control: { type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Define o nome do ícone exibido do iconset.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    selected: { control: 'boolean', description: 'Define se a aba está selecionada.', table: { category: 'State', defaultValue: { summary: false } } },\n    disabled: { control: 'boolean', description: 'Define se a aba está desabilitada.', table: { category: 'State', defaultValue: { summary: false } } },\n    borderBottom: { control: 'boolean', description: 'Define se a borda inferior é exibida.', table: { category: 'Properties', defaultValue: { summary: 'true' } } },\n    size: {\n      control: 'select',\n      options: ['small', 'medium', 'large'],\n      description: 'Define o tamanho do elemento.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'large' },\n      },\n    },\n    colorMode: {\n      control: { type: 'inline-radio' },\n      options: ['light', 'dark'],\n      description: 'Define a cor de tema.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' },\n      },\n    },\n    tabSelect: {\n      action: 'tabSelect',\n      description: 'Evento disparado ao clicar na aba. Retorna o \"name\" da aba.',\n      table: { category: 'Events' },\n    },\n  },\n};\n\nexport const CuraTabs = {\n  args: {\n    name: 'tab1',\n    iconName: 'infoCircle',\n    selected: false,\n    disabled: false,\n    borderBottom: true,\n    size: 'large',\n    colorMode: 'light',\n  },\n};\n"]}

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

@@ -0,0 +1,7 @@
+export const labelSizes = {
+    small: 'xsmall',
+    medium: 'small',
+    large: 'medium',
+    default: 'medium',
+};
+//# sourceMappingURL=cura-tabs.definitions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-tabs.definitions.js","sourceRoot":"","sources":["../../../src/components/tabs/cura-tabs.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;CAClB,CAAC","sourcesContent":["export const labelSizes = {\n  small: 'xsmall',\n  medium: 'small',\n  large: 'medium',\n  default: 'medium',\n};\n"]}

package/dist/collection/components/text/cura-display/cura-display.js

@@ -60,7 +60,7 @@ export class CuraDisplay {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'd06d5fe13d7e9b52f2c4ba2da4367f5f96b3bd45', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
+        return (h(Host, { key: '264f7e93aac5ecb7a775c6e505f230518e3959f4', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
     }
     static get is() { return "cura-display"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-heading/cura-heading.js

@@ -59,7 +59,7 @@ export class CuraHeading {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '2dfeadb768cc139b6899a588bfd7dc69777bca22', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
+        return (h(Host, { key: 'd32c25d0110f82182f4559789f3d2db04e040afe', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
     }
     static get is() { return "cura-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-paragraph/cura-paragraph.js

@@ -43,7 +43,7 @@ export class CuraParagraph {
         return classes;
     }
     render() {
-        return (h(Host, { key: '7d8ec17290b3b8eaa731994ff75ac7dedf28fbb9', style: this.hostCSSProperties() }, h("p", { key: '72333398b57ca936d2d971db8ee6d7ba442cebec', style: this.styles, class: this.getClasses() }, h("slot", { key: 'ec65120173b5a1791d4018ca8a8583deb74efdc5' }))));
+        return (h(Host, { key: 'c3789e60b50107cc39c51e4a3ec317e86c966689', style: this.hostCSSProperties() }, h("p", { key: 'f70ffc6277b6164dfc8d230123820efb3d5daa64', style: this.styles, class: this.getClasses() }, h("slot", { key: '66251e59d51637fc7820516b17af8947cc9168e8' }))));
     }
     static get is() { return "cura-paragraph"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/cura-avatar.js

@@ -52,7 +52,7 @@ const CuraAvatar$1 = /*@__PURE__*/ proxyCustomElement(class CuraAvatar extends H
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (h(Host, { key: '4e81726b8f163587f37fc80a537470147ca0b8f8', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '0e844cd40171f401e51fef97a434e4ffbad1c946', class: this.getClasses(), style: this.styles }, h("img", { key: '92e0ecfb0996f822b53bcb41e91b92f619e1fbf6', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        return (h(Host, { key: '51683368cca9bff9bdf3a8e835990c89df3cd4be', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '84196bf4ed6914904f14f8ec0d07b40ceace5ebf', class: this.getClasses(), style: this.styles }, h("img", { key: '8968215d670f9cd5a042dd66e6dc15a75d07c68e', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"cura-avatar.js","mappings":";;AAAO,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;;ACLD,MAAM,aAAa,GAAG,4bAA4b,CAAC;AACnd,yBAAe,aAAa;;MCMfA,YAAU;;;;;oBAGqB,IAAI;+BACK,mBAAmB;;4BAEtB,KAAK;sBACV,KAAK;oBACQ,SAAS;;;;sBAK/C,EAAE;;IAGpB,WAAW,CAAC,IAAY;QACtB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,QAAQ,EAAE,GAAG,IAAI,IAAI,GACtB,CAAC;KACH;IAID,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;KAChB;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,iBAAiB;QACf,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1C,OAAO;YACL,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACxE,iBAAiB,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;YACzC,UAAU,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,IAAI,GAAG,GAAG;SACzD,CAAC;KACH;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,CAAC;KAChG;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,KAAK,IAC/C,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAAQ,CAC/I,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAvatar"],"sources":["src/components/cura-avatar/cura-avatar.definitions.tsx","src/components/cura-avatar/cura-avatar.scss?tag=cura-avatar&encapsulation=shadow","src/components/cura-avatar/cura-avatar.tsx"],"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",":host {\n  display: inline-flex;\n\n  .conteiner {\n    display: flex;\n    box-sizing: border-box;\n    justify-content: center;\n    align-items: center;\n    width: var(--size);\n    height: var(--size);\n    border: var(--border) solid var(--border-color);\n    border-radius: var(--border-radius);\n    background: var(--background-color);\n    overflow: hidden;\n    &.floating {\n      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n    }\n  }\n  .conteiner img {\n    outline: none;\n    object-fit: contain;\n    width: 100%;\n    height: 100%;\n  }\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { avatarSizes } from './cura-avatar.definitions';\n@Component({\n  tag: 'cura-avatar',\n  styleUrl: 'cura-avatar.scss',\n  shadow: true,\n})\nexport class CuraAvatar {\n  @Element() host: HTMLElement;\n\n  @Prop() size: '80' | '40' | '32' | '24' = '80';\n  @Prop({ reflect: true }) backgroundColor: string = 'neutral-purewhite';\n  @Prop({ reflect: true }) borderColor: string;\n  @Prop({ reflect: true }) borderRadius: string = '50%';\n  @Prop({ reflect: true }) border: boolean = false;\n  @Prop({ reflect: true }) type: 'default' | 'branding' = 'default';\n  @Prop({ reflect: true, mutable: true }) imageSrc: string;\n  @Prop({ reflect: true }) imageSrcDefault: string;\n  @Prop({ reflect: true }) floating: boolean;\n\n  @State() styles = {};\n\n  @Watch('size')\n  sizeHandler(size: string) {\n    this.styles = {\n      ...this.styles,\n      '--size': `${size}px`,\n    };\n  }\n\n  assetsPath: string;\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n  }\n\n  hostCSSProperties() {\n    const avatarSize = avatarSizes[this.size];\n\n    return {\n      '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),\n      '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),\n      '--border-radius': `${this.borderRadius}`,\n      '--border': this.border ? `${avatarSize.border}px` : '0',\n    };\n  }\n\n  onSrcError() {\n    this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()} role=\"img\">\n        <div class={this.getClasses()} style={this.styles}>\n          <img src={this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`} onError={() => this.onSrcError()}></img>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-avatar.js","mappings":";;AAAO,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;;ACLD,MAAM,aAAa,GAAG,4bAA4b,CAAC;AACnd,yBAAe,aAAa;;MCMfA,YAAU;;;;;oBAOqB,IAAI;+BAMK,mBAAmB;;4BAUtB,KAAK;sBAKV,KAAK;oBAKQ,SAAS;;;;sBAiB/C,EAAE;;IAGpB,WAAW,CAAC,IAAY;QACtB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,QAAQ,EAAE,GAAG,IAAI,IAAI,GACtB,CAAC;KACH;IAID,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;KAChB;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,iBAAiB;QACf,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1C,OAAO;YACL,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACxE,iBAAiB,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;YACzC,UAAU,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,IAAI,GAAG,GAAG;SACzD,CAAC;KACH;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,CAAC;KAChG;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,KAAK,IAC/C,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAAQ,CAC/I,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAvatar"],"sources":["src/components/cura-avatar/cura-avatar.definitions.tsx","src/components/cura-avatar/cura-avatar.scss?tag=cura-avatar&encapsulation=shadow","src/components/cura-avatar/cura-avatar.tsx"],"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",":host {\n  display: inline-flex;\n\n  .conteiner {\n    display: flex;\n    box-sizing: border-box;\n    justify-content: center;\n    align-items: center;\n    width: var(--size);\n    height: var(--size);\n    border: var(--border) solid var(--border-color);\n    border-radius: var(--border-radius);\n    background: var(--background-color);\n    overflow: hidden;\n    &.floating {\n      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n    }\n  }\n  .conteiner img {\n    outline: none;\n    object-fit: contain;\n    width: 100%;\n    height: 100%;\n  }\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { avatarSizes } from './cura-avatar.definitions';\n@Component({\n  tag: 'cura-avatar',\n  styleUrl: 'cura-avatar.scss',\n  shadow: true,\n})\nexport class CuraAvatar {\n  @Element() host: HTMLElement;\n\n  /**\n   * Size of the avatar. Values: 80, 40, 32, 24.\n   * @default 80\n   */\n  @Prop() size: '80' | '40' | '32' | '24' = '80';\n  /**\n   * Background color of the avatar.\n   * Accepts any color from the theme.\n   * @default neutral-purewhite\n   */\n  @Prop({ reflect: true }) backgroundColor: string = 'neutral-purewhite';\n  /**\n   * Border color of the avatar.\n   * Accepts any color from the theme.\n   */\n  @Prop({ reflect: true }) borderColor: string;\n  /**\n   * Border radius of the avatar.\n   * @default 50%\n   */\n  @Prop({ reflect: true }) borderRadius: string = '50%';\n  /**\n   * Show border of the avatar.\n   * @default false\n   */\n  @Prop({ reflect: true }) border: boolean = false;\n  /**\n   * Type of the avatar.\n   * @default default\n   */\n  @Prop({ reflect: true }) type: 'default' | 'branding' = 'default';\n  /**\n   * Image source of the avatar.\n   * Accepts any image source. If not provided, the default image will be used.\n   */\n  @Prop({ reflect: true, mutable: true }) imageSrc: string;\n  /**\n   * Default image source of the avatar.\n   * Some predefined images are available in the design system assets folder.\n   */\n  @Prop({ reflect: true }) imageSrcDefault: string;\n  /**\n   * Floating state of the avatar.\n   * @default false\n   */\n  @Prop({ reflect: true }) floating: boolean;\n\n  @State() styles = {};\n\n  @Watch('size')\n  sizeHandler(size: string) {\n    this.styles = {\n      ...this.styles,\n      '--size': `${size}px`,\n    };\n  }\n\n  assetsPath: string;\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n  }\n\n  hostCSSProperties() {\n    const avatarSize = avatarSizes[this.size];\n\n    return {\n      '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),\n      '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),\n      '--border-radius': `${this.borderRadius}`,\n      '--border': this.border ? `${avatarSize.border}px` : '0',\n    };\n  }\n\n  onSrcError() {\n    this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()} role=\"img\">\n        <div class={this.getClasses()} style={this.styles}>\n          <img src={this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`} onError={() => this.onSrcError()}></img>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}