import{css as t}from"../../../lit/index.js";import{normalizeEventPath as e}from"../../utils/utils.js";import{SchemaBehaviors as a}from"../../schema-behaviors/schema-behaviors.js";import"../../absolute-position-behavior/absolute-position-behavior.js";export const HaxLayoutBehaviors=function(o){return class extends(a(o)){static get styles(){return[...super.styles||[],t`
          :host {
            display: block;
            --hax-layout-slotted-active-outline-color: var(
              --hax-contextual-action-hover-color
            );
          }
          :host([ready]) [data-layout-slotname] {
            transition: var(
              --hax-layout-container-transition,
              0.5s width ease-in-out,
              0.5s padding ease-in-out,
              0.5s margin ease-in-out
            );
          }
          /** this implies hax editing state is available **/
          :host([data-hax-ray]) ::slotted(*) {
            outline: var(--hax-layout-slotted-outline-width, 0px)
              var(--hax-layout-slotted-outline-style, solid)
              var(
                --hax-layout-slotted-outline-color,
                var(--hax-layout-slotted-faded-color, #eeeeee)
              );
            outline-offset: var(--hax-layout-slotted-outline-offset, 0px);
          }
          :host([data-hax-ray])
            ::slotted([contenteditable][data-hax-ray]:empty)::before {
            content: attr(data-hax-ray);
            opacity: 0.2;
            transition: 0.3s all ease-in-out;
          }
          :host([data-hax-ray]) ::slotted(*:hover) {
            outline: var(--hax-layout-slotted-hover-outline-width, 0px)
              var(--hax-layout-slotted-hover-outline-style, solid)
              var(
                --hax-layout-slotted-hover-outline-color,
                var(--hax-layout-accent-color, #009dc7)
              );
          }
          :host([data-hax-ray]) ::slotted([data-hax-active]) {
            outline: var(--hax-layout-slotted-active-outline-width, 1px)
              var(--hax-layout-slotted-active-outline-style, solid)
              var(
                --hax-layout-slotted-active-outline-color,
                var(--hax-layout-slotted-faded-color, #eeeeee)
              );
          }
          :host([data-hax-ray]) [data-layout-slotname] {
            outline: var(--hax-layout-container-outline-width, 0px)
              var(--hax-layout-container-outline-style, solid)
              var(
                --hax-layout-container-outline-color,
                var(--hax-layout-slotted-faded-color, #eeeeee)
              );
            outline-offset: var(--hax-layout-container-outline-offset, 2px);
          }
          :host([data-hax-ray]) [data-layout-slotname]:hover {
            outline: var(--hax-layout-container-hover-outline-width, 0px)
              var(--hax-layout-container-hover-outline-style, solid)
              var(
                --hax-layout-container-hover-outline-color,
                var(--hax-layout-slotted-faded-color, #eeeeee)
              );
          }
          :host([data-hax-ray]) ::slotted(*.hax-hovered)::before {
            outline: var(--hax-layout-slotted-active-outline-width, 1px)
              var(--hax-layout-slotted-active-outline-style, solid)
              var(
                --hax-layout-slotted-active-outline-color,
                var(--hax-layout-slotted-faded-color, #eeeeee)
              );
            background-color: inherit;
            content: " ";
            width: 100%;
            display: block;
            position: relative;
            margin: -10px 0 0 0;
            z-index: 2;
            height: 10px;
          }
          :host([data-hax-ray]) ::slotted(img.hax-hovered),
          :host([data-hax-ray]) ::slotted(*.hax-hovered)::before {
            background-color: var(
              --hax-layout-slotted-active-outline-color,
              var(--hax-layout-accent-color, #009dc7)
            ) !important;
            outline: var(--hax-layout-slotted-active-outline-width, 1px)
              var(--hax-layout-slotted-active-outline-style, solid)
              var(
                --hax-layout-slotted-active-outline-color,
                var(--hax-layout-accent-color, #009dc7)
              );
          }

          @media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio:0) {
            :host([data-hax-ray]) ::slotted(*.hax-hovered) {
              background-color: var(
                --hax-layout-slotted-active-outline-color,
                var(--hax-layout-accent-color, #009dc7)
              ) !important;
              outline: var(--hax-layout-slotted-active-outline-width, 1px)
                var(--hax-layout-slotted-active-outline-style, solid)
                var(
                  --hax-layout-slotted-active-outline-color,
                  var(--hax-layout-accent-color, #009dc7)
                );
            }
          }
        `]}constructor(){super(),this.ready=!1,this.haxLayoutContainer=!0}firstUpdated(t){super.firstUpdated&&super.firstUpdated(t),setTimeout((()=>{this.ready=!0}),100)}updated(t){super.updated&&super.updated(t),t.forEach(((t,e)=>{if("dataHaxRay"===e&&this.shadowRoot)if(this[e]){this.addEventListener("drop",this._dropEvent.bind(this));let t=[...this.shadowRoot.querySelectorAll("drag-enabled")],e=[...this.shadowRoot.querySelectorAll("slot")];t.forEach((t=>{t.addEventListener("dragenter",this._dragEnter.bind(this)),t.addEventListener("dragleave",this._dragLeave.bind(this))})),e.forEach((t=>t.addEventListener("slotchange",this._slotMonitor.bind(this)))),this.observer=new MutationObserver((t=>{this.__sorting||(t.forEach((t=>{t.addedNodes.forEach((t=>{t.tagName&&t!==this&&t.parentElement&&"HAX-BODY"!==t.parentElement.tagName&&!this.validateElementSlot(t)&&this.validElementSlots().length>0&&t.setAttribute("slot",this.validElementSlots()[0])}))})),this.__sortChildren())})),this.observer.observe(this,{childList:!0})}else{this.observer&&this.observer.disconnect(),this.removeEventListener("drop",this._dropEvent.bind(this));let t=[...this.shadowRoot.querySelectorAll("drag-enabled")],e=[...this.shadowRoot.querySelectorAll("slot")];t.forEach((t=>{t.removeEventListener("dragenter",this._dragEnter.bind(this)),t.removeEventListener("dragleave",this._dragLeave.bind(this))})),e.forEach((t=>t.removeEventListener("slotchange",this._slotMonitor.bind(this))))}switch(["responsiveSize","layout","layouts","disableResponsive"].includes(e)&&(clearTimeout(this.__calcWidthLock),this.__calcWidthLock=setTimeout((()=>{this.__columnWidths=this._getColumnWidths(this.responsiveSize,this.layout,this.layouts,this.disableResponsive)}),0)),e){case"__columnWidths":this.resize();break;case"disableResponsive":this.dispatchEvent(new CustomEvent("disable-responsive-changed",{detail:this[e]}))}})),this.haxLayoutContainer=!0}static get properties(){return{...super.properties||{},ready:{type:Boolean,reflect:!0},dataHaxRay:{type:String,reflect:!0,attribute:"data-hax-ray"},haxLayoutContainer:{type:Boolean,reflect:!0,attribute:"hax-layout-container"}}}_dragEnter(t){t.target.classList.add("hax-hovered")}_dragLeave(t){t.target.classList.remove("hax-hovered")}_dropEvent(t){this.querySelectorAll(".hax-hovered").forEach((t=>{t.classList.remove("hax-hovered")})),this.shadowRoot.querySelectorAll(".hax-hovered").forEach((t=>{t.classList.remove("hax-hovered")}))}_getSlotOrder(t){let e=t.getAttribute("slot"),a=this.shadowRoot.querySelector(`[slot=${e}]`);return parseInt(a.getAttribute("data-layout-order")||-1)}_slotMonitor(t){var a=e(t);a[0]&&a[0].assignedNodes&&a[0].assignedNodes().length&&a[0].parentNode&&a[0].parentNode.classList?a[0].parentNode.classList.add("has-nodes"):a[0].parentNode&&a[0].parentNode.classList&&a[0].parentNode.classList.remove("has-nodes")}canMoveSlot(t,e){let a=e?-1:1,o=this.this._getSlotOrder(t),r=[...this.shadowRoot.querySelectorAll("[data-layout-order]")].map((t=>parseInt(t.getAttribute("data-layout-order")||-1))).sort(((t,e)=>t-e)),s=o[1]+a;return s>=r[0]&&s<=r[r.length-1]}moveSlot(t,e){let a=e?-1:1,o=this.this._getSlotOrder(t)[1]+a,r=this.shadowRoot.querySelector(`[data-layout-order=${o}]`).getAttribute("data-layout-slotname");t.setAttribute("slot",r)}validateElementSlot(t){return this.validElementSlots().includes(t.getAttribute("slot"))}validElementSlots(){return this.shadowRoot?[...this.shadowRoot.querySelectorAll("[data-layout-order]")].map((t=>t.getAttribute("data-layout-slotname"))):[]}async __sortChildren(){this.__sorting=!0;try{let t=Array.prototype.reduce.call(this.querySelectorAll("[slot]"),(function(t,e){return t}),[]);t=t.sort((function(t,e){return this._getSlotOrder(t)<this._getSlotOrder(e)?-1:1})),await t.forEach((t=>{t.parentNode===this&&this.appendChild(t)}))}catch(t){console.warn(t)}this.__sorting=!1}static get haxProperties(){return{...super.haxProperties||{},type:"grid",contentEditable:!0}}}};