@aurigma/ui-framework/dist/imports/es8/dynamic.au-widget-uploader.khmyapxzyk.js

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[50],{851:function(e,t){e.exports='<style>\n    :host * {\n        transition: all 0.5s ease-in;\n    }\n\n    .uploader-container {\n        width: 100%;\n        height: 100%;\n        color: var(--theme-text-color-1);\n    }\n\n    #drop-area {\n        position: relative;\n        height: 100%;\n        background: var(--au-uploader-background-color);\n        border: 2px dashed var(--au-uploader-dashed-border-color);\n        box-sizing: border-box;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        transition: all 0.25s ease-out;\n    }\n\n    #drop-area.highlight {\n        background: var(--theme-secondary-color);\n    }\n\n    #error-bar {\n        position: absolute;\n        top: calc(2*var(--au-hem));\n        margin: 0 auto;\n        background: #FFD4D4;\n        ;\n        width: 90%;\n        padding: calc(1*var(--au-hem));\n        border-radius: 3px;\n    }\n\n    #error-bar .caption {\n        color: #E53935;\n    }\n\n    p {\n        margin-top: 0;\n    }\n\n    .dragText {\n        @apply --au-h5-font;\n        color: var(--au-uploader-text-color);\n    }\n\n    .caption {\n        @apply --au-caption-font;\n        color: var(--au-uploader-supported-text-color)\n    }\n\n    .my-form {\n        margin-bottom: calc(0.625 * var(--au-hem));\n        text-align: center;\n        --iron-icon-fill-color: currentcolor;\n        --iron-icon-stroke-color: none;\n        --iron-icon-width: calc(4.0625 * var(--au-hem));\n        --iron-icon-height: calc(4.0625 * var(--au-hem));\n    }\n\n    #gallery {\n        margin-top: calc(0.625 * var(--au-hem));\n    }\n\n    #gallery img {\n        width: calc(9.375 * var(--au-hem));\n        margin-bottom: calc(0.625 * var(--au-hem));\n        margin-right: calc(0.625 * var(--au-hem));\n        vertical-align: middle;\n    }\n\n    .button {\n        color: var(--primary-color);\n        cursor: pointer;\n    }\n\n    .button:hover {\n        text-decoration: underline;\n    }\n\n    #fileElem {\n        display: none;\n    }\n\n    .hidden {\n        visibility: hidden !important;\n        display: none !important;\n    }\n\n    .progress-bar {\n        text-align: center;\n    }\n\n    #progress-bar__percent {\n        @apply --au-h3-font;\n    }\n\n    .progress-bar__indicator {\n        height: calc(0.625 * var(--au-hem));\n        min-width: calc(15 * var(--au-hem));\n        background-color: var(--au-progress-bar-background-color);\n        position: relative;\n    }\n\n    #progress-bar__indicator {\n        height: 100%;\n        position: absolute;\n        top: 0;\n        left: 0;\n        background-color: var(--primary-color);\n        transition: all 0.25s ease-in;\n    }\n</style>\n<div class="uploader-container">\n    <div id="drop-area">\n        <form id="form" class="my-form">\n            <svg width="65px" height="65px" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">\n                <path\n                    d="M56.934 22.1002C57.2867 20.6913 57.4649 19.2415 57.4649 17.7733C57.4649 7.97315 49.4919 0 39.6915 0C33.5323 0 27.8589 3.17141 24.6194 8.34982C23.6475 8.00654 22.6153 7.82804 21.58 7.82804C16.9766 7.82804 13.1607 11.2645 12.5636 15.707C5.53504 16.3115 0 22.2256 0 29.4081C0 36.9909 6.16905 43.16 13.7518 43.16H19.1673L17.7791 44.9338C17.4798 45.3162 17.4249 45.8358 17.6375 46.2723C17.8502 46.7089 18.2932 46.9858 18.7788 46.9858H23.7662V63.7305C23.7662 64.4316 24.3345 65 25.0357 65H39.9643C40.6655 65 41.2338 64.4316 41.2338 63.7305V46.9858H46.2211C46.7067 46.9858 47.1496 46.7088 47.3624 46.2723C47.575 45.8358 47.5202 45.3162 47.2208 44.9338L45.8326 43.16H54.3081C60.2036 43.16 65 38.3636 65 32.4681C65.0001 27.497 61.6234 23.2752 56.934 22.1002ZM39.9644 44.4467C39.2633 44.4467 38.6949 45.0151 38.6949 45.7162V62.4609H26.3054V45.7162C26.3054 45.0151 25.737 44.4467 25.0358 44.4467H21.3845L32.5001 30.2436L43.6156 44.4467H39.9644ZM54.3082 40.621H43.8456L33.4998 27.4014C33.2591 27.0939 32.8904 26.9143 32.5001 26.9143C32.1097 26.9143 31.7409 27.0939 31.5003 27.4014L21.1545 40.621H13.7518C7.56909 40.621 2.53907 35.5909 2.53907 29.4081C2.53907 23.2254 7.56909 18.1953 13.7518 18.1953C14.453 18.1953 15.0214 17.6269 15.0214 16.9257C15.0214 13.3094 17.9635 10.3671 21.58 10.3671C22.6346 10.3671 23.6413 10.6096 24.572 11.0877C25.1869 11.4035 25.9418 11.1693 26.2698 10.5604C28.935 5.61271 34.0778 2.53906 39.6915 2.53906C48.0917 2.53906 54.9259 9.37306 54.9259 17.7733C54.9259 19.4568 54.653 21.1111 54.115 22.6902C53.9905 23.0554 54.039 23.4575 54.2467 23.7827C54.4544 24.1081 54.7987 24.3211 55.1824 24.362C59.332 24.8035 62.4612 28.2884 62.4612 32.4681C62.4611 36.9636 58.8037 40.621 54.3082 40.621Z"\n                    fill="var(--theme-primary-color)" />\n                <path\n                    d="M29.3722 10.7039C28.7568 10.3685 27.9832 10.5998 27.6476 11.2154L27.6113 11.2823C27.2784 11.8994 27.5089 12.6695 28.1261 13.0023C28.3178 13.1056 28.5241 13.1546 28.7276 13.1546C29.1793 13.1546 29.6166 12.9129 29.8462 12.4875L29.8771 12.4306L29.882 12.4217C30.2174 11.8061 29.988 11.0394 29.3722 10.7039Z"\n                    fill="var(--theme-primary-color)" />\n                <path\n                    d="M38.8495 4.08813C35.5655 4.28884 32.461 5.66602 30.1078 7.9659C29.6063 8.45594 29.5972 9.25968 30.0872 9.76114C30.336 10.0156 30.6655 10.1433 30.9952 10.1433C31.3152 10.1433 31.6355 10.023 31.8824 9.78158C33.7997 7.90789 36.3289 6.78588 39.0044 6.62236C39.7043 6.57958 40.2369 5.97757 40.1941 5.2778C40.1513 4.57804 39.5506 4.04509 38.8495 4.08813Z"\n                    fill="var(--theme-primary-color)" />\n            </svg>\n            <input type="file" id="fileElem" multiple="[[multiple]]" accept="{{fileTypes}}">\n            <p class="dragText">{{text}} <label class="button" for="fileElem">{{buttonText}}</label> </p>\n            <p class="caption"> {{supportedText}} {{fileTypes}}</p>\n            <div id="gallery"></div>\n        </form>\n        <div id="progress-bar" class="progress-bar hidden">\n            <span id="progress-bar__percent"></span>\n            <div class="progress-bar__indicator">\n                <span id="progress-bar__indicator"></span>\n            </div>\n            <span class="caption">{{localize(\'widgets.uploader.uploading\')}}</span>\n        </div>\n        <div id="error-bar" class="error-bar hidden">\n            <span class="caption">{{localize(\'widgets.uploader.error.types\')}}</span>\n        </div>\n    </div>\n</div>'},905:function(e,t,n){n.r(t),n.d(t,"AuWidgetUploader",function(){return c}),n.d(t,"widget",function(){return c});var t=n(0),r=n(851),o=n(160),s=n(2),i=n(17),a=n(1);let c=class extends o.c{constructor(){super(...arguments),this.response=null,this.httpCode=0,this.statusText="",this.responseType="json",this.errorResponse="",this.lockClose=!1,this.timeout=null}responseChanged(){this.emitChange({response:this.response})}get _(){return this.response}updateParams(e){this.text=e.text,this.supportedText=e.supportedText,this.buttonText=e.buttonText,this.multiple=e.multiple,this.fileTypes=e.fileTypes,this.destination=e.destination,this._onSuccess=a.a.functionWrapperConstructor(e.onSuccess),this._onError=a.a.functionWrapperConstructor(e.onError),this.dropArea=this.$["drop-area"],this.headers=e.headers||{},this.fileFormName=e.fileFormName||"file",this.form=e.form||{},this.responseType=e.responseType||"json"}connectedCallback(){super.connectedCallback(),this.events(this.$["drop-area"])}events(t){["dragenter","dragover","dragleave","dragend","dragexit","drop"].forEach(e=>{t.addEventListener(e,e=>{e.preventDefault(),e.stopPropagation()},!1)}),["dragenter","dragover"].forEach(e=>{t.addEventListener(e,e=>{t.classList.add("highlight")},!1)}),["dragend","dragexit","dragleave"].forEach(e=>{t.addEventListener(e,e=>{t.classList.remove("highlight"),this.eventShowWidgetClose(1e3)},!1)}),t.addEventListener("drop",e=>{t.classList.remove("highlight"),this.lockClose=!0,clearTimeout(this.timeout),this.handleFileList(e.dataTransfer.files)},!1),this.$.fileElem.addEventListener("change",e=>{this.handleFileList(e.srcElement.files)},!1)}cleanState(){this.$["drop-area"].classList.remove("highlight"),this.$["error-bar"].classList.contains("hidden")||this.$["error-bar"].classList.add("hidden"),clearTimeout(this.timeout),this.lockClose=!1}errorHandler(){this.$["error-bar"].classList.toggle("hidden")}handleFileList(t){var n=[];for(let e=0;e<t.length;e++)n.push(t[e]);var e=this.fileTypes.reduce((e,t)=>e+(t.replace(".","")+"|"),"^.*.(").replace(/.$/,")$");let r=new RegExp(e,"i");e=n.filter(e=>r.test(e.name));e.forEach((e,t)=>this.uploadFile(e,t)),0===e.length&&(this.lockClose=!1,this.errorHandler(),this.eventShowWidgetClose(3e3))}uploadFile(n,e){let t=this;var r=this.destination;let o=new XMLHttpRequest,s=new FormData;o.open("POST",r,!0),Object.keys(this.headers).forEach(e=>{o.setRequestHeader(e,this.headers[e])}),Object.keys(this.form).forEach(e=>{let t=this.form[e];"object"==typeof(t="<FILENAME>"===t?n.name:t)&&(t=JSON.stringify(t)),s.append(e,t)}),o.upload.addEventListener("progress",function(e){t.changeProgress(100*e.loaded/e.total||100)}),o.addEventListener("readystatechange",function(e){4===o.readyState&&(t.lockClose=!1,t.eventShowWidgetClose(1),t.changeProgress(0),t.toggleStatus(),t.httpCode=o.status,t.statusText=o.statusText,200<=o.status&&o.status<300?("json"===this.responseType?t.response=JSON.parse(this.response):t.response=this.response,t._onSuccess()):(t.errorResponse=this.response,t._onError()))}),s.append(this.fileFormName,n),o.send(s),this.toggleStatus()}toggleStatus(){this.$["progress-bar"].classList.toggle("hidden"),this.$.form.classList.toggle("hidden")}changeProgress(e){e=Math.floor(e),this.$["progress-bar__percent"].innerHTML=e+"%",this.$["progress-bar__indicator"].setAttribute("style","width:"+e+"%;")}eventShowWidgetClose(e){this.lockClose||(this.timeout=setTimeout(()=>{this.publishData({},i.a.CLOSE_DISPLAYED_WIDGET),this.cleanState()},e))}};Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Object)],c.prototype,"params",void 0),Object(t.a)([Object(s.c)({notify:!0}),Object(t.b)("design:type",String)],c.prototype,"text",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",String)],c.prototype,"supportedText",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",String)],c.prototype,"buttonText",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Boolean)],c.prototype,"multiple",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Array)],c.prototype,"fileTypes",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",String)],c.prototype,"destination",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Object)],c.prototype,"headers",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",String)],c.prototype,"fileFormName",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Object)],c.prototype,"form",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Function)],c.prototype,"_onSuccess",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Function)],c.prototype,"_onError",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Object)],c.prototype,"response",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Number)],c.prototype,"httpCode",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",String)],c.prototype,"statusText",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",String)],c.prototype,"responseType",void 0),Object(t.a)([Object(s.c)(),Object(t.b)("design:type",Object)],c.prototype,"errorResponse",void 0),Object(t.a)([Object(s.b)("response"),Object(t.b)("design:type",Function),Object(t.b)("design:paramtypes",[]),Object(t.b)("design:returntype",void 0)],c.prototype,"responseChanged",null),c=Object(t.a)([Object(s.a)("au-widget-uploader",r)],c)}}]);