https://my.luanasavingsbank.com/en/js/bannoweb-settings-edit-profile-photo-CxBUy5UY.js

1import{a as e}from"./standalone-app-Bj-IdwrG.js";import{n as t,r as n}from"./polymer-C_GypsRJ.js";import{E as r,_ as i,p as a,x as o}from"./institution-DyFDvNu6.js";import"./user-BMje1Le7.js";import{t as s}from"./localstorage-CrjOLZ-F.js";import{At as c,i as l,o as u}from"./main-5Sl8yySz.js";import"./jha-card-DC-UH8vN.js";import"./jha-card-header-D2XWRnD9.js";import"./jha-button-Dyau4S4K.js";import{t as d}from"./observable-models-D0t-na9H.js";import{t as f}from"./language-utils-DMDnwVwz.js";import"./bannoweb-confirmation-DnbjNe7C.js";import"./jha-slider-pane-CG5LkspN.js";import"./bannoweb-user-avatar-DEbvKHs4.js";var p=u.store.user,{userProfileController:m}=u,h=c.EventType,g={PHOTO:`photo`,ERROR:`error`},_=d(f(t));window.BannowebSettingsProfilePhotoDialogElement=class extends _{static get is(){return`bannoweb-settings-profile-photo-dialog`}static get properties(){return{user:{type:Object,value:()=>p},imgSrc:Object}}constructor(){super(),e(()=>import(`./icon-circle-exclamation-CPV1Eg_u.js`).then(e=>e.t),[]),this.cropper}connectedCallback(){super.connectedCallback(),e(()=>import(`./cropper-DTgdac0e.js`).then(()=>this.createCanvas()),[])}createCanvas(){let e=this.shadowRoot.querySelector(`canvas`),t=e.getContext(`2d`);e.width=this.imgSrc.width,e.height=this.imgSrc.height,t.drawImage(this.imgSrc,0,0),this.cropper=new Cropper(e,{dragMode:`crop`,aspectRatio:1,movable:!1,viewMode:1,restore:!1,guides:!1,center:!1,zoomable:!1,cropBoxMovable:!0,cropBoxResizable:!0,toggleDragModeOnDblclick:!1})}cropPhoto(e){let t=a.from(m).subscribe(e=>{let r=e.type;switch(t.unsubscribe(),r){case h.UPDATE_SUCCESS:s.setValue(`profilePhoto`,n.toDataURL(`image/png`),this.user.id),window.dispatchEvent(new CustomEvent(`updateProfilePhoto`,{bubbles:!0,composed:!0,detail:{photo:n.toDataURL(`image/png`)}})),this.closeModal(e);break;case h.UPDATE_FAILED:this.focusPane_(g.ERROR);break;default:break}}),n=this.cropper.getCroppedCanvas({maxWidth:500,maxHeight:500});n.toBlob(e=>{m.updatePhoto(e)})}focusPane_(e){let t=this.shadowRoot.querySelector(`jha-slider-content`);t&&t.focusPane(e)}closeModal(e){this.dispatchEvent(new CustomEvent(`closeModal`,{bubbles:!0,composed:!0}))}static get template(){return n`<style>/*!
2      * JL: figuring out how to import css
3      * Cropper.js v1.4.0
4      * https://fengyuanchen.github.io/cropperjs
5      *
6      * Copyright 2015-present Chen Fengyuan
7      * Released under the MIT license
8      *
9      * Date: 2018-06-01T15:18:09.891Z
10      */
11.cropper-container{-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;direction:ltr;font-size:0;line-height:0;position:relative}.cropper-container img{image-orientation:0deg;width:100%;height:100%;display:block;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important}.cropper-wrap-box,.cropper-canvas,.cropper-drag-box,.cropper-crop-box,.cropper-modal{position:absolute;inset:0}.cropper-wrap-box,.cropper-canvas{overflow:hidden}.cropper-drag-box{opacity:0;background-color:#fff}.cropper-modal{opacity:.5;background-color:#000}.cropper-view-box{outline:1px solid #39f;width:100%;height:100%;display:block;overflow:hidden}.cropper-dashed{opacity:.5;border:0 dashed #eee;display:block;position:absolute}.cropper-dashed.dashed-h{border-top-width:1px;border-bottom-width:1px;width:100%;height:33.3333%;top:33.3333%;left:0}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;width:33.3333%;height:100%;top:0;left:33.3333%}.cropper-center{opacity:.75;width:0;height:0;display:block;position:absolute;top:50%;left:50%}.cropper-center:before,.cropper-center:after{content:" ";background-color:#eee;display:block;position:absolute}.cropper-center:before{width:7px;height:1px;top:0;left:-3px}.cropper-center:after{width:1px;height:7px;top:-3px;left:0}.cropper-face,.cropper-line,.cropper-point{opacity:.1;width:100%;height:100%;display:block;position:absolute}.cropper-face{background-color:#fff;top:0;left:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;width:5px;top:0;right:-3px}.cropper-line.line-n{cursor:ns-resize;height:5px;top:-3px;left:0}.cropper-line.line-w{cursor:ew-resize;width:5px;top:0;left:-3px}.cropper-line.line-s{cursor:ns-resize;height:5px;bottom:-3px;left:0}.cropper-point{opacity:.75;background-color:#39f;width:5px;height:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;top:50%;right:-3px}.cropper-point.point-n{cursor:ns-resize;margin-left:-3px;top:-3px;left:50%}.cropper-point.point-w{cursor:ew-resize;margin-top:-3px;top:50%;left:-3px}.cropper-point.point-s{cursor:s-resize;margin-left:-3px;bottom:-3px;left:50%}.cropper-point.point-ne{cursor:nesw-resize;top:-3px;right:-3px}.cropper-point.point-nw{cursor:nwse-resize;top:-3px;left:-3px}.cropper-point.point-sw{cursor:nesw-resize;bottom:-3px;left:-3px}.cropper-point.point-se{cursor:nwse-resize;opacity:1;width:20px;height:20px;bottom:-3px;right:-3px}@media (width>=768px){.cropper-point.point-se{width:15px;height:15px}}@media (width>=992px){.cropper-point.point-se{width:10px;height:10px}}@media (width>=1200px){.cropper-point.point-se{opacity:.75;width:5px;height:5px}}.cropper-point.point-se:before{content:" ";opacity:0;background-color:#39f;width:200%;height:200%;display:block;position:absolute;bottom:-50%;right:-50%}.cropper-invisible{opacity:0}

11.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{width:0;height:0;display:block;position:absolute}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}:host{--jha-border-color:none;display:block}jha-card{min-height:400px;margin:0}header{border-bottom:none!important}article{border-top:1px solid var(--list-item-border-color)}h1{@apply --card-header-title;}jha-well+article{border-top:none}section{justify-content:center;align-items:center;margin-top:20px;font-size:16px;display:flex}jha-button{margin:0 4px 42px}jh-icon-circle-exclamation{fill:var(--color-warning)}.sub-title{color:var(--color-neutral);font-size:14px}.cropper-crop-box,.cropper-view-box{border-radius:50%}.cropper-view-box{outline:0;box-shadow:0 0 0 1px #39f}.cropper-line,.cropper-point.point-ne,.cropper-point.point-nw,.cropper-point.point-sw,.cropper-point.point-se{display:none}@media (width<=768px){jha-card{max-width:100%!important}}.container{max-width:300px;max-height:300px;margin:20px 0}canvas{max-width:100%;height:300px}.cropper-view-box,.cropper-face{border-radius:50%}</style> <jha-card> <jha-slider> <jha-slider-content> <jha-slider-pane photo="" focus=""> <jha-card-header slot="header"> <h1>Crop your photo</h1> </jha-card-header> <article> <section> <div class="container"> <canvas></canvas> </div> <div id="result"></div> </section> <section> <jha-button outline="" on-click="closeModal" type="button"> Cancel </jha-button> <jha-button on-click="cropPhoto" type="button"> Save </jha-button> </section> </article> </jha-slider-pane> <jha-slider-pane error=""> <bannoweb-confirmation> <jh-icon-circle-exclamation slot="icon"></jh-icon-circle-exclamation> <h1 slot="header">Oops&#33;</h1> <p slot="description">Something went wrong. Please try again.</p> <jha-button on-click="closeModal" type="button"> Ok </jha-button> </bannoweb-confirmation> </jha-slider-pane> </jha-slider-content> </jha-slider> </jha-card>`}},customElements.define(window.BannowebSettingsProfilePhotoDialogElement.is,window.BannowebSettingsProfilePhotoDialogElement);var v=window.BannowebSettingsProfilePhotoDialogElement;window.BannowebSettingsEditProfilePhotoElement=class extends i{static get is(){return`bannoweb-settings-edit-profile-photo`}static get properties(){return{user:{type:Object,attribute:!1}}}constructor(){super(),this.user=u.store.user,e(()=>import(`./icon-pencil-BBviniUl.js`),[]),e(()=>import(`./polymer-file-uploader-Bk_voM-L.js`),[])}openModal(e){let t=new v;t.imgSrc=e,this.dispatchEvent(new l(t))}onClickFileOpener(e){e.stopPropagation()}_handleFileChange(e){if(e.preventDefault(),e.detail){let t=e.detail.queue;if(t.length>0&&t[t.length-1].file){let e=new FileReader;e.onload=e=>{let t=new Image;t.onload=()=>{this.openModal(t)},t.src=e.target.result},e.readAsDataURL(t[t.length-1].file)}}}static get styles(){return r`:host{border-bottom:0;margin-bottom:20px;display:inline-block;position:relative}bannoweb-user-avatar{display:block}.change-avatar{background:var(--secondary-content-background-color,#ececec);border:2px solid var(--primary-content-background-color,white);border-radius:50%;width:32px;height:32px;padding:2px 4px 4px;display:flex;position:absolute;bottom:-2px;left:68px}`}render(){return o`<bannoweb-user-avatar x-large .userId="${this.user.id}"></bannoweb-user-avatar> <polymer-file-uploader name="asset" type="select" accept="image/*" @click="${this.onClickFileOpener}" @change="${this._handleFileChange}"> <button aria-label="${`Change profile photo`}" class="change-avatar" type="button"> <jh-icon-pencil></jh-icon-pencil> </button> </polymer-file-uploader>`}},customElements.define(window.BannowebSettingsEditProfilePhotoElement.is,window.BannowebSettingsEditProfilePhotoElement);var y=window.BannowebSettingsEditProfilePhotoElement;export{y as default};