@aurigma/ui-framework/dist/imports/es8/dynamic.au-widget-slider.eitc8cq1ck.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){"use strict";e.r(i),e.d(i,"AuWidgetSlider",(function(){return m})),e.d(i,"widget",(function(){return m}));var n,s=e(0),a=e(857),o=e.n(a),r=e(160),h=e(2);e(821),function(t){t.vertical="vertical",t.horizontal="horizontal",t.tile="tile"}(n||(n={}));let m=class extends r.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?t.columns:1,this.rows=t.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.urlHD:t.url,(i<this.from||i>=this.from+this.quantityOnPage)&&(t.class="hidden"),t))),this.increment=t.listPage?this.quantityImages():t.increment?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.hideImages(this.quantityImages(),this.from),this.blockButtons()):(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.hideImages(this.quantityImages(),this.from),this.blockButtons()):(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 0>=this.from: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(t,i){Array.from(this.querySelectorAllShadow(".image")).forEach(((e,n)=>{n<i||n>=i+t?e.classList.add("hidden"):e.classList.remove("hidden")}))}computeGrid(){let t=new Array(this.rows).fill(0).map((t=>new Array(this.columns).fill("."))),i=[];t.forEach((t=>{i.push(t.join(" "))})),this.style.setProperty("--grid-template",`"${i.join('" "')}"`)}};Object(s.a)([Object(h.c)(),Object(s.b)("design:type",Array)],m.prototype,"images",void 0),m=Object(s.a)([Object(h.a)("au-widget-slider",o.a),Object(s.b)("design:paramtypes",[])],m)}}]);