@aurigma/ui-framework/dist/imports/es8/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 r}),o.d(e,"widget",function(){return r});var e=o(0),n=o(1),i=o(17),s=o(160),l=o(2),a=o(875),o=o(876);let r=class extends s.b{constructor(){super(...arguments),this.isVisible=!0,this.isActive=!0,this._optionIsInited=!1}get _(){var t,e,o;if(this._params&&this._selected)return t={},e=this._params.option.id,o=this._isValuesArray(this._selected)?this._selected.map(t=>t.id):[this._selected.id],t[e]=o,t}connectedCallback(){super.connectedCallback(),this._scrollSubscription=this.observe(i.a.CUSTOM_SCROLL).subscribe(t=>{var e;null!=(e=this.showDropdown)&&e.value&&this.showDropdown.next(!1)}),window.document.addEventListener("click",()=>{var t;null!=(t=this.showTooltip)&&t.next(!1)},!0)}disconnectedCallback(){super.disconnectedCallback(),this._scrollSubscription&&this._scrollSubscription.unsubscribe()}clearSelection(){this._selected=void 0}updateParams(t){}async updateParamsAsync(t){await super.updateParamsAsync(t),this._params&&this._optionIsInited?this._updateOptionParams(t):null!=t&&t.option&&this._initOptionWebComponent(t),null!=t&&t.onChange&&(this._onChange=n.a.functionWrapperConstructor(t.onChange)),n.a.isNotNullOrUndefined(t.active)&&(this.isActive=t.active),n.a.isNotNullOrUndefined(t.visible)&&(this.isVisible=t.visible),t.parentWidgetName&&(this._parentWidgetName=t.parentWidgetName)}_updateOptionParams(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}async _initOptionWebComponent(t){var e=null==t?void 0:t.option,o=(e.type=this._getAvailableOptionType(e),this._optionContainer=this.querySelectorShadow("#optionContainer"),await this.getScriptContent(e.type)),n=document.createElement("script"),o=(n.innerHTML=o,this._optionContainer.appendChild(n),await this.getStyles(e.type)),n=document.createElement("style");n.innerHTML=o,this._optionContainer.appendChild(n),"dropdown"===e.type&&o&&this._addOverlayStylesToDocumentHead(o),this._element=document.createElement("au-"+e.type),this._updateOptionParams(t),this._optionContainer.appendChild(this._element),this._addListenersToElement(),this._optionIsInited=!0}_addListenersToElement(t=this._element){this._element.addEventListener("changed",t=>{t=t.detail;this._selected=t,(this._element.option.selected=t)&&(this._onChange&&this._onChange(t),this.emitChange({selected:this._selected,parentWidgetName:this._parentWidgetName},!1,!0))}),this._element.addEventListener("toggleTooltip",t=>{this.showTooltip=null==t?void 0:t.detail,this._toggleTooltip()}),this._element.addEventListener("toggleDropdown",t=>{this.showDropdown=null==t?void 0:t.detail})}_toggleTooltip(){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"))}_copyOptionWithReferences(t){var t=Object.assign({},t),e="checkbox"===t.type;let o=t.selected.map(t=>t.id);return t.selected=e?t.values.filter(t=>o.includes(t.id)):t.values.find(t=>t.id===o[0]),t}_isValuesArray(t){return Array.isArray(t)}_addOverlayStylesToDocumentHead(t){var e=document.getElementsByTagName("head")[0],o=document.createElement("style");o.innerHTML=t,e.appendChild(o)}async getStyles(e){let t;try{t=await n.a.loadHtml(n.a.getPatchedUrl(`static/pim-options/${e}/style.html?t=`+Date.now()))}catch(t){console.error(`Option type "${e}" is not supported`)}return t}async getScriptContent(e){let t;try{t=await n.a.loadHtml(n.a.getPatchedUrl(`static/pim-options/${e}/script.html?t=`+Date.now()))}catch(t){console.error(`Option type "${e}" is not supported`)}return t}_setDefaultSettings(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}_getAvailableOptionType(t){let e=t.type;var 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 "${e}" is not supported.`),o?"checkbox":"radio")}_getOldOptionType(t,e){var o=["radio","image","color","list","multilist","checkbox"].includes(t);return o&&e?(console.warn(`Option type '${t}-${e}' is deprecated.`),t+"-"+e):o&&!e?"radio"===t?"radio-detailed":"checkbox"===t?"checkbox-compact":(console.warn(`Option type '${t}' is deprecated.`),t+"-compact"):null}_getAppropriateTypeFrom(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 ${t} is not supported`),e?"checkbox":"radio"}}};Object(e.a)([Object(l.c)({notify:!0}),Object(e.b)("design:type",String)],r.prototype,"tooltipText",void 0),Object(e.a)([Object(l.c)(),Object(e.b)("design:type",Object),Object(e.b)("design:paramtypes",[])],r.prototype,"_",null),r=Object(e.a)([Object(l.a)("au-widget-pim-option",o+`<div class="svg-sprite__container">${a}</div>`)],r)}}]);