@aurigma/ui-framework/dist/imports/es5/dynamic.au-widget-pim-option.tw1ff5iwrs.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],{876: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>'},877: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'},915:function(t,e,o){"use strict";o.r(e),o.d(e,"AuWidgetPimOption",(function(){return p})),o.d(e,"widget",(function(){return p}));var n=o(0),i=o(1),r=o(17),a=o(160),s=o(2),l=o(876),c=o(877),p=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.isVisible=!0,e.isActive=!0,e._optionIsInited=!1,e}return Object(n.d)(e,t),Object.defineProperty(e.prototype,"_",{get:function(){if(this._params&&this._selected){var t={},e=this._params.option.id,o=this._isValuesArray(this._selected)?this._selected.map((function(t){return t.id})):[this._selected.id];return t[e]=o,t}},enumerable:!1,configurable:!0}),e.prototype.connectedCallback=function(){var e=this;t.prototype.connectedCallback.call(this),this._scrollSubscription=this.observe(r.a.CUSTOM_SCROLL).subscribe((function(t){var o;(null===(o=e.showDropdown)||void 0===o?void 0:o.value)&&e.showDropdown.next(!1)})),window.document.addEventListener("click",(function(){var t;null===(t=e.showTooltip)||void 0===t||t.next(!1)}),!0)},e.prototype.disconnectedCallback=function(){t.prototype.disconnectedCallback.call(this),this._scrollSubscription&&this._scrollSubscription.unsubscribe()},e.prototype.clearSelection=function(){this._selected=void 0},e.prototype.updateParams=function(t){},e.prototype.updateParamsAsync=function(e){return Object(n.b)(this,void 0,void 0,(function(){return Object(n.e)(this,(function(o){switch(o.label){case 0:return[4,t.prototype.updateParamsAsync.call(this,e)];case 1:return o.sent(),this._params&&this._optionIsInited?this._updateOptionParams(e):(null==e?void 0:e.option)&&this._initOptionWebComponent(e),(null==e?void 0: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]}}))}))},e.prototype._updateOptionParams=function(t){var e;this._params=t,this.tooltipText=null===(e=null==t?void 0:t.option)||void 0===e?void 0:e.tooltip;var o=Object.assign({},null==t?void 0:t.config);this._setDefaultSettings(o);var n=this._copyOptionWithReferences(null==t?void 0:t.option);this._element.config=o,this._element.option=n},e.prototype._initOptionWebComponent=function(t){return Object(n.b)(this,void 0,void 0,(function(){var e,o,i,r,a;return Object(n.e)(this,(function(n){switch(n.label){case 0:return(e=null==t?void 0:t.option).type=this._getAvailableOptionType(e),this._optionContainer=this.querySelectorShadow("#optionContainer"),[4,this.getScriptContent(e.type)];case 1:return o=n.sent(),(i=document.createElement("script")).innerHTML=o,this._optionContainer.appendChild(i),[4,this.getStyles(e.type)];case 2:return r=n.sent(),(a=document.createElement("style")).innerHTML=r,this._optionContainer.appendChild(a),"dropdown"===e.type&&r&&this._addOverlayStylesToDocumentHead(r),this._element=document.createElement("au-".concat(e.type)),this._updateOptionParams(t),this._optionContainer.appendChild(this._element),this._addListenersToElement(),this._optionIsInited=!0,[2]}}))}))},e.prototype._addListenersToElement=function(t){var e=this;void 0===t&&(t=this._element),this._element.addEventListener("changed",(function(t){var o=t.detail;e._selected=o,e._element.option.selected=o,o&&(e._onChange&&e._onChange(o),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}))},e.prototype._toggleTooltip=function(){var t,e,o=this.shadowRoot.querySelector(".mdo-header__tooltip");if(o){null==o||o.setAttribute("id","tooltipIcon");var 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();var r="auto"===n.style.top?"top":"bottom";i.className="top"===r?"tooltip-triangle_top":"tooltip-triangle_bottom",i.style.display="block"}else n.hide(),i.style.display="none"}},e.prototype._copyOptionWithReferences=function(t){var e=Object.assign({},t),o="checkbox"===e.type,n=e.selected.map((function(t){return t.id}));return e.selected=o?e.values.filter((function(t){return n.includes(t.id)})):e.values.find((function(t){return t.id===n[0]})),e},e.prototype._isValuesArray=function(t){return Array.isArray(t)},e.prototype._addOverlayStylesToDocumentHead=function(t){var e=document.getElementsByTagName("head")[0],o=document.createElement("style");o.innerHTML=t,e.appendChild(o)},e.prototype.getStyles=function(t){return Object(n.b)(this,void 0,void 0,(function(){var e;return Object(n.e)(this,(function(o){switch(o.label){case 0:return o.trys.push([0,2,,3]),[4,i.a.loadHtml(i.a.getPatchedUrl("static/pim-options/".concat(t,"/style.html?t=")+Date.now()))];case 1:return e=o.sent(),[3,3];case 2:return o.sent(),console.error('Option type "'.concat(t,'" is not supported')),[3,3];case 3:return[2,e]}}))}))},e.prototype.getScriptContent=function(t){return Object(n.b)(this,void 0,void 0,(function(){var e;return Object(n.e)(this,(function(o){switch(o.label){case 0:return o.trys.push([0,2,,3]),[4,i.a.loadHtml(i.a.getPatchedUrl("static/pim-options/".concat(t,"/script.html?t=")+Date.now()))];case 1:return e=o.sent(),[3,3];case 2:return o.sent(),console.error('Option type "'.concat(t,'" is not supported')),[3,3];case 3:return[2,e]}}))}))},e.prototype._setDefaultSettings=function(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},e.prototype._getAvailableOptionType=function(t){var e=t.type,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 "'.concat(e,'" is not supported.')),n?"checkbox":"radio")},e.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},e.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(n.c)([Object(s.c)({notify:!0}),Object(n.g)("design:type",String)],e.prototype,"tooltipText",void 0),Object(n.c)([Object(s.c)(),Object(n.g)("design:type",Object),Object(n.g)("design:paramtypes",[])],e.prototype,"_",null),Object(n.c)([Object(s.a)("au-widget-pim-option","".concat(c,'<div class="svg-sprite__container">').concat(l,"</div>"))],e)}(a.b)}}]);