@aurigma/ui-framework/dist/imports/es5/dynamic.au-widget-item-list.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([[35],{854:function(t,e){t.exports='<style>\n    .product {\n        border-bottom: 1px solid #E0E0E0;\n    }\n\n    .product:last-child {\n        border-bottom: 1px solid transparent;\n    }\n</style>\n<div class="item-list">\n    <template is="dom-repeat" items="[[itemArray]]" as="product" observe="product" id="test">\n        <div class="product">\n            <au-item-product image="[[product.thumbnail]]" description="{{product.description}}"\n                items="[[product.items]]"></au-item-product>\n        </div>\n    </template>\n</div>'},855:function(t,e){t.exports='<style>\n    .item {\n        display: flex;\n        padding: calc(var(--au-hem)*0.75) 0;\n    }\n\n    .item__image-container {\n        width: calc(var(--au-hem)*3.75);\n        height: calc(var(--au-hem)*3.75);\n        text-align: center;\n    }\n\n    .item__image {\n        display: inline-block;\n        width: calc(var(--au-hem)*3.75);\n        max-height: calc(var(--au-hem)*3.75);\n    }\n\n    .item__info {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        margin-left: calc(var(--au-hem)*1);\n        width: calc(100% - var(--au-hem) * 1);\n    }\n\n    .item__description {\n        font-family: var(--au-font-family);\n        font-style: normal;\n        font-weight: normal;\n        line-height: calc(var(--au-hem)*1.125);\n        font-size: calc(var(--au-hem)*0.875);\n        letter-spacing: calc(var(--au-hem)*0.015625);\n        color: #333333;\n    }\n\n    .item__action {\n        position: relative;\n        margin: calc(var(--au-hem)*0.5) calc(var(--au-hem)*0.5) calc(var(--au-hem)*0.5) 0;\n    }\n\n    .item__selected-item {\n\n\n        opacity: 0.8;\n\n        background: #F2F4F6;\n        border-radius: calc(var(--au-hem)*0.125);\n\n        padding: calc(var(--au-hem)*0.125) calc(var(--au-hem)*0.25);\n        margin-right: calc(var(--au-hem)*0.5);\n        margin-top: calc(var(--au-hem)*0.5);\n    }\n\n    .item__selected-item .item__selected-name {\n        font-family: var(--au-font-family);\n        font-style: normal;\n        font-weight: normal;\n        line-height: calc(var(--au-hem)*0.875);\n        font-size: calc(var(--au-hem)*0.75);\n        letter-spacing: calc(var(--au-hem)*0.015625);\n\n        color: #000000;\n\n        margin-right: calc(var(--au-hem)*0.25);\n    }\n\n    .item__remove-item {\n        border: none;\n        background: transparent;\n    }\n\n    .item__selected-group {\n        display: flex;\n        flex-wrap: wrap;\n    }\n\n    .hidden {\n        display: none !important;\n    }\n\n    .item__action-list {\n        position: absolute;\n        top: 0;\n        left: 0;\n        background: #fff;\n        z-index: 1;\n        width: 100%;\n\n        display: flex;\n        flex-direction: column;\n        padding: calc(var(--au-hem)*0.5);\n        box-shadow: 0px calc(var(--au-hem)*0.25) calc(var(--au-hem)*0.75) rgba(0, 0, 0, 0.25);\n    }\n\n    .item__action-list .item__value {\n        font-family: var(--au-font-family);\n        font-style: normal;\n        font-weight: 500;\n        line-height: calc(var(--au-hem)*1);\n        font-size: calc(var(--au-hem)*0.875);\n        letter-spacing: calc(var(--au-hem)*0.015625);\n        color: var(--theme-primary-color);\n\n        cursor: pointer;\n        padding: calc(var(--au-hem)*0.5);\n    }\n\n    .item__action-list .item__value:hover {\n        background-color: #F5F7F9;\n        padding: calc(var(--au-hem)*0.5);\n    }\n\n    .item__dropdown {\n        background: transparent;\n        border: none;\n\n        font-family: var(--au-font-family);\n        font-style: normal;\n        font-weight: 500;\n        line-height: calc(var(--au-hem)*1);\n        font-size: calc(var(--au-hem)*0.875);\n        letter-spacing: calc(var(--au-hem)*0.015625);\n        color: var(--theme-primary-color);\n    }\n</style>\n<div class="item">\n    <div class="item__image-container">\n        <img class="item__image" src="[[image]]">\n    </div>\n    <div class="item__info">\n        <div class="item__description">[[description]]</div>\n        <div class="item__action">\n            <button class="item__dropdown" onblur="{{closeDropDown}}" onclick="{{openDropDown}}">+ Additional\n                Material</button>\n\n            <div class="item__action-list hidden">\n                <template is="dom-repeat" items="[[items]]" as="option">\n                    <div class="item__value" onclick="{{removeItem()}}">\n                        <paper-checkbox noink type="value" checked="[[option.value]]"></paper-checkbox>\n                        <span class="item__selected-name">[[option.name]]</span>\n                    </div>\n                </template>\n            </div>\n        </div>\n        <div class="item__selected-group">\n            <template is="dom-repeat" items="[[items]]" as="option" filter="isSelected" observe="value">\n                <div class="item__value item__selected-item">\n                    <span class="item__selected-name">[[option.name]]</span>\n                    <button class="item__remove-item" onclick="{{removeItem()}}">\n                        x\n                    </button>\n                </div>\n            </template>\n        </div>\n    </div>\n</div>'},936:function(t,e,n){n.r(e),n.d(e,"AuWidgetItemList",function(){return p}),n.d(e,"widget",function(){return p});var a,e=n(0),i=n(854),c=n(160),o=n(2),r=n(855),l=n(20),s=n(1);a=l.a,Object(e.d)(m,a),m.prototype.isSelected=function(t){return!0===t.value},m.prototype.openDropDown=function(t){s.a.isSafari()&&t.currentTarget.focus(),t.currentTarget.parentElement.querySelector(".item__action-list").classList.toggle("hidden")},m.prototype.closeDropDown=function(t){var e=t.currentTarget.parentElement.querySelector(".item__action-list");setTimeout(function(){e.classList.toggle("hidden")},150)},m.prototype.changeSelection=function(e){var t=this.items.find(function(t){return t.name===e}),n=(this.items=this.items.slice(),this.items.indexOf(t));this.set("items.".concat(n,".value"),!t.value)},m.prototype.removeItem=function(t){var e=this;return function(t){t=(t.target.parentElement.classList.contains("item__value")?t.target.parentElement:t.target).querySelector(".item__selected-name");e.changeSelection(t.textContent)}},Object(e.c)([Object(o.c)({notify:!0}),Object(e.g)("design:type",Array)],m.prototype,"items",void 0),Object(e.c)([Object(o.c)({notify:!0}),Object(e.g)("design:type",String)],m.prototype,"image",void 0),Object(e.c)([Object(o.c)({notify:!0}),Object(e.g)("design:type",String)],m.prototype,"description",void 0),Object(e.c)([Object(o.a)("au-item-product",r)],m);function m(){return null!==a&&a.apply(this,arguments)||this}var d,u=n(259),p=(d=c.c,Object(e.d)(h,d),h.prototype.updateParams=function(n){this.type=n.type||"product",this.defaultValue=n.defaultValue;var e=[];n.data&&this.defaultValue&&Object.keys(n.data).forEach(function(e){return Object.keys(n.defaultValue).forEach(function(t){n.data[e][t]=n.data[e][t]||n.defaultValue[t]})}),this.data=n.data,n.data&&Object.keys(n.data).forEach(function(t){return e.push(n.data[t])}),this.itemArray=e},h.prototype.addItem=function(t,e){var n,a=this,i=[],t=((n={})[t]=e,n),c=Object(u.a)(this.data,t);this.defaultValue&&Object.keys(c).forEach(function(e){return Object.keys(a.defaultValue).forEach(function(t){c[e][t]=c[e][t]||a.defaultValue[t]})}),(this.data=c)&&Object.keys(c).forEach(function(t){return i.push(c[t])}),this.itemArray=i},h.prototype.clearData=function(){this.data={},this.itemArray=[]},Object(e.c)([Object(o.c)(),Object(e.g)("design:type",Object)],h.prototype,"params",void 0),Object(e.c)([Object(o.c)(),Object(e.g)("design:type",String)],h.prototype,"type",void 0),Object(e.c)([Object(o.c)(),Object(e.g)("design:type",Object)],h.prototype,"data",void 0),Object(e.c)([Object(o.c)(),Object(e.g)("design:type",Array)],h.prototype,"itemArray",void 0),Object(e.c)([Object(o.a)("au-widget-item-list",i)],h));function h(){return null!==d&&d.apply(this,arguments)||this}}}]);