@dropi/ui 0.1.36 → 0.1.41

package/dist/components/p-Cjq4FTif.js

@@ -0,0 +1 @@
+import{t as i,p as t,H as e,h as s}from"./index.js";import{d as a}from"./p-BDYn1JDe.js";const r=t(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}type="dropi";state="default";stateInsignia="verified";tagProduct=!1;insigniaIcons={verified:"assets/icons/ilustration/verified-new.svg",premium:"assets/icons/ilustration/premium-new.svg",exclusive:"assets/icons/ilustration/exclusive.svg"};getIconName(i){return{success:"Check-circle",error:"Cross-circle",info:"Info",warning:"Info"}[i]||"Info"}render(){return s("div",{key:"2f956eddb214de168aae134374512600867e77a8",class:"dropi-ilustration"},"dropi"===this.type&&s("figure",{key:"3d05624542d51f64cb6402fb958f039bc943afb7",class:"dropi-ilustration__image"},s("img",{key:"6fb383b378d989f675433c46710e246dc193f26b",src:`assets/icons/ilustration/${this.state&&"undefined"!==String(this.state)&&"null"!==String(this.state)?this.state:"default"}.svg`,alt:this.state??"default",onError:i=>{i.target.src="assets/icons/ilustration/default.svg"}})),"mb"===this.type&&s("figure",{key:"f66957ddbba9506d041ab1b2e8877872b25bdbf3",class:`dropi-ilustration__image-mb ${this.state}`},["success","error","info","warning"].includes(this.state)&&s("dropi-icon",{key:"4f65eb91eb99c07abefc6089c6935b1fb573978b",name:this.getIconName(this.state),iconWidth:"24px",iconHeight:"24px",color:"Neutral-White"})),"insignia"===this.type&&s("figure",{key:"fd0db6cbdc7daf018446f03cf8dd13dbe218733a",class:this.tagProduct?"dropi-ilustration-insignia-tag":"dropi-ilustration-insignia"},s("img",{key:"79cd16693eeb848db9c027c8d2e96c6760a9e2ac",src:this.insigniaIcons[this.stateInsignia],alt:this.stateInsignia}),this.tagProduct&&s("p",{key:"58ec25aa47c8756ec11a0fba679194a25dfaad0c",class:`tag tag--${this.stateInsignia}`},s("span",{key:"8354a3de165526351bc53021218b1fb2a0a4d064",class:"Caption-S"},this.stateInsignia.charAt(0).toUpperCase()+this.stateInsignia.slice(1)))))}static get style(){return":host{display:inline-flex}.dropi-ilustration{display:inline-flex;align-items:center;justify-content:center}.dropi-ilustration__image,.dropi-ilustration-insignia{margin:0;display:flex;align-items:center;justify-content:center}.dropi-ilustration__image img{max-width:100%;height:auto}.dropi-ilustration__image-mb{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:0}.dropi-ilustration__image-mb.success{background:var(--Success-Success-500, #22c55e)}.dropi-ilustration__image-mb.error{background:var(--Error-Error-500, #ef4444)}.dropi-ilustration__image-mb.info{background:var(--Info-Info-500, #3b82f6)}.dropi-ilustration__image-mb.warning{background:url('assets/icons/ilustration/bg-warning.svg') no-repeat center;background-size:contain;border-radius:0}.dropi-ilustration-insignia-tag{display:flex;align-items:center;margin:0}.dropi-ilustration-insignia-tag img{position:relative;z-index:2;height:32px;width:auto}.tag{border-radius:32px;color:var(--Neutral-White, #ffffff);text-transform:capitalize;margin:0 0 0 -20px;display:flex;align-items:center;justify-content:flex-start}.tag span{color:var(--Neutral-White, #ffffff);padding:4px 8px 4px 18px;font-size:var(--font-size-xxs)}.tag--verified{background:linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%)}.tag--premium{background:linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%)}.tag--exclusive{background:linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%)}"}},[513,"dropi-ilustration-icon",{type:[1],state:[1],stateInsignia:[1,"state-insignia"],tagProduct:[4,"tag-product"]}]);function n(){"undefined"!=typeof customElements&&["dropi-ilustration-icon","dropi-icon"].forEach((t=>{switch(t){case"dropi-ilustration-icon":customElements.get(i(t))||customElements.define(i(t),r);break;case"dropi-icon":customElements.get(i(t))||a()}}))}n();export{r as D,n as d}

package/dist/components/p-DfdhNT9F.js

@@ -0,0 +1 @@
+import{t as r,p as e,H as t,c as a,h as i}from"./index.js";import{d as o}from"./p-BDYn1JDe.js";const n={success:"Check-circle",error:"Warning-circle",warning:"Warning-triangle",info:"Info"},s={success:"Success-Success-500",error:"Error-Error-500",warning:"Warning-Warning-500",info:"Info-Info-500"},l=e(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.onClose=a(this,"onClose",7),this.onButtonClick=a(this,"onButtonClick",7),this.onClickLink=a(this,"onClickLink",7)}message="";type="default";state="success";dismissable=!0;showButton=!1;buttonText="Close";anchorText="none";anchorUrl="none";showAlert=!0;textLink="";linkUrl="";clickedText="";onClose;onButtonClick;onClickLink;render(){return this.showAlert?i("div",{class:{alert:!0,[`alert--${this.type}`]:!0,[`alert--${this.state}`]:!0}},"flag"!==this.type&&i("div",{class:"alert__icon"},i("dropi-icon",{name:n[this.state],iconWidth:"18px",iconHeight:"18px",color:s[this.state]})),i("div",{class:"alert__body"},i("span",{class:"alert__message"},this.message),this.anchorText&&i("a",{class:"alert__link",href:this.anchorUrl||this.linkUrl||"#",onClick:r=>{r.preventDefault(),this.onClickLink.emit()}},this.anchorText)),i("div",{class:"alert__actions"},this.showButton&&this.buttonText&&"flag"!==this.type&&i("button",{class:"alert__btn",onClick:()=>this.onButtonClick.emit()},this.buttonText),this.dismissable&&i("button",{class:"alert__close",onClick:()=>{this.showAlert=!1,this.onClose.emit()},"aria-label":"Cerrar"},i("dropi-icon",{name:"Close-small",iconWidth:"18px",iconHeight:"18px",color:"Gray-Gray-500"})))):null}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.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);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);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, #ffffff)}.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}"}},[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"]}]);function c(){"undefined"!=typeof customElements&&["dropi-alert","dropi-icon"].forEach((e=>{switch(e){case"dropi-alert":customElements.get(r(e))||customElements.define(r(e),l);break;case"dropi-icon":customElements.get(r(e))||o()}}))}c();export{l as D,c as d}

package/dist/components/p-DvLWbKsf.js

@@ -0,0 +1 @@
+import{t,p as e,H as i,h as s}from"./index.js";import{d as r}from"./p-BDYn1JDe.js";const a=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}type="primary";state="default";showIcon=!1;icon="";text="";colorMap={default:"Primary-Primary",success:"Success-Success",info:"Info-Info",warning:"Warning-Warning",error:"Error-Error",legacy:"Gray-Gray"};propsChanged(){}get bgColor(){const t=this.colorMap[this.state];return"primary"===this.type?`var(--${t}-500)`:`var(--${t}${"default"===this.state||"legacy"===this.state?"-100":"-50"})`}get textColor(){return"primary"===this.type?"var(--Neutral-White)":`var(--${this.colorMap[this.state]}${"default"===this.state?"-500":"-700"})`}get iconColor(){return"primary"===this.type?"Neutral-White":`${this.colorMap[this.state]}${"default"===this.state?"-500":"-700"}`}get hasContent(){return"string"==typeof this.text&&this.text.trim().length>0}render(){return s("div",{key:"1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d",class:"container-chips"},s("div",{key:"96c2b0e9d22881ca71c58488dcd622a1eef1a120",class:{tags:!0,"icon-only":this.showIcon&&!this.hasContent},style:{backgroundColor:this.bgColor,color:this.textColor}},this.showIcon&&this.icon&&s("dropi-icon",{key:"4c94cf3fcabd31b6b50fc711815472f8b12e43d9",class:"file-icon",name:this.icon,iconWidth:"16px",iconHeight:"16px",color:this.iconColor}),this.hasContent&&s("span",{key:"26f06b85d085e58aa854533a9fd238e70957212b"},this.text)))}static get watchers(){return{type:[{propsChanged:0}],state:[{propsChanged:0}]}}static get style(){return":host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}"}},[513,"dropi-tag",{type:[513],state:[513],showIcon:[4,"show-icon"],icon:[513],text:[513]},void 0,{type:[{propsChanged:0}],state:[{propsChanged:0}]}]);function o(){"undefined"!=typeof customElements&&["dropi-tag","dropi-icon"].forEach((e=>{switch(e){case"dropi-tag":customElements.get(t(e))||customElements.define(t(e),a);break;case"dropi-icon":customElements.get(t(e))||r()}}))}o();export{a as D,o as d}

package/dist/components/p-Dz9uN5Nw.js

@@ -0,0 +1 @@
+import{t as e,p as t,H as i,c as s,h as o}from"./index.js";const r=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.onChange=s(this,"onChange",7)}isChecked=!1;disabled=!1;onChange;onToggleChange(e){this.isChecked=e.target.checked,this.onChange.emit(this.isChecked)}render(){return o("label",{key:"6043438a00410dba66c1896c1f0e5456105d3f38",class:"toggle-switch"},o("input",{key:"fb07e45187bf6e50b3eb8b556730f93ded53600b",type:"checkbox",checked:this.isChecked,disabled:this.disabled,onChange:e=>this.onToggleChange(e)}),o("span",{key:"ac15ea92758c633d35d5bb74fea62f7ea7a090d2",class:"slider"}))}static get formAssociated(){return!0}static get style(){return":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.toggle-switch{position:relative;display:inline-block;width:40px;height:21px;margin-bottom:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--Gray-Gray-200, #c3c9d9);transition:0.4s;border-radius:34px}.slider::before{position:absolute;content:'';height:17px;width:17px;left:3px;bottom:2px;background-color:var(--Neutral-White, #ffffff);transition:0.4s;border-radius:50%}input:checked+.slider{background-color:var(--Primary-Primary-500, #f49a3d)}input:checked+.slider::before{transform:translateX(17px)}:host([disabled]) .toggle-switch{cursor:not-allowed;opacity:0.5}"}},[577,"dropi-switch",{isChecked:[1540,"is-checked"],disabled:[516]}]);function a(){"undefined"!=typeof customElements&&["dropi-switch"].forEach((t=>{"dropi-switch"===t&&(customElements.get(e(t))||customElements.define(e(t),r))}))}a();export{r as D,a as d}

package/dist/components/p-FAhcOdS-.js

@@ -0,0 +1 @@
+import{t,p as e,H as o,c as i,h as r}from"./index.js";import{d as s}from"./p-BDYn1JDe.js";const a=e(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.onInput=i(this,"onInput",7),this.onChange=i(this,"onChange",7),this.onFocus=i(this,"onFocus",7),this.onBlur=i(this,"onBlur",7),this.internals=this.attachInternals()}internals;inputId="";name="";label="";placeholder=" ";value="";maxLength;disabled=!1;required=!1;showObligatoryAsterisk=!0;fixedLabel=!1;inputMode="text";passwordInput=!1;isMoneyInput=!1;isThousandSeparator=!1;isNumericInput=!1;allowDecimals=!1;isLettersOnly=!1;icon="";iconColor="Gray-Gray-400";hasError=!1;textHelper="";showHelperOnlyOnError=!1;inputProperties=null;showPassword=!1;touched=!1;onInput;onChange;onFocus;onBlur;inputPropertiesChanged(t){t&&(void 0!==t.id&&(this.inputId=t.id),void 0!==t.inputId&&(this.inputId=t.inputId),void 0!==t.label&&(this.label=t.label),void 0!==t.placeholder&&(this.placeholder=t.placeholder),void 0!==t.maxLength&&(this.maxLength=t.maxLength),void 0!==t.textHelper&&(this.textHelper=t.textHelper),void 0!==t.passwordInput&&(this.passwordInput=t.passwordInput),void 0!==t.isPasswordInput&&(this.passwordInput=t.isPasswordInput),void 0!==t.icon&&(this.icon=t.icon),void 0!==t.iconColor&&(this.iconColor=t.iconColor),void 0!==t.isMoneyInput&&(this.isMoneyInput=t.isMoneyInput),void 0!==t.showObligatoryAsterisk&&(this.showObligatoryAsterisk=t.showObligatoryAsterisk),void 0!==t.isNumericInput&&(this.isNumericInput=t.isNumericInput),void 0!==t.allowDecimals&&(this.allowDecimals=t.allowDecimals),void 0!==t.isThousandSeparator&&(this.isThousandSeparator=t.isThousandSeparator),void 0!==t.showHelperOnlyOnError&&(this.showHelperOnlyOnError=t.showHelperOnlyOnError),void 0!==t.isLettersOnly&&(this.isLettersOnly=t.isLettersOnly),void 0!==t.inputMode&&(this.inputMode=t.inputMode))}valueChanged(t){this.internals.setFormValue(t)}disabledChanged(t){this.internals.setValidity(t?{customError:!0}:{},t?"Field is disabled":"")}componentWillLoad(){this.internals.setFormValue(this.value??""),this.inputProperties&&this.inputPropertiesChanged(this.inputProperties)}handleInput(t){let e=t.target.value;this.isNumericInput&&(e=this.filterNumbers(e)),this.isLettersOnly&&(e=this.filterLetters(e)),(this.isMoneyInput||this.isThousandSeparator)&&(e=this.formatThousands(e,this.isMoneyInput)),this.value=e,this.internals.setFormValue(e),this.onInput.emit(e)}handleKeyDown(t){(this.isNumericInput||this.isMoneyInput||this.isThousandSeparator)&&!this.isAllowedNumberKey(t)&&t.preventDefault(),this.isLettersOnly&&!this.isAllowedLetterKey(t)&&t.preventDefault()}handleFocus(){this.onFocus.emit()}handleBlur(){this.touched=!0,this.onChange.emit(this.value),this.onBlur.emit()}togglePassword(){this.disabled||(this.showPassword=!this.showPassword)}filterNumbers(t){return t.replace(this.allowDecimals?/[^0-9.]/g:/[^0-9]/g,"")}filterLetters(t){return t.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g,"")}isAllowedNumberKey(t){return!!(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(t.key)||t.ctrlKey||t.metaKey||/^[0-9]$/.test(t.key)||this.allowDecimals&&"."===t.key)}isAllowedLetterKey(t){return!!["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"," "].includes(t.key)||!(!t.ctrlKey&&!t.metaKey)||/^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(t.key)}formatThousands(t,e){const o=t.replace(/[^0-9.]/g,""),[i,r]=o.split("."),s=i.replace(/\B(?=(\d{3})+(?!\d))/g,","),a=void 0!==r?`${s}.${r}`:s;return e?`$${a}`:a}get resolvedId(){return this.inputId||this.label}get inputType(){return this.passwordInput?this.showPassword?"text":"password":"text"}get showHelper(){return!!this.textHelper&&(!this.showHelperOnlyOnError||this.hasError&&this.touched)}get isInvalid(){return this.hasError&&this.touched}render(){const t=this.required&&this.showObligatoryAsterisk&&!this.disabled,e=!!this.icon;return r("div",{key:"a6c762070ca5c0ffb5028f1899d4e026721664ee",class:{"fixed-label-container":this.fixedLabel}},this.fixedLabel&&r("div",{key:"fb223818b568114400aa456e595623c882b8bcd2",class:"input-label Body-S-Regular"},this.label,t&&r("span",{key:"04c522a21ba3e0ec9710d267feb866d79dae7cbb",class:"asterisk"}," *")),r("div",{key:"1672e9954f11ad61e6f224953f97aa7036e5b212",class:"form-group"},r("div",{key:"d9bfc41486fe3f93d5144f55bf89a4ae1a916f5e",class:{"input-container":!0,"input-container--has-icon":e}},e&&r("dropi-icon",{key:"e7d21fd9b115925ed2bc584a6f5c614ea3761922",class:"icon-input",name:this.icon,color:this.iconColor,iconWidth:"20px",iconHeight:"20px",style:{width:"20px",height:"20px"}}),this.passwordInput&&r("dropi-icon",{key:"5593f56ed03acdb79a9e8e4fefac58d585a5a092",class:"icon-input-password",name:this.showPassword?"Eye":"Eye-crossed",iconWidth:"20px",iconHeight:"20px",style:{width:"20px",height:"20px"},color:"Gray-Gray-500",onClick:()=>this.togglePassword()}),r("input",{key:"ef70c2be1606334593269be63234295bdbdf86b1",id:this.resolvedId,class:{"form-control":!0,"form-control-valid":!this.isInvalid&&this.touched&&!!this.value,"form-control-invalid":this.isInvalid,"padding-icon":e,"text-password":this.passwordInput&&!this.showPassword,"fixed-label-input":this.fixedLabel},type:this.inputType,value:this.value,placeholder:this.fixedLabel?this.placeholder:" ",disabled:this.disabled,required:this.required,maxLength:this.maxLength,inputMode:this.inputMode,"data-cy":void 0,onInput:t=>this.handleInput(t),onKeyDown:t=>this.handleKeyDown(t),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),!this.fixedLabel&&r("label",{key:"c0d079355d299b26dc2e8bde4347fd30aa791e21",class:"Body-S-Regular label-bottom",htmlFor:this.resolvedId},this.label,t&&r("span",{key:"fca9bc2745e0ccb7ba3b10c4e3e6b5d8bbb6f645",class:"asterisk"}," *")),this.showHelper&&r("div",{key:"f864cc07f591d0948cb06d6dde1e910bab10187a",class:"form-control-helper"},this.isInvalid&&r("dropi-icon",{key:"be2cf0d632fd8245e817d4023b4e4f060bc80d24",name:"Warning-circle",iconWidth:"12px",iconHeight:"12px",color:"Error-Error-500"}),r("span",{key:"3768369a635e8ac03db24b0ba7fa7a214cc71577",class:{"disabled-helper":this.disabled,"invalid-color":this.isInvalid}},this.textHelper)))))}static get formAssociated(){return!0}static get watchers(){return{inputProperties:[{inputPropertiesChanged:0}],value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center}.icon-input-password{position:absolute;top:50%;right:13px;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:40px}.input-container--has-icon label.label-bottom{left:40px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}"}},[577,"dropi-input",{inputId:[1025,"input-id"],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]},void 0,{inputProperties:[{inputPropertiesChanged:0}],value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]);function n(){"undefined"!=typeof customElements&&["dropi-input","dropi-icon"].forEach((e=>{switch(e){case"dropi-input":customElements.get(t(e))||customElements.define(t(e),a);break;case"dropi-icon":customElements.get(t(e))||s()}}))}n();export{a as D,n as d}

package/dist/dropi-ui/dropi-accordion-item.entry.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, a as getElement, h } from './index-Cvp2LQOM.js';
+
+const dropiAccordionItemCss = () => `:host{display:block;border-bottom:1px solid var(--Gray-Gray-100)}.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:white;border:none;cursor:pointer;text-align:left}.accordion-header-left{display:flex;align-items:center;gap:8px}.accordion-title{font-size:var(--font-size-m);font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-700)}.accordion-chevron{transition:transform 0.3s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height 0.3s ease-out}.accordion-content{padding:0 16px 16px 16px}`;
+
+const DropiAccordionItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** The title of the item — matches Angular `sectionTitle` */
+    sectionTitle = '';
+    /** Index of the item — matches Angular `index` */
+    index;
+    /** Whether the section is expanded */
+    open = false;
+    /** Disable toggling */
+    disabled = false;
+    /** Icon name before title */
+    preIcon = '';
+    contentHeight = '0px';
+    contentRef;
+    openChanged(val) {
+        this.updateHeight(val);
+    }
+    componentDidLoad() {
+        this.updateHeight(this.open);
+    }
+    updateHeight(open) {
+        if (!this.contentRef)
+            return;
+        this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';
+    }
+    handleToggle() {
+        if (this.disabled)
+            return;
+        // Notify parent if needed, or just toggle locally
+        const parent = this.el.closest('dropi-accordion');
+        if (parent && !parent.multiple) {
+            // If parent is single-expand, we notify or handle via event
+        }
+        this.open = !this.open;
+        setTimeout(() => this.updateHeight(this.open), 0);
+    }
+    render() {
+        return (h("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, h("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '28acd44875849665dfc58a5b3040a7ef78e92b6e', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), h("span", { key: 'c19a8f8b33ce36c1903fc428400b2e1bf9b20971', class: "accordion-title" }, this.sectionTitle)), h("span", { key: '7163175dca488646dd13de60978cd623cfc61d12', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: '10c1ea131aaaa8d0fe6542b9d8effe8b3319e3c8', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), h("div", { key: '2d514054e305d92ac97bf661f85d795ff4cc04a9', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: '3ff920a3cd55f22af681b90f220ce05d15db09e1', class: "accordion-content" }, h("slot", { key: 'f703b47dc51acb41b7d455c991a08c8286d53fc2' })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }]
+    }; }
+};
+DropiAccordionItem.style = dropiAccordionItemCss();
+
+export { DropiAccordionItem as dropi_accordion_item };
+//# sourceMappingURL=dropi-accordion-item.entry.esm.js.map
+
+//# sourceMappingURL=dropi-accordion-item.entry.js.map

package/dist/dropi-ui/dropi-accordion-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-accordion-item.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-accordion/dropi-accordion-item.css?tag=dropi-accordion-item&encapsulation=shadow","src/components/dropi-accordion/dropi-accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  border-bottom: 1px solid var(--Gray-Gray-100);\n}\n\n.accordion-header {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  background: white;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n}\n\n.accordion-header-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.accordion-title {\n  font-size: var(--font-size-m);\n  font-weight: var(--font-weight-semibold);\n  color: var(--Gray-Gray-700);\n}\n\n.accordion-chevron {\n  transition: transform 0.3s ease;\n}\n\n.accordion-chevron--open {\n  transform: rotate(180deg);\n}\n\n.accordion-body {\n  overflow: hidden;\n  transition: max-height 0.3s ease-out;\n}\n\n.accordion-content {\n  padding: 0 16px 16px 16px;\n}\n","import { Component, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/**\n * @component dropi-accordion-item\n * Collapsible section item intended to be used inside <dropi-accordion>.\n */\n@Component({\n  tag: 'dropi-accordion-item',\n  styleUrl: 'dropi-accordion-item.css',\n  shadow: true,\n})\nexport class DropiAccordionItem {\n  @Element() el: HTMLElement;\n\n  /** The title of the item — matches Angular `sectionTitle` */\n  @Prop() sectionTitle: string = '';\n  /** Index of the item — matches Angular `index` */\n  @Prop() index: number;\n  /** Whether the section is expanded */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Disable toggling */\n  @Prop() disabled: boolean = false;\n  /** Icon name before title */\n  @Prop() preIcon: string = '';\n\n  @State() private contentHeight: string = '0px';\n  private contentRef?: HTMLDivElement;\n\n  @Watch('open')\n  openChanged(val: boolean) {\n    this.updateHeight(val);\n  }\n\n  componentDidLoad() {\n    this.updateHeight(this.open);\n  }\n\n  private updateHeight(open: boolean) {\n    if (!this.contentRef) return;\n    this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';\n  }\n\n  private handleToggle() {\n    if (this.disabled) return;\n    \n    // Notify parent if needed, or just toggle locally\n    const parent = this.el.closest('dropi-accordion');\n    if (parent && !(parent as any).multiple) {\n       // If parent is single-expand, we notify or handle via event\n    }\n\n    this.open = !this.open;\n    setTimeout(() => this.updateHeight(this.open), 0);\n  }\n\n  render() {\n    return (\n      <div class={{ 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled }}>\n        <button class=\"accordion-header\" onClick={() => this.handleToggle()} aria-expanded={String(this.open)} disabled={this.disabled}>\n          <span class=\"accordion-header-left\">\n            {this.preIcon && <dropi-icon name={this.preIcon} iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-600\" />}\n            <span class=\"accordion-title\">{this.sectionTitle}</span>\n          </span>\n          <span class={{ 'accordion-chevron': true, 'accordion-chevron--open': this.open }}>\n            <dropi-icon name=\"Dropdown-down\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n          </span>\n        </button>\n        <div class=\"accordion-body\" style={{ maxHeight: this.contentHeight }} ref={(el) => this.contentRef = el as HTMLDivElement}>\n          <div class=\"accordion-content\"><slot /></div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,20 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+
+const dropiAccordionCss = () => `:host{display:block;width:100%;margin-bottom:-1px}*,*::before,*::after{box-sizing:border-box}.accordion{border-top:1px solid var(--Gray-Gray-100,#e6eaf2);border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-600, #475066);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}`;
+
+const DropiAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
+    multiple = false;
+    render() {
+        return (h("div", { key: '15575b05adec26235378bb459cdf158bdabe2852', class: "accordion-container" }, h("slot", { key: 'e5411aee85b69e50c777657b0cb2aa7d04d09fa4' })));
+    }
+};
+DropiAccordion.style = dropiAccordionCss();
+
+export { DropiAccordion as dropi_accordion };
+//# sourceMappingURL=dropi-accordion.entry.esm.js.map
+
+//# sourceMappingURL=dropi-accordion.entry.js.map

package/dist/dropi-ui/dropi-accordion.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-accordion.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,gqCAAgqC,CAAC;;MCWrrC,cAAc,GAAA,MAAA;;;;;IAEjB,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ;;;;;;;","names":[],"sources":["src/components/dropi-accordion/dropi-accordion.css?tag=dropi-accordion&encapsulation=shadow","src/components/dropi-accordion/dropi-accordion.tsx"],"sourcesContent":[":host { display: block; width: 100%; margin-bottom: -1px; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.accordion { border-top: 1px solid var(--Gray-Gray-100,#e6eaf2); border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); overflow: hidden; }\n\n.accordion-header {\n  width: 100%; display: flex; align-items: center; justify-content: space-between;\n  padding: var(--Size-4,16px) var(--Size-5,20px);\n  background: transparent; border: none; cursor: pointer; gap: 12px; text-align: left;\n}\n.accordion-header:disabled { cursor: not-allowed; opacity: 0.5; }\n.accordion--open .accordion-header { border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); }\n\n.accordion-header-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }\n.accordion-title { font-size: var(--font-size-m, 16px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-600, #475066); line-height: 1.4; }\n\n.accordion-chevron { display: flex; align-items: center; flex-shrink: 0; transition: transform 0.22s ease; }\n.accordion-chevron--open { transform: rotate(180deg); }\n\n.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }\n.accordion-content { padding: 0 var(--Size-5,20px) var(--Size-4,16px); color: var(--Gray-Gray-600,#475066); font-size: var(--font-size-s,12px); line-height: 1.6; }\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-accordion\n * Container for <dropi-accordion-item> components.\n */\n@Component({\n  tag: 'dropi-accordion',\n  styleUrl: 'dropi-accordion.css',\n  shadow: true,\n})\nexport class DropiAccordion {\n  /** Allows multiple sections to be open at the same time. If false, only one section can be open. */\n  @Prop() multiple: boolean = false;\n\n  render() {\n    return (\n      <div class=\"accordion-container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-alert-legacy.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+
+const dropiAlertLegacyCss = () => `:host{display:block;margin:10px 0}.alert-legacy{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--Border-2);font-size:var(--font-size-s)}.alert-legacy--success{background:var(--Success-Success-50);color:var(--Success-Success-700);border:1px solid var(--Success-Success-200)}.alert-legacy--error{background:var(--Error-Error-50);color:var(--Error-Error-700);border:1px solid var(--Error-Error-200)}.alert-legacy--warning{background:var(--Warning-Warning-50);color:var(--Warning-Warning-700);border:1px solid var(--Warning-Warning-200)}.alert-legacy--info{background:var(--Info-Info-50);color:var(--Info-Info-700);border:1px solid var(--Info-Info-200)}.alert-legacy__close{background:transparent;border:none;font-size:20px;cursor:pointer;color:currentColor;opacity:0.6}.alert-legacy__close:hover{opacity:1}`;
+
+const DropiAlertLegacy = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Visibility toggle */
+    visible = false;
+    /** Alert message */
+    message = '';
+    /** Semantic type: success | error | warning | info */
+    type = 'success';
+    /** Automatically close after timeout */
+    autoClose = false;
+    timer;
+    componentDidLoad() {
+        if (this.autoClose && this.visible) {
+            this.startTimer();
+        }
+    }
+    startTimer() {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+            this.visible = false;
+        }, 7000);
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        return (h("div", { class: { 'alert-legacy': true, [`alert-legacy--${this.type}`]: true } }, h("div", { class: "alert-legacy__content" }, h("span", { class: "alert-legacy__message" }, this.message)), h("button", { class: "alert-legacy__close", onClick: () => this.visible = false }, "\u00D7")));
+    }
+};
+DropiAlertLegacy.style = dropiAlertLegacyCss();
+
+export { DropiAlertLegacy as dropi_alert_legacy };
+//# sourceMappingURL=dropi-alert-legacy.entry.esm.js.map
+
+//# sourceMappingURL=dropi-alert-legacy.entry.js.map

package/dist/dropi-ui/dropi-alert-legacy.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-alert-legacy.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,s1BAAs1B,CAAC;;MCW72B,gBAAgB,GAAA,MAAA;;;;;IAEF,OAAO,GAAY,KAAK;;IAEzC,OAAO,GAAW,EAAE;;IAEpB,IAAI,GAA6C,SAAS;;IAE1D,SAAS,GAAY,KAAK;AAE1B,IAAA,KAAK;IAEb,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAClC,IAAI,CAAC,UAAU,EAAE;;;IAIb,UAAU,GAAA;AAChB,QAAA,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,MAAK;AAC3B,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;SACrB,EAAE,IAAI,CAAC;;IAGV,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAA,cAAA,EAAiB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACxE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,uBAAuB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACtD,EACN,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,EAAA,EAAA,QAAA,CAE9D,CACL;;;;;;;","names":[],"sources":["src/components/dropi-alert-legacy/dropi-alert-legacy.css?tag=dropi-alert-legacy&encapsulation=shadow","src/components/dropi-alert-legacy/dropi-alert-legacy.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin: 10px 0;\n}\n\n.alert-legacy {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-radius: var(--Border-2);\n  font-size: var(--font-size-s);\n}\n\n.alert-legacy--success { background: var(--Success-Success-50); color: var(--Success-Success-700); border: 1px solid var(--Success-Success-200); }\n.alert-legacy--error   { background: var(--Error-Error-50); color: var(--Error-Error-700); border: 1px solid var(--Error-Error-200); }\n.alert-legacy--warning { background: var(--Warning-Warning-50); color: var(--Warning-Warning-700); border: 1px solid var(--Warning-Warning-200); }\n.alert-legacy--info    { background: var(--Info-Info-50); color: var(--Info-Info-700); border: 1px solid var(--Info-Info-200); }\n\n.alert-legacy__close {\n  background: transparent;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: currentColor;\n  opacity: 0.6;\n}\n\n.alert-legacy__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-alert-legacy\n * Legacy alert component for backward compatibility with Angular core.\n */\n@Component({\n  tag: 'dropi-alert-legacy',\n  styleUrl: 'dropi-alert-legacy.css',\n  shadow: true,\n})\nexport class DropiAlertLegacy {\n  /** Visibility toggle */\n  @Prop({ mutable: true }) visible: boolean = false;\n  /** Alert message */\n  @Prop() message: string = '';\n  /** Semantic type: success | error | warning | info */\n  @Prop() type: 'success' | 'error' | 'warning' | 'info' = 'success';\n  /** Automatically close after timeout */\n  @Prop() autoClose: boolean = false;\n\n  private timer: any;\n\n  componentDidLoad() {\n    if (this.autoClose && this.visible) {\n      this.startTimer();\n    }\n  }\n\n  private startTimer() {\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.visible = false;\n    }, 7000);\n  }\n\n  render() {\n    if (!this.visible) return null;\n\n    return (\n      <div class={{ 'alert-legacy': true, [`alert-legacy--${this.type}`]: true }}>\n        <div class=\"alert-legacy__content\">\n           <span class=\"alert-legacy__message\">{this.message}</span>\n        </div>\n        <button class=\"alert-legacy__close\" onClick={() => this.visible = false}>\n           &times;\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-alert-modal.entry.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:visible;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.custom-content{width:100%;text-align:left;margin-top:var(--Size-2);display:flex;flex-direction:column;gap:var(--Size-3)}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}`;
+
+const DropiAlertModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.primaryButtonEvent = createEvent(this, "primaryButtonEvent", 7);
+        this.secondaryButtonEvent = createEvent(this, "secondaryButtonEvent", 7);
+        this.modalOpenChange = createEvent(this, "modalOpenChange", 7);
+        this.onHide = createEvent(this, "onHide", 7);
+    }
+    /** Controls visibility */
+    visible = false;
+    /** Modal type — determines Lottie animation */
+    type = 'question';
+    /** Bold title */
+    tittle = '';
+    /** Body message */
+    message = '';
+    /** Primary button label */
+    primaryButton = 'Accept';
+    /** Secondary button label (hidden if empty) */
+    secondaryButton = '';
+    /** Show loading state with loading.json Lottie */
+    loading = false;
+    /** Show close icon in header */
+    closable = false;
+    /** Hide action buttons */
+    displayButtons = true;
+    /** Loading title */
+    loadingTitle = 'Loading';
+    /** Loading message */
+    loadingMessage = 'Please wait a moment';
+    /**
+     * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).
+     * Useful for step-by-step flows.
+     */
+    isStep = false;
+    /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
+    baseZIndex = 0;
+    /**
+     * Convenience object prop — matches Angular `params: ModalParams`.
+     * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
+     * loadingMessage, closable, displayButtons.
+     * When provided, its values override the corresponding individual props.
+     */
+    params = null;
+    paramsChanged(val) {
+        if (!val)
+            return;
+        if (val.tittle !== undefined)
+            this.tittle = val.tittle;
+        if (val.type !== undefined)
+            this.type = val.type;
+        if (val.message !== undefined)
+            this.message = val.message;
+        if (val.primaryButton !== undefined)
+            this.primaryButton = val.primaryButton;
+        if (val.secondaryButton !== undefined)
+            this.secondaryButton = val.secondaryButton;
+        if (val.loadingTitle !== undefined)
+            this.loadingTitle = val.loadingTitle;
+        if (val.loadingMessage !== undefined)
+            this.loadingMessage = val.loadingMessage;
+        if (val.closable !== undefined)
+            this.closable = val.closable;
+        if (val.displayButtons !== undefined)
+            this.displayButtons = val.displayButtons;
+    }
+    /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
+    primaryButtonEvent;
+    /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
+    secondaryButtonEvent;
+    /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
+    modalOpenChange;
+    /** Emitted when modal is hidden — matches Angular 'onHide' */
+    onHide;
+    lottieMap = {
+        question: '/assets/lottie-files/question.json',
+        warning: '/assets/lottie-files/warning.json',
+        success: '/assets/lottie-files/success.json',
+        error: '/assets/lottie-files/failure.json',
+        loading: '/assets/lottie-files/loading.json',
+    };
+    componentWillLoad() {
+        if (this.params)
+            this.paramsChanged(this.params);
+    }
+    async show() {
+        this.visible = true;
+    }
+    async hide() {
+        this.visible = false;
+    }
+    handlePrimary() {
+        this.primaryButtonEvent.emit(true);
+        if (!this.isStep) {
+            this.visible = false;
+            this.modalOpenChange.emit(false);
+        }
+    }
+    handleSecondary() {
+        this.secondaryButtonEvent.emit(true);
+        this.visible = false;
+        this.modalOpenChange.emit(false);
+    }
+    onModalHide() {
+        this.visible = false;
+        this.modalOpenChange.emit(false);
+        this.onHide.emit();
+    }
+    render() {
+        const lottieKey = this.loading ? 'loading' : this.type;
+        const isLottieLoading = lottieKey === 'loading';
+        return (h("dropi-modal", { key: '8581cbc944d42889228cb21fa27bf4e8b3bf1e16', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, h("div", { key: '7208cbe742dab77bcee14150998aff5647fd41af', class: "body-alert" }, this.lottieMap[lottieKey] && (h("div", { key: '3b4d36963f8d6547556eee704823c8e34805b8d8', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), h("div", { key: 'dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f', class: "content-alert" }, h("h2", { key: '685df4cb76145cf6e965dd94e5f3fe60f828100c' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: 'f9e5b699816236148bc00c5046c6cc67eb86ae01' }, this.loading ? this.loadingMessage : this.message)), h("div", { key: '2e9280865cad761bea5cdd88b972734c11ab7737', class: "custom-content" }, h("slot", { key: '4fd36baa1455e7793a1e5291b52448707e3aa448' })), !this.loading && this.displayButtons && (h("div", { key: '451bd3d90ec780499d9956a8a57a0d1461406fa9', class: "actions" }, this.secondaryButton && h("dropi-button", { key: 'b60c30cc92cc080c01e1bf337a5e4b78f561be81', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: '2b8696a02b253d289a1baef2116cffe436346717', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
+    }
+    static get watchers() { return {
+        "params": [{
+                "paramsChanged": 0
+            }]
+    }; }
+};
+DropiAlertModal.style = dropiAlertModalCss();
+
+export { DropiAlertModal as dropi_alert_modal };
+//# sourceMappingURL=dropi-alert-modal.entry.esm.js.map
+
+//# sourceMappingURL=dropi-alert-modal.entry.js.map

package/dist/dropi-ui/dropi-alert-modal.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-alert-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert-modal/dropi-alert-modal.css?tag=dropi-alert-modal","src/components/dropi-alert-modal/dropi-alert-modal.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.body-alert {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--Size-3);\n  width: 100%;\n  flex: 1;\n  overflow: visible;\n  padding-bottom: var(--Size-2);\n}\n\n/* ── Lottie regular ───────────────────────────────────────────────── */\n.lottie-img {\n  width: 120px;\n  height: 120px;\n  overflow: hidden;\n  flex-shrink: 0;\n  align-self: center;\n  margin-top: -8px;\n  margin-bottom: var(--Size-2);\n}\n\n.lottie-img lottie-player {\n  display: block;\n  width: 120px;\n  height: 120px;\n}\n\n/* ── Lottie loading ───────────────────────────────────────────────── */\n.lottie-img--loading {\n  width: 100%;\n  height: 120px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.lottie-img--loading lottie-player {\n  width: 300px;\n  height: auto;\n  flex-shrink: 0;\n}\n\n/* ── Content ──────────────────────────────────────────────────────── */\n.content-alert {\n  text-align: center;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.content-alert h2 {\n  color: var(--Gray-Gray-800);\n  font-size: 19px;\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\n.content-alert p {\n  color: var(--Gray-Gray-500);\n  font-size: var(--font-size-s);\n  margin-bottom: var(--Size-2);\n  overflow-wrap: anywhere;\n  max-height: 100px;\n  overflow: auto;\n}\n\n.custom-content {\n  width: 100%;\n  text-align: left;\n  margin-top: var(--Size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-3);\n}\n\n/* ── Actions ──────────────────────────────────────────────────────── */\n.actions {\n  display: flex;\n  gap: var(--Size-3);\n  width: 100%;\n}\n\n.actions dropi-button {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n}\n\n@media (max-width: 768px) {\n  .actions {\n    flex-direction: column;\n  }\n\n  .actions dropi-button {\n    width: 100%;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Method, Watch, h } from '@stencil/core';\n\nexport type AlertModalType = 'question' | 'warning' | 'success' | 'error' | 'loading';\n\n/**\n * @component dropi-alert-modal\n * Confirmation/alert modal with Lottie animation, title, message and action buttons.\n * Uses dropi-modal internally.\n *\n * @example\n * const el = document.querySelector('dropi-alert-modal');\n * el.visible = true;\n */\n@Component({\n  tag: 'dropi-alert-modal',\n  styleUrl: 'dropi-alert-modal.css',\n  shadow: false,\n})\nexport class DropiAlertModal {\n  /** Controls visibility */\n  @Prop({ mutable: true, reflect: true }) visible: any = false;\n  /** Modal type — determines Lottie animation */\n  @Prop({ mutable: true }) type: AlertModalType = 'question';\n  /** Bold title */\n  @Prop({ mutable: true }) tittle: string = '';\n  /** Body message */\n  @Prop({ mutable: true }) message: string = '';\n  /** Primary button label */\n  @Prop({ mutable: true }) primaryButton: string = 'Accept';\n  /** Secondary button label (hidden if empty) */\n  @Prop({ mutable: true }) secondaryButton: string = '';\n  /** Show loading state with loading.json Lottie */\n  @Prop() loading: boolean = false;\n  /** Show close icon in header */\n  @Prop({ mutable: true }) closable: boolean = false;\n  /** Hide action buttons */\n  @Prop({ mutable: true }) displayButtons: boolean = true;\n  /** Loading title */\n  @Prop({ mutable: true }) loadingTitle: string = 'Loading';\n  /** Loading message */\n  @Prop({ mutable: true }) loadingMessage: string = 'Please wait a moment';\n  /**\n   * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).\n   * Useful for step-by-step flows.\n   */\n  @Prop() isStep: boolean = false;\n  /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */\n  @Prop() baseZIndex: number = 0;\n  /**\n   * Convenience object prop — matches Angular `params: ModalParams`.\n   * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,\n   * loadingMessage, closable, displayButtons.\n   * When provided, its values override the corresponding individual props.\n   */\n  @Prop() params: any = null;\n\n  @Watch('params')\n  paramsChanged(val: any) {\n    if (!val) return;\n    if (val.tittle !== undefined) this.tittle = val.tittle;\n    if (val.type !== undefined) this.type = val.type;\n    if (val.message !== undefined) this.message = val.message;\n    if (val.primaryButton !== undefined) this.primaryButton = val.primaryButton;\n    if (val.secondaryButton !== undefined) this.secondaryButton = val.secondaryButton;\n    if (val.loadingTitle !== undefined) this.loadingTitle = val.loadingTitle;\n    if (val.loadingMessage !== undefined) this.loadingMessage = val.loadingMessage;\n    if (val.closable !== undefined) this.closable = val.closable;\n    if (val.displayButtons !== undefined) this.displayButtons = val.displayButtons;\n  }\n\n  /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */\n  @Event() primaryButtonEvent: EventEmitter<boolean>;\n  /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */\n  @Event() secondaryButtonEvent: EventEmitter<boolean>;\n  /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */\n  @Event() modalOpenChange: EventEmitter<boolean>;\n  /** Emitted when modal is hidden — matches Angular 'onHide' */\n  @Event() onHide: EventEmitter<void>;\n\n  private readonly lottieMap: Record<string, string> = {\n    question: '/assets/lottie-files/question.json',\n    warning: '/assets/lottie-files/warning.json',\n    success: '/assets/lottie-files/success.json',\n    error: '/assets/lottie-files/failure.json',\n    loading: '/assets/lottie-files/loading.json',\n  };\n\n  componentWillLoad() {\n    if (this.params) this.paramsChanged(this.params);\n  }\n\n  @Method() async show() {\n    this.visible = true;\n  }\n  @Method() async hide() {\n    this.visible = false;\n  }\n\n  private handlePrimary() {\n    this.primaryButtonEvent.emit(true);\n    if (!this.isStep) {\n      this.visible = false;\n      this.modalOpenChange.emit(false);\n    }\n  }\n\n  private handleSecondary() {\n    this.secondaryButtonEvent.emit(true);\n    this.visible = false;\n    this.modalOpenChange.emit(false);\n  }\n\n  private onModalHide() {\n    this.visible = false;\n    this.modalOpenChange.emit(false);\n    this.onHide.emit();\n  }\n\n  render() {\n    const lottieKey = this.loading ? 'loading' : this.type;\n    const isLottieLoading = lottieKey === 'loading';\n\n    return (\n      <dropi-modal\n        visible={this.visible}\n        showHeader={this.closable}\n        showCloseIcon={this.closable}\n        dismissable={false}\n        closeOnEscape={false}\n        showFooter={false}\n        size=\"s\"\n        onOnHide={() => this.onModalHide()}\n      >\n        <div class=\"body-alert\">\n          {this.lottieMap[lottieKey] && (\n            <div class={`lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}`}>\n              <lottie-player\n                key={lottieKey}\n                src={this.lottieMap[lottieKey]}\n                background=\"transparent\"\n                speed=\"1\"\n                loop\n                autoplay\n              />\n            </div>\n          )}\n\n          <div class=\"content-alert\">\n            <h2>{this.loading ? this.loadingTitle : this.tittle}</h2>\n            <p>{this.loading ? this.loadingMessage : this.message}</p>\n          </div>\n\n          <div class=\"custom-content\">\n            <slot />\n          </div>\n\n          {!this.loading && this.displayButtons && (\n            <div class=\"actions\">\n              {this.secondaryButton && <dropi-button text={this.secondaryButton} severity=\"secondary\" onClick={() => this.handleSecondary()} fullWidth />}\n              <dropi-button text={this.primaryButton} severity=\"primary\" onClick={() => this.handlePrimary()} fullWidth />\n            </div>\n          )}\n        </div>\n      </dropi-modal>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,65 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.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);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);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, #ffffff)}.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',
+};
+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.onClose = createEvent(this, "onClose", 7);
+        this.onButtonClick = createEvent(this, "onButtonClick", 7);
+        this.onClickLink = createEvent(this, "onClickLink", 7);
+    }
+    /** Alert message text (supports plain text) */
+    message = '';
+    /** Layout type: default (inline) | flag (accented left border) */
+    type = 'default';
+    /** Semantic state */
+    state = 'success';
+    /** Show the × close button */
+    dismissable = true;
+    /** Show action button */
+    showButton = false;
+    /** Action button label */
+    buttonText = 'Close';
+    /** Anchor/link label */
+    anchorText = 'none';
+    /** Anchor href */
+    anchorUrl = 'none';
+    /** Whether the alert is visible */
+    showAlert = true;
+    /** Link text (alternative to anchorText) */
+    textLink = '';
+    /** Link URL (alternative to anchorUrl) */
+    linkUrl = '';
+    /** Clicked text tracking */
+    clickedText = '';
+    /** Emitted when the alert is dismissed */
+    onClose;
+    /** Emitted when the action button is clicked */
+    onButtonClick;
+    /** Emitted when the anchor link is clicked */
+    onClickLink;
+    render() {
+        if (!this.showAlert)
+            return null;
+        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "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 || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.onClickLink.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.onButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.onClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
+    }
+};
+DropiAlert.style = dropiAlertCss();
+
+export { DropiAlert as dropi_alert };
+//# sourceMappingURL=dropi-alert.entry.esm.js.map
+
+//# sourceMappingURL=dropi-alert.entry.js.map

package/dist/dropi-ui/dropi-alert.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-alert.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert/dropi-alert.css?tag=dropi-alert&encapsulation=shadow","src/components/dropi-alert/dropi-alert.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.alert {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid transparent;\n  width: 100%;\n}\n\n/* ── State colors ───────────────────────────────────────── */\n.alert--success {\n  background: var(--Success-Success-50, #e7f8f3);\n  border-color: var(--Success-Success-500, #0abb87);\n}\n\n.alert--error {\n  background: var(--Error-Error-50, #fef0f0);\n  border-color: var(--Error-Error-500, #f46a6b);\n}\n\n.alert--warning {\n  background: var(--Warning-Warning-50, #fef8ed);\n  border-color: var(--Warning-Warning-500, #f1b44c);\n}\n\n.alert--info {\n  background: var(--Info-Info-50, #eef6fe);\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n/* ── Flag type (left accent border) ────────────────────── */\n.alert--flag {\n  padding: var(--Size-1, 4px) var(--Size-2, 8px);\n  border-radius: var(--Border-1, 4px);\n  border: none !important;\n  justify-content: center;\n}\n.alert--flag .alert__body {\n  justify-content: center;\n  text-align: center;\n}\n.alert--flag .alert__message {\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-regular);\n}\n\n/* ── Icon ───────────────────────────────────────────────── */\n.alert__icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding-top: 1px;\n}\n\n/* ── Body ───────────────────────────────────────────────── */\n.alert__body {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n}\n\n.alert__message {\n  font-size: var(--font-size-s);\n  color: var(--Gray-600, #475066);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.5;\n}\n\n.alert__link {\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n/* ── Actions ────────────────────────────────────────────── */\n.alert__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  flex-shrink: 0;\n}\n\n.alert__btn {\n  height: 28px;\n  padding: 0 var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid var(--Primary-Primary-500, #f49a3d);\n  background: transparent;\n  color: var(--Primary-Primary-500, #f49a3d);\n  font-size: var(--font-size-xs, 10px);\n  font-family: inherit;\n  font-weight: var(--font-weight-bold, 700);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.alert__btn:hover {\n  background: var(--Primary-Primary-500, #f49a3d);\n  color: var(--Neutral-White, #ffffff);\n}\n\n.alert__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s;\n}\n\n.alert__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AlertState = 'success' | 'error' | 'warning' | 'info';\nexport type AlertType = 'default' | 'flag';\n\nconst STATE_ICONS: Record<AlertState, string> = {\n  success: 'Check-circle',\n  error: 'Warning-circle',\n  warning: 'Warning-triangle',\n  info: 'Info',\n};\n\nconst STATE_COLORS: Record<AlertState, string> = {\n  success: 'Success-Success-500',\n  error: 'Error-Error-500',\n  warning: 'Warning-Warning-500',\n  info: 'Info-Info-500',\n};\n\n/**\n * @component dropi-alert\n * Alert banner with state variants (success/error/warning/info),\n * optional action button, anchor link, and dismissable close icon.\n */\n@Component({\n  tag: 'dropi-alert',\n  styleUrl: 'dropi-alert.css',\n  shadow: true,\n})\nexport class DropiAlert {\n  /** Alert message text (supports plain text) */\n  @Prop() message: string = '';\n  /** Layout type: default (inline) | flag (accented left border) */\n  @Prop() type: AlertType = 'default';\n  /** Semantic state */\n  @Prop() state: AlertState = 'success';\n  /** Show the × close button */\n  @Prop() dismissable: boolean = true;\n  /** Show action button */\n  @Prop() showButton: boolean = false;\n  /** Action button label */\n  @Prop() buttonText: string = 'Close';\n  /** Anchor/link label */\n  @Prop() anchorText: string = 'none';\n  /** Anchor href */\n  @Prop() anchorUrl: string = 'none';\n  /** Whether the alert is visible */\n  @Prop({ mutable: true }) showAlert: boolean = true;\n  /** Link text (alternative to anchorText) */\n  @Prop() textLink: string = '';\n  /** Link URL (alternative to anchorUrl) */\n  @Prop() linkUrl: string = '';\n  /** Clicked text tracking */\n  @Prop() clickedText: string = '';\n\n  /** Emitted when the alert is dismissed */\n  @Event() onClose: EventEmitter<void>;\n  /** Emitted when the action button is clicked */\n  @Event() onButtonClick: EventEmitter<void>;\n  /** Emitted when the anchor link is clicked */\n  @Event() onClickLink: EventEmitter<void>;\n\n  render() {\n    if (!this.showAlert) return null;\n\n    return (\n      <div class={{ 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true }}>\n\n        {this.type !== 'flag' && (\n          <div class=\"alert__icon\">\n            <dropi-icon\n              name={STATE_ICONS[this.state]}\n              iconWidth=\"18px\"\n              iconHeight=\"18px\"\n              color={STATE_COLORS[this.state]}\n            />\n          </div>\n        )}\n\n        <div class=\"alert__body\">\n          <span class=\"alert__message\">{this.message}</span>\n\n          {this.anchorText && (\n            <a\n              class=\"alert__link\"\n              href={this.anchorUrl || this.linkUrl || '#'}\n              onClick={(e) => { e.preventDefault(); this.onClickLink.emit(); }}\n            >\n              {this.anchorText}\n            </a>\n          )}\n        </div>\n\n        <div class=\"alert__actions\">\n          {this.showButton && this.buttonText && this.type !== 'flag' && (\n            <button class=\"alert__btn\" onClick={() => this.onButtonClick.emit()}>\n              {this.buttonText}\n            </button>\n          )}\n\n          {this.dismissable && (\n            <button\n              class=\"alert__close\"\n              onClick={() => { this.showAlert = false; this.onClose.emit(); }}\n              aria-label=\"Cerrar\"\n            >\n              <dropi-icon name=\"Close-small\" iconWidth=\"18px\" iconHeight=\"18px\" color=\"Gray-Gray-500\" />\n            </button>\n          )}\n        </div>\n\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,32 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.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: 'db9310b5c789b079fc0f9043a619bd22f9a60151', 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 };
+//# sourceMappingURL=dropi-avatars.entry.esm.js.map
+
+//# sourceMappingURL=dropi-avatars.entry.js.map

package/dist/dropi-ui/dropi-avatars.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-avatars.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,0sBAA0sB,CAAC;;ACI1uB,MAAM,QAAQ,GAAG,CAAA,8SAAA,CAAgT;MAWpT,YAAY,GAAA,MAAA;;;;;IAEf,KAAK,GAAW,EAAE;;IAElB,GAAG,GAAW,QAAQ;;IAEtB,IAAI,GAAe,OAAO;;IAE1B,QAAQ,GAAW,EAAE;AAErB,IAAA,WAAW,CAAC,CAAQ,EAAA;AACzB,QAAA,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,QAAQ;;IAG/C,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;QAChE,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe;AAEnD,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,WAAW,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAC9D,YAAY,IACX,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAAE,eAAe,CAAO,KAErD,CAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CACnC,CACH,CACM;;;;;;;","names":[],"sources":["src/components/dropi-avatars/dropi-avatars.css?tag=dropi-avatars&encapsulation=shadow","src/components/dropi-avatars/dropi-avatars.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.avatar {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n/* ── Size variants ─────────────────────────────────────── */\n.avatar--users,\n.avatar--transport,\n.avatar--payment {\n  width: 35px;\n  height: 35px;\n}\n\n.avatar--supplier {\n  width: 70px;\n  height: 70px;\n}\n\n.avatar--counter {\n  width: 33px;\n  height: 33px;\n}\n\n/* ── Initials fallback ─────────────────────────────────── */\n.avatar__initials {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: var(--Primary-Primary-100, #fde9d0);\n  color: var(--Primary-Primary-600, #d4872e);\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type AvatarType = 'users' | 'transport' | 'supplier' | 'payment' | 'counter';\n\nconst FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;\n\n/**\n * @component dropi-avatars\n * Avatar component with image, initials fallback, and type-based size variants.\n */\n@Component({\n  tag: 'dropi-avatars',\n  styleUrl: 'dropi-avatars.css',\n  shadow: true,\n})\nexport class DropiAvatars {\n  /** Image URL */\n  @Prop() image: string = '';\n  /** Alt text for the image */\n  @Prop() alt: string = 'Avatar';\n  /** Size/context variant */\n  @Prop() type: AvatarType = 'users';\n  /** Initials to show when no image (max 2 chars) */\n  @Prop() initials: string = '';\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src = FALLBACK;\n  }\n\n  render() {\n    const displayInitials = this.initials?.slice(0, 2).toUpperCase();\n    const showInitials = !this.image && displayInitials;\n\n    return (\n      <figure class={{ 'avatar': true, [`avatar--${this.type}`]: true }}>\n        {showInitials ? (\n          <div class=\"avatar__initials\">{displayInitials}</div>\n        ) : (\n          <img\n            src={this.image || FALLBACK}\n            alt={this.alt}\n            onError={(e) => this.handleError(e)}\n          />\n        )}\n      </figure>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-badge-legacy.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+
+const dropiBadgeLegacyCss = () => `:host{display:inline-block}.badge-legacy{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:10px;font-size:11px;font-weight:600}.badge-legacy--primary{background:var(--Primary-Primary-50);color:var(--Primary-Primary-500)}.badge-legacy--secondary{background:var(--Gray-Gray-100);color:var(--Gray-Gray-600)}.badge-legacy--tertiary{background:var(--Success-Success-50);color:var(--Success-Success-500)}`;
+
+const DropiBadgeLegacy = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Type: state | counter */
+    type = 'state';
+    /** State: check | pending */
+    state = 'check';
+    /** Variant: primary | secondary | tertiary */
+    variant = 'primary';
+    /** Count (for type counterpart) */
+    count = 0;
+    render() {
+        const isCounter = this.type === 'counter';
+        return (h("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
+                'badge-legacy': true,
+                [`badge-legacy--${this.variant}`]: true,
+                [`badge-legacy--${this.type}`]: true
+            } }, isCounter ? (h("span", { class: "badge-count" }, this.count)) : (h("span", { class: { 'badge-state-icon': true, [`badge-state--${this.state}`]: true } }, this.state === 'check' ? '✓' : '...'))));
+    }
+};
+DropiBadgeLegacy.style = dropiBadgeLegacyCss();
+
+export { DropiBadgeLegacy as dropi_badge_legacy };
+//# sourceMappingURL=dropi-badge-legacy.entry.esm.js.map
+
+//# sourceMappingURL=dropi-badge-legacy.entry.js.map

package/dist/dropi-ui/dropi-badge-legacy.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-badge-legacy.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,ibAAib,CAAC;;MCWxc,gBAAgB,GAAA,MAAA;;;;;IAEnB,IAAI,GAAwB,OAAO;;IAEnC,KAAK,GAAwB,OAAO;;IAEpC,OAAO,GAAyC,SAAS;;IAEzD,KAAK,GAAW,CAAC;IAEzB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE;AACV,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,CAAC,iBAAiB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACvC,gBAAA,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG;AACjC,aAAA,EAAA,EACE,SAAS,IACR,YAAM,KAAK,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,KAE7C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAC3E,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,GAAG,GAAG,KAAK,CACjC,CACR,CACG;;;;;;;","names":[],"sources":["src/components/dropi-badge-legacy/dropi-badge-legacy.css?tag=dropi-badge-legacy&encapsulation=shadow","src/components/dropi-badge-legacy/dropi-badge-legacy.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.badge-legacy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.badge-legacy--primary { background: var(--Primary-Primary-50); color: var(--Primary-Primary-500); }\n.badge-legacy--secondary { background: var(--Gray-Gray-100); color: var(--Gray-Gray-600); }\n.badge-legacy--tertiary { background: var(--Success-Success-50); color: var(--Success-Success-500); }\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-badge-legacy\n * Legacy badge component used in tabs and elsewhere.\n */\n@Component({\n  tag: 'dropi-badge-legacy',\n  styleUrl: 'dropi-badge-legacy.css',\n  shadow: true,\n})\nexport class DropiBadgeLegacy {\n  /** Type: state | counter */\n  @Prop() type: 'state' | 'counter' = 'state';\n  /** State: check | pending */\n  @Prop() state: 'check' | 'pending' = 'check';\n  /** Variant: primary | secondary | tertiary */\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  /** Count (for type counterpart) */\n  @Prop() count: number = 0;\n\n  render() {\n    const isCounter = this.type === 'counter';\n    return (\n      <div class={{\n        'badge-legacy': true,\n        [`badge-legacy--${this.variant}`]: true,\n        [`badge-legacy--${this.type}`]: true\n      }}>\n        {isCounter ? (\n          <span class=\"badge-count\">{this.count}</span>\n        ) : (\n          <span class={{ 'badge-state-icon': true, [`badge-state--${this.state}`]: true }}>\n             {this.state === 'check' ? '✓' : '...'}\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}