import{LitElement as e,html as t,css as r}from"../../../lit/index.js";import{HAXStore as i}from"./hax-store.js";import{haxElementToNode as a}from"../../utils/utils.js";import{IntersectionObserverMixin as s}from"../../intersection-element/lib/IntersectionObserverMixin.js";export class HaxElementDemo extends(s(e)){static get tag(){return"hax-element-demo"}constructor(){super(),this.renderTag=null,this.activePickerSchema=-1}static get properties(){return{...super.properties,renderTag:{type:String,attribute:"render-tag"},activePickerSchema:{type:Number,attribute:"active-picker-schema"}}}static get styles(){return[r`
        :host {
          display: block;
          overflow: hidden;
          height: 150px;
          width: 150px;
        }
        div ::slotted(*) {
          transform: scale(0.4) translate(-75%, -75%);
          width: 500px;
          max-height: 300px;
        }
      `]}render(){return t` <div class="wrap">
      <slot></slot>
    </div>`}updated(e){super.updated&&super.updated(e),e.forEach(((e,t)=>{if("renderTag"===t&&this[t]){this.innerHTML="";let e=i.haxSchemaFromTag(this[t]);var r;r=-1!==this.activePickerSchema&&globalThis.document.querySelector("hax-picker")&&globalThis.document.querySelector("hax-picker")._elements&&globalThis.document.querySelector("hax-picker")._elements.length>0?a(globalThis.document.querySelector("hax-picker")._elements[this.activePickerSchema]):e.gizmo.tag&&e.demoSchema&&e.demoSchema[0]?a(e.demoSchema[0]):globalThis.document.createElement(this[t]),this.appendChild(r)}}))}}customElements.define(HaxElementDemo.tag,HaxElementDemo);