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