/*
 * 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 u,html as g}from"lit";import k from"alwan";import v from"@typo3/core/event/regular-event.js";import y from"@typo3/core/document-service.js";var i=function(n,o,e,r){var a=arguments.length,t=a<3?o:r===null?r=Object.getOwnPropertyDescriptor(o,e):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(n,o,e,r);else for(var p=n.length-1;p>=0;p--)(l=n[p])&&(t=(a<3?l(t):a>3?l(o,e,t):l(o,e))||t);return a>3&&t&&Object.defineProperty(o,e,t),t};let c=class extends b{constructor(){super(...arguments),this.color="",this.opacity=!1,this.swatches=[]}static{this.styles=u`: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);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 o=this.getInputElement();if(!o||(!o.value&&this.color?o.value=this.color:this.color=o.value,o.disabled||o.readOnly))return;const e=new k(o,{position:"bottom-start",format:"hex",opacity:this.opacity,swatches:this.swatches,preset:!1,color:this.color,parent:this.closest("dialog")??""});e.on("open",()=>{o.focus()}),e.on("color",r=>{this.color=r.hex,o.value=this.color,o.dispatchEvent(new Event("blur"))}),["input","change"].forEach(r=>{new v(r,a=>{const t=a.target;this.color=t.value,e.setColor(this.color)}).bindTo(o)})}render(){return g`<slot></slot><span style=--color:${this.color} class=color-picker-preview><span class=color-picker-preview-color></span></span>`}getInputElement(){const o=this.slotEl.assignedNodes();for(const e of o)if(e instanceof HTMLInputElement)return e;return console.warn("No input element found in the slot."),null}};i([s({type:String})],c.prototype,"color",void 0),i([s({type:Boolean})],c.prototype,"opacity",void 0),i([s({type:Array})],c.prototype,"swatches",void 0),i([d("slot")],c.prototype,"slotEl",void 0),c=i([h("typo3-backend-color-picker")],c);class f{initialize(o,e={}){if(o.parentElement instanceof c)return;const r=document.createElement("typo3-backend-color-picker");r.swatches=e.swatches.map(a=>({color:a,label:a})),r.opacity=e.opacity??!1,o.parentNode.insertBefore(r,o),r.appendChild(o)}}var m=new f;export{c as Typo3BackendColorPicker,m as default};
