(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[41],{516:function(e,t,i){"use strict";i.d(t,"a",function(){return n}),i.d(t,"b",function(){return s});class n{constructor(e){e&&(this.id=e.id,this.productVersionId=e.productVersionId,this.productId=e.productId,this.tenantId=e.tenantId,this.storefrontProductVariantId=e.storefrontProductVariantId,this.options=e.productVariantOptions.map(e=>new s(e)))}}class s{constructor(e){e&&(this.productOptionId=e.productOptionId,this.productOptionValueId=e.productOptionValueId,this.productOptionType=e.productOptionType,this.productOptionTraits=e.productOptionTraits,this.productOptionTitle=e.productOptionTitle,this.productOptionValueTitle=e.productOptionValueTitle)}}},576:function(e,t,i){"use strict";var n=i(0),s=i(10),a=i(13),o=i(1);let r=class extends s.a{constructor(){super(...arguments),this.total=1,this.page=0,this.limit=50,this.size=2,this.pages=0,this.items=[]}willUpdate(){if(o.a.isNotNullOrUndefined(this.limit)&&o.a.isNotNullOrUndefined(this.total)&&(this.pages=parseInt(Math.ceil(parseFloat(this.total)/parseFloat(this.limit)),10)),o.a.isNotNullOrUndefined(this.page)&&o.a.isNotNullOrUndefined(this.limit)&&o.a.isNotNullOrUndefined(this.total)){let e=[],t=this._firstIndex(this.page,this.size),i=this._lastIndex(this.page,this.size);for(let n=t;n<=i;n++)e.push(n);this.items=e}}goToPage(e){this.dispatchEvent(new CustomEvent("changed",{detail:{page:e},bubbles:!0,composed:!0,cancelable:!0}))}onBefore(){this.page=this.page>0?this.page-1:1,this.goToPage(this.page)}onNext(){this.page=this.page<this.pages?parseInt(this.page,10)+1:this.pages,this.goToPage(this.page)}onBegin(){this.page=1,this.goToPage(this.page)}onEnd(){this.page=this.pages,this.goToPage(this.page)}isCurrent(e,t){return e===t}_isCurrent(e,t){return e===t}_firstIndex(e,t){let i=e-t;return i<1?1:i}_lastIndex(e,t){let i=e+t;return i>this.pages?this.pages:i}static get styles(){return s["b"]`
            :host {
                display: block;
                font-size: 14px;
            }

            div.paginator-page-container {
                display: flex;
                align-items: center;
                @apply --layout-horizontal;
                @apply --layout-center;
                @apply --layout-center-justified;
                @apply --layout-center-center;
            }

            svg {
                stroke: #666666;
                vertical-align: middle;
            }

            span {
                vertical-align: middle;
            }

            span,
            button {
                font-family: "Roboto";
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 36px;
                letter-spacing: 0em;
                text-align: center;
            }

            button {
                align-items: center;
                display: flex;
                background-color: white;
                border: none;
                height: 36px;
                line-height: 20px;
                padding: 8px 12px;
                margin: 0px;
            }

            button:hover {
                cursor: pointer;
            }

            button:disabled {
                color: #bbbbbb;
            }

            button:disabled svg {
                stroke: #bbbbbb;
            }

            .pages-title {
                display: inline-block;
                text-align: center;
                margin: 0px 8px;
                font-family: "Roboto";
                font-size: 14px;
                font-weight: 500;
            }
        `}render(){const e=this.page>1,t=this.page<this.pages;return s["c"]`
            <div class="paginator-page-container" ?hidden="${!(this.items.length<this.total)}">
                <button @click="${()=>this.onBefore()}" ?disabled="${!e}" class="prev-button">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.5 15L7.5 10L12.5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <span>Prev</span>
                </button>
                <div class="pages-title">${this.page} of ${this.pages}</div>
                <button @click=${()=>this.onNext()} ?disabled="${!t}" class="next-button">
                    <span>Next</span>
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.5 15L12.5 10L7.5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </button>
            </div>
        `}};Object(n.a)([Object(a.b)({reflect:!0}),Object(n.b)("design:type",Number)],r.prototype,"total",void 0),Object(n.a)([Object(a.b)({reflect:!0}),Object(n.b)("design:type",Number)],r.prototype,"page",void 0),Object(n.a)([Object(a.b)({reflect:!0}),Object(n.b)("design:type",Number)],r.prototype,"limit",void 0),Object(n.a)([Object(a.b)({reflect:!0}),Object(n.b)("design:type",Number)],r.prototype,"size",void 0),Object(n.a)([Object(a.d)(),Object(n.b)("design:type",Number)],r.prototype,"pages",void 0),Object(n.a)([Object(a.d)(),Object(n.b)("design:type",Object)],r.prototype,"items",void 0),r=Object(n.a)([Object(a.a)("au-lit-pagination")],r)},627:function(e,t,i){"use strict";i.d(t,"a",function(){return a});var n=i(566),s=i(516);class a{constructor(e){var t,i,a,r,l;if(!e)return;this.id=`${e.productVariantId}:${e.designId}`,this.productVariantId=e.productVariantId,this.productVersionId=e.productVersionId,this.productId=e.productId,this.sku=e.storefrontProductVariantId,this.designId=e.designId,this.designName=e.designName,this.designGroup=e.designGroup;const d=null!==(t=e.productVariantOptions)&&void 0!==t?t:[];this.options=d.map(e=>new s.b(e));const p=null!==(i=e.productVariantResources)&&void 0!==i?i:[];this.resources=p.map(e=>new o(e));const c=p.find(e=>e.type===n.d.Preview),h=p.find(e=>e.type===n.d.EditorModel);this.previewUrl=null!==(a=null===c||void 0===c?void 0:c.url)&&void 0!==a?a:"",this.designResourceId=null!==(r=null===h||void 0===h?void 0:h.resourceId)&&void 0!==r?r:"",this.previewResourceId=null!==(l=null===c||void 0===c?void 0:c.resourceId)&&void 0!==l?l:""}}class o{constructor(e){e&&(this.resourceId=e.resourceId,this.name=e.name,this.url=e.url,this.type=e.type,this.resourcePreview=e.resourcePreview)}}},895:function(e,t){e.exports='<style>\n    :host {\n        display: block;\n        width: 100%;\n        --min-items-width: 128px;\n        --max-items-width: 1fr;\n        --gap: 8px;\n        --gallery-height: 100%;\n        --scroll-state: auto;\n        color: #282828;\n    }\n\n    .gallery__item {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        aspect-ratio: 1 / 1;\n        min-width: var(--min-items-width);\n    }\n\n    .item__caption {\n        text-align: center;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 20px;\n        white-space: nowrap;\n    }\n\n    @keyframes shimmer {\n        from {\n            background-position-x: 80%;\n        }\n        to {\n            background-position-x: -100%;\n        }\n    }\n\n    .skeleton {\n        height: 100%;\n        width: 100%;\n        background: linear-gradient(to right, #f4f6f8 0%, #fcfdfe 20%, #f4f6f8 40%, #f4f6f8 100%);\n        background-size: 200% 100%;\n        background-repeat: repeat !important;\n        animation: shimmer 1.8s ease-in-out infinite;\n    }\n\n    .gallery__item.iron-selected .item__image__container {\n        border: 2px solid var(--theme-primary-color);\n        padding: 2px;\n    }\n\n    .gallery__item:hover.iron-selected .item__image__container {\n        border: 2px solid var(--theme-primary-color);\n        padding: 2px;\n    }\n\n    .gallery__item:hover .item__image__container {\n        border: 1px solid var(--theme-disabled-button-border-color);\n    }\n\n    .gallery__item:hover {\n        cursor: pointer;\n    }\n\n    .item__image__container {\n        box-sizing: border-box;\n        object-fit: contain;\n        width: 100%;\n        height: 100%;\n        border: 1px solid var(--theme-border-color);\n        border-radius: 2px;\n        padding: 3px;\n        min-width: var(--min-items-width);\n    }\n\n    .item__image{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n    }\n\n    .gallery{\n        display: grid;\n        width: 100%;\n        grid-template-columns: repeat(var(--columns-number), minmax(var(--min-items-width), var(--max-items-width)));\n        gap: var(--gap);\n        position: relative;\n        /* padding-bottom: 36px; */\n    }\n\n    .gallery__wrapper{\n        /* overflow: var(--scroll-state); */\n        /* leave some place to header .__. */\n        height: var(--gallery-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n\n    .gallery_empty__wrapper {\n        height: 100%;\n        width: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .gallery_empty {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        align-items: center;\n        justify-content: center;\n        padding: 40px;\n        color: var(--design-selector-emptystate-text-color);\n        font-style: normal;\n        text-align: center;\n    }\n\n    .gallery_empty__header {\n        font-weight: 500;\n        font-size: 16px;\n        line-height: 24px;\n    }\n\n    .gallery_empty__text {\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 20px;\n    }\n</style>\n\n<div class="gallery__wrapper">\n    <template is="dom-if" if="[[!displayedVariants.length]]">\n        <div class="gallery_empty__wrapper">\n            <div class="gallery_empty">\n                <span class="gallery_empty__header">{{localize("widgets.designselector.emptyValue.header")}}</span>\n                <span class="gallery_empty__text">{{localize("widgets.designselector.emptyValue.text")}}</span>\n            </div>\n        </div>\n    </template>\n    <template is="dom-if" if="[[displayedVariants.length]]">\n        <iron-selector name="gallery" id="gallery" class="gallery" selected="{{_selectedOnCurrentPage}}" attr-for-selected="value">\n            <dom-repeat items="{{displayedVariants}}">\n                <template>\n                    <div tabindex="1" role="menuitemradio" class="gallery__item" title$="[[item.designName]]" onclick="{{_onClick}}" ondblclick="{{_onDoubleClick}}" functions="[[_itemFunctions]]" item="[[item]]" value="[[item.id]]">\n                        <div class="item__image__container">\n                            <template is="dom-if" if="[[imageIsLoading]]">\n                                <div class="skeleton"></div>\n                            </template>\n                            <template is="dom-if" if="[[item.previewUrl]]">\n                                <img class="item__image" hidden="[[imageIsLoading]]" on-load="_onLoadImage" src="[[item.previewUrl]]">\n                            </template>\n                        </div>\n                        <template is="dom-if" if="[[showItemsTitle]]">\n                            <span class="item__title item__caption">[[item.designName]]</span>\n                        </template>\n                    </div>\n                </template>\n            </dom-repeat>\n        </iron-selector>\n        <template is="dom-if" if="[[showPagination]]">\n            <au-lit-pagination total="[[variants.length]]" page="[[currentPage]]" limit="[[_itemsPerPage]]" on-changed="_pageChangedHandler" ></au-lit-pagination>\n        </template>\n    </template>\n</div>\n\n'},937:function(e,t,i){"use strict";i.r(t),i.d(t,"AuPIMDesignSelector",function(){return p}),i.d(t,"widget",function(){return p});var n=i(0),s=i(627),a=i(14),o=i(2),r=(i(576),i(1)),l=i(160),d=i(895);let p=class extends l.b{constructor(){super(...arguments),this.imageIsLoading=!0,this.currentPage=1,this.pages=1,this.variants=[],this.displayedVariants=[],this.showPagination=!1,this.showItemsTitle=!0,this._isRestoring=!1,this._selectedOnCurrentPage="",this._selectedVariant="",this._itemsPerPage=24}get _(){var e;return null!==(e=this.value)&&void 0!==e?e:null}get sku(){var e,t;return null!==(t=null===(e=null===this||void 0===this?void 0:this.value)||void 0===e?void 0:e.sku)&&void 0!==t?t:null}async onWidgetDisplayAsync(){this.showPreloader(!0),setTimeout(()=>{this._updateStyling(),this.showPreloader(!1)},250)}ready(){super.ready(),this.container=this,window.addEventListener("resize",this._onResize.bind(this)),this.showPreloader(!0)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._onResize)}_selectedChange(e){this.displayedVariants.length<1||this._isRestoring||e===this._selectedVariant||(e?(this._selectedVariant=e,this.value=this.displayedVariants.find(e=>e.id===this._selectedVariant)):this._selectedOnCurrentPage=this._selectedVariant)}updateParams(e){var t,i;this.showItemsTitle=r.a.isNotNullOrUndefined(e.showItemsTitle)?e.showItemsTitle:this.showItemsTitle,e.onChange&&(this._onChange=r.a.functionWrapperConstructor(e.onChange)),e.itemsPerPage&&(this._itemsPerPage=e.itemsPerPage),e.onItemDoubleClick&&(this._onItemDoubleClick=r.a.functionWrapperConstructor(e.onItemDoubleClick)),e.onItemClick&&(this._onItemClick=r.a.functionWrapperConstructor(e.onItemClick)),this._itemFunctions={itemDoubleClickFunction:null!==(t=this._onItemDoubleClick)&&void 0!==t?t:null,itemClickFunction:null!==(i=this._onItemClick)&&void 0!==i?i:null},this.showPreloader(!1)}async updateParamsAsync(e){await super.updateParamsAsync(e),r.a.isNotNullOrUndefined(e.designs)&&(this.variants=e.designs,r.a.isNotNullOrUndefined(this._itemsPerPage)&&r.a.isNotNullOrUndefined(this.variants.length)&&(this.pages=parseInt(Math.ceil(parseFloat(this.variants.length)/parseFloat(this._itemsPerPage)),10),this.showPagination=this.pages>1),this.goToPage(this.currentPage>this.pages?1:this.currentPage,!0))}async exportWidgetData(e){return this.currentPage&&this._selectedVariant?{selected:this._selectedVariant,page:this.currentPage}:null}async restoreWidgetFromData(e,t){e&&(this._selectedOnCurrentPage=e.selected,this._selectedVariant=e.selected,this.goToPage(e.page))}clearSelection(){}displayedVariantsChanged(){this.emitChange({displayedVariants:this.displayedVariants})}valueChanged(){this.emitChange({value:this.value}),this._onChange&&!this._isRestoring&&this._onChange(this.value)}_onDoubleClick(){var e;const t=this,i=null===(e=t.functions)||void 0===e?void 0:e.itemDoubleClickFunction;i&&i(t.item)}_onClick(){var e;const t=this,i=null===(e=t.functions)||void 0===e?void 0:e.itemClickFunction;i&&i(t.item)}_onResize(){this._updateStyling()}_updateStyling(e=this.container.offsetWidth){let t=6,i="8px",n="auto";e<320?(n="inherit",t=2):e<480?t=2:e<768?t=3:e<1280?t=4:e>1920&&(t=6,i="16px"),this.updateStyles({"--scroll-state":n}),this.updateStyles({"--gallery-height":"100%"}),this.updateStyles({"--columns-number":t})}goToPage(e=1,t=!1){var i,n,s;if(this.currentPage=e,this.displayedVariants=this.variants.slice((e-1)*this._itemsPerPage,e*this._itemsPerPage),this.displayedVariants.length>0&&t){const e=this.displayedVariants.some(e=>(null===e||void 0===e?void 0:e.id)===this._selectedOnCurrentPage);let t=null;const s=this.displayedVariants.findIndex(e=>{var t;return(null===e||void 0===e?void 0:e.designGroup)===(null===(t=this.value)||void 0===t?void 0:t.designGroup)});(t=-1===s?null:null===(i=this.displayedVariants[s])||void 0===i?void 0:i.id)&&!e?this._selectedOnCurrentPage=t:t||e||(this._selectedOnCurrentPage=null===(n=this.displayedVariants[0])||void 0===n?void 0:n.id)}""===this._selectedVariant&&(this._selectedOnCurrentPage=null===(s=this.displayedVariants[0])||void 0===s?void 0:s.id),this.ironSelectorElement=this.container.getElementById("gallery"),this.ironSelectorElement&&setTimeout(()=>{this.ironSelectorElement._updateSelected()},0),this.publishData({page:this.currentPage},a.a.PAGE_CHANGED)}_pageChangedHandler(e){this.goToPage(e.detail.page)}_onLoadImage(){this.imageIsLoading=!1}};Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Boolean)],p.prototype,"imageIsLoading",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Number)],p.prototype,"currentPage",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Array)],p.prototype,"variants",void 0),Object(n.a)([Object(o.c)({notify:!0}),Object(n.b)("design:type",Array)],p.prototype,"displayedVariants",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Object)],p.prototype,"params",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Boolean)],p.prototype,"showPagination",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Boolean)],p.prototype,"showItemsTitle",void 0),Object(n.a)([Object(o.c)({notify:!0}),Object(n.b)("design:type",s.a)],p.prototype,"value",void 0),Object(n.a)([Object(o.c)({notify:!0}),Object(n.b)("design:type",String)],p.prototype,"_selectedOnCurrentPage",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",s.a),Object(n.b)("design:paramtypes",[])],p.prototype,"_",null),Object(n.a)([Object(o.b)("_selectedOnCurrentPage"),Object(n.b)("design:type",Function),Object(n.b)("design:paramtypes",[String]),Object(n.b)("design:returntype",void 0)],p.prototype,"_selectedChange",null),Object(n.a)([Object(o.b)("displayedVariants"),Object(n.b)("design:type",Function),Object(n.b)("design:paramtypes",[]),Object(n.b)("design:returntype",void 0)],p.prototype,"displayedVariantsChanged",null),Object(n.a)([Object(o.b)("value"),Object(n.b)("design:type",Function),Object(n.b)("design:paramtypes",[]),Object(n.b)("design:returntype",void 0)],p.prototype,"valueChanged",null),p=Object(n.a)([Object(o.a)("au-widget-pim-design-selector",d)],p)}}]);