@rededor/cura 1.4.0 → 1.5.0-alpha.1

package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js

@@ -0,0 +1,153 @@
+import { Host, h } from "@stencil/core";
+export class CuraStepperItem {
+    constructor() {
+        this.statusMap = {
+            active: {
+                badgeColor: 'info',
+                textColor: 'info-dark',
+                icon: '',
+                iconOnly: false,
+            },
+            stop: {
+                badgeColor: 'error',
+                textColor: 'error-darker',
+                icon: 'alertCircle',
+                iconOnly: true,
+            },
+            done: {
+                badgeColor: 'success',
+                textColor: 'success-darker',
+                icon: 'checkCircle',
+                iconOnly: true,
+            },
+            default: {
+                badgeColor: 'neutral',
+                textColor: 'neutral',
+                icon: '',
+                iconOnly: false,
+            },
+        };
+        this.displayHeading = false;
+        this.heading = undefined;
+        this.label = undefined;
+        this.status = 'default';
+        this.styles = {};
+    }
+    connectedCallback() {
+        this.updateStyles();
+    }
+    getStatusProperties() {
+        return this.statusMap[this.status] || this.statusMap.default;
+    }
+    updateStyles() {
+        const { fonts, colors, spacing } = window.CuraAPI.theme;
+        const weights = fonts.getWeights();
+        this.styles = {
+            '--base-spacing': spacing.getSpacing(),
+            '--neutral-purewhite': colors.getColor('neutral-purewhite'),
+            '--neutral-lighter': colors.getColor('neutral-lighter'),
+            '--neutral-base': colors.getColor('neutral-base'),
+            '--font-size': fonts.getSize(),
+            '--font-color': fonts.getColor(),
+            '--font-family': fonts.getFamily(),
+            '--font-weight-regular': weights.regular,
+        };
+    }
+    render() {
+        const { badgeColor, textColor, icon, iconOnly } = this.getStatusProperties();
+        return (h(Host, { key: 'c226daf451d9c861d5303474ef0fc31c1602371b' }, h("div", { key: '7aece988946e4bef02c597a80ea1a505c201e188', class: "item-container", style: this.styles }, h("cura-badge-pill", { key: 'd0362b4a4ee3c047173399ea5f7c912a5a0f7810', type: "solid", color: badgeColor, "icon-name": icon, "icon-only": iconOnly, "border-radius": "50%" }, this.label), this.displayHeading && this.heading && (h("cura-paragraph", { key: '015effecdb26be22386363e77bd5a0e671701d60', marginBlock: "0", size: "xsmall", color: textColor }, this.heading)))));
+    }
+    static get is() { return "cura-stepper-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-stepper-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-stepper-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "displayHeading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the step title is displayed (default: false)"
+                },
+                "attribute": "display-heading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the step (displayed if `displayHeading` is true)"
+                },
+                "attribute": "heading",
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label displayed inside the badge"
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'done' | 'stop' | 'active' | 'default'",
+                    "resolved": "\"active\" | \"default\" | \"done\" | \"stop\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current status of the step\nCan be:\n   - 'done' for completed steps\n   - 'stop' for failed steps\n   - 'active' for the current active step\n   - 'default' for steps that are neither done, active nor stopped."
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=cura-stepper-item.js.map

package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-stepper-item.js","sourceRoot":"","sources":["../../../../src/components/cura-stepper/cura-stepper-item/cura-stepper-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,eAAe;;QAkC1B,cAAS,GAAG;YACV,MAAM,EAAE;gBACN,UAAU,EAAE,MAAM;gBAClB,SAAS,EAAE,WAAW;gBACtB,IAAI,EAAE,EAAE;gBACR,QAAQ,EAAE,KAAK;aAChB;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,OAAO;gBACnB,SAAS,EAAE,cAAc;gBACzB,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;aACf;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,SAAS;gBACrB,SAAS,EAAE,gBAAgB;gBAC3B,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;aACf;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;gBACrB,SAAS,EAAE,SAAS;gBACpB,IAAI,EAAE,EAAE;gBACR,QAAQ,EAAE,KAAK;aAChB;SACF,CAAC;8BAvDiD,KAAK;;;sBAoBkB,SAAS;sBAEjE,EAAE;;IAIpB,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IA6BD,mBAAmB;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;IAC/D,CAAC;IAED,YAAY;QACV,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QACxD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;QAEnC,IAAI,CAAC,MAAM,GAAG;YACZ,gBAAgB,EAAE,OAAO,CAAC,UAAU,EAAE;YACtC,qBAAqB,EAAE,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC;YAC3D,mBAAmB,EAAE,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAC;YACvD,gBAAgB,EAAE,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YACjD,aAAa,EAAE,KAAK,CAAC,OAAO,EAAE;YAC9B,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE;YAChC,eAAe,EAAE,KAAK,CAAC,SAAS,EAAE;YAClC,uBAAuB,EAAE,OAAO,CAAC,OAAO;SACzC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM;gBAC5C,wEACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAuG,eACnG,IAAI,eACJ,QAAQ,mBACL,KAAK,IAElB,IAAI,CAAC,KAAK,CACK;gBACjB,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,IAAI,CACtC,uEAAgB,WAAW,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,SAAS,IAC3D,IAAI,CAAC,OAAO,CACE,CAClB,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-stepper-item',\n  styleUrl: 'cura-stepper-item.scss',\n  shadow: true,\n})\nexport class CuraStepperItem {\n  /**\n   *  Determines if the step title is displayed (default: false)\n   */\n  @Prop({ reflect: true }) displayHeading: boolean = false;\n\n  /**\n   * The title of the step (displayed if `displayHeading` is true)\n   */\n  @Prop({ reflect: true }) heading: string;\n\n  /**\n   *  The label displayed inside the badge\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * The current status of the step\n   * Can be:\n   *    - 'done' for completed steps\n   *    - 'stop' for failed steps\n   *    - 'active' for the current active step\n   *    - 'default' for steps that are neither done, active nor stopped.\n   */\n  @Prop({ reflect: true }) status: 'done' | 'stop' | 'active' | 'default' = 'default';\n\n  @State() styles = {};\n\n  @Element() hostElement: HTMLElement;\n\n  connectedCallback() {\n    this.updateStyles();\n  }\n\n  statusMap = {\n    active: {\n      badgeColor: 'info',\n      textColor: 'info-dark',\n      icon: '',\n      iconOnly: false,\n    },\n    stop: {\n      badgeColor: 'error',\n      textColor: 'error-darker',\n      icon: 'alertCircle',\n      iconOnly: true,\n    },\n    done: {\n      badgeColor: 'success',\n      textColor: 'success-darker',\n      icon: 'checkCircle',\n      iconOnly: true,\n    },\n    default: {\n      badgeColor: 'neutral',\n      textColor: 'neutral',\n      icon: '',\n      iconOnly: false,\n    },\n  };\n\n  getStatusProperties() {\n    return this.statusMap[this.status] || this.statusMap.default;\n  }\n\n  updateStyles() {\n    const { fonts, colors, spacing } = window.CuraAPI.theme;\n    const weights = fonts.getWeights();\n\n    this.styles = {\n      '--base-spacing': spacing.getSpacing(),\n      '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n      '--neutral-lighter': colors.getColor('neutral-lighter'),\n      '--neutral-base': colors.getColor('neutral-base'),\n      '--font-size': fonts.getSize(),\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-weight-regular': weights.regular,\n    };\n  }\n\n  render() {\n    const { badgeColor, textColor, icon, iconOnly } = this.getStatusProperties();\n    return (\n      <Host>\n        <div class=\"item-container\" style={this.styles}>\n          <cura-badge-pill\n            type=\"solid\"\n            color={badgeColor as 'info' | 'error' | 'success' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'warning'}\n            icon-name={icon}\n            icon-only={iconOnly}\n            border-radius=\"50%\"\n          >\n            {this.label}\n          </cura-badge-pill>\n          {this.displayHeading && this.heading && (\n            <cura-paragraph marginBlock=\"0\" size=\"xsmall\" color={textColor}>\n              {this.heading}\n            </cura-paragraph>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,72 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+cura-heading {
+  --margin-block: 0 !important;
+}
+
+.container {
+  display: flex;
+}
+
+.compact {
+  display: flex;
+  padding: 0px;
+  justify-content: space-between;
+  align-items: center;
+}
+.compact .heading {
+  text-align: right;
+}
+
+.stepper-list {
+  gap: 4px;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0;
+  flex: 1;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex: 1;
+  gap: 4px;
+}
+.step .wrapper {
+  flex: 1;
+  position: relative;
+}
+.step .divider {
+  background-color: var(--neutral-light);
+  height: 2px;
+  flex: 1;
+  transition: all 1s;
+}
+.step .animation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: var(--progress-width);
+}
+.step .done {
+  background-color: var(--success-light);
+}
+.step .stop {
+  background-color: var(--error-light);
+}
+.step .active {
+  background-color: var(--info-light);
+}
+
+.last {
+  flex: 0;
+}

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

@@ -0,0 +1,227 @@
+import { Host, h } from "@stencil/core";
+export class CuraStepper {
+    constructor() {
+        this.activeStepIndex = undefined;
+        this.errorInCurrentStep = false;
+        this.displayHeading = false;
+        this.variant = 'default';
+        this.steps = [];
+        this.styles = {};
+        this.stepList = [];
+    }
+    connectedCallback() {
+        this.initializeSteps();
+        const { fonts, colors, spacing } = window.CuraAPI.theme;
+        const weights = fonts.getWeights();
+        this.styles = this.generateStyles(colors, fonts, spacing, weights);
+    }
+    generateStyles(colors, fonts, spacing, weights) {
+        return {
+            '--base-spacing': spacing.getSpacing(),
+            '--neutral-purewhite': colors.getColor('neutral-purewhite'),
+            '--neutral-lighter': colors.getColor('neutral-lighter'),
+            '--neutral-base': colors.getColor('neutral-base'),
+            '--neutral-light': colors.getColor('neutral-light'),
+            '--success-light': colors.getColor('success-light'),
+            '--info-light': colors.getColor('info-light'),
+            '--error-light': colors.getColor('error-light'),
+            '--font-size': fonts.getSize(),
+            '--font-color': fonts.getColor(),
+            '--font-family': fonts.getFamily(),
+            '--font-weight-regular': weights.regular,
+        };
+    }
+    initializeSteps() {
+        if (typeof this.steps === 'string') {
+            this.stepList = JSON.parse(this.steps || '[]');
+        }
+        else {
+            this.stepList = this.steps;
+        }
+    }
+    getStepStatus(step) {
+        if (this.activeStepIndex === step && this.errorInCurrentStep)
+            return 'stop';
+        if (this.activeStepIndex === step && this.stepList.length !== step)
+            return 'active';
+        if (this.activeStepIndex >= step)
+            return 'done';
+        return 'default';
+    }
+    getProgressStyles() {
+        const progressStyles = {
+            default: {
+                progressColor: 'var(--info-light)',
+                activeStepTextColor: 'info-darker',
+                nextStepTextColor: 'info-dark',
+            },
+            firstStep: {
+                progressColor: 'var(--info-light)',
+                activeStepTextColor: 'neutral-dark',
+                nextStepTextColor: 'neutral-medium',
+            },
+            completed: {
+                progressColor: 'var(--success-light)',
+                activeStepTextColor: 'success-darker',
+                nextStepTextColor: 'success-dark',
+            },
+            error: {
+                progressColor: 'var(--error-light)',
+                activeStepTextColor: 'error-darker',
+                nextStepTextColor: 'error-dark',
+            },
+        };
+        if (this.errorInCurrentStep) {
+            return progressStyles.error;
+        }
+        if (this.activeStepIndex === 0) {
+            return progressStyles.firstStep;
+        }
+        if (this.activeStepIndex === this.stepList.length) {
+            return progressStyles.completed;
+        }
+        return progressStyles.default;
+    }
+    renderCompactStepper() {
+        var _a;
+        const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;
+        const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : (_a = this.stepList[this.activeStepIndex]) === null || _a === void 0 ? void 0 : _a.title;
+        const completed = this.activeStepIndex === this.stepList.length;
+        const inProgress = !(completed || this.errorInCurrentStep);
+        const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();
+        // Representa a porcentagem de progresso (step atual / quantidade de steps;)
+        const progress = (this.activeStepIndex * 100) / this.stepList.length;
+        return (h("div", { class: "container compact", style: this.styles }, h("cura-progress-bar", { progress: progress, progressColor: progressColor, active: this.activeStepIndex !== 0 }, !inProgress ? (h("cura-icon", { name: this.errorInCurrentStep ? 'alertCircle' : 'checkCircle', color: this.errorInCurrentStep ? 'error-dark' : 'success-dark', size: "16" })) : (h("cura-heading", { color: "neutral-dark", size: "xsmall" }, this.activeStepIndex, "/", this.stepList.length))), this.displayHeading && (h("div", { class: "heading" }, h("cura-heading", { size: "small", weight: "bold", color: activeStepTextColor }, title), !completed && (h("cura-heading", { size: "xsmall", weight: "regular", color: nextStepTextColor }, "Pr\u00F3ximo: ", subtitle))))));
+    }
+    renderStep(step, stepIndex) {
+        const stepStatus = this.getStepStatus(stepIndex + 1);
+        const lastStep = stepIndex === this.stepList.length - 1;
+        const progressWidth = stepStatus !== 'default' ? '100%' : '0';
+        return (h("div", { class: `step ${lastStep ? 'last' : ''}`, key: step.title }, h("cura-stepper-item", { heading: step.title, label: step.label, displayHeading: this.displayHeading, status: stepStatus }), stepIndex < this.stepList.length - 1 && (h("div", { class: "wrapper" }, h("div", { class: "divider" }), h("div", { class: `divider ${stepStatus} animation`, style: { '--progress-width': progressWidth } })))));
+    }
+    renderStepper() {
+        return (h("div", { class: "container", style: this.styles }, h("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
+    }
+    render() {
+        return h(Host, { key: 'a3c23a43dc82cba74b777a7e28ae7de1632ec95d' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
+    }
+    static get is() { return "cura-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-stepper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "activeStepIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current active step index"
+                },
+                "attribute": "active-step-index",
+                "reflect": true
+            },
+            "errorInCurrentStep": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if a step has encountered an error\nIf `true`, the current step will be marked as 'stop'"
+                },
+                "attribute": "error-in-current-step",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "displayHeading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display the title (default: false)"
+                },
+                "attribute": "display-heading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'compact' | 'default'",
+                    "resolved": "\"compact\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows you to set the appearance of the component (default: default)"
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Step[] | string",
+                    "resolved": "Step[] | string",
+                    "references": {
+                        "Step": {
+                            "location": "import",
+                            "path": "./stepper.type",
+                            "id": "src/components/cura-stepper/stepper.type.ts::Step"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "List of steps in the stepper."
+                },
+                "attribute": "steps",
+                "reflect": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {},
+            "stepList": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=cura-stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-stepper.js","sourceRoot":"","sources":["../../../src/components/cura-stepper/cura-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzE,MAAM,OAAO,WAAW;;;kCAUiC,KAAK;8BAKT,KAAK;uBAKE,SAAS;qBAKlC,EAAE;sBAMjB,EAAE;wBAQQ,EAAE;;IAE9B,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QACxD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;QAEnC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACrE,CAAC;IAED,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO;QAC5C,OAAO;YACL,gBAAgB,EAAE,OAAO,CAAC,UAAU,EAAE;YACtC,qBAAqB,EAAE,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC;YAC3D,mBAAmB,EAAE,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAC;YACvD,gBAAgB,EAAE,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YACjD,iBAAiB,EAAE,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YACnD,iBAAiB,EAAE,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YACnD,cAAc,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC;YAC7C,eAAe,EAAE,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC;YAC/C,aAAa,EAAE,KAAK,CAAC,OAAO,EAAE;YAC9B,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE;YAChC,eAAe,EAAE,KAAK,CAAC,SAAS,EAAE;YAClC,uBAAuB,EAAE,OAAO,CAAC,OAAO;SACzC,CAAC;IACJ,CAAC;IAED,eAAe;QACb,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,aAAa,CAAC,IAAY;QACxB,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,IAAI,CAAC,kBAAkB;YAAE,OAAO,MAAM,CAAC;QAC5E,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,IAAI;YAAE,OAAO,QAAQ,CAAC;QACpF,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC;QAEhD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,iBAAiB;QACf,MAAM,cAAc,GAAG;YACrB,OAAO,EAAE;gBACP,aAAa,EAAE,mBAAmB;gBAClC,mBAAmB,EAAE,aAAa;gBAClC,iBAAiB,EAAE,WAAW;aAC/B;YACD,SAAS,EAAE;gBACT,aAAa,EAAE,mBAAmB;gBAClC,mBAAmB,EAAE,cAAc;gBACnC,iBAAiB,EAAE,gBAAgB;aACpC;YACD,SAAS,EAAE;gBACT,aAAa,EAAE,sBAAsB;gBACrC,mBAAmB,EAAE,gBAAgB;gBACrC,iBAAiB,EAAE,cAAc;aAClC;YACD,KAAK,EAAE;gBACL,aAAa,EAAE,oBAAoB;gBACnC,mBAAmB,EAAE,cAAc;gBACnC,iBAAiB,EAAE,YAAY;aAChC;SACF,CAAC;QAEF,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,OAAO,cAAc,CAAC,KAAK,CAAC;QAC9B,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,KAAK,CAAC,EAAE,CAAC;YAC/B,OAAO,cAAc,CAAC,SAAS,CAAC;QAClC,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAClD,OAAO,cAAc,CAAC,SAAS,CAAC;QAClC,CAAC;QAED,OAAO,cAAc,CAAC,OAAO,CAAC;IAChC,CAAC;IAED,oBAAoB;;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QACrI,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,0CAAE,KAAK,CAAC;QACzI,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAChE,MAAM,UAAU,GAAG,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC3D,MAAM,EAAE,aAAa,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAE3F,4EAA4E;QAC5E,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAErE,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM;YAC/C,yBAAmB,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,KAAK,CAAC,IACpG,CAAC,UAAU,CAAC,CAAC,CAAC,CACb,iBAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAa,CACjK,CAAC,CAAC,CAAC,CACF,oBAAc,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ;gBAC7C,IAAI,CAAC,eAAe;;gBAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAC/B,CAChB,CACiB;YACnB,IAAI,CAAC,cAAc,IAAI,CACtB,WAAK,KAAK,EAAC,SAAS;gBAClB,oBAAc,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAE,mBAAmB,IAChE,KAAK,CACO;gBACd,CAAC,SAAS,IAAI,CACb,oBAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAC,KAAK,EAAE,iBAAiB;;oBACzD,QAAQ,CACL,CAChB,CACG,CACP,CACG,CACP,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,IAAU,EAAE,SAAiB;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;QACrD,MAAM,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QACxD,MAAM,aAAa,GAAG,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;QAE9D,OAAO,CACL,WAAK,KAAK,EAAE,QAAQ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK;YAC3D,yBAAmB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,UAAU,GAAI;YACrH,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACvC,WAAK,KAAK,EAAC,SAAS;gBAClB,WAAK,KAAK,EAAC,SAAS,GAAG;gBACvB,WAAK,KAAK,EAAE,WAAW,UAAU,YAAY,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAAE,aAAa,EAAE,GAAI,CAC3F,CACP,CACG,CACP,CAAC;IACJ,CAAC;IACD,aAAa;QACX,OAAO,CACL,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM;YACvC,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAO,CACtG,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,EAAC,IAAI,uDAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;IACxG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, State, h, Element, Prop } from '@stencil/core';\nimport { Step } from './stepper.type';\n\n@Component({\n  tag: 'cura-stepper',\n  styleUrl: 'cura-stepper.scss',\n  shadow: true,\n})\nexport class CuraStepper {\n  /**\n   * The current active step index\n   */\n  @Prop({ reflect: true }) activeStepIndex: number;\n\n  /**\n   * Indicates if a step has encountered an error\n   * If `true`, the current step will be marked as 'stop'\n   */\n  @Prop({ reflect: true }) errorInCurrentStep: boolean = false;\n\n  /**\n   * Whether to display the title (default: false)\n   */\n  @Prop({ reflect: true }) displayHeading: boolean = false;\n\n  /**\n   * Allows you to set the appearance of the component (default: default)\n   */\n  @Prop({ reflect: true }) variant: 'compact' | 'default' = 'default';\n\n  /**\n   * List of steps in the stepper.\n   */\n  @Prop() steps: Step[] | string = [];\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  @State() styles = {};\n\n  /**\n   * Array of steps in the stepper.\n   *\n   * @type {Date[]}\n   * @default []\n   */\n  @State() stepList: Step[] = [];\n\n  connectedCallback() {\n    this.initializeSteps();\n\n    const { fonts, colors, spacing } = window.CuraAPI.theme;\n    const weights = fonts.getWeights();\n\n    this.styles = this.generateStyles(colors, fonts, spacing, weights);\n  }\n\n  generateStyles(colors, fonts, spacing, weights) {\n    return {\n      '--base-spacing': spacing.getSpacing(),\n      '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n      '--neutral-lighter': colors.getColor('neutral-lighter'),\n      '--neutral-base': colors.getColor('neutral-base'),\n      '--neutral-light': colors.getColor('neutral-light'),\n      '--success-light': colors.getColor('success-light'),\n      '--info-light': colors.getColor('info-light'),\n      '--error-light': colors.getColor('error-light'),\n      '--font-size': fonts.getSize(),\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-weight-regular': weights.regular,\n    };\n  }\n\n  initializeSteps() {\n    if (typeof this.steps === 'string') {\n      this.stepList = JSON.parse(this.steps || '[]');\n    } else {\n      this.stepList = this.steps;\n    }\n  }\n\n  getStepStatus(step: number): 'done' | 'stop' | 'active' | 'default' {\n    if (this.activeStepIndex === step && this.errorInCurrentStep) return 'stop';\n    if (this.activeStepIndex === step && this.stepList.length !== step) return 'active';\n    if (this.activeStepIndex >= step) return 'done';\n\n    return 'default';\n  }\n\n  getProgressStyles() {\n    const progressStyles = {\n      default: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'info-darker',\n        nextStepTextColor: 'info-dark',\n      },\n      firstStep: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'neutral-dark',\n        nextStepTextColor: 'neutral-medium',\n      },\n      completed: {\n        progressColor: 'var(--success-light)',\n        activeStepTextColor: 'success-darker',\n        nextStepTextColor: 'success-dark',\n      },\n      error: {\n        progressColor: 'var(--error-light)',\n        activeStepTextColor: 'error-darker',\n        nextStepTextColor: 'error-dark',\n      },\n    };\n\n    if (this.errorInCurrentStep) {\n      return progressStyles.error;\n    }\n\n    if (this.activeStepIndex === 0) {\n      return progressStyles.firstStep;\n    }\n\n    if (this.activeStepIndex === this.stepList.length) {\n      return progressStyles.completed;\n    }\n\n    return progressStyles.default;\n  }\n\n  renderCompactStepper() {\n    const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;\n    const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : this.stepList[this.activeStepIndex]?.title;\n    const completed = this.activeStepIndex === this.stepList.length;\n    const inProgress = !(completed || this.errorInCurrentStep);\n    const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();\n\n    // Representa a porcentagem de progresso (step atual / quantidade de steps;)\n    const progress = (this.activeStepIndex * 100) / this.stepList.length;\n\n    return (\n      <div class=\"container compact\" style={this.styles}>\n        <cura-progress-bar progress={progress} progressColor={progressColor} active={this.activeStepIndex !== 0}>\n          {!inProgress ? (\n            <cura-icon name={this.errorInCurrentStep ? 'alertCircle' : 'checkCircle'} color={this.errorInCurrentStep ? 'error-dark' : 'success-dark'} size=\"16\"></cura-icon>\n          ) : (\n            <cura-heading color=\"neutral-dark\" size=\"xsmall\">\n              {this.activeStepIndex}/{this.stepList.length}\n            </cura-heading>\n          )}\n        </cura-progress-bar>\n        {this.displayHeading && (\n          <div class=\"heading\">\n            <cura-heading size=\"small\" weight=\"bold\" color={activeStepTextColor}>\n              {title}\n            </cura-heading>\n            {!completed && (\n              <cura-heading size=\"xsmall\" weight=\"regular\" color={nextStepTextColor}>\n                Próximo: {subtitle}\n              </cura-heading>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderStep(step: Step, stepIndex: number) {\n    const stepStatus = this.getStepStatus(stepIndex + 1);\n    const lastStep = stepIndex === this.stepList.length - 1;\n    const progressWidth = stepStatus !== 'default' ? '100%' : '0';\n\n    return (\n      <div class={`step ${lastStep ? 'last' : ''}`} key={step.title}>\n        <cura-stepper-item heading={step.title} label={step.label} displayHeading={this.displayHeading} status={stepStatus} />\n        {stepIndex < this.stepList.length - 1 && (\n          <div class=\"wrapper\">\n            <div class=\"divider\" />\n            <div class={`divider ${stepStatus} animation`} style={{ '--progress-width': progressWidth }} />\n          </div>\n        )}\n      </div>\n    );\n  }\n  renderStepper() {\n    return (\n      <div class=\"container\" style={this.styles}>\n        <div class=\"stepper-list\">{this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex))}</div>\n      </div>\n    );\n  }\n\n  render() {\n    return <Host>{this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper()}</Host>;\n  }\n}\n"]}

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

@@ -0,0 +1,97 @@
+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;
+};
+const renderCuraStepper = (args) => {
+    const maxActiveStepIndex = Math.min(args.steps.length, args.activeStepIndex);
+    console.log(args.activeStepIndex);
+    return `<div style="width: 100%; height: 80px;">
+    <cura-stepper
+      steps='${JSON.stringify(args.steps)}'
+      ${args.displayHeading && `display-heading="${args.displayHeading}"`}
+      ${args.activeStepIndex >= 0 && `active-step-index="${maxActiveStepIndex}"`}
+      ${args.errorInCurrentStep && `error-in-current-step="${args.errorInCurrentStep}"`}
+      ${args.variant && args.variant !== 'default'
+        ? `
+        variant="${args.variant}"`
+        : ''}
+    ></cura-stepper>
+    </div>`;
+};
+export default {
+    title: 'Componentes/Stepper/Stepper',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return renderCuraStepper(args);
+    },
+    argTypes: {
+        steps: {
+            control: 'object',
+            description: 'Define a lista de passos',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: null },
+            },
+        },
+        activeStepIndex: {
+            control: 'number',
+            description: 'Passo atual',
+            required: false,
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 0 },
+            },
+        },
+        errorInCurrentStep: {
+            control: 'boolean',
+            description: 'Define se ocorreu um erro no passo atual (se este estiver ativo)',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false },
+            },
+        },
+        variant: {
+            control: { type: 'inline-radio' },
+            options: ['default', 'compact'],
+            description: 'Define a forma como o componente será apresentado',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'default' },
+            },
+            name: 'variant',
+        },
+        displayHeading: {
+            control: 'boolean',
+            description: 'Define se deve exibir os títulos de cada passo',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: true },
+            },
+        },
+    },
+};
+export const Stepper = {
+    args: {
+        steps: [
+            { title: 'Inicio', label: '1' },
+            { title: 'Exemplo', label: '2' },
+            { title: 'Passo Tres', label: '3' },
+            { title: 'Teste', label: '4' },
+            { title: 'Final', label: '5' },
+        ],
+        displayHeading: 'true',
+        errorInCurrentStep: 'false',
+        activeStepIndex: 0,
+        variant: 'default',
+    },
+};
+//# sourceMappingURL=cura-stepper.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-stepper.stories.js","sourceRoot":"","sources":["../../../src/components/cura-stepper/cura-stepper.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraStepper = (args: any) => {\n  const maxActiveStepIndex = Math.min(args.steps.length, args.activeStepIndex);\n\n  console.log(args.activeStepIndex);\n\n  return `<div style=\"width: 100%; height: 80px;\">\n    <cura-stepper\n      steps='${JSON.stringify(args.steps)}'\n      ${args.displayHeading && `display-heading=\"${args.displayHeading}\"`}\n      ${args.activeStepIndex >= 0 && `active-step-index=\"${maxActiveStepIndex}\"`}\n      ${args.errorInCurrentStep && `error-in-current-step=\"${args.errorInCurrentStep}\"`}\n      ${\n        args.variant && args.variant !== 'default'\n          ? `\n        variant=\"${args.variant}\"`\n          : ''\n      }\n    ></cura-stepper>\n    </div>`;\n};\n\nexport default {\n  title: 'Componentes/Stepper/Stepper',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraStepper(args);\n  },\n  argTypes: {\n    steps: {\n      control: 'object',\n      description: 'Define a lista de passos',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: null },\n      },\n    },\n    activeStepIndex: {\n      control: 'number',\n      description: 'Passo atual',\n      required: false,\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 0 },\n      },\n    },\n    errorInCurrentStep: {\n      control: 'boolean',\n      description: 'Define se ocorreu um erro no passo atual (se este estiver ativo)',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    variant: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'compact'],\n      description: 'Define a forma como o componente será apresentado',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n      name: 'variant',\n    },\n    displayHeading: {\n      control: 'boolean',\n      description: 'Define se deve exibir os títulos de cada passo',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n    },\n  },\n};\n\nexport const Stepper = {\n  args: {\n    steps: [\n      { title: 'Inicio', label: '1' },\n      { title: 'Exemplo', label: '2' },\n      { title: 'Passo Tres', label: '3' },\n      { title: 'Teste', label: '4' },\n      { title: 'Final', label: '5' },\n    ],\n    displayHeading: 'true',\n    errorInCurrentStep: 'false',\n    activeStepIndex: 0,\n    variant: 'default',\n  },\n};\n"]}

package/dist/collection/components/cura-stepper/stepper.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stepper.type.js.map

package/dist/collection/components/cura-stepper/stepper.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.type.js","sourceRoot":"","sources":["../../../src/components/cura-stepper/stepper.type.ts"],"names":[],"mappings":"","sourcesContent":["export interface Step {\n  label: string;\n  title: string;\n}\n"]}

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

@@ -21,7 +21,7 @@ export class CuraToast {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '0265d288e95db1331400e60d2ca694be22397294' }, h("div", { key: '2aee45d4fd237b703846272582e8258fbabb5238', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'c75ea1c8aceaf039e8d525c1ff406bcbf25b8554', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'e4d75da71aef899ec260666095f977caec86c19f', class: "content" }, h("cura-heading", { key: '3523fb7c3674854322dad502252cda7dd3bdca9e', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'a4d639691820e4e242a178604d9b20a97da7bccb', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '4b86678d47455798a0f5455a406c02eaf8000ba8' })), h("slot", { key: '28b9088b76b7b2084cf7024eb1f35f28b344e098', name: "actions" })), this.closeButton && h("cura-icon", { key: '20a3b18030bfc418439f75795bd98ebacbb1aeca', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '82b7e205ad8c5abae481bbed409109cd17661ce1', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: '4dc290042792d96f31c2e63936d70a77bc37917d' }, h("div", { key: '668c102d3a31d0a0e39c390546fcf5422e954246', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '502b24915e1000877ccd4ae25806b152b4a72948', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'd7afe4d1a9740d3bd1bce04858f6e71e0c857da2', class: "content" }, h("cura-heading", { key: '419e0d64e12e828efa2fecebe0eb86c74ff86dda', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'bc6f5c120f0b32858cbda9ebf16c5d79366452bb', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '9cc8ba28b3e5ee5d8137351cfbb5dc07b417b7e9' })), h("slot", { key: 'f260ca44fa6cc515a1bda3ecb94dd1ac90f880d7', name: "actions" })), this.closeButton && h("cura-icon", { key: '7db6c2e5c3c66ab0b12822fc8099e17b77ed2c39', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: 'd0a6f1e838ec98f6dac5773214e1e5cf501e3e2e', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();