@aurigma/ui-framework/dist/imports/es8/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(e,t,i){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){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)){var t=[],i=this._firstIndex(this.page,this.size),n=this._lastIndex(this.page,this.size);for(let e=i;e<=n;e++)t.push(e);this.items=t}}goToPage(e){this.dispatchEvent(new CustomEvent("changed",{detail:{page:e},bubbles:!0,composed:!0,cancelable:!0}))}onBefore(){this.page=0<this.page?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){e-=t;return e<1?1:e}_lastIndex(e,t){e+=t;return e>this.pages?this.pages:e}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(){var e=1<this.page,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){i.d(t,"a",function(){return n});var s=i(535),a=i(488);class n{constructor(e){var t,i,n;e&&(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,n=null!=(n=e.productVariantOptions)?n:[],this.options=n.map(e=>new a.b(e)),n=null!=(n=e.productVariantResources)?n:[],this.resources=n.map(e=>new o(e)),i=n.find(e=>e.type===s.d.Preview),n=n.find(e=>e.type===s.d.EditorModel),this.previewUrl=null!=(t=null==i?void 0:i.url)?t:"",this.designResourceId=null!=(t=null==n?void 0:n.resourceId)?t:"",this.previewResourceId=null!=(n=null==i?void 0:i.resourceId)?n:"",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){i.r(t),i.d(t,"AuPIMDesignSelector",function(){return l}),i.d(t,"widget",function(){return l});var t=i(0),n=i(595),s=i(17),a=i(2),o=(i(544),i(1)),r=i(160),i=i(873);let l=class extends r.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.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){this.showItemsTitle=(o.a.isNotNullOrUndefined(e.showItemsTitle)?e:this).showItemsTitle,e.onChange&&(this._onChange=o.a.functionWrapperConstructor(e.onChange)),e.itemsPerPage&&(this._itemsPerPage=e.itemsPerPage),e.onItemDoubleClick&&(this._onItemDoubleClick=o.a.functionWrapperConstructor(e.onItemDoubleClick)),e.onItemClick&&(this._onItemClick=o.a.functionWrapperConstructor(e.onItemClick)),this._itemFunctions={itemDoubleClickFunction:null!=(e=this._onItemDoubleClick)?e:null,itemClickFunction:null!=(e=this._onItemClick)?e:null},this.showPreloader(!1)}async updateParamsAsync(e){await super.updateParamsAsync(e),o.a.isNotNullOrUndefined(e.designs)&&(this.variants=e.designs,o.a.isNotNullOrUndefined(this._itemsPerPage)&&o.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))}async exportWidgetData(e){return this.currentPage&&this._selectedVariant?{selected:this.value,page:this.currentPage}:null}async restoreWidgetFromData(e,t){var i;e&&(this._selectedOnCurrentPage=null==(i=e.selected)?void 0:i.id,this._selectedVariant=null==(i=e.selected)?void 0:i.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=null==(e=this.functions)?void 0:e.itemDoubleClickFunction;e&&e(this.item)}_onClick(){var e=null==(e=this.functions)?void 0:e.itemClickFunction;e&&e(this.item)}_onResize(){this._updateStyling()}_updateStyling(e=this.container.offsetWidth){let t=6;let i="auto";e<320?(i="inherit",t=2):e<480?t=2:e<768?t=3:e<1280?t=4:1920<e&&(t=6),this.updateStyles({"--scroll-state":i}),this.updateStyles({"--gallery-height":"100%"}),this.updateStyles({"--columns-number":t})}goToPage(e=1,t=!1){var i;this.currentPage=e,this.displayedVariants=this.variants.slice((e-1)*this._itemsPerPage,e*this._itemsPerPage),0<this.displayedVariants.length&&t&&(e=this.displayedVariants.some(e=>(null==e?void 0:e.id)===this._selectedOnCurrentPage),t=null,(t=-1===(i=this.displayedVariants.findIndex(e=>(null==e?void 0:e.designGroup)===(null==(e=this.value)?void 0:e.designGroup)))?null:null==(i=this.displayedVariants[i])?void 0:i.id)&&!e?this._selectedOnCurrentPage=t:t||e||(this._selectedOnCurrentPage=null==(i=this.displayedVariants[0])?void 0:i.id)),""===this._selectedVariant&&(this._selectedOnCurrentPage=null==(t=this.displayedVariants[0])?void 0:t.id),this.ironSelectorElement=this.container.getElementById("gallery"),this.ironSelectorElement&&setTimeout(()=>{this.ironSelectorElement._updateSelected()},0),this.publishData({page:this.currentPage},s.a.PAGE_CHANGED)}_pageChangedHandler(e){this.goToPage(e.detail.page)}_onLoadImage(){this.imageIsLoading=!1}};Object(t.a)([Object(a.c)(),Object(t.b)("design:type",Boolean)],l.prototype,"imageIsLoading",void 0),Object(t.a)([Object(a.c)(),Object(t.b)("design:type",Number)],l.prototype,"currentPage",void 0),Object(t.a)([Object(a.c)(),Object(t.b)("design:type",Array)],l.prototype,"variants",void 0),Object(t.a)([Object(a.c)({notify:!0}),Object(t.b)("design:type",Array)],l.prototype,"displayedVariants",void 0),Object(t.a)([Object(a.c)(),Object(t.b)("design:type",Object)],l.prototype,"params",void 0),Object(t.a)([Object(a.c)(),Object(t.b)("design:type",Boolean)],l.prototype,"showPagination",void 0),Object(t.a)([Object(a.c)(),Object(t.b)("design:type",Boolean)],l.prototype,"showItemsTitle",void 0),Object(t.a)([Object(a.c)({notify:!0}),Object(t.b)("design:type",n.a)],l.prototype,"value",void 0),Object(t.a)([Object(a.c)({notify:!0}),Object(t.b)("design:type",String)],l.prototype,"_selectedOnCurrentPage",void 0),Object(t.a)([Object(a.c)(),Object(t.b)("design:type",n.a),Object(t.b)("design:paramtypes",[])],l.prototype,"_",null),Object(t.a)([Object(a.b)("_selectedOnCurrentPage"),Object(t.b)("design:type",Function),Object(t.b)("design:paramtypes",[String]),Object(t.b)("design:returntype",void 0)],l.prototype,"_selectedChange",null),Object(t.a)([Object(a.b)("displayedVariants"),Object(t.b)("design:type",Function),Object(t.b)("design:paramtypes",[]),Object(t.b)("design:returntype",void 0)],l.prototype,"displayedVariantsChanged",null),Object(t.a)([Object(a.b)("value"),Object(t.b)("design:type",Function),Object(t.b)("design:paramtypes",[]),Object(t.b)("design:returntype",void 0)],l.prototype,"valueChanged",null),l=Object(t.a)([Object(a.a)("au-widget-pim-design-selector",i)],l)}}]);