import{a as k}from"./chunk-CHRXNCQY.js";import{a as U}from"./chunk-GEUQVPYE.js";import{a as B}from"./chunk-JXHH4R5G.js";import{C as G,a as F,g as L,n as $}from"./chunk-UVFMJH3U.js";import{Aa as y,Bb as M,Da as g,Db as u,Fc as w,La as x,Nb as E,Oc as R,Rc as z,X as b,Xh as H,Yb as I,Zb as N,Zc as D,_b as O,aa as P,ab as C,bb as f,ec as T,fa as p,ga as m,gb as l,gc as A,hb as d,ib as c,jb as v,tb as S,vh as V,xc as a}from"./chunk-HJJWL6RD.js";import{i as _}from"./chunk-H2BCKOF6.js";var X=t=>({"buttons-aside":t});function W(t,n){if(t&1&&v(0,"img",2),t&2){let r=u();l("ngStyle",r.previewSize())("src",r.imageSrc,y);}}function q(t,n){if(t&1&&v(0,"div",3),t&2){let r=u();l("ngStyle",r.previewSize());}}function K(t,n){if(t&1){let r=S();d(0,"my-delete-button",7),M("click",function(){p(r),u();let o=E(5);return m(o.reset());}),c();}}var le=(()=>{let n=class n{serverService=P(H);inputName=a.required();inputLabel=a();displayDelete=a(!1,{transform:w});buttonsAside=a(!1,{transform:w});previewSize=a();fileConstraints=a();imageSrc;maxSizeText;file;imageExtensions=[];maxImageSize;maxImageSizeInBytes;allowedExtensionsMessage="";serverConfig;bytesPipe;constructor(){this.bytesPipe=new U(),this.maxSizeText="maximale grootte";}getReactiveFileButtonTooltip(){return"(bestandstypes: "+this.imageExtensions.join(", ")+", maximale grootte: "+this.maxImageSizeInBytes+")";}ngOnInit(){this.serverConfig=this.serverService.getHTMLConfig();let e=this.fileConstraints()??this.serverConfig.video.image;this.imageExtensions=e.extensions,this.maxImageSize=e.size.max,this.maxImageSizeInBytes=this.bytesPipe.transform(this.maxImageSize),this.allowedExtensionsMessage=this.imageExtensions.join(", ");}onFileChanged(e){this.file=e,this.propagateChange(this.file),this.updatePreview();}propagateChange=e=>{};writeValue(e){this.file=e,this.updatePreview();}registerOnChange(e){this.propagateChange=e;}registerOnTouched(){}updatePreview(){this.file?V(this.file).then(e=>this.imageSrc=e):this.imageSrc=void 0;}};_(n,"\u0275fac",function(o){return new(o||n)();}),_(n,"\u0275cmp",x({type:n,selectors:[["my-image-input"]],inputs:{inputName:[1,"inputName"],inputLabel:[1,"inputLabel"],displayDelete:[1,"displayDelete"],buttonsAside:[1,"buttonsAside"],previewSize:[1,"previewSize"],fileConstraints:[1,"fileConstraints"]},features:[T([{provide:F,useExisting:b(()=>n),multi:!0}])],decls:7,vars:11,consts:()=>{let e;e="Voorbeeld";let o;return o="Afbeelding verwijderen",[["reactiveFile",""],[1,"preview-container",3,"ngClass"],["alt",e,1,"preview",3,"ngStyle","src"],[1,"preview","no-image",3,"ngStyle"],[1,"buttons"],["placement","right","icon","upload","theme","primary",3,"ngModelChange","fileChanged","ngModel","inputName","inputLabel","extensions","maxFileSize","buttonTooltip"],["title",o,"theme","danger"],["title",o,"theme","danger",3,"click"]];},template:function(o,i){if(o&1){let h=S();d(0,"div",1),C(1,W,1,2,"img",2)(2,q,1,1,"div",3),d(3,"div",4)(4,"my-reactive-file",5,0),O("ngModelChange",function(s){return p(h),N(i.file,s)||(i.file=s),m(s);}),M("fileChanged",function(s){return p(h),m(i.onFileChanged(s));}),c(),C(6,K,1,0,"my-delete-button",6),c()();}o&2&&(l("ngClass",A(9,X,i.buttonsAside())),g(),f(i.imageSrc?1:2),g(3),I("ngModel",i.file),l("inputName",i.inputName())("inputLabel",i.inputLabel())("extensions",i.imageExtensions)("maxFileSize",i.maxImageSize)("buttonTooltip",i.getReactiveFileButtonTooltip()),g(2),f(i.displayDelete()&&i.file?6:-1));},dependencies:[D,R,z,G,L,$,k,B],styles:[`[_nghost-%COMP%]{display:block}.preview-container[_ngcontent-%COMP%], .preview[_ngcontent-%COMP%]{height:100%;width:100%}.preview-container[_ngcontent-%COMP%]{position:relative}.preview-container[_ngcontent-%COMP%]   .buttons[_ngcontent-%COMP%]{display:flex;gap:10px}.preview-container[_ngcontent-%COMP%]   .preview[_ngcontent-%COMP%]{object-fit:cover;border-radius:4px;max-width:100%}.preview-container[_ngcontent-%COMP%]:not(.buttons-aside)   .buttons[_ngcontent-%COMP%]{position:absolute;bottom:10px;left:10px;flex-wrap:wrap}.preview-container[_ngcontent-%COMP%]:not(.buttons-aside)   .preview.no-image[_ngcontent-%COMP%]{border:2px solid var(--secondary-icon-color);background-color:var(--bg)}.preview-container.buttons-aside[_ngcontent-%COMP%]{text-align:center;border:1px solid var(--secondary-icon-color);border-radius:4px;width:min-content;padding-inline-start:calc(1.275rem + .3vw)}@media(min-width:1200px){.preview-container.buttons-aside[_ngcontent-%COMP%]{padding-inline-start:1.5rem}}.preview-container.buttons-aside[_ngcontent-%COMP%]{padding-inline-end:calc(1.275rem + .3vw)}@media(min-width:1200px){.preview-container.buttons-aside[_ngcontent-%COMP%]{padding-inline-end:1.5rem}}.preview-container.buttons-aside[_ngcontent-%COMP%]{padding-top:1rem;padding-bottom:1rem}.preview-container.buttons-aside[_ngcontent-%COMP%]   .buttons[_ngcontent-%COMP%]{margin-top:1rem}
/*# sourceMappingURL=image-input.component-TKGNYA4A.css.map */`]}));let t=n;return t;})();export{le as a};/**i18n:671d995daee9c68b73ac729b7ab2c3cf3be32c7f1a24d9dfa94e261c45ee5241*///# sourceMappingURL=chunk-WOMLTIDX.js.map