{"version":3,"file":"vault-page-container.js","sources":["../../../../../../../frontend/src/vault-page-container/src/vault-page-container.ts"],"sourcesContent":["// main page container for the vault site. header, footer.\nimport { html, css, LitElement, TemplateResult } from \"lit\";\nimport { property, customElement } from \"lit/decorators.js\";\nimport vaultLogo from \"../../images/vault-logo-3.png\";\n\nexport enum TopNavUrlPatterns {\n  Dashboard = \"dashboard\",\n  Collections = \"collections\",\n  Deposit = \"deposit\",\n  Reports = \"reports\",\n  Administration = \"administration\",\n}\n\n@customElement(\"vault-page-container\")\nexport class VaultPageContainer extends LitElement {\n  @property({ type: Boolean }) isAuthenticated: boolean = false;\n  @property({ type: Boolean }) hasReadPermissions: boolean = false;\n  @property({ type: String }) vaultVersion: string = \"\";\n  @property({ type: String }) vaultGitCommitHash: string = \"\";\n  @property({ type: String }) orgName: string | undefined = \"\";\n  @property({ type: String }) username: string | undefined = \"\";\n\n  protected readonly vaultLogo: TemplateResult = html`<img\n    src=${vaultLogo}\n    alt=\"Vault logo\"\n    class=\"vault-logo\"\n  />`;\n\n  protected highlightIfCurrentPage(urlPattern: TopNavUrlPatterns): string {\n    const topLevelPathname = window.location.pathname.split(\"/\")[1];\n    return topLevelPathname === (urlPattern as string) ? \"current-page\" : \"\";\n  }\n\n  render() {\n    return html`\n      <div class=\"page-container\">\n        <nav>\n          <div class=\"main-header-links\">\n            <ul>\n              <li class=\"vault-logo-container\">\n                ${this.hasReadPermissions\n                  ? html`\n                      <a href=\"/${TopNavUrlPatterns.Dashboard}\">\n                        ${this.vaultLogo}\n                      </a>\n                    `\n                  : html`<span>${this.vaultLogo}</span>`}\n              </li>\n              ${this.hasReadPermissions\n                ? html` <li\n                    class=\"header-link ${this.highlightIfCurrentPage(\n                      TopNavUrlPatterns.Dashboard,\n                    )}\"\n                  >\n                    <a href=\"/${TopNavUrlPatterns.Dashboard}\"> Dashboard </a>\n                  </li>`\n                : null}\n              <li\n                class=\"header-link ${this.highlightIfCurrentPage(\n                  TopNavUrlPatterns.Collections,\n                )}\"\n              >\n                <a href=\"/${TopNavUrlPatterns.Collections}\"> Collections </a>\n              </li>\n              ${this.hasReadPermissions\n                ? html`\n                    <li\n                      class=\"header-link ${this.highlightIfCurrentPage(\n                        TopNavUrlPatterns.Deposit,\n                      )}\"\n                    >\n                      <a href=\"/${TopNavUrlPatterns.Deposit}\"> Deposit </a>\n                    </li>\n                    <li\n                      class=\"header-link ${this.highlightIfCurrentPage(\n                        TopNavUrlPatterns.Reports,\n                      )}\"\n                    >\n                      <a href=\"/${TopNavUrlPatterns.Reports}\"> Reports </a>\n                    </li>\n                    <li\n                      class=\"header-link ${this.highlightIfCurrentPage(\n                        TopNavUrlPatterns.Administration,\n                      )}\"\n                    >\n                      <a href=\"/${TopNavUrlPatterns.Administration}\">\n                        Administration\n                      </a>\n                    </li>\n                  `\n                : null}\n            </ul>\n          </div>\n          <div class=\"top-right-nav\">\n            <ul>\n              ${this.isAuthenticated && this.orgName && this.hasReadPermissions\n                ? html`\n                    <li>\n                      <a href=\"/${TopNavUrlPatterns.Dashboard}\">\n                        ${this.orgName}\n                      </a>\n                    </li>\n                  `\n                : null}\n              ${this.isAuthenticated && this.orgName && !this.hasReadPermissions\n                ? html`<li><div>${this.orgName}</div></li>`\n                : null}\n              <li>\n                <a\n                  target=\"_blank\"\n                  href=\"https://vault-webservices.zendesk.com/hc/en-us\"\n                  >Help Center</a\n                >\n              </li>\n              ${this.isAuthenticated\n                ? null\n                : html`<li><a href=\"/accounts/login\">Log In</a></li>`}\n              ${this.isAuthenticated && this.username\n                ? html`\n                    <li class=\"nav-hover-menu\">\n                      Welcome, ${this.username}\n                      <span class=\"menu-arrow\">▾</span>\n                      <menu>\n                        <li>\n                          <a href=\"/accounts/password_change\"\n                            >Change Password</a\n                          >\n                        </li>\n                        <li>\n                          <a href=\"/accounts/logout_then_login\">Logout</a>\n                        </li>\n                      </menu>\n                    </li>\n                  `\n                : null}\n            </ul>\n          </div>\n        </nav>\n        <div class=\"page-content\">\n          <slot></slot>\n        </div>\n        <footer>\n          © Internet Archive Vault — ${this.vaultVersion}\n          <code>(${this.vaultGitCommitHash})</code>\n        </footer>\n      </div>\n    `;\n  }\n\n  static styles = css`\n    div.page-container {\n      height: 100vh;\n      width: 100vw;\n      display: flex;\n      flex-direction: column;\n    }\n\n    nav {\n      width: 100%;\n      height: var(--vault-site-nav-height);\n      background: var(--vault-top-bar-black);\n      display: flex;\n      color: white;\n    }\n\n    ul,\n    menu {\n      margin: 0;\n      padding: 0;\n      display: flex;\n      list-style-type: none;\n    }\n\n    ul li {\n      border-right: 1px solid #3a3a3a;\n    }\n\n    a {\n      display: block;\n      text-decoration: none;\n      color: white;\n    }\n\n    div.main-header-links ul li.current-page {\n      background-color: #d54f46;\n    }\n\n    div.main-header-links ul li a,\n    div.main-header-links ul li span {\n      height: var(--vault-site-nav-height);\n      padding: 0 22px;\n      display: flex;\n      align-items: center;\n      font-size: 14.5px;\n    }\n\n    div.main-header-links ul li.header-link a:hover {\n      background-color: #d54f46;\n    }\n\n    li.vault-logo-container {\n      background: var(--vault-light-blue);\n      margin-left: 16px;\n    }\n\n    img.vault-logo {\n      height: 58px;\n      padding: 4px 0 8px 0;\n    }\n\n    footer {\n      width: 100%;\n      height: var(--vault-site-footer-height);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: var(--vault-light-grey);\n      font-size: 12px;\n    }\n\n    div.top-right-nav {\n      display: flex;\n      justify-content: flex-end;\n      width: 100%;\n      height: 28px;\n    }\n\n    div.top-right-nav ul li {\n      font-size: 12px;\n    }\n\n    li.nav-hover-menu {\n      cursor: pointer;\n    }\n\n    div.top-right-nav li a,\n    div.top-right-nav li div,\n    li.nav-hover-menu {\n      padding: 8px 12px;\n    }\n\n    li.nav-hover-menu menu {\n      display: none;\n      background-color: var(--vault-top-bar-black);\n      position: absolute;\n      top: 28px;\n      right: 0;\n    }\n\n    li.nav-hover-menu:hover menu {\n      display: block;\n    }\n\n    span.menu-arrow {\n      padding-left: 4px;\n    }\n\n    menu li {\n      border-bottom: 1px solid #3a3a3a;\n    }\n\n    menu li:hover {\n      background-color: var(--vault-button-hover-background-color);\n    }\n\n    div.page-content {\n      width: 100%;\n      flex-grow: 1;\n      overflow: auto;\n    }\n\n    code {\n      margin-left: 6px;\n      color: var(--vault-button-border);\n    }\n  `;\n}\n"],"names":["TopNavUrlPatterns","VaultPageContainer","LitElement","constructor","this","isAuthenticated","hasReadPermissions","vaultVersion","vaultGitCommitHash","orgName","username","vaultLogo","html","highlightIfCurrentPage","urlPattern","window","location","pathname","split","render","Dashboard","Collections","Deposit","Reports","Administration","styles","css","__decorate","property","type","Boolean","prototype","String","customElement"],"mappings":"sHAKYA,GAAZ,SAAYA,GACVA,EAAA,UAAA,YACAA,EAAA,YAAA,cACAA,EAAA,QAAA,UACAA,EAAA,QAAA,UACAA,EAAA,eAAA,gBACD,CAND,CAAYA,IAAAA,EAMX,CAAA,IAGM,IAAMC,EAAN,cAAiCC,EAAjC,WAAAC,uBACwBC,KAAeC,iBAAY,EAC3BD,KAAkBE,oBAAY,EAC/BF,KAAYG,aAAW,GACvBH,KAAkBI,mBAAW,GAC7BJ,KAAOK,QAAuB,GAC9BL,KAAQM,SAAuB,GAExCN,KAASO,UAAmBC,CAAI;UAC3CD;;;KA6PT,CAxPW,sBAAAE,CAAuBC,GAE/B,OADyBC,OAAOC,SAASC,SAASC,MAAM,KAAK,KAChCJ,EAAwB,eAAiB,EACvE,CAED,MAAAK,GACE,OAAOP,CAAI;;;;;;kBAMGR,KAAKE,mBACHM,CAAI;kCACUZ,EAAkBoB;0BAC1BhB,KAAKO;;sBAGXC,CAAI,SAASR,KAAKO;;gBAEtBP,KAAKE,mBACHM,CAAI;yCACmBR,KAAKS,uBACxBb,EAAkBoB;;gCAGRpB,EAAkBoB;yBAEhC;;qCAEmBhB,KAAKS,uBACxBb,EAAkBqB;;4BAGRrB,EAAkBqB;;gBAE9BjB,KAAKE,mBACHM,CAAI;;2CAEqBR,KAAKS,uBACxBb,EAAkBsB;;kCAGRtB,EAAkBsB;;;2CAGTlB,KAAKS,uBACxBb,EAAkBuB;;kCAGRvB,EAAkBuB;;;2CAGTnB,KAAKS,uBACxBb,EAAkBwB;;kCAGRxB,EAAkBwB;;;;oBAKlC;;;;;gBAKFpB,KAAKC,iBAAmBD,KAAKK,SAAWL,KAAKE,mBAC3CM,CAAI;;kCAEYZ,EAAkBoB;0BAC1BhB,KAAKK;;;oBAIb;gBACFL,KAAKC,iBAAmBD,KAAKK,UAAYL,KAAKE,mBAC5CM,CAAI,YAAYR,KAAKK,qBACrB;;;;;;;;gBAQFL,KAAKC,gBACH,KACAO,CAAI;gBACNR,KAAKC,iBAAmBD,KAAKM,SAC3BE,CAAI;;iCAEWR,KAAKM;;;;;;;;;;;;;oBAcpB;;;;;;;;uCAQqBN,KAAKG;mBACzBH,KAAKI;;;KAIrB,GAEMP,EAAMwB,OAAGC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAtIUC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAA4C7B,EAAA8B,UAAA,uBAAA,GACjCJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAA+C7B,EAAA8B,UAAA,0BAAA,GACrCJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMG,UAAoC/B,EAAA8B,UAAA,oBAAA,GAC1BJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMG,UAA0C/B,EAAA8B,UAAA,0BAAA,GAChCJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMG,UAA2C/B,EAAA8B,UAAA,eAAA,GACjCJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMG,UAA4C/B,EAAA8B,UAAA,gBAAA,GANnD9B,EAAkB0B,EAAA,CAD9BM,EAAc,yBACFhC"}