"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[258],{40258:(o,t,i)=>{i.r(t);var n=i(50493),a=(i(89053),i(94430)),e=i(56765),r=i(28120),c=i(99028),p=i(53421),d=i(77675),s=i(15633);let l=class extends((0,r.$)(d.h)((0,p.NC)(p.z2)(d.B4))){constructor(){super(...arguments),this.showGotoTop=!1}get context(){return{title:p.z2.t("text.help")}}render(){const o=this.topic&&`/helps/${this.topic||"index"}.md`;return a.dy`
      <ox-markdown id="content" .src=${o} toc></ox-markdown>

      <div id="navigation">
        <mwc-icon-button icon="home" @click=${()=>(0,d.c4)("help")} ?disabled=${"index"==this.topic}></mwc-icon-button>
        <mwc-icon-button icon="keyboard_arrow_left"  @click=${()=>window.history.back()}></mwc-icon-button icon="">
        <mwc-icon-button icon="keyboard_arrow_right"  @click=${()=>window.history.forward()}></mwc-icon-button icon="">
      </div>      

      ${this.showGotoTop?a.dy` <mwc-icon id="upward" @click=${o=>this.gotoTop(o)}>arrow_upward</mwc-icon> `:a.dy``}
    `}async firstUpdated(){this.content.addEventListener("scroll",(o=>{var t;this.showGotoTop=0!==(null===(t=o.target)||void 0===t?void 0:t.scrollTop)})),await this.requestUpdate();var o=parseFloat(getComputedStyle(this.content,null).getPropertyValue("padding-top"));this.content.style.paddingTop=this.navigation.clientHeight+o+"px",new c.Z(this.navigation,{scroller:this.content}).init()}async pageUpdated(o,t){this.active&&(this.topic=t.params.topic||"index",this.content.scrollTop=0)}gotoTop(o){this.content.scrollTop=0,o.stopPropagation()}};l.styles=[s.Ix,s.Jz,a.iv`
      :host {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
      }

      #navigation {
        position: absolute;
        display: flex;
        width: 100%;
        padding: var(--help-navigation-padding);
        border-bottom: var(--help-navigation-bottom);
        background-color: white;
      }
      #navigation mwc-icon-button {
        padding: var(--help-navigation-icon-padding);
        border-right: var(--help-navigation-icon-border);
        cursor: pointer;
        color: var(--help-icon-color);
      }
      #content {
        flex: 1;

        overflow: auto;
        padding: var(--help-panel-content-padding);
        margin: var(--help-panel-margin);
      }

      #upward {
        --mdc-icon-size: 26px;
        position: absolute;
        bottom: var(--data-list-fab-position-vertical);
        right: var(--data-list-fab-position-horizontal);
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 20px;
        color: var(--data-list-fab-color);
        box-shadow: var(--data-list-fab-shadow);
        padding: 7px;

        scroll-padding-top: 65px;
      }
    `],(0,n.gn)([(0,e.Cb)({type:String})],l.prototype,"topic",void 0),(0,n.gn)([(0,e.Cb)({type:Boolean})],l.prototype,"showGotoTop",void 0),(0,n.gn)([(0,e.IO)("#content")],l.prototype,"content",void 0),(0,n.gn)([(0,e.IO)("#navigation")],l.prototype,"navigation",void 0),l=(0,n.gn)([(0,e.Mo)("ox-help-home")],l)}}]);