/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */
import{property as s,query as d,customElement as h}from"lit/decorators.js";import{LitElement as b,css as g,html as u}from"lit";import k from"alwan";import v from"@typo3/core/event/regular-event.js";import y from"@typo3/core/document-service.js";var n=function(i,e,o,r){var c=arguments.length,t=c<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,o):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(i,e,o,r);else for(var p=i.length-1;p>=0;p--)(l=i[p])&&(t=(c<3?l(t):c>3?l(e,o,t):l(e,o))||t);return c>3&&t&&Object.defineProperty(e,o,t),t};let a=class extends b{constructor(){super(...arguments),this.color="",this.opacity=!1,this.swatches=""}static{this.styles=g`:host{display:inline-block;position:relative}.color-picker-preview{--typo3-colorpicker-preview-width:1.25rem;--typo3-colorpicker-preview-height:1.25rem;--typo3-bg-checkerboard-pattern-size:calc(var(--typo3-colorpicker-preview-width)/2);--typo3-bg-checkerboard-background-color:light-dark(var(--token-color-neutral-10),var(--token-color-neutral-85));--typo3-bg-checkerboard-background-image-color:light-dark(var(--token-color-neutral-0),var(--token-color-neutral-90));display:block;position:absolute;width:var(--typo3-colorpicker-preview-width);height:var(--typo3-colorpicker-preview-height);top:50%;inset-inline-start:var(--typo3-input-sm-padding-x);z-index:1;transform:translateY(-50%);background:var(--typo3-bg-checkerboard-background-color);background-image:linear-gradient(45deg,var(--typo3-bg-checkerboard-background-image-color) 25%,transparent 25%),linear-gradient(135deg,var(--typo3-bg-checkerboard-background-image-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--typo3-bg-checkerboard-background-image-color) 75%),linear-gradient(135deg,transparent 75%,var(--typo3-bg-checkerboard-background-image-color) 75%);background-position:0 0,calc(var(--typo3-bg-checkerboard-pattern-size)/2) 0,calc(var(--typo3-bg-checkerboard-pattern-size)/2) calc(var(--typo3-bg-checkerboard-pattern-size)/2*-1),0 calc(var(--typo3-bg-checkerboard-pattern-size)/2);background-size:var(--typo3-bg-checkerboard-pattern-size) var(--typo3-bg-checkerboard-pattern-size);background-clip:padding-box;border-radius:var(--typo3-component-border-radius);pointer-events:none}.color-picker-preview-color{position:absolute;inset:0;border-radius:2px;background-color:var(--color,transparent)}`}async firstUpdated(){await y.ready();const e=this.getInputElement();if(e){if(!e.value&&this.color?e.value=this.color:this.color=e.value,e.disabled||e.readOnly)return;const o=new k(e,{position:"bottom-start",format:"hex",opacity:this.opacity,swatches:this.swatches?this.swatches.split(";"):[],preset:!1,color:this.color});o.on("color",r=>{this.color=r.hex,e.value=this.color,e.dispatchEvent(new Event("blur"))}),["input","change"].forEach(r=>{new v(r,c=>{const t=c.target;this.color=t.value,o.setColor(this.color)}).bindTo(e)})}}render(){return u`<slot></slot><span style=--color:${this.color} class=color-picker-preview><span class=color-picker-preview-color></span></span>`}getInputElement(){const e=this.slotEl.assignedNodes();for(const o of e)if(o instanceof HTMLInputElement)return o;return console.warn("No input element found in the slot."),null}};n([s({type:String})],a.prototype,"color",void 0),n([s({type:Boolean})],a.prototype,"opacity",void 0),n([s({type:String})],a.prototype,"swatches",void 0),n([d("slot")],a.prototype,"slotEl",void 0),a=n([h("typo3-backend-color-picker")],a);class f{initialize(e,o={}){if(e.parentElement instanceof a)return;const r=document.createElement("typo3-backend-color-picker");r.swatches=o.swatches?.join(";")??"",r.opacity=o.opacity??!1,e.parentNode.insertBefore(r,e),r.appendChild(e)}}var m=new f;export{a as Typo3BackendColorPicker,m as default};
