@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
1 lines • 7.58 kB
JavaScript
(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[11],{423:function(e,t,n){n.d(t,"a",function(){return i});r.prototype.equals=function(e){return this.id===e.id&&this.title===e.title&&this.price===e.price},Object.defineProperty(r.prototype,"value",{get:function(){return this.optionValue},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"id",{get:function(){return this.optionValue.id},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"title",{get:function(){return null==this._title&&(this._title=this._getParsedTitle()),this._title},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"price",{get:function(){return this.optionValue.price},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"color",{get:function(){return this.optionValue.color},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"imageUrl",{get:function(){return this.optionValue.imageUrl},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"props",{get:function(){return this.optionValue.props},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"shownPrice",{get:function(){return this.optionValue.shownPrice},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"preselected",{get:function(){return this.optionValue.preselected},enumerable:!1,configurable:!0}),r.prototype._getParsedTitle=function(){try{return(new DOMParser).parseFromString(this.optionValue.title,"text/html").body.innerText}catch(e){}return this.optionValue.title};var i=r;function r(e,t){void 0===t&&(t=!1),this._title=null,this.optionValue=e,this.disabled=t}},431:function(e,t,n){n.d(t,"a",function(){return c});var r,i=n(0),t=n(2),o=n(1),l=n(448),a=n(423),c=(r=l.a,Object(i.d)(s,r),s.prototype.init=function(n){var i=this,e=(r.prototype.init.call(this,n),this._copySelection());this.items=n.values.map(function(e,t){return!o.a.isNullOrUndefined(e.id)&&-1!==e.id||(e.id=t),"image"!==n.type&&e.imageUrl&&(e.imageUrl=null),new a.a(e,e.disabled)}),o.a.isNotNullOrUndefined(e)&&this._restoreSelection(e),this.enableFilter=o.a.isNotNullOrUndefined(n.props)&&n.props.enableFilter||!1,n.onAvailableOptionValueChange&&n.onAvailableOptionValueChange.subscribe(function(e,t){return i.updateItemsAvailability(t)}),n.onOptionValueChange&&n.onOptionValueChange.subscribe(function(e,t){return i.updateSelectedValue(t)})},s.prototype._copySelection=function(){return o.a.isNotNullOrUndefined(this.value)?Object(i.a)({},this.value):void 0},s.prototype._restoreSelection=function(t){this.value=this.items.find(function(e){return e.equals(t)})},s.prototype._isArrayEqual=function(e,n){return e.length===n.length&&e.every(function(e,t){return e===n[t]})},s.prototype._getItemPriceTitle=function(e){function t(e){return e&&0!==e?" (+"+n.driver.cart.formatPrice(e)+")":""}var n=this,i=t(e.price);return null!=e.shownPrice&&(i=t(e.shownPrice*(this.driver.orders.current._priceMultiplier||1))),e.title+i},s.prototype._isOptionDisabled=function(e){return this.disabled||e},s.prototype.updateItemsAvailability=function(n){for(var i=this,r=this,e=0;e<this.items.length;e++)(t=>{var e=n.every(function(e){return e.id!==i.items[t].id});r.set("items.".concat(t,".disabled"),e)})(e)},s.prototype._disabledClass=function(e){return e?"item-disabled":""},Object(i.c)([Object(t.c)(),Object(i.g)("design:type",Array)],s.prototype,"items",void 0),Object(i.c)([Object(t.c)({notify:!0}),Object(i.g)("design:type",Boolean)],s.prototype,"enableFilter",void 0),s);function s(){return null!==r&&r.apply(this,arguments)||this}},461:function(e,t,n){n.d(t,"a",function(){return l});var i,t=n(0),r=n(431),o=n(423),n=n(2),l=(i=r.a,Object(t.d)(a,i),a.prototype.init=function(e){i.prototype.init.call(this,e),0!==this.items.length&&(e=(e=(e=this.items.find(function(e){return e.optionValue.preselected}))||this.items.find(function(e){return 0===e.price}))||this.items[0],this.value=e)},a.prototype._selectedChange=function(t){0<this.items.length&&(this.value=this.items.find(function(e){return e.id===t}))},a.prototype._valueChange=function(e){e&&0<this.items.length&&this._selectedId!==e.id&&(this._selectedId=e.id),this._onOptionChange()},a.prototype.updateSelectedValue=function(t){if(1<t.length)throw new Error("Multiple option value is not available");var e=t.length?this.items.find(function(e){return e.id===t[0].id}):null;(this.value&&!e||!this.value&&e||this.value&&e&&this.value.id!==e.id)&&(this.value=e)},Object(t.c)([Object(n.c)({notify:!0}),Object(t.g)("design:type",Number)],a.prototype,"_selectedId",void 0),Object(t.c)([Object(n.b)("_selectedId"),Object(t.g)("design:type",Function),Object(t.g)("design:paramtypes",[Number]),Object(t.g)("design:returntype",void 0)],a.prototype,"_selectedChange",null),Object(t.c)([Object(n.b)("value"),Object(t.g)("design:type",Function),Object(t.g)("design:paramtypes",[o.a]),Object(t.g)("design:returntype",void 0)],a.prototype,"_valueChange",null),a);function a(){return null!==i&&i.apply(this,arguments)||this}},878:function(e,t){e.exports='<style>\n :host {\n width: 100%;\n }\n\n iron-selector {\n display: inline-flex;\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n .item {\n align-items: center;\n position: relative;\n margin: 4px 12px 4px 0px;\n cursor: pointer;\n }\n\n .item-description {\n text-align: center;\n width: 60px;\n overflow: hidden;\n word-break: break-word;\n hyphens: manual;\n }\n\n .item-title {\n @apply --au-caption-font;\n }\n\n .item.iron-selected .item-title {\n color: var(--active-option-text-color, --theme-primary-color);\n }\n\n .item.iron-selected .item-selection-frame {\n border-color: var(--active-border-color, --theme-primary-color);\n border-radius: var(--border-radius);\n }\n\n .item-selection-frame {\n border: var(--theme-secondary-color) 2px solid;\n display: inline-block;\n padding: 8px;\n }\n\n .item-disabled {\n pointer-events: none;\n opacity: 0.4;\n }\n\n .item {\n background-color: var(--inactive-item-bg, --theme-background-color);\n border: var(--inactive-border-color, --theme-secondary-color) 2px solid;\n }\n .item>div>span {\n color: var(--inactive-option-text-color, black);\n }\n .item.iron-selected {\n background-color: var(--active-item-bg, --theme-background-color);\n border: var(--active-border-color, --theme-primary-color) 2px solid;\n }\n .item.iron-selected>div>span {\n color: var(--active-option-text-color, --theme-primary-color);\n }\n</style>\n\n<iron-selector name="option" class="radio-rect-item" 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 <span class="item-title">[[_getItemPriceTitle(item)]]</span>\n </div>\n </div>\n </template>\n </dom-repeat>\n</iron-selector>\n'},918:function(e,t,n){n.r(t),n.d(t,"AuRadioOptionCompact",function(){return l}),n.d(t,"option",function(){return l});var i,t=n(0),r=n(878),o=n(461),n=n(2),l=(i=o.a,Object(t.d)(a,i),Object(t.c)([Object(n.a)("au-option-radio-group-compact",r)],a));function a(){return null!==i&&i.apply(this,arguments)||this}}}]);