@aurigma/ui-framework/dist/imports/es8/dynamic.au-widget-pim-design-selector.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([[41],{488: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))),this.price=e.price)}}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)}}},544:function(e,t,i){"use strict";var n=i(0),s=i(12),a=i(15),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,i=this.items.length<this.total;return s.c`
            <div class="paginator-page-container" ?hidden="${!i}">
                <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)},595:function(e,t,i){"use strict";i.d(t,"a",(function(){return a}));var n=i(535),s=i(488);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.url)&&void 0!==a?a:"",this.designResourceId=null!==(r=null==h?void 0:h.resourceId)&&void 0!==r?r:"",this.previewResourceId=null!==(l=null==c?void 0:c.resourceId)&&void 0!==l?l:"",this.price=e.price}}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)}}},873: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'},915: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(595),a=i(17),o=i(2),r=(i(544),i(1)),l=i(160),d=i(873);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 _(){return this.value}get sku(){var e;return null===(e=null==this?void 0:this.value)||void 0===e?void 0:e.sku}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.value,page:this.currentPage}:null}async restoreWidgetFromData(e,t){var i,n;e&&(this._selectedOnCurrentPage=null===(i=e.selected)||void 0===i?void 0:i.id,this._selectedVariant=null===(n=e.selected)||void 0===n?void 0:n.id,this.value=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=null===(e=this.functions)||void 0===e?void 0:e.itemDoubleClickFunction;t&&t(this.item)}_onClick(){var e;const t=null===(e=this.functions)||void 0===e?void 0:e.itemClickFunction;t&&t(this.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),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.id)===this._selectedOnCurrentPage));let t=null;const s=this.displayedVariants.findIndex((e=>{var t;return(null==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,t&&!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)}}]);