@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-tooltip-v2/dropi-tooltip.js

@@ -0,0 +1,468 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tooltip
+ * Wraps content and shows a tooltip bubble on hover/focus.
+ *
+ * @example
+ * <dropi-tooltip-v2 text="Más información" position="top">
+ *   <dropi-button text="Hover" />
+ * </dropi-tooltip-v2>
+ */
+export class DropiTooltipV2 {
+    /** Tooltip text */
+    text = '';
+    /** Tooltip title (bold, shown with label) */
+    title = '';
+    /** Tooltip label (shown below title) */
+    label = '';
+    /** Position: top | bottom | left | right */
+    position = 'bottom';
+    /** Position of the arrow: start | center | end (matches Angular `arrowPosition`) */
+    arrowPosition = 'center';
+    /** Trigger: hover | click | focus | timeout | static | hidden */
+    trigger = 'hover';
+    /** Max CSS width of the bubble */
+    maxWidth = '280px';
+    /** Min CSS width of the bubble (matches Angular `minWidth`) */
+    minWidth = '300px';
+    /** Delay in ms before showing */
+    showDelay = 0;
+    /** Disable the tooltip completely (matches Angular `disabled`) */
+    disabled = false;
+    /** Show the trigger icon (matches Angular `showIcon`) */
+    showIcon = true;
+    /** Show the close (X) button inside the bubble (matches Angular `showX`) */
+    showX = false;
+    /** Icon name from the dropi-icon sprite (matches Angular `iconName`) */
+    iconName = 'Tooltip';
+    /** Icon color token or hex (matches Angular `iconColor`) */
+    iconColor = '#7B8190';
+    /** Icon size in px without unit (matches Angular `iconSize`) */
+    iconSize = '14';
+    visible = false;
+    showTimer = null;
+    timeoutTimer = null;
+    componentDidLoad() {
+        if (this.trigger === 'static')
+            this.show();
+        if (this.trigger === 'timeout')
+            this.showWithTimeout();
+    }
+    show = () => {
+        if (this.disabled || this.trigger === 'hidden')
+            return;
+        const content = this.text || this.title || this.label;
+        if (!content.trim())
+            return;
+        if (this.showDelay > 0) {
+            this.showTimer = setTimeout(() => { this.visible = true; }, this.showDelay);
+        }
+        else {
+            this.visible = true;
+        }
+    };
+    hide = () => {
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        if (this.timeoutTimer) {
+            clearTimeout(this.timeoutTimer);
+            this.timeoutTimer = null;
+        }
+        this.visible = false;
+    };
+    showWithTimeout() {
+        this.show();
+        this.timeoutTimer = setTimeout(() => this.hide(), 6000);
+    }
+    handleMouseEnter = () => {
+        if (this.trigger !== 'hover')
+            return;
+        this.show();
+    };
+    handleMouseLeave = () => {
+        if (this.trigger !== 'hover')
+            return;
+        setTimeout(() => this.hide(), 10);
+    };
+    handleClick = () => {
+        if (this.trigger !== 'click')
+            return;
+        this.visible ? this.hide() : this.show();
+    };
+    handleFocusin = () => {
+        if (this.trigger !== 'focus')
+            return;
+        this.show();
+    };
+    handleFocusout = () => {
+        if (this.trigger !== 'focus')
+            return;
+        this.hide();
+    };
+    handleClose = () => {
+        if (this.trigger === 'static') {
+            this.trigger = 'hover';
+            this.showX = false;
+        }
+        this.hide();
+    };
+    get displayContent() {
+        if (this.text)
+            return this.text;
+        if (this.title && this.label)
+            return `${this.title}\n${this.label}`;
+        return this.title || this.label || '';
+    }
+    render() {
+        const bubbleStyle = { maxWidth: this.maxWidth };
+        if (this.minWidth)
+            bubbleStyle.minWidth = this.minWidth;
+        return (h("div", { key: '85f49bcb2af567a8fb70cd92afab893a2e0bf567', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (h("dropi-icon", { key: 'f40ebe0c12bdfa251cbe6086f7ea432aed0124fa', name: this.iconName, width: `${this.iconSize}px`, height: `${this.iconSize}px`, color: this.iconColor })), h("slot", { key: '77d2aa944f57cc5f858bbff97f88dfda6e71e088' }), this.displayContent && (h("div", { key: '4fcbbbf1a3b163ad2992efd8c8dfbef695f4f422', class: {
+                'tooltip-bubble': true,
+                [`tooltip-bubble--${this.position}`]: true,
+                [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,
+                'tooltip-bubble--visible': this.visible,
+            }, style: bubbleStyle, role: "tooltip" }, this.showX && (h("button", { key: '48428c1dcdd6c52f8a0b26641a016a00cf04444d', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, h("dropi-icon", { key: '6c870fc88739ba5e09c1f77eda783d21af476f98', name: "Close-small", width: "12px", height: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && h("strong", { key: 'c501f266a5d3cc4250f9b205f8fa641c1f9be7ad', class: "tooltip-title" }, this.title), this.label && !this.text && h("span", { key: '6fb281665f9c84a7cb1f86bf8718da8ef5b95204', class: "tooltip-label" }, this.label), this.text && h("span", { key: '4d1a3445cb4b5361e8604404bfb970fc0e9ea289' }, this.text), h("span", { key: 'f7d0ac1b155d486c55cbeebc63cca32838e25811', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+    }
+    static get is() { return "dropi-tooltip-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip title (bold, shown with label)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip label (shown below title)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "TooltipPosition": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tooltip-v2/dropi-tooltip.tsx",
+                            "id": "src/components/dropi-tooltip-v2/dropi-tooltip.tsx::TooltipPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position: top | bottom | left | right"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom'"
+            },
+            "arrowPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ArrowPosition",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "ArrowPosition": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tooltip-v2/dropi-tooltip.tsx",
+                            "id": "src/components/dropi-tooltip-v2/dropi-tooltip.tsx::ArrowPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the arrow: start | center | end (matches Angular `arrowPosition`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow-position",
+                "defaultValue": "'center'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "TooltipTrigger",
+                    "resolved": "\"click\" | \"focus\" | \"hidden\" | \"hover\" | \"static\" | \"timeout\"",
+                    "references": {
+                        "TooltipTrigger": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tooltip-v2/dropi-tooltip.tsx",
+                            "id": "src/components/dropi-tooltip-v2/dropi-tooltip.tsx::TooltipTrigger"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger: hover | click | focus | timeout | static | hidden"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger",
+                "defaultValue": "'hover'"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max CSS width of the bubble"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "'280px'"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Min CSS width of the bubble (matches Angular `minWidth`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-width",
+                "defaultValue": "'300px'"
+            },
+            "showDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay in ms before showing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-delay",
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the tooltip completely (matches Angular `disabled`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the trigger icon (matches Angular `showIcon`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "true"
+            },
+            "showX": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the close (X) button inside the bubble (matches Angular `showX`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-x",
+                "defaultValue": "false"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name from the dropi-icon sprite (matches Angular `iconName`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-name",
+                "defaultValue": "'Tooltip'"
+            },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon color token or hex (matches Angular `iconColor`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-color",
+                "defaultValue": "'#7B8190'"
+            },
+            "iconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon size in px without unit (matches Angular `iconSize`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size",
+                "defaultValue": "'14'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+}

package/dist/collection/components/dropi-vertical-steps/dropi-vertical-steps.css

@@ -39,12 +39,12 @@
 }
 
 .v-step__circle--pending {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 2px solid var(--Gray-Gray-200, #c3c9d9);
 }
 
 .v-step__circle--current {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 2px solid var(--Primary-Primary-500, #f49a3d);
 }
 
@@ -86,7 +86,7 @@
 }
 
 .v-step__label--current {
-  color: var(--Gray-Gray-800, #1a2033);
+  color: var(--Gray-Gray-800, #1f2433);
   font-weight: var(--font-weight-bold, 700);
 }
 

package/dist/collection/components/dropi-vertical-steps/dropi-vertical-steps.js

@@ -13,7 +13,7 @@ export class DropiVerticalSteps {
     /** Show check icon inside completed step circles */
     showCheckIcon = true;
     /** Emitted when a step is clicked. e.detail = step number (1-based) */
-    dropiStepClick;
+    stepClick;
     get parsedSteps() {
         if (typeof this.steps === 'string') {
             try {
@@ -37,11 +37,11 @@ export class DropiVerticalSteps {
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: 'ec06949df14eae6937921d930e37cf7638454263', class: "vertical-steps" }, steps.map((step, i) => {
+        return (h("div", { key: 'c1ffd563da957d398f064ee0423f50f21d7e45b6', class: "vertical-steps" }, steps.map((step, i) => {
             const state = this.resolveState(i, step);
             const isLast = i === steps.length - 1;
             const isClickable = this.clickable && state === 'completed';
-            return (h("div", { class: { 'v-step': true, 'v-step--clickable': isClickable }, key: i, onClick: () => isClickable && this.dropiStepClick.emit(i + 1) }, h("div", { class: "v-step__indicator" }, h("div", { class: { 'v-step__circle': true, [`v-step__circle--${state}`]: true } }, state === 'completed' && this.showCheckIcon ? (h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (h("span", { class: "v-step__number" }, i + 1))), !isLast && h("div", { class: { 'v-step__line': true, 'v-step__line--done': state === 'completed' } })), h("span", { class: { 'v-step__label': true, [`v-step__label--${state}`]: true } }, step.label)));
+            return (h("div", { class: { 'v-step': true, 'v-step--clickable': isClickable }, key: i, onClick: () => isClickable && this.stepClick.emit(i + 1) }, h("div", { class: "v-step__indicator" }, h("div", { class: { 'v-step__circle': true, [`v-step__circle--${state}`]: true } }, state === 'completed' && this.showCheckIcon ? (h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (h("span", { class: "v-step__number" }, i + 1))), !isLast && h("div", { class: { 'v-step__line': true, 'v-step__line--done': state === 'completed' } })), h("span", { class: { 'v-step__label': true, [`v-step__label--${state}`]: true } }, step.label)));
         })));
     }
     static get is() { return "dropi-vertical-steps"; }
@@ -148,8 +148,8 @@ export class DropiVerticalSteps {
     }
     static get events() {
         return [{
-                "method": "dropiStepClick",
-                "name": "dropiStepClick",
+                "method": "stepClick",
+                "name": "stepClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.css

@@ -7,7 +7,7 @@
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
-  background: #000;
+  background: var(--Neutral-Black);
   overflow: hidden;
   border-radius: 12px;
 }

package/dist/collection/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.js

@@ -24,7 +24,7 @@ export class DropiYoutubeLazyVideo {
         return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
     }
     render() {
-        return (h("div", { key: 'df20b4b0098b3283f266b012d56d3a0377a46420', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (h("div", { key: '43b76b1e6d85da93b97ec0441331b82d567d2abe', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, h("img", { key: '3719d3c151b9242f32b313047ccee4fc9b83f990', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), h("button", { key: '81c578b338b65168920cf38fb4dbc4ef82e6a1a7', class: "play-button", "aria-label": "Reproducir video" }, h("dropi-icon", { key: 'ce505abe0eae58cf7d24eda6527168267e3412ea', name: "Play", width: "17px", height: "21px", color: "Neutral-White" })))), this.isPlaying && (h("iframe", { key: 'bf25278bda2376f3de5776057223a139e8112d33', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
+        return (h("div", { key: '0732bc87e7be10e422e80751a17527132301eb99', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (h("div", { key: '540c46b66da3f67ec45614e0891827b7cc0be4e5', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, h("img", { key: '843241c72688ca88ccd5d9391b542501575ea476', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), h("button", { key: 'b068f79fb6b2140e1419e9d72a24f6e66eaab69d', class: "play-button", "aria-label": "Reproducir video" }, h("dropi-icon", { key: 'ad254e3067ef72e2d97064cd47132cbf5961f06a', name: "Play", width: "17px", height: "21px", color: "Neutral-White" })))), this.isPlaying && (h("iframe", { key: '5fd8f89fa322577b49e373710216b731685cb5f5', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
     }
     static get is() { return "dropi-youtube-lazy-video"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/dropi-accordion-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DropiAccordionItem extends Components.DropiAccordionItem, HTMLElement {}
+export const DropiAccordionItem: {
+    prototype: DropiAccordionItem;
+    new (): DropiAccordionItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dropi-accordion-item.js

@@ -0,0 +1 @@
+import{t as e,p as o,H as t,h as i}from"./index.js";import{d as a}from"./p-D13d88W3.js";const c=o(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}get el(){return this}sectionTitle="";index;open=!1;disabled=!1;preIcon="";contentHeight="0px";contentRef;openChanged(e){this.updateHeight(e)}componentDidLoad(){this.updateHeight(this.open)}updateHeight(e){this.contentRef&&(this.contentHeight=e?this.contentRef.scrollHeight+"px":"0px")}handleToggle(){this.disabled||(this.el.closest("dropi-accordion"),this.open=!this.open,setTimeout((()=>this.updateHeight(this.open)),0))}render(){return i("div",{key:"43f4ce6c38338a90a3b866a449f14e48b478e738",class:{"accordion-item":!0,"accordion-item--open":this.open,"accordion-item--disabled":this.disabled}},i("button",{key:"b5150a903bf75b82ffea9707e5906dc17f0bcd1c",class:"accordion-header",onClick:()=>this.handleToggle(),"aria-expanded":this.open+"",disabled:this.disabled},i("span",{key:"53f5c6a4e5a9d02412145395112368ddea9af746",class:"accordion-header-left"},this.preIcon&&i("dropi-icon",{key:"5fea3e2916fe5dfb6c1435f08c3b63aca4656523",name:this.preIcon,width:"20px",height:"20px",color:"Gray-Gray-600"}),i("span",{key:"3ad504dcf5d8b4f05d11a0e951a81b79428de3ec",class:"accordion-title"},this.sectionTitle)),i("span",{key:"bd44cf2fe9989fc80badb6e46a33a9d699c90f49",class:{"accordion-chevron":!0,"accordion-chevron--open":this.open}},i("dropi-icon",{key:"7a4b261df5ffd4c6276e4cccc6bc5e8f8e43a717",name:"Dropdown-down",width:"20px",height:"20px",color:"Gray-Gray-500"}))),i("div",{key:"cb8789f49d4c83e33f2c366b90220b79b5619502",class:"accordion-body",style:{maxHeight:this.contentHeight},ref:e=>this.contentRef=e},i("div",{key:"72d302242a40c9aa60a941814ac311a540b319f6",class:"accordion-content"},i("slot",{key:"b5a4a42f0d366f1f0409f719a52d5af11d77e3c3"}))))}static get watchers(){return{open:[{openChanged:0}]}}static get style(){return":host{display:block;border-bottom:1px solid var(--Gray-Gray-100)}.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:white;border:none;cursor:pointer;text-align:left}.accordion-header-left{display:flex;align-items:center;gap:8px}.accordion-title{font-size:var(--font-size-m);font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-700)}.accordion-chevron{transition:transform 0.3s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height 0.3s ease-out}.accordion-content{padding:0 16px 16px 16px}"}},[769,"dropi-accordion-item",{sectionTitle:[1,"section-title"],index:[2],open:[1540],disabled:[4],preIcon:[1,"pre-icon"],contentHeight:[32]},void 0,{open:[{openChanged:0}]}]);function n(){"undefined"!=typeof customElements&&["dropi-accordion-item","dropi-icon"].forEach((o=>{switch(o){case"dropi-accordion-item":customElements.get(e(o))||customElements.define(e(o),c);break;case"dropi-icon":customElements.get(e(o))||a()}}))}n();const d=c,s=n;export{d as DropiAccordionItem,s as defineCustomElement}

package/dist/components/dropi-accordion.js

@@ -1 +1 @@
-import{t as e,p as o,H as i,c as a,h as d}from"./index.js";import{d as t}from"./p-wO1yy0Zr.js";const r=o(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiToggle=a(this,"dropiToggle",7)}header="";open=!1;disabled=!1;preIcon="";dropiToggle;contentHeight="0px";contentRef;openChanged(e){this.updateHeight(e)}componentDidLoad(){this.updateHeight(this.open)}updateHeight(e){this.contentRef&&(this.contentHeight=e?this.contentRef.scrollHeight+"px":"0px")}handleToggle(){this.disabled||(this.open=!this.open,this.dropiToggle.emit(this.open),setTimeout((()=>this.updateHeight(this.open)),0))}render(){return d("div",{key:"833499ceed32f31227940efdea0250074a26dad4",class:{accordion:!0,"accordion--open":this.open,"accordion--disabled":this.disabled}},d("button",{key:"067856e0af05669e75197e0e38b4e165166e2125",class:"accordion-header",onClick:()=>this.handleToggle(),"aria-expanded":this.open+"",disabled:this.disabled},d("span",{key:"ee22e3b4251cad0c03143d7fd512f6b43b25080c",class:"accordion-header-left"},this.preIcon&&d("dropi-icon",{key:"935d87ddcd347ffb910c8093c164c768ddc85cad",name:this.preIcon,width:"20px",height:"20px",color:"Gray-Gray-600"}),d("span",{key:"88d229607eca9d6d538c620dab8040d6ebbc304f",class:"accordion-title"},this.header)),d("span",{key:"5d29cc7263bb56c5da1455f57ef3000e375489c8",class:{"accordion-chevron":!0,"accordion-chevron--open":this.open}},d("dropi-icon",{key:"c179d4d5db7fb988d9b6f41430d27e93ad36e7e4",name:"Dropdown-down",width:"20px",height:"20px",color:"Gray-Gray-500"}))),d("div",{key:"60052ec92c3659b1ab87358ec264d38faf2ed389",class:"accordion-body",style:{maxHeight:this.contentHeight},ref:e=>this.contentRef=e},d("div",{key:"3565ad511fcfa017bb264a2829ee54ee6d0d7d96",class:"accordion-content"},d("slot",{key:"1c2c4cab25bcbdf15cdd2ed699710f09dcbbbb74"}))))}static get watchers(){return{open:[{openChanged:0}]}}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.accordion{border:1px solid var(--Gray-Gray-100,#e6eaf2);border-radius:var(--Border-2,8px);background:var(--Neutral-White,#fff);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-700,#32394d);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}"}},[769,"dropi-accordion",{header:[1],open:[1540],disabled:[4],preIcon:[1,"pre-icon"],contentHeight:[32]},void 0,{open:[{openChanged:0}]}]);function c(){"undefined"!=typeof customElements&&["dropi-accordion","dropi-icon"].forEach((o=>{switch(o){case"dropi-accordion":customElements.get(e(o))||customElements.define(e(o),r);break;case"dropi-icon":customElements.get(e(o))||t()}}))}c();const n=r,s=c;export{n as DropiAccordion,s as defineCustomElement}
+import{t as e,p as o,H as r,h as a}from"./index.js";const t=o(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}multiple=!1;render(){return a("div",{key:"15575b05adec26235378bb459cdf158bdabe2852",class:"accordion-container"},a("slot",{key:"e5411aee85b69e50c777657b0cb2aa7d04d09fa4"}))}static get style(){return":host{display:block;width:100%;margin-bottom:-1px}*,*::before,*::after{box-sizing:border-box}.accordion{border-top:1px solid var(--Gray-Gray-100,#e6eaf2);border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-600, #475066);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}"}},[769,"dropi-accordion",{multiple:[4]}]);function i(){"undefined"!=typeof customElements&&["dropi-accordion"].forEach((o=>{"dropi-accordion"===o&&(customElements.get(e(o))||customElements.define(e(o),t))}))}i();const n=t,d=i;export{n as DropiAccordion,d as defineCustomElement}

package/dist/components/dropi-alert-legacy.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DropiAlertLegacy extends Components.DropiAlertLegacy, HTMLElement {}
+export const DropiAlertLegacy: {
+    prototype: DropiAlertLegacy;
+    new (): DropiAlertLegacy;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dropi-alert-legacy.js

@@ -0,0 +1 @@
+import{t as r,p as e,H as s,h as o}from"./index.js";const a=e(class extends s{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow()}visible=!1;message="";type="success";autoClose=!1;timer;componentDidLoad(){this.autoClose&&this.visible&&this.startTimer()}startTimer(){clearTimeout(this.timer),this.timer=setTimeout((()=>{this.visible=!1}),7e3)}render(){return this.visible?o("div",{class:{"alert-legacy":!0,["alert-legacy--"+this.type]:!0}},o("div",{class:"alert-legacy__content"},o("span",{class:"alert-legacy__message"},this.message)),o("button",{class:"alert-legacy__close",onClick:()=>this.visible=!1},"×")):null}static get style(){return":host{display:block;margin:10px 0}.alert-legacy{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--Border-2);font-size:var(--font-size-s)}.alert-legacy--success{background:var(--Success-Success-50);color:var(--Success-Success-700);border:1px solid var(--Success-Success-200)}.alert-legacy--error{background:var(--Error-Error-50);color:var(--Error-Error-700);border:1px solid var(--Error-Error-200)}.alert-legacy--warning{background:var(--Warning-Warning-50);color:var(--Warning-Warning-700);border:1px solid var(--Warning-Warning-200)}.alert-legacy--info{background:var(--Info-Info-50);color:var(--Info-Info-700);border:1px solid var(--Info-Info-200)}.alert-legacy__close{background:transparent;border:none;font-size:20px;cursor:pointer;color:currentColor;opacity:0.6}.alert-legacy__close:hover{opacity:1}"}},[513,"dropi-alert-legacy",{visible:[1028],message:[1],type:[1],autoClose:[4,"auto-close"]}]);function t(){"undefined"!=typeof customElements&&["dropi-alert-legacy"].forEach((e=>{"dropi-alert-legacy"===e&&(customElements.get(r(e))||customElements.define(r(e),a))}))}t();const c=a,l=t;export{c as DropiAlertLegacy,l as defineCustomElement}

package/dist/components/dropi-alert-modal.js

@@ -1 +1 @@
-import{t,p as e,H as i,c as s,h as o}from"./index.js";import{d as a}from"./p-DUX_WvqW.js";import{d as n}from"./p-wO1yy0Zr.js";import{d as r}from"./p-BY_J-4Sm.js";const d=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.dropiPrimary=s(this,"dropiPrimary",7),this.dropiSecondary=s(this,"dropiSecondary",7),this.dropiHide=s(this,"dropiHide",7)}visible=!1;type="question";alertTitle="";message="";primaryButton="Aceptar";secondaryButton="";loading=!1;closable=!1;displayButtons=!0;loadingTitle="Cargando";loadingMessage="Por favor espera un momento";dropiPrimary;dropiSecondary;dropiHide;lottieMap={question:"/assets/lottie-files/question.json",warning:"/assets/lottie-files/warning.json",success:"/assets/lottie-files/success.json",error:"/assets/lottie-files/failure.json",loading:"/assets/lottie-files/loading.json"};async show(){this.visible=!0}async hide(){this.visible=!1}handlePrimary(){this.dropiPrimary.emit(),this.visible=!1}handleSecondary(){this.dropiSecondary.emit(),this.visible=!1}onModalHide(){this.visible=!1,this.dropiHide.emit()}render(){const t=this.loading?"loading":this.type,e=this.loading?"300px":"120px";return console.log("[DropiAlertModal] type:",this.type,"lottieKey:",t,"src:",this.lottieMap[t]),o("dropi-modal",{key:"4038a17b3572d834f6eb015ad1ece188735d5f74",visible:this.visible,showHeader:this.closable,showCloseIcon:this.closable,dismissable:!1,closeOnEscape:!1,size:"s",onDropiHide:()=>this.onModalHide()},o("div",{key:"89a8709256c27102bde8ac25a387dc90f3f61ed4",class:"body-alert"+(this.loading?" is-loading":"")},this.lottieMap[t]&&o("div",{key:"5bf98eb48cd930bfa8fe4b94077753031830de6b",class:"lottie-img"+(this.loading?" lottie-img--loading":"")},o("dotlottie-player",{key:t,src:this.lottieMap[t],background:"transparent",speed:"1",style:{width:e,height:"auto"},loop:!0,autoplay:!0})),o("div",{key:"a2c9cd8f737ea3584a6706b0e92270893b592870",class:"content-alert"},o("h2",{key:"2cd2e5567910995c62eeb64e60c13ed40fdd14a1"},this.loading?this.loadingTitle:this.alertTitle),o("p",{key:"c6baa31f8f6bbbeb2b1f514e3584d61a50616096"},this.loading?this.loadingMessage:this.message)),!this.loading&&this.displayButtons&&o("div",{key:"7bc16afdb60ea6549fa5dff250a0146141a5715d",class:"actions"},this.secondaryButton&&o("dropi-button",{key:"8b289d9bf39622340ad2cae9ab21457a948c4843",text:this.secondaryButton,severity:"secondary",onDropiClick:()=>this.handleSecondary(),fullWidth:!0}),o("dropi-button",{key:"f87a1a80be2e72b26ddeac81d5f7638f40ddd8f7",text:this.primaryButton,severity:"primary",onDropiClick:()=>this.handlePrimary(),fullWidth:!0}))))}static get style(){return":host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3, 12px);padding:0;overflow:hidden;width:100%;text-align:center !important}.lottie-img{display:flex;align-items:center;justify-content:center;min-height:100px;width:120px;margin-top:-8px;margin-bottom:var(--Size-2, 8px)}.lottie-img--loading{min-height:160px;width:100%}.content-alert{text-align:center;width:100%}.content-alert h2{color:var(--Gray-Gray-700, #32394d);font-size:var(--Size-5, 24px);font-weight:700;margin:0 0 var(--Size-2, 8px);text-align:center !important}.content-alert p{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 14px);margin:0;text-align:center !important;overflow-wrap:anywhere;max-height:100px;overflow:auto}.actions{display:flex;gap:12px;width:100%;margin-top:var(--Size-4, 16px)}.actions dropi-button{flex:1;display:flex}@media (max-width: 768px){.actions{flex-direction:column}}"}},[513,"dropi-alert-modal",{visible:[1540],type:[1],alertTitle:[1,"alert-title"],message:[1],primaryButton:[1,"primary-button"],secondaryButton:[1,"secondary-button"],loading:[4],closable:[4],displayButtons:[4,"display-buttons"],loadingTitle:[1,"loading-title"],loadingMessage:[1,"loading-message"],show:[64],hide:[64]}]);function l(){"undefined"!=typeof customElements&&["dropi-alert-modal","dropi-button","dropi-icon","dropi-modal"].forEach((e=>{switch(e){case"dropi-alert-modal":customElements.get(t(e))||customElements.define(t(e),d);break;case"dropi-button":customElements.get(t(e))||a();break;case"dropi-icon":customElements.get(t(e))||n();break;case"dropi-modal":customElements.get(t(e))||r()}}))}l();const c=d,p=l;export{c as DropiAlertModal,p as defineCustomElement}
+import{t,p as e,H as i,c as s,h as o}from"./index.js";import{d as a}from"./p-CV4X3Gm4.js";import{d as n}from"./p-D13d88W3.js";import{d as l}from"./p-BwhxWL4p.js";const d=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.primaryButtonEvent=s(this,"primaryButtonEvent",7),this.secondaryButtonEvent=s(this,"secondaryButtonEvent",7),this.modalOpenChange=s(this,"modalOpenChange",7),this.onHide=s(this,"onHide",7)}visible=!1;type="question";tittle="";message="";primaryButton="Accept";secondaryButton="";loading=!1;closable=!1;displayButtons=!0;loadingTitle="Loading";loadingMessage="Please wait a moment";isStep=!1;baseZIndex=0;params=null;paramsChanged(t){t&&(void 0!==t.tittle&&(this.tittle=t.tittle),void 0!==t.type&&(this.type=t.type),void 0!==t.message&&(this.message=t.message),void 0!==t.primaryButton&&(this.primaryButton=t.primaryButton),void 0!==t.secondaryButton&&(this.secondaryButton=t.secondaryButton),void 0!==t.loadingTitle&&(this.loadingTitle=t.loadingTitle),void 0!==t.loadingMessage&&(this.loadingMessage=t.loadingMessage),void 0!==t.closable&&(this.closable=t.closable),void 0!==t.displayButtons&&(this.displayButtons=t.displayButtons))}primaryButtonEvent;secondaryButtonEvent;modalOpenChange;onHide;lottieMap={question:"/assets/lottie-files/question.json",warning:"/assets/lottie-files/warning.json",success:"/assets/lottie-files/success.json",error:"/assets/lottie-files/failure.json",loading:"/assets/lottie-files/loading.json"};componentWillLoad(){this.params&&this.paramsChanged(this.params)}async show(){this.visible=!0}async hide(){this.visible=!1}handlePrimary(){this.primaryButtonEvent.emit(!0),this.isStep||(this.visible=!1,this.modalOpenChange.emit(!1))}handleSecondary(){this.secondaryButtonEvent.emit(!0),this.visible=!1,this.modalOpenChange.emit(!1)}onModalHide(){this.visible=!1,this.modalOpenChange.emit(!1),this.onHide.emit()}render(){const t=this.loading?"loading":this.type;return o("dropi-modal",{key:"8581cbc944d42889228cb21fa27bf4e8b3bf1e16",visible:this.visible,showHeader:this.closable,showCloseIcon:this.closable,dismissable:!1,closeOnEscape:!1,showFooter:!1,size:"s",onOnHide:()=>this.onModalHide()},o("div",{key:"7208cbe742dab77bcee14150998aff5647fd41af",class:"body-alert"},this.lottieMap[t]&&o("div",{key:"3b4d36963f8d6547556eee704823c8e34805b8d8",class:"lottie-img"+("loading"===t?" lottie-img--loading":"")},o("lottie-player",{key:t,src:this.lottieMap[t],background:"transparent",speed:"1",loop:!0,autoplay:!0})),o("div",{key:"dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f",class:"content-alert"},o("h2",{key:"685df4cb76145cf6e965dd94e5f3fe60f828100c"},this.loading?this.loadingTitle:this.tittle),o("p",{key:"f9e5b699816236148bc00c5046c6cc67eb86ae01"},this.loading?this.loadingMessage:this.message)),o("div",{key:"2e9280865cad761bea5cdd88b972734c11ab7737",class:"custom-content"},o("slot",{key:"4fd36baa1455e7793a1e5291b52448707e3aa448"})),!this.loading&&this.displayButtons&&o("div",{key:"451bd3d90ec780499d9956a8a57a0d1461406fa9",class:"actions"},this.secondaryButton&&o("dropi-button",{key:"b60c30cc92cc080c01e1bf337a5e4b78f561be81",text:this.secondaryButton,severity:"secondary",onClick:()=>this.handleSecondary(),fullWidth:!0}),o("dropi-button",{key:"2b8696a02b253d289a1baef2116cffe436346717",text:this.primaryButton,severity:"primary",onClick:()=>this.handlePrimary(),fullWidth:!0}))))}static get watchers(){return{params:[{paramsChanged:0}]}}static get style(){return":host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:visible;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.custom-content{width:100%;text-align:left;margin-top:var(--Size-2);display:flex;flex-direction:column;gap:var(--Size-3)}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}"}},[772,"dropi-alert-modal",{visible:[1544],type:[1025],tittle:[1025],message:[1025],primaryButton:[1025,"primary-button"],secondaryButton:[1025,"secondary-button"],loading:[4],closable:[1028],displayButtons:[1028,"display-buttons"],loadingTitle:[1025,"loading-title"],loadingMessage:[1025,"loading-message"],isStep:[4,"is-step"],baseZIndex:[2,"base-z-index"],params:[8],show:[64],hide:[64]},void 0,{params:[{paramsChanged:0}]}]);function r(){"undefined"!=typeof customElements&&["dropi-alert-modal","dropi-button","dropi-icon","dropi-modal"].forEach((e=>{switch(e){case"dropi-alert-modal":customElements.get(t(e))||customElements.define(t(e),d);break;case"dropi-button":customElements.get(t(e))||a();break;case"dropi-icon":customElements.get(t(e))||n();break;case"dropi-modal":customElements.get(t(e))||l()}}))}r();const c=d,h=r;export{c as DropiAlertModal,h as defineCustomElement}