@dropi/ui 0.1.22 → 0.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dropi-button.cjs.entry.js +6 -6
- package/dist/collection/components/dropi-button/dropi-button.js +6 -6
- package/dist/components/dropi-alert-modal.js +1 -1
- package/dist/components/dropi-button.js +1 -1
- package/dist/components/dropi-empty-state.js +1 -1
- package/dist/components/dropi-file-upload.js +1 -1
- package/dist/components/p-QOZr7tU8.js +1 -0
- package/dist/dropi-ui/dropi-ui.esm.js +1 -1
- package/dist/dropi-ui/p-34b66ca2.entry.js +1 -0
- package/dist/esm/dropi-button.entry.js +6 -6
- package/hydrate/index.js +6 -6
- package/hydrate/index.mjs +6 -6
- package/package.json +1 -1
- package/readme.md +18 -16
- package/dist/components/p-CV4X3Gm4.js +0 -1
- package/dist/dropi-ui/p-50a5e548.entry.js +0 -1
|
@@ -71,15 +71,15 @@ const DropiButton = class {
|
|
|
71
71
|
const hasText = this.text !== '';
|
|
72
72
|
const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
|
|
73
73
|
const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
|
|
74
|
-
return (index.h("button", { key: '
|
|
74
|
+
return (index.h("button", { key: '878f01cf2b73d67ad393c46c47dbf71d4589573b', class: {
|
|
75
75
|
btn: true,
|
|
76
76
|
'without-text': !hasText,
|
|
77
|
-
[this.severity]: true,
|
|
78
|
-
[this.type]: true,
|
|
79
|
-
[this.size]: true,
|
|
80
|
-
[this.state]: true,
|
|
77
|
+
[this.severity ?? 'primary']: true,
|
|
78
|
+
[this.type ?? 'default']: true,
|
|
79
|
+
[this.size ?? 'normal']: true,
|
|
80
|
+
[this.state ?? 'default']: true,
|
|
81
81
|
'full-width': this.fullWidth,
|
|
82
|
-
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (index.h("dropi-icon", { key: '
|
|
82
|
+
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (index.h("dropi-icon", { key: 'd42a3e52d105b985c9cbc72241e363baaaad25a8', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && index.h("span", { key: 'e88b6ef2c3cf63aec13f1fa4bfe289333acdd8b9', class: "text" }, this.text), showPostIcon && (index.h("dropi-icon", { key: '596a8227042757ffe942290a1e776b981bb89136', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), index.h("slot", { key: 'e46a00e52792e690b3b4cb24e6af1b1843f7384f' })));
|
|
83
83
|
}
|
|
84
84
|
};
|
|
85
85
|
DropiButton.style = dropiButtonCss();
|
|
@@ -67,15 +67,15 @@ export class DropiButton {
|
|
|
67
67
|
const hasText = this.text !== '';
|
|
68
68
|
const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
|
|
69
69
|
const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
|
|
70
|
-
return (h("button", { key: '
|
|
70
|
+
return (h("button", { key: '878f01cf2b73d67ad393c46c47dbf71d4589573b', class: {
|
|
71
71
|
btn: true,
|
|
72
72
|
'without-text': !hasText,
|
|
73
|
-
[this.severity]: true,
|
|
74
|
-
[this.type]: true,
|
|
75
|
-
[this.size]: true,
|
|
76
|
-
[this.state]: true,
|
|
73
|
+
[this.severity ?? 'primary']: true,
|
|
74
|
+
[this.type ?? 'default']: true,
|
|
75
|
+
[this.size ?? 'normal']: true,
|
|
76
|
+
[this.state ?? 'default']: true,
|
|
77
77
|
'full-width': this.fullWidth,
|
|
78
|
-
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '
|
|
78
|
+
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: 'd42a3e52d105b985c9cbc72241e363baaaad25a8', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'e88b6ef2c3cf63aec13f1fa4bfe289333acdd8b9', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '596a8227042757ffe942290a1e776b981bb89136', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'e46a00e52792e690b3b4cb24e6af1b1843f7384f' })));
|
|
79
79
|
}
|
|
80
80
|
static get is() { return "dropi-button"; }
|
|
81
81
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t,p as e,H as i,c as s,h as o}from"./index.js";import{d as a}from"./p-
|
|
1
|
+
import{t,p as e,H as i,c as s,h as o}from"./index.js";import{d as a}from"./p-QOZr7tU8.js";import{d as n}from"./p-D13d88W3.js";import{d as l}from"./p-BwhxWL4p.js";const d=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.primaryButtonEvent=s(this,"primaryButtonEvent",7),this.secondaryButtonEvent=s(this,"secondaryButtonEvent",7),this.modalOpenChange=s(this,"modalOpenChange",7),this.onHide=s(this,"onHide",7)}visible=!1;type="question";tittle="";message="";primaryButton="Accept";secondaryButton="";loading=!1;closable=!1;displayButtons=!0;loadingTitle="Loading";loadingMessage="Please wait a moment";isStep=!1;baseZIndex=0;params=null;paramsChanged(t){t&&(void 0!==t.tittle&&(this.tittle=t.tittle),void 0!==t.type&&(this.type=t.type),void 0!==t.message&&(this.message=t.message),void 0!==t.primaryButton&&(this.primaryButton=t.primaryButton),void 0!==t.secondaryButton&&(this.secondaryButton=t.secondaryButton),void 0!==t.loadingTitle&&(this.loadingTitle=t.loadingTitle),void 0!==t.loadingMessage&&(this.loadingMessage=t.loadingMessage),void 0!==t.closable&&(this.closable=t.closable),void 0!==t.displayButtons&&(this.displayButtons=t.displayButtons))}primaryButtonEvent;secondaryButtonEvent;modalOpenChange;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(){this.params&&this.paramsChanged(this.params)}async show(){this.visible=!0}async hide(){this.visible=!1}handlePrimary(){this.primaryButtonEvent.emit(!0),this.isStep||(this.visible=!1,this.modalOpenChange.emit(!1))}handleSecondary(){this.secondaryButtonEvent.emit(!0),this.visible=!1,this.modalOpenChange.emit(!1)}onModalHide(){this.visible=!1,this.modalOpenChange.emit(!1),this.onHide.emit()}render(){const t=this.loading?"loading":this.type;return o("dropi-modal",{key:"8581cbc944d42889228cb21fa27bf4e8b3bf1e16",visible:this.visible,showHeader:this.closable,showCloseIcon:this.closable,dismissable:!1,closeOnEscape:!1,showFooter:!1,size:"s",onOnHide:()=>this.onModalHide()},o("div",{key:"7208cbe742dab77bcee14150998aff5647fd41af",class:"body-alert"},this.lottieMap[t]&&o("div",{key:"3b4d36963f8d6547556eee704823c8e34805b8d8",class:"lottie-img"+("loading"===t?" lottie-img--loading":"")},o("lottie-player",{key:t,src:this.lottieMap[t],background:"transparent",speed:"1",loop:!0,autoplay:!0})),o("div",{key:"dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f",class:"content-alert"},o("h2",{key:"685df4cb76145cf6e965dd94e5f3fe60f828100c"},this.loading?this.loadingTitle:this.tittle),o("p",{key:"f9e5b699816236148bc00c5046c6cc67eb86ae01"},this.loading?this.loadingMessage:this.message)),o("div",{key:"2e9280865cad761bea5cdd88b972734c11ab7737",class:"custom-content"},o("slot",{key:"4fd36baa1455e7793a1e5291b52448707e3aa448"})),!this.loading&&this.displayButtons&&o("div",{key:"451bd3d90ec780499d9956a8a57a0d1461406fa9",class:"actions"},this.secondaryButton&&o("dropi-button",{key:"b60c30cc92cc080c01e1bf337a5e4b78f561be81",text:this.secondaryButton,severity:"secondary",onClick:()=>this.handleSecondary(),fullWidth:!0}),o("dropi-button",{key:"2b8696a02b253d289a1baef2116cffe436346717",text:this.primaryButton,severity:"primary",onClick:()=>this.handlePrimary(),fullWidth:!0}))))}static get watchers(){return{params:[{paramsChanged:0}]}}static get style(){return":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%}}"}},[772,"dropi-alert-modal",{visible:[1544],type:[1025],tittle:[1025],message:[1025],primaryButton:[1025,"primary-button"],secondaryButton:[1025,"secondary-button"],loading:[4],closable:[1028],displayButtons:[1028,"display-buttons"],loadingTitle:[1025,"loading-title"],loadingMessage:[1025,"loading-message"],isStep:[4,"is-step"],baseZIndex:[2,"base-z-index"],params:[8],show:[64],hide:[64]},void 0,{params:[{paramsChanged:0}]}]);function r(){"undefined"!=typeof customElements&&["dropi-alert-modal","dropi-button","dropi-icon","dropi-modal"].forEach((e=>{switch(e){case"dropi-alert-modal":customElements.get(t(e))||customElements.define(t(e),d);break;case"dropi-button":customElements.get(t(e))||a();break;case"dropi-icon":customElements.get(t(e))||n();break;case"dropi-modal":customElements.get(t(e))||l()}}))}r();const c=d,h=r;export{c as DropiAlertModal,h as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{D as o,d as
|
|
1
|
+
import{D as o,d as r}from"./p-QOZr7tU8.js";const s=o,t=r;export{s as DropiButton,t as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t,p as e,H as i,c as s,h as a}from"./index.js";import{d as n}from"./p-
|
|
1
|
+
import{t,p as e,H as i,c as s,h as a}from"./index.js";import{d as n}from"./p-QOZr7tU8.js";import{d as o}from"./p-D13d88W3.js";const r=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.buttonClickEvent=s(this,"buttonClickEvent",7)}title="";description="";imageUrl="";imageAlt="Sin resultados";buttonText="";buttonIcon="";dropiIcon="default";buttonSeverity="tertiary";buttonClickEvent;render(){return a("div",{key:"1b7c0fd20a119ae17ee09f7c68b7ae2b4e77ee98",class:"empty-state"},a("div",{key:"cb4fd9dc6a8b491359fd9cd8b6983e68f64af994",class:"empty-state-visual"},a("img",this.imageUrl?{class:"empty-state-img",src:this.imageUrl,alt:this.imageAlt}:{class:"empty-state-img",src:`assets/icons/ilustration/${this.dropiIcon&&this.dropiIcon+""!="undefined"&&this.dropiIcon+""!="null"?this.dropiIcon:"default"}.svg`,alt:this.imageAlt,onError:t=>t.target.src="assets/icons/ilustration/default.svg"})),this.title&&a("h3",{key:"14c09482953e39975c74ca454df3131e3233a712",class:"empty-state-title"},this.title),this.description&&a("p",{key:"5fccb02b2b21d8895c5b122aa0fb6684fc9d7611",class:"empty-state-description"},this.description),a("slot",{key:"6e53d450b4dbb8cff81addd3e7fc528c599bf730"}),this.buttonText&&a("div",{key:"4325f23a357c43b970dce907a63f24b63b10070e",class:"empty-state-actions"},a("dropi-button",{key:"a475b2fec4e00343fa4b4fa29ac08d5564e4e21a",text:this.buttonText,preIcon:this.buttonIcon,severity:this.buttonSeverity,onClick:()=>this.buttonClickEvent.emit()})))}static get style(){return":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;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.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)}"}},[769,"dropi-empty-state",{title:[1],description:[1],imageUrl:[1,"image-url"],imageAlt:[1,"image-alt"],buttonText:[1,"button-text"],buttonIcon:[1,"button-icon"],dropiIcon:[1,"dropi-icon"],buttonSeverity:[1,"button-severity"]}]);function c(){"undefined"!=typeof customElements&&["dropi-empty-state","dropi-button","dropi-icon"].forEach((e=>{switch(e){case"dropi-empty-state":customElements.get(t(e))||customElements.define(t(e),r);break;case"dropi-button":customElements.get(t(e))||n();break;case"dropi-icon":customElements.get(t(e))||o()}}))}c();const p=r,d=c;export{p as DropiEmptyState,d as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as i,H as r,c as t,h as a}from"./index.js";import{d as l}from"./p-BrjO_JXp.js";import{d as s}from"./p-CV4X3Gm4.js";import{d}from"./p-D13d88W3.js";const o=i(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.uploadedUrlsChange=t(this,"uploadedUrlsChange",7)}title="";label="";textDropZone="Arrastra o sube una imagen aquí";textButton="Seleccionar Imagen";previewType="card";multiple=!1;maxFiles=1;maxFileSizeMB=10;accept="";onlyView=!1;viewDragAndDrop=!1;dragAndDropSize="default";selectedFiles=[];error=!1;errorMessage="";dragging=!1;uploadedUrlsChange;inputRef;dragCounter=0;generateId(e){return"undefined"!=typeof crypto&&"randomUUID"in crypto?`${e.name}-${crypto.randomUUID()}`:`${e.name}-${Date.now()}-${Math.floor(1e6*Math.random())}`}getFileType(e){return e.type.startsWith("image/")?"image":"document"}getTypeView(e){return e.type.startsWith("image/")&&"grid"===this.previewType?"grid":"card"}getFileTypeClass(e){if(!e.file)return"generic";const i=e.file.type;return i.includes("pdf")?"pdf":i.startsWith("image/")?"image":"generic"}isDropZoneHidden(){return"grid"===this.previewType&&(!this.viewDragAndDrop||this.selectedFiles.length>0)}generatePreviewUrl(e){return new Promise((i=>{const r=new FileReader;r.readAsDataURL(e),r.onload=()=>i(r.result),r.onerror=()=>i("")}))}syncFileItem(e,i){const r=this.selectedFiles.findIndex((i=>i.id===e));if(-1===r)return;const t={...this.selectedFiles[r],...i};this.selectedFiles=[...this.selectedFiles.slice(0,r),t,...this.selectedFiles.slice(r+1)]}emitFiles(){const e=this.selectedFiles.filter((e=>"complete"===e.state&&e.file)).map((e=>e.file));this.uploadedUrlsChange.emit(e)}async handleFiles(e){if(this.error=!1,e.length+this.selectedFiles.length>this.maxFiles)return this.error=!0,void(this.errorMessage=`Máximo ${this.maxFiles} archivo(s) permitido(s)`);for(const i of e){if(i.size>1024*this.maxFileSizeMB*1024){this.error=!0,this.errorMessage=`"${i.name}" supera el tamaño máximo de ${this.maxFileSizeMB}MB`;continue}const e={id:this.generateId(i),file:i,progress:0,state:"uploading",fileType:this.getFileType(i),typeView:this.getTypeView(i)};if(this.selectedFiles=[...this.selectedFiles,e],this.simulateProgress(e.id),"image"===e.fileType){const r=await this.generatePreviewUrl(i);this.syncFileItem(e.id,{previewUrl:r})}}}simulateProgress(e){let i=0;const r=setInterval((()=>{i+=Math.floor(20*Math.random())+10,i>=100?(i=100,clearInterval(r),this.syncFileItem(e,{progress:100,state:"complete"}),this.emitFiles()):this.syncFileItem(e,{progress:i})}),150)}handleFileAction(e,i){if("error"===e.state)return this.selectedFiles=this.selectedFiles.filter((i=>i.id!==e.id)),void this.emitFiles();switch(i){case"delete":this.syncFileItem(e.id,{state:"confirm-delete"});break;case"confirm-delete":this.syncFileItem(e.id,{state:"deleting"}),setTimeout((()=>{this.selectedFiles=this.selectedFiles.filter((i=>i.id!==e.id)),this.emitFiles()}),400);break;case"cancel-delete":this.syncFileItem(e.id,{state:"complete"})}}onDragOver(e){e.preventDefault(),this.dragging=!0}onDragEnter(e){e.preventDefault(),this.dragCounter++,this.dragging=!0}onDragLeave(){this.dragCounter--,this.dragCounter<=0&&(this.dragCounter=0,this.dragging=!1)}onDrop(e){e.preventDefault(),this.dragging=!1,this.dragCounter=0;const i=Array.from(e.dataTransfer?.files??[]);i.length&&this.handleFiles(i)}onInputChange(e){const i=e.target,r=Array.from(i.files??[]);i.value="",r.length&&this.handleFiles(r)}openFilePicker(){this.inputRef?.click()}addImage(){this.inputRef?.click()}renderCheckSvg(){return a("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},a("g",{"clip-path":"url(#ck)"},a("path",{d:"M11.1594 2.2155L4.24992 9.1245C4.20347 9.17114 4.14826 9.20815 4.08747 9.2334C4.02668 9.25865 3.9615 9.27165 3.89567 9.27165C3.82985 9.27165 3.76467 9.25865 3.70388 9.2334C3.64308 9.20815 3.58788 9.17114 3.54142 9.1245L0.869423 6.45C0.822969 6.40337 0.767762 6.36636 0.70697 6.34111C0.646179 6.31586 0.581 6.30286 0.515173 6.30286C0.449346 6.30286 0.384167 6.31586 0.323376 6.34111C0.262585 6.36636 0.207378 6.40337 0.160923 6.45C0.114285 6.49646 0.0772787 6.55167 0.0520278 6.61246C0.026777 6.67325 0.0137787 6.73843 0.0137787 6.80425C0.0137787 6.87008 0.026777 6.93526 0.0520278 6.99605C0.0772787 7.05684 0.114285 7.11205 0.160923 7.1585L2.83392 9.831C3.1159 10.1125 3.49802 10.2705 3.89642 10.2705C4.29482 10.2705 4.67695 10.1125 4.95892 9.831L11.8679 2.9235C11.9145 2.87706 11.9514 2.82188 11.9766 2.76114C12.0018 2.70039 12.0148 2.63527 12.0148 2.5695C12.0148 2.50374 12.0018 2.43862 11.9766 2.37787C11.9514 2.31713 11.9145 2.26195 11.8679 2.2155C11.8215 2.16887 11.7663 2.13186 11.7055 2.10661C11.6447 2.08136 11.5795 2.06836 11.5137 2.06836C11.4478 2.06836 11.3827 2.08136 11.3219 2.10661C11.2611 2.13186 11.2059 2.16887 11.1594 2.2155Z",fill:"#0ABB87"})),a("defs",null,a("clipPath",{id:"ck"},a("rect",{width:"12",height:"12",fill:"white"}))))}renderTrashSvg(){return a("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M16.25 4.44453H14.0972C13.936 3.66078 13.5096 2.95657 12.8897 2.45058C12.2699 1.94459 11.4946 1.66776 10.6944 1.66675H9.30554C8.5054 1.66776 7.73007 1.94459 7.11023 2.45058C6.49039 2.95657 6.06394 3.66078 5.90276 4.44453H3.74999C3.56581 4.44453 3.38917 4.51769 3.25894 4.64792C3.12871 4.77816 3.05554 4.95479 3.05554 5.13897C3.05554 5.32315 3.12871 5.49978 3.25894 5.63002C3.38917 5.76025 3.56581 5.83341 3.74999 5.83341H4.44443V14.8612C4.44553 15.7817 4.81171 16.6643 5.46264 17.3152C6.11357 17.9661 6.9961 18.3323 7.91665 18.3334H12.0833C13.0039 18.3323 13.8864 17.9661 14.5373 17.3152C15.1883 16.6643 15.5544 15.7817 15.5555 14.8612V5.83341H16.25C16.4342 5.83341 16.6108 5.76025 16.741 5.63002C16.8713 5.49978 16.9444 5.32315 16.9444 5.13897C16.9444 4.95479 16.8713 4.77816 16.741 4.64792C16.6108 4.51769 16.4342 4.44453 16.25 4.44453ZM9.30554 3.05564H10.6944C11.1252 3.05616 11.5452 3.18993 11.8969 3.43858C12.2487 3.68724 12.5149 4.03862 12.659 4.44453H7.34096C7.48511 4.03862 7.75131 3.68724 8.10303 3.43858C8.45476 3.18993 8.8748 3.05616 9.30554 3.05564ZM14.1667 14.8612C14.1667 15.4137 13.9472 15.9436 13.5565 16.3343C13.1658 16.725 12.6359 16.9445 12.0833 16.9445H7.91665C7.36412 16.9445 6.83421 16.725 6.44351 16.3343C6.05281 15.9436 5.83332 15.4137 5.83332 14.8612V5.83341H14.1667V14.8612Z",fill:"#DE6061"}),a("path",{d:"M8.61115 14.1663C8.79533 14.1663 8.97197 14.0931 9.1022 13.9629C9.23243 13.8327 9.3056 13.656 9.3056 13.4719V9.30521C9.3056 9.12103 9.23243 8.94439 9.1022 8.81416C8.97197 8.68393 8.79533 8.61076 8.61115 8.61076C8.42698 8.61076 8.25034 8.68393 8.12011 8.81416C7.98988 8.94439 7.91671 9.12103 7.91671 9.30521V13.4719C7.91671 13.656 7.98988 13.8327 8.12011 13.9629C8.25034 14.0931 8.42698 14.1663 8.61115 14.1663Z",fill:"#DE6061"}),a("path",{d:"M11.3888 14.1663C11.573 14.1663 11.7497 14.0931 11.8799 13.9629C12.0101 13.8327 12.0833 13.656 12.0833 13.4719V9.30521C12.0833 9.12103 12.0101 8.94439 11.8799 8.81416C11.7497 8.68393 11.573 8.61076 11.3888 8.61076C11.2047 8.61076 11.028 8.68393 10.8978 8.81416C10.7676 8.94439 10.6944 9.12103 10.6944 9.30521V13.4719C10.6944 13.656 10.7676 13.8327 10.8978 13.9629C11.028 14.0931 11.2047 14.1663 11.3888 14.1663Z",fill:"#DE6061"}))}renderTrashGridSvg(){return a("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z",fill:"white"}),a("path",{d:"M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z",stroke:"#F7F8FA"}),a("path",{d:"M22.25 10.4445H20.0972C19.936 9.66072 19.5096 8.95651 18.8897 8.45052C18.2699 7.94453 17.4945 7.6677 16.6944 7.66669H15.3055C14.5054 7.6677 13.73 7.94453 13.1102 8.45052C12.4904 8.95651 12.0639 9.66072 11.9027 10.4445H9.74996C9.56578 10.4445 9.38914 10.5176 9.25891 10.6479C9.12868 10.7781 9.05551 10.9547 9.05551 11.1389C9.05551 11.3231 9.12868 11.4997 9.25891 11.63C9.38914 11.7602 9.56578 11.8334 9.74996 11.8334H10.4444V20.8611C10.4455 21.7817 10.8117 22.6642 11.4626 23.3151C12.1135 23.9661 12.9961 24.3323 13.9166 24.3334H18.0833C19.0038 24.3323 19.8864 23.9661 20.5373 23.3151C21.1882 22.6642 21.5544 21.7817 21.5555 20.8611V11.8334H22.25C22.4341 11.8334 22.6108 11.7602 22.741 11.63C22.8712 11.4997 22.9444 11.3231 22.9444 11.1389C22.9444 10.9547 22.8712 10.7781 22.741 10.6479C22.6108 10.5176 22.4341 10.4445 22.25 10.4445ZM15.3055 9.05558H16.6944C17.1251 9.0561 17.5452 9.18986 17.8969 9.43852C18.2486 9.68718 18.5148 10.0386 18.659 10.4445H13.3409C13.4851 10.0386 13.7513 9.68718 14.103 9.43852C14.4547 9.18986 14.8748 9.0561 15.3055 9.05558ZM20.1666 20.8611C20.1666 21.4137 19.9471 21.9436 19.5564 22.3343C19.1657 22.725 18.6358 22.9445 18.0833 22.9445H13.9166C13.3641 22.9445 12.8342 22.725 12.4435 22.3343C12.0528 21.9436 11.8333 21.4137 11.8333 20.8611V11.8334H20.1666V20.8611Z",fill:"#DE6061"}),a("path",{d:"M14.6111 20.1662C14.7953 20.1662 14.9719 20.0931 15.1022 19.9628C15.2324 19.8326 15.3056 19.656 15.3056 19.4718V15.3051C15.3056 15.121 15.2324 14.9443 15.1022 14.8141C14.9719 14.6839 14.7953 14.6107 14.6111 14.6107C14.4269 14.6107 14.2503 14.6839 14.1201 14.8141C13.9898 14.9443 13.9167 15.121 13.9167 15.3051V19.4718C13.9167 19.656 13.9898 19.8326 14.1201 19.9628C14.2503 20.0931 14.4269 20.1662 14.6111 20.1662Z",fill:"#DE6061"}),a("path",{d:"M17.3888 20.1662C17.573 20.1662 17.7496 20.0931 17.8799 19.9628C18.0101 19.8326 18.0833 19.656 18.0833 19.4718V15.3051C18.0833 15.121 18.0101 14.9443 17.8799 14.8141C17.7496 14.6839 17.573 14.6107 17.3888 14.6107C17.2046 14.6107 17.028 14.6839 16.8978 14.8141C16.7675 14.9443 16.6944 15.121 16.6944 15.3051V19.4718C16.6944 19.656 16.7675 19.8326 16.8978 19.9628C17.028 20.0931 17.2046 20.1662 17.3888 20.1662Z",fill:"#DE6061"}))}renderPdfSvg(){return a("svg",{class:"icon-pdf",width:"34",height:"34",viewBox:"0 0 34 34",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z",fill:"#FEF0F0"}),a("g",{"clip-path":"url(#pdf)"},a("path",{d:"M24.1252 11.1167L21.2168 8.20833C20.1168 7.10833 18.6502 6.5 17.0918 6.5H13.3335C11.0335 6.5 9.16684 8.36667 9.16684 10.6667V22.3333C9.16684 24.6333 11.0335 26.5 13.3335 26.5H21.6668C23.9668 26.5 25.8335 24.6333 25.8335 22.3333V15.2417C25.8335 13.6833 25.2252 12.2167 24.1252 11.1167Z",fill:"#DE6061"})),a("defs",null,a("clipPath",{id:"pdf"},a("rect",{width:"20",height:"20",fill:"white",transform:"translate(7.5 6.5)"}))))}renderDocSvg(){return a("svg",{class:"icon-default",width:"34",height:"34",viewBox:"0 0 34 34",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z",fill:"#EEF6FE"}),a("g",{"clip-path":"url(#doc)"},a("path",{d:"M21.1668 18.6667C21.1668 18.8877 21.079 19.0997 20.9227 19.2559C20.7664 19.4122 20.5545 19.5 20.3335 19.5H13.6668C13.4458 19.5 13.2338 19.4122 13.0775 19.2559C12.9213 19.0997 12.8335 18.8877 12.8335 18.6667C12.8335 18.4457 12.9213 18.2337 13.0775 18.0774C13.2338 17.9211 13.4458 17.8334 13.6668 17.8334H20.3335C20.5545 17.8334 20.7664 17.9211 20.9227 18.0774C21.079 18.2337 21.1668 18.4457 21.1668 18.6667ZM17.8335 21.1667H13.6668C13.4458 21.1667 13.2338 21.2545 13.0775 21.4108C12.9213 21.567 12.8335 21.779 12.8335 22C12.8335 22.221 12.9213 22.433 13.0775 22.5893C13.2338 22.7456 13.4458 22.8334 13.6668 22.8334H17.8335C18.0545 22.8334 18.2664 22.7456 18.4227 22.5893C18.579 22.433 18.6668 22.221 18.6668 22C18.6668 21.779 18.579 21.567 18.4227 21.4108C18.2664 21.2545 18.0545 21.1667 17.8335 21.1667Z",fill:"#4996DB"})),a("defs",null,a("clipPath",{id:"doc"},a("rect",{width:"20",height:"20",fill:"white",transform:"translate(7 7)"}))))}renderCardItem(e){const i="image"===e.fileType&&e.previewUrl&&!e.previewUrl.includes(".pdf"),r=e.file?.type?.includes("pdf");return a("div",{key:e.id,class:`file-card ${e.state} ${this.getFileTypeClass(e)}`},i?a("div",{class:"preview-wrapper"},a("img",{class:"preview "+e.state,src:e.previewUrl,alt:e.file?.name}),"complete"===e.state&&a("div",{class:"overlay-icon"},this.renderCheckSvg())):a("div",{class:"file-icon"},r?this.renderPdfSvg():this.renderDocSvg()),"confirm-delete"!==e.state&&"deleting"!==e.state&&a("div",{class:"info-container"},a("div",{class:"file-name"+("error"===e.state?" error-text":"")},e.file?.name??e.previewUrl?.split("/").pop()),"uploading"===e.state&&a("div",{class:"progress-bar-container"},a("div",{class:"progress-bar",style:{width:e.progress+"%"}})),"error"===e.state&&a("div",{class:"error-label"},"Error al subir el archivo")),"deleting"===e.state&&a("div",{class:"deleting-container"},a("span",{class:"deleting-label"},"Eliminando...")),"confirm-delete"!==e.state&&"error"!==e.state&&"deleting"!==e.state&&a("div",{class:"preview-image",onClick:()=>{}},a("dropi-icon",{name:"Eye",width:"20px",height:"20px",color:"Gray-Gray-600"})),"confirm-delete"!==e.state&&"deleting"!==e.state&&!this.onlyView&&a("div",{class:"delete",onClick:()=>this.handleFileAction(e,"delete")},this.renderTrashSvg()),"confirm-delete"===e.state&&a("div",{class:"delete-confirm"},a("span",{class:"message"},e.previewUrl?"¿Eliminar imagen?":"¿Eliminar archivo?"),a("div",{class:"actions"},a("dropi-button",{size:"small",text:"Sí",onClick:()=>this.handleFileAction(e,"confirm-delete")}),a("dropi-button",{text:"No",size:"small",severity:"secondary",onClick:()=>this.handleFileAction(e,"cancel-delete")}))))}renderGridItem(e){return a("div",{key:e.id,class:`img-view ${e.state} ${this.getFileTypeClass(e)}`},a("div",{class:"preview-wrapper"},a("div",{class:"preview-container"},a("img",{class:"preview "+e.state,src:e.previewUrl||"",alt:"preview"})),"complete"===e.state&&a("div",{class:"overlay-icon"},this.renderCheckSvg()),"confirm-delete"!==e.state&&"deleting"!==e.state&&a("div",{class:"delete",onClick:()=>this.handleFileAction(e,"confirm-delete")},this.renderTrashGridSvg())),"uploading"===e.state&&a("div",{class:"progress-bar-container"},a("div",{class:"progress-bar",style:{width:e.progress+"%"}})),"deleting"===e.state&&a("div",{class:"deleting-info"},a("span",{class:"deleting-info-label"},"Eliminando...")))}render(){const e=this.selectedFiles??[],i=e.filter((e=>"grid"===e.typeView)),r=e.filter((e=>"card"===e.typeView)),t=e.length<(this.maxFiles??1)&&!this.isDropZoneHidden(),l="small"===this.dragAndDropSize;return a("div",{key:"2823263b5c803c23eb1bf091676a0fd86243117a",class:"upload-container"},(this.title||this.label)&&a("div",{key:"ec9c8a63c9c34f8c8ce68310c07dd8fda66ffda2",class:"upload-header"},this.title&&a("div",{key:"f26ade32fe339a0382166345110ef3445bb58475",class:"text title"},this.title),this.label&&a("div",{key:"becc99e74e8d555fc40bcd0854575c5b435faf85",class:"text label"},this.label)),this.error&&a("dropi-alert",{key:"b01f441d6083e31f5ddaa2bc661722835134e8f0",message:this.errorMessage,type:"default",state:"error",dismissable:!0,showButton:!1,onOnClose:()=>{this.error=!1}}),t&&a("div",{key:"e221786da335f56a6160874d56ad4b50c9b0702f",class:{"file-upload":!0,"drag-over":this.dragging},onDragOver:e=>this.onDragOver(e),onDragEnter:e=>this.onDragEnter(e),onDragLeave:()=>this.onDragLeave(),onDrop:e=>this.onDrop(e)},a("div",{key:"ad6d5ed22aa64c4a33e3861cc48271dbecc59279",class:"file-upload__zone"+(this.dragging?" drag-over":"")},!l&&a("svg",{key:"a5666c9aaad62e8a4b6677b288d853953ada6169",width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"98a2c4e40aa67249f0b8b13f956846334a1b8652",d:"M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z",fill:"#FEF8F1"}),a("g",{key:"892e4f122e593fd77f37048fcd68157a682bf1b7","clip-path":"url(#up)"},a("path",{key:"aaaddae87cb45b9c00ddc98142c1ef5b2ec25a0a",d:"M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z",fill:"#F49A3D"}),a("path",{key:"4c9eddf5c6348984c7478701fe67e411d01cf8c5",d:"M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z",fill:"#F49A3D"})),a("defs",{key:"bcc8c24fcf8d9ea939dec31a36e5fce8c0fd203e"},a("clipPath",{key:"9724c45ddf4d8983116baf1b4baadb8e1c83ed9d",id:"up"},a("rect",{key:"1d0ca58ddc76c661f8278a177ad670633008bd5a",width:"16",height:"16",fill:"white",transform:"translate(12 12)"})))),a("div",{key:"d1a2c7a7cc539b1c519dcc5931c80eb38c230e1f",class:l?"info size-small-upload":"info"},a("div",{key:"4265e328f1bab72a221746afc15b0e7e8b6324b0",class:"title"},this.textDropZone),l&&a("dropi-button",{key:"076a0dfc2f087b9724e60980bb1217e676bdaeda",text:this.textButton,size:"small",onClick:e=>{e.stopPropagation(),this.openFilePicker()}})),!l&&a("div",{key:"070c2a5374d4262b4b66ea2a9f51a75358865011",class:"info-desc"},this.accept&&a("div",{key:"6482d13398d8ea654dbd5f5c684c7b0602da0b7d",class:"description"},"Formatos admitidos: ",this.accept),a("div",{key:"25ccba2cd7a16f732f111aeefe076516b0c360f6",class:"description"},"Tamaño máximo: ",this.maxFileSizeMB,"MB")),!l&&a("dropi-button",{key:"a1ed64460aa8c9aead966d33fa8ef25ddc383000",text:this.textButton,size:"small",onClick:e=>{e.stopPropagation(),this.openFilePicker()}}),a("input",{key:"b5debf074ef579d4bd74d1507ba63b912eeba37e",ref:e=>this.inputRef=e,type:"file",accept:this.accept,multiple:this.multiple,class:"upload-hidden",onChange:e=>this.onInputChange(e)}))),this.selectedFiles.length>0&&a("div",{key:"40d77d3c697b18637fa7669e857f5d931d91543d",class:"files-container"},i.length>0&&a("div",{key:"c8b2eac24568959a83500930fc36c54be04d3d75",class:"grid-list"},i.map((e=>this.renderGridItem(e))),i.length<this.maxFiles&&a("div",{key:"6782016ecee648dff31baa352db02413a37ad2ae",class:"add-img",onClick:()=>this.addImage()},a("div",{key:"08ecf1dae23fc4dac7818fd178d40a50a10a4508",class:"icon"},a("svg",{key:"c41793f302e1c0f7eeb91c0e524cd398988c62c2",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"cf066997fbfb0aa31bacbb72ef037f67b74de5ec",d:"M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z",fill:"#32394D"}))),a("div",{key:"03214b3dd6dad6b7d3973f36d041aafcb9089819",class:"text"},"Agregar"))),r.length>0&&a("div",{key:"4fb7c564b557885680f2aa2723273dac6f15cc72",class:"card-list"},r.map((e=>this.renderCardItem(e))))))}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.upload-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px);width:100%}.upload-header{display:flex;flex-direction:column;gap:var(--Size-1, 4px);align-items:flex-start;align-self:stretch}.upload-header .text{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 12px);font-style:normal;line-height:150%}.upload-header .title{font-weight:var(--font-weight-medium, 500)}.upload-header .label{font-weight:var(--font-weight-regular, 400)}.file-upload{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3, 12px);background:var(--Neutral-White, #ffffff)}.file-upload__zone{display:flex;padding:var(--Size-5, 24px);flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-6, 32px);align-self:stretch;border-radius:var(--Border-2, 8px);border:1px dashed var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);text-align:center;transition:border-color 0.3s ease}.file-upload__zone.drag-over{border:1px dashed var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fef8f1)}.info{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);align-self:stretch}.info .title{color:var(--Gray-Gray-700, #32394d);text-align:center;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-medium, 500);line-height:150%}.info.size-small-upload{flex-direction:row;gap:var(--Size-3, 12px)}.info-desc{display:flex;flex-direction:column;align-items:center;gap:var(--Size-1, 4px)}.description{color:var(--Gray-Gray-600, #475066);text-align:center;font-size:var(--font-size-s, 14px);font-style:normal;font-weight:var(--font-weight-regular, 400);line-height:150%}.upload-hidden{display:none}.files-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px)}.grid-list{display:flex;align-items:flex-start;gap:var(--Size-5, 24px);align-self:stretch;flex-wrap:wrap}.add-img{display:flex;height:88px;width:88px;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-1, 4px);align-self:stretch;border-radius:var(--Border-2, 8px);background:var(--Gray-Gray-50, #f7f8fa);cursor:pointer}.add-img:hover{transform:scale(1.1)}.add-img .icon{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Gray-Gray-100, #e6eaf2)}.add-img .text{color:var(--Gray-Gray-600, #475066);text-align:center;font-size:var(--font-size-xs, 12px);font-style:normal;font-weight:var(--font-weight-regular, 400);line-height:150%}.card-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Size-3, 12px);align-self:stretch;width:100%}.file-card{display:flex;padding:var(--Size-4, 16px);align-items:center;gap:var(--Size-3, 12px);align-self:stretch;border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background:var(--Neutral-White, #ffffff);width:100%}.file-card.error{border-color:var(--Error-Error-300, #f89b9c);background:var(--Error-Error-50, #fef0f0)}.file-card .preview-wrapper{width:34px;height:34px;position:relative;display:inline-block;border-radius:var(--Border-2, 8px);overflow:hidden;flex-shrink:0}.file-card .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.file-card .preview.uploading{filter:blur(2px)}.file-card .overlay-icon{width:16px;height:16px;padding:4px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Neutral-White, #ffffff)}.file-card .file-icon{flex-shrink:0}.file-card .info-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2, 8px);flex:1 0 0;min-width:0}.file-card .file-name{overflow:hidden;color:var(--Gray-Gray-600, #475066);text-overflow:ellipsis;font-size:var(--font-size-xs, 12px);font-style:normal;font-weight:var(--font-weight-regular, 400);line-height:150%;white-space:nowrap;max-width:300px}.file-card .file-name.error-text{color:var(--Error-Error-500, #f46a6b)}.file-card .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.file-card .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500, #f49a3d);transition:width 0.3s ease}.file-card .error-label{color:var(--Error-Error-500, #f46a6b);font-size:11px;font-weight:var(--font-weight-regular, 400);line-height:150%}.file-card .deleting-container{display:flex;align-items:center;flex:1 0 0}.file-card .deleting-label{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-xs, 12px);font-style:italic;font-weight:var(--font-weight-regular, 400);line-height:150%}.file-card .delete,.file-card .preview-image{display:inline-flex;align-items:center;justify-content:center;transition:transform 0.3s ease;border-radius:var(--Border-2, 8px);flex-shrink:0;cursor:pointer}.file-card .delete:hover,.file-card .preview-image:hover{transform:scale(1.1)}.file-card .delete-confirm{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 12px);font-style:normal;font-weight:var(--font-weight-medium, 500);line-height:150%;display:flex;justify-content:space-between;align-items:center;align-self:stretch;flex:1 0 0}.file-card .delete-confirm .message{flex:1}.file-card .delete-confirm .actions{display:flex;align-items:flex-start;gap:var(--Size-2, 8px)}.img-view{display:flex;width:88px;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2, 8px)}.img-view .preview-wrapper{position:relative;display:inline-block;width:88px;height:88px}.img-view .preview-container{border-radius:var(--Border-2, 8px);overflow:hidden;width:100%;height:100%}.img-view .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.img-view .preview.uploading{filter:blur(2px)}.img-view .overlay-icon{width:24px;height:24px;padding:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Neutral-White, #ffffff)}.img-view .delete{position:absolute;top:-12px;right:-9px;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Neutral-White, #ffffff);cursor:pointer}.img-view .delete:hover{transform:scale(1.1)}.img-view.error .preview-wrapper{border:2px solid var(--Error-Error-500, #f46a6b);border-radius:var(--Border-2, 8px)}.img-view.deleting .preview-wrapper{opacity:0.4}.img-view .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.img-view .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500, #f49a3d);transition:width 0.3s ease}.img-view .deleting-info{width:100%;text-align:center}.img-view .deleting-info-label{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-xxs, 10px);font-style:italic;font-weight:var(--font-weight-regular, 400);line-height:150%}@media screen and (max-width: 599px){.info.size-small-upload{flex-wrap:wrap;justify-content:center}.file-card .file-name{max-width:100px}}"}},[513,"dropi-file-upload",{title:[1],label:[1],textDropZone:[1,"text-drop-zone"],textButton:[1,"text-button"],previewType:[1,"preview-type"],multiple:[4],maxFiles:[2,"max-files"],maxFileSizeMB:[2,"max-file-size-m-b"],accept:[1],onlyView:[4,"only-view"],viewDragAndDrop:[4,"view-drag-and-drop"],dragAndDropSize:[1,"drag-and-drop-size"],selectedFiles:[32],error:[32],errorMessage:[32],dragging:[32]}]);function n(){"undefined"!=typeof customElements&&["dropi-file-upload","dropi-alert","dropi-button","dropi-icon"].forEach((i=>{switch(i){case"dropi-file-upload":customElements.get(e(i))||customElements.define(e(i),o);break;case"dropi-alert":customElements.get(e(i))||l();break;case"dropi-button":customElements.get(e(i))||s();break;case"dropi-icon":customElements.get(e(i))||d()}}))}n();const c=o,f=n;export{c as DropiFileUpload,f as defineCustomElement}
|
|
1
|
+
import{t as e,p as i,H as r,c as t,h as a}from"./index.js";import{d as l}from"./p-BrjO_JXp.js";import{d as s}from"./p-QOZr7tU8.js";import{d}from"./p-D13d88W3.js";const o=i(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.uploadedUrlsChange=t(this,"uploadedUrlsChange",7)}title="";label="";textDropZone="Arrastra o sube una imagen aquí";textButton="Seleccionar Imagen";previewType="card";multiple=!1;maxFiles=1;maxFileSizeMB=10;accept="";onlyView=!1;viewDragAndDrop=!1;dragAndDropSize="default";selectedFiles=[];error=!1;errorMessage="";dragging=!1;uploadedUrlsChange;inputRef;dragCounter=0;generateId(e){return"undefined"!=typeof crypto&&"randomUUID"in crypto?`${e.name}-${crypto.randomUUID()}`:`${e.name}-${Date.now()}-${Math.floor(1e6*Math.random())}`}getFileType(e){return e.type.startsWith("image/")?"image":"document"}getTypeView(e){return e.type.startsWith("image/")&&"grid"===this.previewType?"grid":"card"}getFileTypeClass(e){if(!e.file)return"generic";const i=e.file.type;return i.includes("pdf")?"pdf":i.startsWith("image/")?"image":"generic"}isDropZoneHidden(){return"grid"===this.previewType&&(!this.viewDragAndDrop||this.selectedFiles.length>0)}generatePreviewUrl(e){return new Promise((i=>{const r=new FileReader;r.readAsDataURL(e),r.onload=()=>i(r.result),r.onerror=()=>i("")}))}syncFileItem(e,i){const r=this.selectedFiles.findIndex((i=>i.id===e));if(-1===r)return;const t={...this.selectedFiles[r],...i};this.selectedFiles=[...this.selectedFiles.slice(0,r),t,...this.selectedFiles.slice(r+1)]}emitFiles(){const e=this.selectedFiles.filter((e=>"complete"===e.state&&e.file)).map((e=>e.file));this.uploadedUrlsChange.emit(e)}async handleFiles(e){if(this.error=!1,e.length+this.selectedFiles.length>this.maxFiles)return this.error=!0,void(this.errorMessage=`Máximo ${this.maxFiles} archivo(s) permitido(s)`);for(const i of e){if(i.size>1024*this.maxFileSizeMB*1024){this.error=!0,this.errorMessage=`"${i.name}" supera el tamaño máximo de ${this.maxFileSizeMB}MB`;continue}const e={id:this.generateId(i),file:i,progress:0,state:"uploading",fileType:this.getFileType(i),typeView:this.getTypeView(i)};if(this.selectedFiles=[...this.selectedFiles,e],this.simulateProgress(e.id),"image"===e.fileType){const r=await this.generatePreviewUrl(i);this.syncFileItem(e.id,{previewUrl:r})}}}simulateProgress(e){let i=0;const r=setInterval((()=>{i+=Math.floor(20*Math.random())+10,i>=100?(i=100,clearInterval(r),this.syncFileItem(e,{progress:100,state:"complete"}),this.emitFiles()):this.syncFileItem(e,{progress:i})}),150)}handleFileAction(e,i){if("error"===e.state)return this.selectedFiles=this.selectedFiles.filter((i=>i.id!==e.id)),void this.emitFiles();switch(i){case"delete":this.syncFileItem(e.id,{state:"confirm-delete"});break;case"confirm-delete":this.syncFileItem(e.id,{state:"deleting"}),setTimeout((()=>{this.selectedFiles=this.selectedFiles.filter((i=>i.id!==e.id)),this.emitFiles()}),400);break;case"cancel-delete":this.syncFileItem(e.id,{state:"complete"})}}onDragOver(e){e.preventDefault(),this.dragging=!0}onDragEnter(e){e.preventDefault(),this.dragCounter++,this.dragging=!0}onDragLeave(){this.dragCounter--,this.dragCounter<=0&&(this.dragCounter=0,this.dragging=!1)}onDrop(e){e.preventDefault(),this.dragging=!1,this.dragCounter=0;const i=Array.from(e.dataTransfer?.files??[]);i.length&&this.handleFiles(i)}onInputChange(e){const i=e.target,r=Array.from(i.files??[]);i.value="",r.length&&this.handleFiles(r)}openFilePicker(){this.inputRef?.click()}addImage(){this.inputRef?.click()}renderCheckSvg(){return a("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},a("g",{"clip-path":"url(#ck)"},a("path",{d:"M11.1594 2.2155L4.24992 9.1245C4.20347 9.17114 4.14826 9.20815 4.08747 9.2334C4.02668 9.25865 3.9615 9.27165 3.89567 9.27165C3.82985 9.27165 3.76467 9.25865 3.70388 9.2334C3.64308 9.20815 3.58788 9.17114 3.54142 9.1245L0.869423 6.45C0.822969 6.40337 0.767762 6.36636 0.70697 6.34111C0.646179 6.31586 0.581 6.30286 0.515173 6.30286C0.449346 6.30286 0.384167 6.31586 0.323376 6.34111C0.262585 6.36636 0.207378 6.40337 0.160923 6.45C0.114285 6.49646 0.0772787 6.55167 0.0520278 6.61246C0.026777 6.67325 0.0137787 6.73843 0.0137787 6.80425C0.0137787 6.87008 0.026777 6.93526 0.0520278 6.99605C0.0772787 7.05684 0.114285 7.11205 0.160923 7.1585L2.83392 9.831C3.1159 10.1125 3.49802 10.2705 3.89642 10.2705C4.29482 10.2705 4.67695 10.1125 4.95892 9.831L11.8679 2.9235C11.9145 2.87706 11.9514 2.82188 11.9766 2.76114C12.0018 2.70039 12.0148 2.63527 12.0148 2.5695C12.0148 2.50374 12.0018 2.43862 11.9766 2.37787C11.9514 2.31713 11.9145 2.26195 11.8679 2.2155C11.8215 2.16887 11.7663 2.13186 11.7055 2.10661C11.6447 2.08136 11.5795 2.06836 11.5137 2.06836C11.4478 2.06836 11.3827 2.08136 11.3219 2.10661C11.2611 2.13186 11.2059 2.16887 11.1594 2.2155Z",fill:"#0ABB87"})),a("defs",null,a("clipPath",{id:"ck"},a("rect",{width:"12",height:"12",fill:"white"}))))}renderTrashSvg(){return a("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M16.25 4.44453H14.0972C13.936 3.66078 13.5096 2.95657 12.8897 2.45058C12.2699 1.94459 11.4946 1.66776 10.6944 1.66675H9.30554C8.5054 1.66776 7.73007 1.94459 7.11023 2.45058C6.49039 2.95657 6.06394 3.66078 5.90276 4.44453H3.74999C3.56581 4.44453 3.38917 4.51769 3.25894 4.64792C3.12871 4.77816 3.05554 4.95479 3.05554 5.13897C3.05554 5.32315 3.12871 5.49978 3.25894 5.63002C3.38917 5.76025 3.56581 5.83341 3.74999 5.83341H4.44443V14.8612C4.44553 15.7817 4.81171 16.6643 5.46264 17.3152C6.11357 17.9661 6.9961 18.3323 7.91665 18.3334H12.0833C13.0039 18.3323 13.8864 17.9661 14.5373 17.3152C15.1883 16.6643 15.5544 15.7817 15.5555 14.8612V5.83341H16.25C16.4342 5.83341 16.6108 5.76025 16.741 5.63002C16.8713 5.49978 16.9444 5.32315 16.9444 5.13897C16.9444 4.95479 16.8713 4.77816 16.741 4.64792C16.6108 4.51769 16.4342 4.44453 16.25 4.44453ZM9.30554 3.05564H10.6944C11.1252 3.05616 11.5452 3.18993 11.8969 3.43858C12.2487 3.68724 12.5149 4.03862 12.659 4.44453H7.34096C7.48511 4.03862 7.75131 3.68724 8.10303 3.43858C8.45476 3.18993 8.8748 3.05616 9.30554 3.05564ZM14.1667 14.8612C14.1667 15.4137 13.9472 15.9436 13.5565 16.3343C13.1658 16.725 12.6359 16.9445 12.0833 16.9445H7.91665C7.36412 16.9445 6.83421 16.725 6.44351 16.3343C6.05281 15.9436 5.83332 15.4137 5.83332 14.8612V5.83341H14.1667V14.8612Z",fill:"#DE6061"}),a("path",{d:"M8.61115 14.1663C8.79533 14.1663 8.97197 14.0931 9.1022 13.9629C9.23243 13.8327 9.3056 13.656 9.3056 13.4719V9.30521C9.3056 9.12103 9.23243 8.94439 9.1022 8.81416C8.97197 8.68393 8.79533 8.61076 8.61115 8.61076C8.42698 8.61076 8.25034 8.68393 8.12011 8.81416C7.98988 8.94439 7.91671 9.12103 7.91671 9.30521V13.4719C7.91671 13.656 7.98988 13.8327 8.12011 13.9629C8.25034 14.0931 8.42698 14.1663 8.61115 14.1663Z",fill:"#DE6061"}),a("path",{d:"M11.3888 14.1663C11.573 14.1663 11.7497 14.0931 11.8799 13.9629C12.0101 13.8327 12.0833 13.656 12.0833 13.4719V9.30521C12.0833 9.12103 12.0101 8.94439 11.8799 8.81416C11.7497 8.68393 11.573 8.61076 11.3888 8.61076C11.2047 8.61076 11.028 8.68393 10.8978 8.81416C10.7676 8.94439 10.6944 9.12103 10.6944 9.30521V13.4719C10.6944 13.656 10.7676 13.8327 10.8978 13.9629C11.028 14.0931 11.2047 14.1663 11.3888 14.1663Z",fill:"#DE6061"}))}renderTrashGridSvg(){return a("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z",fill:"white"}),a("path",{d:"M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z",stroke:"#F7F8FA"}),a("path",{d:"M22.25 10.4445H20.0972C19.936 9.66072 19.5096 8.95651 18.8897 8.45052C18.2699 7.94453 17.4945 7.6677 16.6944 7.66669H15.3055C14.5054 7.6677 13.73 7.94453 13.1102 8.45052C12.4904 8.95651 12.0639 9.66072 11.9027 10.4445H9.74996C9.56578 10.4445 9.38914 10.5176 9.25891 10.6479C9.12868 10.7781 9.05551 10.9547 9.05551 11.1389C9.05551 11.3231 9.12868 11.4997 9.25891 11.63C9.38914 11.7602 9.56578 11.8334 9.74996 11.8334H10.4444V20.8611C10.4455 21.7817 10.8117 22.6642 11.4626 23.3151C12.1135 23.9661 12.9961 24.3323 13.9166 24.3334H18.0833C19.0038 24.3323 19.8864 23.9661 20.5373 23.3151C21.1882 22.6642 21.5544 21.7817 21.5555 20.8611V11.8334H22.25C22.4341 11.8334 22.6108 11.7602 22.741 11.63C22.8712 11.4997 22.9444 11.3231 22.9444 11.1389C22.9444 10.9547 22.8712 10.7781 22.741 10.6479C22.6108 10.5176 22.4341 10.4445 22.25 10.4445ZM15.3055 9.05558H16.6944C17.1251 9.0561 17.5452 9.18986 17.8969 9.43852C18.2486 9.68718 18.5148 10.0386 18.659 10.4445H13.3409C13.4851 10.0386 13.7513 9.68718 14.103 9.43852C14.4547 9.18986 14.8748 9.0561 15.3055 9.05558ZM20.1666 20.8611C20.1666 21.4137 19.9471 21.9436 19.5564 22.3343C19.1657 22.725 18.6358 22.9445 18.0833 22.9445H13.9166C13.3641 22.9445 12.8342 22.725 12.4435 22.3343C12.0528 21.9436 11.8333 21.4137 11.8333 20.8611V11.8334H20.1666V20.8611Z",fill:"#DE6061"}),a("path",{d:"M14.6111 20.1662C14.7953 20.1662 14.9719 20.0931 15.1022 19.9628C15.2324 19.8326 15.3056 19.656 15.3056 19.4718V15.3051C15.3056 15.121 15.2324 14.9443 15.1022 14.8141C14.9719 14.6839 14.7953 14.6107 14.6111 14.6107C14.4269 14.6107 14.2503 14.6839 14.1201 14.8141C13.9898 14.9443 13.9167 15.121 13.9167 15.3051V19.4718C13.9167 19.656 13.9898 19.8326 14.1201 19.9628C14.2503 20.0931 14.4269 20.1662 14.6111 20.1662Z",fill:"#DE6061"}),a("path",{d:"M17.3888 20.1662C17.573 20.1662 17.7496 20.0931 17.8799 19.9628C18.0101 19.8326 18.0833 19.656 18.0833 19.4718V15.3051C18.0833 15.121 18.0101 14.9443 17.8799 14.8141C17.7496 14.6839 17.573 14.6107 17.3888 14.6107C17.2046 14.6107 17.028 14.6839 16.8978 14.8141C16.7675 14.9443 16.6944 15.121 16.6944 15.3051V19.4718C16.6944 19.656 16.7675 19.8326 16.8978 19.9628C17.028 20.0931 17.2046 20.1662 17.3888 20.1662Z",fill:"#DE6061"}))}renderPdfSvg(){return a("svg",{class:"icon-pdf",width:"34",height:"34",viewBox:"0 0 34 34",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z",fill:"#FEF0F0"}),a("g",{"clip-path":"url(#pdf)"},a("path",{d:"M24.1252 11.1167L21.2168 8.20833C20.1168 7.10833 18.6502 6.5 17.0918 6.5H13.3335C11.0335 6.5 9.16684 8.36667 9.16684 10.6667V22.3333C9.16684 24.6333 11.0335 26.5 13.3335 26.5H21.6668C23.9668 26.5 25.8335 24.6333 25.8335 22.3333V15.2417C25.8335 13.6833 25.2252 12.2167 24.1252 11.1167Z",fill:"#DE6061"})),a("defs",null,a("clipPath",{id:"pdf"},a("rect",{width:"20",height:"20",fill:"white",transform:"translate(7.5 6.5)"}))))}renderDocSvg(){return a("svg",{class:"icon-default",width:"34",height:"34",viewBox:"0 0 34 34",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z",fill:"#EEF6FE"}),a("g",{"clip-path":"url(#doc)"},a("path",{d:"M21.1668 18.6667C21.1668 18.8877 21.079 19.0997 20.9227 19.2559C20.7664 19.4122 20.5545 19.5 20.3335 19.5H13.6668C13.4458 19.5 13.2338 19.4122 13.0775 19.2559C12.9213 19.0997 12.8335 18.8877 12.8335 18.6667C12.8335 18.4457 12.9213 18.2337 13.0775 18.0774C13.2338 17.9211 13.4458 17.8334 13.6668 17.8334H20.3335C20.5545 17.8334 20.7664 17.9211 20.9227 18.0774C21.079 18.2337 21.1668 18.4457 21.1668 18.6667ZM17.8335 21.1667H13.6668C13.4458 21.1667 13.2338 21.2545 13.0775 21.4108C12.9213 21.567 12.8335 21.779 12.8335 22C12.8335 22.221 12.9213 22.433 13.0775 22.5893C13.2338 22.7456 13.4458 22.8334 13.6668 22.8334H17.8335C18.0545 22.8334 18.2664 22.7456 18.4227 22.5893C18.579 22.433 18.6668 22.221 18.6668 22C18.6668 21.779 18.579 21.567 18.4227 21.4108C18.2664 21.2545 18.0545 21.1667 17.8335 21.1667Z",fill:"#4996DB"})),a("defs",null,a("clipPath",{id:"doc"},a("rect",{width:"20",height:"20",fill:"white",transform:"translate(7 7)"}))))}renderCardItem(e){const i="image"===e.fileType&&e.previewUrl&&!e.previewUrl.includes(".pdf"),r=e.file?.type?.includes("pdf");return a("div",{key:e.id,class:`file-card ${e.state} ${this.getFileTypeClass(e)}`},i?a("div",{class:"preview-wrapper"},a("img",{class:"preview "+e.state,src:e.previewUrl,alt:e.file?.name}),"complete"===e.state&&a("div",{class:"overlay-icon"},this.renderCheckSvg())):a("div",{class:"file-icon"},r?this.renderPdfSvg():this.renderDocSvg()),"confirm-delete"!==e.state&&"deleting"!==e.state&&a("div",{class:"info-container"},a("div",{class:"file-name"+("error"===e.state?" error-text":"")},e.file?.name??e.previewUrl?.split("/").pop()),"uploading"===e.state&&a("div",{class:"progress-bar-container"},a("div",{class:"progress-bar",style:{width:e.progress+"%"}})),"error"===e.state&&a("div",{class:"error-label"},"Error al subir el archivo")),"deleting"===e.state&&a("div",{class:"deleting-container"},a("span",{class:"deleting-label"},"Eliminando...")),"confirm-delete"!==e.state&&"error"!==e.state&&"deleting"!==e.state&&a("div",{class:"preview-image",onClick:()=>{}},a("dropi-icon",{name:"Eye",width:"20px",height:"20px",color:"Gray-Gray-600"})),"confirm-delete"!==e.state&&"deleting"!==e.state&&!this.onlyView&&a("div",{class:"delete",onClick:()=>this.handleFileAction(e,"delete")},this.renderTrashSvg()),"confirm-delete"===e.state&&a("div",{class:"delete-confirm"},a("span",{class:"message"},e.previewUrl?"¿Eliminar imagen?":"¿Eliminar archivo?"),a("div",{class:"actions"},a("dropi-button",{size:"small",text:"Sí",onClick:()=>this.handleFileAction(e,"confirm-delete")}),a("dropi-button",{text:"No",size:"small",severity:"secondary",onClick:()=>this.handleFileAction(e,"cancel-delete")}))))}renderGridItem(e){return a("div",{key:e.id,class:`img-view ${e.state} ${this.getFileTypeClass(e)}`},a("div",{class:"preview-wrapper"},a("div",{class:"preview-container"},a("img",{class:"preview "+e.state,src:e.previewUrl||"",alt:"preview"})),"complete"===e.state&&a("div",{class:"overlay-icon"},this.renderCheckSvg()),"confirm-delete"!==e.state&&"deleting"!==e.state&&a("div",{class:"delete",onClick:()=>this.handleFileAction(e,"confirm-delete")},this.renderTrashGridSvg())),"uploading"===e.state&&a("div",{class:"progress-bar-container"},a("div",{class:"progress-bar",style:{width:e.progress+"%"}})),"deleting"===e.state&&a("div",{class:"deleting-info"},a("span",{class:"deleting-info-label"},"Eliminando...")))}render(){const e=this.selectedFiles??[],i=e.filter((e=>"grid"===e.typeView)),r=e.filter((e=>"card"===e.typeView)),t=e.length<(this.maxFiles??1)&&!this.isDropZoneHidden(),l="small"===this.dragAndDropSize;return a("div",{key:"2823263b5c803c23eb1bf091676a0fd86243117a",class:"upload-container"},(this.title||this.label)&&a("div",{key:"ec9c8a63c9c34f8c8ce68310c07dd8fda66ffda2",class:"upload-header"},this.title&&a("div",{key:"f26ade32fe339a0382166345110ef3445bb58475",class:"text title"},this.title),this.label&&a("div",{key:"becc99e74e8d555fc40bcd0854575c5b435faf85",class:"text label"},this.label)),this.error&&a("dropi-alert",{key:"b01f441d6083e31f5ddaa2bc661722835134e8f0",message:this.errorMessage,type:"default",state:"error",dismissable:!0,showButton:!1,onOnClose:()=>{this.error=!1}}),t&&a("div",{key:"e221786da335f56a6160874d56ad4b50c9b0702f",class:{"file-upload":!0,"drag-over":this.dragging},onDragOver:e=>this.onDragOver(e),onDragEnter:e=>this.onDragEnter(e),onDragLeave:()=>this.onDragLeave(),onDrop:e=>this.onDrop(e)},a("div",{key:"ad6d5ed22aa64c4a33e3861cc48271dbecc59279",class:"file-upload__zone"+(this.dragging?" drag-over":"")},!l&&a("svg",{key:"a5666c9aaad62e8a4b6677b288d853953ada6169",width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"98a2c4e40aa67249f0b8b13f956846334a1b8652",d:"M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z",fill:"#FEF8F1"}),a("g",{key:"892e4f122e593fd77f37048fcd68157a682bf1b7","clip-path":"url(#up)"},a("path",{key:"aaaddae87cb45b9c00ddc98142c1ef5b2ec25a0a",d:"M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z",fill:"#F49A3D"}),a("path",{key:"4c9eddf5c6348984c7478701fe67e411d01cf8c5",d:"M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z",fill:"#F49A3D"})),a("defs",{key:"bcc8c24fcf8d9ea939dec31a36e5fce8c0fd203e"},a("clipPath",{key:"9724c45ddf4d8983116baf1b4baadb8e1c83ed9d",id:"up"},a("rect",{key:"1d0ca58ddc76c661f8278a177ad670633008bd5a",width:"16",height:"16",fill:"white",transform:"translate(12 12)"})))),a("div",{key:"d1a2c7a7cc539b1c519dcc5931c80eb38c230e1f",class:l?"info size-small-upload":"info"},a("div",{key:"4265e328f1bab72a221746afc15b0e7e8b6324b0",class:"title"},this.textDropZone),l&&a("dropi-button",{key:"076a0dfc2f087b9724e60980bb1217e676bdaeda",text:this.textButton,size:"small",onClick:e=>{e.stopPropagation(),this.openFilePicker()}})),!l&&a("div",{key:"070c2a5374d4262b4b66ea2a9f51a75358865011",class:"info-desc"},this.accept&&a("div",{key:"6482d13398d8ea654dbd5f5c684c7b0602da0b7d",class:"description"},"Formatos admitidos: ",this.accept),a("div",{key:"25ccba2cd7a16f732f111aeefe076516b0c360f6",class:"description"},"Tamaño máximo: ",this.maxFileSizeMB,"MB")),!l&&a("dropi-button",{key:"a1ed64460aa8c9aead966d33fa8ef25ddc383000",text:this.textButton,size:"small",onClick:e=>{e.stopPropagation(),this.openFilePicker()}}),a("input",{key:"b5debf074ef579d4bd74d1507ba63b912eeba37e",ref:e=>this.inputRef=e,type:"file",accept:this.accept,multiple:this.multiple,class:"upload-hidden",onChange:e=>this.onInputChange(e)}))),this.selectedFiles.length>0&&a("div",{key:"40d77d3c697b18637fa7669e857f5d931d91543d",class:"files-container"},i.length>0&&a("div",{key:"c8b2eac24568959a83500930fc36c54be04d3d75",class:"grid-list"},i.map((e=>this.renderGridItem(e))),i.length<this.maxFiles&&a("div",{key:"6782016ecee648dff31baa352db02413a37ad2ae",class:"add-img",onClick:()=>this.addImage()},a("div",{key:"08ecf1dae23fc4dac7818fd178d40a50a10a4508",class:"icon"},a("svg",{key:"c41793f302e1c0f7eeb91c0e524cd398988c62c2",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"cf066997fbfb0aa31bacbb72ef037f67b74de5ec",d:"M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z",fill:"#32394D"}))),a("div",{key:"03214b3dd6dad6b7d3973f36d041aafcb9089819",class:"text"},"Agregar"))),r.length>0&&a("div",{key:"4fb7c564b557885680f2aa2723273dac6f15cc72",class:"card-list"},r.map((e=>this.renderCardItem(e))))))}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.upload-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px);width:100%}.upload-header{display:flex;flex-direction:column;gap:var(--Size-1, 4px);align-items:flex-start;align-self:stretch}.upload-header .text{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 12px);font-style:normal;line-height:150%}.upload-header .title{font-weight:var(--font-weight-medium, 500)}.upload-header .label{font-weight:var(--font-weight-regular, 400)}.file-upload{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3, 12px);background:var(--Neutral-White, #ffffff)}.file-upload__zone{display:flex;padding:var(--Size-5, 24px);flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-6, 32px);align-self:stretch;border-radius:var(--Border-2, 8px);border:1px dashed var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);text-align:center;transition:border-color 0.3s ease}.file-upload__zone.drag-over{border:1px dashed var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fef8f1)}.info{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);align-self:stretch}.info .title{color:var(--Gray-Gray-700, #32394d);text-align:center;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-medium, 500);line-height:150%}.info.size-small-upload{flex-direction:row;gap:var(--Size-3, 12px)}.info-desc{display:flex;flex-direction:column;align-items:center;gap:var(--Size-1, 4px)}.description{color:var(--Gray-Gray-600, #475066);text-align:center;font-size:var(--font-size-s, 14px);font-style:normal;font-weight:var(--font-weight-regular, 400);line-height:150%}.upload-hidden{display:none}.files-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px)}.grid-list{display:flex;align-items:flex-start;gap:var(--Size-5, 24px);align-self:stretch;flex-wrap:wrap}.add-img{display:flex;height:88px;width:88px;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-1, 4px);align-self:stretch;border-radius:var(--Border-2, 8px);background:var(--Gray-Gray-50, #f7f8fa);cursor:pointer}.add-img:hover{transform:scale(1.1)}.add-img .icon{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Gray-Gray-100, #e6eaf2)}.add-img .text{color:var(--Gray-Gray-600, #475066);text-align:center;font-size:var(--font-size-xs, 12px);font-style:normal;font-weight:var(--font-weight-regular, 400);line-height:150%}.card-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Size-3, 12px);align-self:stretch;width:100%}.file-card{display:flex;padding:var(--Size-4, 16px);align-items:center;gap:var(--Size-3, 12px);align-self:stretch;border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background:var(--Neutral-White, #ffffff);width:100%}.file-card.error{border-color:var(--Error-Error-300, #f89b9c);background:var(--Error-Error-50, #fef0f0)}.file-card .preview-wrapper{width:34px;height:34px;position:relative;display:inline-block;border-radius:var(--Border-2, 8px);overflow:hidden;flex-shrink:0}.file-card .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.file-card .preview.uploading{filter:blur(2px)}.file-card .overlay-icon{width:16px;height:16px;padding:4px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Neutral-White, #ffffff)}.file-card .file-icon{flex-shrink:0}.file-card .info-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2, 8px);flex:1 0 0;min-width:0}.file-card .file-name{overflow:hidden;color:var(--Gray-Gray-600, #475066);text-overflow:ellipsis;font-size:var(--font-size-xs, 12px);font-style:normal;font-weight:var(--font-weight-regular, 400);line-height:150%;white-space:nowrap;max-width:300px}.file-card .file-name.error-text{color:var(--Error-Error-500, #f46a6b)}.file-card .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.file-card .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500, #f49a3d);transition:width 0.3s ease}.file-card .error-label{color:var(--Error-Error-500, #f46a6b);font-size:11px;font-weight:var(--font-weight-regular, 400);line-height:150%}.file-card .deleting-container{display:flex;align-items:center;flex:1 0 0}.file-card .deleting-label{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-xs, 12px);font-style:italic;font-weight:var(--font-weight-regular, 400);line-height:150%}.file-card .delete,.file-card .preview-image{display:inline-flex;align-items:center;justify-content:center;transition:transform 0.3s ease;border-radius:var(--Border-2, 8px);flex-shrink:0;cursor:pointer}.file-card .delete:hover,.file-card .preview-image:hover{transform:scale(1.1)}.file-card .delete-confirm{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 12px);font-style:normal;font-weight:var(--font-weight-medium, 500);line-height:150%;display:flex;justify-content:space-between;align-items:center;align-self:stretch;flex:1 0 0}.file-card .delete-confirm .message{flex:1}.file-card .delete-confirm .actions{display:flex;align-items:flex-start;gap:var(--Size-2, 8px)}.img-view{display:flex;width:88px;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2, 8px)}.img-view .preview-wrapper{position:relative;display:inline-block;width:88px;height:88px}.img-view .preview-container{border-radius:var(--Border-2, 8px);overflow:hidden;width:100%;height:100%}.img-view .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.img-view .preview.uploading{filter:blur(2px)}.img-view .overlay-icon{width:24px;height:24px;padding:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Neutral-White, #ffffff)}.img-view .delete{position:absolute;top:-12px;right:-9px;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Neutral-White, #ffffff);cursor:pointer}.img-view .delete:hover{transform:scale(1.1)}.img-view.error .preview-wrapper{border:2px solid var(--Error-Error-500, #f46a6b);border-radius:var(--Border-2, 8px)}.img-view.deleting .preview-wrapper{opacity:0.4}.img-view .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.img-view .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500, #f49a3d);transition:width 0.3s ease}.img-view .deleting-info{width:100%;text-align:center}.img-view .deleting-info-label{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-xxs, 10px);font-style:italic;font-weight:var(--font-weight-regular, 400);line-height:150%}@media screen and (max-width: 599px){.info.size-small-upload{flex-wrap:wrap;justify-content:center}.file-card .file-name{max-width:100px}}"}},[513,"dropi-file-upload",{title:[1],label:[1],textDropZone:[1,"text-drop-zone"],textButton:[1,"text-button"],previewType:[1,"preview-type"],multiple:[4],maxFiles:[2,"max-files"],maxFileSizeMB:[2,"max-file-size-m-b"],accept:[1],onlyView:[4,"only-view"],viewDragAndDrop:[4,"view-drag-and-drop"],dragAndDropSize:[1,"drag-and-drop-size"],selectedFiles:[32],error:[32],errorMessage:[32],dragging:[32]}]);function n(){"undefined"!=typeof customElements&&["dropi-file-upload","dropi-alert","dropi-button","dropi-icon"].forEach((i=>{switch(i){case"dropi-file-upload":customElements.get(e(i))||customElements.define(e(i),o);break;case"dropi-alert":customElements.get(e(i))||l();break;case"dropi-button":customElements.get(e(i))||s();break;case"dropi-icon":customElements.get(e(i))||d()}}))}n();const c=o,f=n;export{c as DropiFileUpload,f as defineCustomElement}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as r,p as a,H as o,c as e,h as n}from"./index.js";import{d as t}from"./p-D13d88W3.js";const i=a(class extends o{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.onClick=e(this,"onClick",7)}type="default";severity="primary";size="normal";state="default";fullWidth=!1;preIcon="";postIcon="";customIconColor="";text="";onClick;colorMap={default:"Primary-Primary-",success:"Success-Success-",error:"Error-Error-",info:"Info-Info-",legacy:"Secondary-Secondary-",warning:"Warning-Warning-",dropdown:"Gray-Gray-","default-light":"Gray-Gray-"};get iconSize(){return"large"===this.size?"24px":"small"===this.size?"16px":"18px"}get color(){return(this.colorMap[this.type]??"Primary-Primary-")+("disabled"===this.state?"300":"500")}get fontColor(){return"tertiary"===this.severity?"default"===this.type||"legacy"===this.type?"Gray-Gray-500":this.color:"secondary"===this.severity?this.color:"Neutral-White"}handleClick(r){"disabled"!==this.state&&"loading"!==this.state&&this.onClick.emit(r)}renderLoadingSpinner(){return n("svg",{class:"spin",width:this.iconSize,height:this.iconSize,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z",fill:`var(--${this.fontColor})`}))}render(){const r="disabled"===this.state||"loading"===this.state,a=""!==this.text,o=""!==this.postIcon||"dropdown"===this.type,e="dropdown"===this.type?"Dropdown-down":this.postIcon;return n("button",{key:"878f01cf2b73d67ad393c46c47dbf71d4589573b",class:{btn:!0,"without-text":!a,[this.severity??"primary"]:!0,[this.type??"default"]:!0,[this.size??"normal"]:!0,[this.state??"default"]:!0,"full-width":this.fullWidth},disabled:r,onClick:r=>this.handleClick(r)},this.preIcon&&n("dropi-icon",{key:"d42a3e52d105b985c9cbc72241e363baaaad25a8",name:this.preIcon,width:this.iconSize,height:this.iconSize,color:this.fontColor}),a&&n("span",{key:"e88b6ef2c3cf63aec13f1fa4bfe289333acdd8b9",class:"text"},this.text),o&&n("dropi-icon",{key:"596a8227042757ffe942290a1e776b981bb89136",name:e,width:this.iconSize,height:this.iconSize,color:this.fontColor}),"loading"===this.state&&this.renderLoadingSpinner(),n("slot",{key:"e46a00e52792e690b3b4cb24e6af1b1843f7384f"}))}static get style(){return":host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}"}},[769,"dropi-button",{type:[1],severity:[1],size:[1],state:[1],fullWidth:[516,"full-width"],preIcon:[1,"pre-icon"],postIcon:[1,"post-icon"],customIconColor:[1,"custom-icon-color"],text:[1]}]);function c(){"undefined"!=typeof customElements&&["dropi-button","dropi-icon"].forEach((a=>{switch(a){case"dropi-button":customElements.get(r(a))||customElements.define(r(a),i);break;case"dropi-icon":customElements.get(r(a))||t()}}))}c();export{i as D,c as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,g as t,b as o}from"./p-D5SAM1O2.js";export{s as setNonce}from"./p-D5SAM1O2.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((async e=>(await t(),o(JSON.parse('[["p-8bf5d8ee",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["p-a822a23e",[[513,"dropi-table",{"columns":[1],"rows":[1],"showCheckbox":[4,"show-checkbox"],"loading":[4],"emptyMessage":[1,"empty-message"],"title":[1],"showSearch":[4,"show-search"],"showColumnSelector":[4,"show-column-selector"],"showPaginator":[4,"show-paginator"],"pageSizes":[1,"page-sizes"],"currentPage":[1026,"current-page"],"totalPages":[2,"total-pages"],"rowActions":[1,"row-actions"],"headers":[1],"data":[1],"selectedRowIds":[16],"childData":[1,"child-data"],"visibleRowsChildrens":[1,"visible-rows-childrens"],"dropiTableConfiguration":[8,"dropi-table-configuration"],"dropiTableBackendParams":[8,"dropi-table-backend-params"],"isCursorPagination":[4,"is-cursor-pagination"],"parsedColumns":[32],"parsedRows":[32],"parsedPageSizes":[32],"parsedRowActions":[32],"sortKey":[32],"sortDir":[32],"sortAsc":[32],"selectedKeys":[32],"searchTerm":[32],"pageSize":[32],"showColumnMenu":[32],"hiddenColumns":[32],"openActionRow":[32]},null,{"columns":[{"columnsChanged":0}],"rows":[{"rowsChanged":0}],"pageSizes":[{"pageSizesChanged":0}],"rowActions":[{"rowActionsChanged":0}],"headers":[{"headersChanged":0}],"data":[{"dataChanged":0}]}]]],["p-a457e8ca",[[772,"dropi-alert-modal",{"visible":[1544],"type":[1025],"tittle":[1025],"message":[1025],"primaryButton":[1025,"primary-button"],"secondaryButton":[1025,"secondary-button"],"loading":[4],"closable":[1028],"displayButtons":[1028,"display-buttons"],"loadingTitle":[1025,"loading-title"],"loadingMessage":[1025,"loading-message"],"isStep":[4,"is-step"],"baseZIndex":[2,"base-z-index"],"params":[8],"show":[64],"hide":[64]},null,{"params":[{"paramsChanged":0}]}]]],["p-3321ca70",[[513,"dropi-file-upload",{"title":[1],"label":[1],"textDropZone":[1,"text-drop-zone"],"textButton":[1,"text-button"],"previewType":[1,"preview-type"],"multiple":[4],"maxFiles":[2,"max-files"],"maxFileSizeMB":[2,"max-file-size-m-b"],"accept":[1],"onlyView":[4,"only-view"],"viewDragAndDrop":[4,"view-drag-and-drop"],"dragAndDropSize":[1,"drag-and-drop-size"],"selectedFiles":[32],"error":[32],"errorMessage":[32],"dragging":[32]}]]],["p-7c0d2edf",[[513,"dropi-card-product",{"image":[1],"productName":[1,"product-name"],"salePrice":[2,"sale-price"],"suggestedPrice":[2,"suggested-price"],"currency":[1],"supplier":[1],"category":[1],"stock":[2],"supplierCategory":[1,"supplier-category"],"showFavorite":[4,"show-favorite"],"isFavorite":[1028,"is-favorite"],"showAddButton":[4,"show-add-button"]}]]],["p-fa3d0267",[[513,"dropi-card-section",{"title":[1],"description":[1],"typeElement":[1,"type-element"],"type":[1],"isChecked":[1028,"is-checked"]}]]],["p-976a15e3",[[513,"dropi-checkbox-selection-list",{"options":[1],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"showNotFound":[4,"show-not-found"],"notFoundMessage":[1,"not-found-message"],"multiSelect":[4,"multi-select"],"searchDelay":[2,"search-delay"],"filterText":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["p-53a7a37d",[[513,"dropi-dropdown",{"options":[1],"valueModel":[1,"value-model"],"height":[1],"isInSelect":[4,"is-in-select"],"parameters":[16],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["p-ae35d538",[[769,"dropi-empty-state",{"title":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"buttonText":[1,"button-text"],"buttonIcon":[1,"button-icon"],"dropiIcon":[1,"dropi-icon"],"buttonSeverity":[1,"button-severity"]}]]],["p-5c0bd7c2",[[513,"dropi-languages-selector",{"languages":[1],"selectedLang":[1025,"selected-lang"],"isOpen":[32],"parsedLanguages":[32],"currentLang":[32]},null,{"languages":[{"languagesChanged":0}],"selectedLang":[{"selectedLangChanged":0}]}]]],["p-0188e07a",[[513,"dropi-search",{"type":[1],"placeholder":[1],"textInput":[1025,"text-input"],"typeInput":[1,"type-input"],"maxLength":[2,"max-length"],"showIcon":[4,"show-icon"],"showClear":[4,"show-clear"],"dataToSearch":[1,"data-to-search"],"dataName":[1,"data-name"],"position":[1],"multipleSelectModel":[4,"multiple-select-model"],"heightOverlay":[2,"height-overlay"],"label":[1],"model":[1025],"open":[32],"selected":[32],"parsedOptions":[32]},null,{"dataToSearch":[{"optionsChanged":0}]}]]],["p-00e5a2de",[[769,"dropi-accordion-item",{"sectionTitle":[1,"section-title"],"index":[2],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["p-66b80371",[[513,"dropi-banner-external",{"imageUrl":[1,"image-url"],"link":[1],"alt":[1],"backgroundColor":[1,"background-color"],"slugName":[1,"slug-name"],"viewOnWhiteBrand":[4,"view-on-white-brand"],"viewOnlyCountries":[16],"closed":[32]}]]],["p-efc2fc35",[[513,"dropi-breadcrumb",{"items":[1],"homeRoute":[1,"home-route"],"homeIconName":[1,"home-icon-name"],"lastItemClickable":[4,"last-item-clickable"]}]]],["p-92291873",[[513,"dropi-card-checkbox",{"type":[1],"state":[1025],"title":[1],"description":[1],"extraInfo":[1,"extra-info"],"extraInfoDescription":[1,"extra-info-description"],"disabled":[4]}]]],["p-cc527d91",[[769,"dropi-chips",{"customStyle":[1,"custom-style"],"type":[1],"urlImg":[1,"url-img"],"showIcon":[4,"show-icon"],"icon":[1]}]]],["p-c3614c4a",[[513,"dropi-city-selector",{"options":[1],"selectedCities":[1025,"selected-cities"],"placeholder":[1],"disabled":[4],"isOpen":[32],"selected":[32],"parsedOptions":[32],"searchTerm":[32]},[[4,"click","handleDocClick"]],{"options":[{"optionsChanged":0}],"selectedCities":[{"selectedChanged":0}]}]]],["p-e6e766ed",[[513,"dropi-country-selector",{"label":[1],"placeholder":[1],"currentSelection":[1025,"current-selection"],"disabled":[4],"showObligatory":[4,"show-obligatory"],"hasError":[4,"has-error"],"textHelper":[1,"text-helper"],"searchTerm":[1025,"search-term"],"selectProperties":[8,"select-properties"],"isOpen":[32],"selected":[32]},[[4,"click","handleDocClick"]],{"currentSelection":[{"currentSelectionChanged":0}],"selectProperties":[{"selectPropertiesChanged":0}]}]]],["p-7bfc1c27",[[513,"dropi-date-picker",{"selectedDate":[1025,"selected-date"],"startDate":[1025,"start-date"],"endDate":[1025,"end-date"],"selectionMode":[1,"selection-mode"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"label":[1],"placeholder":[1],"disabled":[4],"isInvalid":[4,"is-invalid"],"loading":[4],"open":[32],"viewYear":[32],"viewMonth":[32],"hoverDate":[32]},[[4,"click","handleDocClick"]]]]],["p-af8e2157",[[769,"dropi-drawer",{"drawerTitle":[1,"drawer-title"],"drawerIsOpen":[1032,"drawer-is-open"],"open":[1032],"position":[1],"size":[1],"width":[1],"height":[1],"headless":[4],"closeOnBackdrop":[4,"close-on-backdrop"]},null,{"open":[{"openChanged":0}],"drawerIsOpen":[{"openChanged":0}]}]]],["p-39af6478",[[513,"dropi-favorite-button",{"isFavorite":[1028,"is-favorite"],"hovered":[32]}]]],["p-25640777",[[513,"dropi-file-upload-progress-bar",{"textFile":[1,"text-file"],"progress":[2],"type":[1025],"urlImage":[1,"url-image"],"isPreview":[4,"is-preview"],"disabled":[4],"fileExtension":[32]},null,{"progress":[{"handleProgress":0}],"textFile":[{"handleTextFile":0}]}]]],["p-db38bf16",[[513,"dropi-image-miniature",{"label":[1],"images":[1],"width":[1],"height":[1]}]]],["p-dd5d8b1b",[[513,"dropi-image-overlay",{"visible":[1032],"images":[1],"activeIndex":[1026,"active-index"],"current":[32],"parsedImages":[32]},null,{"images":[{"imagesChanged":0}],"activeIndex":[{"indexChanged":0}],"visible":[{"visibleChanged":0}]}]]],["p-2674d901",[[513,"dropi-media-player",{"src":[1],"mediaType":[1,"media-type"],"poster":[1],"autoplay":[4],"loop":[4],"initialVolume":[2,"initial-volume"],"format":[1],"playing":[32],"currentTimeStr":[32],"durationStr":[32],"duration":[32],"volume":[32],"muted":[32],"showControls":[32],"isFullscreen":[32],"progress":[32],"speed":[32],"showSpeedMenu":[32],"showVolumeSlider":[32]},[[4,"click","handleDocClick"]]]]],["p-f41cd9b5",[[513,"dropi-navbar",{"logoUrl":[1,"logo-url"],"logoAlt":[1,"logo-alt"],"data":[1],"title":[1],"activeId":[1,"active-id"],"userName":[1,"user-name"],"userAvatar":[1,"user-avatar"],"notifications":[2],"showMenuToggle":[4,"show-menu-toggle"]}]]],["p-e3ad21f8",[[513,"dropi-phone-input",{"codArea":[1025,"cod-area"],"ngModelPhone":[1025,"ng-model-phone"],"phoneNumberPlaceholder":[1,"phone-number-placeholder"],"disabledInput":[4,"disabled-input"],"isValidPhone":[4,"is-valid-phone"],"validateOnInit":[4,"validate-on-init"],"selectedOption":[1032,"selected-option"],"selectProperties":[8,"select-properties"],"open":[32]},[[8,"click","handleWindowClick"]],{"codArea":[{"codAreaChanged":0}],"selectedOption":[{"selectedOptionChanged":0}]}]]],["p-cdde481b",[[513,"dropi-radio-selection-list",{"options":[1],"selectedOption":[1032,"selected-option"],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"alwaysShowDescription":[4,"always-show-description"],"typeLayout":[1,"type-layout"],"searchDelay":[2,"search-delay"],"filterText":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["p-5fb33ae4",[[577,"dropi-select",{"label":[1025],"placeholder":[1025],"options":[1040],"name":[1],"disabled":[516],"hasError":[1028,"has-error"],"errorText":[1025,"error-text"],"textHelper":[1025,"text-helper"],"showObligatory":[1028,"show-obligatory"],"searchEnabled":[1028,"search-enabled"],"multiSelect":[1028,"multi-select"],"dropdownType":[1028,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[1028,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1025,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"selectedOption":[1040],"overlayClass":[1,"overlay-class"],"selectProperties":[8,"select-properties"],"isOpen":[32],"_selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"selectProperties":[{"selectPropertiesChanged":0}],"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"selectedOption":[{"valueChanged":0}]}]]],["p-446a481d",[[513,"dropi-sidebar",{"sideBarProperties":[1025,"side-bar-properties"],"parsedProperties":[32]},null,{"sideBarProperties":[{"watchPropHandler":0}]}]]],["p-02710049",[[513,"dropi-steps",{"stepsCount":[2,"steps-count"],"showNumberOfStep":[4,"show-number-of-step"],"currentStep":[2,"current-step"],"stepLabels":[1,"step-labels"],"state":[1]}]]],["p-18adf694",[[513,"dropi-tabs",{"configuration":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"stopAction":[4,"stop-action"],"parsedTabs":[32]},null,{"configuration":[{"tabsChanged":0}]}]]],["p-a232c6a7",[[577,"dropi-text-area",{"id":[1025],"name":[1],"label":[1025],"placeholder":[1025],"value":[1025],"maxLength":[1026,"max-length"],"minLength":[1026,"min-length"],"rows":[1026],"resize":[1025],"disabled":[516],"required":[516],"showObligatoryAsterisk":[4,"show-obligatory-asterisk"],"textHelper":[1025,"text-helper"],"hasError":[4,"has-error"],"textAreaProperties":[16],"touched":[32]},null,{"textAreaProperties":[{"textAreaPropertiesChanged":0}],"value":[{"valueChanged":0}]}]]],["p-955e52f8",[[513,"dropi-time-line",{"steps":[1]}]]],["p-1a3619c3",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["p-9212f544",[[769,"dropi-tooltip-v2",{"text":[1],"title":[1],"label":[1],"position":[1],"arrowPosition":[1,"arrow-position"],"trigger":[1025],"maxWidth":[1,"max-width"],"minWidth":[1,"min-width"],"showDelay":[2,"show-delay"],"disabled":[4],"showIcon":[4,"show-icon"],"showX":[1028,"show-x"],"iconName":[1,"icon-name"],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"],"visible":[32]}]]],["p-2af538b9",[[513,"dropi-vertical-steps",{"steps":[1],"currentStep":[2,"current-step"],"clickable":[4],"showCheckIcon":[4,"show-check-icon"]}]]],["p-33d242ec",[[513,"dropi-youtube-lazy-video",{"videoId":[1,"video-id"],"thumbnailSrc":[1,"thumbnail-src"],"videoTitle":[1,"video-title"],"isPlaying":[32]}]]],["p-86283e99",[[769,"dropi-accordion",{"multiple":[4]}]]],["p-3e36c8b8",[[513,"dropi-alert-legacy",{"visible":[1028],"message":[1],"type":[1],"autoClose":[4,"auto-close"]}]]],["p-9b037086",[[513,"dropi-badge",{"state":[1]}]]],["p-d42d4ef7",[[513,"dropi-badge-legacy",{"type":[1],"state":[1],"variant":[1],"count":[2]}]]],["p-b3d3c72e",[[769,"dropi-carousel",{"value":[1],"page":[1026],"numVisible":[2,"num-visible"],"numScroll":[2,"num-scroll"],"orientation":[1],"showNavigators":[8,"show-navigators"],"showIndicators":[8,"show-indicators"],"autoplayInterval":[2,"autoplay-interval"],"circular":[8],"parsedValue":[32],"internalPage":[32],"isAnimating":[32],"totalPages":[32]},null,{"value":[{"handleValue":0}],"page":[{"handlePage":0}]}]]],["p-3ebc9b7b",[[513,"dropi-color-picker",{"currentColor":[1025,"current-color"],"position":[1],"color":[32],"hue":[32],"saturation":[32],"currentVal":[32],"opacity":[32],"showEdit":[32]},null,{"value":[{"onValueChange":0}]}]]],["p-ec263862",[[513,"dropi-date-picker-range",{"startDate":[1025,"start-date"],"endDate":[1025,"end-date"],"showLabel":[4,"show-label"],"placeholder":[1],"loading":[4],"maxDaysRange":[2,"max-days-range"],"hideTodayRangeShortcut":[4,"hide-today-range-shortcut"],"start":[32],"end":[32],"activeRange":[32],"showWarning":[32]},null,{"startDate":[{"onStartPropChange":0}],"endDate":[{"onEndPropChange":0}]}]]],["p-85444414",[[513,"dropi-logo",{"urlLogo":[1,"url-logo"],"size":[1],"theme":[1]}]]],["p-1d3d6a32",[[513,"dropi-lottie-loader",{"visible":[4],"loadingAnimation":[1,"loading-animation"],"title":[1],"message":[1]}]]],["p-665ef7ba",[[513,"dropi-otp-send-code",{"engine":[1],"labelContact":[1,"label-contact"],"showLabelContact":[4,"show-label-contact"],"errorMessage":[1,"error-message"],"digits":[32],"digitStates":[32],"countdown":[32],"canResend":[32],"error":[32]}]]],["p-a3c4d677",[[577,"dropi-radio-button",{"label":[1],"name":[1],"id":[1],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["p-17c56074",[[513,"dropi-read-more",{"text":[1],"maxWords":[2,"max-words"],"showSeeLess":[4,"show-see-less"],"textStyle":[1,"text-style"],"buttonStyle":[1,"button-style"],"expanded":[32]}]]],["p-9032ba00",[[513,"dropi-simple-stepper",{"stepsCount":[2,"steps-count"],"typeStep":[1,"type-step"],"currentStep":[2,"current-step"],"labelStepper":[1,"label-stepper"],"flowMode":[1,"flow-mode"],"white_brand":[1]}]]],["p-5cee6721",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"radius":[1],"lines":[2],"baseColor":[1,"base-color"]}]]],["p-a8f24270",[[513,"dropi-tag-type-product",{"label":[1]}]]],["p-cbf5367e",[[769,"dropi-tooltip",{"text":[1],"outlined":[4]}]]],["p-7eb27836",[[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"]}]]],["p-a1c93e55",[[513,"dropi-ilustration-icon",{"type":[1],"state":[1],"stateInsignia":[1,"state-insignia"],"tagProduct":[4,"tag-product"]}]]],["p-9ffec3f7",[[513,"dropi-avatars",{"image":[1],"alt":[1],"type":[1],"initials":[1]}]]],["p-3013f3b8",[[769,"dropi-modal",{"visible":[1544],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"dismissableMask":[4,"dismissable-mask"],"dismissible":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"closable":[4],"blockScroll":[4,"block-scroll"],"showHeader":[4,"show-header"],"showFooter":[4,"show-footer"],"position":[1],"size":[1],"styleClass":[1,"style-class"],"maxWidth":[1,"max-width"],"autoZIndex":[4,"auto-z-index"],"baseZIndex":[2,"base-z-index"],"transitionOptions":[1,"transition-options"],"enableBeforeClose":[4,"enable-before-close"],"draggable":[4],"resizable":[4],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["p-b2623a5c",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["p-a4e1df5e",[[513,"dropi-country-flags",{"country":[1],"customStyle":[1,"custom-style"],"width":[1],"height":[1]}]]],["p-50e0d44f",[[577,"dropi-input",{"id":[1025],"name":[1],"label":[1025],"placeholder":[1025],"value":[1025],"maxLength":[1026,"max-length"],"disabled":[516],"required":[516],"showObligatoryAsterisk":[1028,"show-obligatory-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1025,"input-mode"],"passwordInput":[1028,"password-input"],"isMoneyInput":[1028,"is-money-input"],"isThousandSeparator":[1028,"is-thousand-separator"],"isNumericInput":[1028,"is-numeric-input"],"allowDecimals":[1028,"allow-decimals"],"isLettersOnly":[1028,"is-letters-only"],"icon":[1025],"iconColor":[1025,"icon-color"],"hasError":[1028,"has-error"],"textHelper":[1025,"text-helper"],"showHelperOnlyOnError":[1028,"show-helper-only-on-error"],"inputProperties":[8,"input-properties"],"showPassword":[32],"touched":[32]},null,{"inputProperties":[{"inputPropertiesChanged":0}],"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}],[513,"dropi-paginator",{"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"],"disabled":[4],"maxVisiblePages":[2,"max-visible-pages"],"isNotTotalPages":[4,"is-not-total-pages"],"noLabels":[4,"no-labels"]}],[513,"dropi-tag",{"type":[513],"state":[513],"showIcon":[4,"show-icon"],"icon":[513],"text":[513]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["p-50a5e548",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"fullWidth":[516,"full-width"],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"customIconColor":[1,"custom-icon-color"],"text":[1]}]]],["p-9e0129cc",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]]]'),e))));
|
|
1
|
+
import{p as e,g as t,b as o}from"./p-D5SAM1O2.js";export{s as setNonce}from"./p-D5SAM1O2.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((async e=>(await t(),o(JSON.parse('[["p-8bf5d8ee",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["p-a822a23e",[[513,"dropi-table",{"columns":[1],"rows":[1],"showCheckbox":[4,"show-checkbox"],"loading":[4],"emptyMessage":[1,"empty-message"],"title":[1],"showSearch":[4,"show-search"],"showColumnSelector":[4,"show-column-selector"],"showPaginator":[4,"show-paginator"],"pageSizes":[1,"page-sizes"],"currentPage":[1026,"current-page"],"totalPages":[2,"total-pages"],"rowActions":[1,"row-actions"],"headers":[1],"data":[1],"selectedRowIds":[16],"childData":[1,"child-data"],"visibleRowsChildrens":[1,"visible-rows-childrens"],"dropiTableConfiguration":[8,"dropi-table-configuration"],"dropiTableBackendParams":[8,"dropi-table-backend-params"],"isCursorPagination":[4,"is-cursor-pagination"],"parsedColumns":[32],"parsedRows":[32],"parsedPageSizes":[32],"parsedRowActions":[32],"sortKey":[32],"sortDir":[32],"sortAsc":[32],"selectedKeys":[32],"searchTerm":[32],"pageSize":[32],"showColumnMenu":[32],"hiddenColumns":[32],"openActionRow":[32]},null,{"columns":[{"columnsChanged":0}],"rows":[{"rowsChanged":0}],"pageSizes":[{"pageSizesChanged":0}],"rowActions":[{"rowActionsChanged":0}],"headers":[{"headersChanged":0}],"data":[{"dataChanged":0}]}]]],["p-a457e8ca",[[772,"dropi-alert-modal",{"visible":[1544],"type":[1025],"tittle":[1025],"message":[1025],"primaryButton":[1025,"primary-button"],"secondaryButton":[1025,"secondary-button"],"loading":[4],"closable":[1028],"displayButtons":[1028,"display-buttons"],"loadingTitle":[1025,"loading-title"],"loadingMessage":[1025,"loading-message"],"isStep":[4,"is-step"],"baseZIndex":[2,"base-z-index"],"params":[8],"show":[64],"hide":[64]},null,{"params":[{"paramsChanged":0}]}]]],["p-3321ca70",[[513,"dropi-file-upload",{"title":[1],"label":[1],"textDropZone":[1,"text-drop-zone"],"textButton":[1,"text-button"],"previewType":[1,"preview-type"],"multiple":[4],"maxFiles":[2,"max-files"],"maxFileSizeMB":[2,"max-file-size-m-b"],"accept":[1],"onlyView":[4,"only-view"],"viewDragAndDrop":[4,"view-drag-and-drop"],"dragAndDropSize":[1,"drag-and-drop-size"],"selectedFiles":[32],"error":[32],"errorMessage":[32],"dragging":[32]}]]],["p-7c0d2edf",[[513,"dropi-card-product",{"image":[1],"productName":[1,"product-name"],"salePrice":[2,"sale-price"],"suggestedPrice":[2,"suggested-price"],"currency":[1],"supplier":[1],"category":[1],"stock":[2],"supplierCategory":[1,"supplier-category"],"showFavorite":[4,"show-favorite"],"isFavorite":[1028,"is-favorite"],"showAddButton":[4,"show-add-button"]}]]],["p-fa3d0267",[[513,"dropi-card-section",{"title":[1],"description":[1],"typeElement":[1,"type-element"],"type":[1],"isChecked":[1028,"is-checked"]}]]],["p-976a15e3",[[513,"dropi-checkbox-selection-list",{"options":[1],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"showNotFound":[4,"show-not-found"],"notFoundMessage":[1,"not-found-message"],"multiSelect":[4,"multi-select"],"searchDelay":[2,"search-delay"],"filterText":[32],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["p-53a7a37d",[[513,"dropi-dropdown",{"options":[1],"valueModel":[1,"value-model"],"height":[1],"isInSelect":[4,"is-in-select"],"parameters":[16],"selected":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["p-ae35d538",[[769,"dropi-empty-state",{"title":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"buttonText":[1,"button-text"],"buttonIcon":[1,"button-icon"],"dropiIcon":[1,"dropi-icon"],"buttonSeverity":[1,"button-severity"]}]]],["p-5c0bd7c2",[[513,"dropi-languages-selector",{"languages":[1],"selectedLang":[1025,"selected-lang"],"isOpen":[32],"parsedLanguages":[32],"currentLang":[32]},null,{"languages":[{"languagesChanged":0}],"selectedLang":[{"selectedLangChanged":0}]}]]],["p-0188e07a",[[513,"dropi-search",{"type":[1],"placeholder":[1],"textInput":[1025,"text-input"],"typeInput":[1,"type-input"],"maxLength":[2,"max-length"],"showIcon":[4,"show-icon"],"showClear":[4,"show-clear"],"dataToSearch":[1,"data-to-search"],"dataName":[1,"data-name"],"position":[1],"multipleSelectModel":[4,"multiple-select-model"],"heightOverlay":[2,"height-overlay"],"label":[1],"model":[1025],"open":[32],"selected":[32],"parsedOptions":[32]},null,{"dataToSearch":[{"optionsChanged":0}]}]]],["p-00e5a2de",[[769,"dropi-accordion-item",{"sectionTitle":[1,"section-title"],"index":[2],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["p-66b80371",[[513,"dropi-banner-external",{"imageUrl":[1,"image-url"],"link":[1],"alt":[1],"backgroundColor":[1,"background-color"],"slugName":[1,"slug-name"],"viewOnWhiteBrand":[4,"view-on-white-brand"],"viewOnlyCountries":[16],"closed":[32]}]]],["p-efc2fc35",[[513,"dropi-breadcrumb",{"items":[1],"homeRoute":[1,"home-route"],"homeIconName":[1,"home-icon-name"],"lastItemClickable":[4,"last-item-clickable"]}]]],["p-92291873",[[513,"dropi-card-checkbox",{"type":[1],"state":[1025],"title":[1],"description":[1],"extraInfo":[1,"extra-info"],"extraInfoDescription":[1,"extra-info-description"],"disabled":[4]}]]],["p-cc527d91",[[769,"dropi-chips",{"customStyle":[1,"custom-style"],"type":[1],"urlImg":[1,"url-img"],"showIcon":[4,"show-icon"],"icon":[1]}]]],["p-c3614c4a",[[513,"dropi-city-selector",{"options":[1],"selectedCities":[1025,"selected-cities"],"placeholder":[1],"disabled":[4],"isOpen":[32],"selected":[32],"parsedOptions":[32],"searchTerm":[32]},[[4,"click","handleDocClick"]],{"options":[{"optionsChanged":0}],"selectedCities":[{"selectedChanged":0}]}]]],["p-e6e766ed",[[513,"dropi-country-selector",{"label":[1],"placeholder":[1],"currentSelection":[1025,"current-selection"],"disabled":[4],"showObligatory":[4,"show-obligatory"],"hasError":[4,"has-error"],"textHelper":[1,"text-helper"],"searchTerm":[1025,"search-term"],"selectProperties":[8,"select-properties"],"isOpen":[32],"selected":[32]},[[4,"click","handleDocClick"]],{"currentSelection":[{"currentSelectionChanged":0}],"selectProperties":[{"selectPropertiesChanged":0}]}]]],["p-7bfc1c27",[[513,"dropi-date-picker",{"selectedDate":[1025,"selected-date"],"startDate":[1025,"start-date"],"endDate":[1025,"end-date"],"selectionMode":[1,"selection-mode"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"label":[1],"placeholder":[1],"disabled":[4],"isInvalid":[4,"is-invalid"],"loading":[4],"open":[32],"viewYear":[32],"viewMonth":[32],"hoverDate":[32]},[[4,"click","handleDocClick"]]]]],["p-af8e2157",[[769,"dropi-drawer",{"drawerTitle":[1,"drawer-title"],"drawerIsOpen":[1032,"drawer-is-open"],"open":[1032],"position":[1],"size":[1],"width":[1],"height":[1],"headless":[4],"closeOnBackdrop":[4,"close-on-backdrop"]},null,{"open":[{"openChanged":0}],"drawerIsOpen":[{"openChanged":0}]}]]],["p-39af6478",[[513,"dropi-favorite-button",{"isFavorite":[1028,"is-favorite"],"hovered":[32]}]]],["p-25640777",[[513,"dropi-file-upload-progress-bar",{"textFile":[1,"text-file"],"progress":[2],"type":[1025],"urlImage":[1,"url-image"],"isPreview":[4,"is-preview"],"disabled":[4],"fileExtension":[32]},null,{"progress":[{"handleProgress":0}],"textFile":[{"handleTextFile":0}]}]]],["p-db38bf16",[[513,"dropi-image-miniature",{"label":[1],"images":[1],"width":[1],"height":[1]}]]],["p-dd5d8b1b",[[513,"dropi-image-overlay",{"visible":[1032],"images":[1],"activeIndex":[1026,"active-index"],"current":[32],"parsedImages":[32]},null,{"images":[{"imagesChanged":0}],"activeIndex":[{"indexChanged":0}],"visible":[{"visibleChanged":0}]}]]],["p-2674d901",[[513,"dropi-media-player",{"src":[1],"mediaType":[1,"media-type"],"poster":[1],"autoplay":[4],"loop":[4],"initialVolume":[2,"initial-volume"],"format":[1],"playing":[32],"currentTimeStr":[32],"durationStr":[32],"duration":[32],"volume":[32],"muted":[32],"showControls":[32],"isFullscreen":[32],"progress":[32],"speed":[32],"showSpeedMenu":[32],"showVolumeSlider":[32]},[[4,"click","handleDocClick"]]]]],["p-f41cd9b5",[[513,"dropi-navbar",{"logoUrl":[1,"logo-url"],"logoAlt":[1,"logo-alt"],"data":[1],"title":[1],"activeId":[1,"active-id"],"userName":[1,"user-name"],"userAvatar":[1,"user-avatar"],"notifications":[2],"showMenuToggle":[4,"show-menu-toggle"]}]]],["p-e3ad21f8",[[513,"dropi-phone-input",{"codArea":[1025,"cod-area"],"ngModelPhone":[1025,"ng-model-phone"],"phoneNumberPlaceholder":[1,"phone-number-placeholder"],"disabledInput":[4,"disabled-input"],"isValidPhone":[4,"is-valid-phone"],"validateOnInit":[4,"validate-on-init"],"selectedOption":[1032,"selected-option"],"selectProperties":[8,"select-properties"],"open":[32]},[[8,"click","handleWindowClick"]],{"codArea":[{"codAreaChanged":0}],"selectedOption":[{"selectedOptionChanged":0}]}]]],["p-cdde481b",[[513,"dropi-radio-selection-list",{"options":[1],"selectedOption":[1032,"selected-option"],"showFilter":[4,"show-filter"],"filterPlaceholder":[1,"filter-placeholder"],"alwaysShowDescription":[4,"always-show-description"],"typeLayout":[1,"type-layout"],"searchDelay":[2,"search-delay"],"filterText":[32],"parsedOptions":[32]},null,{"options":[{"optionsChanged":0}]}]]],["p-5fb33ae4",[[577,"dropi-select",{"label":[1025],"placeholder":[1025],"options":[1040],"name":[1],"disabled":[516],"hasError":[1028,"has-error"],"errorText":[1025,"error-text"],"textHelper":[1025,"text-helper"],"showObligatory":[1028,"show-obligatory"],"searchEnabled":[1028,"search-enabled"],"multiSelect":[1028,"multi-select"],"dropdownType":[1028,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[1028,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1025,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"selectedOption":[1040],"overlayClass":[1,"overlay-class"],"selectProperties":[8,"select-properties"],"isOpen":[32],"_selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"selectProperties":[{"selectPropertiesChanged":0}],"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"selectedOption":[{"valueChanged":0}]}]]],["p-446a481d",[[513,"dropi-sidebar",{"sideBarProperties":[1025,"side-bar-properties"],"parsedProperties":[32]},null,{"sideBarProperties":[{"watchPropHandler":0}]}]]],["p-02710049",[[513,"dropi-steps",{"stepsCount":[2,"steps-count"],"showNumberOfStep":[4,"show-number-of-step"],"currentStep":[2,"current-step"],"stepLabels":[1,"step-labels"],"state":[1]}]]],["p-18adf694",[[513,"dropi-tabs",{"configuration":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"stopAction":[4,"stop-action"],"parsedTabs":[32]},null,{"configuration":[{"tabsChanged":0}]}]]],["p-a232c6a7",[[577,"dropi-text-area",{"id":[1025],"name":[1],"label":[1025],"placeholder":[1025],"value":[1025],"maxLength":[1026,"max-length"],"minLength":[1026,"min-length"],"rows":[1026],"resize":[1025],"disabled":[516],"required":[516],"showObligatoryAsterisk":[4,"show-obligatory-asterisk"],"textHelper":[1025,"text-helper"],"hasError":[4,"has-error"],"textAreaProperties":[16],"touched":[32]},null,{"textAreaProperties":[{"textAreaPropertiesChanged":0}],"value":[{"valueChanged":0}]}]]],["p-955e52f8",[[513,"dropi-time-line",{"steps":[1]}]]],["p-1a3619c3",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["p-9212f544",[[769,"dropi-tooltip-v2",{"text":[1],"title":[1],"label":[1],"position":[1],"arrowPosition":[1,"arrow-position"],"trigger":[1025],"maxWidth":[1,"max-width"],"minWidth":[1,"min-width"],"showDelay":[2,"show-delay"],"disabled":[4],"showIcon":[4,"show-icon"],"showX":[1028,"show-x"],"iconName":[1,"icon-name"],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"],"visible":[32]}]]],["p-2af538b9",[[513,"dropi-vertical-steps",{"steps":[1],"currentStep":[2,"current-step"],"clickable":[4],"showCheckIcon":[4,"show-check-icon"]}]]],["p-33d242ec",[[513,"dropi-youtube-lazy-video",{"videoId":[1,"video-id"],"thumbnailSrc":[1,"thumbnail-src"],"videoTitle":[1,"video-title"],"isPlaying":[32]}]]],["p-86283e99",[[769,"dropi-accordion",{"multiple":[4]}]]],["p-3e36c8b8",[[513,"dropi-alert-legacy",{"visible":[1028],"message":[1],"type":[1],"autoClose":[4,"auto-close"]}]]],["p-9b037086",[[513,"dropi-badge",{"state":[1]}]]],["p-d42d4ef7",[[513,"dropi-badge-legacy",{"type":[1],"state":[1],"variant":[1],"count":[2]}]]],["p-b3d3c72e",[[769,"dropi-carousel",{"value":[1],"page":[1026],"numVisible":[2,"num-visible"],"numScroll":[2,"num-scroll"],"orientation":[1],"showNavigators":[8,"show-navigators"],"showIndicators":[8,"show-indicators"],"autoplayInterval":[2,"autoplay-interval"],"circular":[8],"parsedValue":[32],"internalPage":[32],"isAnimating":[32],"totalPages":[32]},null,{"value":[{"handleValue":0}],"page":[{"handlePage":0}]}]]],["p-3ebc9b7b",[[513,"dropi-color-picker",{"currentColor":[1025,"current-color"],"position":[1],"color":[32],"hue":[32],"saturation":[32],"currentVal":[32],"opacity":[32],"showEdit":[32]},null,{"value":[{"onValueChange":0}]}]]],["p-ec263862",[[513,"dropi-date-picker-range",{"startDate":[1025,"start-date"],"endDate":[1025,"end-date"],"showLabel":[4,"show-label"],"placeholder":[1],"loading":[4],"maxDaysRange":[2,"max-days-range"],"hideTodayRangeShortcut":[4,"hide-today-range-shortcut"],"start":[32],"end":[32],"activeRange":[32],"showWarning":[32]},null,{"startDate":[{"onStartPropChange":0}],"endDate":[{"onEndPropChange":0}]}]]],["p-85444414",[[513,"dropi-logo",{"urlLogo":[1,"url-logo"],"size":[1],"theme":[1]}]]],["p-1d3d6a32",[[513,"dropi-lottie-loader",{"visible":[4],"loadingAnimation":[1,"loading-animation"],"title":[1],"message":[1]}]]],["p-665ef7ba",[[513,"dropi-otp-send-code",{"engine":[1],"labelContact":[1,"label-contact"],"showLabelContact":[4,"show-label-contact"],"errorMessage":[1,"error-message"],"digits":[32],"digitStates":[32],"countdown":[32],"canResend":[32],"error":[32]}]]],["p-a3c4d677",[[577,"dropi-radio-button",{"label":[1],"name":[1],"id":[1],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["p-17c56074",[[513,"dropi-read-more",{"text":[1],"maxWords":[2,"max-words"],"showSeeLess":[4,"show-see-less"],"textStyle":[1,"text-style"],"buttonStyle":[1,"button-style"],"expanded":[32]}]]],["p-9032ba00",[[513,"dropi-simple-stepper",{"stepsCount":[2,"steps-count"],"typeStep":[1,"type-step"],"currentStep":[2,"current-step"],"labelStepper":[1,"label-stepper"],"flowMode":[1,"flow-mode"],"white_brand":[1]}]]],["p-5cee6721",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"radius":[1],"lines":[2],"baseColor":[1,"base-color"]}]]],["p-a8f24270",[[513,"dropi-tag-type-product",{"label":[1]}]]],["p-cbf5367e",[[769,"dropi-tooltip",{"text":[1],"outlined":[4]}]]],["p-7eb27836",[[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"]}]]],["p-a1c93e55",[[513,"dropi-ilustration-icon",{"type":[1],"state":[1],"stateInsignia":[1,"state-insignia"],"tagProduct":[4,"tag-product"]}]]],["p-9ffec3f7",[[513,"dropi-avatars",{"image":[1],"alt":[1],"type":[1],"initials":[1]}]]],["p-3013f3b8",[[769,"dropi-modal",{"visible":[1544],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"dismissableMask":[4,"dismissable-mask"],"dismissible":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"closable":[4],"blockScroll":[4,"block-scroll"],"showHeader":[4,"show-header"],"showFooter":[4,"show-footer"],"position":[1],"size":[1],"styleClass":[1,"style-class"],"maxWidth":[1,"max-width"],"autoZIndex":[4,"auto-z-index"],"baseZIndex":[2,"base-z-index"],"transitionOptions":[1,"transition-options"],"enableBeforeClose":[4,"enable-before-close"],"draggable":[4],"resizable":[4],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["p-b2623a5c",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["p-a4e1df5e",[[513,"dropi-country-flags",{"country":[1],"customStyle":[1,"custom-style"],"width":[1],"height":[1]}]]],["p-50e0d44f",[[577,"dropi-input",{"id":[1025],"name":[1],"label":[1025],"placeholder":[1025],"value":[1025],"maxLength":[1026,"max-length"],"disabled":[516],"required":[516],"showObligatoryAsterisk":[1028,"show-obligatory-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1025,"input-mode"],"passwordInput":[1028,"password-input"],"isMoneyInput":[1028,"is-money-input"],"isThousandSeparator":[1028,"is-thousand-separator"],"isNumericInput":[1028,"is-numeric-input"],"allowDecimals":[1028,"allow-decimals"],"isLettersOnly":[1028,"is-letters-only"],"icon":[1025],"iconColor":[1025,"icon-color"],"hasError":[1028,"has-error"],"textHelper":[1025,"text-helper"],"showHelperOnlyOnError":[1028,"show-helper-only-on-error"],"inputProperties":[8,"input-properties"],"showPassword":[32],"touched":[32]},null,{"inputProperties":[{"inputPropertiesChanged":0}],"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}],[513,"dropi-paginator",{"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"],"disabled":[4],"maxVisiblePages":[2,"max-visible-pages"],"isNotTotalPages":[4,"is-not-total-pages"],"noLabels":[4,"no-labels"]}],[513,"dropi-tag",{"type":[513],"state":[513],"showIcon":[4,"show-icon"],"icon":[513],"text":[513]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["p-34b66ca2",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"fullWidth":[516,"full-width"],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"customIconColor":[1,"custom-icon-color"],"text":[1]}]]],["p-9e0129cc",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]]]'),e))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r,c as a,h as o}from"./p-D5SAM1O2.js";const e=class{constructor(o){r(this,o),this.onClick=a(this,"onClick",7)}type="default";severity="primary";size="normal";state="default";fullWidth=!1;preIcon="";postIcon="";customIconColor="";text="";onClick;colorMap={default:"Primary-Primary-",success:"Success-Success-",error:"Error-Error-",info:"Info-Info-",legacy:"Secondary-Secondary-",warning:"Warning-Warning-",dropdown:"Gray-Gray-","default-light":"Gray-Gray-"};get iconSize(){return"large"===this.size?"24px":"small"===this.size?"16px":"18px"}get color(){return(this.colorMap[this.type]??"Primary-Primary-")+("disabled"===this.state?"300":"500")}get fontColor(){return"tertiary"===this.severity?"default"===this.type||"legacy"===this.type?"Gray-Gray-500":this.color:"secondary"===this.severity?this.color:"Neutral-White"}handleClick(r){"disabled"!==this.state&&"loading"!==this.state&&this.onClick.emit(r)}renderLoadingSpinner(){return o("svg",{class:"spin",width:this.iconSize,height:this.iconSize,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{d:"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z",fill:`var(--${this.fontColor})`}))}render(){const r="disabled"===this.state||"loading"===this.state,a=""!==this.text,e=""!==this.postIcon||"dropdown"===this.type,n="dropdown"===this.type?"Dropdown-down":this.postIcon;return o("button",{key:"878f01cf2b73d67ad393c46c47dbf71d4589573b",class:{btn:!0,"without-text":!a,[this.severity??"primary"]:!0,[this.type??"default"]:!0,[this.size??"normal"]:!0,[this.state??"default"]:!0,"full-width":this.fullWidth},disabled:r,onClick:r=>this.handleClick(r)},this.preIcon&&o("dropi-icon",{key:"d42a3e52d105b985c9cbc72241e363baaaad25a8",name:this.preIcon,width:this.iconSize,height:this.iconSize,color:this.fontColor}),a&&o("span",{key:"e88b6ef2c3cf63aec13f1fa4bfe289333acdd8b9",class:"text"},this.text),e&&o("dropi-icon",{key:"596a8227042757ffe942290a1e776b981bb89136",name:n,width:this.iconSize,height:this.iconSize,color:this.fontColor}),"loading"===this.state&&this.renderLoadingSpinner(),o("slot",{key:"e46a00e52792e690b3b4cb24e6af1b1843f7384f"}))}};e.style=":host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";export{e as dropi_button}
|
|
@@ -69,15 +69,15 @@ const DropiButton = class {
|
|
|
69
69
|
const hasText = this.text !== '';
|
|
70
70
|
const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
|
|
71
71
|
const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
|
|
72
|
-
return (h("button", { key: '
|
|
72
|
+
return (h("button", { key: '878f01cf2b73d67ad393c46c47dbf71d4589573b', class: {
|
|
73
73
|
btn: true,
|
|
74
74
|
'without-text': !hasText,
|
|
75
|
-
[this.severity]: true,
|
|
76
|
-
[this.type]: true,
|
|
77
|
-
[this.size]: true,
|
|
78
|
-
[this.state]: true,
|
|
75
|
+
[this.severity ?? 'primary']: true,
|
|
76
|
+
[this.type ?? 'default']: true,
|
|
77
|
+
[this.size ?? 'normal']: true,
|
|
78
|
+
[this.state ?? 'default']: true,
|
|
79
79
|
'full-width': this.fullWidth,
|
|
80
|
-
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '
|
|
80
|
+
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: 'd42a3e52d105b985c9cbc72241e363baaaad25a8', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'e88b6ef2c3cf63aec13f1fa4bfe289333acdd8b9', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '596a8227042757ffe942290a1e776b981bb89136', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'e46a00e52792e690b3b4cb24e6af1b1843f7384f' })));
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
DropiButton.style = dropiButtonCss();
|
package/hydrate/index.js
CHANGED
|
@@ -6075,15 +6075,15 @@ class DropiButton {
|
|
|
6075
6075
|
const hasText = this.text !== '';
|
|
6076
6076
|
const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
|
|
6077
6077
|
const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
|
|
6078
|
-
return (hAsync("button", { key: '
|
|
6078
|
+
return (hAsync("button", { key: '878f01cf2b73d67ad393c46c47dbf71d4589573b', class: {
|
|
6079
6079
|
btn: true,
|
|
6080
6080
|
'without-text': !hasText,
|
|
6081
|
-
[this.severity]: true,
|
|
6082
|
-
[this.type]: true,
|
|
6083
|
-
[this.size]: true,
|
|
6084
|
-
[this.state]: true,
|
|
6081
|
+
[this.severity ?? 'primary']: true,
|
|
6082
|
+
[this.type ?? 'default']: true,
|
|
6083
|
+
[this.size ?? 'normal']: true,
|
|
6084
|
+
[this.state ?? 'default']: true,
|
|
6085
6085
|
'full-width': this.fullWidth,
|
|
6086
|
-
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: '
|
|
6086
|
+
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: 'd42a3e52d105b985c9cbc72241e363baaaad25a8', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && hAsync("span", { key: 'e88b6ef2c3cf63aec13f1fa4bfe289333acdd8b9', class: "text" }, this.text), showPostIcon && (hAsync("dropi-icon", { key: '596a8227042757ffe942290a1e776b981bb89136', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), hAsync("slot", { key: 'e46a00e52792e690b3b4cb24e6af1b1843f7384f' })));
|
|
6087
6087
|
}
|
|
6088
6088
|
static get style() { return dropiButtonCss(); }
|
|
6089
6089
|
static get cmpMeta() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -6073,15 +6073,15 @@ class DropiButton {
|
|
|
6073
6073
|
const hasText = this.text !== '';
|
|
6074
6074
|
const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
|
|
6075
6075
|
const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
|
|
6076
|
-
return (hAsync("button", { key: '
|
|
6076
|
+
return (hAsync("button", { key: '878f01cf2b73d67ad393c46c47dbf71d4589573b', class: {
|
|
6077
6077
|
btn: true,
|
|
6078
6078
|
'without-text': !hasText,
|
|
6079
|
-
[this.severity]: true,
|
|
6080
|
-
[this.type]: true,
|
|
6081
|
-
[this.size]: true,
|
|
6082
|
-
[this.state]: true,
|
|
6079
|
+
[this.severity ?? 'primary']: true,
|
|
6080
|
+
[this.type ?? 'default']: true,
|
|
6081
|
+
[this.size ?? 'normal']: true,
|
|
6082
|
+
[this.state ?? 'default']: true,
|
|
6083
6083
|
'full-width': this.fullWidth,
|
|
6084
|
-
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: '
|
|
6084
|
+
}, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: 'd42a3e52d105b985c9cbc72241e363baaaad25a8', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && hAsync("span", { key: 'e88b6ef2c3cf63aec13f1fa4bfe289333acdd8b9', class: "text" }, this.text), showPostIcon && (hAsync("dropi-icon", { key: '596a8227042757ffe942290a1e776b981bb89136', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), hAsync("slot", { key: 'e46a00e52792e690b3b4cb24e6af1b1843f7384f' })));
|
|
6085
6085
|
}
|
|
6086
6086
|
static get style() { return dropiButtonCss(); }
|
|
6087
6087
|
static get cmpMeta() { return {
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -32,26 +32,28 @@ Si prefieres realizar la configuración paso a paso, consulta la [Guía de Integ
|
|
|
32
32
|
| Next.js SSR | `npm install @dropi/ui @dropi/ui-react && npm install --save-dev @stencil/ssr` |
|
|
33
33
|
|
|
34
34
|
### 2. Estilos e Iconos
|
|
35
|
-
- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css
|
|
36
|
-
- **
|
|
37
|
-
-
|
|
38
|
-
- **
|
|
35
|
+
- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css`.
|
|
36
|
+
- **CSS Resets**: Añade este reset para evitar saltos de layout en los iconos:
|
|
37
|
+
`dropi-icon:not(.hydrated) { width: 20px; height: 20px; display: inline-flex; }`
|
|
38
|
+
- **Registro**: No hace falta llamar `defineCustomElements()`.
|
|
39
|
+
- **SSR (Next.js)**: Configurar `next.config.ts` e importar siempre desde `/next`.
|
|
40
|
+
- **Iconos**: El sprite SVG debe estar en `public/assets/icons/symbol/svg/sprite.css.svg`.
|
|
39
41
|
|
|
40
42
|
---
|
|
41
43
|
|
|
42
|
-
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## 🚀 Soporte para Next.js (SSR / Zero Flash)
|
|
43
47
|
|
|
44
|
-
Para habilitar el **Server Side Rendering (SSR)** y
|
|
48
|
+
Para habilitar el **Server Side Rendering (SSR)** y eliminar cualquier parpadeo visual, sigue estos pasos:
|
|
45
49
|
|
|
46
50
|
### 1. Configuración de Next.js
|
|
47
|
-
Envuelve tu configuración
|
|
51
|
+
Envuelve tu configuración en el plugin `withStencil`:
|
|
48
52
|
|
|
49
53
|
```typescript
|
|
50
54
|
// next.config.ts
|
|
51
55
|
import withStencil from "@stencil/ssr/next";
|
|
52
56
|
|
|
53
|
-
const nextConfig = { ... };
|
|
54
|
-
|
|
55
57
|
export default withStencil({
|
|
56
58
|
from: "@dropi/ui-react",
|
|
57
59
|
module: import("@dropi/ui-react/next"),
|
|
@@ -59,17 +61,17 @@ export default withStencil({
|
|
|
59
61
|
})(nextConfig);
|
|
60
62
|
```
|
|
61
63
|
|
|
62
|
-
### 2.
|
|
63
|
-
|
|
64
|
+
### 2. Configuración del Layout (Crítico)
|
|
65
|
+
Añade `suppressHydrationWarning` al `<body>` en `layout.tsx` para evitar que el DevTools o extensiones rompan la hidratación.
|
|
64
66
|
|
|
65
67
|
```tsx
|
|
66
|
-
|
|
67
|
-
import { DropiButton } from "@dropi/ui-react/next";
|
|
68
|
-
|
|
69
|
-
// ❌ Incorrecto: Provoca parpadeo y requiere "use client"
|
|
70
|
-
import { DropiButton } from "@dropi/ui-react";
|
|
68
|
+
<body suppressHydrationWarning>{children}</body>
|
|
71
69
|
```
|
|
72
70
|
|
|
71
|
+
### 3. Uso de Alias para Props Dinámicas
|
|
72
|
+
En componentes con `"use client"` y props dinámicas, usa un alias en el import para evitar flashes:
|
|
73
|
+
`import { DropiButton as Btn } from "@dropi/ui-react/next"`
|
|
74
|
+
|
|
73
75
|
---
|
|
74
76
|
|
|
75
77
|
## Cómo pasar props
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{t as r,p as a,H as o,c as e,h as n}from"./index.js";import{d as t}from"./p-D13d88W3.js";const i=a(class extends o{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.onClick=e(this,"onClick",7)}type="default";severity="primary";size="normal";state="default";fullWidth=!1;preIcon="";postIcon="";customIconColor="";text="";onClick;colorMap={default:"Primary-Primary-",success:"Success-Success-",error:"Error-Error-",info:"Info-Info-",legacy:"Secondary-Secondary-",warning:"Warning-Warning-",dropdown:"Gray-Gray-","default-light":"Gray-Gray-"};get iconSize(){return"large"===this.size?"24px":"small"===this.size?"16px":"18px"}get color(){return(this.colorMap[this.type]??"Primary-Primary-")+("disabled"===this.state?"300":"500")}get fontColor(){return"tertiary"===this.severity?"default"===this.type||"legacy"===this.type?"Gray-Gray-500":this.color:"secondary"===this.severity?this.color:"Neutral-White"}handleClick(r){"disabled"!==this.state&&"loading"!==this.state&&this.onClick.emit(r)}renderLoadingSpinner(){return n("svg",{class:"spin",width:this.iconSize,height:this.iconSize,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z",fill:`var(--${this.fontColor})`}))}render(){const r="disabled"===this.state||"loading"===this.state,a=""!==this.text,o=""!==this.postIcon||"dropdown"===this.type,e="dropdown"===this.type?"Dropdown-down":this.postIcon;return n("button",{key:"d21aeb2274c317795bb0daad6d30c2bc9f3ede9f",class:{btn:!0,"without-text":!a,[this.severity]:!0,[this.type]:!0,[this.size]:!0,[this.state]:!0,"full-width":this.fullWidth},disabled:r,onClick:r=>this.handleClick(r)},this.preIcon&&n("dropi-icon",{key:"6711ece5a9c871db989e6bc4572c0d0ebfa7f899",name:this.preIcon,width:this.iconSize,height:this.iconSize,color:this.fontColor}),a&&n("span",{key:"9fc49de08b5672c6e2dae9b3cea9587d451fac0d",class:"text"},this.text),o&&n("dropi-icon",{key:"1ce254e23b16fb7013469fb3e2d71fe70dba5a9d",name:e,width:this.iconSize,height:this.iconSize,color:this.fontColor}),"loading"===this.state&&this.renderLoadingSpinner(),n("slot",{key:"72857295b27aa6ef6981276d68497f33958a584c"}))}static get style(){return":host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}"}},[769,"dropi-button",{type:[1],severity:[1],size:[1],state:[1],fullWidth:[516,"full-width"],preIcon:[1,"pre-icon"],postIcon:[1,"post-icon"],customIconColor:[1,"custom-icon-color"],text:[1]}]);function c(){"undefined"!=typeof customElements&&["dropi-button","dropi-icon"].forEach((a=>{switch(a){case"dropi-button":customElements.get(r(a))||customElements.define(r(a),i);break;case"dropi-icon":customElements.get(r(a))||t()}}))}c();export{i as D,c as d}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r,c as a,h as o}from"./p-D5SAM1O2.js";const e=class{constructor(o){r(this,o),this.onClick=a(this,"onClick",7)}type="default";severity="primary";size="normal";state="default";fullWidth=!1;preIcon="";postIcon="";customIconColor="";text="";onClick;colorMap={default:"Primary-Primary-",success:"Success-Success-",error:"Error-Error-",info:"Info-Info-",legacy:"Secondary-Secondary-",warning:"Warning-Warning-",dropdown:"Gray-Gray-","default-light":"Gray-Gray-"};get iconSize(){return"large"===this.size?"24px":"small"===this.size?"16px":"18px"}get color(){return(this.colorMap[this.type]??"Primary-Primary-")+("disabled"===this.state?"300":"500")}get fontColor(){return"tertiary"===this.severity?"default"===this.type||"legacy"===this.type?"Gray-Gray-500":this.color:"secondary"===this.severity?this.color:"Neutral-White"}handleClick(r){"disabled"!==this.state&&"loading"!==this.state&&this.onClick.emit(r)}renderLoadingSpinner(){return o("svg",{class:"spin",width:this.iconSize,height:this.iconSize,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{d:"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z",fill:`var(--${this.fontColor})`}))}render(){const r="disabled"===this.state||"loading"===this.state,a=""!==this.text,e=""!==this.postIcon||"dropdown"===this.type,n="dropdown"===this.type?"Dropdown-down":this.postIcon;return o("button",{key:"d21aeb2274c317795bb0daad6d30c2bc9f3ede9f",class:{btn:!0,"without-text":!a,[this.severity]:!0,[this.type]:!0,[this.size]:!0,[this.state]:!0,"full-width":this.fullWidth},disabled:r,onClick:r=>this.handleClick(r)},this.preIcon&&o("dropi-icon",{key:"6711ece5a9c871db989e6bc4572c0d0ebfa7f899",name:this.preIcon,width:this.iconSize,height:this.iconSize,color:this.fontColor}),a&&o("span",{key:"9fc49de08b5672c6e2dae9b3cea9587d451fac0d",class:"text"},this.text),e&&o("dropi-icon",{key:"1ce254e23b16fb7013469fb3e2d71fe70dba5a9d",name:n,width:this.iconSize,height:this.iconSize,color:this.fontColor}),"loading"===this.state&&this.renderLoadingSpinner(),o("slot",{key:"72857295b27aa6ef6981276d68497f33958a584c"}))}};e.style=":host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";export{e as dropi_button}
|