text: import{css as t}from"../../../lit-element/lit-element.js";import{normalizeEventPath as e}from"../../utils/utils.js";export const HaxLayoutBehaviors=function(o){return class extends o{static get styles(){return[t`
            :host {
              display: block;
              --hax-layout-slotted-active-outline-color: var(
                --hax-contextual-action-hover-color
              );
            }
            :host([ready]) .container {
              transition: var(
                --hax-layout-container-transition,
                0.5s width ease-in-out,
                0.5s padding ease-in-out,
                0.5s margin ease-in-out
              );
            }
            :host(.hax-hovered) {
              outline: var(--hax-layout-active-outline-width, 2px)
                var(--hax-layout-active-outline-style, solid)
                var(
                  --hax-layout-active-outline-color,
                  var(--hax-layout-accent-color, #009dc7)
                ) !important;
              outline-offset: var(--hax-layout-active-outline-offset, -2px);
            }
            .container.hax-hovered {
              outline: var(--hax-layout-active-outline-width, 2px)
                var(--hax-layout-active-outline-style, solid)
                var(
                  --hax-layout-active-outline-color,
                  var(--hax-layout-accent-color, #009dc7)
                ) !important;
              outline-offset: var(--hax-layout-active-outline-offset, -2px);
            }
            .container.not-shown {
              display: none;
              outline: none;
            }
            :host([data-hax-ray]) .container.not-shown {
              display: block;
              opacity: 0.4;
              width: 0;
            }
            :host([data-hax-ray]) .container.not-shown.has-nodes {
              width: 100%;
              transition: none;
            }
            :host([data-hax-ray]) .not-shown:hover {
              opacity: 1;
            }
            :host([data-hax-ray]) .not-shown:hover::before {
              content: "Hidden by layout";
              position: sticky;
              display: inline-flex;
              background-color: black;
              color: white;
              padding: 0px 8px;
              font-size: 12px;
              line-height: 16px;
              margin: 12px 13px;
              float: right;
              width: 124px;
            }
            /** this implies hax editing state is available **/
            :host([data-hax-ray]) ::slotted(*) {
              outline: var(--hax-layout-slotted-outline-width, 1px)
                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, -2px);
            }
            :host([data-hax-ray])
              ::slotted([contenteditable][data-hax-ray]:empty)::before {
              content: attr(data-hax-ray);
              opacity: 0.2;
              transition: 0.2s all ease-in-out;
            }
            :host([data-hax-ray]) ::slotted(*:hover) {
              outline: var(--hax-layout-slotted-hover-outline-width, 1px)
                var(--hax-layout-slotted-hover-outline-style, solid)
                var(
                  --hax-layout-slotted-hover-outline-color,
                  var(--hax-layout-slotted-faded-color, #eeeeee)
                );
            }
            :host([data-hax-ray]) .container {
              outline: var(--hax-layout-container-outline-width, 1px)
                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]) .container:hover {
              outline: var(--hax-layout-container-hover-outline-width, 1px)
                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){setTimeout(()=>{this.ready=!0},100)}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]}))}})}static get properties(){return{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){console.log(t.target),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"),o=this.shadowRoot.querySelector(`[slot=${e}]`);return parseInt(o.getAttribute("data-move-order")||-1)}_slotMonitor(t){var o=e(t);o[0]&&o[0].assignedNodes&&o[0].assignedNodes().length?o[0].parentNode.classList.add("has-nodes"):o[0].parentNode.classList.remove("has-nodes")}canMoveSlot(t,e){let o=e?-1:1,a=this.this._getSlotOrder(t),i=[...this.shadowRoot.querySelectorAll(".container")].map(t=>parseInt(t.getAttribute("data-move-order")||-1)).sort((t,e)=>t-e),r=a[1]+o;return r>=i[0]&&r<=i[i.length-1]}moveSlot(t,e){let o=e?-1:1,a=this.this._getSlotOrder(t)[1]+o,i=this.shadowRoot.querySelector(`[data-move-order=${a}]`).getAttribute("data-slot-name");t.setAttribute("slot",i)}validateElementSlot(t){return this.validElementSlots().includes(t.getAttribute("slot"))}validElementSlots(){return this.shadowRoot?[...this.shadowRoot.querySelectorAll(".container")].map(t=>t.getAttribute("data-slot-name")):[]}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}}};