import{html as t,css as e}from"../../../lit/index.js";import{winEventsElement as i,camelCaseToDash as a,wipeSlot as o,normalizeEventPath as s,localStorageSet as r}from"../../utils/utils.js";import{HaxSchematizer as l,HaxElementizer as n}from"../../hax-body-behaviors/lib/HAXFields.js";import{SimpleTourFinder as d}from"../../simple-popover/lib/SimpleTourFinder.js";import{HAXStore as h}from"./hax-store.js";import{autorun as c,toJS as p}from"../../../mobx/dist/mobx.esm.js";import{HaxComponentStyles as u,HaxTrayDetail as m}from"./hax-ui-styles.js";import"../../simple-fields/simple-fields.js";import"../../simple-fields/lib/simple-fields-tab.js";import"../../simple-icon/lib/simple-icons.js";import"../../hax-iconset/lib/simple-hax-iconset.js";import"./hax-tray-upload.js";import"./hax-app-search.js";import"./hax-gizmo-browser.js";import"./hax-gizmo-browser.js";import"./hax-view-source.js";import"./hax-stax-browser.js";import"./hax-map.js";import"./hax-tray-button.js";import"./hax-toolbar-menu.js";import{SuperDaemonInstance as g}from"../../super-daemon/super-daemon.js";import{I18NMixin as v}from"../../i18n-manager/lib/I18NMixin.js";import{Undo as b}from"../../undo-manager/undo-manager.js";import"../../iframe-loader/lib/loading-indicator.js";import"../../simple-toolbar/lib/simple-toolbar-menu-item.js";import{SimpleColors as y}from"../../simple-colors/simple-colors.js";class HaxTray extends(v(d(i(y)))){static get tag(){return"hax-tray"}constructor(){super(),this.tourController=new AbortController,this.dragController=new AbortController,this.tourName="hax",this.__winEvents={"can-redo-changed":"_redoChanged","can-undo-changed":"_undoChanged","hax-drop-focus-event":"_expandSettingsPanel"},this.trayIcon="settings",this.resizeDrag=!1,this.hideToolbar=!1,this.dark=!1,this.__moveX=0,this.t={structure:"Outline",htmlSource:"HTML Source",structureTip:"View Page Structure",edit:"Edit",save:"Save",move:"Move",close:"Close",move:"Move",menuAlignment:"Menu Alignment",menuLeft:"Move",menuRight:"Move",menuPosition:"Menu position",changeSideVisually:"Change which side of the screen the menu is affixed to visually.",expand:"Expand",collapse:"Collapse",menuSize:"Menu size",menuSizeDescription:"Expand or collapse the menu visually.",merlin:"Merlin",summonMerlin:"Summon Merlin",settings:"Settings",source:"Source",undo:"Undo",redo:"Redo",media:"Media",blocks:"Blocks",cancel:"Cancel",cancelWithoutSaving:"Cancel without saving",configure:"Configure",advanced:"Advanced",developer:"Developer",alignment:"Alignment",left:"Left",center:"Center",right:"Right",search:"Search",templates:"Templates",width:"Width"},this.registerLocalization({context:this,namespace:"hax",updateCallback:"_updateTrayDetail"}),this._initial=!0,this.activeValue={settings:{configure:{},advanced:{},developer:{}}},this.collapsed=!0,this.activeSchema=[{property:"settings",inputMethod:"collapse",properties:[]}],this.canUndo=!1,this.canRedo=!1,this.trayDetail="content-edit",this.activeTagName="",this.traySizeIcon="hax:arrow-expand-right",this.__setup=!1,this.addEventListener("hax-tray-button-click",this._processTrayEvent.bind(this)),c((()=>{this.activeGizmo=p(h.activeGizmo)})),c((()=>{this.activeNode=p(h.activeNode)})),c((()=>{this.elementAlign=p(h.elementAlign),globalThis.document&&globalThis.document.body&&("left"===this.elementAlign?globalThis.document.body.style.setProperty("--hax-tray-element-align-margin","0 0 0 var(--hax-tray-element-custom-width, calc(\n            var(--hax-tray-width) - var(--hax-tray-menubar-min-width)\n          ))"):globalThis.document.body.style.setProperty("--hax-tray-element-align-margin","0 var(--hax-tray-element-custom-width, calc(\n            var(--hax-tray-width) - var(--hax-tray-menubar-min-width)\n          )) 0 0"))})),c((()=>{this.tourOpened=p(h.tourOpened)})),c((()=>{this.loading=!p(h.appStoreLoaded)})),c((()=>{this.globalPreferences=p(h.globalPreferences),this.haxUiTheme=(this.globalPreferences||{}).haxUiTheme||"hax",this.dark="haxdark"===this.haxUiTheme,globalThis.document.body.setAttribute("hax-ui-theme",this.haxUiTheme)})),c((()=>{this.editMode=p(h.editMode)}))}_expandSettingsPanel(t){this.hideToolbar||this.shadowRoot.querySelector("#content-edit").click()}_redoChanged(t){this.canRedo=t.detail.value}_undoChanged(t){this.canUndo=t.detail.value}static get styles(){return[...super.styles||[],...m,...u,e`
        :host {
          --simple-fields-detail-font-family: var(--hax-ui-font-family);
          --simple-fields-font-family: var(--hax-ui-font-family);
          z-index: var(--hax-ui-focus-z-index - 1);
          top: 0;
          font-family: var(--hax-ui-font-family);
          font-size: var(--hax-ui-font-size);
          color: var(--hax-ui-color);
        }

        .tray-detail-titlebar-icon {
          --simple-icon-height: 36px;
          --simple-icon-width: 36px;
        }
        .wrapper {
          position: fixed;
          align-items: stretch;
          flex-direction: row-reverse;
          opacity: 0;
          visibility: visible;
          pointer-events: none;
          overflow: hidden;
          top: 0;
          bottom: 0;
          min-width: calc(var(--hax-tray-width) - 100px);
          max-width: 70vw;
          height: calc(100vh - 48px);
          max-height: calc(100vh - 48px);
          z-index: var(--hax-ui-focus-z-index);
          transition:
            height 0.6s ease-in-out,
            width 0.6s ease-in-out,
            opacity 0.6s ease-in-out,
            visibility 0.6s ease-in-out;
        }
        :host([collapsed]) #resize {
          display: none;
        }
        :host([resize-drag]) {
          cursor: col-resize;
          -webkit-user-select: none; /* Safari */
          -ms-user-select: none; /* IE 10 and IE 11 */
          user-select: none; /* Standard syntax */
          opacity: 1;
        }
        #resize {
          cursor: col-resize;
          background-color: transparent;
          height: 100%;
          padding: 0 12px 0 0;
          flex-shrink: 0;
          position: relative;
          z-index: var(--hax-ui-focus-z-index);
        }
        :host([element-align="right"]) #resize {
          padding: 0 0 0 12px;
        }
        #resize .resize-visual:hover {
          cursor: col-resize;
        }
        #resize .resize-visual {
          background-color: black;
          height: 100%;
          width: 6px;
        }
        :host(:hover) .wrapper {
          overflow: visible;
        }
        :host([element-align="left"]) .wrapper {
          left: -1000px;
          flex-direction: row;
          transition: left 0.6s ease-in-out;
        }
        :host([element-align="right"]) .wrapper {
          right: -1000px;
          flex-direction: row;
          transition: right 0.6s ease-in-out;
        }
        :host([tray-detail="view-source"]) .detail {
          width: 50vw;
          min-height: 300px;
          min-width: calc(var(--hax-tray-width) - 100px);
          resize: both;
          flex: unset;
        }
        :host([tray-detail="view-source"]) #resize {
          display: none;
        }
        :host([edit-mode]) .wrapper {
          opacity: 1;
          visibility: visible;
          pointer-events: all;
          display: flex;
        }
        :host([edit-mode][element-align="left"]) .wrapper {
          left: 0px;
        }
        :host([edit-mode][element-align="right"]) .wrapper {
          right: 0px;
          flex-direction: row-reverse;
        }
        :host([edit-mode][collapsed]) .wrapper {
          width: unset;
        }
        :host([edit-mode]) .wrapper.full-panel {
          width: unset;
          left: 0;
          right: 0;
        }

        #menubar {
          display: inline-flex;
          flex-direction: column;
          align-items: stretch;
          overflow: visible;
          flex: 0 0 auto;
          z-index: 6;
          background-color: var(--hax-ui-background-color);
        }
        :host([collapsed]) #menubar {
          width: unset;
        }
        #menubar > * {
          background-color: var(--hax-ui-background-color);
        }
        #menubar > *::part(button) {
          padding: var(--hax-ui-spacing-xs);
        }
        #menubar > *::part(label) {
          margin: 0px;
          font-size: 10px;
          display: inline-block;
          text-align: left;
          opacity: 1;
          visibility: visible;
          padding: 0px var(--hax-ui-spacing-sm);
          overflow: unset;
        }
        loading-indicator {
          --loading-indicator-background-color: var(
            --simple-colors-default-theme-accent-2,
            grey
          );
          --loading-indicator-color: var(
            --simple-colors-default-theme-accent-10,
            black
          );
        }
        #haxMenuAlign {
          --simple-toolbar-button-width: 18px;
          --simple-toolbar-button-height: 18px;
          margin: 4px 0px 0px;
          height: 24px;
          width: 24px;
        }
        .detail {
          resize: horizontal;
          visibility: visible;
          pointer-events: all;
          background-color: var(--hax-ui-background-color);
          max-height: calc(100vh - 48px);
          width: var(--hax-tray-element-custom-width, calc(
            var(--hax-tray-width) - var(--hax-tray-menubar-min-width)
          ));
          max-width: 70vw;
          min-width: 200px;
          overflow-x: auto;
          opacity: 1;
        }
        .detail::-webkit-scrollbar-track {
          border-radius: 0;
          background-color: var(--ddd-theme-default-coalyGray);
        }

        .detail::-webkit-scrollbar {
          width: 8px;
          background-color: var(--ddd-theme-default-coalyGray);
        }
        .detail::-webkit-scrollbar-thumb {
          border-radius: 4px;
          -webkit-box-shadow: inset 0 0 4px
            var(--ddd-theme-default-limestoneGray);

          box-shadow: inset 0 0 4px var(--ddd-theme-default-limestoneGray);
          background-color: var(--ddd-theme-default-limestoneGray);
        }
        :host([collapsed]) .detail {
          width: 0px;
          overflow: hidden;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          max-height: 100vh;
          overflow-y: auto;
        }
        #tray-detail {
          width: auto;
          padding: 0 var(--hax-ui-spacing) var(--hax-ui-spacing);
          transition: opacity 0.3s ease-in-out;
          opacity: 1;
          overflow: hidden;
        }
        .wrapper:focus #tray-detail,
        .wrapper:focus-within #tray-detail,
        .wrapper:hover #tray-detail,
        #tray-detail:hover,
        #tray-detail:focus,
        #tray-detail:focus-within {
          opacity: 1;
        }
        #haxcancelbutton::part(dropdown-icon) {
          display: none;
        }
        .tray-detail-titlebar {
          background-color: black;
        }
        .tray-detail-titlebar .tray-detail-titlebar-label {
          display: inline-flex;
        }
        #settingsform {
          margin: 0 -8px 0 -8px;
          --a11y-collapse-padding-bottom: 100px;
          --simple-fields-field-margin: 12px;
          --a11y-collapse-heading-color: var(
            --simple-colors-default-theme-accent-12
          );
          overflow-y: auto;
        }
        .block-add-wrapper {
          overflow-y: auto;
        }
        a11y-collapse {
          margin: 0px;
          --a11y-collapse-margin: 0;
          --a11y-collapse-vertical-padding: 12px;
          --a11y-collapse-horizontal-padding: 12px;
        }
        a11y-collapse span[slot="heading"] {
          --a11y-collapse-heading-color: var(
            --simple-colors-default-theme-accent-12
          ) !important;
        }
        simple-fields-field::part(label) {
          font-size: var(--hax-ui-font-size-sm);
          font-weight: var(--ddd-font-weight-medium);
        }
        simple-fields-field:hover::part(label) {
          font-weight: var(--ddd-font-weight-bold);
        }
        a11y-collapse span[slot="heading"] {
          line-height: 24px;
          height: 24px;
          display: block;
          margin: 8px 0;
        }
        a11y-collapse-group {
          margin: 0;
          padding: 0;
        }
        hax-tray-button,
        hax-gizmo-browser {
          visibility: visible;
          --a11y-collapse-heading-color: var(
            --simple-colors-default-theme-accent-12
          );
        }
        hax-tray-button:not(:defined),
        hax-gizmo-browser:not(:defined) {
          visibility: hidden;
        }
        hax-tray-upload {
          flex: 0 0 auto;
        }
        *[hidden] {
          display: none;
        }
        :host([element-align="right"]) #button {
          right: 0;
        }
        :host([element-align="left"]) #button {
          left: 0;
        }

        #button {
          position: fixed;
          top: 0;
          visibility: visible;
          margin: var(--hax-ui-spacing-xs);
        }
        :host([edit-mode]) #button {
          visibility: hidden;
          opacity: 0;
        }
        #button:hover {
          opacity: 1;
        }
        /** This is mobile layout for controls */
        @media screen and (max-width: 800px) {
          :host {
            width: 100%;
          }
          #resize {
            display: none;
          }
          :host([edit-mode]) .wrapper.full-panel .detail {
            max-width: 70vw;
            max-height: unset;
          }
          .detail {
            max-width: 70vw;
          }
          #tray-detail {
            max-width: 70vw;
            max-height: unset;
          }
          .wrapper {
            width: unset;
            top: -1000px;
            left: 0px;
            right: 0px;
            flex-direction: column;
          }
          :host([edit-mode]) .wrapper {
            top: 0;
            pointer-events: none;
          }
          :host([collapsed]) .wrapper {
            height: var(--hax-tray-menubar-min-height);
          }
          :host([element-align="left"]) .wrapper {
            left: -1000px;
            flex-direction: column;
          }
          #menubar {
            position: sticky;
            flex-direction: row;
            left: 0;
            top: 0;
            height: auto;
            flex: 0 0 auto;
            width: 100%;
            pointer-events: all;
          }
          #menubar > * {
            flex: 1 0 auto;
            min-width: var(--hax-tray-menubar-min-width);
          }
          #menubar > *::part(button) {
            min-width: var(--hax-tray-menubar-min-width);
            justify-content: space-around;
          }
          #menubar > *::part(label) {
            display: none;
          }
          #haxMenuAlign {
            display: none;
          }
          :host([tray-detail="view-source"]) .detail {
            width: 100%;
            resize: unset;
            height: 100vh;
          }
          :host([tray-detail="view-source"]) #tray-detail {
            overflow: hidden;
          }
          .detail {
            position: relative;
            flex: 1 1 100%;
            pointer-events: all;
          }
          :host([collapsed]) .detail {
            flex: 0 0 0px;
          }
        }
        @media screen and (max-width: 600px) {
          :host([edit-mode]) .hide-small {
            display: none;
          }
        }
      `]}get trayStatus(){let t=this.collapsed?"collapsed":"view-source"==this.trayDetail?"full-panel":"side-panel";return h.trayStatus=t,h.trayDetail=this.trayDetail,t}render(){return t`
      ${this.panelOpsTemplate}
      <div class="wrapper ${this.trayStatus}">
        ${this.hideToolbar?"":t`${this.menuToolbarTemplate}`}
        <div class="detail">
          <loading-indicator ?loading="${this.loading}"></loading-indicator>
          ${this.trayDetailTemplate}
        </div>
        <div
          class="resize"
          id="resize"
          @mousedown="${this.resizeDown}"
          @dblclick="${this.resetSize}"
        >
          <div class="resize-visual"></div>
        </div>
      </div>
    `}resetSize(t){this.resizeDrag=!1,this.dragController.abort(),setTimeout((()=>{this.shadowRoot.querySelector(".detail").style.removeProperty("width")}),10)}resizeDown(t){this.resizeDrag=!0,this.__moveX=t.x,this.dragController=new AbortController,this.addEventListener("mousemove",(t=>{if(0===t.which&&(this.resizeDrag=!1,this.dragController.abort()),this.resizeDrag){this.__moveX=t.x;let e=44;this.hideToolbar&&(e=0),"right"===this.elementAlign?globalThis.document.body.style.setProperty("--hax-tray-element-custom-width",globalThis.innerWidth-this.__moveX-e+"px"):globalThis.document.body.style.setProperty("--hax-tray-element-custom-width",this.__moveX-e+"px")}}),{signal:this.dragController.signal}),this.addEventListener("mouseup",(t=>{this.resizeDrag=!1,this.dragController.abort()}),{signal:this.dragController.signal})}get panelOpsTemplate(){return this.hidePanelOps?"":t`
          <hax-tray-button
            large
            voice-command="edit page"
            .data-opened="${this.editMode}"
            @click="${this._clickEditButton}"
            icon="create"
            id="button"
            feature
            show-text-label
            show-tooltip
            label="${this.editMode?this.t.save:this.t.edit}"
          ></hax-tray-button>
        `}get toolbarsTemplate(){return t`${this.opsToolbarTemplate}${this.trayToolbarTemplate}`}get menuToolbarTemplate(){return t` <div id="menubar" class="collapse-menu">
      ${this.saveButtons} ${this.doButtons} ${this.contentButtons}
      <slot name="tray-buttons-pre"></slot>
      ${this.moreButtons}
    </div>`}get menuButtons(){return t`
      <hax-tray-button
        show-tooltip
        align-horizontal="${this.collapsed?"left":"center"}"
        id="haxMenuAlign"
        event-name="toggle-element-align"
        icon="arrow-${"left"==this.elementAlign?"forward":"back"}"
        label="${"left"==this.elementAlign?this.t.menuRight:this.t.menuLeft}"
        index="${"left"==this.elementAlign?"1":"0"}"
        tooltip="${this.t.move} ${"left"==this.elementAlign?this.t.right:this.t.left}"
      >
      </hax-tray-button>
    `}get saveButtons(){return this.hidePanelOps?"":t`
          <hax-tray-button
            @click="${this._clickSaveButton}"
            icon="save"
            icon-position="left"
            id="haxsavebutton"
            label="${this.editMode?this.t.save:this.t.edit}"
            event-name="save"
            voice-command="save page"
            show-text-label
            show-tooltip
            align-horizontal="${this.collapsed?"left":"center"}"
          ></hax-tray-button>
          <hax-tray-button
            icon="cancel"
            id="haxcancelbutton"
            label="${this.t.cancel}"
            icon-position="left"
            show-text-label
            show-tooltip
            align-horizontal="${this.collapsed?"left":"center"}"
          ></hax-tray-button>
        `}get doButtons(){return t` <hax-tray-button
        icon="icons:undo"
        ?disabled="${!this.canUndo}"
        label="${this.t.undo}"
        event-name="undo"
        voice-command="undo"
        data-simple-tour-stop
        data-stop-title="label"
        icon-position="left"
        show-text-label
        show-tooltip
        align-horizontal="${this.collapsed?"left":"center"}"
      >
        <div slot="tour" data-stop-content>
          Undo the previous operation in the content, whether typing or adding a
          widget.
        </div>
      </hax-tray-button>
      <hax-tray-button
        icon="icons:redo"
        ?disabled="${!this.canRedo}"
        label="${this.t.redo}"
        event-name="redo"
        voice-command="redo"
        data-simple-tour-stop
        data-stop-title="label"
        icon-position="left"
        show-text-label
        show-tooltip
        align-horizontal="${this.collapsed?"left":"center"}"
      >
        <div slot="tour" data-stop-content>
          Redo the last action that you hit Undo on.
        </div>
      </hax-tray-button>`}get contentButtons(){return t` <hax-tray-button
        event-name="content-edit"
        icon="settings"
        id="content-edit"
        label="${this.t.edit}"
        ?disabled="${!this.activeTagName||""==this.activeTagName||!this.activeNode||!this.activeNode.tagName}"
        voice-command="(modify)(configure)(edit) selected"
        data-simple-tour-stop
        data-stop-title="label"
        controls="tray-detail"
        tooltip="${this.t.edit} ${this.activeTagName}"
        toggles
        ?toggled="${!this.collapsed&&"content-edit"===this.trayDetail}"
        icon-position="left"
        show-text-label
        show-tooltip
        align-horizontal="${this.collapsed?"left":"center"}"
      >
        <div slot="tour" data-stop-content>
          When you want to add any content to the page from text, to images, to
          anything more advanced; you can always find items to add under the Add
          content menu. Click to expand, then either drag and drop items into
          the page or click and have them placed near whatever you are actively
          working on.
        </div>
      </hax-tray-button>
      <hax-tray-button
        event-name="content-add"
        icon="hax:add-brick"
        id="content-add"
        label="${this.t.blocks}"
        voice-command="select blocks (menu)"
        data-simple-tour-stop
        data-stop-title="label"
        controls="tray-detail"
        toggles
        ?toggled="${!this.collapsed&&"content-add"===this.trayDetail}"
        icon-position="left"
        show-text-label
        show-tooltip
        align-horizontal="${this.collapsed?"left":"center"}"
      >
        <div slot="tour" data-stop-content>
          When you want to add any content to the page from text, to images, to
          anything more advanced; you can always find items to add under the Add
          content menu. Click to expand, then either drag and drop items into
          the page or click and have them placed near whatever you are actively
          working on.
        </div>
      </hax-tray-button>
      <hax-tray-button
        icon="hax:multimedia"
        label="${this.t.media}"
        voice-command="select media (menu)"
        data-simple-tour-stop
        data-stop-title="label"
        controls="tray-detail"
        toggles
        icon-position="left"
        show-text-label
        show-tooltip
        align-horizontal="${this.collapsed?"left":"center"}"
        @click="${this._clickMediaButton}"
      >
        <div slot="tour" data-stop-content>
          Search for media and content anywhere that your copy of HAX has access
          to. Pick what to search, perform the search and then click or drag the
          item into the contnet.
        </div>
      </hax-tray-button>
      <hax-tray-button
        event-name="content-map"
        icon="icons:toc"
        id="content-map"
        label="${this.t.structure}"
        voice-command="select structure (menu)"
        data-simple-tour-stop
        data-stop-title="label"
        controls="tray-detail"
        toggles
        ?toggled="${!this.collapsed&&"content-map"===this.trayDetail}"
        icon-position="left"
        show-text-label
        show-tooltip
        align-horizontal="${this.collapsed?"left":"center"}"
      >
        <div data-stop-content>
          This is a simple list of all the block areas of the page that are
          clickable to jump through items quickly as well as review some simple
          overview stats.
        </div>
      </hax-tray-button>`}_clickMediaButton(t){g.runProgram("sources"),g.open()}get moreButtons(){return t`<hax-tray-button
        id="exportbtn"
        icon="hax:html-code"
        label="${this.t.source}"
        event-name="view-source"
        voice-command="view (page) source"
        data-simple-tour-stop
        data-stop-title="label"
        icon-position="left"
        show-text-label
        show-tooltip
        align-horizontal="${this.collapsed?"left":"center"}"
      >
        <div data-stop-content>
          Every change you make in HAX is ultimately writing HTML. Know HTML?
          Awesome, pop open the source view and make any changes you like. HTML
          is always behind the scenes ensuring that content is portable, well
          formatted and easy to read.
        </div>
      </hax-tray-button>
      <hax-tray-button
        event-name="super-daemon"
        icon="hax:wizard-hat"
        label="${this.t.merlin}"
        voice-command="${this.t.merlin}"
        toggles
        ?toggled="${!this.collapsed&&this.tourOpened}"
        icon-position="left"
        tooltip="${this.t.summonMerlin}"
        show-text-label
        show-tooltip
        align-horizontal="${this.collapsed?"left":"center"}"
      ></hax-tray-button> `}get trayDetailTemplate(){return t` <div
      id="tray-detail"
      aria-live="polite"
      aria-disabled="${this.collapsed?"true":"false"}"
      tabindex="${this.collapsed?"-1":"0"}"
      selected-detail="${this.trayDetail}"
    >
      <h4 class="tray-detail-titlebar">
        <simple-icon-lite
          class="tray-detail-titlebar-icon"
          icon="${this.trayIcon}"
        ></simple-icon-lite>
        <div class="tray-detail-titlebar-label">
          ${this.trayLabel||`${this.activeTagName}`}
        </div>
        <div class="tray-detail-titlebar-actions">${this.menuButtons}</div>
      </h4>
      ${this.viewSourceTemplate} ${this.contentMapTemplate}
      ${this.contentEditTemplate} ${this.contentAddTemplate}
    </div>`}get viewSourceTemplate(){return t` <hax-view-source
      id="view-source"
      ?hidden="${"view-source"!==this.trayDetail}"
    ></hax-view-source>`}get contentEditTemplate(){return t` <simple-fields
      id="settingsform"
      ?dark="${"haxdark"==this.haxUiTheme}"
      disable-responsive
      code-theme="${"system"==this.haxUiTheme?"auto":"haxdark"==this.haxUiTheme?"vs-dark":"vs"}"
      ?hidden="${"content-edit"!==this.trayDetail}"
    ></simple-fields>`}get contentAddTemplate(){let e="content-add"!==this.trayDetail;return t`<div class="block-add-wrapper">
      <hax-tray-upload ?hidden="${e}" show-sources></hax-tray-upload>
      <hax-gizmo-browser
        id="gizmobrowser"
        ?hidden="${e}"
      ></hax-gizmo-browser>
      <hax-stax-browser
        id="staxbrowser"
        ?hidden="${e}"
        label="${this.t.templates}"
      ></hax-stax-browser>
      <hax-app-search ?hidden="${e}" id="haxappsearch"></hax-app-search>
    </div>`}get contentMapTemplate(){return t`<hax-map
      controls="content-map"
      ?hidden="${"content-map"!==this.trayDetail}"
    ></hax-map>`}_refreshAddData(){this.shadowRoot.querySelector("#gizmobrowser").resetList(p(h.gizmoList)),this.shadowRoot.querySelector("#staxbrowser").staxList=[...p(h.staxList)]}_processTrayEvent(t){var e=s(t)[0],i=t.detail.eventName;switch("HAX-TRAY-BUTTON"==e.tagName&&t.detail.eventName===this.trayDetail?this.collapsed=!this.collapsed:this.collapsed=!1,i){case"insert-stax":this.dispatchEvent(new CustomEvent("hax-insert-content-array",{bubbles:!0,cancelable:!0,composed:!0,detail:e.stax}));break;case"insert-tag":let i,a={tag:t.detail.value},o=h.haxSchemaFromTag(t.detail.value);if(h.recentGizmoList.push(o.gizmo),(e.getAttribute("data-demo-schema")||t.detail.demoSchema)&&o&&o.demoSchema&&o.demoSchema[0])i=o.demoSchema[0];else{let o=JSON.parse(e.getAttribute("event-properties")),s=e.getAttribute("event-content");t.detail.properties&&(o=t.detail.properties),null==o&&(o={}),t.detail.content&&(s=t.detail.content),null==s&&(s=""),i=h.haxElementPrototype(a,o,s)}this.dispatchEvent(new CustomEvent("hax-insert-content",{bubbles:!0,cancelable:!0,composed:!0,detail:i}));break;case"toggle-element-align":let s=["left","right"],l=s[t.detail.index]?s[t.detail.index]:"left";h.elementAlign=l,r("hax-tray-elementAlign",l);break;case"super-daemon":g.open(),this.collapsed=!1;break;case"content-map":case"content-edit":case"content-add":this.trayDetail=t.detail.eventName;break;case"start-tour":this.startTour();break;case"stop-tour":globalThis.SimpleTourManager.requestAvailability().stopTour("hax");break;case"undo":h.activeHaxBody.undo();break;case"redo":h.activeHaxBody.redo();break;case"view-source":this.trayDetail=t.detail.eventName,this.shadowRoot.querySelector("#view-source").openSource(),this.collapsed=!1}}startTour(){this.__tour=this.__tour||globalThis.SimpleTourManager.requestAvailability(),this.tourController=new AbortController,globalThis.addEventListener("tour-changed",this._handleTourChanged.bind(this),{signal:this.tourController.signal}),this.__tour.startTour("hax")}stopTour(){this.__tour=this.__tour||globalThis.SimpleTourManager.requestAvailability(),this.__tour.stopTour("hax"),this.tourController.abort()}_handleTourChanged(t){this.tourOpened=t.detail.active==this.tourName}static get properties(){return{...super.properties,offsetMargin:{type:String,attribute:"offset-margin"},trayIcon:{type:String},resizeDrag:{type:Boolean,attribute:"resize-drag",reflect:!0},collapsed:{type:Boolean,reflect:!0},traySizeIcon:{type:String},loading:{type:Boolean,reflect:!0},activeValue:{type:Object},activeSchema:{type:Array},elementAlign:{type:String,reflect:!0,attribute:"element-align"},light:{type:Boolean,reflect:!0},canUndo:{type:Boolean,attribute:"can-undo"},canRedo:{type:Boolean,attribute:"can-redo"},haxUiTheme:{type:String},hidePanelOps:{type:Boolean,reflect:!0,attribute:"hide-panel-ops"},hideToolbar:{type:Boolean,reflect:!0,attribute:"hide-toolbar"},globalPreferences:{type:Object},activeNode:{type:Object},activeTagName:{type:String},activeGizmo:{type:Object},editMode:{type:Boolean,reflect:!0,attribute:"edit-mode"},trayDetail:{type:String,reflect:!0,attribute:"tray-detail"},trayLabel:{type:String},tourOpened:{type:String},__tour:{type:Object}}}firstUpdated(t){super.firstUpdated&&super.firstUpdated(t),this.__setup||(this.shadowRoot.querySelector("#settingsform").schematizer=l,this.shadowRoot.querySelector("#settingsform").elementizer=n,setTimeout((()=>{this.shadowRoot.querySelector(".wrapper").style.margin=this.offsetMargin}),1e3),this.__setup=!0,this.shadowRoot.querySelector("#settingsform").addEventListener("value-changed",this.__valueChangedEvent.bind(this)),this.dispatchEvent(new CustomEvent("hax-register-core-piece",{bubbles:!0,cancelable:!0,composed:!0,detail:{piece:"haxTray",object:this}})))}async updated(t){super.updated&&super.updated(t),t.forEach((async(t,e)=>{"editMode"==e&&(this.editMode&&await h.refreshActiveNodeForm(),this._editModeChanged(this.editMode)),"offsetMargin"==e&&setTimeout((()=>{this.shadowRoot.querySelector(".wrapper").style.margin=this.offsetMargin}),0),"trayDetail"==e&&this._updateTrayDetail(this[e]),"collapsed"==e&&this[e]&&this._editModeChanged(this.editMode),"activeGizmo"==e&&"view-source"!==this.trayDetail&&(this.activeGizmo?(this.activeTagName=this.activeGizmo.title,t&&["content-map","content-edit","content-add"].includes(this.trayDetail)||(this.trayDetail="content-edit")):["content-add","content-map"].includes(this.trayDetail)||(this.trayDetail="content-add")),"activeNode"==e&&this.activeNode&&this.activeNode.tagName&&this.editMode&&await h.refreshActiveNodeForm()}))}async _setupForm(){this.loading=!0;let t=this.activeNode;if(this._initial=!0,this.activeValue={settings:{configure:{},advanced:{},developer:{}}},t&&t.tagName&&h.elementList[t.tagName.toLowerCase()]){let e={...h.elementList[t.tagName.toLowerCase()]};void 0===e.gizmo.title?this.humanName=t.tagName.replace("-"," ").toLowerCase():this.humanName=e.gizmo.title;for(let t in this.activeHaxElement.properties)Object.keys(e.settings).forEach((i=>{e.settings[i].forEach(((a,o)=>{["contenteditable","data-hax-active","data-hax-grid","data-hax-layout"].includes(t)||(a.property===t||a.attribute===t||a.slot===t?this.activeValue.settings[i][t]=this.activeHaxElement.properties[t]:"collapse"===a.inputMethod&&e.settings[i][o].properties&&e.settings[i][o].properties.forEach(((s,r)=>{s.title&&s.properties&&e.settings[i][o].properties[r].properties.forEach((e=>{e.property===t&&(this.activeValue.settings[i][a.property]||(this.activeValue.settings[i][a.property]={}),this.activeValue.settings[i][a.property][s.property]||(this.activeValue.settings[i][a.property][s.property]={}),this.activeValue.settings[i][a.property][s.property][t]=this.activeHaxElement.properties[t]),e.attribute===t&&(this.activeValue.settings[i][a.property]||(this.activeValue.settings[i][a.property]={}),this.activeValue.settings[i][a.property][s.property]||(this.activeValue.settings[i][a.property][s.property]={}),this.activeValue.settings[i][a.property][s.property][t]=this.activeHaxElement.properties[t])}))})))}))}));let i=globalThis.document.createElement("div");i.innerHTML=this.activeHaxElement.content,i.childNodes.forEach((t=>{1===t.nodeType&&"undefined"!==t.innerHTML&&(e.settings.configure.forEach((e=>{e.slot===t.getAttribute("slot")?this.activeValue.settings.configure[e.slot]=t.innerHTML:""!=e.slot||null!=t.getAttribute("slot")&&"null"!=t.getAttribute("slot")||(this.activeValue.settings.configure[e.slot]=t.innerHTML)})),e.settings.advanced.forEach((e=>{e.slot===t.getAttribute("slot")?this.activeValue.settings.advanced[e.slot]=t.innerHTML:""!=e.slot||null!=t.getAttribute("slot")&&"null"!=t.getAttribute("slot")||(this.activeValue.settings.advanced[e.slot]=t.innerHTML)})),e.settings.developer.forEach((e=>{e.slot===t.getAttribute("slot")?this.activeValue.settings.developer[e.slot]=t.innerHTML:""!=e.slot||null!=t.getAttribute("slot")&&"null"!=t.getAttribute("slot")||(this.activeValue.settings.developer[e.slot]=t.innerHTML)})))}));let a=!!e.type&&"grid"===e.type;e.settings.configure.forEach(((t,i)=>{e.settings.configure[i].attribute&&(e.settings.configure[i].property=e.settings.configure[i].attribute),e.settings.configure[i].slot&&(e.settings.configure[i].property=e.settings.configure[i].slot)})),e.settings.advanced.forEach(((t,i)=>{e.settings.advanced[i].attribute&&(e.settings.advanced[i].property=e.settings.advanced[i].attribute),e.settings.advanced[i].slot&&(e.settings.advanced[i].property=e.settings.advanced[i].slot)})),e.settings.developer.forEach(((t,i)=>{e.settings.developer[i].attribute&&(e.settings.developer[i].property=e.settings.developer[i].attribute),e.settings.developer[i].slot&&(e.settings.developer[i].property=e.settings.developer[i].slot)})),this.activeSchema=[{property:"settings",inputMethod:"collapse",properties:[]}];let setProps=(t,e,i=[])=>{let o=a?i.filter((t=>!(""===t.slot||t.slot||t.attribute&&"slot"==t.attribute))):i;this.activeSchema[0].properties.push({property:t,title:e,properties:o.length>0?o:void 0,disabled:o.length<1,expanded:"configure"===t,accordion:!0})};h.testHook(t,"setupActiveElementForm")&&await h.runHook(t,"setupActiveElementForm",[e]),setProps("configure",this.t.configure,e.settings.configure),setProps("advanced",this.t.advanced,e.settings.advanced),setProps("developer",this.t.developer,e.settings.developer),this.__activePropSchema=e,this.shadowRoot.querySelector("#settingsform").fields=[],this.shadowRoot.querySelector("#settingsform").value={},this.shadowRoot.querySelector("#settingsform").fields=this.activeSchema,this.shadowRoot.querySelector("#settingsform").value=this.activeValue,this.loading=!1}}_toArray(t){return null==t?[]:Object.keys(t).map((function(e){return t[e]}))}updateMap(){this.shadowRoot&&this.shadowRoot.querySelector("hax-map")&&"content-map"==this.trayDetail&&this.shadowRoot.querySelector("hax-map").updateHAXMap()}_updateTrayDetail(t){t&&this.shadowRoot&&this.shadowRoot.querySelector(".detail")&&(globalThis.document.body.style.setProperty("--hax-tray-element-custom-width",null),this.shadowRoot.querySelector(".detail").style.height=""),"content-add"==t?(this.trayIcon="hax:add-brick",this.trayLabel=this.t.blocks,this._refreshAddData()):"content-map"==t?(this.trayIcon="hax:newspaper",this.trayLabel=this.t.structure,this.shadowRoot.querySelector("hax-map").updateHAXMap()):"content-edit"!=t||this.activeTagName&&""!=this.activeTagName&&this.activeNode&&this.activeNode.tagName?t&&""!=t?"content-edit"==t?(this.trayIcon="settings",this.trayLabel=null):"view-source"==t?(this.trayIcon="hax:html-code",this.trayLabel=this.t.htmlSource):(this.trayIcon="settings",this.trayLabel=null):(this.trayDetail="content-edit",this.trayIcon="settings"):(this.trayIcon="hax:add-brick",this.trayDetail="content-add"),this.requestUpdate()}flattenObject=t=>Object.assign({},...function _flatten(t){return t?[].concat(...Object.keys(t).map((e=>"object"!=typeof t[e]||Array.isArray(t[e])?{[e]:t[e]}:_flatten(t[e])))):t}(t));__valueChangedEvent(t){if(this.editMode&&t.detail.value&&t.detail.value.settings){let i={...t.detail.value.settings},s="grid"=={...h.elementList[this.activeNode.tagName.toLowerCase()]}.type,r={configure:"configure",advanced:"advanced",developer:"developer"};for(let t in r)for(let e in i[t])i[t]=this.flattenObject(i[t]);var e;clearTimeout(this.__contextPropDebounce),this.__contextPropDebounce=setTimeout((()=>{for(let l in r)for(let r in i[l])if(e=!1,null==i[l][r]||i[l][r].readOnly)"data-hax-lock"===r&&(this.dispatchEvent(new CustomEvent("hax-toggle-active-node-lock",{bubbles:!0,composed:!0,cancelable:!0,detail:{lock:!1,node:this.activeNode}})),this.__lockAllSettings(!1)),this.activeNode.removeAttribute(a(r));else{if("prefix"===r&&""!=i[l][r])this.activeNode.setAttribute("prefix",i[l][r]),e=!0;else if("data-hax-lock"===r)this.dispatchEvent(new CustomEvent("hax-toggle-active-node-lock",{bubbles:!0,composed:!0,cancelable:!0,detail:{lock:i[l][r],node:this.activeNode}})),this.__lockAllSettings(i[l][r]);else if("innerText"===r)this.activeNode.innerText=i[l][r],e=!0;else if(this.activeNode.hasOwnProperty(r)||this.activeNode.properties&&this.activeNode.properties.hasOwnProperty(r)||null!=i[l][r]&&i[l][r].constructor===Array||null!=i[l][r]&&i[l][r].constructor===Object)try{i[l][r].constructor===Array?this.activeNode[r]=[...i[l][r]]:i[l][r].constructor===Object?this.activeNode[r]={...i[l][r]}:this.activeNode[r]=i[l][r],e=!0}catch(t){console.warn(t),e=!1}else if(!s)for(let a in this.__activePropSchema.settings[l])if(this.__activePropSchema.settings[l][a].slot==r){let s="span";if(this.__activePropSchema.settings[l][a].slotWrapper)s=this.__activePropSchema.settings[l][a].slotWrapper;else if(this.__activePropSchema.settings[l][a].allowedSlotWrappers&&this.__activePropSchema.settings[l][a].allowedSlotWrappers[0])s=this.__activePropSchema.settings[l][a].allowedSlotWrappers[0];else if("code-editor"===this.activeNode.tagName.toLowerCase())s="template";else{let t=["span","div","p"],e=this.__activePropSchema.settings[l][a].excludedSlotWrappers||[];e&&(t=t.filter((t=>!e.includes(t))))}var t=globalThis.document.createElement(s);if(this.__activePropSchema.settings[l][a].slotAttributes)for(let e in this.__activePropSchema.settings[l][a].slotAttributes)t.setAttribute(e,this.__activePropSchema.settings[l][a].slotAttributes[e]);""!==this.__activePropSchema.settings[l][a].slot&&(t.slot=this.__activePropSchema.settings[l][a].slot),t.innerHTML=i[l][r];const n=t.cloneNode(!0);e=!0,h.isTextElement(this.activeNode)?this.activeNode.innerHTML=t.innerHTML:(o(this.activeNode,this.__activePropSchema.settings[l][a].slot),this.activeNode.appendChild(n))}if(!e&&""!=a(r))try{!0===i[l][r]?this.activeNode.setAttribute(a(r),a(r)):!1===i[l][r]||""===i[l][r]?this.activeNode.removeAttribute(a(r)):this.activeNode.setAttribute(a(r),i[l][r])}catch(t){console.warn(t),console.warn(r,i[l][r])}}}),100)}setTimeout((()=>{this._initial&&(this._initial=!1)}),51)}__lockAllSettings(t){this.shadowRoot.querySelectorAll("simple-fields-tab *[is-simple-field-type]:not([name='settings.advanced.data-hax-lock'])").forEach((e=>{e.disabled=t}))}_editModeChanged(t){!this.hidePanelOps&&this.shadowRoot&&this.shadowRoot.querySelector("#button")&&(this.shadowRoot.querySelector("#button").icon=t?"save":"create"),t?this.removeAttribute("tabindex"):this.setAttribute("tabindex","-1")}_clickEditButton(t){h.editMode=!0,globalThis.dispatchEvent(new CustomEvent("simple-modal-hide",{bubbles:!0,cancelable:!0,detail:{}}))}_clickSaveButton(t){h.editMode=!1,this.dispatchEvent(new CustomEvent("hax-save",{bubbles:!0,cancelable:!0,composed:!0,detail:t.detail})),globalThis.dispatchEvent(new CustomEvent("simple-modal-hide",{bubbles:!0,cancelable:!0,detail:{}}))}}customElements.define(HaxTray.tag,HaxTray);export{HaxTray};