@aurigma/ui-framework/dist/imports/es5/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,n){"use strict";n.r(i),n.d(i,"AuWidgetSlider",(function(){return h})),n.d(i,"widget",(function(){return h}));var e,a=n(0),s=n(857),o=n.n(s),r=n(160),c=n(2);n(821),function(t){t.vertical="vertical",t.horizontal="horizontal",t.tile="tile"}(e||(e={}));var h=function(t){function i(){var i=t.call(this)||this;return i.from=0,i.lightBox=!1,i.styles={},i.nextImage=i.nextImage.bind(i),i.backImage=i.backImage.bind(i),i}return Object(a.d)(i,t),i.prototype.updateParams=function(t){var i=this;switch(this.styles=t.style||{},t.direction){case e.horizontal:this.rows=1,this.columns=t.quantity;break;case e.vertical:this.columns=1,this.rows=t.quantity;break;case e.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((function(t,n){return t.id=n,t.urlHD=t.urlHD?t.urlHD:t.url,(n<i.from||n>=i.from+i.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()},i.prototype.backImage=function(){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())},i.prototype.nextImage=function(){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())},i.prototype.blockButtons=function(){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}},i.prototype.initLightbox=function(t){var i=this,n=function(t){i.$.lightbox.currentImageId=t,i.$.lightbox.open=!0};if(this.lightBox)return function(){return n.call(i,t)}},i.prototype.quantityImages=function(){return this.rows*this.columns},i.prototype.hideImages=function(t,i){Array.from(this.querySelectorAllShadow(".image")).forEach((function(n,e){e<i||e>=i+t?n.classList.add("hidden"):n.classList.remove("hidden")}))},i.prototype.computeGrid=function(){var t=this,i=new Array(this.rows).fill(0).map((function(i){return new Array(t.columns).fill(".")})),n=[];i.forEach((function(t){n.push(t.join(" "))})),this.style.setProperty("--grid-template",'"'.concat(n.join('" "'),'"'))},Object(a.c)([Object(c.c)(),Object(a.g)("design:type",Array)],i.prototype,"images",void 0),Object(a.c)([Object(c.a)("au-widget-slider",o.a),Object(a.g)("design:paramtypes",[])],i)}(r.c)}}]);