@mmlogic/components 0.1.8 → 0.1.10

package/dist/collection/components/mrd-image-field/mrd-image-field.scss

@@ -136,8 +136,32 @@
   white-space: nowrap;
 }
 
-.mrd-image-field__overlay {
-  display: none;
+.mrd-image-field__preview-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgb(255 255 255 / 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--mrd-border-radius);
+}
+
+.mrd-image-field__spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--mrd-color-neutral-300);
+  border-top-color: var(--mrd-color-primary);
+  border-radius: 50%;
+  animation: mrd-image-spin 0.6s linear infinite;
+}
+
+@keyframes mrd-image-spin { to { transform: rotate(360deg); } }
+
+.mrd-image-field__upload-status {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-500);
 }
 
 .mrd-image-field__clear {

package/dist/components/mrd-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as l,createEvent as d,h as r,Host as i,transformTag as t}from"@stencil/core/internal/client";import{a as m,c as a,b as s}from"./client-layout.js";import{d as n}from"./mrd-boolean-field2.js";import{d as o}from"./mrd-currency-field2.js";import{d as u}from"./mrd-date-field2.js";import{d as c}from"./mrd-datetime-field2.js";import{d as f}from"./mrd-email-field2.js";import{d as v}from"./mrd-file-field2.js";import{d as h}from"./mrd-hyperlink-field2.js";import{d as b}from"./mrd-image-field2.js";import{d as p}from"./mrd-list-field2.js";import{d as j}from"./mrd-number-field2.js";import{d as k}from"./mrd-relation-field2.js";import{d as E}from"./mrd-text-field2.js";import{d as y}from"./mrd-textarea-field2.js";import{d as O}from"./mrd-time-field2.js";const x=e(class extends l{constructor(e){super(),!1!==e&&this.__registerHost(),this.mrdChange=d(this,"mrdChange",7),this.mrdBlur=d(this,"mrdBlur",7),this.mrdSearch=d(this,"mrdSearch",7),this.mrdFetchAll=d(this,"mrdFetchAll",7),this.locale=navigator.language,this.handleChange=e=>{e.stopPropagation(),this.mrdChange.emit(e.detail)},this.handleBlur=e=>{e.stopPropagation(),this.mrdBlur.emit(e.detail)},this.handleSearch=e=>{e.stopPropagation(),this.mrdSearch.emit(e.detail)},this.handleFetchAll=e=>{e.stopPropagation(),this.mrdFetchAll.emit(e.detail)}}render(){var e,l,d,t,n,o,u,c,f,v,h,b,p,j,k,E,y,O,x,g,M,C,S,B,w,q,z,A,F,R,T;const{item:I,locale:P,value:U}=this;if(I.type===m.RELATION&&I.relation){const m=I.relation;return r(i,null,r("mrd-relation-field",{name:m.name,label:m.label,required:m.required,disabled:null!==(e=m.disabled)&&void 0!==e&&e,locale:P,relatedClass:m.relatedClass,mostSignificantClass:null!==(l=m.mostSignificantClass)&&void 0!==l?l:"",displayType:null!==(d=m.displayType)&&void 0!==d?d:a.SEARCH,editBehavior:null!==(t=m.editBehavior)&&void 0!==t?t:null,commonRelation:m.commonRelation,multiple:null!==(n=m.multiple)&&void 0!==n&&n,dropdownValues:null!==(o=m.dropdownValues)&&void 0!==o?o:[],value:U,onMrdChange:this.handleChange,onMrdBlur:this.handleBlur,onMrdSearch:this.handleSearch,onMrdFetchAll:this.handleFetchAll}))}if(I.type!==m.FIELD||!I.field)return r(i,null);const V=I.field,D={name:V.name,label:V.label,required:V.required,disabled:null!==(u=V.disabled)&&void 0!==u&&u,locale:P,onMrdChange:this.handleChange,onMrdBlur:this.handleBlur};switch(V.dataType){case s.TEXT:return r(i,null,r("mrd-text-field",Object.assign({},D,{value:null!==(c=U)&&void 0!==c?c:"",placeholder:null!==(f=V.placeholder)&&void 0!==f?f:""})));case s.TEXTBLOCK:return r(i,null,r("mrd-textarea-field",Object.assign({},D,{value:null!==(v=U)&&void 0!==v?v:"",placeholder:null!==(h=V.placeholder)&&void 0!==h?h:""})));case s.INTEGER:case s.DECIMAL:case s.PERCENTAGE:return r(i,null,r("mrd-number-field",Object.assign({},D,{value:null!==(b=U)&&void 0!==b?b:null,dataType:V.dataType,decimalPrecision:null!==(p=V.decimalPrecision)&&void 0!==p?p:2,placeholder:null!==(j=V.placeholder)&&void 0!==j?j:""})));case s.CURRENCY:return r(i,null,r("mrd-currency-field",Object.assign({},D,{value:null!==(k=U)&&void 0!==k?k:{amount:null,currency:null!==(E=V.currencyCode)&&void 0!==E?E:"EUR"}})));case s.BOOLEAN:return r(i,null,r("mrd-boolean-field",Object.assign({},D,{value:null!==(y=U)&&void 0!==y&&y})));case s.DATE:return r(i,null,r("mrd-date-field",Object.assign({},D,{value:null!==(O=U)&&void 0!==O?O:""})));case s.DATETIME:return r(i,null,r("mrd-datetime-field",Object.assign({},D,{value:null!==(x=U)&&void 0!==x?x:""})));case s.TIME:return r(i,null,r("mrd-time-field",Object.assign({},D,{value:null!==(g=U)&&void 0!==g?g:""})));case s.EMAIL:return r(i,null,r("mrd-email-field",Object.assign({},D,{value:null!==(M=U)&&void 0!==M?M:"",placeholder:null!==(C=V.placeholder)&&void 0!==C?C:""})));case s.HYPERLINK:return r(i,null,r("mrd-hyperlink-field",Object.assign({},D,{value:null!==(S=U)&&void 0!==S?S:"",placeholder:null!==(B=V.placeholder)&&void 0!==B?B:""})));case s.LIST:return r(i,null,r("mrd-list-field",Object.assign({},D,{value:null!==(w=U)&&void 0!==w?w:"",multiple:null!==(q=V.multiple)&&void 0!==q&&q,listItems:null!==(z=V.listItems)&&void 0!==z?z:[]})));case s.FILE:return r(i,null,r("mrd-file-field",Object.assign({},D,{accept:null!==(A=V.accept)&&void 0!==A?A:"",maxSize:null!==(F=V.maxSize)&&void 0!==F?F:0})));case s.IMAGE:return r(i,null,r("mrd-image-field",Object.assign({},D,{accept:null!==(R=V.accept)&&void 0!==R?R:"image/*",maxSize:null!==(T=V.maxSize)&&void 0!==T?T:0})));default:return r(i,null)}}},[2,"mrd-field",{item:[16],locale:[1],value:[16]}]);function g(){"undefined"!=typeof customElements&&["mrd-field","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((e=>{switch(e){case"mrd-field":customElements.get(t(e))||customElements.define(t(e),x);break;case"mrd-boolean-field":customElements.get(t(e))||n();break;case"mrd-currency-field":customElements.get(t(e))||o();break;case"mrd-date-field":customElements.get(t(e))||u();break;case"mrd-datetime-field":customElements.get(t(e))||c();break;case"mrd-email-field":customElements.get(t(e))||f();break;case"mrd-file-field":customElements.get(t(e))||v();break;case"mrd-hyperlink-field":customElements.get(t(e))||h();break;case"mrd-image-field":customElements.get(t(e))||b();break;case"mrd-list-field":customElements.get(t(e))||p();break;case"mrd-number-field":customElements.get(t(e))||j();break;case"mrd-relation-field":customElements.get(t(e))||k();break;case"mrd-text-field":customElements.get(t(e))||E();break;case"mrd-textarea-field":customElements.get(t(e))||y();break;case"mrd-time-field":customElements.get(t(e))||O()}}))}export{x as M,g as d}
+import{proxyCustomElement as e,HTMLElement as l,createEvent as d,h as r,Host as i,transformTag as t}from"@stencil/core/internal/client";import{a as m,c as a,b as s}from"./client-layout.js";import{d as n}from"./mrd-boolean-field2.js";import{d as o}from"./mrd-currency-field2.js";import{d as u}from"./mrd-date-field2.js";import{d as c}from"./mrd-datetime-field2.js";import{d as f}from"./mrd-email-field2.js";import{d as h}from"./mrd-file-field2.js";import{d as v}from"./mrd-hyperlink-field2.js";import{d as b}from"./mrd-image-field2.js";import{d as p}from"./mrd-list-field2.js";import{d as j}from"./mrd-number-field2.js";import{d as k}from"./mrd-relation-field2.js";import{d as E}from"./mrd-text-field2.js";import{d as y}from"./mrd-textarea-field2.js";import{d as O}from"./mrd-time-field2.js";const x=e(class extends l{constructor(e){super(),!1!==e&&this.__registerHost(),this.mrdChange=d(this,"mrdChange",7),this.mrdBlur=d(this,"mrdBlur",7),this.mrdSearch=d(this,"mrdSearch",7),this.mrdFetchAll=d(this,"mrdFetchAll",7),this.mrdUpload=d(this,"mrdUpload",7),this.locale=navigator.language,this.handleChange=e=>{e.stopPropagation(),this.mrdChange.emit(e.detail)},this.handleBlur=e=>{e.stopPropagation(),this.mrdBlur.emit(e.detail)},this.handleSearch=e=>{e.stopPropagation(),this.mrdSearch.emit(e.detail)},this.handleFetchAll=e=>{e.stopPropagation(),this.mrdFetchAll.emit(e.detail)},this.handleUpload=e=>{e.stopPropagation(),this.mrdUpload.emit(e.detail)}}render(){var e,l,d,t,n,o,u,c,f,h,v,b,p,j,k,E,y,O,x,g,M,C,S,B,U,w,q,z,A,F,R;const{item:T,locale:I,value:P}=this;if(T.type===m.RELATION&&T.relation){const m=T.relation;return r(i,null,r("mrd-relation-field",{name:m.name,label:m.label,required:m.required,disabled:null!==(e=m.disabled)&&void 0!==e&&e,locale:I,relatedClass:m.relatedClass,mostSignificantClass:null!==(l=m.mostSignificantClass)&&void 0!==l?l:"",displayType:null!==(d=m.displayType)&&void 0!==d?d:a.SEARCH,editBehavior:null!==(t=m.editBehavior)&&void 0!==t?t:null,commonRelation:m.commonRelation,multiple:null!==(n=m.multiple)&&void 0!==n&&n,dropdownValues:null!==(o=m.dropdownValues)&&void 0!==o?o:[],value:P,onMrdChange:this.handleChange,onMrdBlur:this.handleBlur,onMrdSearch:this.handleSearch,onMrdFetchAll:this.handleFetchAll}))}if(T.type!==m.FIELD||!T.field)return r(i,null);const V=T.field,D={name:V.name,label:V.label,required:V.required,disabled:null!==(u=V.disabled)&&void 0!==u&&u,locale:I,onMrdChange:this.handleChange,onMrdBlur:this.handleBlur};switch(V.dataType){case s.TEXT:return r(i,null,r("mrd-text-field",Object.assign({},D,{value:null!==(c=P)&&void 0!==c?c:"",placeholder:null!==(f=V.placeholder)&&void 0!==f?f:""})));case s.TEXTBLOCK:return r(i,null,r("mrd-textarea-field",Object.assign({},D,{value:null!==(h=P)&&void 0!==h?h:"",placeholder:null!==(v=V.placeholder)&&void 0!==v?v:""})));case s.INTEGER:case s.DECIMAL:case s.PERCENTAGE:return r(i,null,r("mrd-number-field",Object.assign({},D,{value:null!==(b=P)&&void 0!==b?b:null,dataType:V.dataType,decimalPrecision:null!==(p=V.decimalPrecision)&&void 0!==p?p:2,placeholder:null!==(j=V.placeholder)&&void 0!==j?j:""})));case s.CURRENCY:return r(i,null,r("mrd-currency-field",Object.assign({},D,{value:null!==(k=P)&&void 0!==k?k:{amount:null,currency:null!==(E=V.currencyCode)&&void 0!==E?E:"EUR"}})));case s.BOOLEAN:return r(i,null,r("mrd-boolean-field",Object.assign({},D,{value:null!==(y=P)&&void 0!==y&&y})));case s.DATE:return r(i,null,r("mrd-date-field",Object.assign({},D,{value:null!==(O=P)&&void 0!==O?O:""})));case s.DATETIME:return r(i,null,r("mrd-datetime-field",Object.assign({},D,{value:null!==(x=P)&&void 0!==x?x:""})));case s.TIME:return r(i,null,r("mrd-time-field",Object.assign({},D,{value:null!==(g=P)&&void 0!==g?g:""})));case s.EMAIL:return r(i,null,r("mrd-email-field",Object.assign({},D,{value:null!==(M=P)&&void 0!==M?M:"",placeholder:null!==(C=V.placeholder)&&void 0!==C?C:""})));case s.HYPERLINK:return r(i,null,r("mrd-hyperlink-field",Object.assign({},D,{value:null!==(S=P)&&void 0!==S?S:"",placeholder:null!==(B=V.placeholder)&&void 0!==B?B:""})));case s.LIST:return r(i,null,r("mrd-list-field",Object.assign({},D,{value:null!==(U=P)&&void 0!==U?U:"",multiple:null!==(w=V.multiple)&&void 0!==w&&w,listItems:null!==(q=V.listItems)&&void 0!==q?q:[]})));case s.FILE:return r(i,null,r("mrd-file-field",Object.assign({},D,{value:P,accept:null!==(z=V.accept)&&void 0!==z?z:"",maxSize:null!==(A=V.maxSize)&&void 0!==A?A:0,onMrdUpload:this.handleUpload})));case s.IMAGE:return r(i,null,r("mrd-image-field",Object.assign({},D,{value:P,accept:null!==(F=V.accept)&&void 0!==F?F:"image/*",maxSize:null!==(R=V.maxSize)&&void 0!==R?R:0,onMrdUpload:this.handleUpload})));default:return r(i,null)}}},[2,"mrd-field",{item:[16],locale:[1],value:[16]}]);function g(){"undefined"!=typeof customElements&&["mrd-field","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((e=>{switch(e){case"mrd-field":customElements.get(t(e))||customElements.define(t(e),x);break;case"mrd-boolean-field":customElements.get(t(e))||n();break;case"mrd-currency-field":customElements.get(t(e))||o();break;case"mrd-date-field":customElements.get(t(e))||u();break;case"mrd-datetime-field":customElements.get(t(e))||c();break;case"mrd-email-field":customElements.get(t(e))||f();break;case"mrd-file-field":customElements.get(t(e))||h();break;case"mrd-hyperlink-field":customElements.get(t(e))||v();break;case"mrd-image-field":customElements.get(t(e))||b();break;case"mrd-list-field":customElements.get(t(e))||p();break;case"mrd-number-field":customElements.get(t(e))||j();break;case"mrd-relation-field":customElements.get(t(e))||k();break;case"mrd-text-field":customElements.get(t(e))||E();break;case"mrd-textarea-field":customElements.get(t(e))||y();break;case"mrd-time-field":customElements.get(t(e))||O()}}))}export{x as M,g as d}

package/dist/components/mrd-file-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as r,createEvent as i,h as l,Host as d,transformTag as o}from"@stencil/core/internal/client";import{t}from"./i18n.js";const a=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.name="",this.label="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.accept="",this.maxSize=0,this.fileName="",this.isDragging=!1,this.error="",this.handleInputChange=e=>{var r;const i=e.target.files;this.handleFile(null!==(r=null==i?void 0:i[0])&&void 0!==r?r:null)},this.handleDragOver=e=>{e.preventDefault(),this.isDragging=!0},this.handleDragLeave=()=>{this.isDragging=!1},this.handleDrop=e=>{var r,i,l;e.preventDefault(),this.isDragging=!1;const d=null!==(l=null===(i=null===(r=e.dataTransfer)||void 0===r?void 0:r.files)||void 0===i?void 0:i[0])&&void 0!==l?l:null;this.handleFile(d)},this.handleZoneClick=()=>{var e;this.disabled||null===(e=this.fileInputRef)||void 0===e||e.click()},this.handleClear=e=>{e.stopPropagation(),this.fileName="",this.error="",this.fileInputRef&&(this.fileInputRef.value=""),this.mrdChange.emit({name:this.name,value:null})}}handleFile(e){if(!e)return this.fileName="",void this.mrdChange.emit({name:this.name,value:null});this.maxSize>0&&e.size>this.maxSize?this.error=t("file_too_large",this.locale):(this.error="",this.fileName=e.name,this.mrdChange.emit({name:this.name,value:e}))}render(){const e=!!this.error;return l(d,{key:"6617c70edaf193c204a951ff8116d54742592f84"},l("div",{key:"69a45446da411c1cfdadd9ee7051e3ceea95a2d2",class:"mrd-file-field"},this.label&&l("label",{key:"ca415565514c5a3829b1e4a446493916bd1b5b17",class:"mrd-file-field__label"+(this.required?" mrd-file-field__label--required":"")},this.label),l("div",{key:"abee0fc6a53c9f1266e6ed2d0ec8ab85a20a81ca",class:`mrd-file-field__zone${this.isDragging?" mrd-file-field__zone--dragging":""}${e?" mrd-file-field__zone--error":""}${this.disabled?" mrd-file-field__zone--disabled":""}`,onClick:this.handleZoneClick,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop},l("input",{key:"c1dbca750d4115b7d8ea3dcd9ed3405ed11c93a2",ref:e=>this.fileInputRef=e,class:"mrd-file-field__input",type:"file",name:this.name,accept:this.accept,disabled:this.disabled,required:this.required&&!this.fileName,onChange:this.handleInputChange}),this.fileName?l("div",{class:"mrd-file-field__selected"},l("svg",{class:"mrd-file-field__icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},l("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"}),l("polyline",{points:"14 2 14 8 20 8"})),l("span",{class:"mrd-file-field__filename"},this.fileName),l("button",{class:"mrd-file-field__clear",type:"button",onClick:this.handleClear,"aria-label":t("clear",this.locale)},"✕")):l("div",{class:"mrd-file-field__prompt"},l("svg",{class:"mrd-file-field__upload-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},l("polyline",{points:"16 16 12 12 8 16"}),l("line",{x1:"12",y1:"12",x2:"12",y2:"21"}),l("path",{d:"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"})),l("span",null,t("drop_file_here",this.locale)," ",l("span",{class:"mrd-file-field__browse"},t("browse",this.locale))))),e&&l("span",{key:"91ef6a6240f139e161288cb812d17e13a619ec89",class:"mrd-file-field__error"},this.error)))}static get style(){return".sc-mrd-file-field-h{display:block}.mrd-file-field.sc-mrd-file-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-file-field__label.sc-mrd-file-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-file-field__label--required.sc-mrd-file-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-file-field__zone.sc-mrd-file-field{display:flex;align-items:center;justify-content:center;padding:var(--mrd-space-6);border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-file-field__zone.sc-mrd-file-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--dragging.sc-mrd-file-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--error.sc-mrd-file-field{border-color:var(--mrd-border-color-error)}.mrd-file-field__zone--disabled.sc-mrd-file-field{opacity:0.6;cursor:not-allowed}.mrd-file-field__zone--disabled.sc-mrd-file-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-file-field__input.sc-mrd-file-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;pointer-events:none}.mrd-file-field__prompt.sc-mrd-file-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-file-field__upload-icon.sc-mrd-file-field{width:32px;height:32px;color:var(--mrd-color-neutral-400)}.mrd-file-field__browse.sc-mrd-file-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-file-field__selected.sc-mrd-file-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700)}.mrd-file-field__icon.sc-mrd-file-field{width:20px;height:20px;color:var(--mrd-color-primary);flex-shrink:0}.mrd-file-field__filename.sc-mrd-file-field{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mrd-file-field__clear.sc-mrd-file-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);padding:var(--mrd-space-1);border-radius:var(--mrd-border-radius-sm);line-height:1}.mrd-file-field__clear.sc-mrd-file-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-file-field__error.sc-mrd-file-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-file-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],fileName:[32],isDragging:[32],error:[32]}]);function s(){"undefined"!=typeof customElements&&["mrd-file-field"].forEach((e=>{"mrd-file-field"===e&&(customElements.get(o(e))||customElements.define(o(e),a))}))}export{a as M,s as d}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as r,h as l,Host as d,transformTag as o}from"@stencil/core/internal/client";import{t}from"./i18n.js";const s=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.mrdChange=r(this,"mrdChange",7),this.mrdBlur=r(this,"mrdBlur",7),this.mrdUpload=r(this,"mrdUpload",7),this.name="",this.label="",this.value=null,this.required=!1,this.disabled=!1,this.locale=navigator.language,this.accept="",this.maxSize=0,this.fileName="",this.isDragging=!1,this.uploading=!1,this.error="",this.handleInputChange=e=>{var i;const r=e.target.files;this.handleFile(null!==(i=null==r?void 0:r[0])&&void 0!==i?i:null)},this.handleDragOver=e=>{e.preventDefault(),this.isDragging=!0},this.handleDragLeave=()=>{this.isDragging=!1},this.handleDrop=e=>{var i,r,l;e.preventDefault(),this.isDragging=!1;const d=null!==(l=null===(r=null===(i=e.dataTransfer)||void 0===i?void 0:i.files)||void 0===r?void 0:r[0])&&void 0!==l?l:null;this.handleFile(d)},this.handleZoneClick=()=>{var e;this.disabled||this.uploading||null===(e=this.fileInputRef)||void 0===e||e.click()},this.handleClear=e=>{e.stopPropagation(),this.fileName="",this.error="",this.uploading=!1,this.fileInputRef&&(this.fileInputRef.value=""),this.mrdChange.emit({name:this.name,value:null})}}valueChanged(e){"string"==typeof e&&e?this.uploading=!1:e||(this.uploading=!1,this.fileName="")}handleFile(e){if(!e)return this.fileName="",this.uploading=!1,void this.mrdChange.emit({name:this.name,value:null});this.maxSize>0&&e.size>this.maxSize?this.error=t("file_too_large",this.locale):(this.error="",this.fileName=e.name,this.uploading=!0,this.mrdChange.emit({name:this.name,value:e}),this.mrdUpload.emit({name:this.name,file:e}))}render(){const e=this.uploading||"string"==typeof this.value&&this.value||this.fileName,i=!!this.error,r=["mrd-file-field__zone",this.isDragging?"mrd-file-field__zone--dragging":"",i?"mrd-file-field__zone--error":"",this.disabled||this.uploading?"mrd-file-field__zone--disabled":""].filter(Boolean).join(" ");return l(d,{key:"2090102df8169226c1e66f87cbc837296e4b55d4"},l("div",{key:"7a37a09df1bfa2eaf28ed04c806ad5f7c0337bb0",class:"mrd-file-field"},this.label&&l("label",{key:"8f1fcb8adbb66b792be902c7c548e50db99b6a53",class:"mrd-file-field__label"+(this.required?" mrd-file-field__label--required":"")},this.label),l("div",{key:"66d992298f537b24d69ce3ead3dd229f6d124f3d",class:r,onClick:this.handleZoneClick,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop},l("input",{key:"95ba6560e71ee08c6b2526802727b29a18cdc454",ref:e=>this.fileInputRef=e,class:"mrd-file-field__input",type:"file",name:this.name,accept:this.accept,disabled:this.disabled||this.uploading,required:this.required&&!e,onChange:this.handleInputChange}),e?l("div",{class:"mrd-file-field__selected"},this.uploading?l("span",{class:"mrd-file-field__spinner","aria-label":t("loading",this.locale)}):l("svg",{class:"mrd-file-field__icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},l("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"}),l("polyline",{points:"14 2 14 8 20 8"})),l("span",{class:"mrd-file-field__filename"},this.fileName),!this.uploading&&l("button",{class:"mrd-file-field__clear",type:"button",onClick:this.handleClear,"aria-label":t("clear",this.locale)},"✕")):l("div",{class:"mrd-file-field__prompt"},l("svg",{class:"mrd-file-field__upload-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},l("polyline",{points:"16 16 12 12 8 16"}),l("line",{x1:"12",y1:"12",x2:"12",y2:"21"}),l("path",{d:"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"})),l("span",null,t("drop_file_here",this.locale)," ",l("span",{class:"mrd-file-field__browse"},t("browse",this.locale))))),i&&l("span",{key:"a6020e63bebb01e31a980a903f81badd486585aa",class:"mrd-file-field__error"},this.error)))}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return".sc-mrd-file-field-h{display:block}.mrd-file-field.sc-mrd-file-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-file-field__label.sc-mrd-file-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-file-field__label--required.sc-mrd-file-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-file-field__zone.sc-mrd-file-field{display:flex;align-items:center;justify-content:center;padding:var(--mrd-space-6);border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-file-field__zone.sc-mrd-file-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--dragging.sc-mrd-file-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--error.sc-mrd-file-field{border-color:var(--mrd-border-color-error)}.mrd-file-field__zone--disabled.sc-mrd-file-field{opacity:0.6;cursor:not-allowed}.mrd-file-field__zone--disabled.sc-mrd-file-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-file-field__input.sc-mrd-file-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;pointer-events:none}.mrd-file-field__prompt.sc-mrd-file-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-file-field__upload-icon.sc-mrd-file-field{width:32px;height:32px;color:var(--mrd-color-neutral-400)}.mrd-file-field__browse.sc-mrd-file-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-file-field__selected.sc-mrd-file-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700)}.mrd-file-field__icon.sc-mrd-file-field{width:20px;height:20px;color:var(--mrd-color-primary);flex-shrink:0}.mrd-file-field__filename.sc-mrd-file-field{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mrd-file-field__clear.sc-mrd-file-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);padding:var(--mrd-space-1);border-radius:var(--mrd-border-radius-sm);line-height:1}.mrd-file-field__clear.sc-mrd-file-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-file-field__spinner.sc-mrd-file-field{display:inline-block;flex-shrink:0;width:18px;height:18px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-file-spin 0.6s linear infinite}@keyframes mrd-file-spin{to{transform:rotate(360deg)}}.mrd-file-field__error.sc-mrd-file-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-file-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],fileName:[32],isDragging:[32],uploading:[32],error:[32]},void 0,{value:[{valueChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["mrd-file-field"].forEach((e=>{"mrd-file-field"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))}export{s as M,a as d}

package/dist/components/mrd-form.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as t,h as i,Host as o,transformTag as d}from"@stencil/core/internal/client";import{a as m,d as s}from"./client-layout.js";import{t as l}from"./i18n.js";import{v as a}from"./validation.js";import{d as n}from"./mrd-boolean-field2.js";import{d as f}from"./mrd-currency-field2.js";import{d as c}from"./mrd-date-field2.js";import{d as u}from"./mrd-datetime-field2.js";import{d as h}from"./mrd-email-field2.js";import{d as v}from"./mrd-field2.js";import{d as p}from"./mrd-file-field2.js";import{d as b}from"./mrd-hyperlink-field2.js";import{d as _}from"./mrd-image-field2.js";import{d as g}from"./mrd-list-field2.js";import{d as y}from"./mrd-number-field2.js";import{d as j}from"./mrd-relation-field2.js";import{d as x}from"./mrd-text-field2.js";import{d as k}from"./mrd-textarea-field2.js";import{d as E}from"./mrd-time-field2.js";const w=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdSubmit=t(this,"mrdSubmit",7),this.mrdSearch=t(this,"mrdSearch",7),this.mrdFetchAll=t(this,"mrdFetchAll",7),this.locale=navigator.language,this.values={},this.formValues={},this.errors={},this.submitted=!1,this.handleFieldChange=r=>{const{name:e,value:t}=r.detail;this.formValues=Object.assign(Object.assign({},this.formValues),{[e]:t}),this.errors[e]&&(this.errors=Object.assign(Object.assign({},this.errors),{[e]:""}));for(const r of this.collectDependentDropdowns()){if(r.commonRelation!==e)continue;this.formValues=Object.assign(Object.assign({},this.formValues),{[r.name]:null});const i=this.getHref(t);this.mrdFetchAll.emit({name:r.name,relatedClass:r.relatedClass,mostSignificantClass:r.mostSignificantClass,commonRelation:r.commonRelation,filter:r.commonRelation,filterValue:i})}},this.handleSearch=r=>{r.stopPropagation(),this.mrdSearch.emit(r.detail)},this.handleFetchAll=r=>{r.stopPropagation(),this.mrdFetchAll.emit(r.detail)},this.handleSubmit=r=>{r.preventDefault(),this.submitted=!0,this.validate()&&this.mrdSubmit.emit(this.buildSubmitPayload())}}componentWillLoad(){var r;this.formValues=Object.assign({},null!==(r=this.values)&&void 0!==r?r:{})}componentDidLoad(){setTimeout((()=>this.emitDependentFetchAll()),0)}valuesChanged(r){this.formValues=Object.assign({},null!=r?r:{}),this.errors={},this.submitted=!1,setTimeout((()=>this.emitDependentFetchAll()),0)}async setFieldValue(r,e){this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:e}),this.errors[r]&&(this.errors=Object.assign(Object.assign({},this.errors),{[r]:""}))}collectDependentDropdowns(){var r,e;return this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]).filter((r=>{var e;return r.type===m.RELATION&&(null===(e=r.relation)||void 0===e?void 0:e.editBehavior)===s.DROPDOWN&&!!r.relation.commonRelation})).map((r=>r.relation))}emitDependentFetchAll(){for(const r of this.collectDependentDropdowns()){const e=this.getHref(this.formValues[r.commonRelation]);e&&this.mrdFetchAll.emit({name:r.name,relatedClass:r.relatedClass,mostSignificantClass:r.mostSignificantClass,commonRelation:r.commonRelation,filter:r.commonRelation,filterValue:e})}}getHref(r){return r?"string"==typeof r?r:"object"==typeof r&&"id"in r?r.id:"":""}collectFields(r){const e=[];for(const t of r)t.type!==m.FIELD&&t.type!==m.RELATION||e.push(t),t.items&&e.push(...this.collectFields(t.items));return e}validate(){var r,e,t;const i={},o=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of o){const e=null!==(t=r.field)&&void 0!==t?t:r.relation;e&&e.required&&!a(this.formValues[e.name])&&(i[e.name]=l("required",this.locale))}return this.errors=i,0===Object.keys(i).length}buildSubmitPayload(){var r,e;const t={},i=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of i)if(r.type===m.FIELD&&r.field){const e=r.field.name,i=this.formValues[e];""!==i&&(t[e]=null!=i?i:null)}else if(r.type===m.RELATION&&r.relation){const e=r.relation.name,i=this.formValues[e];null!==i&&"object"==typeof i&&!Array.isArray(i)&&"id"in i?t[e]=i.id:""!==i&&void 0!==i&&(t[e]=null!=i?i:null)}return t}renderItems(r){return r.map((r=>{var e,t,o,d;if(r.type===m.SECTION)return i("fieldset",{class:"mrd-form__section"},r.label&&i("legend",{class:"mrd-form__section-legend"},r.label),i("div",{class:"mrd-form__section-body"},r.items&&this.renderItems(r.items)));if(r.type===m.GROUP)return i("div",{class:"mrd-form__group"},r.label&&i("div",{class:"mrd-form__group-label"},r.label),i("div",{class:"mrd-form__group-body"},r.items&&this.renderItems(r.items)));const s=null!==(d=null!==(t=null===(e=r.field)||void 0===e?void 0:e.name)&&void 0!==t?t:null===(o=r.relation)||void 0===o?void 0:o.name)&&void 0!==d?d:"";return i("div",{class:"mrd-form__field"},i("mrd-field",{item:r,locale:this.locale,value:this.formValues[s],onMrdChange:this.handleFieldChange,onMrdBlur:this.handleFieldChange,onMrdSearch:this.handleSearch,onMrdFetchAll:this.handleFetchAll}),this.errors[s]&&i("span",{class:"mrd-form__field-error"},this.errors[s]))}))}render(){if(!this.layout)return i(o,null);const r=this.locale.startsWith("ar")?"rtl":"ltr";return i(o,null,i("form",{class:"mrd-form",dir:r,onSubmit:this.handleSubmit,noValidate:!0},this.layout.title&&i("h2",{class:"mrd-form__title"},this.layout.title),i("div",{class:"mrd-form__body"},this.renderItems(this.layout.items)),i("div",{class:"mrd-form__footer"},i("button",{type:"submit",class:"mrd-form__submit"},l("submit",this.locale)))))}static get watchers(){return{values:[{valuesChanged:0}]}}static get style(){return".sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end}.mrd-form__submit.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:var(--mrd-color-primary);color:var(--mrd-color-white);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:none;border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition)}.mrd-form__submit.sc-mrd-form:hover{background-color:var(--mrd-color-primary-hover)}.mrd-form__submit.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__submit.sc-mrd-form:active{background-color:var(--mrd-color-primary-dark)}"}},[2,"mrd-form",{layout:[16],locale:[1],values:[16],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},void 0,{values:[{valuesChanged:0}]}]),O=w,z=function(){"undefined"!=typeof customElements&&["mrd-form","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((r=>{switch(r){case"mrd-form":customElements.get(d(r))||customElements.define(d(r),w);break;case"mrd-boolean-field":customElements.get(d(r))||n();break;case"mrd-currency-field":customElements.get(d(r))||f();break;case"mrd-date-field":customElements.get(d(r))||c();break;case"mrd-datetime-field":customElements.get(d(r))||u();break;case"mrd-email-field":customElements.get(d(r))||h();break;case"mrd-field":customElements.get(d(r))||v();break;case"mrd-file-field":customElements.get(d(r))||p();break;case"mrd-hyperlink-field":customElements.get(d(r))||b();break;case"mrd-image-field":customElements.get(d(r))||_();break;case"mrd-list-field":customElements.get(d(r))||g();break;case"mrd-number-field":customElements.get(d(r))||y();break;case"mrd-relation-field":customElements.get(d(r))||j();break;case"mrd-text-field":customElements.get(d(r))||x();break;case"mrd-textarea-field":customElements.get(d(r))||k();break;case"mrd-time-field":customElements.get(d(r))||E()}}))};export{O as MrdForm,z as defineCustomElement}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as t,h as o,Host as i,transformTag as s}from"@stencil/core/internal/client";import{a as d,d as m}from"./client-layout.js";import{t as l}from"./i18n.js";import{v as a}from"./validation.js";import{d as n}from"./mrd-boolean-field2.js";import{d as c}from"./mrd-currency-field2.js";import{d as f}from"./mrd-date-field2.js";import{d as u}from"./mrd-datetime-field2.js";import{d as h}from"./mrd-email-field2.js";import{d as v}from"./mrd-field2.js";import{d as p}from"./mrd-file-field2.js";import{d as b}from"./mrd-hyperlink-field2.js";import{d as g}from"./mrd-image-field2.js";import{d as _}from"./mrd-list-field2.js";import{d as y}from"./mrd-number-field2.js";import{d as j}from"./mrd-relation-field2.js";import{d as k}from"./mrd-text-field2.js";import{d as x}from"./mrd-textarea-field2.js";import{d as w}from"./mrd-time-field2.js";const E=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdSubmit=t(this,"mrdSubmit",7),this.mrdCancel=t(this,"mrdCancel",7),this.mrdSearch=t(this,"mrdSearch",7),this.mrdFetchAll=t(this,"mrdFetchAll",7),this.mrdUpload=t(this,"mrdUpload",7),this.locale=navigator.language,this.values={},this.referenceHref="",this.referenceClass="",this.showCancel=!1,this.formValues={},this.errors={},this.submitted=!1,this.handleFieldChange=r=>{const{name:e,value:t}=r.detail,o=this.getHref(this.formValues[e]);this.formValues=Object.assign(Object.assign({},this.formValues),{[e]:t}),this.errors[e]&&(this.errors=Object.assign(Object.assign({},this.errors),{[e]:""}));const i=this.getHref(t);if(i!==o)for(const r of this.collectDependentDropdowns())r.commonRelation===e&&(this.formValues=Object.assign(Object.assign({},this.formValues),{[r.name]:null}),this.mrdFetchAll.emit({name:r.name,relatedClass:r.relatedClass,mostSignificantClass:r.mostSignificantClass,commonRelation:r.commonRelation,filter:r.commonRelation,filterValue:i}))},this.handleSearch=r=>{r.stopPropagation(),this.mrdSearch.emit(r.detail)},this.handleFetchAll=r=>{r.stopPropagation(),this.mrdFetchAll.emit(r.detail)},this.handleUpload=r=>{r.stopPropagation(),this.mrdUpload.emit(r.detail)},this.handleSubmit=r=>{r.preventDefault(),this.submitted=!0,this.validate()&&this.mrdSubmit.emit(this.buildSubmitPayload())}}componentWillLoad(){var r;this.formValues=Object.assign({},null!==(r=this.values)&&void 0!==r?r:{})}componentDidLoad(){setTimeout((()=>{this.applyReferenceValue(),this.emitDependentFetchAll()}),0)}valuesChanged(r){this.formValues=Object.assign({},null!=r?r:{}),this.applyReferenceValue(),this.errors={},this.submitted=!1,setTimeout((()=>this.emitDependentFetchAll()),0)}applyReferenceValue(){if(!this.referenceHref||!this.referenceClass)return;const r=this.resolveReferenceFieldName();r&&(this.formValues[r]||(this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:this.referenceHref})))}resolveReferenceFieldName(){var r,e;const t=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]),o=t.find((r=>{var e;return r.type===d.RELATION&&(null===(e=r.relation)||void 0===e?void 0:e.mostSignificantClass)===this.referenceClass}));if(null==o?void 0:o.relation)return o.relation.name;const i=new Set(t.filter((r=>r.type===d.RELATION)).map((r=>r.relation.name)));for(const r of t){const e=r.relation;if(r.type===d.RELATION&&(null==e?void 0:e.editBehavior)===m.DROPDOWN&&e.commonRelation&&!i.has(e.commonRelation))return e.commonRelation}return null}async setFieldValue(r,e){this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:e}),this.errors[r]&&(this.errors=Object.assign(Object.assign({},this.errors),{[r]:""}))}collectDependentDropdowns(){var r,e;return this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]).filter((r=>{var e;return r.type===d.RELATION&&(null===(e=r.relation)||void 0===e?void 0:e.editBehavior)===m.DROPDOWN&&!!r.relation.commonRelation})).map((r=>r.relation))}emitDependentFetchAll(){for(const r of this.collectDependentDropdowns()){const e=this.getHref(this.formValues[r.commonRelation]);e&&this.mrdFetchAll.emit({name:r.name,relatedClass:r.relatedClass,mostSignificantClass:r.mostSignificantClass,commonRelation:r.commonRelation,filter:r.commonRelation,filterValue:e})}}getHref(r){return r?"string"==typeof r?r:"object"==typeof r&&"id"in r?r.id:"":""}collectFields(r){const e=[];for(const t of r)t.type!==d.FIELD&&t.type!==d.RELATION||e.push(t),t.items&&e.push(...this.collectFields(t.items));return e}validate(){var r,e,t;const o={},i=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of i){const e=null!==(t=r.field)&&void 0!==t?t:r.relation;e&&e.required&&!a(this.formValues[e.name])&&(o[e.name]=l("required",this.locale))}return this.errors=o,0===Object.keys(o).length}buildSubmitPayload(){var r,e;const t={},o=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of o)if(r.type===d.FIELD&&r.field){const e=r.field.name,o=this.formValues[e];if(o instanceof File)continue;""!==o&&(t[e]=null!=o?o:null)}else if(r.type===d.RELATION&&r.relation){const e=r.relation.name,o=this.formValues[e];null!==o&&"object"==typeof o&&!Array.isArray(o)&&"id"in o?t[e]=o.id:""!==o&&void 0!==o&&(t[e]=null!=o?o:null)}return t}renderItems(r){return r.map((r=>{var e,t,i,s;if(r.type===d.SECTION)return o("fieldset",{class:"mrd-form__section"},r.label&&o("legend",{class:"mrd-form__section-legend"},r.label),o("div",{class:"mrd-form__section-body"},r.items&&this.renderItems(r.items)));if(r.type===d.GROUP)return o("div",{class:"mrd-form__group"},r.label&&o("div",{class:"mrd-form__group-label"},r.label),o("div",{class:"mrd-form__group-body"},r.items&&this.renderItems(r.items)));const m=null!==(s=null!==(t=null===(e=r.field)||void 0===e?void 0:e.name)&&void 0!==t?t:null===(i=r.relation)||void 0===i?void 0:i.name)&&void 0!==s?s:"";return o("div",{class:"mrd-form__field"},o("mrd-field",{item:r,locale:this.locale,value:this.formValues[m],onMrdChange:this.handleFieldChange,onMrdBlur:this.handleFieldChange,onMrdSearch:this.handleSearch,onMrdFetchAll:this.handleFetchAll,onMrdUpload:this.handleUpload}),this.errors[m]&&o("span",{class:"mrd-form__field-error"},this.errors[m]))}))}render(){if(!this.layout)return o(i,null);const r=this.locale.startsWith("ar")?"rtl":"ltr";return o(i,null,o("form",{class:"mrd-form",dir:r,onSubmit:this.handleSubmit,noValidate:!0},this.layout.title&&o("h2",{class:"mrd-form__title"},this.layout.title),o("div",{class:"mrd-form__body"},this.renderItems(this.layout.items)),o("div",{class:"mrd-form__footer"},o("button",{type:"submit",class:"mrd-form__submit"},l("submit",this.locale)),this.showCancel&&o("button",{type:"button",class:"mrd-form__cancel",onClick:()=>this.mrdCancel.emit()},l("cancel",this.locale)))))}static get watchers(){return{values:[{valuesChanged:0}]}}static get style(){return".sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end;gap:var(--mrd-space-3)}.mrd-form__submit.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:var(--mrd-color-primary);color:var(--mrd-color-white);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:none;border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition)}.mrd-form__submit.sc-mrd-form:hover{background-color:var(--mrd-color-primary-hover)}.mrd-form__submit.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__submit.sc-mrd-form:active{background-color:var(--mrd-color-primary-dark)}.mrd-form__cancel.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:transparent;color:var(--mrd-color-neutral-600);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-form__cancel.sc-mrd-form:hover{background-color:var(--mrd-color-neutral-100);color:var(--mrd-color-neutral-800)}.mrd-form__cancel.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__cancel.sc-mrd-form:active{background-color:var(--mrd-color-neutral-200)}"}},[2,"mrd-form",{layout:[16],locale:[1],values:[16],referenceHref:[1,"reference-href"],referenceClass:[1,"reference-class"],showCancel:[4,"show-cancel"],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},void 0,{values:[{valuesChanged:0}]}]),O=E,z=function(){"undefined"!=typeof customElements&&["mrd-form","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((r=>{switch(r){case"mrd-form":customElements.get(s(r))||customElements.define(s(r),E);break;case"mrd-boolean-field":customElements.get(s(r))||n();break;case"mrd-currency-field":customElements.get(s(r))||c();break;case"mrd-date-field":customElements.get(s(r))||f();break;case"mrd-datetime-field":customElements.get(s(r))||u();break;case"mrd-email-field":customElements.get(s(r))||h();break;case"mrd-field":customElements.get(s(r))||v();break;case"mrd-file-field":customElements.get(s(r))||p();break;case"mrd-hyperlink-field":customElements.get(s(r))||b();break;case"mrd-image-field":customElements.get(s(r))||g();break;case"mrd-list-field":customElements.get(s(r))||_();break;case"mrd-number-field":customElements.get(s(r))||y();break;case"mrd-relation-field":customElements.get(s(r))||j();break;case"mrd-text-field":customElements.get(s(r))||k();break;case"mrd-textarea-field":customElements.get(s(r))||x();break;case"mrd-time-field":customElements.get(s(r))||w()}}))};export{O as MrdForm,z as defineCustomElement}

package/dist/components/mrd-image-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as i,h as d,Host as a,transformTag as o}from"@stencil/core/internal/client";import{t as l}from"./i18n.js";const m=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.name="",this.label="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.accept="image/*",this.maxSize=0,this.previewUrl="",this.fileName="",this.isDragging=!1,this.error="",this.handleInputChange=r=>{var e;const i=r.target.files;this.handleFile(null!==(e=null==i?void 0:i[0])&&void 0!==e?e:null)},this.handleDragOver=r=>{r.preventDefault(),this.isDragging=!0},this.handleDragLeave=()=>{this.isDragging=!1},this.handleDrop=r=>{var e,i,d;r.preventDefault(),this.isDragging=!1;const a=null!==(d=null===(i=null===(e=r.dataTransfer)||void 0===e?void 0:e.files)||void 0===i?void 0:i[0])&&void 0!==d?d:null;this.handleFile(a)},this.handleZoneClick=()=>{var r;this.disabled||null===(r=this.fileInputRef)||void 0===r||r.click()},this.handleClear=r=>{r.stopPropagation(),this.previewUrl="",this.fileName="",this.error="",this.fileInputRef&&(this.fileInputRef.value=""),this.mrdChange.emit({name:this.name,value:null})}}handleFile(r){if(!r)return this.previewUrl="",this.fileName="",void this.mrdChange.emit({name:this.name,value:null});if(this.maxSize>0&&r.size>this.maxSize)return void(this.error=l("file_too_large",this.locale));if(!r.type.startsWith("image/"))return void(this.error="Please select an image file");this.error="",this.fileName=r.name;const e=new FileReader;e.onload=r=>{var e;this.previewUrl=null===(e=r.target)||void 0===e?void 0:e.result},e.readAsDataURL(r),this.mrdChange.emit({name:this.name,value:r})}render(){const r=!!this.error;return d(a,{key:"c188d49744b7044d46b6c6f42126032f1ecc8a8f"},d("div",{key:"53990650a5109172addca5ae274b180569b08860",class:"mrd-image-field"},this.label&&d("label",{key:"3dc78faca422fcafed31833a11307cace9f2ff13",class:"mrd-image-field__label"+(this.required?" mrd-image-field__label--required":"")},this.label),d("div",{key:"4ca9eb1362c999721742ac3d727326078fe844c7",class:`mrd-image-field__zone${this.isDragging?" mrd-image-field__zone--dragging":""}${r?" mrd-image-field__zone--error":""}${this.disabled?" mrd-image-field__zone--disabled":""}`,onClick:this.handleZoneClick,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop},d("input",{key:"9e3a237ffb69ce9f6fb20e6b3e603e4db453e7e9",ref:r=>this.fileInputRef=r,class:"mrd-image-field__input",type:"file",name:this.name,accept:this.accept,disabled:this.disabled,required:this.required&&!this.previewUrl,onChange:this.handleInputChange}),this.previewUrl?d("div",{class:"mrd-image-field__preview-container"},d("div",{class:"mrd-image-field__preview-thumb"},d("img",{class:"mrd-image-field__preview",src:this.previewUrl,alt:this.fileName})),d("div",{class:"mrd-image-field__preview-info"},d("span",{class:"mrd-image-field__preview-name"},this.fileName)),d("button",{class:"mrd-image-field__clear",type:"button",onClick:this.handleClear,"aria-label":l("clear",this.locale)},l("remove",this.locale))):d("div",{class:"mrd-image-field__prompt"},d("svg",{class:"mrd-image-field__upload-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},d("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"}),d("circle",{cx:"8.5",cy:"8.5",r:"1.5"}),d("polyline",{points:"21 15 16 10 5 21"})),d("span",null,l("drop_file_here",this.locale)," ",d("span",{class:"mrd-image-field__browse"},l("browse",this.locale))))),r&&d("span",{key:"85cf998e1ab26cce7fbf87836df25672971a4eb1",class:"mrd-image-field__error"},this.error)))}static get style(){return".sc-mrd-image-field-h{display:block}.mrd-image-field.sc-mrd-image-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-image-field__label.sc-mrd-image-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-image-field__label--required.sc-mrd-image-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-image-field__zone.sc-mrd-image-field{display:flex;align-items:center;justify-content:center;border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-image-field__zone.sc-mrd-image-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--dragging.sc-mrd-image-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--error.sc-mrd-image-field{border-color:var(--mrd-border-color-error)}.mrd-image-field__zone--disabled.sc-mrd-image-field{opacity:0.6;cursor:not-allowed}.mrd-image-field__zone--disabled.sc-mrd-image-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-image-field__input.sc-mrd-image-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;pointer-events:none}.mrd-image-field__prompt.sc-mrd-image-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-6);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-image-field__upload-icon.sc-mrd-image-field{width:40px;height:40px;color:var(--mrd-color-neutral-400)}.mrd-image-field__browse.sc-mrd-image-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-image-field__preview-container.sc-mrd-image-field{display:flex;align-items:center;gap:var(--mrd-space-4);padding:var(--mrd-space-4);width:100%}.mrd-image-field__preview-thumb.sc-mrd-image-field{flex-shrink:0;width:80px;height:80px;border-radius:var(--mrd-border-radius);overflow:hidden;border:var(--mrd-border-width) solid var(--mrd-border-color);background-color:var(--mrd-color-neutral-100)}.mrd-image-field__preview.sc-mrd-image-field{width:100%;height:100%;object-fit:cover;display:block}.mrd-image-field__preview-info.sc-mrd-image-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-image-field__preview-name.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrd-image-field__overlay.sc-mrd-image-field{display:none}.mrd-image-field__clear.sc-mrd-image-field{flex-shrink:0;background-color:var(--mrd-color-white);color:var(--mrd-color-danger);border:var(--mrd-border-width) solid var(--mrd-color-danger);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-1) var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-image-field__clear.sc-mrd-image-field:hover{background-color:var(--mrd-color-danger);color:var(--mrd-color-white)}.mrd-image-field__error.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-image-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],previewUrl:[32],fileName:[32],isDragging:[32],error:[32]}]);function t(){"undefined"!=typeof customElements&&["mrd-image-field"].forEach((r=>{"mrd-image-field"===r&&(customElements.get(o(r))||customElements.define(o(r),m))}))}export{m as M,t as d}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as i,h as d,Host as a,transformTag as o}from"@stencil/core/internal/client";import{t as l}from"./i18n.js";const t=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.mrdUpload=i(this,"mrdUpload",7),this.name="",this.label="",this.value=null,this.required=!1,this.disabled=!1,this.locale=navigator.language,this.accept="image/*",this.maxSize=0,this.previewUrl="",this.fileName="",this.isDragging=!1,this.uploading=!1,this.error="",this.handleInputChange=r=>{var e;const i=r.target.files;this.handleFile(null!==(e=null==i?void 0:i[0])&&void 0!==e?e:null)},this.handleDragOver=r=>{r.preventDefault(),this.isDragging=!0},this.handleDragLeave=()=>{this.isDragging=!1},this.handleDrop=r=>{var e,i,d;r.preventDefault(),this.isDragging=!1;const a=null!==(d=null===(i=null===(e=r.dataTransfer)||void 0===e?void 0:e.files)||void 0===i?void 0:i[0])&&void 0!==d?d:null;this.handleFile(a)},this.handleZoneClick=()=>{var r;this.disabled||this.uploading||null===(r=this.fileInputRef)||void 0===r||r.click()},this.handleClear=r=>{r.stopPropagation(),this.previewUrl="",this.fileName="",this.error="",this.uploading=!1,this.fileInputRef&&(this.fileInputRef.value=""),this.mrdChange.emit({name:this.name,value:null})}}valueChanged(r){"string"==typeof r&&r?this.uploading=!1:r||(this.uploading=!1,this.previewUrl="",this.fileName="")}handleFile(r){if(!r)return this.previewUrl="",this.fileName="",this.uploading=!1,void this.mrdChange.emit({name:this.name,value:null});if(this.maxSize>0&&r.size>this.maxSize)return void(this.error=l("file_too_large",this.locale));if(!r.type.startsWith("image/"))return void(this.error="Please select an image file");this.error="",this.fileName=r.name,this.uploading=!0;const e=new FileReader;e.onload=r=>{var e;this.previewUrl=null===(e=r.target)||void 0===e?void 0:e.result},e.readAsDataURL(r),this.mrdChange.emit({name:this.name,value:r}),this.mrdUpload.emit({name:this.name,file:r})}render(){const r=!!this.error,e=["mrd-image-field__zone",this.isDragging?"mrd-image-field__zone--dragging":"",r?"mrd-image-field__zone--error":"",this.disabled||this.uploading?"mrd-image-field__zone--disabled":""].filter(Boolean).join(" ");return d(a,{key:"76b5a36a7f5a420ded3400c8a1481843363d1cbe"},d("div",{key:"3544df84aaf427a25518bafe13d60cf89ed28537",class:"mrd-image-field"},this.label&&d("label",{key:"dca64c1600cb98526eb4b91a908106087f099ad1",class:"mrd-image-field__label"+(this.required?" mrd-image-field__label--required":"")},this.label),d("div",{key:"ce07f32126f0956e47ff6fc41ff231590e0503d3",class:e,onClick:this.handleZoneClick,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop},d("input",{key:"660fbae5f730834c465522a11dd674fc8e50a54e",ref:r=>this.fileInputRef=r,class:"mrd-image-field__input",type:"file",name:this.name,accept:this.accept,disabled:this.disabled||this.uploading,required:this.required&&!this.previewUrl,onChange:this.handleInputChange}),this.previewUrl?d("div",{class:"mrd-image-field__preview-container"},d("div",{class:"mrd-image-field__preview-thumb"},d("img",{class:"mrd-image-field__preview",src:this.previewUrl,alt:this.fileName}),this.uploading&&d("div",{class:"mrd-image-field__preview-overlay"},d("span",{class:"mrd-image-field__spinner"}))),d("div",{class:"mrd-image-field__preview-info"},d("span",{class:"mrd-image-field__preview-name"},this.fileName),this.uploading&&d("span",{class:"mrd-image-field__upload-status"},l("loading",this.locale))),!this.uploading&&d("button",{class:"mrd-image-field__clear",type:"button",onClick:this.handleClear,"aria-label":l("clear",this.locale)},l("remove",this.locale))):d("div",{class:"mrd-image-field__prompt"},d("svg",{class:"mrd-image-field__upload-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},d("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"}),d("circle",{cx:"8.5",cy:"8.5",r:"1.5"}),d("polyline",{points:"21 15 16 10 5 21"})),d("span",null,l("drop_file_here",this.locale)," ",d("span",{class:"mrd-image-field__browse"},l("browse",this.locale))))),r&&d("span",{key:"9b8f9563fea63bd12c38f5c480e9cbd24106c3af",class:"mrd-image-field__error"},this.error)))}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return".sc-mrd-image-field-h{display:block}.mrd-image-field.sc-mrd-image-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-image-field__label.sc-mrd-image-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-image-field__label--required.sc-mrd-image-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-image-field__zone.sc-mrd-image-field{display:flex;align-items:center;justify-content:center;border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-image-field__zone.sc-mrd-image-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--dragging.sc-mrd-image-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--error.sc-mrd-image-field{border-color:var(--mrd-border-color-error)}.mrd-image-field__zone--disabled.sc-mrd-image-field{opacity:0.6;cursor:not-allowed}.mrd-image-field__zone--disabled.sc-mrd-image-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-image-field__input.sc-mrd-image-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;pointer-events:none}.mrd-image-field__prompt.sc-mrd-image-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-6);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-image-field__upload-icon.sc-mrd-image-field{width:40px;height:40px;color:var(--mrd-color-neutral-400)}.mrd-image-field__browse.sc-mrd-image-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-image-field__preview-container.sc-mrd-image-field{display:flex;align-items:center;gap:var(--mrd-space-4);padding:var(--mrd-space-4);width:100%}.mrd-image-field__preview-thumb.sc-mrd-image-field{flex-shrink:0;width:80px;height:80px;border-radius:var(--mrd-border-radius);overflow:hidden;border:var(--mrd-border-width) solid var(--mrd-border-color);background-color:var(--mrd-color-neutral-100)}.mrd-image-field__preview.sc-mrd-image-field{width:100%;height:100%;object-fit:cover;display:block}.mrd-image-field__preview-info.sc-mrd-image-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-image-field__preview-name.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrd-image-field__preview-overlay.sc-mrd-image-field{position:absolute;inset:0;background:rgb(255 255 255 / 0.7);display:flex;align-items:center;justify-content:center;border-radius:var(--mrd-border-radius)}.mrd-image-field__spinner.sc-mrd-image-field{display:inline-block;width:24px;height:24px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-image-spin 0.6s linear infinite}@keyframes mrd-image-spin{to{transform:rotate(360deg)}}.mrd-image-field__upload-status.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500)}.mrd-image-field__clear.sc-mrd-image-field{flex-shrink:0;background-color:var(--mrd-color-white);color:var(--mrd-color-danger);border:var(--mrd-border-width) solid var(--mrd-color-danger);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-1) var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-image-field__clear.sc-mrd-image-field:hover{background-color:var(--mrd-color-danger);color:var(--mrd-color-white)}.mrd-image-field__error.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-image-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],previewUrl:[32],fileName:[32],isDragging:[32],uploading:[32],error:[32]},void 0,{value:[{valueChanged:0}]}]);function s(){"undefined"!=typeof customElements&&["mrd-image-field"].forEach((r=>{"mrd-image-field"===r&&(customElements.get(o(r))||customElements.define(o(r),t))}))}export{t as M,s as d}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["mrd-table",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
+  return bootstrapLazy([["mrd-table",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"referenceHref":[1,"reference-href"],"referenceClass":[1,"reference-class"],"showCancel":[4,"show-cancel"],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/mosterdcomponents.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["mrd-table",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
+  return bootstrapLazy([["mrd-table",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"referenceHref":[1,"reference-href"],"referenceClass":[1,"reference-class"],"showCancel":[4,"show-cancel"],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
 });