(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[21],{884:function(e,t){e.exports='<style>\n    .color-selector-wrapper {\n        display: -webkit-flex;\n        display: -moz-flex;\n        display: -ms-flexbox;\n        display: -ms-flex;\n        display: -o-flex;\n        display: flex;\n    }\n\n    .text {\n        padding-top: 12px;\n        padding-bottom: 12px;\n        @apply --au-body2-font;\n        color: var(--au-widget--color, --theme-text-color-1);\n        --au-hem: var(--au-widget--font-size);\n    }\n\n    .color-selector__label {\n        display: -webkit-flex;\n        display: -moz-flex;\n        display: -ms-flexbox;\n        display: -ms-flex;\n        display: -o-flex;\n        display: flex;\n\n        -webkit-align-items: center;\n\t    -ms-flex-align: center;\n        align-items: center;\n        cursor: pointer;\n        outline: none;\n        z-index: 2;\n    }\n\n    .color-selector__color {\n        display: -webkit-flex;\n        display: -moz-flex;\n        display: -ms-flexbox;\n        display: -ms-flex;\n        display: -o-flex;\n        display: flex;\n        width: 40px;\n        height: 40px;\n        margin-right: 12px;\n        border-radius: 50%;\n        box-shadow: inset 0 0 0 1px rgb(0 0 0 / 16%);\n        overflow: hidden;\n    }\n\n    .color-selector__color div {\n        width: 100%;\n        height: 100%;\n        z-index: -1;\n    }\n\n    .color-selector__text {\n        font-size: 14px;\n        font-weight: 500;\n        line-height: 20px;\n        text-transform: uppercase;\n    }\n\n    .color-selector__title {\n        font-family: var(--au-font-family);\n        font-style: normal;\n        font-weight: normal;\n        font-size: 12px;\n        line-height: 16px;\n        color: #333333;\n    }\n\n    .color-selector-palette__svg {\n        display: -webkit-flex;\n        display: -moz-flex;\n        display: -ms-flexbox;\n        display: -ms-flex;\n        display: -o-flex;\n        display: flex;\n\n\t    -webkit-align-items: center;\n\t    -ms-flex-align: center;\n        align-items: center;\n\n        justify-content: center;\n    }\n\n    color-selector-palette[hidden] {\n        display: none !important;\n    }\n\n</style>\n\n<div class="color-selector-wrapper">\n    <div tabindex="1" id="label" class="color-selector__label" onclick="{{toggleSelector}}">\n        <div id="color-selector__color" class="color-selector__color"></div>\n        <div>\n            <div class="color-selector__text">{{text}}</div>\n            <div class="color-selector__title">{{title}}</div>\n        </div>\n    </div>\n</div>\n\n<color-selector-palette hidden tabindex="1" id="palette" color="{{color}}" defaultColor="{{color}}"\n    colors="{{colors}}" title="{{popupText}}" svg="{{svg}}">\n</color-selector-palette>\n'},957:function(e,t,o){"use strict";o.r(t),o.d(t,"AuWidgetColorSelector",function(){return u}),o.d(t,"widget",function(){return u});var l=o(0),i=o(884),r=o(160),n=o(1),s=o(2),c=o(47);const a=(e,t)=>{const o=document.createElement("div");o.classList.add("color-selector-palette__color","color-selector-palette__svg"),o.innerHTML=t;const l=o.querySelector("svg");return p(l),h(e)?(2===e.length&&(o.style.backgroundColor=e[1]),l.style.color=e[0]):g(e)&&(l.style.color=e),o},d=e=>{const t=document.createDocumentFragment(),o=h(e)?e:[e];for(const e of o){const o=document.createElement("div");o.style.backgroundColor=e,t.appendChild(o)}return t},p=e=>{const t=e.children;for(const e of t)e.getAttribute("fill")&&e.setAttribute("fill","currentColor"),e.getAttribute("stroke")&&e.setAttribute("stroke","currentColor");return e},h=e=>Array.isArray(e),g=e=>"string"==typeof e;let b=class extends c.a{constructor(){super(...arguments),this.name="World",this.defaultColor="#ffffff",this.handleChange=(e=>{this.color=e;const t=new CustomEvent("change-color",{detail:this.color});this.dispatchEvent(t)}),this.handleCloseButtonClick=(()=>{const e=new CustomEvent("close-selector");this.dispatchEvent(e)}),this.createPalette=((e,t)=>t?a(e,t):d(e))}static get styles(){return c["b"]`
            :host {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 20px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: 510; // with stock
            }
            .color-selector-palette__fade {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
            }
            .color-selector-palette__wrapper {
                max-height: 100%;
                overflow: auto;
                position: relative;
                background-color: #fff;
                box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 8px 40px rgba(0, 0, 0, 0.2);
            }
            .color-selector-palette__block {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 80px;
                cursor: pointer;
            }
            .color-selector-palette__figure {
                width: 40px;
                height: 40px;
                margin-bottom: 4px;
                z-index: 2;
            }
            .color-selector-palette__radio {
                display: flex;
                padding: 0;
                width: 100%;
                height: 100%;
                box-shadow: inset 0 0 0 1px rgb(0 0 0 / 16%);
                border-radius: 50%;
                overflow: hidden;
            }
            .color-selector-palette__radio div {
                width: 100%;
                height: 100%;
                z-index: -1;
            }
            .color-selector-palette__color {
                width: 100%;
                height: 100%;
            }
            .color-selector-palette__svg {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .color-selector-palette__title {
                margin: 0;
                font-size: 12px;
                line-height: 16px;
                text-align: center;
            }
            .color-selector-palette__close {
                background-color: transparent;
                border: 0;
                margin-left: 20px;
                padding: 0;
                cursor: pointer;
            }
            .color-selector-palette__close svg {
                display: block;
                width: 24px;
                height: 24px;
            }
            .color-selector-palette__top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16px 20px;
            }
            .color-selector-palette__popup-text {
                margin: 0;
                font-size: 14px;
                font-weight: 500;
                text-transform: uppercase;
                line-height: 20px;
            }
            .color-selector-palette__content {
                display: grid;
                grid-template-columns: repeat(var(--number-columns-palette), 80px);
                justify-content: start;
                grid-gap: 8px;
                padding: 20px;
            }
            @media (max-width: 769px) {
                :host {
                    position: fixed;
                    padding: 0;
                }
                .color-selector-palette__wrapper {
                    width: 100%;
                    max-width: 489px;
                }
                .color-selector-palette__content {
                    display: flex;
                    flex-direction: column;
                    grid-gap: 0;
                    padding: 16px 20px;
                }
                .color-selector-palette__block {
                    flex-direction: row;
                    width: auto;
                }
                .color-selector-palette__block + .color-selector-palette__block {
                    margin-top: 8px;
                }
                .color-selector-palette__figure {
                    margin-bottom: 0;
                    margin-right: 12px;
                }
                .color-selector-palette__title {
                    font-size: 14px;
                    line-height: 20px;
                }
            }
        `}render(){return c["d"]`
            <div class="color-selector-palette__fade" @click="${()=>this.handleCloseButtonClick()}"></div>
            <div class="color-selector-palette__wrapper">
                <div class="color-selector-palette__top">
                    <h3 class="color-selector-palette__popup-text">${this.title}</h3>
                    <button class="color-selector-palette__close" type="button" @click="${()=>this.handleCloseButtonClick()}">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18 6L6 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M6 6L18 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                </div>
                <div class="color-selector-palette__content">
                    ${this.colors.map(e=>c["d"]` <div class="color-selector-palette__block" @click="${()=>this.handleChange(e)}">
                            <div class="color-selector-palette__figure">
                                <div class="color-selector-palette__radio">${this.createPalette(e.value,this.svg)}</div>
                            </div>
                            <p class="color-selector-palette__title">${e.title}</p>
                        </div>`)}
                </div>
            </div>
        `}};Object(l.a)([Object(c.e)(),Object(l.b)("design:type",String)],b.prototype,"name",void 0),Object(l.a)([Object(c.e)(),Object(l.b)("design:type",String)],b.prototype,"defaultColor",void 0),Object(l.a)([Object(c.e)(),Object(l.b)("design:type",Array)],b.prototype,"colors",void 0),Object(l.a)([Object(c.e)(),Object(l.b)("design:type",Object)],b.prototype,"color",void 0),Object(l.a)([Object(c.e)(),Object(l.b)("design:type",String)],b.prototype,"svg",void 0),Object(l.a)([Object(c.e)(),Object(l.b)("design:type",String)],b.prototype,"title",void 0),b=Object(l.a)([Object(c.c)("color-selector-palette")],b);let u=class extends r.b{constructor(){super(...arguments),this.colors=[],this._hiddenColor=!0,this._isRestoring=!1}colorChanged(){this._isRestoring||this.emitChange({value:this.color})}get _(){return this.color}get hiddenColor(){return this._hiddenColor}set hiddenColor(e){this._hiddenColor=e;const t=n.a.getWizardElement(),o=this.$.palette;this.hiddenColor?(o.setAttribute("hidden","hidden"),t.querySelectorShadow(o.tagName)&&t.shadowRoot.removeChild(o)):(o.removeAttribute("hidden"),t.shadowRoot.appendChild(o))}clearSelection(){this.color=!1}connectedCallback(){super.connectedCallback(),this.toggleSelector=this.toggleSelector.bind(this),this.initEvents()}updateParams(e){this.text=e.text,this.colors=e.colors,this.popupText=e.popupText,this.svg=e.svg;const t=this.colors.find(e=>e.preselected);this.defaultColor=t||this.colors[0],this.color=this.defaultColor,this.color&&(this.value=this.color.value,this.title=this.color.title,this.createPalette(this.value,this.svg)),e.onChange&&(this._onChange=n.a.functionWrapperConstructor(e.onChange))}async exportWidgetData(e){return{color:this.color}}async restoreWidgetFromData(e,t){e&&e.color&&this.value!==e.color.value&&(this._isRestoring=!0,this.color=e.color,this.value=this.color.value,this.title=this.color.title,this.createPalette(this.value,this.svg)),this._isRestoring=!1}initEvents(){this.$.palette.addEventListener("change-color",e=>this.changeColor(e.detail)),this.$.palette.addEventListener("close-selector",()=>this.closeSelector())}toggleSelector(){this.hiddenColor=!this.hiddenColor}closeSelector(){this.hiddenColor=!0}changeColor(e){this.color=e,this.value=this.color.value,this.title=this.color.title,this.createPalette(this.value,this.svg),this.closeSelector(),this._onChange&&this._onChange(this.value)}createPalette(e,t){const o=this.$["color-selector__color"];o.innerHTML="",t?o.appendChild(a(e,t)):o.appendChild(d(e))}};Object(l.a)([Object(s.c)(),Object(l.b)("design:type",Object)],u.prototype,"params",void 0),Object(l.a)([Object(s.c)(),Object(l.b)("design:type",String)],u.prototype,"text",void 0),Object(l.a)([Object(s.c)(),Object(l.b)("design:type",String)],u.prototype,"title",void 0),Object(l.a)([Object(s.c)(),Object(l.b)("design:type",Array)],u.prototype,"colors",void 0),Object(l.a)([Object(s.c)(),Object(l.b)("design:type",String)],u.prototype,"popupText",void 0),Object(l.a)([Object(s.c)(),Object(l.b)("design:type",String)],u.prototype,"svg",void 0),Object(l.a)([Object(s.c)(),Object(l.b)("design:type",Object)],u.prototype,"color",void 0),Object(l.a)([Object(s.b)("color"),Object(l.b)("design:type",Function),Object(l.b)("design:paramtypes",[]),Object(l.b)("design:returntype",void 0)],u.prototype,"colorChanged",null),u=Object(l.a)([Object(s.a)("au-widget-color-selector",i)],u)}}]);