import{LitElement as t,html as e,render as i}from"../../../lit/index.js";import{unsafeHTML as s}from"../../../lit/directives/unsafe-html.js";import"../../simple-toolbar/simple-toolbar.js";import"../../simple-icon/lib/simple-icon-button-lite.js";import"../../simple-tooltip/simple-tooltip.js";import"./simple-popover-manager.js";class SimpleTour extends t{constructor(){super(),this.stacks={},this.orientation="lr",this.active=null,this.tourInfo={},this.activeElementDelay=500,this.stop=-1,globalThis.addEventListener("simple-tour-register",this.registerNewTourEvent.bind(this)),globalThis.addEventListener("simple-tour-create-tour-stop",this.createTourStopEvent.bind(this))}registerNewTourEvent(t){this.registerNewTour(t.detail)}registerNewTour(t){return this.stacks[t.key]||(this.stacks[t.key]=[]),this.tourInfo[t.key]||(this.tourInfo[t.key]=t),this.stacks[t.key]}createTourStopEvent(t){this.createTourStop(t.detail.name,t.detail.target,t.detail.title,t.detail.description,t.detail.mode)}createTourStop(t,e,i,s,o){let a=new TourStop;return a.target=e,a.title=i,a.description=s,a.mode=o,this.addStops(t,[a]),a}removeTarget(t,e){let i=[];this.stacks[t].forEach(((t,s)=>{t.target===e&&i.push(s)})),i.forEach((e=>{this.stacks[t].splice(e,1)}))}addStops(t,e){this.stacks[t]||(this.stacks[t]=[]),this.stacks[t]=this.stacks[t].concat(e)}hasNext(){return this.stop<this.stacks[this.active].length-1}hasPrev(){return this.stop>0}nextStop(t){this.stop<this.stacks[this.active].length-1&&(this.stop+=1)}prevStop(t){this.stop>0&&(this.stop-=1)}startTour(t){this.active=t,this.dispatchEvent(new CustomEvent("tour-changed",{bubbles:!0,cancelable:!0,composed:!0,detail:this}))}stopTour(t){globalThis.SimplePopoverManager.requestAvailability().setPopover(this,this,!1,this.orientation),this.stop=-1,this.active=null,this.dispatchEvent(new CustomEvent("tour-changed",{bubbles:!0,cancelable:!0,composed:!0,detail:this}))}tourButtons(){return e`<h1 class="title" slot="heading">
        ${this.tourInfo[this.active].name},
        <span class="xofy"
          >${this.stop+1}/${this.stacks[this.active].length}</span
        >
      </h1>
      <simple-icon-button-lite
        id="close"
        slot="heading"
        @click="${this.stopTour.bind(this)}"
        label="Stop Tour"
        icon="close"
      >
      </simple-icon-button-lite>
      <simple-icon-button-lite
        id="prev"
        slot="nav"
        @click="${this.prevStop.bind(this)}"
        ?disabled="${!this.hasPrev()}"
        label="Prev"
        title="Prev"
        icon="arrow-back"
        show-text-label
      >
      </simple-icon-button-lite>
      <simple-icon-button-lite
        id="next"
        slot="nav"
        @click="${this.nextStop.bind(this)}"
        ?disabled="${!this.hasNext()}"
        title="Next"
        label="Next"
        icon="arrow-forward"
        show-text-label
      >
      </simple-icon-button-lite>`}scrollHere(t){"function"==typeof t.scrollIntoViewIfNeeded?t.scrollIntoViewIfNeeded(!0):t.scrollIntoView({behavior:"smooth",inline:"center"})}managerReset(){this.stopTour()}updated(t){t.forEach(((t,o)=>{if("active"==o&&this.active&&(this.stop=0),"stop"==o&&-1!=this.stop||"active"==o&&this.active){i(globalThis.document.createElement("div"),globalThis.SimplePopoverManager.requestAvailability());let t=this.stacks[this.active][this.stop].title,o=this.stacks[this.active][this.stop].description;if("live"==this.stacks[this.active][this.stop].mode){let e=this.stacks[this.active][this.stop].target;e.getAttribute("data-stop-title")&&e.getAttribute(e.getAttribute("data-stop-title"))?t=e.getAttribute(e.getAttribute("data-stop-title")):e.querySelector("[data-stop-title]")&&(t=e.querySelector("[data-stop-title]").innerHTML),o=e.querySelector("[data-stop-content]").innerHTML?e.querySelector("[data-stop-content]").innerHTML:""}let a=e`${this.tourButtons()}
          <h2 class="subheading" slot="body">
            ${s("<span>"+t+"</span>")}
          </h2>
          ${s('<p slot="body">'+o+"</p>")}${this.tourInfo[this.active].style?s("<style>"+this.tourInfo[this.active].style+"</style>"):""}`;i(a,globalThis.SimplePopoverManager.requestAvailability()),globalThis.SimplePopoverManager.requestAvailability().setPopover(this,this.stacks[this.active][this.stop].target,!0,this.orientation,this.active),this.scrollHere(this.stacks[this.active][this.stop].target);let l=this.stacks[this.active][this.stop].target,r=this.stacks[this.active][this.stop].target.getAttribute("part");l.setAttribute("part","simple-tour-active"),setTimeout((()=>{null==r||"simple-tour-active"==r?l.removeAttribute("part"):l.setAttribute("part",r)}),this.activeElementDelay)}}))}static get properties(){return{stop:{type:Number},active:{type:String},stacks:{type:Object},activeElementDelay:{type:Number}}}}class TourStop{constructor(){this.target=null,this.title="Title",this.description="<p>Description</p>"}}customElements.define("simple-tour",SimpleTour);export{SimpleTour,TourStop};globalThis.SimpleTourManager=globalThis.SimpleTourManager||{},globalThis.SimpleTourManager.requestAvailability=()=>(globalThis.SimpleTourManager.instance||(globalThis.SimpleTourManager.instance=globalThis.document.createElement("simple-tour"),globalThis.document.body.appendChild(globalThis.SimpleTourManager.instance)),globalThis.SimpleTourManager.instance);export const SimpleTourManager=globalThis.SimpleTourManager.requestAvailability();