@aurigma/ui-framework/dist/imports/es5/dynamic.au-option-image-list.tw1ff5iwrs.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([[8],{424:function(e,t,n){"use strict";n.d(t,"a",(function(){return i}));var i=function(){function e(e,t){void 0===t&&(t=!1),this._title=null,this.optionValue=e,this.disabled=t}return e.prototype.equals=function(e){return this.id===e.id&&this.title===e.title&&this.price===e.price},Object.defineProperty(e.prototype,"value",{get:function(){return this.optionValue},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"id",{get:function(){return this.optionValue.id},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"title",{get:function(){return null==this._title&&(this._title=this._getParsedTitle()),this._title},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"price",{get:function(){return this.optionValue.price},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"color",{get:function(){return this.optionValue.color},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"imageUrl",{get:function(){return this.optionValue.imageUrl},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"props",{get:function(){return this.optionValue.props},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"shownPrice",{get:function(){return this.optionValue.shownPrice},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"preselected",{get:function(){return this.optionValue.preselected},enumerable:!1,configurable:!0}),e.prototype._getParsedTitle=function(){try{return(new DOMParser).parseFromString(this.optionValue.title,"text/html").body.innerText}catch(e){}return this.optionValue.title},e}()},429:function(e,t,n){"use strict";n.d(t,"a",(function(){return a}));var i=n(0),r=n(2),o=n(1),l=n(441),s=n(424),a=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return Object(i.d)(t,e),t.prototype.init=function(t){var n=this;e.prototype.init.call(this,t);var i=this._copySelection();this.items=t.values.map((function(e,n){return(o.a.isNullOrUndefined(e.id)||-1===e.id)&&(e.id=n),"image"!==t.type&&e.imageUrl&&(e.imageUrl=null),new s.a(e,e.disabled)})),o.a.isNotNullOrUndefined(i)&&this._restoreSelection(i),this.enableFilter=o.a.isNotNullOrUndefined(t.props)&&t.props.enableFilter||!1,t.onAvailableOptionValueChange&&t.onAvailableOptionValueChange.subscribe((function(e,t){return n.updateItemsAvailability(t)})),t.onOptionValueChange&&t.onOptionValueChange.subscribe((function(e,t){return n.updateSelectedValue(t)}))},t.prototype._copySelection=function(){return o.a.isNotNullOrUndefined(this.value)?Object(i.a)({},this.value):void 0},t.prototype._restoreSelection=function(e){this.value=this.items.find((function(t){return t.equals(e)}))},t.prototype._isArrayEqual=function(e,t){return e.length===t.length&&e.every((function(e,n){return e===t[n]}))},t.prototype._getItemPriceTitle=function(e){var t=this,n=function(e){return e&&0!==e?" (+"+t.driver.cart.formatPrice(e)+")":""},i=n(e.price);return null!==e.shownPrice&&void 0!==e.shownPrice&&(i=n(e.shownPrice*(this.driver.orders.current._priceMultiplier||1))),e.title+i},t.prototype._isOptionDisabled=function(e){return this.disabled||e},t.prototype.updateItemsAvailability=function(e){for(var t=this,n=function(n){var r=e.every((function(e){return e.id!==t.items[n].id}));i.set("items.".concat(n,".disabled"),r)},i=this,r=0;r<this.items.length;r++)n(r)},t.prototype._disabledClass=function(e){return e?"item-disabled":""},Object(i.c)([Object(r.c)(),Object(i.g)("design:type",Array)],t.prototype,"items",void 0),Object(i.c)([Object(r.c)({notify:!0}),Object(i.g)("design:type",Boolean)],t.prototype,"enableFilter",void 0),t}(l.a)},455:function(e,t,n){"use strict";n.d(t,"a",(function(){return s}));var i=n(0),r=n(429),o=n(424),l=n(2),s=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return Object(i.d)(t,e),t.prototype.init=function(t){if(e.prototype.init.call(this,t),0!==this.items.length){var n=this.items.find((function(e){return e.optionValue.preselected}));n||(n=this.items.find((function(e){return 0===e.price}))),n||(n=this.items[0]),this.value=n}},t.prototype._selectedChange=function(e){this.items.length>0&&(this.value=this.items.find((function(t){return t.id===e})))},t.prototype._valueChange=function(e){e&&this.items.length>0&&this._selectedId!==e.id&&(this._selectedId=e.id),this._onOptionChange()},t.prototype.updateSelectedValue=function(e){if(e.length>1)throw new Error("Multiple option value is not available");var t=e.length?this.items.find((function(t){return t.id===e[0].id})):null;(this.value&&!t||!this.value&&t||this.value&&t&&this.value.id!==t.id)&&(this.value=t)},Object(i.c)([Object(l.c)({notify:!0}),Object(i.g)("design:type",Number)],t.prototype,"_selectedId",void 0),Object(i.c)([Object(l.b)("_selectedId"),Object(i.g)("design:type",Function),Object(i.g)("design:paramtypes",[Number]),Object(i.g)("design:returntype",void 0)],t.prototype,"_selectedChange",null),Object(i.c)([Object(l.b)("value"),Object(i.g)("design:type",Function),Object(i.g)("design:paramtypes",[o.a]),Object(i.g)("design:returntype",void 0)],t.prototype,"_valueChange",null),t}(r.a)},598:function(e,t,n){"use strict";n.d(t,"a",(function(){return l}));var i=n(0),r=n(455),o=n(2),l=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return Object(i.d)(t,e),t.prototype._roundStyleObserver=function(e){"round"===e?this.updateStyles({"--border-radius":"100%"}):this.updateStyles({"--border-radius":"0"})},t.prototype.isImage=function(e){return this._isDefinedString(e.imageUrl)},t.prototype.isColor=function(e){return this._isDefinedString(e.color)&&!this._isDefinedString(e.imageUrl)},t.prototype.getContent=function(e){var t=[];return this.isImage(e)?t.push('background-image: url("'.concat(e.imageUrl,'")')):(t.push("background-color: ".concat(e.color)),t.push("color: ".concat(e.color)),t.push("border: #95989A 1px solid")),t.join(";")},t.prototype._isDefinedString=function(e){return null!=e&&e.length>0},Object(i.c)([Object(o.c)({notify:!0}),Object(i.g)("design:type",String)],t.prototype,"roundStyle",void 0),Object(i.c)([Object(o.b)("roundStyle"),Object(i.g)("design:type",Function),Object(i.g)("design:paramtypes",[String]),Object(i.g)("design:returntype",void 0)],t.prototype,"_roundStyleObserver",null),t}(r.a)},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    iron-selector {\n        display: inline-flex;\n        flex-direction: column;\n        flex-wrap: wrap;\n        align-items: flex-start;\n        margin-left: -12px;\n        margin-right: -12px;\n    }\n\n    .item {\n        display: inline-flex;\n        flex-direction: row;\n        padding: 12px;\n        outline: none;\n        align-items: flex-start;\n        position: relative;\n    }\n\n\n    .item-content {\n        width: 60px;\n        height: 60px;\n        background-position: center center;\n        background-repeat: no-repeat;\n        background-size: cover;\n        border-radius: var(--border-radius, 0);\n        margin: 3px;\n    }\n\n    .item-description {\n        width: 100%;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        padding-left: 10px;\n    }\n\n    .item-description .item-title {\n        text-align: left;\n        overflow: hidden;\n        word-break: break-word;\n        hyphens: manual;\n        @apply --au-body2-font;\n    }\n\n    .item-description .item-price {\n        @apply --au-caption-font;\n        color: #95989A;\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, 0);\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\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\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 class="item-price">{{_getItemPriceTitle(item)}}</span>\n                </span>\n            </div>\n        </template>\n    </dom-repeat>\n</iron-selector>\n'},919:function(e,t,n){"use strict";n.r(t),n.d(t,"AuImageListDetailed",(function(){return s})),n.d(t,"option",(function(){return s}));var i=n(0),r=n(881),o=n(598),l=n(2),s=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return Object(i.d)(t,e),Object(i.c)([Object(l.a)("au-option-image-list-detailed",r)],t)}(o.a)}}]);