@aurigma/ui-framework/dist/imports/es5/dynamic.au-widget-pim-option.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([[42],{875:function(t,e){t.exports='<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><symbol id="au-alert" viewBox="0 0 24 24" fill="none">\n<path d="M12 7.96036V11.9421M12 15.9337L12.0099 15.9227M20.0061 19.9055H3.99381C2.46281 19.9055 1.50477 18.2495 2.26793 16.9223L10.2741 2.99848C11.0396 1.66718 12.9604 1.66717 13.7259 2.99847L21.7321 16.9223C22.4952 18.2495 21.5372 19.9055 20.0061 19.9055Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>\n</symbol><symbol id="au-check" viewBox="0 0 10 8" fill="none">\n<path d="M1 4.6L3.4 7L9 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>\n</symbol><symbol id="au-chevron" viewBox="0 0 20 20" fill="none">\n<path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>\n</symbol><symbol id="au-uif-tooltip" viewBox="0 0 16 16" fill="none">\n<g clip-path="url(#clip0_1890_497)">\n<path d="M7.99992 14.6667C11.6819 14.6667 14.6666 11.682 14.6666 8.00004C14.6666 4.31804 11.6819 1.33337 7.99992 1.33337C4.31792 1.33337 1.33325 4.31804 1.33325 8.00004C1.33325 11.682 4.31792 14.6667 7.99992 14.6667Z" stroke="#757575" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>\n<path d="M6 6C6 3.66667 9.66667 3.66667 9.66667 6C9.66667 7.66667 8 7.33333 8 9.33333M8 12.0067L8.00667 11.9993" stroke="#757575" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>\n</g>\n\n</symbol></svg>'},876:function(t,e){t.exports='<style>\n    :host {\n        --paper-tooltip-background: var(--mdo-tooltip-background);\n        --paper-tooltip-text-color: var(--mdo-tooltip-text);\n        --paper-tooltip-opacity: 1;\n        color: #282828;\n    }\n\n    .svg-sprite__container > svg {display: none;}\n\n    eui-svg-icon {\n        margin: 0 auto;\n        padding: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        fill: none;\n        fill: currentColor;\n    }\n\n    #tooltip {\n        --paper-tooltip-duration-in: 0;\n        --paper-tooltip-delay-in: 0;\n    }\n\n    .mdo-header__tooltip {\n        position: relative;\n    }\n\n    .tooltip-triangle_bottom {\n        display: none;\n        position: absolute;\n        border-style: solid;\n        top: calc(100% - 2px);\n        border-width: 0 8px 8px 8px;\n        border-color: transparent transparent var(--mdo-tooltip-background) transparent;\n    }\n\n    .tooltip-triangle_top {\n        display: none;\n        position: absolute;\n        border-style: solid;\n        bottom: calc(100% - 2px);\n        border-width: 8px 8px 0 8px;\n        border-color: var(--mdo-tooltip-background) transparent transparent transparent;\n    }\n\n    .text {\n        font-family: var(--au-font-family);\n        font-style: normal;\n        font-weight: 400;\n        line-height: calc(1.25 * var(--au-hem));\n        font-size: calc(0.875 * var(--au-hem));\n        letter-spacing: calc(0.25 * var(--au-hem-letter-space));\n        text-transform: none;\n    }\n</style>\n\n<template is="dom-if" if="{{isVisible}}">\n    <div class="option__container" id="optionContainer" width="100%" height="100%"></div>\n\n    <div id="tooltipTriangle" class="tooltip-triangle_bottom"></div>\n    <paper-tooltip id="tooltip" for="tooltipIcon" position="bottom"\n        fit-to-visible-bounds="true" manual-mode="true" offset="6">\n        <span class="text">[[ tooltipText ]]</span>\n    </paper-tooltip>\n</template>\n\n\n'},916:function(t,e,o){o.r(e),o.d(e,"AuWidgetPimOption",function(){return c}),o.d(e,"widget",function(){return c});var n,r=o(0),i=o(1),a=o(17),e=o(160),s=o(2),l=o(875),o=o(876),c=(n=e.b,Object(r.d)(p,n),Object.defineProperty(p.prototype,"_",{get:function(){var t,e,o;if(this._params&&this._selected)return t={},e=this._params.option.id,o=this._isValuesArray(this._selected)?this._selected.map(function(t){return t.id}):[this._selected.id],t[e]=o,t},enumerable:!1,configurable:!0}),p.prototype.connectedCallback=function(){var o=this;n.prototype.connectedCallback.call(this),this._scrollSubscription=this.observe(a.a.CUSTOM_SCROLL).subscribe(function(t){var e;null!=(e=o.showDropdown)&&e.value&&o.showDropdown.next(!1)}),window.document.addEventListener("click",function(){var t;null!=(t=o.showTooltip)&&t.next(!1)},!0)},p.prototype.disconnectedCallback=function(){n.prototype.disconnectedCallback.call(this),this._scrollSubscription&&this._scrollSubscription.unsubscribe()},p.prototype.clearSelection=function(){this._selected=void 0},p.prototype.updateParams=function(t){},p.prototype.updateParamsAsync=function(e){return Object(r.b)(this,void 0,void 0,function(){return Object(r.e)(this,function(t){switch(t.label){case 0:return[4,n.prototype.updateParamsAsync.call(this,e)];case 1:return t.sent(),this._params&&this._optionIsInited?this._updateOptionParams(e):null!=e&&e.option&&this._initOptionWebComponent(e),null!=e&&e.onChange&&(this._onChange=i.a.functionWrapperConstructor(e.onChange)),i.a.isNotNullOrUndefined(e.active)&&(this.isActive=e.active),i.a.isNotNullOrUndefined(e.visible)&&(this.isVisible=e.visible),e.parentWidgetName&&(this._parentWidgetName=e.parentWidgetName),[2]}})})},p.prototype._updateOptionParams=function(t){this._params=t,this.tooltipText=null==(e=null==t?void 0:t.option)?void 0:e.tooltip;var e=Object.assign({},null==t?void 0:t.config),t=(this._setDefaultSettings(e),this._copyOptionWithReferences(null==t?void 0:t.option));this._element.config=e,this._element.option=t},p.prototype._initOptionWebComponent=function(i){return Object(r.b)(this,void 0,void 0,function(){var e,o,n;return Object(r.e)(this,function(t){switch(t.label){case 0:return(e=null==i?void 0:i.option).type=this._getAvailableOptionType(e),this._optionContainer=this.querySelectorShadow("#optionContainer"),[4,this.getScriptContent(e.type)];case 1:return o=t.sent(),(n=document.createElement("script")).innerHTML=o,this._optionContainer.appendChild(n),[4,this.getStyles(e.type)];case 2:return o=t.sent(),(n=document.createElement("style")).innerHTML=o,this._optionContainer.appendChild(n),"dropdown"===e.type&&o&&this._addOverlayStylesToDocumentHead(o),this._element=document.createElement("au-".concat(e.type)),this._updateOptionParams(i),this._optionContainer.appendChild(this._element),this._addListenersToElement(),this._optionIsInited=!0,[2]}})})},p.prototype._addListenersToElement=function(t){var e=this;void 0===t&&(t=this._element),this._element.addEventListener("changed",function(t){t=t.detail;e._selected=t,(e._element.option.selected=t)&&(e._onChange&&e._onChange(t),e.emitChange({selected:e._selected,parentWidgetName:e._parentWidgetName},!1,!0))}),this._element.addEventListener("toggleTooltip",function(t){e.showTooltip=null==t?void 0:t.detail,e._toggleTooltip()}),this._element.addEventListener("toggleDropdown",function(t){e.showDropdown=null==t?void 0:t.detail})},p.prototype._toggleTooltip=function(){var t,e,o,n=this.shadowRoot.querySelector(".mdo-header__tooltip");n&&(null!=n&&n.setAttribute("id","tooltipIcon"),e=this.getElementById("tooltip"),o=this.getElementById("tooltipTriangle"),null!=(t=null==n?void 0:n.parentNode)&&t.append(e),n.appendChild(o),null!=(t=this.showTooltip)&&t.value?(e.shadowRoot.getElementById("tooltip").style.borderRadius="4px",e.show(),n="auto"===e.style.top?"top":"bottom",o.className="top"==n?"tooltip-triangle_top":"tooltip-triangle_bottom",o.style.display="block"):(e.hide(),o.style.display="none"))},p.prototype._copyOptionWithReferences=function(t){var t=Object.assign({},t),e="checkbox"===t.type,o=t.selected.map(function(t){return t.id});return t.selected=e?t.values.filter(function(t){return o.includes(t.id)}):t.values.find(function(t){return t.id===o[0]}),t},p.prototype._isValuesArray=function(t){return Array.isArray(t)},p.prototype._addOverlayStylesToDocumentHead=function(t){var e=document.getElementsByTagName("head")[0],o=document.createElement("style");o.innerHTML=t,e.appendChild(o)},p.prototype.getStyles=function(o){return Object(r.b)(this,void 0,void 0,function(){var e;return Object(r.e)(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,i.a.loadHtml(i.a.getPatchedUrl("static/pim-options/".concat(o,"/style.html?t=")+Date.now()))];case 1:return e=t.sent(),[3,3];case 2:return t.sent(),console.error('Option type "'.concat(o,'" is not supported')),[3,3];case 3:return[2,e]}})})},p.prototype.getScriptContent=function(o){return Object(r.b)(this,void 0,void 0,function(){var e;return Object(r.e)(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,i.a.loadHtml(i.a.getPatchedUrl("static/pim-options/".concat(o,"/script.html?t=")+Date.now()))];case 1:return e=t.sent(),[3,3];case 2:return t.sent(),console.error('Option type "'.concat(o,'" is not supported')),[3,3];case 3:return[2,e]}})})},p.prototype._setDefaultSettings=function(t){return t.checkboxIcon=null!=t&&t.checkboxIcon?null==t?void 0:t.checkboxIcon:"au-check",t.chevronIcon=null!=t&&t.chevronIcon?null==t?void 0:t.chevronIcon:"au-chevron",t.iconSize=t.iconSize||20,t.tooltipIcon=null!=t&&t.tooltipIcon?null==t?void 0:t.tooltipIcon:"au-uif-tooltip",t.useCustomTooltip=!0,t},p.prototype._getAvailableOptionType=function(t){var e=t.type,o=t.isMultiSelect,t=this._getOldOptionType(e,t.subType);t&&(e=this._getAppropriateTypeFrom(t,o));return["radio","chips","dropdown","color-grid","color-list","color-picker","image-grid","image-list","image-picker","checkbox"].includes(e)?e:(console.warn('Option type "'.concat(e,'" is not supported.')),o?"checkbox":"radio")},p.prototype._getOldOptionType=function(t,e){var o=["radio","image","color","list","multilist","checkbox"].includes(t);return o&&e?(console.warn("Option type '".concat(t,"-").concat(e,"' is deprecated.")),"".concat(t,"-").concat(e)):o&&!e?"radio"===t?"radio-detailed":"checkbox"===t?"checkbox-compact":(console.warn("Option type '".concat(t,"' is deprecated.")),"".concat(t,"-compact")):null},p.prototype._getAppropriateTypeFrom=function(t,e){switch(t){case"radio-detailed":return"radio";case"radio-compact":return"chips";case"list-compact":case"list-detailed":return"dropdown";case"image-compact":case"color-compact":return"color-list";case"image-detailed":case"color-detailed":return"image-list";case"multilist-compact":case"multilist-detailed":case"checkbox-compact":case"checkbox-detailed":return"checkbox";default:return console.warn("Option type ".concat(t," is not supported")),e?"checkbox":"radio"}},Object(r.c)([Object(s.c)({notify:!0}),Object(r.g)("design:type",String)],p.prototype,"tooltipText",void 0),Object(r.c)([Object(s.c)(),Object(r.g)("design:type",Object),Object(r.g)("design:paramtypes",[])],p.prototype,"_",null),Object(r.c)([Object(s.a)("au-widget-pim-option","".concat(o,'<div class="svg-sprite__container">').concat(l,"</div>"))],p));function p(){var t=null!==n&&n.apply(this,arguments)||this;return t.isVisible=!0,t.isActive=!0,t._optionIsInited=!1,t}}}]);