@dropi/ui 0.1.26 → 0.1.28

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiToastCss = () => `: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, #ffffff);box-shadow:0.5px -1px 7px 0px rgba(0, 0, 0, 0.06), 0px 4px 20px 0px rgba(0, 0, 0, 0.12);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, #69738c);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}`;
+
+const DropiToast = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Toast position */
+    position = 'top-right';
+    /** Default auto-close ms (0 = manual) */
+    life = 3000;
+    items = [];
+    idCounter = 0;
+    /** Show a toast */
+    async show(msg) {
+        console.log('DropiToast show() called with:', 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 (index.h("div", { key: '0ad8903921fd1bd773d206029bcc4e12e8b21349', class: `toast-container toast-container--${this.position}` }, (this.items ?? []).map(item => (index.h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, index.h("div", { class: `toast toast--${item.msg.severity}` }, index.h("div", { class: "toast-content" }, index.h("div", { class: "lottie-img" }, index.h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), index.h("div", { class: "info-container" }, index.h("p", { class: "title" }, item.msg.summary), item.msg.detail && index.h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (index.h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, index.h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-400" })))))))));
+    }
+};
+DropiToast.style = dropiToastCss();
+
+exports.dropi_toast = DropiToast;

package/dist/cjs/dropi-tooltip-v2.cjs.entry.js

@@ -0,0 +1,131 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiTooltipCss = () => `: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:var(--Gray-Gray-800);color:var(--Neutral-White, #ffffff);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 var(--Gray-Gray-800)}.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 var(--Gray-Gray-800)}.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 var(--Gray-Gray-800)}.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 var(--Gray-Gray-800)}`;
+
+const DropiTooltipV2 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Tooltip text */
+    text = '';
+    /** Tooltip title (bold, shown with label) */
+    title = '';
+    /** Tooltip label (shown below title) */
+    label = '';
+    /** Position: top | bottom | left | right */
+    position = 'bottom';
+    /** Position of the arrow: start | center | end (matches Angular `arrowPosition`) */
+    arrowPosition = 'center';
+    /** Trigger: hover | click | focus | timeout | static | hidden */
+    trigger = 'hover';
+    /** Max CSS width of the bubble */
+    maxWidth = '280px';
+    /** Min CSS width of the bubble (matches Angular `minWidth`) */
+    minWidth = '300px';
+    /** Delay in ms before showing */
+    showDelay = 0;
+    /** Disable the tooltip completely (matches Angular `disabled`) */
+    disabled = false;
+    /** Show the trigger icon (matches Angular `showIcon`) */
+    showIcon = true;
+    /** Show the close (X) button inside the bubble (matches Angular `showX`) */
+    showX = false;
+    /** Icon name from the dropi-icon sprite (matches Angular `iconName`) */
+    iconName = 'Tooltip';
+    /** Icon color token or hex (matches Angular `iconColor`) */
+    iconColor = '#7B8190';
+    /** Icon size in px without unit (matches Angular `iconSize`) */
+    iconSize = '14';
+    visible = false;
+    showTimer = null;
+    timeoutTimer = null;
+    componentDidLoad() {
+        if (this.trigger === 'static')
+            this.show();
+        if (this.trigger === 'timeout')
+            this.showWithTimeout();
+    }
+    show = () => {
+        if (this.disabled || this.trigger === 'hidden')
+            return;
+        const content = this.text || this.title || this.label;
+        if (!content.trim())
+            return;
+        if (this.showDelay > 0) {
+            this.showTimer = setTimeout(() => { this.visible = true; }, this.showDelay);
+        }
+        else {
+            this.visible = true;
+        }
+    };
+    hide = () => {
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        if (this.timeoutTimer) {
+            clearTimeout(this.timeoutTimer);
+            this.timeoutTimer = null;
+        }
+        this.visible = false;
+    };
+    showWithTimeout() {
+        this.show();
+        this.timeoutTimer = setTimeout(() => this.hide(), 6000);
+    }
+    handleMouseEnter = () => {
+        if (this.trigger !== 'hover')
+            return;
+        this.show();
+    };
+    handleMouseLeave = () => {
+        if (this.trigger !== 'hover')
+            return;
+        setTimeout(() => this.hide(), 10);
+    };
+    handleClick = () => {
+        if (this.trigger !== 'click')
+            return;
+        this.visible ? this.hide() : this.show();
+    };
+    handleFocusin = () => {
+        if (this.trigger !== 'focus')
+            return;
+        this.show();
+    };
+    handleFocusout = () => {
+        if (this.trigger !== 'focus')
+            return;
+        this.hide();
+    };
+    handleClose = () => {
+        if (this.trigger === 'static') {
+            this.trigger = 'hover';
+            this.showX = false;
+        }
+        this.hide();
+    };
+    get displayContent() {
+        if (this.text)
+            return this.text;
+        if (this.title && this.label)
+            return `${this.title}\n${this.label}`;
+        return this.title || this.label || '';
+    }
+    render() {
+        const bubbleStyle = { maxWidth: this.maxWidth };
+        if (this.minWidth)
+            bubbleStyle.minWidth = this.minWidth;
+        return (index.h("div", { key: '85f49bcb2af567a8fb70cd92afab893a2e0bf567', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (index.h("dropi-icon", { key: 'f40ebe0c12bdfa251cbe6086f7ea432aed0124fa', name: this.iconName, width: `${this.iconSize}px`, height: `${this.iconSize}px`, color: this.iconColor })), index.h("slot", { key: '77d2aa944f57cc5f858bbff97f88dfda6e71e088' }), this.displayContent && (index.h("div", { key: '4fcbbbf1a3b163ad2992efd8c8dfbef695f4f422', class: {
+                'tooltip-bubble': true,
+                [`tooltip-bubble--${this.position}`]: true,
+                [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,
+                'tooltip-bubble--visible': this.visible,
+            }, style: bubbleStyle, role: "tooltip" }, this.showX && (index.h("button", { key: '48428c1dcdd6c52f8a0b26641a016a00cf04444d', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, index.h("dropi-icon", { key: '6c870fc88739ba5e09c1f77eda783d21af476f98', name: "Close-small", width: "12px", height: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && index.h("strong", { key: 'c501f266a5d3cc4250f9b205f8fa641c1f9be7ad', class: "tooltip-title" }, this.title), this.label && !this.text && index.h("span", { key: '6fb281665f9c84a7cb1f86bf8718da8ef5b95204', class: "tooltip-label" }, this.label), this.text && index.h("span", { key: '4d1a3445cb4b5361e8604404bfb970fc0e9ea289' }, this.text), index.h("span", { key: 'f7d0ac1b155d486c55cbeebc63cca32838e25811', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+    }
+};
+DropiTooltipV2.style = dropiTooltipCss();
+
+exports.dropi_tooltip_v2 = DropiTooltipV2;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiTooltipCss = () => `:host{display:inline-block;position:relative}.tooltip-simple-bubble{position:absolute;background:var(--Gray-Gray-800, #1e293b);color:white;padding:4px 8px;border-radius:4px;font-size:12px;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:1000}:host(:hover) .tooltip-simple-bubble{opacity:1}.tooltip-simple--outlined .tooltip-simple-bubble{border:1px solid var(--Gray-Gray-300);background:white;color:var(--Gray-Gray-800)}`;
+
+const DropiTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Tooltip text */
+    text = '';
+    /** Whether the tooltip has an outline style (matches Angular `outlined`) */
+    outlined = false;
+    render() {
+        return (index.h("div", { key: '0b14943b628c231fbb530620e7829f70e6099c7a', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, index.h("slot", { key: 'bf0245c6fab0ba938834d2d3e84ccaa9cb14f5c8' }), this.text && (index.h("div", { key: 'e1e33acf8628f79b36c5cc66c7076a03ce8167f7', class: "tooltip-simple-bubble" }, this.text))));
+    }
+};
+DropiTooltip.style = dropiTooltipCss();
+
+exports.dropi_tooltip = DropiTooltip;

package/dist/cjs/dropi-ui.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('dropi-ui.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy(JSON.parse("[[\"dropi-icon.cjs\",[[513,\"dropi-icon\",{\"name\":[1],\"width\":[1],\"height\":[1],\"color\":[1]},null,{\"color\":[{\"colorChanged\":0}]}]]],[\"dropi-table.cjs\",[[513,\"dropi-table\",{\"columns\":[1],\"rows\":[1],\"showCheckbox\":[4,\"show-checkbox\"],\"loading\":[4],\"emptyMessage\":[1,\"empty-message\"],\"title\":[1],\"showSearch\":[4,\"show-search\"],\"showColumnSelector\":[4,\"show-column-selector\"],\"showPaginator\":[4,\"show-paginator\"],\"pageSizes\":[1,\"page-sizes\"],\"currentPage\":[1026,\"current-page\"],\"totalPages\":[2,\"total-pages\"],\"rowActions\":[1,\"row-actions\"],\"headers\":[1],\"data\":[1],\"selectedRowIds\":[16],\"childData\":[1,\"child-data\"],\"visibleRowsChildrens\":[1,\"visible-rows-childrens\"],\"dropiTableConfiguration\":[8,\"dropi-table-configuration\"],\"dropiTableBackendParams\":[8,\"dropi-table-backend-params\"],\"isCursorPagination\":[4,\"is-cursor-pagination\"],\"parsedColumns\":[32],\"parsedRows\":[32],\"parsedPageSizes\":[32],\"parsedRowActions\":[32],\"sortKey\":[32],\"sortDir\":[32],\"sortAsc\":[32],\"selectedKeys\":[32],\"searchTerm\":[32],\"pageSize\":[32],\"showColumnMenu\":[32],\"hiddenColumns\":[32],\"openActionRow\":[32]},null,{\"columns\":[{\"columnsChanged\":0}],\"rows\":[{\"rowsChanged\":0}],\"pageSizes\":[{\"pageSizesChanged\":0}],\"rowActions\":[{\"rowActionsChanged\":0}],\"headers\":[{\"headersChanged\":0}],\"data\":[{\"dataChanged\":0}]}]]],[\"dropi-alert-modal.cjs\",[[772,\"dropi-alert-modal\",{\"visible\":[1544],\"type\":[1025],\"tittle\":[1025],\"message\":[1025],\"primaryButton\":[1025,\"primary-button\"],\"secondaryButton\":[1025,\"secondary-button\"],\"loading\":[4],\"closable\":[1028],\"displayButtons\":[1028,\"display-buttons\"],\"loadingTitle\":[1025,\"loading-title\"],\"loadingMessage\":[1025,\"loading-message\"],\"isStep\":[4,\"is-step\"],\"baseZIndex\":[2,\"base-z-index\"],\"params\":[8],\"show\":[64],\"hide\":[64]},null,{\"params\":[{\"paramsChanged\":0}]}]]],[\"dropi-file-upload.cjs\",[[513,\"dropi-file-upload\",{\"title\":[1],\"label\":[1],\"textDropZone\":[1,\"text-drop-zone\"],\"textButton\":[1,\"text-button\"],\"previewType\":[1,\"preview-type\"],\"multiple\":[4],\"maxFiles\":[2,\"max-files\"],\"maxFileSizeMB\":[2,\"max-file-size-m-b\"],\"accept\":[1],\"onlyView\":[4,\"only-view\"],\"viewDragAndDrop\":[4,\"view-drag-and-drop\"],\"dragAndDropSize\":[1,\"drag-and-drop-size\"],\"selectedFiles\":[32],\"error\":[32],\"errorMessage\":[32],\"dragging\":[32]}]]],[\"dropi-card-product.cjs\",[[513,\"dropi-card-product\",{\"image\":[1],\"productName\":[1,\"product-name\"],\"salePrice\":[2,\"sale-price\"],\"suggestedPrice\":[2,\"suggested-price\"],\"currency\":[1],\"supplier\":[1],\"category\":[1],\"stock\":[2],\"supplierCategory\":[1,\"supplier-category\"],\"showFavorite\":[4,\"show-favorite\"],\"isFavorite\":[1028,\"is-favorite\"],\"showAddButton\":[4,\"show-add-button\"]}]]],[\"dropi-card-section.cjs\",[[513,\"dropi-card-section\",{\"title\":[1],\"description\":[1],\"typeElement\":[1,\"type-element\"],\"type\":[1],\"isChecked\":[1028,\"is-checked\"]}]]],[\"dropi-checkbox-selection-list.cjs\",[[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\"],\"searchDelay\":[2,\"search-delay\"],\"filterText\":[32],\"selected\":[32],\"parsedOptions\":[32]},null,{\"options\":[{\"optionsChanged\":0}]}]]],[\"dropi-dropdown.cjs\",[[513,\"dropi-dropdown\",{\"options\":[1],\"valueModel\":[1,\"value-model\"],\"height\":[1],\"isInSelect\":[4,\"is-in-select\"],\"parameters\":[16],\"selected\":[32],\"parsedOptions\":[32]},null,{\"options\":[{\"optionsChanged\":0}]}]]],[\"dropi-empty-state.cjs\",[[769,\"dropi-empty-state\",{\"title\":[1],\"description\":[1],\"imageUrl\":[1,\"image-url\"],\"imageAlt\":[1,\"image-alt\"],\"buttonText\":[1,\"button-text\"],\"buttonIcon\":[1,\"button-icon\"],\"dropiIcon\":[1,\"dropi-icon\"],\"buttonSeverity\":[1,\"button-severity\"]}]]],[\"dropi-languages-selector.cjs\",[[513,\"dropi-languages-selector\",{\"languages\":[1],\"selectedLang\":[1025,\"selected-lang\"],\"isOpen\":[32],\"parsedLanguages\":[32],\"currentLang\":[32]},null,{\"languages\":[{\"languagesChanged\":0}],\"selectedLang\":[{\"selectedLangChanged\":0}]}]]],[\"dropi-search.cjs\",[[513,\"dropi-search\",{\"type\":[1],\"placeholder\":[1],\"textInput\":[1025,\"text-input\"],\"typeInput\":[1,\"type-input\"],\"maxLength\":[2,\"max-length\"],\"showIcon\":[4,\"show-icon\"],\"showClear\":[4,\"show-clear\"],\"dataToSearch\":[1,\"data-to-search\"],\"dataName\":[1,\"data-name\"],\"position\":[1],\"multipleSelectModel\":[4,\"multiple-select-model\"],\"heightOverlay\":[2,\"height-overlay\"],\"label\":[1],\"model\":[1025],\"open\":[32],\"selected\":[32],\"parsedOptions\":[32]},null,{\"dataToSearch\":[{\"optionsChanged\":0}]}]]],[\"dropi-accordion-item.cjs\",[[769,\"dropi-accordion-item\",{\"sectionTitle\":[1,\"section-title\"],\"index\":[2],\"open\":[1540],\"disabled\":[4],\"preIcon\":[1,\"pre-icon\"],\"contentHeight\":[32]},null,{\"open\":[{\"openChanged\":0}]}]]],[\"dropi-banner-external.cjs\",[[513,\"dropi-banner-external\",{\"imageUrl\":[1,\"image-url\"],\"link\":[1],\"alt\":[1],\"backgroundColor\":[1,\"background-color\"],\"slugName\":[1,\"slug-name\"],\"viewOnWhiteBrand\":[4,\"view-on-white-brand\"],\"viewOnlyCountries\":[16],\"closed\":[32]}]]],[\"dropi-breadcrumb.cjs\",[[513,\"dropi-breadcrumb\",{\"items\":[1],\"homeRoute\":[1,\"home-route\"],\"homeIconName\":[1,\"home-icon-name\"],\"lastItemClickable\":[4,\"last-item-clickable\"]}]]],[\"dropi-card-checkbox.cjs\",[[513,\"dropi-card-checkbox\",{\"type\":[1],\"state\":[1025],\"title\":[1],\"description\":[1],\"extraInfo\":[1,\"extra-info\"],\"extraInfoDescription\":[1,\"extra-info-description\"],\"disabled\":[4]}]]],[\"dropi-chips.cjs\",[[769,\"dropi-chips\",{\"customStyle\":[1,\"custom-style\"],\"type\":[1],\"urlImg\":[1,\"url-img\"],\"showIcon\":[4,\"show-icon\"],\"icon\":[1]}]]],[\"dropi-city-selector.cjs\",[[513,\"dropi-city-selector\",{\"options\":[1],\"selectedCities\":[1025,\"selected-cities\"],\"placeholder\":[1],\"disabled\":[4],\"isOpen\":[32],\"selected\":[32],\"parsedOptions\":[32],\"searchTerm\":[32]},[[4,\"click\",\"handleDocClick\"]],{\"options\":[{\"optionsChanged\":0}],\"selectedCities\":[{\"selectedChanged\":0}]}]]],[\"dropi-country-selector.cjs\",[[513,\"dropi-country-selector\",{\"label\":[1],\"placeholder\":[1],\"currentSelection\":[1025,\"current-selection\"],\"disabled\":[4],\"showObligatory\":[4,\"show-obligatory\"],\"hasError\":[4,\"has-error\"],\"textHelper\":[1,\"text-helper\"],\"searchTerm\":[1025,\"search-term\"],\"selectProperties\":[8,\"select-properties\"],\"isOpen\":[32],\"selected\":[32]},[[4,\"click\",\"handleDocClick\"]],{\"currentSelection\":[{\"currentSelectionChanged\":0}],\"selectProperties\":[{\"selectPropertiesChanged\":0}]}]]],[\"dropi-date-picker.cjs\",[[513,\"dropi-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"startDate\":[1025,\"start-date\"],\"endDate\":[1025,\"end-date\"],\"selectionMode\":[1,\"selection-mode\"],\"minDate\":[1,\"min-date\"],\"maxDate\":[1,\"max-date\"],\"label\":[1],\"placeholder\":[1],\"disabled\":[4],\"isInvalid\":[4,\"is-invalid\"],\"loading\":[4],\"open\":[32],\"viewYear\":[32],\"viewMonth\":[32],\"hoverDate\":[32]},[[4,\"click\",\"handleDocClick\"]]]]],[\"dropi-drawer.cjs\",[[769,\"dropi-drawer\",{\"drawerTitle\":[1,\"drawer-title\"],\"drawerIsOpen\":[1032,\"drawer-is-open\"],\"open\":[1032],\"position\":[1],\"size\":[1],\"width\":[1],\"height\":[1],\"headless\":[4],\"closeOnBackdrop\":[4,\"close-on-backdrop\"]},null,{\"open\":[{\"openChanged\":0}],\"drawerIsOpen\":[{\"openChanged\":0}]}]]],[\"dropi-favorite-button.cjs\",[[513,\"dropi-favorite-button\",{\"isFavorite\":[1028,\"is-favorite\"],\"hovered\":[32]}]]],[\"dropi-file-upload-progress-bar.cjs\",[[513,\"dropi-file-upload-progress-bar\",{\"textFile\":[1,\"text-file\"],\"progress\":[2],\"type\":[1025],\"urlImage\":[1,\"url-image\"],\"isPreview\":[4,\"is-preview\"],\"disabled\":[4],\"fileExtension\":[32]},null,{\"progress\":[{\"handleProgress\":0}],\"textFile\":[{\"handleTextFile\":0}]}]]],[\"dropi-image-miniature.cjs\",[[513,\"dropi-image-miniature\",{\"label\":[1],\"images\":[1],\"width\":[1],\"height\":[1]}]]],[\"dropi-image-overlay.cjs\",[[513,\"dropi-image-overlay\",{\"visible\":[1032],\"images\":[1],\"activeIndex\":[1026,\"active-index\"],\"current\":[32],\"parsedImages\":[32]},null,{\"images\":[{\"imagesChanged\":0}],\"activeIndex\":[{\"indexChanged\":0}],\"visible\":[{\"visibleChanged\":0}]}]]],[\"dropi-media-player.cjs\",[[513,\"dropi-media-player\",{\"src\":[1],\"mediaType\":[1,\"media-type\"],\"poster\":[1],\"autoplay\":[4],\"loop\":[4],\"initialVolume\":[2,\"initial-volume\"],\"format\":[1],\"playing\":[32],\"currentTimeStr\":[32],\"durationStr\":[32],\"duration\":[32],\"volume\":[32],\"muted\":[32],\"showControls\":[32],\"isFullscreen\":[32],\"progress\":[32],\"speed\":[32],\"showSpeedMenu\":[32],\"showVolumeSlider\":[32]},[[4,\"click\",\"handleDocClick\"]]]]],[\"dropi-navbar.cjs\",[[513,\"dropi-navbar\",{\"logoUrl\":[1,\"logo-url\"],\"logoAlt\":[1,\"logo-alt\"],\"data\":[1],\"title\":[1],\"activeId\":[1,\"active-id\"],\"userName\":[1,\"user-name\"],\"userAvatar\":[1,\"user-avatar\"],\"notifications\":[2],\"showMenuToggle\":[4,\"show-menu-toggle\"]}]]],[\"dropi-phone-input.cjs\",[[513,\"dropi-phone-input\",{\"codArea\":[1025,\"cod-area\"],\"ngModelPhone\":[1025,\"ng-model-phone\"],\"phoneNumberPlaceholder\":[1,\"phone-number-placeholder\"],\"disabledInput\":[4,\"disabled-input\"],\"isValidPhone\":[4,\"is-valid-phone\"],\"validateOnInit\":[4,\"validate-on-init\"],\"selectedOption\":[1032,\"selected-option\"],\"selectProperties\":[8,\"select-properties\"],\"open\":[32]},[[8,\"click\",\"handleWindowClick\"]],{\"codArea\":[{\"codAreaChanged\":0}],\"selectedOption\":[{\"selectedOptionChanged\":0}]}]]],[\"dropi-radio-selection-list.cjs\",[[513,\"dropi-radio-selection-list\",{\"options\":[1],\"selectedOption\":[1032,\"selected-option\"],\"showFilter\":[4,\"show-filter\"],\"filterPlaceholder\":[1,\"filter-placeholder\"],\"alwaysShowDescription\":[4,\"always-show-description\"],\"typeLayout\":[1,\"type-layout\"],\"searchDelay\":[2,\"search-delay\"],\"filterText\":[32],\"parsedOptions\":[32]},null,{\"options\":[{\"optionsChanged\":0}]}]]],[\"dropi-select.cjs\",[[577,\"dropi-select\",{\"label\":[1025],\"placeholder\":[1025],\"options\":[1040],\"name\":[1],\"disabled\":[516],\"hasError\":[1028,\"has-error\"],\"errorText\":[1025,\"error-text\"],\"textHelper\":[1025,\"text-helper\"],\"showObligatory\":[1028,\"show-obligatory\"],\"searchEnabled\":[1028,\"search-enabled\"],\"multiSelect\":[1028,\"multi-select\"],\"dropdownType\":[1028,\"dropdown-type\"],\"showCountryFlags\":[4,\"show-country-flags\"],\"radioOptions\":[1028,\"radio-options\"],\"placeHolderSearch\":[1,\"place-holder-search\"],\"preIcon\":[1025,\"pre-icon\"],\"defaultSelectedId\":[1032,\"default-selected-id\"],\"selectedOption\":[1040],\"overlayClass\":[1,\"overlay-class\"],\"selectProperties\":[8,\"select-properties\"],\"isOpen\":[32],\"_selectedOption\":[32],\"multiSelected\":[32],\"filteredOptions\":[32],\"searchTerm\":[32],\"dropdownStyle\":[32],\"setById\":[64],\"setByLabel\":[64],\"clearSelection\":[64],\"resetMultiSelect\":[64]},[[4,\"click\",\"handleOutsideClick\"]],{\"selectProperties\":[{\"selectPropertiesChanged\":0}],\"options\":[{\"optionsChanged\":0}],\"defaultSelectedId\":[{\"defaultChanged\":0}],\"selectedOption\":[{\"valueChanged\":0}]}]]],[\"dropi-sidebar.cjs\",[[513,\"dropi-sidebar\",{\"sideBarProperties\":[1025,\"side-bar-properties\"],\"parsedProperties\":[32]},null,{\"sideBarProperties\":[{\"watchPropHandler\":0}]}]]],[\"dropi-steps.cjs\",[[513,\"dropi-steps\",{\"stepsCount\":[2,\"steps-count\"],\"showNumberOfStep\":[4,\"show-number-of-step\"],\"currentStep\":[2,\"current-step\"],\"stepLabels\":[1,\"step-labels\"],\"state\":[1]}]]],[\"dropi-tabs.cjs\",[[513,\"dropi-tabs\",{\"configuration\":[1],\"activeTab\":[1544,\"active-tab\"],\"showIcon\":[4,\"show-icon\"],\"stopAction\":[4,\"stop-action\"],\"parsedTabs\":[32]},null,{\"configuration\":[{\"tabsChanged\":0}]}]]],[\"dropi-text-area.cjs\",[[577,\"dropi-text-area\",{\"id\":[1025],\"name\":[1],\"label\":[1025],\"placeholder\":[1025],\"value\":[1025],\"maxLength\":[1026,\"max-length\"],\"minLength\":[1026,\"min-length\"],\"rows\":[1026],\"resize\":[1025],\"disabled\":[516],\"required\":[516],\"showObligatoryAsterisk\":[4,\"show-obligatory-asterisk\"],\"textHelper\":[1025,\"text-helper\"],\"hasError\":[4,\"has-error\"],\"textAreaProperties\":[16],\"touched\":[32]},null,{\"textAreaProperties\":[{\"textAreaPropertiesChanged\":0}],\"value\":[{\"valueChanged\":0}]}]]],[\"dropi-time-line.cjs\",[[513,\"dropi-time-line\",{\"steps\":[1]}]]],[\"dropi-toast.cjs\",[[513,\"dropi-toast\",{\"position\":[1],\"life\":[2],\"items\":[32],\"show\":[64],\"clear\":[64]}]]],[\"dropi-tooltip-v2.cjs\",[[769,\"dropi-tooltip-v2\",{\"text\":[1],\"title\":[1],\"label\":[1],\"position\":[1],\"arrowPosition\":[1,\"arrow-position\"],\"trigger\":[1025],\"maxWidth\":[1,\"max-width\"],\"minWidth\":[1,\"min-width\"],\"showDelay\":[2,\"show-delay\"],\"disabled\":[4],\"showIcon\":[4,\"show-icon\"],\"showX\":[1028,\"show-x\"],\"iconName\":[1,\"icon-name\"],\"iconColor\":[1,\"icon-color\"],\"iconSize\":[1,\"icon-size\"],\"visible\":[32]}]]],[\"dropi-vertical-steps.cjs\",[[513,\"dropi-vertical-steps\",{\"steps\":[1],\"currentStep\":[2,\"current-step\"],\"clickable\":[4],\"showCheckIcon\":[4,\"show-check-icon\"]}]]],[\"dropi-youtube-lazy-video.cjs\",[[513,\"dropi-youtube-lazy-video\",{\"videoId\":[1,\"video-id\"],\"thumbnailSrc\":[1,\"thumbnail-src\"],\"videoTitle\":[1,\"video-title\"],\"isPlaying\":[32]}]]],[\"dropi-accordion.cjs\",[[769,\"dropi-accordion\",{\"multiple\":[4]}]]],[\"dropi-alert-legacy.cjs\",[[513,\"dropi-alert-legacy\",{\"visible\":[1028],\"message\":[1],\"type\":[1],\"autoClose\":[4,\"auto-close\"]}]]],[\"dropi-badge.cjs\",[[513,\"dropi-badge\",{\"state\":[1]}]]],[\"dropi-badge-legacy.cjs\",[[513,\"dropi-badge-legacy\",{\"type\":[1],\"state\":[1],\"variant\":[1],\"count\":[2]}]]],[\"dropi-carousel.cjs\",[[769,\"dropi-carousel\",{\"value\":[1],\"page\":[1026],\"numVisible\":[2,\"num-visible\"],\"numScroll\":[2,\"num-scroll\"],\"orientation\":[1],\"showNavigators\":[8,\"show-navigators\"],\"showIndicators\":[8,\"show-indicators\"],\"autoplayInterval\":[2,\"autoplay-interval\"],\"circular\":[8],\"parsedValue\":[32],\"internalPage\":[32],\"isAnimating\":[32],\"totalPages\":[32]},null,{\"value\":[{\"handleValue\":0}],\"page\":[{\"handlePage\":0}]}]]],[\"dropi-color-picker.cjs\",[[513,\"dropi-color-picker\",{\"currentColor\":[1025,\"current-color\"],\"position\":[1],\"color\":[32],\"hue\":[32],\"saturation\":[32],\"currentVal\":[32],\"opacity\":[32],\"showEdit\":[32]},null,{\"value\":[{\"onValueChange\":0}]}]]],[\"dropi-date-picker-range.cjs\",[[513,\"dropi-date-picker-range\",{\"startDate\":[1025,\"start-date\"],\"endDate\":[1025,\"end-date\"],\"showLabel\":[4,\"show-label\"],\"placeholder\":[1],\"loading\":[4],\"maxDaysRange\":[2,\"max-days-range\"],\"hideTodayRangeShortcut\":[4,\"hide-today-range-shortcut\"],\"start\":[32],\"end\":[32],\"activeRange\":[32],\"showWarning\":[32]},null,{\"startDate\":[{\"onStartPropChange\":0}],\"endDate\":[{\"onEndPropChange\":0}]}]]],[\"dropi-logo.cjs\",[[513,\"dropi-logo\",{\"urlLogo\":[1,\"url-logo\"],\"size\":[1],\"theme\":[1]}]]],[\"dropi-lottie-loader.cjs\",[[513,\"dropi-lottie-loader\",{\"visible\":[4],\"loadingAnimation\":[1,\"loading-animation\"],\"title\":[1],\"message\":[1]}]]],[\"dropi-otp-send-code.cjs\",[[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.cjs\",[[577,\"dropi-radio-button\",{\"label\":[1],\"name\":[1],\"id\":[1],\"checked\":[1540],\"resetTrigger\":[4,\"reset-trigger\"]},null,{\"resetTrigger\":[{\"onResetTrigger\":0}]}]]],[\"dropi-read-more.cjs\",[[513,\"dropi-read-more\",{\"text\":[1],\"maxWords\":[2,\"max-words\"],\"showSeeLess\":[4,\"show-see-less\"],\"textStyle\":[1,\"text-style\"],\"buttonStyle\":[1,\"button-style\"],\"expanded\":[32]}]]],[\"dropi-simple-stepper.cjs\",[[513,\"dropi-simple-stepper\",{\"stepsCount\":[2,\"steps-count\"],\"typeStep\":[1,\"type-step\"],\"currentStep\":[2,\"current-step\"],\"labelStepper\":[1,\"label-stepper\"],\"flowMode\":[1,\"flow-mode\"],\"white_brand\":[1]}]]],[\"dropi-skeleton.cjs\",[[513,\"dropi-skeleton\",{\"variant\":[1],\"width\":[1],\"height\":[1],\"radius\":[1],\"lines\":[2],\"baseColor\":[1,\"base-color\"]}]]],[\"dropi-tag-type-product.cjs\",[[513,\"dropi-tag-type-product\",{\"label\":[1]}]]],[\"dropi-tooltip.cjs\",[[769,\"dropi-tooltip\",{\"text\":[1],\"outlined\":[4]}]]],[\"dropi-alert.cjs\",[[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\"],\"textLink\":[1,\"text-link\"],\"linkUrl\":[1,\"link-url\"],\"clickedText\":[1,\"clicked-text\"]}]]],[\"dropi-ilustration-icon.cjs\",[[513,\"dropi-ilustration-icon\",{\"type\":[1],\"state\":[1],\"stateInsignia\":[1,\"state-insignia\"],\"tagProduct\":[4,\"tag-product\"]}]]],[\"dropi-avatars.cjs\",[[513,\"dropi-avatars\",{\"image\":[1],\"alt\":[1],\"type\":[1],\"initials\":[1]}]]],[\"dropi-modal.cjs\",[[769,\"dropi-modal\",{\"visible\":[1544],\"header\":[1],\"showCloseIcon\":[4,\"show-close-icon\"],\"dismissable\":[4],\"dismissableMask\":[4,\"dismissable-mask\"],\"dismissible\":[4],\"closeOnEscape\":[4,\"close-on-escape\"],\"modal\":[4],\"closable\":[4],\"blockScroll\":[4,\"block-scroll\"],\"showHeader\":[4,\"show-header\"],\"showFooter\":[4,\"show-footer\"],\"position\":[1],\"size\":[1],\"styleClass\":[1,\"style-class\"],\"maxWidth\":[1,\"max-width\"],\"autoZIndex\":[4,\"auto-z-index\"],\"baseZIndex\":[2,\"base-z-index\"],\"transitionOptions\":[1,\"transition-options\"],\"enableBeforeClose\":[4,\"enable-before-close\"],\"draggable\":[4],\"resizable\":[4],\"isOpen\":[32],\"isClosing\":[32],\"mounted\":[32],\"hide\":[64],\"show\":[64]},null,{\"visible\":[{\"visibleChanged\":0}]}]]],[\"dropi-switch.cjs\",[[577,\"dropi-switch\",{\"isChecked\":[1540,\"is-checked\"],\"disabled\":[516]}]]],[\"dropi-country-flags.cjs\",[[513,\"dropi-country-flags\",{\"country\":[1],\"customStyle\":[1,\"custom-style\"],\"width\":[1],\"height\":[1]}]]],[\"dropi-input_3.cjs\",[[577,\"dropi-input\",{\"id\":[1025],\"name\":[1],\"label\":[1025],\"placeholder\":[1025],\"value\":[1025],\"maxLength\":[1026,\"max-length\"],\"disabled\":[516],\"required\":[516],\"showObligatoryAsterisk\":[1028,\"show-obligatory-asterisk\"],\"fixedLabel\":[4,\"fixed-label\"],\"inputMode\":[1025,\"input-mode\"],\"passwordInput\":[1028,\"password-input\"],\"isMoneyInput\":[1028,\"is-money-input\"],\"isThousandSeparator\":[1028,\"is-thousand-separator\"],\"isNumericInput\":[1028,\"is-numeric-input\"],\"allowDecimals\":[1028,\"allow-decimals\"],\"isLettersOnly\":[1028,\"is-letters-only\"],\"icon\":[1025],\"iconColor\":[1025,\"icon-color\"],\"hasError\":[1028,\"has-error\"],\"textHelper\":[1025,\"text-helper\"],\"showHelperOnlyOnError\":[1028,\"show-helper-only-on-error\"],\"inputProperties\":[8,\"input-properties\"],\"showPassword\":[32],\"touched\":[32]},null,{\"inputProperties\":[{\"inputPropertiesChanged\":0}],\"value\":[{\"valueChanged\":0}],\"disabled\":[{\"disabledChanged\":0}]}],[513,\"dropi-paginator\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[1538,\"current-page\"],\"disabled\":[4],\"maxVisiblePages\":[2,\"max-visible-pages\"],\"isNotTotalPages\":[4,\"is-not-total-pages\"],\"noLabels\":[4,\"no-labels\"]}],[513,\"dropi-tag\",{\"type\":[513],\"state\":[513],\"showIcon\":[4,\"show-icon\"],\"icon\":[513],\"text\":[513]},null,{\"type\":[{\"propsChanged\":0}],\"state\":[{\"propsChanged\":0}]}]]],[\"dropi-button.cjs\",[[769,\"dropi-button\",{\"type\":[1],\"severity\":[1],\"size\":[1],\"state\":[1],\"fullWidth\":[516,\"full-width\"],\"preIcon\":[1,\"pre-icon\"],\"postIcon\":[1,\"post-icon\"],\"customIconColor\":[1,\"custom-icon-color\"],\"text\":[1]}]]],[\"dropi-checkbox.cjs\",[[577,\"dropi-checkbox\",{\"checked\":[1540],\"disabled\":[516]}]]]]"), options);
+});
+
+exports.setNonce = index.setNonce;

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.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, #ffffff);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.v-step__circle--current{background:var(--Neutral-White, #ffffff);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, #1f2433);font-weight:var(--font-weight-bold, 700)}.v-step__label--completed{color:var(--Gray-Gray-500, #69738c)}`;
+
+const DropiVerticalSteps = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.stepClick = index.createEvent(this, "stepClick", 7);
+    }
+    /** 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) */
+    stepClick;
+    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 (index.h("div", { key: 'c1ffd563da957d398f064ee0423f50f21d7e45b6', class: "vertical-steps" }, steps.map((step, i) => {
+            const state = this.resolveState(i, step);
+            const isLast = i === steps.length - 1;
+            const isClickable = this.clickable && state === 'completed';
+            return (index.h("div", { class: { 'v-step': true, 'v-step--clickable': isClickable }, key: i, onClick: () => isClickable && this.stepClick.emit(i + 1) }, index.h("div", { class: "v-step__indicator" }, index.h("div", { class: { 'v-step__circle': true, [`v-step__circle--${state}`]: true } }, state === 'completed' && this.showCheckIcon ? (index.h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (index.h("span", { class: "v-step__number" }, i + 1))), !isLast && index.h("div", { class: { 'v-step__line': true, 'v-step__line--done': state === 'completed' } })), index.h("span", { class: { 'v-step__label': true, [`v-step__label--${state}`]: true } }, step.label)));
+        })));
+    }
+};
+DropiVerticalSteps.style = dropiVerticalStepsCss();
+
+exports.dropi_vertical_steps = DropiVerticalSteps;

package/dist/cjs/dropi-youtube-lazy-video.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiYoutubeLazyVideoCss = () => `:host{display:block;width:100%}.video-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:var(--Neutral-Black);overflow:hidden;border-radius:12px}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}.thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}.thumbnail:hover img{transform:scale(1.05)}.play-button{position:absolute;color:white;border:none;border-radius:50%;width:70px;height:70px;cursor:pointer;transition:background 0.3s ease;background:rgba(14, 17, 26, 0.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.play-button:hover{background:rgba(0, 0, 0, 0.8)}@media screen and (max-width: 768px){.play-button{width:40px;height:40px}}`;
+
+const DropiYoutubeLazyVideo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** YouTube video ID */
+    videoId = '';
+    /** Local asset thumbnail path (without /assets/images/ prefix and .png extension) */
+    thumbnailSrc = '';
+    /** Video title for iframe accessibility */
+    videoTitle = '';
+    isPlaying = false;
+    get thumbnail() {
+        if (this.thumbnailSrc) {
+            return `/assets/images/${this.thumbnailSrc}.png`;
+        }
+        return `https://img.youtube.com/vi/${this.videoId}/hqdefault.jpg`;
+    }
+    get videoUrl() {
+        return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
+    }
+    render() {
+        return (index.h("div", { key: '0732bc87e7be10e422e80751a17527132301eb99', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (index.h("div", { key: '540c46b66da3f67ec45614e0891827b7cc0be4e5', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, index.h("img", { key: '843241c72688ca88ccd5d9391b542501575ea476', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), index.h("button", { key: 'b068f79fb6b2140e1419e9d72a24f6e66eaab69d', class: "play-button", "aria-label": "Reproducir video" }, index.h("dropi-icon", { key: 'ad254e3067ef72e2d97064cd47132cbf5961f06a', name: "Play", width: "17px", height: "21px", color: "Neutral-White" })))), this.isPlaying && (index.h("iframe", { key: '5fd8f89fa322577b49e373710216b731685cb5f5', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
+    }
+};
+DropiYoutubeLazyVideo.style = dropiYoutubeLazyVideoCss();
+
+exports.dropi_youtube_lazy_video = DropiYoutubeLazyVideo;