@dropi/ui 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/dropi-ui/p-082b7039.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as a}from"./p-Twbb5MNM.js";const i=class{constructor(a){t(this,a),this.dropiAction=e(this,"dropiAction"),this.dropiSecondaryAction=e(this,"dropiSecondaryAction")}header="";description="";imageUrl="";imageAlt="Sin resultados";actionLabel="";secondaryLabel="";dropiAction;dropiSecondaryAction;render(){return a("div",{key:"1aea01715d0e50b308904d496be7bc2f607bf5aa",class:"empty-state"},this.imageUrl?a("img",{class:"empty-state-img",src:this.imageUrl,alt:this.imageAlt}):a("div",{class:"empty-state-placeholder"},a("svg",{viewBox:"0 0 80 80",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"empty-state-svg"},a("rect",{width:"80",height:"80",rx:"40",fill:"var(--Gray-Gray-100, #e6eaf2)"}),a("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&&a("h3",{key:"41e5da8d482456f4b9006449a27a9f9d172d87b4",class:"empty-state-title"},this.header),this.description&&a("p",{key:"ffa6399489ec56cd2cf84bb39d12c112bee64302",class:"empty-state-description"},this.description),a("slot",{key:"6ccdfed94a22ad7ece2388fba3d4734aa6a2b509"}),(this.actionLabel||this.secondaryLabel)&&a("div",{key:"0da97fd516eccd1cabe846b2d002fdf75306674d",class:"empty-state-actions"},this.secondaryLabel&&a("dropi-button",{key:"de1b1ad4d6a50cfd251de243a3b5ea3beb10019b",text:this.secondaryLabel,severity:"secondary",onDropiClick:()=>this.dropiSecondaryAction.emit()}),this.actionLabel&&a("dropi-button",{key:"59f3b47ee14f3ac89aa4acc5b42d856f26d02d19",text:this.actionLabel,severity:"primary",onDropiClick:()=>this.dropiAction.emit()})))}};i.style=":host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}";export{i as dropi_empty_state}

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

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

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

@@ -1 +0,0 @@
-import{r as a,c as r,h as e}from"./p-Twbb5MNM.js";const t=class{constructor(e){a(this,e),this.dropiPageChange=r(this,"dropiPageChange")}total=0;pageSize=10;page=1;maxPages=5;showPageSizeSelector=!1;pageSizeOptions=[10,25,50,100];dropiPageChange;parsedOptions=[10,25,50,100];optionsChanged(a){this.parsedOptions="string"==typeof a?JSON.parse(a):a}componentWillLoad(){this.optionsChanged(this.pageSizeOptions)}get totalPages(){return Math.max(1,Math.ceil(this.total/this.pageSize))}get pageNumbers(){const a=this.totalPages,r=this.page,e=this.maxPages;if(a<=e)return Array.from({length:a},((a,r)=>r+1));const t=Math.floor(e/2);let i=Math.max(1,r-t),o=Math.min(a,i+e-1);o-i<e-1&&(i=Math.max(1,o-e+1));const n=[];i>1&&(n.push(1),i>2&&n.push("..."));for(let a=i;a<=o;a++)n.push(a);return o<a&&(o<a-1&&n.push("..."),n.push(a)),n}goTo(a){a<1||a>this.totalPages||a===this.page||(this.page=a,this.dropiPageChange.emit({page:this.page,pageSize:this.pageSize}))}onPageSizeChange(a){this.pageSize=Number(a.target.value),this.page=1,this.dropiPageChange.emit({page:this.page,pageSize:this.pageSize})}render(){const a=this.pageNumbers,r=this.page<=1,t=this.page>=this.totalPages;return e("div",{key:"3fbb545d6ff0b345da7698e51bfdee51a13de49e",class:"paginator"},this.showPageSizeSelector&&e("div",{key:"7ae643988a60f2016dce24b53bb9f5ac13414cf0",class:"paginator-size"},e("span",{key:"fee6db32b0d13e6c455174f1c57fb35401e65c10",class:"paginator-size-label"},"Por página:"),e("select",{key:"0e37733de81c70ac274c8e89af65f0f94115ecb5",class:"paginator-size-select",onChange:a=>this.onPageSizeChange(a)},this.parsedOptions.map((a=>e("option",{value:a,selected:a===this.pageSize},a))))),e("div",{key:"fb70589d0fd3d8072190099fe187359439707dc1",class:"paginator-pages"},e("button",{key:"6348dda14005ed8dcd3e96d788715bbd5a9d432e",class:{"paginator-btn":!0,"paginator-btn--arrow":!0},disabled:r,onClick:()=>this.goTo(this.page-1),"aria-label":"Anterior"},e("dropi-icon",{key:"2b2c17304b3c246a660b71f5ab5feedfb93ba044",name:"Dropdown-left",width:"16px",height:"16px",color:r?"Gray-Gray-300":"Gray-Gray-600"})),a.map(((a,r)=>"..."===a?e("span",{class:"paginator-ellipsis",key:`e${r}`},"…"):e("button",{key:a,class:{"paginator-btn":!0,"paginator-btn--active":a===this.page},onClick:()=>this.goTo(a),"aria-current":a===this.page?"page":void 0},a))),e("button",{key:"fea38306411fd4a73f35231ff632d8846301dd5f",class:{"paginator-btn":!0,"paginator-btn--arrow":!0},disabled:t,onClick:()=>this.goTo(this.page+1),"aria-label":"Siguiente"},e("dropi-icon",{key:"f7ed587cb578ef0b9872f290cdc17eebe2f9efeb",name:"Dropdown-Right",width:"16px",height:"16px",color:t?"Gray-Gray-300":"Gray-Gray-600"}))))}static get watchers(){return{pageSizeOptions:[{optionsChanged:0}]}}};t.style=":host{display:block}*,*::before,*::after{box-sizing:border-box}.paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--Size-4, 16px);flex-wrap:wrap}.paginator-pages{display:flex;align-items:center;gap:var(--Size-1, 4px)}.paginator-btn{min-width:32px;height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease, border-color 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-300, #a3abbf)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);font-weight:var(--font-weight-bold, 700)}.paginator-btn--active:hover{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{border-color:transparent;background:transparent}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2)}.paginator-ellipsis{color:var(--Gray-Gray-400, #858ea6);padding:0 4px;font-size:var(--font-size-s, 12px);display:flex;align-items:center}.paginator-size{display:flex;align-items:center;gap:var(--Size-2, 8px)}.paginator-size-label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c)}.paginator-size-select{height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;outline:none}";export{t as dropi_paginator}