@aurigma/ui-framework/dist/imports/es8/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(e,t){e.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(e,t){e.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(e,t,n){n.r(t),n.d(t,"AuWidgetItemList",function(){return m}),n.d(t,"widget",function(){return m});var t=n(0),a=n(854),i=n(160),c=n(2),r=n(855),o=n(20),l=n(1),o=class extends o.a{isSelected(e){return!0===e.value}openDropDown(e){l.a.isSafari()&&e.currentTarget.focus(),e.currentTarget.parentElement.querySelector(".item__action-list").classList.toggle("hidden")}closeDropDown(e){let t=e.currentTarget.parentElement.querySelector(".item__action-list");setTimeout(()=>{t.classList.toggle("hidden")},150)}changeSelection(t){var e=this.items.find(e=>e.name===t),n=(this.items=this.items.slice(),this.items.indexOf(e));this.set(`items.${n}.value`,!e.value)}removeItem(e){return e=>{e=(e.target.parentElement.classList.contains("item__value")?e.target.parentElement:e.target).querySelector(".item__selected-name");this.changeSelection(e.textContent)}}},s=(Object(t.a)([Object(c.c)({notify:!0}),Object(t.b)("design:type",Array)],o.prototype,"items",void 0),Object(t.a)([Object(c.c)({notify:!0}),Object(t.b)("design:type",String)],o.prototype,"image",void 0),Object(t.a)([Object(c.c)({notify:!0}),Object(t.b)("design:type",String)],o.prototype,"description",void 0),Object(t.a)([Object(c.a)("au-item-product",r)],o),n(259));let m=class extends i.c{updateParams(n){this.type=n.type||"product",this.defaultValue=n.defaultValue;let t=[];n.data&&this.defaultValue&&Object.keys(n.data).forEach(t=>Object.keys(n.defaultValue).forEach(e=>{n.data[t][e]=n.data[t][e]||n.defaultValue[e]})),this.data=n.data,n.data&&Object.keys(n.data).forEach(e=>t.push(n.data[e])),this.itemArray=t}addItem(e,t){let n=[];e={[e]:t};let a=Object(s.a)(this.data,e);this.defaultValue&&Object.keys(a).forEach(t=>Object.keys(this.defaultValue).forEach(e=>{a[t][e]=a[t][e]||this.defaultValue[e]})),(this.data=a)&&Object.keys(a).forEach(e=>n.push(a[e])),this.itemArray=n}clearData(){this.data={},this.itemArray=[]}};Object(t.a)([Object(c.c)(),Object(t.b)("design:type",Object)],m.prototype,"params",void 0),Object(t.a)([Object(c.c)(),Object(t.b)("design:type",String)],m.prototype,"type",void 0),Object(t.a)([Object(c.c)(),Object(t.b)("design:type",Object)],m.prototype,"data",void 0),Object(t.a)([Object(c.c)(),Object(t.b)("design:type",Array)],m.prototype,"itemArray",void 0),m=Object(t.a)([Object(c.a)("au-widget-item-list",a)],m)}}]);