133.11b56a0e5f689bccccc2.js

"use strict";(self.webpackChunksparkworks_console=self.webpackChunksparkworks_console||[]).push([[133],{9133:function(m,s,t){t.r(s),t.d(s,{amplify_photo_picker:function(){return h}});var d=t(75134),p=t(47289),e=t(65513),o=t(53799),r=t(33754),h=function(){function a(l){var i=this;(0,d.Z)(this,a),(0,e.r)(this,l),this.headerTitle=r.T.PHOTO_PICKER_TITLE,this.headerHint=r.T.PHOTO_PICKER_HINT,this.placeholderHint=r.T.PHOTO_PICKER_PLACEHOLDER_HINT,this.buttonText=r.T.PHOTO_PICKER_BUTTON_TEXT,this.handleClick=function(){},this.handleInput=function(c){i.file=c.target.files[0];var n=new FileReader;n.onload=function(v){i.previewState=n.result},n.readAsDataURL(i.file)}}return(0,p.Z)(a,[{key:"componentWillLoad",value:function(){this.previewState=this.previewSrc}},{key:"render",value:function(){var i=this;return(0,e.h)("div",{class:"photo-picker-container"},(0,e.h)("amplify-section",null,(0,e.h)("div",{class:"header"},o.o.get(this.headerTitle)),(0,e.h)("div",{class:"header-hint"},o.o.get(this.headerHint)),(0,e.h)("amplify-picker",{acceptValue:"image/*",inputHandler:this.handleInput},(0,e.h)("div",{class:"picker-body",slot:"picker"},this.previewState?(0,e.h)("img",{src:"".concat(this.previewState)}):(0,e.h)("amplify-icon",{name:"photoPlaceholder"}))),(0,e.h)("div",{class:"placeholder-hint"},o.o.get(this.placeholderHint)),(0,e.h)("amplify-button",{handleButtonClick:function(){return i.handleClick(i.file)}},o.o.get(this.buttonText))))}}]),a}();h.style=":host{--object-fit:cover;--hint-color:var(--amplify-grey);--header-color:var(--amplify-secondary-color);--header-size:var(--amplify-text-lg);--header-hint-size:var(--amplify-text-md);--placeholder-hint-size:var(--amplify-text-sm);--placeholder-border-color:var(--amplify-grey)}.photo-picker-container{max-width:50rem}img{-o-object-fit:var(--object-fit);object-fit:var(--object-fit);width:100%;height:100%}input[type=file]{width:100%;height:100%;display:inline-block;position:absolute;left:0;top:0;opacity:0;cursor:pointer}.header{color:var(--header-color);font-size:var(--header-size);font-weight:bold;margin-bottom:24px}.header-hint{color:var(--hint-color);font-size:var(--header-hint-size);word-break:break-word;margin-bottom:24px}.picker-body{position:relative;width:25rem;height:16rem;border:2px dotted var(--placeholder-border-color);padding:10px;margin-bottom:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden}.placeholder-hint{color:var(--hint-color);font-family:Helvetica;font-style:italic;font-size:var(--placeholder-hint-size);word-break:break-word;margin-bottom:30px}"}}]);