@aurigma/ui-framework/dist/imports/es5/dynamic.au-widget-pim-design-selector.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([[41],{488:function(t,e,n){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){var i,o,a,s=n(0),r=n(12),l=n(15),d=n(1);i=r.a,Object(s.d)(p,i),p.prototype.willUpdate=function(){if(d.a.isNotNullOrUndefined(this.limit)&&d.a.isNotNullOrUndefined(this.total)&&(this.pages=parseInt(Math.ceil(parseFloat(this.total)/parseFloat(this.limit)),10)),d.a.isNotNullOrUndefined(this.page)&&d.a.isNotNullOrUndefined(this.limit)&&d.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}},p.prototype.goToPage=function(t){this.dispatchEvent(new CustomEvent("changed",{detail:{page:t},bubbles:!0,composed:!0,cancelable:!0}))},p.prototype.onBefore=function(){this.page=0<this.page?this.page-1:1,this.goToPage(this.page)},p.prototype.onNext=function(){this.page=this.page<this.pages?parseInt(this.page,10)+1:this.pages,this.goToPage(this.page)},p.prototype.onBegin=function(){this.page=1,this.goToPage(this.page)},p.prototype.onEnd=function(){this.page=this.pages,this.goToPage(this.page)},p.prototype.isCurrent=function(t,e){return t===e},p.prototype._isCurrent=function(t,e){return t===e},p.prototype._firstIndex=function(t,e){t-=e;return t<1?1:t},p.prototype._lastIndex=function(t,e){t+=e;return t>this.pages?this.pages:t},Object.defineProperty(p,"styles",{get:function(){return Object(r.b)(o=o||Object(s.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}),p.prototype.render=function(){var t=this,e=1<this.page,n=this.page<this.pages,i=this.items.length<this.total;return Object(r.c)(a=a||Object(s.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(s.c)([Object(l.b)({reflect:!0}),Object(s.g)("design:type",Number)],p.prototype,"total",void 0),Object(s.c)([Object(l.b)({reflect:!0}),Object(s.g)("design:type",Number)],p.prototype,"page",void 0),Object(s.c)([Object(l.b)({reflect:!0}),Object(s.g)("design:type",Number)],p.prototype,"limit",void 0),Object(s.c)([Object(l.b)({reflect:!0}),Object(s.g)("design:type",Number)],p.prototype,"size",void 0),Object(s.c)([Object(l.d)(),Object(s.g)("design:type",Number)],p.prototype,"pages",void 0),Object(s.c)([Object(l.d)(),Object(s.g)("design:type",Object)],p.prototype,"items",void 0),Object(s.c)([Object(l.a)("au-lit-pagination")],p);function p(){var t=null!==i&&i.apply(this,arguments)||this;return t.total=1,t.page=0,t.limit=50,t.size=2,t.pages=0,t.items=[],t}},595:function(t,e,n){n.d(e,"a",function(){return i});var o=n(535),a=n(488),i=function(t){var e,n,i;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,i=null!=(i=t.productVariantOptions)?i:[],this.options=i.map(function(t){return new a.b(t)}),i=null!=(i=t.productVariantResources)?i:[],this.resources=i.map(function(t){return new s(t)}),n=i.find(function(t){return t.type===o.d.Preview}),i=i.find(function(t){return t.type===o.d.EditorModel}),this.previewUrl=null!=(e=null==n?void 0:n.url)?e:"",this.designResourceId=null!=(e=null==i?void 0:i.resourceId)?e:"",this.previewResourceId=null!=(i=null==n?void 0:n.resourceId)?i:"",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){n.r(e),n.d(e,"AuPIMDesignSelector",function(){return d}),n.d(e,"widget",function(){return d});var i,o=n(0),e=n(595),a=n(17),s=n(2),r=(n(544),n(1)),l=n(160),n=n(873),d=(i=l.b,Object(o.d)(p,i),Object.defineProperty(p.prototype,"_",{get:function(){return this.value},enumerable:!1,configurable:!0}),Object.defineProperty(p.prototype,"sku",{get:function(){var t;return null==(t=null==this?void 0:this.value)?void 0:t.sku},enumerable:!1,configurable:!0}),p.prototype.onWidgetDisplayAsync=function(){return Object(o.b)(this,void 0,void 0,function(){var e=this;return Object(o.e)(this,function(t){return this.showPreloader(!0),setTimeout(function(){e._updateStyling(),e.showPreloader(!1)},250),[2]})})},p.prototype.ready=function(){i.prototype.ready.call(this),this.container=this,window.addEventListener("resize",this._onResize.bind(this)),this.showPreloader(!0)},p.prototype.disconnectedCallback=function(){i.prototype.disconnectedCallback.call(this),window.removeEventListener("resize",this._onResize)},p.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)},p.prototype.updateParams=function(t){this.showItemsTitle=(r.a.isNotNullOrUndefined(t.showItemsTitle)?t: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!=(t=this._onItemDoubleClick)?t:null,itemClickFunction:null!=(t=this._onItemClick)?t:null},this.showPreloader(!1)},p.prototype.updateParamsAsync=function(e){return Object(o.b)(this,void 0,void 0,function(){return Object(o.e)(this,function(t){switch(t.label){case 0:return[4,i.prototype.updateParamsAsync.call(this,e)];case 1:return t.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=1<this.pages),this.goToPage(this.currentPage>this.pages?1:this.currentPage,!0)),[2]}})})},p.prototype.exportWidgetData=function(t){return Object(o.b)(this,void 0,void 0,function(){return Object(o.e)(this,function(t){return this.currentPage&&this._selectedVariant?[2,{selected:this.value,page:this.currentPage}]:[2,null]})})},p.prototype.restoreWidgetFromData=function(e,t){var n;return Object(o.b)(this,void 0,void 0,function(){return Object(o.e)(this,function(t){return e&&(this._selectedOnCurrentPage=null==(n=e.selected)?void 0:n.id,this._selectedVariant=null==(n=e.selected)?void 0:n.id,this.value=e.selected,this.goToPage(e.page)),[2]})})},p.prototype.clearSelection=function(){},p.prototype.displayedVariantsChanged=function(){this.emitChange({displayedVariants:this.displayedVariants})},p.prototype.valueChanged=function(){this.emitChange({value:this.value}),this._onChange&&!this._isRestoring&&this._onChange(this.value)},p.prototype._onDoubleClick=function(){var t=null==(t=this.functions)?void 0:t.itemDoubleClickFunction;t&&t(this.item)},p.prototype._onClick=function(){var t=null==(t=this.functions)?void 0:t.itemClickFunction;t&&t(this.item)},p.prototype._onResize=function(){this._updateStyling()},p.prototype._updateStyling=function(t){var e=6,n="auto";(t=void 0===t?this.container.offsetWidth:t)<320?(n="inherit",e=2):t<480?e=2:t<768?e=3:t<1280?e=4:1920<t&&(e=6),this.updateStyles({"--scroll-state":n}),this.updateStyles({"--gallery-height":"100%"}),this.updateStyles({"--columns-number":e})},p.prototype.goToPage=function(t,e){var n,i=this;void 0===e&&(e=!1),this.currentPage=t=void 0===t?1:t,this.displayedVariants=this.variants.slice((t-1)*this._itemsPerPage,t*this._itemsPerPage),0<this.displayedVariants.length&&e&&(t=this.displayedVariants.some(function(t){return(null==t?void 0:t.id)===i._selectedOnCurrentPage}),e=null,(e=-1===(n=this.displayedVariants.findIndex(function(t){return(null==t?void 0:t.designGroup)===(null==(t=i.value)?void 0:t.designGroup)}))?null:null==(n=this.displayedVariants[n])?void 0:n.id)&&!t?this._selectedOnCurrentPage=e:e||t||(this._selectedOnCurrentPage=null==(n=this.displayedVariants[0])?void 0:n.id)),""===this._selectedVariant&&(this._selectedOnCurrentPage=null==(e=this.displayedVariants[0])?void 0:e.id),this.ironSelectorElement=this.container.getElementById("gallery"),this.ironSelectorElement&&setTimeout(function(){i.ironSelectorElement._updateSelected()},0),this.publishData({page:this.currentPage},a.a.PAGE_CHANGED)},p.prototype._pageChangedHandler=function(t){this.goToPage(t.detail.page)},p.prototype._onLoadImage=function(){this.imageIsLoading=!1},Object(o.c)([Object(s.c)(),Object(o.g)("design:type",Boolean)],p.prototype,"imageIsLoading",void 0),Object(o.c)([Object(s.c)(),Object(o.g)("design:type",Number)],p.prototype,"currentPage",void 0),Object(o.c)([Object(s.c)(),Object(o.g)("design:type",Array)],p.prototype,"variants",void 0),Object(o.c)([Object(s.c)({notify:!0}),Object(o.g)("design:type",Array)],p.prototype,"displayedVariants",void 0),Object(o.c)([Object(s.c)(),Object(o.g)("design:type",Object)],p.prototype,"params",void 0),Object(o.c)([Object(s.c)(),Object(o.g)("design:type",Boolean)],p.prototype,"showPagination",void 0),Object(o.c)([Object(s.c)(),Object(o.g)("design:type",Boolean)],p.prototype,"showItemsTitle",void 0),Object(o.c)([Object(s.c)({notify:!0}),Object(o.g)("design:type",e.a)],p.prototype,"value",void 0),Object(o.c)([Object(s.c)({notify:!0}),Object(o.g)("design:type",String)],p.prototype,"_selectedOnCurrentPage",void 0),Object(o.c)([Object(s.c)(),Object(o.g)("design:type",e.a),Object(o.g)("design:paramtypes",[])],p.prototype,"_",null),Object(o.c)([Object(s.b)("_selectedOnCurrentPage"),Object(o.g)("design:type",Function),Object(o.g)("design:paramtypes",[String]),Object(o.g)("design:returntype",void 0)],p.prototype,"_selectedChange",null),Object(o.c)([Object(s.b)("displayedVariants"),Object(o.g)("design:type",Function),Object(o.g)("design:paramtypes",[]),Object(o.g)("design:returntype",void 0)],p.prototype,"displayedVariantsChanged",null),Object(o.c)([Object(s.b)("value"),Object(o.g)("design:type",Function),Object(o.g)("design:paramtypes",[]),Object(o.g)("design:returntype",void 0)],p.prototype,"valueChanged",null),Object(o.c)([Object(s.a)("au-widget-pim-design-selector",n)],p));function p(){var t=null!==i&&i.apply(this,arguments)||this;return t.imageIsLoading=!0,t.currentPage=1,t.pages=1,t.variants=[],t.displayedVariants=[],t.showPagination=!1,t.showItemsTitle=!0,t._isRestoring=!1,t._selectedOnCurrentPage="",t._selectedVariant="",t._itemsPerPage=24,t}}}]);