@dropi/ui 0.1.18 → 0.1.19

package/dist/esm/dropi-text-area.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
 
-const dropiTextAreaCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.textarea-wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.textarea-wrapper label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.textarea-container{position:relative}textarea.form-control{box-sizing:border-box;width:100%;overflow:auto;padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #fff);transition:border-color 0.3s ease-in-out;outline:none;appearance:none}textarea.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}textarea.form-control:focus::placeholder{color:var(--Gray-Gray-400, #858ea6)}textarea.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}textarea.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}.char-counter{position:absolute;bottom:10px;right:16px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c);pointer-events:none}.form-control-helper{display:flex;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}`;
+const dropiTextAreaCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.textarea-wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.textarea-wrapper label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.textarea-container{position:relative}textarea.form-control{box-sizing:border-box;width:100%;overflow:auto;padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #fff);transition:border-color 0.3s ease-in-out;outline:none;appearance:none}textarea.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}textarea.form-control:focus::placeholder{color:var(--Gray-Gray-400, #858ea6)}textarea.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}textarea.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}.char-counter{position:absolute;bottom:10px;right:16px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c);pointer-events:none}.form-control-helper{display:flex;gap:4px;align-items:center}.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}`;
 
 const DropiTextArea = class {
     constructor(hostRef) {
@@ -82,12 +82,12 @@ const DropiTextArea = class {
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
         const showHelper = this.helperText || this.isInvalid;
-        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: {
+        return (h("div", { key: 'e61f93feb18b6ed2fd3a9e2b7a301b3383c59ef1', class: "textarea-wrapper" }, this.label && (h("label", { key: '3dce1ef5e6335f838778c09de911235115111623', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'bdeb923cb358ea947bbf22cb0a76545aef5d7b80', class: "asterisk" }, " *"))), h("div", { key: '402aae3d238a559ac670e69aa3a003baa36fd2c2', class: "textarea-container" }, h("textarea", { key: 'afe5dae36cb27dbd461ab9d4f998f83a43babf90', 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: '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)))));
+            }, 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: '0c9a7c6555594e7101f72b47c819838e2ffe5236', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (h("div", { key: 'ad4d6435c21ec013a271b490c74f66839de4d6c2', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '11e480a0cb3f59f1838915850d09a0758160b2fc', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '461e0f727feecb2fd6d5f21e51f39d017ff275b3', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.helperText)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/esm/dropi-time-line.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.js';
+
+const dropiTimeLineCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.timeline{display:flex;flex-direction:column}.tl-step{display:flex;align-items:flex-start;gap:var(--Size-3, 12px)}.tl-step__marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.tl-step__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s, border-color 0.2s}.tl-step--pending .tl-step__icon{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.tl-step--active .tl-step__icon{background:var(--Neutral-White, #fff);border:2px solid var(--Primary-Primary-500, #f49a3d);box-shadow:0 0 0 4px var(--Primary-Primary-100, #fde9d0)}.tl-step--done .tl-step__icon{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.tl-step__dot{width:8px;height:8px;border-radius:50%;display:block}.tl-step--pending .tl-step__dot{background:var(--Gray-Gray-300, #a3abbf)}.tl-step--active .tl-step__dot{background:var(--Primary-Primary-500, #f49a3d)}.tl-step--done .tl-step__dot{background:var(--Neutral-White, #fff)}.tl-step__line{flex:1;width:2px;min-height:24px;margin:4px 0;background:var(--Gray-Gray-200, #c3c9d9)}.tl-step--done+.tl-step .tl-step__line,.tl-step--done .tl-step__line{background:var(--Primary-Primary-500, #f49a3d)}.tl-step__content{display:flex;flex-direction:column;gap:2px;padding-top:6px;padding-bottom:var(--Size-4, 16px)}.tl-step__label{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.tl-step--pending .tl-step__label{color:var(--Gray-Gray-400, #858ea6);font-weight:var(--font-weight-regular, 400)}.tl-step__subtitle{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
+
+const DropiTimeLine = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Array of timeline steps. Pass as JSON string or array */
+    steps = [];
+    get parsedSteps() {
+        if (typeof this.steps === 'string') {
+            try {
+                return JSON.parse(this.steps);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.steps || [];
+    }
+    render() {
+        const steps = this.parsedSteps;
+        return (h("div", { key: '9391536f472117d8788456df24de433fc9f6ae1e', class: "timeline" }, steps.map((step, i) => {
+            const isLast = i === steps.length - 1;
+            return (h("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, h("div", { class: "tl-step__marker" }, h("div", { class: "tl-step__icon" }, step.icon ? (h("dropi-icon", { name: step.icon, width: "16px", height: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (h("span", { class: "tl-step__dot" }))), !isLast && h("div", { class: "tl-step__line" })), h("div", { class: "tl-step__content" }, h("span", { class: "tl-step__label" }, step.label), step.subtitle && h("span", { class: "tl-step__subtitle" }, step.subtitle))));
+        })));
+    }
+};
+DropiTimeLine.style = dropiTimeLineCss();
+
+export { DropiTimeLine as dropi_time_line };

package/dist/esm/dropi-toast.entry.js

@@ -45,7 +45,7 @@ const DropiToast = class {
         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" })))))))));
+        return (h("div", { key: 'ee7e397e3ae32ac5a30b9a37777823315d2e653d', 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" })))))))));
     }
 };
 DropiToast.style = dropiToastCss();

package/dist/esm/dropi-tooltip.entry.js

@@ -32,7 +32,7 @@ const DropiTooltip = class {
         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}` })))));
+        return (h("div", { key: 'fa52d7ff250fe76fefd529f2dab27338d0a8bd0a', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, h("slot", { key: 'e301fead7186cec3b817a9339a0878006b750cbf' }), this.text && (h("div", { key: 'e24cb85fd227d0f96935dfe6095804ad9fcbc140', 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: 'a2dbe5693bfb2c0894d20bc2831d303b5634869e', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
     }
 };
 DropiTooltip.style = dropiTooltipCss();

package/dist/esm/dropi-ui.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-empty-state",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-accordion",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-input",[[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]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tabs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-toast",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-skeleton",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-tooltip",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]]], options);
+  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-card-section",[[513,"dropi-card-section",{"sectionTitle":[1,"section-title"],"description":[1],"typeElement":[1,"type-element"],"type":[1],"isChecked":[1028,"is-checked"]}]]],["dropi-checkbox-selection-list",[[513,"dropi-checkbox-selection-list",{"options":[1],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"showNotFound":[4,"show-not-found"],"notFoundMessage":[1,"not-found-message"],"multiSelect":[4,"multi-select"],"filterText":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-empty-state",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-search",[[513,"dropi-search",{"placeholder":[1],"value":[1025],"maxlength":[2],"showClear":[4,"show-clear"],"options":[1],"labelKey":[1,"label-key"],"multiSelect":[4,"multi-select"],"dropdownHeight":[1,"dropdown-height"],"label":[1],"open":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-accordion",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-alert",[[513,"dropi-alert",{"message":[1],"type":[1],"state":[1],"dismissable":[4],"showButton":[4,"show-button"],"buttonText":[1,"button-text"],"anchorText":[1,"anchor-text"],"anchorUrl":[1,"anchor-url"],"showAlert":[1028,"show-alert"]}]]],["dropi-chips",[[769,"dropi-chips",{"chipStyle":[1,"chip-style"],"type":[1],"urlImg":[1,"url-img"],"showIcon":[4,"show-icon"],"icon":[1]}]]],["dropi-dropdown",[[513,"dropi-dropdown",{"options":[1],"valueModel":[1,"value-model"],"imageModel":[1,"image-model"],"height":[1],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-favorite-button",[[513,"dropi-favorite-button",{"isFavorite":[1028,"is-favorite"],"hovered":[32]}]]],["dropi-image-miniature",[[513,"dropi-image-miniature",{"label":[1],"images":[1],"width":[1],"height":[1]}]]],["dropi-image-overlay",[[513,"dropi-image-overlay",{"visible":[1028],"images":[1],"activeIndex":[1026,"active-index"],"current":[32],"parsedImages":[32]},null,{"images":[{"imagesChanged":0}],"activeIndex":[{"indexChanged":0}],"visible":[{"visibleChanged":0}]}]]],["dropi-input",[[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]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"noLabels":[4,"no-labels"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-radio-selection-list",[[513,"dropi-radio-selection-list",{"options":[1],"selectedOption":[1032,"selected-option"],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"typeLayout":[1,"type-layout"],"filterText":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-steps",[[513,"dropi-steps",{"stepsCount":[2,"steps-count"],"showNumberOfStep":[4,"show-number-of-step"],"currentStep":[2,"current-step"],"stepLabels":[1,"step-labels"]}]]],["dropi-tabs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-time-line",[[513,"dropi-time-line",{"steps":[1]}]]],["dropi-toast",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-vertical-steps",[[513,"dropi-vertical-steps",{"steps":[1],"currentStep":[2,"current-step"],"clickable":[4],"showCheckIcon":[4,"show-check-icon"]}]]],["dropi-avatars",[[513,"dropi-avatars",{"image":[1],"alt":[1],"type":[1],"initials":[1]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-logo",[[513,"dropi-logo",{"urlLogo":[1,"url-logo"],"size":[1],"theme":[1]}]]],["dropi-lottie-loader",[[513,"dropi-lottie-loader",{"visible":[4],"loadingAnimation":[1,"loading-animation"],"loaderTitle":[1,"loader-title"],"message":[1]}]]],["dropi-otp-send-code",[[513,"dropi-otp-send-code",{"engine":[1],"labelContact":[1,"label-contact"],"showLabelContact":[4,"show-label-contact"],"errorMessage":[1,"error-message"],"digits":[32],"digitStates":[32],"countdown":[32],"canResend":[32],"error":[32]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-read-more",[[513,"dropi-read-more",{"text":[1],"maxWords":[2,"max-words"],"showSeeLess":[4,"show-see-less"],"expanded":[32]}]]],["dropi-simple-stepper",[[513,"dropi-simple-stepper",{"stepsCount":[2,"steps-count"],"typeStep":[1,"type-step"],"currentStep":[2,"current-step"],"labelStepper":[1,"label-stepper"],"flowMode":[1,"flow-mode"]}]]],["dropi-skeleton",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-tooltip",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]]], options);
 });

package/dist/esm/dropi-vertical-steps.entry.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiVerticalStepsCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.vertical-steps{display:flex;flex-direction:column}.v-step{display:flex;align-items:flex-start;gap:var(--Size-3, 12px)}.v-step--clickable{cursor:pointer}.v-step__indicator{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.v-step__circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s, border-color 0.2s}.v-step__circle--pending{background:var(--Neutral-White, #fff);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.v-step__circle--current{background:var(--Neutral-White, #fff);border:2px solid var(--Primary-Primary-500, #f49a3d)}.v-step__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.v-step__number{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-500, #69738c)}.v-step__circle--current .v-step__number{color:var(--Primary-Primary-500, #f49a3d)}.v-step__line{flex:1;width:2px;min-height:24px;background:var(--Gray-Gray-200, #c3c9d9);margin:4px 0;transition:background 0.2s}.v-step__line--done{background:var(--Primary-Primary-500, #f49a3d)}.v-step__label{padding-top:4px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);line-height:1.4}.v-step__label--current{color:var(--Gray-Gray-800, #1a2033);font-weight:var(--font-weight-bold, 700)}.v-step__label--completed{color:var(--Gray-Gray-500, #69738c)}`;
+
+const DropiVerticalSteps = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiStepClick = createEvent(this, "dropiStepClick");
+    }
+    /** Array of steps. Pass as JSON string or array */
+    steps = [];
+    /** Currently active step (1-based) */
+    currentStep = 1;
+    /** Allow clicking completed steps to navigate back */
+    clickable = false;
+    /** Show check icon inside completed step circles */
+    showCheckIcon = true;
+    /** Emitted when a step is clicked. e.detail = step number (1-based) */
+    dropiStepClick;
+    get parsedSteps() {
+        if (typeof this.steps === 'string') {
+            try {
+                return JSON.parse(this.steps);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.steps || [];
+    }
+    resolveState(index, step) {
+        if (step.state)
+            return step.state;
+        const n = index + 1;
+        if (n < this.currentStep)
+            return 'completed';
+        if (n === this.currentStep)
+            return 'current';
+        return 'pending';
+    }
+    render() {
+        const steps = this.parsedSteps;
+        return (h("div", { key: '4e23932cbc36257cf0f435735d95fc68be174cb7', 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)));
+        })));
+    }
+};
+DropiVerticalSteps.style = dropiVerticalStepsCss();
+
+export { DropiVerticalSteps as dropi_vertical_steps };

package/dist/esm/loader.js

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-Twbb5MNM.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-empty-state",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-accordion",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-input",[[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]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tabs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-toast",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-skeleton",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-tooltip",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]]], options);
+  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-card-section",[[513,"dropi-card-section",{"sectionTitle":[1,"section-title"],"description":[1],"typeElement":[1,"type-element"],"type":[1],"isChecked":[1028,"is-checked"]}]]],["dropi-checkbox-selection-list",[[513,"dropi-checkbox-selection-list",{"options":[1],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"showNotFound":[4,"show-not-found"],"notFoundMessage":[1,"not-found-message"],"multiSelect":[4,"multi-select"],"filterText":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-empty-state",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-search",[[513,"dropi-search",{"placeholder":[1],"value":[1025],"maxlength":[2],"showClear":[4,"show-clear"],"options":[1],"labelKey":[1,"label-key"],"multiSelect":[4,"multi-select"],"dropdownHeight":[1,"dropdown-height"],"label":[1],"open":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-accordion",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-alert",[[513,"dropi-alert",{"message":[1],"type":[1],"state":[1],"dismissable":[4],"showButton":[4,"show-button"],"buttonText":[1,"button-text"],"anchorText":[1,"anchor-text"],"anchorUrl":[1,"anchor-url"],"showAlert":[1028,"show-alert"]}]]],["dropi-chips",[[769,"dropi-chips",{"chipStyle":[1,"chip-style"],"type":[1],"urlImg":[1,"url-img"],"showIcon":[4,"show-icon"],"icon":[1]}]]],["dropi-dropdown",[[513,"dropi-dropdown",{"options":[1],"valueModel":[1,"value-model"],"imageModel":[1,"image-model"],"height":[1],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-favorite-button",[[513,"dropi-favorite-button",{"isFavorite":[1028,"is-favorite"],"hovered":[32]}]]],["dropi-image-miniature",[[513,"dropi-image-miniature",{"label":[1],"images":[1],"width":[1],"height":[1]}]]],["dropi-image-overlay",[[513,"dropi-image-overlay",{"visible":[1028],"images":[1],"activeIndex":[1026,"active-index"],"current":[32],"parsedImages":[32]},null,{"images":[{"imagesChanged":0}],"activeIndex":[{"indexChanged":0}],"visible":[{"visibleChanged":0}]}]]],["dropi-input",[[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]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"noLabels":[4,"no-labels"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-radio-selection-list",[[513,"dropi-radio-selection-list",{"options":[1],"selectedOption":[1032,"selected-option"],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"typeLayout":[1,"type-layout"],"filterText":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-steps",[[513,"dropi-steps",{"stepsCount":[2,"steps-count"],"showNumberOfStep":[4,"show-number-of-step"],"currentStep":[2,"current-step"],"stepLabels":[1,"step-labels"]}]]],["dropi-tabs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-time-line",[[513,"dropi-time-line",{"steps":[1]}]]],["dropi-toast",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-vertical-steps",[[513,"dropi-vertical-steps",{"steps":[1],"currentStep":[2,"current-step"],"clickable":[4],"showCheckIcon":[4,"show-check-icon"]}]]],["dropi-avatars",[[513,"dropi-avatars",{"image":[1],"alt":[1],"type":[1],"initials":[1]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-logo",[[513,"dropi-logo",{"urlLogo":[1,"url-logo"],"size":[1],"theme":[1]}]]],["dropi-lottie-loader",[[513,"dropi-lottie-loader",{"visible":[4],"loadingAnimation":[1,"loading-animation"],"loaderTitle":[1,"loader-title"],"message":[1]}]]],["dropi-otp-send-code",[[513,"dropi-otp-send-code",{"engine":[1],"labelContact":[1,"label-contact"],"showLabelContact":[4,"show-label-contact"],"errorMessage":[1,"error-message"],"digits":[32],"digitStates":[32],"countdown":[32],"canResend":[32],"error":[32]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-read-more",[[513,"dropi-read-more",{"text":[1],"maxWords":[2,"max-words"],"showSeeLess":[4,"show-see-less"],"expanded":[32]}]]],["dropi-simple-stepper",[[513,"dropi-simple-stepper",{"stepsCount":[2,"steps-count"],"typeStep":[1,"type-step"],"currentStep":[2,"current-step"],"labelStepper":[1,"label-stepper"],"flowMode":[1,"flow-mode"]}]]],["dropi-skeleton",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-tooltip",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type AlertState = 'success' | 'error' | 'warning' | 'info';
+export type AlertType = 'default' | 'flag';
+/**
+ * @component dropi-alert
+ * Alert banner with state variants (success/error/warning/info),
+ * optional action button, anchor link, and dismissable close icon.
+ */
+export declare class DropiAlert {
+    /** Alert message text (supports plain text) */
+    message: string;
+    /** Layout type: default (inline) | flag (accented left border) */
+    type: AlertType;
+    /** Semantic state */
+    state: AlertState;
+    /** Show the × close button */
+    dismissable: boolean;
+    /** Show action button */
+    showButton: boolean;
+    /** Action button label */
+    buttonText: string;
+    /** Anchor/link label */
+    anchorText: string;
+    /** Anchor href */
+    anchorUrl: string;
+    /** Whether the alert is visible */
+    showAlert: boolean;
+    /** Emitted when the alert is dismissed */
+    dropiClose: EventEmitter<void>;
+    /** Emitted when the action button is clicked */
+    dropiButtonClick: EventEmitter<void>;
+    /** Emitted when the anchor link is clicked */
+    dropiLinkClick: EventEmitter<void>;
+    render(): any;
+}

package/dist/types/components/dropi-avatars/dropi-avatars.d.ts

@@ -0,0 +1,17 @@
+export type AvatarType = 'users' | 'transport' | 'supplier' | 'payment' | 'counter';
+/**
+ * @component dropi-avatars
+ * Avatar component with image, initials fallback, and type-based size variants.
+ */
+export declare class DropiAvatars {
+    /** Image URL */
+    image: string;
+    /** Alt text for the image */
+    alt: string;
+    /** Size/context variant */
+    type: AvatarType;
+    /** Initials to show when no image (max 2 chars) */
+    initials: string;
+    private handleError;
+    render(): any;
+}

package/dist/types/components/dropi-card-section/dropi-card-section.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-card-section
+ * Section card with title, description and a switch or dropdown control.
+ */
+export declare class DropiCardSection {
+    /** Section title */
+    sectionTitle: string;
+    /** Section description */
+    description: string;
+    /** Control type on the right */
+    typeElement: 'dropdown' | 'switch';
+    /** Title size variant */
+    type: 'medium' | 'important';
+    /** Switch checked state */
+    isChecked: boolean;
+    /** Emitted when switch changes. e.detail = new boolean value */
+    dropiChange: EventEmitter<boolean>;
+    /** Emitted when dropdown icon is clicked */
+    dropiClick: EventEmitter<void>;
+    render(): any;
+}

package/dist/types/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CheckboxOption {
+    id: string | number;
+    name: string;
+    icon?: string;
+    [key: string]: any;
+}
+/**
+ * @component dropi-checkbox-selection-list
+ * Searchable list of checkbox options with multi-select support.
+ */
+export declare class DropiCheckboxSelectionList {
+    /** Options array or JSON string */
+    options: CheckboxOption[] | string;
+    /** Show search filter */
+    showFilter: boolean;
+    /** Search placeholder */
+    filterPlaceholder: string;
+    /** Show "no results" message */
+    showNotFound: boolean;
+    /** Empty state message */
+    notFoundMessage: string;
+    /** Allow multiple selection */
+    multiSelect: boolean;
+    private filterText;
+    private selected;
+    private parsedOptions;
+    /** Emitted when selection changes. e.detail = selected option ids */
+    dropiCheckedValues: EventEmitter<(string | number)[]>;
+    /** Emitted on search input. e.detail = search text */
+    dropiSearch: EventEmitter<string>;
+    optionsChanged(val: CheckboxOption[] | string): void;
+    componentWillLoad(): void;
+    private get filtered();
+    private toggle;
+    render(): any;
+}

package/dist/types/components/dropi-chips/dropi-chips.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ChipStyle = 'filters' | 'fill';
+export type ChipType = 'icon' | 'text' | 'avatar';
+/**
+ * @component dropi-chips
+ * Chip/tag-like element with optional icon, avatar, and close button.
+ * Use <slot> for the chip label text.
+ */
+export declare class DropiChips {
+    /** Visual style */
+    chipStyle: ChipStyle;
+    /** Content type */
+    type: ChipType;
+    /** Avatar image URL (when type = 'avatar') */
+    urlImg: string;
+    /** Show the close/remove icon */
+    showIcon: boolean;
+    /** Icon name (when type = 'icon') */
+    icon: string;
+    /** Emitted when the close icon is clicked */
+    dropiClose: EventEmitter<void>;
+    render(): any;
+}

package/dist/types/components/dropi-dropdown/dropi-dropdown.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface DropdownOption {
+    [key: string]: any;
+}
+/**
+ * @component dropi-dropdown
+ * Scrollable list with checkboxes for multi-selection.
+ * Pass options as an array (JS) or JSON string.
+ */
+export declare class DropiDropdown {
+    /** Options array or JSON string */
+    options: DropdownOption[] | string;
+    /** Property name to display as the option label */
+    valueModel: string;
+    /** Property name to use as the option image/avatar URL */
+    imageModel: string;
+    /** Max height of the list container (CSS value) */
+    height: string;
+    private selected;
+    private parsedOptions;
+    /** Emitted when selection changes. e.detail = selected items array */
+    dropiChange: EventEmitter<DropdownOption[]>;
+    optionsChanged(val: DropdownOption[] | string): void;
+    componentWillLoad(): void;
+    private isSelected;
+    private toggleOption;
+    render(): any;
+}

package/dist/types/components/dropi-favorite-button/dropi-favorite-button.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-favorite-button
+ * Heart toggle button for marking items as favorite.
+ */
+export declare class DropiFavoriteButton {
+    /** Whether the item is currently marked as favorite */
+    isFavorite: boolean;
+    /** Emitted when toggled. e.detail = new favorite state */
+    dropiToggleFavorite: EventEmitter<boolean>;
+    private hovered;
+    private toggle;
+    render(): any;
+}

package/dist/types/components/dropi-image-miniature/dropi-image-miniature.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-image-miniature
+ * Grid of image thumbnails with zoom-on-hover overlay trigger.
+ */
+export declare class DropiImageMiniature {
+    /** Optional label above the grid */
+    label: string;
+    /** Array of image URLs. Pass as JSON string or array */
+    images: string[] | string;
+    /** Thumbnail width (CSS value) */
+    width: string;
+    /** Thumbnail height (CSS value) */
+    height: string;
+    /** Emitted when a thumbnail is clicked. e.detail = { images, index } */
+    dropiImageClick: EventEmitter<{
+        images: string[];
+        index: number;
+    }>;
+    private get parsedImages();
+    private handleError;
+    render(): any;
+}

package/dist/types/components/dropi-image-overlay/dropi-image-overlay.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-image-overlay
+ * Full-screen image lightbox with prev/next navigation and thumbnails.
+ */
+export declare class DropiImageOverlay {
+    /** Whether the overlay is visible */
+    visible: boolean;
+    /** Images array or JSON string */
+    images: string[] | string;
+    /** Initially active image index */
+    activeIndex: number;
+    private current;
+    private parsedImages;
+    /** Emitted when overlay closes */
+    dropiClose: EventEmitter<void>;
+    imagesChanged(val: string[] | string): void;
+    indexChanged(val: number): void;
+    visibleChanged(val: boolean): void;
+    componentWillLoad(): void;
+    private close;
+    private prev;
+    private next;
+    private handleError;
+    render(): any;
+}

package/dist/types/components/dropi-logo/dropi-logo.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @component dropi-logo
+ * Displays the Dropi brand logo with size variants.
+ */
+export declare class DropiLogo {
+    /** Logo image URL */
+    urlLogo: string;
+    /** Size variant */
+    size: 'small' | 'large';
+    /** Theme (reserved for future use) */
+    theme: 'dark' | 'light';
+    private handleError;
+    render(): any;
+}

package/dist/types/components/dropi-lottie-loader/dropi-lottie-loader.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @component dropi-lottie-loader
+ * Full-screen or inline loading overlay with a Lottie animation.
+ */
+export declare class DropiLottieLoader {
+    /** Show or hide the loader */
+    visible: boolean;
+    /** Path to the Lottie JSON animation file */
+    loadingAnimation: string;
+    /** Title shown below the animation */
+    loaderTitle: string;
+    /** Descriptive message below the title */
+    message: string;
+    render(): any;
+}

package/dist/types/components/dropi-otp-send-code/dropi-otp-send-code.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-otp-send-code
+ * 6-digit OTP input with countdown timer and resend capability.
+ */
+export declare class DropiOtpSendCode {
+    /** Delivery method label */
+    engine: 'email' | 'sms' | '2fa';
+    /** Contact info (email/phone to show in label) */
+    labelContact: string;
+    /** Show contact label */
+    showLabelContact: boolean;
+    /** Error message to display */
+    errorMessage: string;
+    private digits;
+    private digitStates;
+    private countdown;
+    private canResend;
+    private error;
+    private inputs;
+    private timer;
+    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    dropiCodeCompleted: EventEmitter<string>;
+    /** Emitted when resend is requested */
+    dropiResend: EventEmitter<void>;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private startCountdown;
+    private handleInput;
+    private handleKeyDown;
+    private handlePaste;
+    render(): any;
+}

package/dist/types/components/dropi-paginator/dropi-paginator.d.ts

@@ -12,6 +12,8 @@ export declare class DropiPaginator {
     page: number;
     /** Max page buttons to show at once */
     maxPages: number;
+    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
+    noLabels: boolean;
     /** Whether to show the items-per-page selector */
     showPageSizeSelector: boolean;
     /** Options for items per page */

package/dist/types/components/dropi-radio-selection-list/dropi-radio-selection-list.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface RadioOption {
+    id: string | number;
+    name: string;
+    description?: string;
+    icon?: string;
+    [key: string]: any;
+}
+/**
+ * @component dropi-radio-selection-list
+ * List of radio button options with optional search filter.
+ */
+export declare class DropiRadioSelectionList {
+    /** Options array or JSON string */
+    options: RadioOption[] | string;
+    /** Selected option id */
+    selectedOption: string | number;
+    /** Show search box */
+    showFilter: boolean;
+    /** Search placeholder */
+    filterPlaceholder: string;
+    /** Show description below name */
+    typeLayout: 'description' | 'default';
+    private filterText;
+    private parsedOptions;
+    /** Emitted on selection change. e.detail = selected option id */
+    dropiChange: EventEmitter<string | number>;
+    /** Emitted on search. e.detail = search text */
+    dropiSearch: EventEmitter<string>;
+    optionsChanged(val: RadioOption[] | string): void;
+    componentWillLoad(): void;
+    private get filtered();
+    render(): any;
+}

package/dist/types/components/dropi-read-more/dropi-read-more.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @component dropi-read-more
+ * Truncates text to a word limit with an expandable "Ver más / Ver menos" toggle.
+ */
+export declare class DropiReadMore {
+    /** Full text to display */
+    text: string;
+    /** Maximum number of words before truncating */
+    maxWords: number;
+    /** Allow collapsing back after expanding */
+    showSeeLess: boolean;
+    private expanded;
+    private get words();
+    private get needsTruncation();
+    private get displayText();
+    render(): any;
+}