@aurigma/ui-framework/dist/imports/es8/dynamic.au-widget-pim-option.eitc8cq1ck.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){"use strict";o.r(e),o.d(e,"AuWidgetPimOption",(function(){return c})),o.d(e,"widget",(function(){return c}));var n=o(0),i=o(1),s=o(17),l=o(160),a=o(2),r=o(875),p=o(876);let c=class extends l.b{constructor(){super(...arguments),this.isVisible=!0,this.isActive=!0,this._optionIsInited=!1}get _(){if(this._params&&this._selected){const t={},e=this._params.option.id,o=this._isValuesArray(this._selected)?this._selected.map((t=>t.id)):[this._selected.id];return t[e]=o,t}}connectedCallback(){super.connectedCallback(),this._scrollSubscription=this.observe(s.a.CUSTOM_SCROLL).subscribe((t=>{var e;(null===(e=this.showDropdown)||void 0===e?void 0:e.value)&&this.showDropdown.next(!1)})),window.document.addEventListener("click",(()=>{var t;null===(t=this.showTooltip)||void 0===t||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?void 0:t.option)&&this._initOptionWebComponent(t),(null==t?void 0:t.onChange)&&(this._onChange=i.a.functionWrapperConstructor(t.onChange)),i.a.isNotNullOrUndefined(t.active)&&(this.isActive=t.active),i.a.isNotNullOrUndefined(t.visible)&&(this.isVisible=t.visible),t.parentWidgetName&&(this._parentWidgetName=t.parentWidgetName)}_updateOptionParams(t){var e;this._params=t,this.tooltipText=null===(e=null==t?void 0:t.option)||void 0===e?void 0:e.tooltip;const o=Object.assign({},null==t?void 0:t.config);this._setDefaultSettings(o);const n=this._copyOptionWithReferences(null==t?void 0:t.option);this._element.config=o,this._element.option=n}async _initOptionWebComponent(t){const e=null==t?void 0:t.option;e.type=this._getAvailableOptionType(e),this._optionContainer=this.querySelectorShadow("#optionContainer");const o=await this.getScriptContent(e.type),n=document.createElement("script");n.innerHTML=o,this._optionContainer.appendChild(n);const i=await this.getStyles(e.type),s=document.createElement("style");s.innerHTML=i,this._optionContainer.appendChild(s),"dropdown"===e.type&&i&&this._addOverlayStylesToDocumentHead(i),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=>{const e=t.detail;this._selected=e,this._element.option.selected=e,e&&(this._onChange&&this._onChange(e),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;const o=this.shadowRoot.querySelector(".mdo-header__tooltip");if(!o)return;null==o||o.setAttribute("id","tooltipIcon");const n=this.getElementById("tooltip"),i=this.getElementById("tooltipTriangle");if(null===(t=null==o?void 0:o.parentNode)||void 0===t||t.append(n),o.appendChild(i),null===(e=this.showTooltip)||void 0===e?void 0:e.value){n.shadowRoot.getElementById("tooltip").style.borderRadius="4px",n.show();const t="auto"===n.style.top?"top":"bottom";i.className="top"===t?"tooltip-triangle_top":"tooltip-triangle_bottom",i.style.display="block"}else n.hide(),i.style.display="none"}_copyOptionWithReferences(t){const e=Object.assign({},t),o="checkbox"===e.type,n=e.selected.map((t=>t.id));return e.selected=o?e.values.filter((t=>n.includes(t.id))):e.values.find((t=>t.id===n[0])),e}_isValuesArray(t){return Array.isArray(t)}_addOverlayStylesToDocumentHead(t){const e=document.getElementsByTagName("head")[0],o=document.createElement("style");o.innerHTML=t,e.appendChild(o)}async getStyles(t){let e;try{e=await i.a.loadHtml(i.a.getPatchedUrl(`static/pim-options/${t}/style.html?t=`+Date.now()))}catch(o){console.error(`Option type "${t}" is not supported`)}return e}async getScriptContent(t){let e;try{e=await i.a.loadHtml(i.a.getPatchedUrl(`static/pim-options/${t}/script.html?t=`+Date.now()))}catch(o){console.error(`Option type "${t}" is not supported`)}return e}_setDefaultSettings(t){return t.checkboxIcon=(null==t?void 0:t.checkboxIcon)?null==t?void 0:t.checkboxIcon:"au-check",t.chevronIcon=(null==t?void 0:t.chevronIcon)?null==t?void 0:t.chevronIcon:"au-chevron",t.iconSize=t.iconSize?t.iconSize:20,t.tooltipIcon=(null==t?void 0:t.tooltipIcon)?null==t?void 0:t.tooltipIcon:"au-uif-tooltip",t.useCustomTooltip=!0,t}_getAvailableOptionType(t){let e=t.type;const o=t.subType,n=t.isMultiSelect,i=this._getOldOptionType(e,o);return i&&(e=this._getAppropriateTypeFrom(i,n)),["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.`),n?"checkbox":"radio")}_getOldOptionType(t,e){const 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(n.a)([Object(a.c)({notify:!0}),Object(n.b)("design:type",String)],c.prototype,"tooltipText",void 0),Object(n.a)([Object(a.c)(),Object(n.b)("design:type",Object),Object(n.b)("design:paramtypes",[])],c.prototype,"_",null),c=Object(n.a)([Object(a.a)("au-widget-pim-option",`${p}<div class="svg-sprite__container">${r}</div>`)],c)}}]);