@aurigma/ui-framework/dist/imports/es8/dynamic.au-widget-slider.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([[46],{857:function(t,i){t.exports='<style>\n    .images {\n        box-sizing: border-box;\n        display: grid;\n        height: calc(var(--au-widget-height, 100%) - var(--au-widget-padding, 0px) * 2);\n        width: calc(100% - var(--au-widget-padding, 0px) * 2);\n        display: grid;\n        grid-template-areas: var(--grid-template);\n        grid-gap: var(--au-widget-images-gap, 20px);\n        position: relative;\n        background: var(--au-widget-background, none);\n        padding: var(--au-widget-padding, 16px);\n    }\n\n    .image {\n        height: 100%;\n        width: 100%;\n        border: var(--au-widget-image-border, none);\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n\n    .image__title {\n        margin-top: var(--au-widget-title-margin-top, 8px);\n        margin-bottom: var(--au-widget-title-margin-bottom, 0px);\n    }\n\n    .hidden {\n        display: none !important;\n    }\n\n    .image__button {\n        position: absolute;\n        width: calc(var(--au-hem)* 3);\n        height: calc(var(--au-hem)* 3);\n        top: calc(50% - var(--au-hem)* 1.5);\n        z-index: 1;\n        color: #83888F;\n        background: #FFFFFF;\n        border-radius: 50%;\n        border: 1px solid #83888F;\n        cursor: pointer;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        user-select: none;\n        outline: none;\n    }\n\n    .image__button:disabled {\n        opacity: 0.5;\n    }\n\n    .image____button--back {\n        left: calc(var(--au-hem)* 0.5);\n\n    }\n\n    .image____button--next {\n        right: calc(var(--au-hem)* 0.5);\n\n    }\n</style>\n\n<div class="images">\n    <template is="dom-repeat" items="{{images}}" index-as="index">\n        <div class$="image [[item.class]]" name="{{index}}" onclick="{{initLightbox(item.id)}}">\n            <au-responsive-image src$="{{item.url}}"></au-responsive-image>\n            <span class="image__title">{{item.title}}</span>\n        </div>\n    </template>\n    <button id=\'backImage\' disabled class="image__button image____button--back hidden" onclick="{{backImage}}"\n        animated="" elevation="0">\n        <iron-icon icon="au-icons:chevron_left"></iron-icon>\n    </button>\n    <button id=\'nextImage\' class="image__button image____button--next hidden" onclick="{{nextImage}}" animated=""\n        elevation="0">\n        <iron-icon icon="au-icons:chevron_right"></iron-icon>\n    </button>\n</div>\n\n<au-lightbox id=\'lightbox\' images="{{images}}" styles="{{styles}}"></au-lightbox>'},938:function(t,i,e){e.r(i),e.d(i,"AuWidgetSlider",function(){return r}),e.d(i,"widget",function(){return r});var n,i=e(0),a=e(857),a=e.n(a),s=e(160),o=e(2);e(821);(e=n=n||{}).vertical="vertical",e.horizontal="horizontal",e.tile="tile";let r=class extends s.c{constructor(){super(),this.from=0,this.lightBox=!1,this.styles={},this.nextImage=this.nextImage.bind(this),this.backImage=this.backImage.bind(this)}updateParams(t){switch(this.styles=t.style||{},t.direction){case n.horizontal:this.rows=1,this.columns=t.quantity;break;case n.vertical:this.columns=1,this.rows=t.quantity;break;case n.tile:this.columns=t.columns||1,this.rows=t.rows||1;break;default:this.rows=1,this.columns=1}this.lightBox=t.lightbox,this.quantityOnPage=this.quantityImages(),this.images=t.images.map((t,i)=>(t.id=i,t.urlHD=t.urlHD||t.url,(i<this.from||i>=this.from+this.quantityOnPage)&&(t.class="hidden"),t)),this.increment=t.listPage?this.quantityImages():t.increment||1,this.quantityOnPage>=this.images.length?(this.$.nextImage.classList.add("hidden"),this.$.backImage.classList.add("hidden")):(this.$.nextImage.classList.remove("hidden"),this.$.backImage.classList.remove("hidden")),this.computeGrid()}backImage(){this.increment>this.from?this.from=0:this.from=this.from-this.increment,this.hideImages(this.quantityImages(),this.from),this.blockButtons()}nextImage(){this.from+this.increment>=this.images.length-this.quantityOnPage?this.from=this.images.length-this.quantityOnPage:this.from=this.from+this.increment,this.hideImages(this.quantityImages(),this.from),this.blockButtons()}blockButtons(){switch(!0){case this.from-this.increment<this.from&&this.from+this.increment>=this.images.length:this.$.nextImage.disabled=!0,this.$.backImage.disabled=!0;case this.from+this.quantityOnPage>=this.images.length:this.$.nextImage.disabled=!0,this.$.backImage.disabled=!1;break;case this.from<=0:this.$.backImage.disabled=!0,this.$.nextImage.disabled=!1;break;default:this.$.nextImage.disabled=!1,this.$.backImage.disabled=!1}}initLightbox(t){let i=t=>{this.$.lightbox.currentImageId=t,this.$.lightbox.open=!0};if(this.lightBox)return()=>i.call(this,t)}quantityImages(){return this.rows*this.columns}hideImages(e,n){Array.from(this.querySelectorAllShadow(".image")).forEach((t,i)=>{i<n||n+e<=i?t.classList.add("hidden"):t.classList.remove("hidden")})}computeGrid(){var t=new Array(this.rows).fill(0).map(t=>new Array(this.columns).fill("."));let i=[];t.forEach(t=>{i.push(t.join(" "))}),this.style.setProperty("--grid-template",`"${i.join('" "')}"`)}};Object(i.a)([Object(o.c)(),Object(i.b)("design:type",Array)],r.prototype,"images",void 0),r=Object(i.a)([Object(o.a)("au-widget-slider",a.a),Object(i.b)("design:paramtypes",[])],r)}}]);