@aurigma/ui-framework/dist/imports/es8/dynamic.au-option-image-list-compact.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([[9],{423:function(e,t,i){"use strict";i.d(t,"a",(function(){return n}));class n{constructor(e,t=!1){this._title=null,this.optionValue=e,this.disabled=t}equals(e){return this.id===e.id&&this.title===e.title&&this.price===e.price}get value(){return this.optionValue}get id(){return this.optionValue.id}get title(){return null==this._title&&(this._title=this._getParsedTitle()),this._title}get price(){return this.optionValue.price}get color(){return this.optionValue.color}get imageUrl(){return this.optionValue.imageUrl}get props(){return this.optionValue.props}get shownPrice(){return this.optionValue.shownPrice}get preselected(){return this.optionValue.preselected}_getParsedTitle(){try{return(new DOMParser).parseFromString(this.optionValue.title,"text/html").body.innerText}catch(e){}return this.optionValue.title}}},431:function(e,t,i){"use strict";i.d(t,"a",(function(){return a}));var n=i(0),r=i(2),s=i(1),o=i(448),l=i(423);class a extends o.a{init(e){super.init(e);const t=this._copySelection();this.items=e.values.map(((t,i)=>((s.a.isNullOrUndefined(t.id)||-1===t.id)&&(t.id=i),"image"!==e.type&&t.imageUrl&&(t.imageUrl=null),new l.a(t,t.disabled)))),s.a.isNotNullOrUndefined(t)&&this._restoreSelection(t),this.enableFilter=s.a.isNotNullOrUndefined(e.props)&&e.props.enableFilter||!1,e.onAvailableOptionValueChange&&e.onAvailableOptionValueChange.subscribe(((e,t)=>this.updateItemsAvailability(t))),e.onOptionValueChange&&e.onOptionValueChange.subscribe(((e,t)=>this.updateSelectedValue(t)))}_copySelection(){return s.a.isNotNullOrUndefined(this.value)?Object.assign({},this.value):void 0}_restoreSelection(e){this.value=this.items.find((t=>t.equals(e)))}_isArrayEqual(e,t){return e.length===t.length&&e.every(((e,i)=>e===t[i]))}_getItemPriceTitle(e){const t=e=>e&&0!==e?" (+"+this.driver.cart.formatPrice(e)+")":"";let i=t(e.price);return null!==e.shownPrice&&void 0!==e.shownPrice&&(i=t(e.shownPrice*(this.driver.orders.current._priceMultiplier||1))),e.title+i}_isOptionDisabled(e){return this.disabled||e}updateItemsAvailability(e){for(let t=0;t<this.items.length;t++){const i=e.every((e=>e.id!==this.items[t].id));this.set(`items.${t}.disabled`,i)}}_disabledClass(e){return e?"item-disabled":""}}Object(n.a)([Object(r.c)(),Object(n.b)("design:type",Array)],a.prototype,"items",void 0),Object(n.a)([Object(r.c)({notify:!0}),Object(n.b)("design:type",Boolean)],a.prototype,"enableFilter",void 0)},461:function(e,t,i){"use strict";i.d(t,"a",(function(){return l}));var n=i(0),r=i(431),s=i(423),o=i(2);class l extends r.a{init(e){if(super.init(e),0===this.items.length)return;let t=this.items.find((e=>e.optionValue.preselected));t||(t=this.items.find((e=>0===e.price))),t||(t=this.items[0]),this.value=t}_selectedChange(e){this.items.length>0&&(this.value=this.items.find((t=>t.id===e)))}_valueChange(e){e&&this.items.length>0&&this._selectedId!==e.id&&(this._selectedId=e.id),this._onOptionChange()}updateSelectedValue(e){if(e.length>1)throw new Error("Multiple option value is not available");const t=e.length?this.items.find((t=>t.id===e[0].id)):null;(this.value&&!t||!this.value&&t||this.value&&t&&this.value.id!==t.id)&&(this.value=t)}}Object(n.a)([Object(o.c)({notify:!0}),Object(n.b)("design:type",Number)],l.prototype,"_selectedId",void 0),Object(n.a)([Object(o.b)("_selectedId"),Object(n.b)("design:type",Function),Object(n.b)("design:paramtypes",[Number]),Object(n.b)("design:returntype",void 0)],l.prototype,"_selectedChange",null),Object(n.a)([Object(o.b)("value"),Object(n.b)("design:type",Function),Object(n.b)("design:paramtypes",[s.a]),Object(n.b)("design:returntype",void 0)],l.prototype,"_valueChange",null)},597:function(e,t,i){"use strict";i.d(t,"a",(function(){return o}));var n=i(0),r=i(461),s=i(2);class o extends r.a{_roundStyleObserver(e){"round"===e?this.updateStyles({"--border-radius":"100%"}):this.updateStyles({"--border-radius":"0"})}isImage(e){return this._isDefinedString(e.imageUrl)}isColor(e){return this._isDefinedString(e.color)&&!this._isDefinedString(e.imageUrl)}getContent(e){let t=[];return this.isImage(e)?t.push(`background-image: url("${e.imageUrl}")`):(t.push(`background-color: ${e.color}`),t.push(`color: ${e.color}`),t.push("border: #95989A 1px solid")),t.join(";")}_isDefinedString(e){return null!=e&&e.length>0}}Object(n.a)([Object(s.c)({notify:!0}),Object(n.b)("design:type",String)],o.prototype,"roundStyle",void 0),Object(n.a)([Object(s.b)("roundStyle"),Object(n.b)("design:type",Function),Object(n.b)("design:paramtypes",[String]),Object(n.b)("design:returntype",void 0)],o.prototype,"_roundStyleObserver",null)},881:function(e,t){e.exports='<style>\n    :host {\n        display: inline-flex;\n        width: 100%;\n        overflow: hidden;\n        flex-direction: column;\n    }\n\n    .message {\n        display: flex;\n    }\n\n    .message.hidden {\n        display: none;\n    }\n\n    iron-selector {\n        display: inline-flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        margin-left: -12px;\n        margin-right: -12px;\n        width: auto !important;\n    }\n\n    .item {\n        display: inline-flex;\n        flex-direction: column;\n        padding: 12px;\n        outline: none;\n        align-items: center;\n        position: relative;\n    }\n\n\n    .item-content {\n        width: var(--item-content-width, 40px);\n        height: var(--item-content-height, 40px);\n        background-position: var(--item-content-position, center center);\n        background-repeat: var(--item-content-repeat, no-repeat);\n        background-size: var(--item-content-size, cover);\n        border-radius: var(--border-radius, 100%);\n        margin: 3px;\n    }\n\n    .item-description {\n        text-align: center;\n        width: var(--item-description-width, 60px);\n        overflow: hidden;\n        word-break: break-word;\n        hyphens: manual;\n        line-height: 0.9;\n        display: var(--item-description-display, block);\n    }\n\n    .item-description .item-title {\n        @apply --default-icon-title-font;\n    }\n\n    .item.iron-selected .item-description .item-title {\n        color: var(--theme-primary-color);\n    }\n\n    .item.iron-selected .item-selection-frame {\n        border-color: var(--theme-primary-color);\n        border-radius: var(--border-radius, 100%);\n    }\n\n    .item-selection-frame {\n        border: transparent 2px solid;\n        display: inline-block;\n    }\n\n    .item-disabled {\n        pointer-events: none;\n        opacity: 0.4;\n    }\n</style>\n<div id="emptyValuesMessage" class="message hidden">\n    [[emptyValuesText]]\n</div>\n<iron-selector name="option" class="option-image-container" attr-for-selected="name" selected="{{_selectedId}}">\n    <dom-repeat items="[[items]]">\n        <template>\n            <div tabindex="1" role="menuitemradio" name="{{item.id}}" class$="item [[_disabledClass(item.disabled)]]"\n                title$="[[item.title]]">\n                <div class="item-selection-frame">\n                    <div class="item-content" style$="{{getContent(item)}}"></div>\n                </div>\n                <span class="item-description">\n                    <span class="item-title">[[item.title]]</span>\n                </span>\n            </div>\n        </template>\n    </dom-repeat>\n</iron-selector>\n'},921:function(e,t,i){"use strict";i.r(t),i.d(t,"AuImageListCompact",(function(){return l})),i.d(t,"option",(function(){return l}));var n=i(0),r=i(881),s=i(597),o=i(2);let l=class extends s.a{};l=Object(n.a)([Object(o.a)("au-option-image-list-compact",r)],l)}}]);