(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[41],{518: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)}}},579:function(e,t,i){"use strict";var n=i(0),s=i(10),a=i(12),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)},633:function(e,t,i){"use strict";i.d(t,"a",function(){return a});var n=i(634),s=i(518);class a{constructor(e){var t,i,a,r,d;if(!e)return;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 l=null!==(t=e.productVariantOptions)&&void 0!==t?t:[];this.options=l.map(e=>new s.b(e));const c=null!==(i=e.productVariantResources)&&void 0!==i?i:[];this.resources=c.map(e=>new o(e));const p=c.find(e=>e.type===n.c.Preview),h=c.find(e=>e.type===n.c.EditorModel);this.previewUrl=null!==(a=p.url)&&void 0!==a?a:"",this.designResourceId=null!==(r=h.resourceId)&&void 0!==r?r:"",this.previewResourceId=null!==(d=p.resourceId)&&void 0!==d?d:""}}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)}}},905: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    }\n\n    .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    .item.iron-selected .item-image-container {\n        border: 2px solid var(--theme-primary-color);\n        padding: 2px;\n    }\n\n    .item:hover.iron-selected .item-image-container {\n        border: 2px solid var(--theme-primary-color);\n        padding: 2px;\n    }\n\n    .item:hover .item-image-container {\n        border: 1px solid var(--theme-disabled-button-border-color);\n    }\n\n    .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-image-container{\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    }\n\n    au-lit-pagination {\n        position: absolute;\n        left: 50%;\n        bottom: 0;\n        transform: translate(-50%, 0);\n        width: 200px;\n    }\n</style>\n\n<div class="gallery-wrapper">\n    <iron-selector name="gallery" id="gallery" class="gallery-image-container" selected="{{_selectedOnCurrentPage}}" attr-for-selected="value">\n        <dom-repeat items="{{displayedVariants}}">\n            <template>\n                <div tabindex="1" role="menuitemradio" class="item" title$="[[item.designName]]" onclick="{{_onClick}}" ondblclick="{{_onDoubleClick}}" functions="[[_itemFunctions]]" item="[[item]]" value="[[item.designResourceId]]">\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        <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    </iron-selector>\n</div>\n\n'},946:function(e,t,i){"use strict";i.r(t),i.d(t,"AuPIMDesignSelector",function(){return c}),i.d(t,"widget",function(){return c});var n=i(0),s=i(633),a=i(14),o=i(2),r=(i(579),i(1)),d=i(160),l=i(905);let c=class extends d.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 _(){return this.value}async connectedCallback(){super.connectedCallback(),this._designsLoadedSub=this.observe(a.a.PIM_DESIGNS_READY).subscribe(e=>this.emitChange())}async onWidgetDisplayAsync(){this.showPreloader(!0),setTimeout(()=>{this._updateStyling(),this.showPreloader(!1)},250)}ready(){super.ready(),this.container=this,this.ironSelectorElement=this.container.getElementById("gallery"),window.addEventListener("resize",this._onResize.bind(this))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._onResize),this._designsLoadedSub.unsubscribe()}_selectedChange(e){this.displayedVariants.length<1||this._isRestoring||e===this._selectedVariant||(e?(this._selectedVariant=e,this.value=this.displayedVariants.find(e=>e.designResourceId===this._selectedVariant),this.emitChange({value:this.value})):this._selectedOnCurrentPage=this._selectedVariant,setTimeout(()=>{this.ironSelectorElement._updateSelected()},0))}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}}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.goToPage(e.page),this._selectedVariant=e.selected)}clearSelection(){}valueChanged(){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="100%",s="auto";const a=this.title||this.prompt;e<320?(s="inherit",t=2):e<480?t=2:e<768?t=3:e<1280?t=4:e>1920&&(t=6,i="16px"),a&&(n="75vh"),this.updateStyles({"--scroll-state":s}),this.updateStyles({"--gallery-height":n}),this.updateStyles({"--columns-number":t})}goToPage(e=1,t=!1){var i,n,s,o;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=>{var t;return e.designResourceId===(null===(t=this.value)||void 0===t?void 0:t.designResourceId)});let t=null;const a=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===a?null:null===(i=this.displayedVariants[a])||void 0===i?void 0:i.designResourceId,this._selectedOnCurrentPage=!e&&t?t:this._selectedOnCurrentPage,this._selectedOnCurrentPage=null!==(n=this._selectedOnCurrentPage)&&void 0!==n?n:null===(s=this.displayedVariants[0])||void 0===s?void 0:s.designResourceId}""===this._selectedVariant&&(this._selectedOnCurrentPage=null===(o=this.displayedVariants[0])||void 0===o?void 0:o.designResourceId),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)],c.prototype,"imageIsLoading",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Number)],c.prototype,"currentPage",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Array)],c.prototype,"variants",void 0),Object(n.a)([Object(o.c)({notify:!0}),Object(n.b)("design:type",Array)],c.prototype,"displayedVariants",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Object)],c.prototype,"params",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Boolean)],c.prototype,"showPagination",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",Boolean)],c.prototype,"showItemsTitle",void 0),Object(n.a)([Object(o.c)({notify:!0}),Object(n.b)("design:type",s.a)],c.prototype,"value",void 0),Object(n.a)([Object(o.c)({notify:!0}),Object(n.b)("design:type",String)],c.prototype,"_selectedOnCurrentPage",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",s.a),Object(n.b)("design:paramtypes",[])],c.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)],c.prototype,"_selectedChange",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)],c.prototype,"valueChanged",null),c=Object(n.a)([Object(o.a)("au-widget-pim-design-selector",l)],c)}}]);