@dropi/ui 0.1.16 → 0.1.18

package/dist/collection/components/dropi-tag/dropi-tag.js

@@ -48,7 +48,7 @@ export class DropiTag {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (h("div", { key: '7044b9b910b9216c8674f5aa21afc8ec79310af2', class: "container-chips" }, h("div", { key: '1097981d0e3709a57a95e4a7c87937a24930e416', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'ba69aac6bb39a5cdc27d3d0ff2cc949cff1fb1a1', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '94aa2c494391b45341f14167bed97fa73f389b69' }, this.text))));
+        return (h("div", { key: 'd559f6c2ed27d543f018d3533d8d972bc47ceb9d', class: "container-chips" }, h("div", { key: 'd131a4626ead2d3d53d5c77875f8ebb19acc3b52', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '54775a2ca1bd87be3293b3d6417f4a26c6da0c85', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'bce897f4094c33fd53dc98571cae60cd456e0706' }, this.text))));
     }
     static get is() { return "dropi-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-text-area/dropi-text-area.js

@@ -70,12 +70,12 @@ export class DropiTextArea {
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
         const showHelper = this.helperText || this.isInvalid;
-        return (h("div", { key: 'b35dec5dc3d7ab2992542f4008b97c330c060fbf', class: "textarea-wrapper" }, this.label && (h("label", { key: '89c67611b34012f24fc8377b181215f20ff5b626', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: '74f091ab3e5aee1162943e54795e69b789ff1a84', class: "asterisk" }, " *"))), h("div", { key: '4a1193b310160f3a782692faa798390a2c60f32d', class: "textarea-container" }, h("textarea", { key: '68f62069a7b768cbfa2263ff66970b79a2fca007', id: this.resolvedId, class: {
+        return (h("div", { key: '652b432e3f23f6ca383ca4c44ad3b0da599ecbfb', class: "textarea-wrapper" }, this.label && (h("label", { key: '370698235edc4d8f8d449e66ee4ef90ea9e191d0', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'd7c90f3a45b987d7b3229410f141d7fa51fd003d', class: "asterisk" }, " *"))), h("div", { key: '579fadaf791012ab93ddcdff06d237dab27efc9a', class: "textarea-container" }, h("textarea", { key: 'd81a5f25b541e044f7f632512570f53966b156cf', id: this.resolvedId, class: {
                 'form-control': true,
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxlength, minLength: this.minlength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxlength > 0 && (h("div", { key: '71596e1da89db842a391efca26cdef906b4e9982', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (h("div", { key: '58f1124e504b85e5fdb2737f99524e4334e2dac5', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '9dd89e05639d924d96e0d117ee677461d30801e1', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '823ad2ae0b9e6337a347c83075123b3af675d1a4', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.helperText)))));
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxlength, minLength: this.minlength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxlength > 0 && (h("div", { key: 'd6c80f4f693e12069a2b1147b489717d61e53e53', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (h("div", { key: 'af317619d37311746ceefa083bb44ceff6514f92', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '2d92acfcb808a67319c8c1aa1a2c9c6c05affcef', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: 'd2fad4506be938c8376d41ed41186a808364adbf', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.helperText)))));
     }
     static get is() { return "dropi-text-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-toast/dropi-toast.css

@@ -0,0 +1,63 @@
+:host { display: contents; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.toast-container { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }
+.toast-container--top-right    { top: 80px; right: 0; padding: var(--Size-2, 8px); }
+.toast-container--top-left     { top: 80px; left: 0; padding: var(--Size-2, 8px); }
+.toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
+.toast-container--bottom-left  { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
+.toast-container--top-center    { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }
+.toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }
+
+.toast-wrapper { pointer-events: auto; animation: toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; }
+.toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }
+@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
+
+.toast { position: relative; display: flex; align-items: flex-start; border-radius: var(--Border-2,8px); background: var(--Neutral-White,#fff); box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06); border-left: var(--Size-2, 8px) solid; overflow: hidden; min-width: 300px; }
+.toast--success { border-color: var(--Success-Success-500,#34c38f); }
+.toast--error   { border-color: var(--Error-Error-500,#f46a6b); }
+.toast--warn    { border-color: var(--Warning-Warning-500,#f1b44c); }
+.toast--info    { border-color: var(--Info-Info-500,#50a5f1); }
+
+.toast-content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));
+  gap: var(--Size-4, 16px);
+}
+
+.lottie-img {
+  width: 50px;
+  height: 50px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.lottie-player-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+lottie-player {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.info-container { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }
+.title { margin: 0; font-size: var(--font-size-l,18px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-700,#32394d); line-height: 1.1; text-align: left; max-width: 250px; }
+.description  { margin: 0; font-size: var(--font-size-s,14px); color: var(--Gray-Gray-500,#6b7280); line-height: 1.4; text-align: left; max-width: 250px; }
+
+.toast-close { position: absolute; top: 18px; right: 10px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+.toast-close:hover { opacity: 0.7; }

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

@@ -0,0 +1,164 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-toast
+ * Global toast notification stack. Place once in the app root, call show() from JS.
+ *
+ * @example
+ * const t = document.querySelector('dropi-toast');
+ * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });
+ */
+export class DropiToast {
+    /** Toast position */
+    position = 'top-right';
+    /** Default auto-close ms (0 = manual) */
+    life = 4000;
+    items = [];
+    idCounter = 0;
+    /** Show a toast */
+    async show(msg) {
+        const id = msg.id ?? `t${++this.idCounter}`;
+        const item = { msg: { ...msg, id, closable: msg.closable ?? true }, leaving: false };
+        this.items = [...this.items, item];
+        const ms = msg.life !== undefined ? msg.life : this.life;
+        if (ms > 0)
+            item.timer = setTimeout(() => this.remove(id), ms);
+    }
+    /** Remove all toasts */
+    async clear() {
+        this.items.forEach(i => {
+            if (i.timer)
+                clearTimeout(i.timer);
+        });
+        this.items = [];
+    }
+    remove(id) {
+        this.items = this.items.map(i => (i.msg.id === id ? { ...i, leaving: true } : i));
+        setTimeout(() => {
+            this.items = this.items.filter(i => i.msg.id !== id);
+        }, 320);
+    }
+    lottieMap = {
+        success: '/assets/lottie-files/success.json',
+        error: '/assets/lottie-files/failure.json',
+        warn: '/assets/lottie-files/warning.json',
+        info: '/assets/lottie-files/question.json',
+    };
+    getLottieHtml(severity) {
+        return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
+    }
+    render() {
+        return (h("div", { key: '8cce9f62a0b8cac6415881be5f2e6d82bd35668e', class: `toast-container toast-container--${this.position}` }, this.items.map(item => (h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, h("div", { class: `toast toast--${item.msg.severity}` }, h("div", { class: "toast-content" }, h("div", { class: "lottie-img" }, h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), h("div", { class: "info-container" }, h("p", { class: "title" }, item.msg.summary), item.msg.detail && h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-400" })))))))));
+    }
+    static get is() { return "dropi-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-toast.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toast position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'top-right'"
+            },
+            "life": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default auto-close ms (0 = manual)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "life",
+                "defaultValue": "4000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "items": {}
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(msg: ToastMessage) => Promise<void>",
+                    "parameters": [{
+                            "name": "msg",
+                            "type": "ToastMessage",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ToastMessage": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-toast/dropi-toast.tsx",
+                            "id": "src/components/dropi-toast/dropi-toast.tsx::ToastMessage"
+                        },
+                        "ToastItem": {
+                            "location": "global",
+                            "id": "global::ToastItem"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show a toast",
+                    "tags": []
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove all toasts",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-tooltip/dropi-tooltip.css

@@ -0,0 +1,67 @@
+:host { display: inline-block; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
+
+.tooltip-bubble {
+  position: absolute; z-index: 9999;
+  background: #1f2433; color: var(--Neutral-White,#fff);
+  font-size: var(--font-size-s,14px); line-height: 1.5;
+  padding: 8px 12px; border-radius: 8px;
+  white-space: normal; pointer-events: none;
+  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
+  word-break: break-word;
+  box-shadow: var(--Shadow-medium);
+  text-align: left;
+  width: max-content;
+}
+.tooltip-bubble--visible { opacity: 1; }
+
+.tooltip-bubble--top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
+.tooltip-bubble--bottom { top: calc(100% + 12px);    left: 50%; transform: translateX(-50%); }
+.tooltip-bubble--left   { right: calc(100% + 12px);  top: 50%;  transform: translateY(-50%); }
+.tooltip-bubble--right  { left: calc(100% + 12px);   top: 50%;  transform: translateY(-50%); }
+
+.tooltip-arrow { position: absolute; width: 12px; height: 6px; }
+.tooltip-arrow::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.tooltip-arrow--top {
+  top: 100%; left: 50%; transform: translateX(-50%);
+}
+.tooltip-arrow--top::before {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #1f2433;
+}
+
+.tooltip-arrow--bottom {
+  bottom: 100%; left: 50%; transform: translateX(-50%);
+}
+.tooltip-arrow--bottom::before {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #1f2433;
+}
+
+.tooltip-arrow--left {
+  left: 100%; top: 50%; transform: translateY(-50%);
+}
+.tooltip-arrow--left::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid #1f2433;
+}
+
+.tooltip-arrow--right {
+  right: 100%; top: 50%; transform: translateY(-50%);
+}
+.tooltip-arrow--right::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid #1f2433;
+}

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

@@ -0,0 +1,147 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tooltip
+ * Wraps content and shows a tooltip bubble on hover/focus.
+ *
+ * @example
+ * <dropi-tooltip text="Más información" position="top">
+ *   <dropi-button text="Hover" />
+ * </dropi-tooltip>
+ */
+export class DropiTooltip {
+    /** Tooltip text */
+    text = '';
+    /** Position: top | bottom | left | right */
+    position = 'top';
+    /** Max CSS width of the bubble */
+    maxWidth = '280px';
+    /** Delay in ms before showing */
+    showDelay = 0;
+    visible = false;
+    showTimer = null;
+    show = () => {
+        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;
+        }
+        this.visible = false;
+    };
+    render() {
+        return (h("div", { key: 'c6179d8dfb9f4c3cc2a6a4e79f2e1a9ff8bbd641', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, h("slot", { key: 'aee7bae9d384369faaa5b078e40f3a8763690bb3' }), this.text && (h("div", { key: 'd00e75f536c5f88c7062ac6359dec3fe7d866cd0', class: { 'tooltip-bubble': true, [`tooltip-bubble--${this.position}`]: true, 'tooltip-bubble--visible': this.visible }, style: { maxWidth: this.maxWidth }, role: "tooltip" }, this.text, h("span", { key: 'aec6a936bbc6677b0e1abf3a18233d90d757cd96', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+    }
+    static get is() { return "dropi-tooltip"; }
+    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": "''"
+            },
+            "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/dropi-tooltip.tsx",
+                            "id": "src/components/dropi-tooltip/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": "'top'"
+            },
+            "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'"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+}

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

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

package/dist/components/dropi-accordion.js

@@ -0,0 +1 @@
+import{t as e,p as o,H as a,c as i,h as t}from"./index.js";import{d as r}from"./p-ChOXWKmI.js";const d=o(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiToggle=i(this,"dropiToggle")}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 t("div",{key:"4da35da859fc9fdb7c874c026ef1178c93b7bfd5",class:{accordion:!0,"accordion--open":this.open,"accordion--disabled":this.disabled}},t("button",{key:"77af39a3e990b23b5e185fa99176dadce219a911",class:"accordion-header",onClick:()=>this.handleToggle(),"aria-expanded":this.open+"",disabled:this.disabled},t("span",{key:"cda6c545f4d8342a5e9604245b102defe88be227",class:"accordion-header-left"},this.preIcon&&t("dropi-icon",{key:"b73a39adc40193ae93b235ad5a4169a6ec4caa16",name:this.preIcon,width:"20px",height:"20px",color:"Gray-Gray-600"}),t("span",{key:"d7c4543d5c5580ce421deeca47752c850918efd2",class:"accordion-title"},this.header)),t("span",{key:"9e8884a62c4f9a20e6e15ee69499990db9ded865",class:{"accordion-chevron":!0,"accordion-chevron--open":this.open}},t("dropi-icon",{key:"a4eb14dc1f0ac9c45865e8ee69cf698e1a5c50a7",name:"Dropdown-down",width:"20px",height:"20px",color:"Gray-Gray-500"}))),t("div",{key:"a23b40bb950b86dafca96851319aee3c8bb6656e",class:"accordion-body",style:{maxHeight:this.contentHeight},ref:e=>this.contentRef=e},t("div",{key:"bf69ecafa7d59d776d38c55df10fa25d84d2152a",class:"accordion-content"},t("slot",{key:"bcb928fd4551e65b9e286770979e2e67ff9fb1aa"}))))}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),d);break;case"dropi-icon":customElements.get(e(o))||r()}}))}c();const n=d,s=c;export{n as DropiAccordion,s as defineCustomElement}

package/dist/components/dropi-button.js

@@ -1 +1 @@
-import{t as r,p as a,H as o,c as e,h as n}from"./index.js";import{d as t}from"./p-MNma8N1x.js";const c=a(class extends o{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.dropiClick=e(this,"dropiClick")}type="default";severity="primary";size="normal";state="default";preIcon="";postIcon="";text="";dropiClick;colorMap={default:"Primary-Primary-",success:"Success-Success-",error:"Error-Error-",info:"Info-Info-",legacy:"Secondary-Secondary-",warning:"Warning-Warning-",dropdown:"Gray-Gray-"};get iconSize(){return"large"===this.size?"24px":"small"===this.size?"16px":"18px"}get color(){return(this.colorMap[this.type]??"Primary-Primary-")+("disabled"===this.state?"300":"500")}get fontColor(){return"tertiary"===this.severity?"default"===this.type||"legacy"===this.type?"Gray-Gray-500":this.color:"secondary"===this.severity?this.color:"Neutral-White"}handleClick(r){"disabled"!==this.state&&"loading"!==this.state&&this.dropiClick.emit(r)}renderLoadingSpinner(){return n("svg",{class:"spin",width:this.iconSize,height:this.iconSize,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z",fill:`var(--${this.fontColor})`}))}render(){const r="disabled"===this.state||"loading"===this.state,a=""!==this.text,o=""!==this.postIcon||"dropdown"===this.type,e="dropdown"===this.type?"Dropdown-down":this.postIcon;return n("button",{key:"6cde7f2616d1cff9e3304481f2a0c38aabc34192",class:{btn:!0,"without-text":!a,[this.severity]:!0,[this.type]:!0,[this.size]:!0,[this.state]:!0},disabled:r,onClick:r=>this.handleClick(r)},this.preIcon&&n("dropi-icon",{key:"769cea8fce2947552462aa2cbbb09d64df952c76",name:this.preIcon,width:this.iconSize,height:this.iconSize,color:this.fontColor}),a&&n("span",{key:"f66ad80283d54f643cf37ea702145127b90d4ce4",class:"text"},this.text),o&&n("dropi-icon",{key:"4fd9c7d7d029c3316bc0492576cda0cca74fa460",name:e,width:this.iconSize,height:this.iconSize,color:this.fontColor}),"loading"===this.state&&this.renderLoadingSpinner(),n("slot",{key:"3280c56a28ea40016d35e186b9997635b8ba881b"}))}static get style(){return":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:700;min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--Size-3, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #fff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #fff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #fff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #fff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #fff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #fff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #fff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #fff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #fff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #fff)}.btn.secondary{background:var(--Neutral-White, #fff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:400;font-size:14px;background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}"}},[769,"dropi-button",{type:[1],severity:[1],size:[1],state:[1],preIcon:[1,"pre-icon"],postIcon:[1,"post-icon"],text:[1]}]);function i(){"undefined"!=typeof customElements&&["dropi-button","dropi-icon"].forEach((a=>{switch(a){case"dropi-button":customElements.get(r(a))||customElements.define(r(a),c);break;case"dropi-icon":customElements.get(r(a))||t()}}))}i();const s=c,d=i;export{s as DropiButton,d as defineCustomElement}
+import{D as s,d as o}from"./p-NCyvfOs2.js";const p=s,r=o;export{p as DropiButton,r as defineCustomElement}

package/dist/components/dropi-checkbox.js

@@ -1 +1 @@
-import{t as e,p as r,H as i,c as t,h as o}from"./index.js";const c=r(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChange=t(this,"dropiChange")}checked=!1;disabled=!1;dropiChange;changeState(){this.disabled||(this.checked=!this.checked,this.dropiChange.emit(this.checked))}render(){return o("div",{key:"e5c7ef2fd09e5e18b71cbbdd96cc13d4fd99b8a5",class:"container-dropi-checkbox",onClick:()=>this.changeState()},o("div",{key:"2b6a006125e8e68fbba9285451d0d7a578c183d2",class:{check:!0,isCheck:this.checked,noCheck:!this.checked,disabled:this.disabled}},o("svg",{key:"ce19f7e7e1159ee2915a78827775bd969484aa4a",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none"},o("path",{key:"f41304ce433c5ea47f8eb964278e1a4c2c8184b2",d:"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z",fill:"#FFFFFF"}))))}static get formAssociated(){return!0}static get style(){return":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}"}},[577,"dropi-checkbox",{checked:[1540],disabled:[516]}]);function s(){"undefined"!=typeof customElements&&["dropi-checkbox"].forEach((r=>{"dropi-checkbox"===r&&(customElements.get(e(r))||customElements.define(e(r),c))}))}s();const a=c,d=s;export{a as DropiCheckbox,d as defineCustomElement}
+import{t as e,p as r,H as i,c as t,h as o}from"./index.js";const c=r(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChange=t(this,"dropiChange")}checked=!1;disabled=!1;dropiChange;changeState(){this.disabled||(this.checked=!this.checked,this.dropiChange.emit(this.checked))}render(){return o("div",{key:"f37dba8ec47aec07302f0b6f52d402b4367aa8da",class:"container-dropi-checkbox",onClick:()=>this.changeState()},o("div",{key:"21c72608204b4384de76720192542763c8190b27",class:{check:!0,isCheck:this.checked,noCheck:!this.checked,disabled:this.disabled}},o("svg",{key:"06881031251120f3942fc938e7c0ffad5dde7494",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none"},o("path",{key:"dd52bac77eca77270cfd645f02fb06a39a7cf519",d:"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z",fill:"#FFFFFF"}))))}static get formAssociated(){return!0}static get style(){return":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}"}},[577,"dropi-checkbox",{checked:[1540],disabled:[516]}]);function s(){"undefined"!=typeof customElements&&["dropi-checkbox"].forEach((r=>{"dropi-checkbox"===r&&(customElements.get(e(r))||customElements.define(e(r),c))}))}s();const a=c,d=s;export{a as DropiCheckbox,d as defineCustomElement}

package/dist/components/dropi-empty-state.d.ts

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

package/dist/components/dropi-empty-state.js

@@ -0,0 +1 @@
+import{t,p as e,H as a,c as i,h as s}from"./index.js";import{d as r}from"./p-NCyvfOs2.js";import{d as o}from"./p-ChOXWKmI.js";const c=e(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.dropiAction=i(this,"dropiAction"),this.dropiSecondaryAction=i(this,"dropiSecondaryAction")}header="";description="";imageUrl="";imageAlt="Sin resultados";actionLabel="";secondaryLabel="";dropiAction;dropiSecondaryAction;render(){return s("div",{key:"1aea01715d0e50b308904d496be7bc2f607bf5aa",class:"empty-state"},this.imageUrl?s("img",{class:"empty-state-img",src:this.imageUrl,alt:this.imageAlt}):s("div",{class:"empty-state-placeholder"},s("svg",{viewBox:"0 0 80 80",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"empty-state-svg"},s("rect",{width:"80",height:"80",rx:"40",fill:"var(--Gray-Gray-100, #e6eaf2)"}),s("path",{d:"M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z",fill:"var(--Gray-Gray-400, #858ea6)"}))),this.header&&s("h3",{key:"41e5da8d482456f4b9006449a27a9f9d172d87b4",class:"empty-state-title"},this.header),this.description&&s("p",{key:"ffa6399489ec56cd2cf84bb39d12c112bee64302",class:"empty-state-description"},this.description),s("slot",{key:"6ccdfed94a22ad7ece2388fba3d4734aa6a2b509"}),(this.actionLabel||this.secondaryLabel)&&s("div",{key:"0da97fd516eccd1cabe846b2d002fdf75306674d",class:"empty-state-actions"},this.secondaryLabel&&s("dropi-button",{key:"de1b1ad4d6a50cfd251de243a3b5ea3beb10019b",text:this.secondaryLabel,severity:"secondary",onDropiClick:()=>this.dropiSecondaryAction.emit()}),this.actionLabel&&s("dropi-button",{key:"59f3b47ee14f3ac89aa4acc5b42d856f26d02d19",text:this.actionLabel,severity:"primary",onDropiClick:()=>this.dropiAction.emit()})))}static get style(){return":host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}"}},[769,"dropi-empty-state",{header:[1],description:[1],imageUrl:[1,"image-url"],imageAlt:[1,"image-alt"],actionLabel:[1,"action-label"],secondaryLabel:[1,"secondary-label"]}]);function n(){"undefined"!=typeof customElements&&["dropi-empty-state","dropi-button","dropi-icon"].forEach((e=>{switch(e){case"dropi-empty-state":customElements.get(t(e))||customElements.define(t(e),c);break;case"dropi-button":customElements.get(t(e))||r();break;case"dropi-icon":customElements.get(t(e))||o()}}))}n();const d=c,p=n;export{d as DropiEmptyState,p as defineCustomElement}

package/dist/components/dropi-icon.js

@@ -1 +1 @@
-import{D as o,d as s}from"./p-MNma8N1x.js";const a=o,m=s;export{a as DropiIcon,m as defineCustomElement}
+import{D as o,d as s}from"./p-ChOXWKmI.js";const m=o,p=s;export{m as DropiIcon,p as defineCustomElement}

package/dist/components/dropi-input.js

@@ -1 +1 @@
-import{t as e,p as r,H as o,c as t,h as a}from"./index.js";import{d as i}from"./p-MNma8N1x.js";const s=r(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiInput=t(this,"dropiInput"),this.dropiChange=t(this,"dropiChange"),this.dropiFocus=t(this,"dropiFocus"),this.dropiBlur=t(this,"dropiBlur"),this.internals=this.attachInternals()}internals;inputId="";name="";label="";placeholder=" ";value="";maxlength;disabled=!1;required=!1;showAsterisk=!0;fixedLabel=!1;inputMode="text";passwordInput=!1;moneyFormat=!1;thousandSeparator=!1;onlyNumbers=!1;allowDecimals=!1;onlyLetters=!1;icon="";iconColor="Gray-Gray-400";invalid=!1;helperText="";showHelperOnlyOnError=!1;showPassword=!1;touched=!1;dropiInput;dropiChange;dropiFocus;dropiBlur;valueChanged(e){this.internals.setFormValue(e)}disabledChanged(e){this.internals.setValidity(e?{customError:!0}:{},e?"Field is disabled":"")}componentWillLoad(){this.internals.setFormValue(this.value??"")}handleInput(e){let r=e.target.value;this.onlyNumbers&&(r=this.filterNumbers(r)),this.onlyLetters&&(r=this.filterLetters(r)),(this.moneyFormat||this.thousandSeparator)&&(r=this.formatThousands(r,this.moneyFormat)),this.value=r,this.internals.setFormValue(r),this.dropiInput.emit(r)}handleKeyDown(e){this.onlyNumbers&&!this.isAllowedNumberKey(e)&&e.preventDefault(),this.onlyLetters&&!this.isAllowedLetterKey(e)&&e.preventDefault()}handleFocus(){this.dropiFocus.emit()}handleBlur(){this.touched=!0,this.dropiChange.emit(this.value),this.dropiBlur.emit()}togglePassword(){this.disabled||(this.showPassword=!this.showPassword)}filterNumbers(e){return e.replace(this.allowDecimals?/[^0-9.]/g:/[^0-9]/g,"")}filterLetters(e){return e.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g,"")}isAllowedNumberKey(e){return!!(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(e.key)||e.ctrlKey||e.metaKey||/^[0-9]$/.test(e.key)||this.allowDecimals&&"."===e.key)}isAllowedLetterKey(e){return!!["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"," "].includes(e.key)||!(!e.ctrlKey&&!e.metaKey)||/^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key)}formatThousands(e,r){const o=e.replace(/[^0-9.]/g,""),[t,a]=o.split("."),i=t.replace(/\B(?=(\d{3})+(?!\d))/g,","),s=void 0!==a?`${i}.${a}`:i;return r?"$"+s:s}get resolvedId(){return this.inputId||this.label}get inputType(){return this.passwordInput?this.showPassword?"text":"password":"text"}get showHelper(){return!!this.helperText&&(!this.showHelperOnlyOnError||this.invalid&&this.touched)}get isInvalid(){return this.invalid&&this.touched}render(){const e=this.required&&this.showAsterisk&&!this.disabled,r=!!this.icon&&!!this.value;return a("div",{key:"4ea9c2118e6452345a2a92eedc807e6d94019784",class:{"fixed-label-container":this.fixedLabel}},this.fixedLabel&&a("div",{key:"b8c1269e9d583becd9614f6f3c28f6a2b536f18f",class:"input-label Body-S-Regular"},this.label,e&&a("span",{key:"945665772caab1a1c95f1a054dea1b8dd88287a3",class:"asterisk"}," *")),a("div",{key:"f550584dde83c907429255d9a98b8a59ff322cbb",class:"form-group"},a("div",{key:"6cc46f5822e62d59bb211e7d9eb7909ab2b833c9",class:"input-container"},r&&a("dropi-icon",{key:"c860e808ae7cd805aa9c430d52743f7eab0aaeba",class:"icon-input",name:this.icon,color:this.iconColor,width:"20px",height:"20px"}),this.passwordInput&&a("dropi-icon",{key:"ba571d4d14ec2a911a8b0bd4cdc7a8481aebe746",class:"icon-input-password",name:this.showPassword?"Eye":"Eye-crossed",width:"20px",height:"20px",color:"Gray-Gray-500",onClick:()=>this.togglePassword()}),a("input",{key:"aad18a94d94c9600236bac7c23e38b1c1c41f06a",id:this.resolvedId,class:{"form-control":!0,"form-control-valid":!this.isInvalid&&this.touched&&!!this.value,"form-control-invalid":this.isInvalid,"padding-icon":r,"text-password":this.passwordInput&&!this.showPassword,"fixed-label-input":this.fixedLabel},type:this.inputType,value:this.value,placeholder:this.fixedLabel?this.placeholder:" ",disabled:this.disabled,required:this.required,maxLength:this.maxlength,inputMode:this.inputMode,"data-cy":void 0,onInput:e=>this.handleInput(e),onKeyDown:e=>this.handleKeyDown(e),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),!this.fixedLabel&&a("label",{key:"8ba7ea50525aa8990662d45829ba732094c41f80",class:"Body-S-Regular label-bottom",htmlFor:this.resolvedId},this.label,e&&a("span",{key:"3916d3de6392da62b8086920cd2fce3b96238416",class:"asterisk"}," *")),this.showHelper&&a("div",{key:"83e17f7d0cdb503b86fd035775e1cb45d9f41709",class:"form-control-helper"},this.isInvalid&&a("dropi-icon",{key:"4e034348270853f8a3aafbbbb938a5974076aebd",name:"Warning-circle",width:"12px",height:"12px",color:"Error-Error-500"}),a("span",{key:"7832f200ccc6f6273d65012b9e642c313399a277",class:{"disabled-helper":this.disabled,"invalid-color":this.isInvalid}},this.helperText)))))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}"}},[577,"dropi-input",{inputId:[1,"input-id"],name:[1],label:[1],placeholder:[1],value:[1025],maxlength:[2],disabled:[516],required:[516],showAsterisk:[4,"show-asterisk"],fixedLabel:[4,"fixed-label"],inputMode:[1,"input-mode"],passwordInput:[4,"password-input"],moneyFormat:[4,"money-format"],thousandSeparator:[4,"thousand-separator"],onlyNumbers:[4,"only-numbers"],allowDecimals:[4,"allow-decimals"],onlyLetters:[4,"only-letters"],icon:[1],iconColor:[1,"icon-color"],invalid:[4],helperText:[1,"helper-text"],showHelperOnlyOnError:[4,"show-helper-only-on-error"],showPassword:[32],touched:[32]},void 0,{value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]);function l(){"undefined"!=typeof customElements&&["dropi-input","dropi-icon"].forEach((r=>{switch(r){case"dropi-input":customElements.get(e(r))||customElements.define(e(r),s);break;case"dropi-icon":customElements.get(e(r))||i()}}))}l();const n=s,d=l;export{n as DropiInput,d as defineCustomElement}
+import{t as e,p as t,H as r,c as o,h as a}from"./index.js";import{d as i}from"./p-ChOXWKmI.js";const s=t(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiInput=o(this,"dropiInput"),this.dropiChange=o(this,"dropiChange"),this.dropiFocus=o(this,"dropiFocus"),this.dropiBlur=o(this,"dropiBlur"),this.internals=this.attachInternals()}internals;inputId="";name="";label="";placeholder=" ";value="";maxlength;disabled=!1;required=!1;showAsterisk=!0;fixedLabel=!1;inputMode="text";passwordInput=!1;moneyFormat=!1;thousandSeparator=!1;onlyNumbers=!1;allowDecimals=!1;onlyLetters=!1;icon="";iconColor="Gray-Gray-400";invalid=!1;helperText="";showHelperOnlyOnError=!1;showPassword=!1;touched=!1;dropiInput;dropiChange;dropiFocus;dropiBlur;valueChanged(e){this.internals.setFormValue(e)}disabledChanged(e){this.internals.setValidity(e?{customError:!0}:{},e?"Field is disabled":"")}componentWillLoad(){this.internals.setFormValue(this.value??"")}handleInput(e){let t=e.target.value;this.onlyNumbers&&(t=this.filterNumbers(t)),this.onlyLetters&&(t=this.filterLetters(t)),(this.moneyFormat||this.thousandSeparator)&&(t=this.formatThousands(t,this.moneyFormat)),this.value=t,this.internals.setFormValue(t),this.dropiInput.emit(t)}handleKeyDown(e){this.onlyNumbers&&!this.isAllowedNumberKey(e)&&e.preventDefault(),this.onlyLetters&&!this.isAllowedLetterKey(e)&&e.preventDefault()}handleFocus(){this.dropiFocus.emit()}handleBlur(){this.touched=!0,this.dropiChange.emit(this.value),this.dropiBlur.emit()}togglePassword(){this.disabled||(this.showPassword=!this.showPassword)}filterNumbers(e){return e.replace(this.allowDecimals?/[^0-9.]/g:/[^0-9]/g,"")}filterLetters(e){return e.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g,"")}isAllowedNumberKey(e){return!!(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(e.key)||e.ctrlKey||e.metaKey||/^[0-9]$/.test(e.key)||this.allowDecimals&&"."===e.key)}isAllowedLetterKey(e){return!!["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"," "].includes(e.key)||!(!e.ctrlKey&&!e.metaKey)||/^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key)}formatThousands(e,t){const r=e.replace(/[^0-9.]/g,""),[o,a]=r.split("."),i=o.replace(/\B(?=(\d{3})+(?!\d))/g,","),s=void 0!==a?`${i}.${a}`:i;return t?"$"+s:s}get resolvedId(){return this.inputId||this.label}get inputType(){return this.passwordInput?this.showPassword?"text":"password":"text"}get showHelper(){return!!this.helperText&&(!this.showHelperOnlyOnError||this.invalid&&this.touched)}get isInvalid(){return this.invalid&&this.touched}render(){const e=this.required&&this.showAsterisk&&!this.disabled,t=!!this.icon&&!!this.value;return a("div",{key:"4ea9c2118e6452345a2a92eedc807e6d94019784",class:{"fixed-label-container":this.fixedLabel}},this.fixedLabel&&a("div",{key:"b8c1269e9d583becd9614f6f3c28f6a2b536f18f",class:"input-label Body-S-Regular"},this.label,e&&a("span",{key:"945665772caab1a1c95f1a054dea1b8dd88287a3",class:"asterisk"}," *")),a("div",{key:"f550584dde83c907429255d9a98b8a59ff322cbb",class:"form-group"},a("div",{key:"6cc46f5822e62d59bb211e7d9eb7909ab2b833c9",class:"input-container"},t&&a("dropi-icon",{key:"c860e808ae7cd805aa9c430d52743f7eab0aaeba",class:"icon-input",name:this.icon,color:this.iconColor,width:"20px",height:"20px"}),this.passwordInput&&a("dropi-icon",{key:"ba571d4d14ec2a911a8b0bd4cdc7a8481aebe746",class:"icon-input-password",name:this.showPassword?"Eye":"Eye-crossed",width:"20px",height:"20px",color:"Gray-Gray-500",onClick:()=>this.togglePassword()}),a("input",{key:"aad18a94d94c9600236bac7c23e38b1c1c41f06a",id:this.resolvedId,class:{"form-control":!0,"form-control-valid":!this.isInvalid&&this.touched&&!!this.value,"form-control-invalid":this.isInvalid,"padding-icon":t,"text-password":this.passwordInput&&!this.showPassword,"fixed-label-input":this.fixedLabel},type:this.inputType,value:this.value,placeholder:this.fixedLabel?this.placeholder:" ",disabled:this.disabled,required:this.required,maxLength:this.maxlength,inputMode:this.inputMode,"data-cy":void 0,onInput:e=>this.handleInput(e),onKeyDown:e=>this.handleKeyDown(e),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),!this.fixedLabel&&a("label",{key:"8ba7ea50525aa8990662d45829ba732094c41f80",class:"Body-S-Regular label-bottom",htmlFor:this.resolvedId},this.label,e&&a("span",{key:"3916d3de6392da62b8086920cd2fce3b96238416",class:"asterisk"}," *")),this.showHelper&&a("div",{key:"83e17f7d0cdb503b86fd035775e1cb45d9f41709",class:"form-control-helper"},this.isInvalid&&a("dropi-icon",{key:"4e034348270853f8a3aafbbbb938a5974076aebd",name:"Warning-circle",width:"12px",height:"12px",color:"Error-Error-500"}),a("span",{key:"7832f200ccc6f6273d65012b9e642c313399a277",class:{"disabled-helper":this.disabled,"invalid-color":this.isInvalid}},this.helperText)))))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}"}},[577,"dropi-input",{inputId:[1,"input-id"],name:[1],label:[1],placeholder:[1],value:[1025],maxlength:[2],disabled:[516],required:[516],showAsterisk:[4,"show-asterisk"],fixedLabel:[4,"fixed-label"],inputMode:[1,"input-mode"],passwordInput:[4,"password-input"],moneyFormat:[4,"money-format"],thousandSeparator:[4,"thousand-separator"],onlyNumbers:[4,"only-numbers"],allowDecimals:[4,"allow-decimals"],onlyLetters:[4,"only-letters"],icon:[1],iconColor:[1,"icon-color"],invalid:[4],helperText:[1,"helper-text"],showHelperOnlyOnError:[4,"show-helper-only-on-error"],showPassword:[32],touched:[32]},void 0,{value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]);function l(){"undefined"!=typeof customElements&&["dropi-input","dropi-icon"].forEach((t=>{switch(t){case"dropi-input":customElements.get(e(t))||customElements.define(e(t),s);break;case"dropi-icon":customElements.get(e(t))||i()}}))}l();const n=s,d=l;export{n as DropiInput,d as defineCustomElement}

package/dist/components/dropi-modal.d.ts

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