@aurigma/ui-framework/dist/imports/es5/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(t,e,n){"use strict";n.d(e,"a",(function(){return i})),n.d(e,"b",(function(){return o}));var i=function(t){t&&(this.id=t.id,this.productVersionId=t.productVersionId,this.productId=t.productId,this.tenantId=t.tenantId,this.storefrontProductVariantId=t.storefrontProductVariantId,this.options=t.productVariantOptions.map((function(t){return new o(t)})),this.price=t.price)},o=function(t){t&&(this.productOptionId=t.productOptionId,this.productOptionValueId=t.productOptionValueId,this.productOptionType=t.productOptionType,this.productOptionTraits=t.productOptionTraits,this.productOptionTitle=t.productOptionTitle,this.productOptionValueTitle=t.productOptionValueTitle)}},544:function(t,e,n){"use strict";var i,o,a=n(0),s=n(12),r=n(15),l=n(1);!function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.total=1,e.page=0,e.limit=50,e.size=2,e.pages=0,e.items=[],e}Object(a.d)(e,t),e.prototype.willUpdate=function(){if(l.a.isNotNullOrUndefined(this.limit)&&l.a.isNotNullOrUndefined(this.total)&&(this.pages=parseInt(Math.ceil(parseFloat(this.total)/parseFloat(this.limit)),10)),l.a.isNotNullOrUndefined(this.page)&&l.a.isNotNullOrUndefined(this.limit)&&l.a.isNotNullOrUndefined(this.total)){for(var t=[],e=this._firstIndex(this.page,this.size),n=this._lastIndex(this.page,this.size),i=e;i<=n;i++)t.push(i);this.items=t}},e.prototype.goToPage=function(t){this.dispatchEvent(new CustomEvent("changed",{detail:{page:t},bubbles:!0,composed:!0,cancelable:!0}))},e.prototype.onBefore=function(){this.page=this.page>0?this.page-1:1,this.goToPage(this.page)},e.prototype.onNext=function(){this.page=this.page<this.pages?parseInt(this.page,10)+1:this.pages,this.goToPage(this.page)},e.prototype.onBegin=function(){this.page=1,this.goToPage(this.page)},e.prototype.onEnd=function(){this.page=this.pages,this.goToPage(this.page)},e.prototype.isCurrent=function(t,e){return t===e},e.prototype._isCurrent=function(t,e){return t===e},e.prototype._firstIndex=function(t,e){var n=t-e;return n<1?1:n},e.prototype._lastIndex=function(t,e){var n=t+e;return n>this.pages?this.pages:n},Object.defineProperty(e,"styles",{get:function(){return Object(s.b)(i||(i=Object(a.f)(['\n            :host {\n                display: block;\n                font-size: 14px;\n            }\n\n            div.paginator-page-container {\n                display: flex;\n                align-items: center;\n                @apply --layout-horizontal;\n                @apply --layout-center;\n                @apply --layout-center-justified;\n                @apply --layout-center-center;\n            }\n\n            svg {\n                stroke: #666666;\n                vertical-align: middle;\n            }\n\n            span {\n                vertical-align: middle;\n            }\n\n            span,\n            button {\n                font-family: "Roboto";\n                font-size: 14px;\n                font-style: normal;\n                font-weight: 500;\n                line-height: 36px;\n                letter-spacing: 0em;\n                text-align: center;\n            }\n\n            button {\n                align-items: center;\n                display: flex;\n                background-color: white;\n                border: none;\n                height: 36px;\n                line-height: 20px;\n                padding: 8px 12px;\n                margin: 0px;\n            }\n\n            button:hover {\n                cursor: pointer;\n            }\n\n            button:disabled {\n                color: #bbbbbb;\n            }\n\n            button:disabled svg {\n                stroke: #bbbbbb;\n            }\n\n            .pages-title {\n                display: inline-block;\n                text-align: center;\n                margin: 0px 8px;\n                font-family: "Roboto";\n                font-size: 14px;\n                font-weight: 500;\n            }\n        '],['\n            :host {\n                display: block;\n                font-size: 14px;\n            }\n\n            div.paginator-page-container {\n                display: flex;\n                align-items: center;\n                @apply --layout-horizontal;\n                @apply --layout-center;\n                @apply --layout-center-justified;\n                @apply --layout-center-center;\n            }\n\n            svg {\n                stroke: #666666;\n                vertical-align: middle;\n            }\n\n            span {\n                vertical-align: middle;\n            }\n\n            span,\n            button {\n                font-family: "Roboto";\n                font-size: 14px;\n                font-style: normal;\n                font-weight: 500;\n                line-height: 36px;\n                letter-spacing: 0em;\n                text-align: center;\n            }\n\n            button {\n                align-items: center;\n                display: flex;\n                background-color: white;\n                border: none;\n                height: 36px;\n                line-height: 20px;\n                padding: 8px 12px;\n                margin: 0px;\n            }\n\n            button:hover {\n                cursor: pointer;\n            }\n\n            button:disabled {\n                color: #bbbbbb;\n            }\n\n            button:disabled svg {\n                stroke: #bbbbbb;\n            }\n\n            .pages-title {\n                display: inline-block;\n                text-align: center;\n                margin: 0px 8px;\n                font-family: "Roboto";\n                font-size: 14px;\n                font-weight: 500;\n            }\n        '])))},enumerable:!1,configurable:!0}),e.prototype.render=function(){var t=this,e=this.page>1,n=this.page<this.pages,i=this.items.length<this.total;return Object(s.c)(o||(o=Object(a.f)(['\n            <div class="paginator-page-container" ?hidden="','">\n                <button @click="','" ?disabled="','" class="prev-button">\n                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n                        <path d="M12.5 15L7.5 10L12.5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />\n                    </svg>\n                    <span>Prev</span>\n                </button>\n                <div class="pages-title">'," of ","</div>\n                <button @click=",' ?disabled="','" class="next-button">\n                    <span>Next</span>\n                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n                        <path d="M7.5 15L12.5 10L7.5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />\n                    </svg>\n                </button>\n            </div>\n        '],['\n            <div class="paginator-page-container" ?hidden="','">\n                <button @click="','" ?disabled="','" class="prev-button">\n                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n                        <path d="M12.5 15L7.5 10L12.5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />\n                    </svg>\n                    <span>Prev</span>\n                </button>\n                <div class="pages-title">'," of ","</div>\n                <button @click=",' ?disabled="','" class="next-button">\n                    <span>Next</span>\n                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n                        <path d="M7.5 15L12.5 10L7.5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />\n                    </svg>\n                </button>\n            </div>\n        '])),!i,(function(){return t.onBefore()}),!e,this.page,this.pages,(function(){return t.onNext()}),!n)},Object(a.c)([Object(r.b)({reflect:!0}),Object(a.g)("design:type",Number)],e.prototype,"total",void 0),Object(a.c)([Object(r.b)({reflect:!0}),Object(a.g)("design:type",Number)],e.prototype,"page",void 0),Object(a.c)([Object(r.b)({reflect:!0}),Object(a.g)("design:type",Number)],e.prototype,"limit",void 0),Object(a.c)([Object(r.b)({reflect:!0}),Object(a.g)("design:type",Number)],e.prototype,"size",void 0),Object(a.c)([Object(r.d)(),Object(a.g)("design:type",Number)],e.prototype,"pages",void 0),Object(a.c)([Object(r.d)(),Object(a.g)("design:type",Object)],e.prototype,"items",void 0),e=Object(a.c)([Object(r.a)("au-lit-pagination")],e)}(s.a)},595:function(t,e,n){"use strict";n.d(e,"a",(function(){return a}));var i=n(535),o=n(488),a=function(t){var e,n,a,r,l;if(t){this.id="".concat(t.productVariantId,":").concat(t.designId),this.productVariantId=t.productVariantId,this.productVersionId=t.productVersionId,this.productId=t.productId,this.sku=t.storefrontProductVariantId,this.designId=t.designId,this.designName=t.designName,this.designGroup=t.designGroup;var d=null!==(e=t.productVariantOptions)&&void 0!==e?e:[];this.options=d.map((function(t){return new o.b(t)}));var p=null!==(n=t.productVariantResources)&&void 0!==n?n:[];this.resources=p.map((function(t){return new s(t)}));var c=p.find((function(t){return t.type===i.d.Preview})),u=p.find((function(t){return t.type===i.d.EditorModel}));this.previewUrl=null!==(a=null==c?void 0:c.url)&&void 0!==a?a:"",this.designResourceId=null!==(r=null==u?void 0:u.resourceId)&&void 0!==r?r:"",this.previewResourceId=null!==(l=null==c?void 0:c.resourceId)&&void 0!==l?l:"",this.price=t.price}},s=function(t){t&&(this.resourceId=t.resourceId,this.name=t.name,this.url=t.url,this.type=t.type,this.resourcePreview=t.resourcePreview)}},873:function(t,e){t.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(t,e,n){"use strict";n.r(e),n.d(e,"AuPIMDesignSelector",(function(){return p})),n.d(e,"widget",(function(){return p}));var i=n(0),o=n(595),a=n(17),s=n(2),r=(n(544),n(1)),l=n(160),d=n(873),p=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.imageIsLoading=!0,e.currentPage=1,e.pages=1,e.variants=[],e.displayedVariants=[],e.showPagination=!1,e.showItemsTitle=!0,e._isRestoring=!1,e._selectedOnCurrentPage="",e._selectedVariant="",e._itemsPerPage=24,e}return Object(i.d)(e,t),Object.defineProperty(e.prototype,"_",{get:function(){return this.value},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"sku",{get:function(){var t;return null===(t=null==this?void 0:this.value)||void 0===t?void 0:t.sku},enumerable:!1,configurable:!0}),e.prototype.onWidgetDisplayAsync=function(){return Object(i.b)(this,void 0,void 0,(function(){var t=this;return Object(i.e)(this,(function(e){return this.showPreloader(!0),setTimeout((function(){t._updateStyling(),t.showPreloader(!1)}),250),[2]}))}))},e.prototype.ready=function(){t.prototype.ready.call(this),this.container=this,window.addEventListener("resize",this._onResize.bind(this)),this.showPreloader(!0)},e.prototype.disconnectedCallback=function(){t.prototype.disconnectedCallback.call(this),window.removeEventListener("resize",this._onResize)},e.prototype._selectedChange=function(t){var e=this;this.displayedVariants.length<1||this._isRestoring||t===this._selectedVariant||(t?(this._selectedVariant=t,this.value=this.displayedVariants.find((function(t){return t.id===e._selectedVariant}))):this._selectedOnCurrentPage=this._selectedVariant)},e.prototype.updateParams=function(t){var e,n;this.showItemsTitle=r.a.isNotNullOrUndefined(t.showItemsTitle)?t.showItemsTitle:this.showItemsTitle,t.onChange&&(this._onChange=r.a.functionWrapperConstructor(t.onChange)),t.itemsPerPage&&(this._itemsPerPage=t.itemsPerPage),t.onItemDoubleClick&&(this._onItemDoubleClick=r.a.functionWrapperConstructor(t.onItemDoubleClick)),t.onItemClick&&(this._onItemClick=r.a.functionWrapperConstructor(t.onItemClick)),this._itemFunctions={itemDoubleClickFunction:null!==(e=this._onItemDoubleClick)&&void 0!==e?e:null,itemClickFunction:null!==(n=this._onItemClick)&&void 0!==n?n:null},this.showPreloader(!1)},e.prototype.updateParamsAsync=function(e){return Object(i.b)(this,void 0,void 0,(function(){return Object(i.e)(this,(function(n){switch(n.label){case 0:return[4,t.prototype.updateParamsAsync.call(this,e)];case 1:return n.sent(),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)),[2]}}))}))},e.prototype.exportWidgetData=function(t){return Object(i.b)(this,void 0,void 0,(function(){return Object(i.e)(this,(function(t){return this.currentPage&&this._selectedVariant?[2,{selected:this.value,page:this.currentPage}]:[2,null]}))}))},e.prototype.restoreWidgetFromData=function(t,e){var n,o;return Object(i.b)(this,void 0,void 0,(function(){return Object(i.e)(this,(function(e){return t&&(this._selectedOnCurrentPage=null===(n=t.selected)||void 0===n?void 0:n.id,this._selectedVariant=null===(o=t.selected)||void 0===o?void 0:o.id,this.value=t.selected,this.goToPage(t.page)),[2]}))}))},e.prototype.clearSelection=function(){},e.prototype.displayedVariantsChanged=function(){this.emitChange({displayedVariants:this.displayedVariants})},e.prototype.valueChanged=function(){this.emitChange({value:this.value}),this._onChange&&!this._isRestoring&&this._onChange(this.value)},e.prototype._onDoubleClick=function(){var t,e=null===(t=this.functions)||void 0===t?void 0:t.itemDoubleClickFunction;e&&e(this.item)},e.prototype._onClick=function(){var t,e=null===(t=this.functions)||void 0===t?void 0:t.itemClickFunction;e&&e(this.item)},e.prototype._onResize=function(){this._updateStyling()},e.prototype._updateStyling=function(t){void 0===t&&(t=this.container.offsetWidth);var e=6,n="auto";t<320?(n="inherit",e=2):t<480?e=2:t<768?e=3:t<1280?e=4:t>1920&&(e=6),this.updateStyles({"--scroll-state":n}),this.updateStyles({"--gallery-height":"100%"}),this.updateStyles({"--columns-number":e})},e.prototype.goToPage=function(t,e){var n,i,o,s=this;if(void 0===t&&(t=1),void 0===e&&(e=!1),this.currentPage=t,this.displayedVariants=this.variants.slice((t-1)*this._itemsPerPage,t*this._itemsPerPage),this.displayedVariants.length>0&&e){var r,l=this.displayedVariants.some((function(t){return(null==t?void 0:t.id)===s._selectedOnCurrentPage})),d=this.displayedVariants.findIndex((function(t){var e;return(null==t?void 0:t.designGroup)===(null===(e=s.value)||void 0===e?void 0:e.designGroup)}));(r=-1===d?null:null===(n=this.displayedVariants[d])||void 0===n?void 0:n.id)&&!l?this._selectedOnCurrentPage=r:r||l||(this._selectedOnCurrentPage=null===(i=this.displayedVariants[0])||void 0===i?void 0:i.id)}""===this._selectedVariant&&(this._selectedOnCurrentPage=null===(o=this.displayedVariants[0])||void 0===o?void 0:o.id),this.ironSelectorElement=this.container.getElementById("gallery"),this.ironSelectorElement&&setTimeout((function(){s.ironSelectorElement._updateSelected()}),0),this.publishData({page:this.currentPage},a.a.PAGE_CHANGED)},e.prototype._pageChangedHandler=function(t){this.goToPage(t.detail.page)},e.prototype._onLoadImage=function(){this.imageIsLoading=!1},Object(i.c)([Object(s.c)(),Object(i.g)("design:type",Boolean)],e.prototype,"imageIsLoading",void 0),Object(i.c)([Object(s.c)(),Object(i.g)("design:type",Number)],e.prototype,"currentPage",void 0),Object(i.c)([Object(s.c)(),Object(i.g)("design:type",Array)],e.prototype,"variants",void 0),Object(i.c)([Object(s.c)({notify:!0}),Object(i.g)("design:type",Array)],e.prototype,"displayedVariants",void 0),Object(i.c)([Object(s.c)(),Object(i.g)("design:type",Object)],e.prototype,"params",void 0),Object(i.c)([Object(s.c)(),Object(i.g)("design:type",Boolean)],e.prototype,"showPagination",void 0),Object(i.c)([Object(s.c)(),Object(i.g)("design:type",Boolean)],e.prototype,"showItemsTitle",void 0),Object(i.c)([Object(s.c)({notify:!0}),Object(i.g)("design:type",o.a)],e.prototype,"value",void 0),Object(i.c)([Object(s.c)({notify:!0}),Object(i.g)("design:type",String)],e.prototype,"_selectedOnCurrentPage",void 0),Object(i.c)([Object(s.c)(),Object(i.g)("design:type",o.a),Object(i.g)("design:paramtypes",[])],e.prototype,"_",null),Object(i.c)([Object(s.b)("_selectedOnCurrentPage"),Object(i.g)("design:type",Function),Object(i.g)("design:paramtypes",[String]),Object(i.g)("design:returntype",void 0)],e.prototype,"_selectedChange",null),Object(i.c)([Object(s.b)("displayedVariants"),Object(i.g)("design:type",Function),Object(i.g)("design:paramtypes",[]),Object(i.g)("design:returntype",void 0)],e.prototype,"displayedVariantsChanged",null),Object(i.c)([Object(s.b)("value"),Object(i.g)("design:type",Function),Object(i.g)("design:paramtypes",[]),Object(i.g)("design:returntype",void 0)],e.prototype,"valueChanged",null),Object(i.c)([Object(s.a)("au-widget-pim-design-selector",d)],e)}(l.b)}}]);