@dropi/ui 0.1.17 → 0.1.19

package/dist/dropi-ui/p-f3cef35a.entry.js

@@ -0,0 +1 @@
+import{r as i,c as e,h as r}from"./p-Twbb5MNM.js";const a=class{constructor(r){i(this,r),this.dropiClose=e(this,"dropiClose")}visible=!1;images=[];activeIndex=0;current=0;parsedImages=[];dropiClose;imagesChanged(i){this.parsedImages="string"==typeof i?JSON.parse(i):i||[]}indexChanged(i){this.current=i}visibleChanged(i){i&&(this.current=this.activeIndex)}componentWillLoad(){this.imagesChanged(this.images),this.current=this.activeIndex}close(){this.visible=!1,this.dropiClose.emit()}prev(){this.current=(this.current-1+this.parsedImages.length)%this.parsedImages.length}next(){this.current=(this.current+1)%this.parsedImages.length}handleError(i){i.target.src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg=="}render(){if(!this.visible)return null;const i=this.parsedImages,e=i.length>1;return r("div",{class:"overlay",onClick:()=>this.close()},r("button",{class:"overlay__close",onClick:i=>{i.stopPropagation(),this.close()},"aria-label":"Cerrar"},r("dropi-icon",{name:"Close-small",width:"24px",height:"24px",color:"Neutral-White"})),r("div",{class:"overlay__main",onClick:i=>i.stopPropagation()},e&&r("button",{class:"overlay__nav overlay__nav--prev",onClick:()=>this.prev(),"aria-label":"Anterior"},r("dropi-icon",{name:"Dropdown-left",width:"24px",height:"24px",color:"Neutral-White"})),r("img",{class:"overlay__image",src:i[this.current],alt:`imagen ${this.current+1}`,onError:i=>this.handleError(i)}),e&&r("button",{class:"overlay__nav overlay__nav--next",onClick:()=>this.next(),"aria-label":"Siguiente"},r("dropi-icon",{name:"Dropdown-Right",width:"24px",height:"24px",color:"Neutral-White"}))),e&&r("div",{class:"overlay__thumbs",onClick:i=>i.stopPropagation()},i.map(((i,e)=>r("img",{key:e,class:{overlay__thumb:!0,"overlay__thumb--active":e===this.current},src:i,alt:`miniatura ${e+1}`,onClick:()=>this.current=e,onError:i=>this.handleError(i)})))))}static get watchers(){return{images:[{imagesChanged:0}],activeIndex:[{indexChanged:0}],visible:[{visibleChanged:0}]}}};a.style=":host{display:block}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:var(--Size-3, 12px)}.overlay__close{position:absolute;top:var(--Size-4, 16px);right:var(--Size-4, 16px);background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s}.overlay__close:hover{background:rgba(255,255,255,0.2)}.overlay__main{position:relative;display:flex;align-items:center;gap:var(--Size-3, 12px);max-width:90vw;max-height:75vh}.overlay__image{max-width:80vw;max-height:72vh;object-fit:contain;border-radius:var(--Border-2, 8px)}.overlay__nav{background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.15s}.overlay__nav:hover{background:rgba(255,255,255,0.2)}.overlay__thumbs{display:flex;gap:var(--Size-2, 8px);flex-wrap:wrap;justify-content:center;max-width:90vw}.overlay__thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--Border-1, 4px);cursor:pointer;opacity:0.5;border:2px solid transparent;transition:opacity 0.15s, border-color 0.15s}.overlay__thumb:hover{opacity:0.8}.overlay__thumb--active{opacity:1;border-color:var(--Primary-Primary-500, #f49a3d)}";export{a as dropi_image_overlay}

package/dist/dropi-ui/p-f6a69c4e.entry.js

@@ -0,0 +1 @@
+import{r as e,c as s,h as i}from"./p-Twbb5MNM.js";const r=class{constructor(i){e(this,i),this.dropiCheckedValues=s(this,"dropiCheckedValues"),this.dropiSearch=s(this,"dropiSearch")}options=[];showFilter=!0;filterPlaceholder="Buscar...";showNotFound=!0;notFoundMessage="Sin resultados";multiSelect=!0;filterText="";selected=[];parsedOptions=[];dropiCheckedValues;dropiSearch;optionsChanged(e){this.parsedOptions="string"==typeof e?JSON.parse(e):e||[]}componentWillLoad(){this.optionsChanged(this.options)}get filtered(){if(!this.filterText)return this.parsedOptions;const e=this.filterText.toLowerCase();return this.parsedOptions.filter((s=>s.name?.toLowerCase().includes(e)))}toggle(e){this.selected=this.multiSelect?this.selected.includes(e)?this.selected.filter((s=>s!==e)):[...this.selected,e]:this.selected.includes(e)?[]:[e],this.dropiCheckedValues.emit(this.selected)}render(){const e=this.filtered;return i("div",{key:"4606e983827d32c18990c44589c2cfcac678b0ae",class:"csl"},this.showFilter&&i("div",{key:"532d95a9e0530023094611ce55b37f56eb6f9d78",class:"csl__search"},i("dropi-icon",{key:"79598d6cb8b36f90e15d2983f8c3e54cb713d193",name:"Search",width:"16px",height:"16px",color:"Gray-Gray-400"}),i("input",{key:"fa95ab8c1112e335560b8c49f7f4b502b3f7b3a0",class:"csl__search-input",type:"text",placeholder:this.filterPlaceholder,value:this.filterText,onInput:e=>{this.filterText=e.target.value,this.dropiSearch.emit(this.filterText)}}),this.filterText&&i("button",{key:"94574b93a5e1d938ebedd7f462e3aed6917390ef",class:"csl__clear",onClick:()=>{this.filterText="",this.dropiSearch.emit("")}},i("dropi-icon",{key:"c9765efda527f9321757a69028f9ceb7e12a7514",name:"Close-small",width:"14px",height:"14px",color:"Gray-Gray-400"}))),i("div",{key:"2f40c32f10c84277924c240a12e89876ff60a4d2",class:"csl__list"},0===e.length&&this.showNotFound?i("div",{class:"csl__empty"},this.notFoundMessage):e.map((e=>{const s=this.selected.includes(e.id);return i("div",{class:"csl__item",key:e.id,onClick:()=>this.toggle(e.id)},i("dropi-checkbox",{checked:s}),e.icon&&i("img",{class:"csl__icon",src:e.icon,alt:e.name}),i("span",{class:"csl__label"},e.name))}))))}static get watchers(){return{options:[{optionsChanged:0}]}}};r.style=":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.csl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.csl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.csl__clear{display:flex;background:none;border:none;padding:0;cursor:pointer}.csl__list{display:flex;flex-direction:column}.csl__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.csl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.csl__icon{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.csl__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);flex:1}.csl__empty{padding:var(--Size-4, 16px);text-align:center;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6)}";export{r as dropi_checkbox_selection_list}

package/dist/dropi-ui/{p-65fa8558.entry.js → p-ff45e7c8.entry.js}

@@ -1 +1 @@
-import{r as a,c as t,h as e}from"./p-Twbb5MNM.js";const r=class{constructor(e){a(this,e),this.dropiTabChange=t(this,"dropiTabChange")}tabs=[];activeTab=0;showIcon=!1;dropiTabChange;parsedTabs=[];tabsChanged(a){this.parsedTabs="string"==typeof a?JSON.parse(a):a??[]}componentWillLoad(){this.tabsChanged(this.tabs)}handleClick(a){a.disabled||(this.activeTab=a.id,this.dropiTabChange.emit(a))}render(){return e("div",{key:"5b28faac5789a5e29aa68fe2892854cdebccda75",class:"tabs-container",role:"tablist"},this.parsedTabs.map((a=>{const t=a.id===this.activeTab;return e("div",{role:"tab","aria-selected":String(t),class:{"tab-item":!0,"tab-item--active":t&&!a.disabled,"tab-item--disabled":!!a.disabled},onClick:()=>this.handleClick(a)},e("span",{class:"tab-label-row"},e("span",{class:"tab-label"},a.label),null!=a.counter&&e("span",{class:{"tab-counter":!0,"tab-counter--active":t}},a.counter)),this.showIcon&&(a.completed?e("dropi-icon",{name:"Check-circle",width:"12px",height:"12px",color:"Success-Success-500"}):e("span",{class:"tab-status-dot"})))})))}static get watchers(){return{tabs:[{tabsChanged:0}]}}};r.style=":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White,#fff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.tab-item--disabled{background:rgba(223,228,237,0.22);cursor:not-allowed;opacity:0.7;pointer-events:none}.tab-label-row{display:flex;align-items:center;gap:8px}.tab-label{font-size:var(--font-size-m,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-400,#858ea6);line-height:20px}.tab-item--active .tab-label{color:var(--Gray-Gray-600,#475066)}.tab-item--disabled .tab-label{font-weight:300;color:var(--Gray-Gray-300,#a3abbf)}.tab-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:var(--font-size-xs,10px);font-weight:var(--font-weight-medium,500);background:var(--Gray-Gray-100,#e6eaf2);color:var(--Gray-Gray-500,#69738c)}.tab-counter--active{background:var(--Primary-Primary-100,#fde8d0);color:var(--Primary-Primary-500,#f49a3d)}.tab-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}";export{r as dropi_tabs}
+import{r as a,c as t,h as r}from"./p-Twbb5MNM.js";const e=class{constructor(r){a(this,r),this.dropiTabChange=t(this,"dropiTabChange")}tabs=[];activeTab=0;showIcon=!1;dropiTabChange;parsedTabs=[];tabsChanged(a){this.parsedTabs="string"==typeof a?JSON.parse(a):a??[]}componentWillLoad(){this.tabsChanged(this.tabs)}handleClick(a){a.disabled||(this.activeTab=a.id,this.dropiTabChange.emit(a))}render(){return r("div",{key:"73bb4c928411c00cd9c6cfa6c0ed591c4573bbb1",class:"tabs-container",role:"tablist"},this.parsedTabs.map((a=>{const t=a.id===this.activeTab;return r("div",{role:"tab","aria-selected":String(t),class:{"tab-item":!0,"tab-item--active":t&&!a.disabled,"tab-item--disabled":!!a.disabled},onClick:()=>this.handleClick(a)},r("span",{class:"tab-label-row"},r("span",{class:"tab-label"},a.label),null!=a.counter&&r("span",{class:{"tab-counter":!0,"tab-counter--active":t}},a.counter)),this.showIcon&&(a.completed?r("dropi-icon",{name:"Check-circle",width:"12px",height:"12px",color:"Success-Success-500"}):r("span",{class:"tab-status-dot"})))})))}static get watchers(){return{tabs:[{tabsChanged:0}]}}};e.style=":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White,#fff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.tab-item--disabled{background:rgba(223,228,237,0.22);cursor:not-allowed;opacity:0.7;pointer-events:none}.tab-label-row{display:flex;align-items:center;gap:8px}.tab-label{font-size:var(--font-size-m,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-400,#858ea6);line-height:20px}.tab-item--active .tab-label{color:var(--Gray-Gray-600,#475066)}.tab-item--disabled .tab-label{font-weight:300;color:var(--Gray-Gray-300,#a3abbf)}.tab-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:var(--font-size-xs,10px);font-weight:var(--font-weight-medium,500);background:var(--Gray-Gray-100,#e6eaf2);color:var(--Gray-Gray-500,#69738c)}.tab-counter--active{background:var(--Primary-Primary-100,#fde8d0);color:var(--Primary-Primary-500,#f49a3d)}.tab-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}";export{e as dropi_tabs}

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

@@ -38,7 +38,7 @@ const DropiAccordion = class {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (h("div", { key: '4da35da859fc9fdb7c874c026ef1178c93b7bfd5', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, h("button", { key: '77af39a3e990b23b5e185fa99176dadce219a911', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: 'cda6c545f4d8342a5e9604245b102defe88be227', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: 'b73a39adc40193ae93b235ad5a4169a6ec4caa16', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), h("span", { key: 'd7c4543d5c5580ce421deeca47752c850918efd2', class: "accordion-title" }, this.header)), h("span", { key: '9e8884a62c4f9a20e6e15ee69499990db9ded865', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: 'a4eb14dc1f0ac9c45865e8ee69cf698e1a5c50a7', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), h("div", { key: 'a23b40bb950b86dafca96851319aee3c8bb6656e', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: 'bf69ecafa7d59d776d38c55df10fa25d84d2152a', class: "accordion-content" }, h("slot", { key: 'bcb928fd4551e65b9e286770979e2e67ff9fb1aa' })))));
+        return (h("div", { key: 'af11e06f8e10d85d6dffdbcb639479ce7095ed6e', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, h("button", { key: '5c3e5303dc6e5a37dece808559dcf6a8c6245980', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: '062be2726403e5b9d90694555317db406c70d93f', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: 'c626c98aaab3074cdf754460d5eff45739683404', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), h("span", { key: '3143e043a462df9e2b794fd2ff608ab910972a54', class: "accordion-title" }, this.header)), h("span", { key: '3ffd80e303fa17582b57a0778b2bc610c6dff899', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: 'b353a6cbfbd3b51d408ced11c29eeb8a8cded9a6', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), h("div", { key: '0754969bc5483586224ddb3774f65328dd8cd3cb', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: '96e87adb7ca8de258541be0d4626ba9ce09e1f97', class: "accordion-content" }, h("slot", { key: '5b82c186bc11b7e9e5a714217454c0c6058be5cf' })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -0,0 +1,56 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:flex-start;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%;animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.alert--success{background:var(--Success-Success-50, #f0fdf4);border-color:var(--Success-Success-200, #bbf7d0)}.alert--error{background:var(--Error-Error-50, #fff5f5);border-color:var(--Error-Error-200, #fecaca)}.alert--warning{background:var(--Warning-Warning-50, #fffbeb);border-color:var(--Warning-Warning-200, #fde68a)}.alert--info{background:var(--Info-Info-50, #eff6ff);border-color:var(--Info-Info-200, #bfdbfe)}.alert--flag{border-left-width:4px;border-radius:0 var(--Border-2, 8px) var(--Border-2, 8px) 0}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:inherit;font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}`;
+
+const STATE_ICONS = {
+    success: 'Check-circle',
+    error: 'Warning-circle',
+    warning: 'Warning-triangle',
+    info: 'Info-circle',
+};
+const STATE_COLORS = {
+    success: 'Success-Success-500',
+    error: 'Error-Error-500',
+    warning: 'Warning-Warning-500',
+    info: 'Info-Info-500',
+};
+const DropiAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiClose = createEvent(this, "dropiClose");
+        this.dropiButtonClick = createEvent(this, "dropiButtonClick");
+        this.dropiLinkClick = createEvent(this, "dropiLinkClick");
+    }
+    /** Alert message text (supports plain text) */
+    message = '';
+    /** Layout type: default (inline) | flag (accented left border) */
+    type = 'default';
+    /** Semantic state */
+    state = 'info';
+    /** Show the × close button */
+    dismissable = false;
+    /** Show action button */
+    showButton = false;
+    /** Action button label */
+    buttonText = '';
+    /** Anchor/link label */
+    anchorText = '';
+    /** Anchor href */
+    anchorUrl = '';
+    /** Whether the alert is visible */
+    showAlert = true;
+    /** Emitted when the alert is dismissed */
+    dropiClose;
+    /** Emitted when the action button is clicked */
+    dropiButtonClick;
+    /** Emitted when the anchor link is clicked */
+    dropiLinkClick;
+    render() {
+        if (!this.showAlert)
+            return null;
+        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], width: "18px", height: "18px", color: STATE_COLORS[this.state] })), h("div", { class: "alert__body" }, h("span", { class: "alert__message" }, this.message), this.anchorText && (h("a", { class: "alert__link", href: this.anchorUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && (h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
+    }
+};
+DropiAlert.style = dropiAlertCss();
+
+export { DropiAlert as dropi_alert };

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

@@ -0,0 +1,29 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.js';
+
+const dropiAvatarsCss = () => `:host{display:inline-block}.avatar{margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar--users,.avatar--transport,.avatar--payment{width:35px;height:35px}.avatar--supplier{width:70px;height:70px}.avatar--counter{width:33px;height:33px}.avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background-color:var(--Primary-Primary-100, #fde9d0);color:var(--Primary-Primary-600, #d4872e);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.5px}`;
+
+const FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;
+const DropiAvatars = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Image URL */
+    image = '';
+    /** Alt text for the image */
+    alt = 'avatar';
+    /** Size/context variant */
+    type = 'users';
+    /** Initials to show when no image (max 2 chars) */
+    initials = '';
+    handleError(e) {
+        e.target.src = FALLBACK;
+    }
+    render() {
+        const displayInitials = this.initials?.slice(0, 2).toUpperCase();
+        const showInitials = !this.image && displayInitials;
+        return (h("figure", { key: '5bce853f6d1d17dcad603cf103d6de09ae612147', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (h("div", { class: "avatar__initials" }, displayInitials)) : (h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
+    }
+};
+DropiAvatars.style = dropiAvatarsCss();
+
+export { DropiAvatars as dropi_avatars };

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

@@ -27,7 +27,7 @@ const DropiBadge = class {
         return null;
     }
     render() {
-        return (h("div", { key: 'b66590d82d7dd760badcfb76c72eb3d589073721', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '82ae7072f3ac6d96ed02db8289f0f98f070a882d' }, this.stateText[this.state])));
+        return (h("div", { key: '7a043420848f083d161765c16da41dc1f7c38065', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '4227bf47f3169673f44b62bde46498e3c8d607cd' }, this.stateText[this.state])));
     }
 };
 DropiBadge.style = dropiBadgeCss();

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

@@ -64,14 +64,14 @@ const DropiButton = class {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (h("button", { key: '6cde7f2616d1cff9e3304481f2a0c38aabc34192', class: {
+        return (h("button", { key: '893717e317f10193bfa723d65607fc79e5875309', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
                 [this.type]: true,
                 [this.size]: true,
                 [this.state]: true,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '769cea8fce2947552462aa2cbbb09d64df952c76', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'f66ad80283d54f643cf37ea702145127b90d4ce4', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '4fd9c7d7d029c3316bc0492576cda0cca74fa460', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3280c56a28ea40016d35e186b9997635b8ba881b' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '922e32f5466164279fdb9408502412d4246ee1f2', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '9b8c506a5e4a791bde84d36e2991386ee2a3822f', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'c1f66fba38426ff724450a806c99939ffaca0c75', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'af5cc164403ec0592f4740368784c343e38a0227' })));
     }
 };
 DropiButton.style = dropiButtonCss();

package/dist/esm/dropi-card-section.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
+
+const DropiCardSection = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiClick = createEvent(this, "dropiClick");
+    }
+    /** Section title */
+    sectionTitle = '';
+    /** Section description */
+    description = '';
+    /** Control type on the right */
+    typeElement = 'switch';
+    /** Title size variant */
+    type = 'medium';
+    /** Switch checked state */
+    isChecked = false;
+    /** Emitted when switch changes. e.detail = new boolean value */
+    dropiChange;
+    /** Emitted when dropdown icon is clicked */
+    dropiClick;
+    render() {
+        return (h("div", { key: '5820426132998a0fcc95ec9bc5626044809bc8f9', class: "card-section" }, h("div", { key: '56023483c0be283b4e8b71bdb8ab91c3bbe0e518', class: "card-section__text" }, this.type === 'important'
+            ? h("h5", { class: "card-section__title card-section__title--important" }, this.sectionTitle)
+            : h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && h("p", { key: '123f616e6404040a052c8e3313ea74368ef1564e', class: "card-section__desc" }, this.description)), h("div", { key: '70d91f09bfe12b561a0457d6b1c531e04c697119', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
+                this.isChecked = e.detail;
+                this.dropiChange.emit(e.detail);
+            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
+    }
+};
+DropiCardSection.style = dropiCardSectionCss();
+
+export { DropiCardSection as dropi_card_section };

package/dist/esm/dropi-checkbox-selection-list.entry.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.csl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.csl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.csl__clear{display:flex;background:none;border:none;padding:0;cursor:pointer}.csl__list{display:flex;flex-direction:column}.csl__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.csl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.csl__icon{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.csl__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);flex:1}.csl__empty{padding:var(--Size-4, 16px);text-align:center;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6)}`;
+
+const DropiCheckboxSelectionList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiCheckedValues = createEvent(this, "dropiCheckedValues");
+        this.dropiSearch = createEvent(this, "dropiSearch");
+    }
+    /** Options array or JSON string */
+    options = [];
+    /** Show search filter */
+    showFilter = true;
+    /** Search placeholder */
+    filterPlaceholder = 'Buscar...';
+    /** Show "no results" message */
+    showNotFound = true;
+    /** Empty state message */
+    notFoundMessage = 'Sin resultados';
+    /** Allow multiple selection */
+    multiSelect = true;
+    filterText = '';
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes. e.detail = selected option ids */
+    dropiCheckedValues;
+    /** Emitted on search input. e.detail = search text */
+    dropiSearch;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() { this.optionsChanged(this.options); }
+    get filtered() {
+        if (!this.filterText)
+            return this.parsedOptions;
+        const q = this.filterText.toLowerCase();
+        return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
+    }
+    toggle(id) {
+        if (this.multiSelect) {
+            this.selected = this.selected.includes(id)
+                ? this.selected.filter(s => s !== id)
+                : [...this.selected, id];
+        }
+        else {
+            this.selected = this.selected.includes(id) ? [] : [id];
+        }
+        this.dropiCheckedValues.emit(this.selected);
+    }
+    render() {
+        const items = this.filtered;
+        return (h("div", { key: '4606e983827d32c18990c44589c2cfcac678b0ae', class: "csl" }, this.showFilter && (h("div", { key: '532d95a9e0530023094611ce55b37f56eb6f9d78', class: "csl__search" }, h("dropi-icon", { key: '79598d6cb8b36f90e15d2983f8c3e54cb713d193', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'fa95ab8c1112e335560b8c49f7f4b502b3f7b3a0', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+                this.filterText = e.target.value;
+                this.dropiSearch.emit(this.filterText);
+            } }), this.filterText && (h("button", { key: '94574b93a5e1d938ebedd7f462e3aed6917390ef', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, h("dropi-icon", { key: 'c9765efda527f9321757a69028f9ceb7e12a7514', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '2f40c32f10c84277924c240a12e89876ff60a4d2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+            const checked = this.selected.includes(opt.id);
+            return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.name }), h("span", { class: "csl__label" }, opt.name)));
+        })))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiCheckboxSelectionList.style = dropiCheckboxSelectionListCss();
+
+export { DropiCheckboxSelectionList as dropi_checkbox_selection_list };

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

@@ -20,12 +20,12 @@ const DropiCheckbox = class {
         this.dropiChange.emit(this.checked);
     }
     render() {
-        return (h("div", { key: 'f37dba8ec47aec07302f0b6f52d402b4367aa8da', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '21c72608204b4384de76720192542763c8190b27', class: {
+        return (h("div", { key: '4e56a55cec60e55f61205e370845f734b5baedcc', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: 'dd440f791d8fa5dd3fd7e8a00054c2d0fe337961', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, h("svg", { key: '06881031251120f3942fc938e7c0ffad5dde7494', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'dd52bac77eca77270cfd645f02fb06a39a7cf519', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, h("svg", { key: 'f7470772cd3f47777c0ade490de8772a4e0a2d43', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'ed529e987fe524339bb01ee0e95d838df962d0bc', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get formAssociated() { return true; }
 };

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

@@ -0,0 +1,28 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items:center;gap:var(--Size-1, 4px);height:24px;padding:0 var(--Size-2, 8px);border-radius:var(--Border-2, 8px);font-size:var(--font-size-xs, 10px);font-family:inherit;max-width:200px}.chip--filters{background:var(--Primary-Primary-50, #fff5eb);border:1px solid var(--Primary-Primary-200, #fbd4a3);color:var(--Primary-Primary-600, #d4872e)}.chip--fill{background:var(--Gray-Gray-100, #e6eaf2);border:1px solid transparent;color:var(--Gray-Gray-700, #32394d)}.chip__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}.chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:0.7;transition:opacity 0.15s}.chip__close:hover{opacity:1}`;
+
+const DropiChips = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiClose = createEvent(this, "dropiClose");
+    }
+    /** Visual style */
+    chipStyle = 'filters';
+    /** Content type */
+    type = 'text';
+    /** Avatar image URL (when type = 'avatar') */
+    urlImg = '';
+    /** Show the close/remove icon */
+    showIcon = true;
+    /** Icon name (when type = 'icon') */
+    icon = '';
+    /** Emitted when the close icon is clicked */
+    dropiClose;
+    render() {
+        return (h("div", { key: '06d0ac1f96349389f1513b59a1f84dbff9864169', class: { 'chip': true, [`chip--${this.chipStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '38bc54471c0cf6dc7a25cccaba0764573d5d43e1', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '908f3b217b425f6a3c9bf242a94110b742ca34b3', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: 'cb76f76056e6a28cfc497f2fabece2c95d6b9a60', class: "chip__text" }, h("slot", { key: '4d3aade9d8408d2b5b627c43754a9cfafd44b941' })), this.showIcon && (h("button", { key: 'fbb30fa90841e499d21c928c4a319724def58bb2', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: 'f11c820069c550fa7ee3a143c3c6f29d338041c8', name: "Close-small", width: "14px", height: "14px", color: "currentColor" })))));
+    }
+};
+DropiChips.style = dropiChipsCss();
+
+export { DropiChips as dropi_chips };

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

@@ -0,0 +1,56 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropdown{display:flex;flex-direction:column;overflow-y:auto;max-height:var(--dropdown-height, 300px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff)}.dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.dropdown__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.dropdown__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const DropiDropdown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange");
+    }
+    /** Options array or JSON string */
+    options = [];
+    /** Property name to display as the option label */
+    valueModel = 'name';
+    /** Property name to use as the option image/avatar URL */
+    imageModel = '';
+    /** Max height of the list container (CSS value) */
+    height = '300px';
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes. e.detail = selected items array */
+    dropiChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    isSelected(opt) {
+        return this.selected.some(s => JSON.stringify(s) === JSON.stringify(opt));
+    }
+    toggleOption(opt) {
+        if (this.isSelected(opt)) {
+            this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));
+        }
+        else {
+            this.selected = [...this.selected, opt];
+        }
+        this.dropiChange.emit(this.selected);
+    }
+    render() {
+        return (h("div", { key: 'e9b2fe1b667a4d83c0d142ff9ba8187d848f606d', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
+            const label = opt[this.valueModel] ?? String(opt);
+            const imgUrl = this.imageModel ? opt[this.imageModel] : '';
+            const active = this.isSelected(opt);
+            return (h("div", { class: { 'dropdown__item': true, 'dropdown__item--active': active }, key: i, onClick: () => this.toggleOption(opt) }, h("dropi-checkbox", { checked: active }), imgUrl && (h("img", { class: "dropdown__avatar", src: imgUrl, alt: label })), h("span", { class: "dropdown__label" }, label)));
+        })));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiDropdown.style = dropiDropdownCss();
+
+export { DropiDropdown as dropi_dropdown };

package/dist/esm/dropi-empty-state.entry.js

@@ -25,7 +25,7 @@ const DropiEmptyState = class {
     /** Emitted when secondary action button is clicked */
     dropiSecondaryAction;
     render() {
-        return (h("div", { key: '1aea01715d0e50b308904d496be7bc2f607bf5aa', class: "empty-state" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-placeholder" }, h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && h("h3", { key: '41e5da8d482456f4b9006449a27a9f9d172d87b4', class: "empty-state-title" }, this.header), this.description && h("p", { key: 'ffa6399489ec56cd2cf84bb39d12c112bee64302', class: "empty-state-description" }, this.description), h("slot", { key: '6ccdfed94a22ad7ece2388fba3d4734aa6a2b509' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: '0da97fd516eccd1cabe846b2d002fdf75306674d', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: 'de1b1ad4d6a50cfd251de243a3b5ea3beb10019b', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '59f3b47ee14f3ac89aa4acc5b42d856f26d02d19', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
+        return (h("div", { key: '7c393f2a56387d573162068576809a6f6a975a34', class: "empty-state" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-placeholder" }, h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && h("h3", { key: 'd1fbe8d995e295cb4a72064745e7b521b35bbad6', class: "empty-state-title" }, this.header), this.description && h("p", { key: '948e6bcb6e07fab09261e6f68d658bf1faf17c8e', class: "empty-state-description" }, this.description), h("slot", { key: '8663d0a1e2df4ee914a25a0bda27e5f2ee41a941' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: 'af582b6316e8ebf2700589b55deef1fe8fbf08f2', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: '1e69d9a9143708157a20dba1179498bd01203af2', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '3850ddf4716b2732bb21ee9fa731e90022b2ecd2', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
     }
 };
 DropiEmptyState.style = dropiEmptyStateCss();

package/dist/esm/dropi-favorite-button.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiFavoriteButtonCss = () => `:host{display:inline-flex}.fav-btn{display:flex;align-items:center;justify-content:center;width:37px;height:37px;border-radius:8px;border:1px solid var(--Gray-Gray-200);background:var(--Neutral-White);cursor:pointer;transition:all 0.2s ease-in-out}.fav-btn:hover,.fav-btn--active{background:var(--Gray-Gray-50)}.fav-btn:active{transform:scale(0.95)}`;
+
+const DropiFavoriteButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiToggleFavorite = createEvent(this, "dropiToggleFavorite");
+    }
+    /** Whether the item is currently marked as favorite */
+    isFavorite = false;
+    /** Emitted when toggled. e.detail = new favorite state */
+    dropiToggleFavorite;
+    hovered = false;
+    toggle() {
+        this.isFavorite = !this.isFavorite;
+        this.dropiToggleFavorite.emit(this.isFavorite);
+    }
+    render() {
+        return (h("button", { key: '3920b723683dc337ebe5aedc473414c9ed27a593', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, h("dropi-icon", { key: '60748aaafd0a183e175fd84c5d44313a0254ed5e', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+    }
+};
+DropiFavoriteButton.style = dropiFavoriteButtonCss();
+
+export { DropiFavoriteButton as dropi_favorite_button };

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

@@ -35,7 +35,7 @@ const DropiIcon = class {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (h("svg", { key: '2bcb456155fc78c9602c5e34bc8f70d0d44bd050', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '92aa54406161cfdf5deda5f42a83e06480eb6208', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
+        return (h("svg", { key: 'd92e0c9deb01962dfb172ae25af4f1236647e24c', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '76be21d4bcbb2a5409e0c784cd17c6ca3cd243f6', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
     }
     static get watchers() { return {
         "color": [{

package/dist/esm/dropi-image-miniature.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiImageMiniatureCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.miniature__label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:var(--Size-2, 8px)}.miniature__grid{display:flex;flex-wrap:wrap;gap:var(--Size-2, 8px)}.miniature__item{position:relative;border-radius:var(--Border-2, 8px);overflow:hidden;cursor:pointer;flex-shrink:0}.miniature__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s}.miniature__zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);opacity:0;transition:opacity 0.2s}.miniature__item:hover img{transform:scale(1.05)}.miniature__item:hover .miniature__zoom{opacity:1}`;
+
+const DropiImageMiniature = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiImageClick = createEvent(this, "dropiImageClick");
+    }
+    /** Optional label above the grid */
+    label = '';
+    /** Array of image URLs. Pass as JSON string or array */
+    images = [];
+    /** Thumbnail width (CSS value) */
+    width = '88px';
+    /** Thumbnail height (CSS value) */
+    height = '88px';
+    /** Emitted when a thumbnail is clicked. e.detail = { images, index } */
+    dropiImageClick;
+    get parsedImages() {
+        if (typeof this.images === 'string') {
+            try {
+                return JSON.parse(this.images);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.images || [];
+    }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4OCA4OCI+PHJlY3Qgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg4IiBmaWxsPSIjZjdmOGZhIi8+PHRleHQgeD0iNDQiIHk9IjQ4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYzNjOWQ5IiBmb250LXNpemU9IjEyIj5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        const imgs = this.parsedImages;
+        return (h("div", { key: '5182a02b3f7da5b1440230c87c8661f5f33bb7be', class: "miniature" }, this.label && h("span", { key: 'bf649e5c27972799d600df583c0953938a1cacad', class: "miniature__label" }, this.label), h("div", { key: '7197ca2d4bbf5d65db4ca71addcf352045734d94', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
+    }
+};
+DropiImageMiniature.style = dropiImageMiniatureCss();
+
+export { DropiImageMiniature as dropi_image_miniature };

package/dist/esm/dropi-image-overlay.entry.js

@@ -0,0 +1,60 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiImageOverlayCss = () => `:host{display:block}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:var(--Size-3, 12px)}.overlay__close{position:absolute;top:var(--Size-4, 16px);right:var(--Size-4, 16px);background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s}.overlay__close:hover{background:rgba(255,255,255,0.2)}.overlay__main{position:relative;display:flex;align-items:center;gap:var(--Size-3, 12px);max-width:90vw;max-height:75vh}.overlay__image{max-width:80vw;max-height:72vh;object-fit:contain;border-radius:var(--Border-2, 8px)}.overlay__nav{background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.15s}.overlay__nav:hover{background:rgba(255,255,255,0.2)}.overlay__thumbs{display:flex;gap:var(--Size-2, 8px);flex-wrap:wrap;justify-content:center;max-width:90vw}.overlay__thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--Border-1, 4px);cursor:pointer;opacity:0.5;border:2px solid transparent;transition:opacity 0.15s, border-color 0.15s}.overlay__thumb:hover{opacity:0.8}.overlay__thumb--active{opacity:1;border-color:var(--Primary-Primary-500, #f49a3d)}`;
+
+const DropiImageOverlay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiClose = createEvent(this, "dropiClose");
+    }
+    /** Whether the overlay is visible */
+    visible = false;
+    /** Images array or JSON string */
+    images = [];
+    /** Initially active image index */
+    activeIndex = 0;
+    current = 0;
+    parsedImages = [];
+    /** Emitted when overlay closes */
+    dropiClose;
+    imagesChanged(val) {
+        this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    indexChanged(val) { this.current = val; }
+    visibleChanged(val) {
+        if (val)
+            this.current = this.activeIndex;
+    }
+    componentWillLoad() {
+        this.imagesChanged(this.images);
+        this.current = this.activeIndex;
+    }
+    close() { this.visible = false; this.dropiClose.emit(); }
+    prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }
+    next() { this.current = (this.current + 1) % this.parsedImages.length; }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const imgs = this.parsedImages;
+        const multi = imgs.length > 1;
+        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Neutral-White" })), h("div", { class: "overlay__main", onClick: (e) => e.stopPropagation() }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", width: "24px", height: "24px", color: "Neutral-White" }))), h("img", { class: "overlay__image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", width: "24px", height: "24px", color: "Neutral-White" })))), multi && (h("div", { class: "overlay__thumbs", onClick: (e) => e.stopPropagation() }, imgs.map((src, i) => (h("img", { key: i, class: { 'overlay__thumb': true, 'overlay__thumb--active': i === this.current }, src: src, alt: `miniatura ${i + 1}`, onClick: () => this.current = i, onError: (e) => this.handleError(e) })))))));
+    }
+    static get watchers() { return {
+        "images": [{
+                "imagesChanged": 0
+            }],
+        "activeIndex": [{
+                "indexChanged": 0
+            }],
+        "visible": [{
+                "visibleChanged": 0
+            }]
+    }; }
+};
+DropiImageOverlay.style = dropiImageOverlayCss();
+
+export { DropiImageOverlay as dropi_image_overlay };