npm - @rededor/cura - Versions diffs - 1.4.0 → 1.5.0-alpha.1 - Mend

@rededor/cura 1.4.0 → 1.5.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (281) hide show

package/dist/components/cura-stepper.js ADDED Viewed

@@ -0,0 +1,187 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './cura-badge-pill2.js';
+import { d as defineCustomElement$7 } from './cura-heading2.js';
+import { d as defineCustomElement$6 } from './cura-icon2.js';
+import { d as defineCustomElement$5 } from './cura-label2.js';
+import { d as defineCustomElement$4 } from './cura-paragraph2.js';
+import { d as defineCustomElement$3 } from './cura-progress-bar2.js';
+import { d as defineCustomElement$2 } from './cura-stepper-item2.js';
+const curaStepperCss = ":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}";
+const CuraStepperStyle0 = curaStepperCss;
+const CuraStepper$1 = /*@__PURE__*/ proxyCustomElement(class CuraStepper extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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());
+    }
+    get host() { return this; }
+    static get style() { return CuraStepperStyle0; }
+}, [1, "cura-stepper", {
+        "activeStepIndex": [514, "active-step-index"],
+        "errorInCurrentStep": [516, "error-in-current-step"],
+        "displayHeading": [516, "display-heading"],
+        "variant": [513],
+        "steps": [1],
+        "styles": [32],
+        "stepList": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-stepper", "cura-badge-pill", "cura-heading", "cura-icon", "cura-label", "cura-paragraph", "cura-progress-bar", "cura-stepper-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-stepper":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraStepper$1);
+            }
+            break;
+        case "cura-badge-pill":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "cura-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "cura-paragraph":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cura-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cura-stepper-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const CuraStepper = CuraStepper$1;
+const defineCustomElement = defineCustomElement$1;
+export { CuraStepper, defineCustomElement };
+//# sourceMappingURL=cura-stepper.js.map

package/dist/components/cura-stepper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"cura-stepper.js","mappings":"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","names":["CuraStepper"],"sources":["src/components/cura-stepper/cura-stepper.scss?tag=cura-stepper&encapsulation=shadow","src/components/cura-stepper/cura-stepper.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n width: 100%;\n}\n\ncura-heading { \n --margin-block: 0 !important;\n}\n\n.container {\n display: flex;\n}\n\n.compact {\n display: flex;\n padding: 0px;\n justify-content: space-between;\n align-items: center;\n\n .heading{\n text-align: right;\n }\n}\n\n.stepper-list {\n gap: 4px;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n padding: 0;\n flex: 1;\n width: 100%;\n justify-content: space-between;\n}\n\n.step{\n display: flex;\n align-items: center;\n flex-direction: row;\n flex: 1;\n gap: 4px;\n\n .wrapper {\n flex: 1;\n position: relative;\n }\n\n .divider{\n background-color: var(--neutral-light);\n height: 2px;\n flex: 1;\n\n transition: all 1s;\n }\n\n .animation {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n width: var(--progress-width);\n }\n\n .done{\n background-color: var(--success-light);\n }\n\n .stop{\n background-color: var(--error-light);\n }\n\n .active{\n background-color: var(--info-light);\n }\n}\n\n.last{\n flex: 0;\n}\n","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"],"version":3}

package/dist/components/cura-switch.js CHANGED Viewed

@@ -102,7 +102,7 @@ const CuraSwitch$1 = /*@__PURE__*/ proxyCustomElement(class CuraSwitch extends H
         return classes;
     }
     render() {
-        return (h(Host, { key: 'd7aee391a4604acfae345b3645543c6b27efc033' }, h("div", { key: '446f921b82386fb0f9d8d8551f6128a2891cd27e', class: this.getClasses(), style: this.styles }, h("div", { key: 'a6528ac65f396a40ea92556183d047212b4c678f', class: "info" }, h("cura-label", { key: '0d404e3d0310c985b03cc29d4b9495331ce87c2a', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '833c04b96bf358b2991b618f4089e7ce31e96e30', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '3cb25210dbc16055660d612b78940e5b53cf6f96' }))), h("div", { key: 'db87f67c29558a05704a5baae728bfaa4db217d1', onClick: this.toggleSwitch, class: "control" }, h("div", { key: 'cdafeccd3cd11f5b7bfabf73ce8e2a3476febe99', class: `track ${this.size.toLowerCase()}` }, h("div", { key: 'da8ef012bcb02afe21d22b0e6145a129a9282f25', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: '11257c8df21e4d88ef7a1e26b72f8c53fd316edd' }, h("div", { key: '358b9bf587443350fd092abb179b2207064c9278', class: this.getClasses(), style: this.styles }, h("div", { key: 'acc517d68a7fde4a83653a7fadbdb337e6175498', class: "info" }, h("cura-label", { key: 'dede214a31292a72e8f55adb50060628a1a101c0', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'a96960a7e898e8f9d7151c468d18e52860d589d1', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: 'de46f003bf8046e3742d831cc45d22471e19c0a4' }))), h("div", { key: 'ae0c72cd68ed42fec1338d6ded49d7b535157476', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '3aa0e60235071541289ea6a430966094a2753520', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '419866ba2b46a394428f83e6824ebb315e6671a1', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/components/cura-toast.js CHANGED Viewed

@@ -33,7 +33,7 @@ const CuraToast$1 = /*@__PURE__*/ proxyCustomElement(class CuraToast extends HTM
         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();

package/dist/components/cura-tooltip.js CHANGED Viewed

@@ -39,9 +39,10 @@ const CuraTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CuraTooltip extends
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: 'a8e36ac08ca7a12c1ff893c0d7525e31bd820b32', role: "tooltip", id: this.elementId }, h("div", { key: '8d1c01e85f80b2c00846273c270d7a09d555a038', class: "container", style: this.styles }, h("div", { key: '39501b4a8dbfc71cb166ec539db8fa24d2e65db0', class: "content" }, h("cura-heading", { key: '7c9209d35ab4dd2c21af7de18e013546947b3937', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '21cef01e82c0000eaaecf4ba7351d5cc416a45f4', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'c752679de543d3d31d4b4a5a97c928c7a5cc9f1a' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '398b9a3579df7969e319c207814cdf43e0bd7b5a', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: 'dc605edcfa382bad86acb8d51510c35a6ee67b74', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
+        return (h(Host, { key: '3fe89da4d5b3a2830d4ab6a88e705b4cf2433289', role: "tooltip", id: this.elementId }, h("div", { key: '6cece3dcbf275a851e0d53cb154b9dcf50a76948', class: "container", style: this.styles }, h("div", { key: '802840b89feb6c4d89303da156f6f130e552a83b', class: "content" }, h("cura-heading", { key: 'ea98692d4fc34f05dcf8fcd5c325b8a1cd408226', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '38bb7bf9f0a837813b490062ba5645f7148ac74b', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '960b6b6d8ee4636a31c2058aa4779050973e143e' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'd0bf72702fa8d24d1f5fac6fa473747bdaadcdaf', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '2213a6353b3d326ecde2e9eefe84811bd3161727', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
     }
     componentDidLoad() {
+        var _a, _b, _c, _d, _e;
         this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);
         if (!this.interactive) {
             this.host.style.visibility = 'visible';
@@ -50,28 +51,28 @@ const CuraTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CuraTooltip extends
             this.host.style.visibility = 'hidden';
             let openTimeoutID = null;
             let closeTimeoutID = null;
-            this.targetElement.addEventListener('mouseenter', () => {
+            (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', () => {
                 clearTimeout(closeTimeoutID);
                 openTimeoutID = setTimeout(() => {
                     this.host.style.visibility = 'visible';
                 }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
             });
-            this.targetElement.addEventListener('mouseleave', () => {
+            (_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', () => {
                 clearTimeout(openTimeoutID);
                 closeTimeoutID = setTimeout(() => {
                     this.handleClose();
                 }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
             });
-            this.host.addEventListener('mouseenter', () => {
+            (_c = this.host) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseenter', () => {
                 if (window.getComputedStyle(this.host).visibility === 'visible') {
                     clearTimeout(closeTimeoutID);
                 }
             });
-            this.host.addEventListener('mouseleave', () => {
+            (_d = this.host) === null || _d === void 0 ? void 0 : _d.addEventListener('mouseleave', () => {
                 clearTimeout(openTimeoutID);
                 this.handleClose();
             });
-            this.targetElement.addEventListener('click', () => {
+            (_e = this.targetElement) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => {
                 if (window.getComputedStyle(this.host).visibility === 'hidden') {
                     openTimeoutID = setTimeout(() => {
                         this.host.style.visibility = 'visible';
@@ -82,7 +83,7 @@ const CuraTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CuraTooltip extends
                     this.handleClose();
                 }
             });
-            document.addEventListener('click', (event) => {
+            document === null || document === void 0 ? void 0 : document.addEventListener('click', (event) => {
                 if (!this.targetElement.contains(event.target) && !this.host.contains(event.target)) {
                     clearTimeout(openTimeoutID);
                     this.handleClose();
@@ -117,7 +118,7 @@ const CuraTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CuraTooltip extends
         this.host.style.bottom = this.isMobile ? '0' : 'unset';
         container.style.flexDirection = this.isMobile ? 'column' : 'row';
         if (this.isMobile) {
-            this.host.style.left = 'unset';
+            this.host.style.left = '0';
             this.host.style.top = 'unset';
             return;
         }

package/dist/components/cura-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cura-tooltip.js","mappings":"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","names":["CuraTooltip"],"sources":["src/components/cura-tooltip/cura-tooltip.scss?tag=cura-tooltip&encapsulation=shadow","src/components/cura-tooltip/cura-tooltip.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/spacing.scss';\n\n:host {\n position: absolute;\n z-index: 99999;\n display: block;\n width: fit-content;\n height: fit-content;\n box-sizing: border-box;\n\n @include mobile-only() {\n width: 100%;\n }\n\n .container {\n display: flex;\n box-sizing: border-box;\n max-width: var(--max-width);\n height: auto;\n padding: calc(#{$base-spacing} * 2px);\n border: 1px solid var(--neutral-light);\n border-radius: calc(#{$base-spacing} * 1px);\n background-color: var(--neutral-purewhite);\n @include shadow-level3(--neutral-black-shadow);\n\n @include mobile-only() {\n max-width: 90%;\n height: fit-content;\n padding: calc(#{$base-spacing} * 4px) calc(#{$base-spacing} * 4px) 0 calc(#{$base-spacing} * 4px);\n margin: 0 auto;\n border: 2px solid;\n border-radius: calc(#{$base-spacing} * 3px) calc(#{$base-spacing} * 3px) 0 0;\n border-color: var(--neutral-light) var(--neutral-light) transparent var(--neutral-light);\n }\n\n &::after {\n content: '';\n position: absolute;\n z-index: 99999;\n width: calc(#{$base-spacing} * 2.5px);\n height: calc(#{$base-spacing} * 2.5px);\n border: 1px solid;\n border-radius: 2px;\n background-color: var(--neutral-purewhite);\n \n left: var(--arrow-left);\n top: var(--arrow-top);\n border-color: var(--arrow-border-color);\n transform: var(--arrow-translate) rotate(45deg);\n\n @include mobile-only() {\n display: none;\n }\n }\n\n .content {\n flex: 1 1 0;\n display: flex;\n flex-direction: column;\n gap: calc(#{$base-spacing} * 1px);\n\n @include mobile-only() {\n padding-bottom: calc(#{$base-spacing} * 4px);\n border-bottom: 1px dashed var(--neutral-light);\n }\n }\n\n .close-icon {\n margin-left: calc(#{$base-spacing} * 3px);\n cursor: pointer;\n }\n\n .close-button {\n padding: calc(#{$base-spacing} * 2px) 0;\n }\n }\n}","import { Component, Element, EventEmitter, Host, Prop, State, h, Event, Listen } from '@stencil/core';\n\nconst BREAKPOINT_SMALL_MAX = 768;\n\n@Component({\n tag: 'cura-tooltip',\n styleUrl: 'cura-tooltip.scss',\n shadow: true,\n})\nexport class CuraTooltip {\n @Element() host: HTMLElement;\n\n @Prop() elementId = '';\n @Prop() interactive = true;\n @Prop() delay = 250;\n @Prop() maxWidth = '280px';\n @Prop({ reflect: true }) position: 'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' = 'top';\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) closeButton = false;\n\n @State() isMobile = false;\n\n @Event({ eventName: 'tooltipClosed' }) tooltipClosed: EventEmitter<void>;\n\n targetElement: HTMLElement;\n\n styles = {};\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.setPosition(this.targetElement);\n }\n\n @Listen('scroll', { target: 'window' })\n onWindowScroll() {\n this.setPosition(this.targetElement);\n }\n\n connectedCallback() {\n this.setStyle();\n }\n\n render() {\n return (\n <Host role=\"tooltip\" id={this.elementId}>\n <div class=\"container\" style={this.styles}>\n <div class=\"content\">\n <cura-heading level={4} size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\">\n {this.label}\n </cura-heading>\n <cura-paragraph color=\"neutral-dark\" spot-color=\"secondary-darker\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <slot></slot>\n </cura-paragraph>\n </div>\n {this.closeButton && !this.isMobile && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n {this.isMobile && <cura-button-transparent class=\"close-button\" size=\"small\" type=\"button\" color=\"error\" icon-name=\"close\" icon-position=\"right\" onClick={this.handleClose}>OK, entendi.</cura-button-transparent>}\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.targetElement = document.querySelector(`[aria-labelledby=\"${this.elementId}\"]`) as HTMLElement;\n\n if (!this.interactive) {\n this.host.style.visibility = 'visible';\n } else {\n this.host.style.visibility = 'hidden';\n\n let openTimeoutID = null;\n let closeTimeoutID = null;\n\n this.targetElement.addEventListener('mouseenter', () => {\n clearTimeout(closeTimeoutID);\n openTimeoutID = setTimeout(() => {\n this.host.style.visibility = 'visible';\n }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n });\n \n this.targetElement.addEventListener('mouseleave', () => {\n clearTimeout(openTimeoutID);\n closeTimeoutID = setTimeout(() => {\n this.handleClose();\n }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n });\n\n this.host.addEventListener('mouseenter', () => {\n if (window.getComputedStyle(this.host).visibility === 'visible') {\n clearTimeout(closeTimeoutID);\n }\n });\n\n this.host.addEventListener('mouseleave', () => {\n clearTimeout(openTimeoutID);\n this.handleClose();\n });\n\n this.targetElement.addEventListener('click', () => {\n if (window.getComputedStyle(this.host).visibility === 'hidden') {\n openTimeoutID = setTimeout(() => {\n this.host.style.visibility = 'visible';\n }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n } else {\n clearTimeout(openTimeoutID);\n this.handleClose();\n }\n });\n \n document.addEventListener('click', (event: MouseEvent) => {\n if(!this.targetElement.contains(event.target as HTMLElement) && !this.host.contains(event.target as HTMLElement)) {\n clearTimeout(openTimeoutID);\n this.handleClose();\n }\n });\n }\n\n setTimeout(() => {\n this.setPosition(this.targetElement);\n }, 100);\n }\n\n setStyle() {\n this.styles = {\n ...this.styles,\n '--max-width': this.maxWidth,\n '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n '--neutral-light': window.CuraAPI.theme.colors.getColor(`neutral-light`),\n '--neutral-black-shadow': window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16),\n }\n }\n\n getClasses() {\n const [firstPosition, secondPosition] = this.position.split('-');\n const classes = {};\n\n classes['container'] = true;\n if (firstPosition) { classes[firstPosition] = true; }\n if (secondPosition) { classes[secondPosition] = true; }\n\n return classes;\n }\n\n setPosition(element: HTMLElement) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n\n this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;\n\n this.host.style.position = this.isMobile ? 'fixed' : 'absolute';\n this.host.style.bottom = this.isMobile ? '0' : 'unset';\n container.style.flexDirection = this.isMobile ? 'column' : 'row';\n\n if (this.isMobile) {\n this.host.style.left = 'unset';\n this.host.style.top = 'unset';\n return;\n }\n\n const elementRect = { \n top: element.offsetTop, \n left: element.offsetLeft, \n width: element.offsetWidth, \n height: element.offsetHeight\n };\n const tooltipRect = this.host.getBoundingClientRect();\n\n const SCREEN_LIMIT = 10;\n const SPACE_TO_ELEMENT = 10;\n const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;\n const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;\n const BORDER_COLOR = this.styles['--neutral-light'];\n\n let left = 0;\n let top = 0;\n\n const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));\n\n const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {\n if (arrowLeft) this.host.style.setProperty('--arrow-left', arrowLeft);\n if (arrowTop) this.host.style.setProperty('--arrow-top', arrowTop);\n if (translate) this.host.style.setProperty('--arrow-translate', translate);\n if (borderColor) this.host.style.setProperty('--arrow-border-color', borderColor);\n };\n\n //Posicionamento vertical\n if (positions.includes('top') \|\| positions.includes('bottom')) {\n setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });\n\n if (positions.includes('top')) {\n top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n\n if (top < SCREEN_LIMIT) {\n top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n }\n }\n\n if (positions.includes('bottom')) {\n top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n\n if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n }\n }\n\n left = elementRect.left + (elementRect.width - tooltipRect.width)/2;\n \n if (positions.includes('start')) {\n left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n\n if (left < SCREEN_LIMIT) {\n left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n setArrowProperties({ arrowLeft: '18px' });\n }\n }\n\n if (positions.includes('end')) {\n left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n setArrowProperties({ arrowLeft: '18px' });\n\n if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n }\n }\n }\n\n //Posicionamento horizontal\n if (positions.includes('right') \|\| positions.includes('left')) {\n setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });\n\n if (positions.includes('right')) {\n left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n\n if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n }\n }\n\n if (positions.includes('left')) {\n left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n \n if (left < SCREEN_LIMIT) {\n left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n }\n }\n \n top = elementRect.top + (elementRect.height - tooltipRect.height)/2;\n\n if (positions.includes('start')) {\n top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n\n if (top < SCREEN_LIMIT) {\n top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n setArrowProperties({ arrowTop: '18px' });\n }\n }\n\n if (positions.includes('end')) {\n top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n setArrowProperties({ arrowTop: '18px' });\n\n if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n }\n }\n }\n\n this.host.style.left = `${left}px`;\n this.host.style.top = `${top}px`;\n }\n\n closeContainer() {\n this.host.style.visibility = 'hidden';\n this.tooltipClosed.emit();\n }\n\n handleClose = () => {\n this.closeContainer();\n };\n}\n"],"version":3}
1	+ {"file":"cura-tooltip.js","mappings":"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","names":["CuraTooltip"],"sources":["src/components/cura-tooltip/cura-tooltip.scss?tag=cura-tooltip&encapsulation=shadow","src/components/cura-tooltip/cura-tooltip.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/spacing.scss';\n\n:host {\n position: absolute;\n z-index: 99999;\n display: block;\n width: fit-content;\n height: fit-content;\n box-sizing: border-box;\n\n @include mobile-only() {\n width: 100%;\n }\n\n .container {\n display: flex;\n box-sizing: border-box;\n max-width: var(--max-width);\n height: auto;\n padding: calc(#{$base-spacing} * 2px);\n border: 1px solid var(--neutral-light);\n border-radius: calc(#{$base-spacing} * 1px);\n background-color: var(--neutral-purewhite);\n @include shadow-level3(--neutral-black-shadow);\n\n @include mobile-only() {\n max-width: 90%;\n height: fit-content;\n padding: calc(#{$base-spacing} * 4px) calc(#{$base-spacing} * 4px) 0 calc(#{$base-spacing} * 4px);\n margin: 0 auto;\n border: 2px solid;\n border-radius: calc(#{$base-spacing} * 3px) calc(#{$base-spacing} * 3px) 0 0;\n border-color: var(--neutral-light) var(--neutral-light) transparent var(--neutral-light);\n }\n\n &::after {\n content: '';\n position: absolute;\n z-index: 99999;\n width: calc(#{$base-spacing} * 2.5px);\n height: calc(#{$base-spacing} * 2.5px);\n border: 1px solid;\n border-radius: 2px;\n background-color: var(--neutral-purewhite);\n \n left: var(--arrow-left);\n top: var(--arrow-top);\n border-color: var(--arrow-border-color);\n transform: var(--arrow-translate) rotate(45deg);\n\n @include mobile-only() {\n display: none;\n }\n }\n\n .content {\n flex: 1 1 0;\n display: flex;\n flex-direction: column;\n gap: calc(#{$base-spacing} * 1px);\n\n @include mobile-only() {\n padding-bottom: calc(#{$base-spacing} * 4px);\n border-bottom: 1px dashed var(--neutral-light);\n }\n }\n\n .close-icon {\n margin-left: calc(#{$base-spacing} * 3px);\n cursor: pointer;\n }\n\n .close-button {\n padding: calc(#{$base-spacing} * 2px) 0;\n }\n }\n}","import { Component, Element, EventEmitter, Host, Prop, State, h, Event, Listen } from '@stencil/core';\n\nconst BREAKPOINT_SMALL_MAX = 768;\n\n@Component({\n tag: 'cura-tooltip',\n styleUrl: 'cura-tooltip.scss',\n shadow: true,\n})\nexport class CuraTooltip {\n @Element() host: HTMLElement;\n\n @Prop() elementId = '';\n @Prop() interactive = true;\n @Prop() delay = 250;\n @Prop() maxWidth = '280px';\n @Prop({ reflect: true }) position: 'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' = 'top';\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) closeButton = false;\n\n @State() isMobile = false;\n\n @Event({ eventName: 'tooltipClosed' }) tooltipClosed: EventEmitter<void>;\n\n targetElement: HTMLElement;\n\n styles = {};\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.setPosition(this.targetElement);\n }\n\n @Listen('scroll', { target: 'window' })\n onWindowScroll() {\n this.setPosition(this.targetElement);\n }\n\n connectedCallback() {\n this.setStyle();\n }\n\n render() {\n return (\n <Host role=\"tooltip\" id={this.elementId}>\n <div class=\"container\" style={this.styles}>\n <div class=\"content\">\n <cura-heading level={4} size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\">\n {this.label}\n </cura-heading>\n <cura-paragraph color=\"neutral-dark\" spot-color=\"secondary-darker\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n <slot></slot>\n </cura-paragraph>\n </div>\n {this.closeButton && !this.isMobile && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n {this.isMobile && <cura-button-transparent class=\"close-button\" size=\"small\" type=\"button\" color=\"error\" icon-name=\"close\" icon-position=\"right\" onClick={this.handleClose}>OK, entendi.</cura-button-transparent>}\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.targetElement = document.querySelector(`[aria-labelledby=\"${this.elementId}\"]`) as HTMLElement;\n\n if (!this.interactive) {\n this.host.style.visibility = 'visible';\n } else {\n this.host.style.visibility = 'hidden';\n\n let openTimeoutID = null;\n let closeTimeoutID = null;\n\n this.targetElement?.addEventListener('mouseenter', () => {\n clearTimeout(closeTimeoutID);\n openTimeoutID = setTimeout(() => {\n this.host.style.visibility = 'visible';\n }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n });\n \n this.targetElement?.addEventListener('mouseleave', () => {\n clearTimeout(openTimeoutID);\n closeTimeoutID = setTimeout(() => {\n this.handleClose();\n }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n });\n\n this.host?.addEventListener('mouseenter', () => {\n if (window.getComputedStyle(this.host).visibility === 'visible') {\n clearTimeout(closeTimeoutID);\n }\n });\n\n this.host?.addEventListener('mouseleave', () => {\n clearTimeout(openTimeoutID);\n this.handleClose();\n });\n\n this.targetElement?.addEventListener('click', () => {\n if (window.getComputedStyle(this.host).visibility === 'hidden') {\n openTimeoutID = setTimeout(() => {\n this.host.style.visibility = 'visible';\n }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n } else {\n clearTimeout(openTimeoutID);\n this.handleClose();\n }\n });\n \n document?.addEventListener('click', (event: MouseEvent) => {\n if(!this.targetElement.contains(event.target as HTMLElement) && !this.host.contains(event.target as HTMLElement)) {\n clearTimeout(openTimeoutID);\n this.handleClose();\n }\n });\n }\n\n setTimeout(() => {\n this.setPosition(this.targetElement);\n }, 100);\n }\n\n setStyle() {\n this.styles = {\n ...this.styles,\n '--max-width': this.maxWidth,\n '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n '--neutral-light': window.CuraAPI.theme.colors.getColor(`neutral-light`),\n '--neutral-black-shadow': window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16),\n }\n }\n\n getClasses() {\n const [firstPosition, secondPosition] = this.position.split('-');\n const classes = {};\n\n classes['container'] = true;\n if (firstPosition) { classes[firstPosition] = true; }\n if (secondPosition) { classes[secondPosition] = true; }\n\n return classes;\n }\n\n setPosition(element: HTMLElement) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n\n this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;\n\n this.host.style.position = this.isMobile ? 'fixed' : 'absolute';\n this.host.style.bottom = this.isMobile ? '0' : 'unset';\n container.style.flexDirection = this.isMobile ? 'column' : 'row';\n\n if (this.isMobile) {\n this.host.style.left = '0';\n this.host.style.top = 'unset';\n return;\n }\n\n const elementRect = { \n top: element.offsetTop, \n left: element.offsetLeft, \n width: element.offsetWidth, \n height: element.offsetHeight\n };\n const tooltipRect = this.host.getBoundingClientRect();\n\n const SCREEN_LIMIT = 10;\n const SPACE_TO_ELEMENT = 10;\n const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;\n const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;\n const BORDER_COLOR = this.styles['--neutral-light'];\n\n let left = 0;\n let top = 0;\n\n const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));\n\n const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {\n if (arrowLeft) this.host.style.setProperty('--arrow-left', arrowLeft);\n if (arrowTop) this.host.style.setProperty('--arrow-top', arrowTop);\n if (translate) this.host.style.setProperty('--arrow-translate', translate);\n if (borderColor) this.host.style.setProperty('--arrow-border-color', borderColor);\n };\n\n //Posicionamento vertical\n if (positions.includes('top') \|\| positions.includes('bottom')) {\n setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });\n\n if (positions.includes('top')) {\n top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n\n if (top < SCREEN_LIMIT) {\n top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n }\n }\n\n if (positions.includes('bottom')) {\n top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n\n if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n }\n }\n\n left = elementRect.left + (elementRect.width - tooltipRect.width)/2;\n \n if (positions.includes('start')) {\n left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n\n if (left < SCREEN_LIMIT) {\n left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n setArrowProperties({ arrowLeft: '18px' });\n }\n }\n\n if (positions.includes('end')) {\n left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n setArrowProperties({ arrowLeft: '18px' });\n\n if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n }\n }\n }\n\n //Posicionamento horizontal\n if (positions.includes('right') \|\| positions.includes('left')) {\n setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });\n\n if (positions.includes('right')) {\n left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n\n if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n }\n }\n\n if (positions.includes('left')) {\n left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n \n if (left < SCREEN_LIMIT) {\n left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n }\n }\n \n top = elementRect.top + (elementRect.height - tooltipRect.height)/2;\n\n if (positions.includes('start')) {\n top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n\n if (top < SCREEN_LIMIT) {\n top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n setArrowProperties({ arrowTop: '18px' });\n }\n }\n\n if (positions.includes('end')) {\n top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n setArrowProperties({ arrowTop: '18px' });\n\n if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n }\n }\n }\n\n this.host.style.left = `${left}px`;\n this.host.style.top = `${top}px`;\n }\n\n closeContainer() {\n this.host.style.visibility = 'hidden';\n this.tooltipClosed.emit();\n }\n\n handleClose = () => {\n this.closeContainer();\n };\n}\n"],"version":3}

package/dist/components/index.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { CuraAlert } from './cura-alert.js';
 import { CuraAvatar } from './cura-avatar.js';
 import { CuraBadgeCounter } from './cura-badge-counter.js';
 import { CuraBadgeDistance } from './cura-badge-distance.js';
+import { CuraBadgeDot } from './cura-badge-dot.js';
 import { CuraBadgePill } from './cura-badge-pill.js';
 import { CuraButton } from './cura-button.js';
 import { CuraButtonOutline } from './cura-button-outline.js';
@@ -27,9 +28,12 @@ import { CuraLoaderCircle } from './cura-loader-circle.js';
 import { CuraModal } from './cura-modal.js';
 import { CuraPageTemplate } from './cura-page-template.js';
 import { CuraParagraph } from './cura-paragraph.js';
+import { CuraProgressBar } from './cura-progress-bar.js';
 import { CuraRadio } from './cura-radio.js';
 import { CuraSelect } from './cura-select.js';
 import { CuraSelectOption } from './cura-select-option.js';
+import { CuraStepper } from './cura-stepper.js';
+import { CuraStepperItem } from './cura-stepper-item.js';
 import { CuraSwitch } from './cura-switch.js';
 import { CuraToast } from './cura-toast.js';
 import { CuraTooltip } from './cura-tooltip.js';
@@ -602,6 +606,7 @@ const defineCustomElements = (opts) => {
             CuraAvatar,
             CuraBadgeCounter,
             CuraBadgeDistance,
+            CuraBadgeDot,
             CuraBadgePill,
             CuraButton,
             CuraButtonOutline,
@@ -625,9 +630,12 @@ const defineCustomElements = (opts) => {
             CuraModal,
             CuraPageTemplate,
             CuraParagraph,
+            CuraProgressBar,
             CuraRadio,
             CuraSelect,
             CuraSelectOption,
+            CuraStepper,
+            CuraStepperItem,
             CuraSwitch,
             CuraToast,
             CuraTooltip,