@internetarchive/ia-item-navigator 1.0.4-a1 → 1.1.0

package/.github/workflows/ci.yml

@@ -11,12 +11,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
       with:
-        node-version: 15.x
+        node-version: 16.x
 
-    - name: Install dependencies 
+    - name: Install dependencies
       run: yarn install
 
     - name: Run tests
@@ -24,4 +24,3 @@ jobs:
 
     - name: Upload reports
       run: npx codecov
-      

package/.github/workflows/gh-pages-main.yml

@@ -0,0 +1,39 @@
+# This workflow will generate the static page under `main` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time new changes were pushed to the `main` branch
+
+name: App build CI/CD to main branch
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Install dependencies
+        run: yarn install
+  
+      - name: Create build files for gh-pages deploy
+        run: yarn ghpages:build
+
+      # Reference: https://github.com/JamesIves/github-pages-deploy-action
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
+        with:
+          branch: gh-pages
+          folder: ghpages
+          clean-exclude: pr/
+          force: false
+          target-folder: main
+          token: ${{ secrets.GH_TOKEN }}

package/.github/workflows/pr-preview.yml

@@ -0,0 +1,38 @@
+# This workflow will generate the static page under `pr` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time there's a PR opened, reopened, synchronize, or closed
+
+name: Deploy PR previews
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Install and Build
+        run: |
+          yarn install
+          yarn ghpages:build
+
+      # Reference: https://github.com/rossjrw/pr-preview-action
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./ghpages/
+          umbrella-dir: pr

package/demo/app-root.ts

@@ -12,8 +12,9 @@ import { ItemNavigator } from '../src/item-navigator';
 import '../src/item-navigator';
 import {
   MenuShortcutInterface,
-  MenuDetailsInterface,
+  MenuProviderInterface,
 } from '../src/interfaces/menu-interfaces';
+
 @customElement('app-root')
 export class AppRoot extends LitElement {
   /**
@@ -26,22 +27,20 @@ export class AppRoot extends LitElement {
   @property({ attribute: false }) sharedObserver = new SharedResizeObserver();
 
   @property({ type: Array, attribute: false })
-  menuContents: MenuDetailsInterface[] = [];
+  menuContents: MenuProviderInterface[] = [];
 
   @property({ type: Array, attribute: false })
   menuShortcuts: MenuShortcutInterface[] = [];
 
-  @property({ reflect: true, attribute: true }) fullscreen:
-    | boolean
-    | null = null;
+  @property({ reflect: true, attribute: true }) fullscreen: boolean | null =
+    null;
 
   @property({ reflect: true, attribute: true }) headerOn: true | null = null;
 
-  @property({ reflect: true, attribute: true }) loaded = true;
+  @property({ reflect: true, attribute: true }) loaded: true | null = true;
 
-  @property({ reflect: true, attribute: true }) showPlaceholder:
-    | true
-    | null = null;
+  @property({ reflect: true, attribute: true }) showPlaceholder: true | null =
+    null;
 
   @property({ reflect: true, attribute: true }) showTheaterExample:
     | true
@@ -56,7 +55,7 @@ export class AppRoot extends LitElement {
     console.log(
       '<app-root> component has loaded',
       this.modalMgr,
-      this.sharedObserver
+      this.sharedObserver,
     );
 
     this.itemNav.viewAvailable = false;
@@ -76,7 +75,7 @@ export class AppRoot extends LitElement {
     if (mdResponse.error) {
       console.log('MD Fetch error: ', mdResponse.error);
       (window as any).confirm(
-        'There was an error fetching response, please check dev console'
+        'There was an error fetching response, please check dev console',
       );
       return;
     }
@@ -120,7 +119,8 @@ export class AppRoot extends LitElement {
   }
 
   toggleLoader() {
-    this.loaded = !this.loaded;
+    const nextState = this.loaded === true ? null : true;
+    this.loaded = nextState;
   }
 
   togglePlaceholder() {
@@ -162,7 +162,7 @@ export class AppRoot extends LitElement {
         label: 'Exit',
         selected: false,
       },
-    ];
+    ] as any as MenuProviderInterface[];
 
     this.fullscreen = nextState;
   }

package/dist/demo/app-root.d.ts

@@ -4,7 +4,7 @@ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/modal-manager';
 import '../src/item-navigator';
-import { MenuShortcutInterface, MenuDetailsInterface } from '../src/interfaces/menu-interfaces';
+import { MenuShortcutInterface, MenuProviderInterface } from '../src/interfaces/menu-interfaces';
 export declare class AppRoot extends LitElement {
     /**
      * Example controller to connect to `<ia-item-navigator>`
@@ -12,11 +12,11 @@ export declare class AppRoot extends LitElement {
     itemMD?: MetadataResponse;
     encodedManifest: string;
     sharedObserver: SharedResizeObserver;
-    menuContents: MenuDetailsInterface[];
+    menuContents: MenuProviderInterface[];
     menuShortcuts: MenuShortcutInterface[];
     fullscreen: boolean | null;
     headerOn: true | null;
-    loaded: boolean;
+    loaded: true | null;
     showPlaceholder: true | null;
     showTheaterExample: true | null;
     private itemNav;

package/dist/demo/app-root.js

@@ -71,7 +71,8 @@ let AppRoot = class AppRoot extends LitElement {
         this.headerOn = this.headerOn ? null : true;
     }
     toggleLoader() {
-        this.loaded = !this.loaded;
+        const nextState = this.loaded === true ? null : true;
+        this.loaded = nextState;
     }
     togglePlaceholder() {
         this.toggleLoader();

package/dist/demo/app-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-restricted-globals */\nimport { html, css, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  MetadataResponse,\n  SearchService,\n} from '@internetarchive/search-service';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/modal-manager';\nimport { ItemNavigator } from '../src/item-navigator';\nimport '../src/item-navigator';\nimport {\n  MenuShortcutInterface,\n  MenuDetailsInterface,\n} from '../src/interfaces/menu-interfaces';\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  /**\n   * Example controller to connect to `<ia-item-navigator>`\n   */\n  @property({ type: Object }) itemMD?: MetadataResponse;\n\n  @property({ type: String }) encodedManifest = '';\n\n  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\n\n  @property({ type: Array, attribute: false })\n  menuContents: MenuDetailsInterface[] = [];\n\n  @property({ type: Array, attribute: false })\n  menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ reflect: true, attribute: true }) fullscreen:\n    | boolean\n    | null = null;\n\n  @property({ reflect: true, attribute: true }) headerOn: true | null = null;\n\n  @property({ reflect: true, attribute: true }) loaded = true;\n\n  @property({ reflect: true, attribute: true }) showPlaceholder:\n    | true\n    | null = null;\n\n  @property({ reflect: true, attribute: true }) showTheaterExample:\n    | true\n    | null = true;\n\n  @query('ia-item-navigator') private itemNav!: ItemNavigator;\n\n  @query('modal-manager') modalMgr!: ModalManager;\n\n  firstUpdated() {\n    this.fetchItemMD();\n    console.log(\n      '<app-root> component has loaded',\n      this.modalMgr,\n      this.sharedObserver\n    );\n\n    this.itemNav.viewAvailable = false;\n  }\n\n  updated(changed: any) {\n    console.log('changed', changed);\n    if (changed.has('itemMD')) {\n      this.fullscreenCheck();\n    }\n  }\n\n  async fetchItemMD() {\n    const searchService = SearchService.default;\n    const mdResponse = await searchService.fetchMetadata('ux-team-books');\n\n    if (mdResponse.error) {\n      console.log('MD Fetch error: ', mdResponse.error);\n      (window as any).confirm(\n        'There was an error fetching response, please check dev console'\n      );\n      return;\n    }\n\n    console.log('mdResponse.success', JSON.stringify(mdResponse.success));\n    this.itemMD = mdResponse.success;\n  }\n\n  get theaterReady(): boolean {\n    return this.modalMgr && this.sharedObserver && !!this.itemMD;\n  }\n\n  get urlParams(): URLSearchParams {\n    return new URLSearchParams(location.search.slice(1));\n  }\n\n  /** Fullscreen */\n  get showFullscreen(): boolean {\n    return this.urlParams.get('view') === 'theater';\n  }\n\n  /** sets url query param `view=theater` to toggle fullscreen */\n  toggleFS(): void {\n    if (this.urlParams.get('view')) {\n      location.search = '';\n    } else {\n      location.search = 'view=theater';\n    }\n  }\n\n  /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */\n  fullscreenCheck(): void {\n    if (this.showFullscreen && this.itemNav) {\n      this.fullscreen = true;\n    }\n  }\n  /** End fullscreen */\n\n  toggleHeader() {\n    this.headerOn = this.headerOn ? null : true;\n  }\n\n  toggleLoader() {\n    this.loaded = !this.loaded;\n  }\n\n  togglePlaceholder() {\n    this.toggleLoader();\n    const show = this.showPlaceholder ? null : true;\n    this.showPlaceholder = show;\n  }\n\n  toggleImmersion() {\n    const nextState = this.fullscreen ? null : true;\n    if (!nextState) {\n      this.menuShortcuts = [];\n      return;\n    }\n    this.menuShortcuts = [\n      {\n        icon: html`<button\n          @click=${() => {\n            this.fullscreen = null;\n            this.menuContents = [];\n            this.menuShortcuts = [];\n          }}\n        >\n          Exit\n        </button>`,\n        id: 'exit',\n      },\n    ];\n    this.menuContents = [\n      {\n        icon: html`<button\n          @click=${() => {\n            this.fullscreen = null;\n          }}\n        >\n          Exit\n        </button>`,\n        id: 'exit',\n        label: 'Exit',\n        selected: false,\n      },\n    ];\n\n    this.fullscreen = nextState;\n  }\n\n  toggleTheaterExample() {\n    if (this.showTheaterExample) {\n      // turn on placeholder\n      this.showPlaceholder = true;\n      // turn off example\n      this.showTheaterExample = null;\n\n      this.menuContents = [];\n      this.menuShortcuts = [];\n      return;\n    }\n\n    // turn off placeholder\n    this.showPlaceholder = null;\n    this.showTheaterExample = true;\n\n    const x = {\n      icon: html`<p style=\"color: red\">Allo</p>`,\n      id: 'a',\n      label: 'Hello world',\n      menuDetails: html`<h3>Wheee!</h3>`,\n    } as any;\n    this.menuContents = [x];\n    this.menuShortcuts = [x];\n  }\n\n  /** Views */\n  get theaterExample(): TemplateResult {\n    return html`\n      <div slot=\"main\">\n        <div class=\"theater-example\">\n          <img\n            alt=\"cat theater\"\n            src=\"https://archive.org/download/encyclopediaofca0000poll_t2e2/__ia_thumb.jpg\"\n          />\n          <h3>Welcome to Cat Theater</h3>\n        </div>\n      </div>\n    `;\n  }\n\n  get headerExample(): TemplateResult {\n    return html`\n      <div slot=\"header\">\n        <div class=\"embed-link\">\n          <img\n            src=\"https://archive.org/images/glogo-jw.png\"\n            alt=\"glowing ia logo\"\n          />\n          <a href=\"/details/goody\">\n            The history of Little Goody Two-Shoes : otherwise called Mrs.\n            Margery Two-Shoes ... [1766 edition]\n          </a>\n        </div>\n      </div>\n    `;\n  }\n\n  get isViewAvailable(): boolean {\n    if (this.showTheaterExample) {\n      return true;\n    }\n    return false;\n  }\n\n  render(): TemplateResult {\n    const {\n      isViewAvailable,\n      loaded,\n      showPlaceholder,\n      headerOn,\n      fullscreen,\n      menuContents,\n      menuShortcuts,\n      showTheaterExample,\n    } = this;\n    console.log('&&&& item nav properties', {\n      loaded,\n      headerOn,\n      isViewAvailable,\n      showTheaterExample,\n      showPlaceholder,\n      fullscreen,\n      menuContents,\n      menuShortcuts,\n    });\n    return html`\n      <h1>theater, in page</h1>\n      <section>\n        <ia-item-navigator\n          baseHost=\"https://archive.org\"\n          .item=${this.itemMD}\n          .modal=${this.modalMgr}\n          .sharedObserver=${this.sharedObserver}\n          .loaded=${this.loaded}\n          ?viewAvailable=${!!this.showTheaterExample}\n          .menuContents=${this.menuContents}\n          .menuShortcuts=${this.menuShortcuts}\n          .viewportInFullscreen=${this.fullscreen}\n        >\n          ${this.headerOn ? this.headerExample : ''}\n          ${this.showTheaterExample ? this.theaterExample : ''}\n        </ia-item-navigator>\n      </section>\n      <div>\n        <button @click=${this.toggleHeader}>toggle header</button>\n        <button @click=${this.toggleLoader}>toggle loader</button>\n        <button @click=${this.togglePlaceholder}>toggle placeholder</button>\n        <button @click=${this.toggleTheaterExample}>toggle new theater</button>\n        <button @click=${this.toggleImmersion}>toggle immersion</button>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  static styles = css`\n    :host([fullscreen]),\n    :host([fullscreen]) section {\n      height: 100vh;\n      width: 100vw;\n    }\n\n    :host([fullscreen]) h1 {\n      display: none;\n    }\n\n    h1 {\n      color: black;\n    }\n\n    section {\n      border: 1px solid pink;\n      color: #222;\n      height: calc(100vh - 200px);\n    }\n\n    :host,\n    ia-item-navigator {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .embed-link {\n      height: 55px;\n      border: 1px solid yellow;\n    }\n\n    .theater-example {\n      color: white;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      margin: 10px;\n      border: 5px dotted yellow;\n      flex: 1;\n    }\n\n    div[slot='main'] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    div[slot='main'] > * {\n      flex: 1;\n    }\n\n    modal-manager[mode='closed'] {\n      display: none;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-restricted-globals */\nimport { html, css, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  MetadataResponse,\n  SearchService,\n} from '@internetarchive/search-service';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/modal-manager';\nimport { ItemNavigator } from '../src/item-navigator';\nimport '../src/item-navigator';\nimport {\n  MenuShortcutInterface,\n  MenuProviderInterface,\n} from '../src/interfaces/menu-interfaces';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  /**\n   * Example controller to connect to `<ia-item-navigator>`\n   */\n  @property({ type: Object }) itemMD?: MetadataResponse;\n\n  @property({ type: String }) encodedManifest = '';\n\n  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\n\n  @property({ type: Array, attribute: false })\n  menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array, attribute: false })\n  menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ reflect: true, attribute: true }) fullscreen: boolean | null =\n    null;\n\n  @property({ reflect: true, attribute: true }) headerOn: true | null = null;\n\n  @property({ reflect: true, attribute: true }) loaded: true | null = true;\n\n  @property({ reflect: true, attribute: true }) showPlaceholder: true | null =\n    null;\n\n  @property({ reflect: true, attribute: true }) showTheaterExample:\n    | true\n    | null = true;\n\n  @query('ia-item-navigator') private itemNav!: ItemNavigator;\n\n  @query('modal-manager') modalMgr!: ModalManager;\n\n  firstUpdated() {\n    this.fetchItemMD();\n    console.log(\n      '<app-root> component has loaded',\n      this.modalMgr,\n      this.sharedObserver,\n    );\n\n    this.itemNav.viewAvailable = false;\n  }\n\n  updated(changed: any) {\n    console.log('changed', changed);\n    if (changed.has('itemMD')) {\n      this.fullscreenCheck();\n    }\n  }\n\n  async fetchItemMD() {\n    const searchService = SearchService.default;\n    const mdResponse = await searchService.fetchMetadata('ux-team-books');\n\n    if (mdResponse.error) {\n      console.log('MD Fetch error: ', mdResponse.error);\n      (window as any).confirm(\n        'There was an error fetching response, please check dev console',\n      );\n      return;\n    }\n\n    console.log('mdResponse.success', JSON.stringify(mdResponse.success));\n    this.itemMD = mdResponse.success;\n  }\n\n  get theaterReady(): boolean {\n    return this.modalMgr && this.sharedObserver && !!this.itemMD;\n  }\n\n  get urlParams(): URLSearchParams {\n    return new URLSearchParams(location.search.slice(1));\n  }\n\n  /** Fullscreen */\n  get showFullscreen(): boolean {\n    return this.urlParams.get('view') === 'theater';\n  }\n\n  /** sets url query param `view=theater` to toggle fullscreen */\n  toggleFS(): void {\n    if (this.urlParams.get('view')) {\n      location.search = '';\n    } else {\n      location.search = 'view=theater';\n    }\n  }\n\n  /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */\n  fullscreenCheck(): void {\n    if (this.showFullscreen && this.itemNav) {\n      this.fullscreen = true;\n    }\n  }\n  /** End fullscreen */\n\n  toggleHeader() {\n    this.headerOn = this.headerOn ? null : true;\n  }\n\n  toggleLoader() {\n    const nextState = this.loaded === true ? null : true;\n    this.loaded = nextState;\n  }\n\n  togglePlaceholder() {\n    this.toggleLoader();\n    const show = this.showPlaceholder ? null : true;\n    this.showPlaceholder = show;\n  }\n\n  toggleImmersion() {\n    const nextState = this.fullscreen ? null : true;\n    if (!nextState) {\n      this.menuShortcuts = [];\n      return;\n    }\n    this.menuShortcuts = [\n      {\n        icon: html`<button\n          @click=${() => {\n            this.fullscreen = null;\n            this.menuContents = [];\n            this.menuShortcuts = [];\n          }}\n        >\n          Exit\n        </button>`,\n        id: 'exit',\n      },\n    ];\n    this.menuContents = [\n      {\n        icon: html`<button\n          @click=${() => {\n            this.fullscreen = null;\n          }}\n        >\n          Exit\n        </button>`,\n        id: 'exit',\n        label: 'Exit',\n        selected: false,\n      },\n    ] as any as MenuProviderInterface[];\n\n    this.fullscreen = nextState;\n  }\n\n  toggleTheaterExample() {\n    if (this.showTheaterExample) {\n      // turn on placeholder\n      this.showPlaceholder = true;\n      // turn off example\n      this.showTheaterExample = null;\n\n      this.menuContents = [];\n      this.menuShortcuts = [];\n      return;\n    }\n\n    // turn off placeholder\n    this.showPlaceholder = null;\n    this.showTheaterExample = true;\n\n    const x = {\n      icon: html`<p style=\"color: red\">Allo</p>`,\n      id: 'a',\n      label: 'Hello world',\n      menuDetails: html`<h3>Wheee!</h3>`,\n    } as any;\n    this.menuContents = [x];\n    this.menuShortcuts = [x];\n  }\n\n  /** Views */\n  get theaterExample(): TemplateResult {\n    return html`\n      <div slot=\"main\">\n        <div class=\"theater-example\">\n          <img\n            alt=\"cat theater\"\n            src=\"https://archive.org/download/encyclopediaofca0000poll_t2e2/__ia_thumb.jpg\"\n          />\n          <h3>Welcome to Cat Theater</h3>\n        </div>\n      </div>\n    `;\n  }\n\n  get headerExample(): TemplateResult {\n    return html`\n      <div slot=\"header\">\n        <div class=\"embed-link\">\n          <img\n            src=\"https://archive.org/images/glogo-jw.png\"\n            alt=\"glowing ia logo\"\n          />\n          <a href=\"/details/goody\">\n            The history of Little Goody Two-Shoes : otherwise called Mrs.\n            Margery Two-Shoes ... [1766 edition]\n          </a>\n        </div>\n      </div>\n    `;\n  }\n\n  get isViewAvailable(): boolean {\n    if (this.showTheaterExample) {\n      return true;\n    }\n    return false;\n  }\n\n  render(): TemplateResult {\n    const {\n      isViewAvailable,\n      loaded,\n      showPlaceholder,\n      headerOn,\n      fullscreen,\n      menuContents,\n      menuShortcuts,\n      showTheaterExample,\n    } = this;\n    console.log('&&&& item nav properties', {\n      loaded,\n      headerOn,\n      isViewAvailable,\n      showTheaterExample,\n      showPlaceholder,\n      fullscreen,\n      menuContents,\n      menuShortcuts,\n    });\n    return html`\n      <h1>theater, in page</h1>\n      <section>\n        <ia-item-navigator\n          baseHost=\"https://archive.org\"\n          .item=${this.itemMD}\n          .modal=${this.modalMgr}\n          .sharedObserver=${this.sharedObserver}\n          .loaded=${this.loaded}\n          ?viewAvailable=${!!this.showTheaterExample}\n          .menuContents=${this.menuContents}\n          .menuShortcuts=${this.menuShortcuts}\n          .viewportInFullscreen=${this.fullscreen}\n        >\n          ${this.headerOn ? this.headerExample : ''}\n          ${this.showTheaterExample ? this.theaterExample : ''}\n        </ia-item-navigator>\n      </section>\n      <div>\n        <button @click=${this.toggleHeader}>toggle header</button>\n        <button @click=${this.toggleLoader}>toggle loader</button>\n        <button @click=${this.togglePlaceholder}>toggle placeholder</button>\n        <button @click=${this.toggleTheaterExample}>toggle new theater</button>\n        <button @click=${this.toggleImmersion}>toggle immersion</button>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  static styles = css`\n    :host([fullscreen]),\n    :host([fullscreen]) section {\n      height: 100vh;\n      width: 100vw;\n    }\n\n    :host([fullscreen]) h1 {\n      display: none;\n    }\n\n    h1 {\n      color: black;\n    }\n\n    section {\n      border: 1px solid pink;\n      color: #222;\n      height: calc(100vh - 200px);\n    }\n\n    :host,\n    ia-item-navigator {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .embed-link {\n      height: 55px;\n      border: 1px solid yellow;\n    }\n\n    .theater-example {\n      color: white;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      margin: 10px;\n      border: 5px dotted yellow;\n      flex: 1;\n    }\n\n    div[slot='main'] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    div[slot='main'] > * {\n      flex: 1;\n    }\n\n    modal-manager[mode='closed'] {\n      display: none;\n    }\n  `;\n}\n"]}

package/dist/src/interfaces/menu-interfaces.d.ts

@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
 import { MetadataResponse } from '@internetarchive/search-service';
-export declare type MenuId = string;
+export type MenuId = string;
 export interface MenuShortcutInterface {
     icon: TemplateResult;
     id: MenuId;
@@ -19,4 +19,5 @@ export interface MenuProviderBaseConfigInterface {
     updated?: any;
 }
 export interface MenuProviderInterface extends MenuProviderBaseConfigInterface, MenuDetailsInterface, MenuShortcutInterface {
+    actionButton: TemplateResult;
 }

package/dist/src/interfaces/menu-interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/menu-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nexport type MenuId = string;\nexport interface MenuShortcutInterface {\n  icon: TemplateResult;\n  id: MenuId;\n}\n\nexport interface MenuDetailsInterface extends MenuShortcutInterface {\n  label: string;\n  menuDetails?: TemplateResult;\n  selected?: boolean;\n  followable?: boolean;\n  href?: string;\n}\n\nexport interface MenuProviderBaseConfigInterface {\n  item: MetadataResponse;\n  baseHost: string;\n  subPrefix: string;\n  updated?: any;\n}\nexport interface MenuProviderInterface\n  extends MenuProviderBaseConfigInterface,\n    MenuDetailsInterface,\n    MenuShortcutInterface {}\n"]}
+{"version":3,"file":"menu-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/menu-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nexport type MenuId = string;\nexport interface MenuShortcutInterface {\n  icon: TemplateResult;\n  id: MenuId;\n}\n\nexport interface MenuDetailsInterface extends MenuShortcutInterface {\n  label: string;\n  menuDetails?: TemplateResult;\n  selected?: boolean;\n  followable?: boolean;\n  href?: string;\n}\n\nexport interface MenuProviderBaseConfigInterface {\n  item: MetadataResponse;\n  baseHost: string;\n  subPrefix: string;\n  updated?: any;\n}\nexport interface MenuProviderInterface\n  extends MenuProviderBaseConfigInterface,\n    MenuDetailsInterface,\n    MenuShortcutInterface {\n  actionButton: TemplateResult;\n}\n"]}

package/dist/src/item-navigator.js

@@ -70,7 +70,9 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         return html `
       <div class="loading-area">
         <div class="loading-view">
-          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
+          <ia-itemnav-loader
+            .loaderMessage=${this.loaderTitle}
+          ></ia-itemnav-loader>
         </div>
       </div>
     `;

package/dist/src/item-navigator.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  PropertyValues,\n  CSSResult,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n  SharedResizeObserver,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\n\nimport './menu-slider/ia-menu-slider';\nimport './loader';\n\nimport {\n  ToggleSideMenuOpenEvent,\n  ToggleSidePanelOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  loadingStateUpdatedEvent,\n  ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface {\n  @property({\n    type: Object,\n    converter: (value: string | MetadataResponse | null): MetadataResponse => {\n      if (value && typeof value === 'string') {\n        return new MetadataResponse(JSON.parse(atob(value)));\n      }\n      return value as MetadataResponse;\n    },\n  })\n  item?: MetadataResponse;\n\n  @property({ type: Boolean }) viewAvailable: Boolean = true;\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({\n    converter: (arg: string | boolean | null) => {\n      if (typeof arg === 'boolean') {\n        return arg;\n      }\n      return arg === 'true';\n    },\n  })\n  signedIn = false;\n\n  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: true })\n  viewportInFullscreen: boolean | null = null;\n\n  @property({ type: Boolean }) menuOpened = false;\n\n  @property({ type: String }) openMenu?: MenuId;\n\n  @property({ attribute: false }) modal?: ModalManager;\n\n  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n    | true\n    | null = null;\n\n  @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n  @query('#frame') private frame!: HTMLDivElement;\n\n  @query('slot[name=\"header\"]') private headerSlot!: HTMLSlotElement;\n\n  @query('slot[name=\"main\"]') private mainSlot!: HTMLSlotElement;\n\n  disconnectedCallback() {\n    this.removeResizeObserver();\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharedObserver')) {\n      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n      oldObserver?.removeObserver(this.resizeObserverConfig);\n      this.setResizeObserver();\n    }\n  }\n\n  /** Shared observer */\n  handleResize(entry: ResizeObserverEntry): void {\n    const { width } = entry.contentRect;\n    if (width <= 600) {\n      this.openMenuState = 'overlay';\n      return;\n    }\n    this.openMenuState = 'shift';\n  }\n\n  private setResizeObserver(): void {\n    this.sharedObserver?.addObserver(this.resizeObserverConfig);\n    this.sharedObserver?.addObserver({\n      target: this.headerSlot,\n      handler: {\n        handleResize: ({ contentRect }) => {\n          if (contentRect.height) {\n            this.requestUpdate();\n          }\n        },\n      },\n    });\n  }\n\n  private removeResizeObserver(): void {\n    this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n  }\n\n  get resizeObserverConfig(): {\n    handler: SharedResizeObserverResizeHandlerInterface;\n    target: Element;\n  } {\n    return {\n      handler: this,\n      target: this.frame,\n    };\n  }\n  /** End shared observer */\n\n  get loaderTitle() {\n    return this.viewportInFullscreen ? 'Internet Archive' : '';\n  }\n\n  get loadingArea() {\n    return html`\n      <div class=\"loading-area\">\n        <div class=\"loading-view\">\n          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n        </div>\n      </div>\n    `;\n  }\n\n  slotChange(e: Event, type: 'header' | 'main'): void {\n    const slottedContent = (e.target as HTMLSlotElement).assignedNodes()?.[0] as HTMLElement;\n\n    this.dispatchEvent(\n      new CustomEvent('slotChange', {\n        detail: { slot: slottedContent, type },\n      })\n    );\n    this.requestUpdate();\n  }\n\n  render(): TemplateResult {\n    const displayReaderClass = this.loaded ? '' : 'hidden';\n    const headerHeight =\n      (this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;\n    return html`\n      <div id=\"frame\" class=${this.menuClass}>\n        <slot\n          name=\"header\"\n          style=${`height: ${headerHeight}px`}\n          @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n        ></slot>\n        <div class=\"menu-and-reader\">\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          <div id=\"reader\" class=${displayReaderClass}>\n            ${this.renderViewport}\n          </div>\n          ${!this.loaded ? this.loadingArea : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  get noTheaterView() {\n    return html`<ia-no-theater-available\n      .identifier=${this.item?.metadata?.identifier}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n    ></ia-no-theater-available>`;\n  }\n\n  get renderViewport(): TemplateResult | typeof nothing {\n    if (!this.viewAvailable) {\n      return this.noTheaterView;\n    }\n\n    const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n    return html`\n      <div slot=\"main\" style=${slotVisibility}>\n        <slot\n          name=\"main\"\n          @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n        ></slot>\n      </div>\n    `;\n  }\n\n  loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n    const { loaded } = e.detail;\n    this.loaded = loaded || null;\n  }\n\n  /** Fullscreen Management */\n  manageViewportFullscreen(e: ManageFullscreenEvent): void {\n    const fullscreenStatus = !!e.detail.isFullScreen;\n    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n    const event = new CustomEvent('fullscreenToggled', {\n      detail: e.detail,\n    }) as ManageFullscreenEvent;\n\n    this.dispatchEvent(event);\n  }\n  /** End Fullscreen Management */\n\n  /** Side menu */\n  get shouldRenderMenu(): boolean {\n    return !!this.menuContents?.length;\n  }\n\n  toggleMenu(): void {\n    this.menuOpened = !this.menuOpened;\n  }\n\n  closeMenu(): void {\n    this.menuOpened = false;\n  }\n\n  setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n    const { id } = e.detail;\n    this.openMenu = id !== this.openMenu ? id : undefined;\n  }\n\n  setMenuContents(e: SetSideMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n    this.menuShortcuts = [...e.detail];\n  }\n\n  /** Toggles Side Menu & Sets viewable subpanel  */\n  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n    const { menuId, action } = e.detail;\n    if (!menuId) {\n      return;\n    }\n\n    if (action === 'open') {\n      this.openShortcut(menuId);\n    } else if (action === 'toggle') {\n      this.openMenu = menuId;\n      this.toggleMenu();\n    }\n  }\n\n  get menuToggleButton() {\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${this.toggleMenu}\n        title=\"Toggle theater side panels\"\n      >\n        <div>\n          <ia-icon-ellipses\n            style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n          ></ia-icon-ellipses>\n        </div>\n      </button>\n    `;\n  }\n\n  get selectedMenuId(): MenuId | '' {\n    return this.openMenu || '';\n  }\n\n  get renderSideMenu(): TemplateResult {\n    const drawerState = this.menuOpened ? '' : 'hidden';\n    return html`\n      <nav>\n        <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n        <div id=\"menu\" class=${drawerState}>\n          <ia-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.selectedMenuId}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuSliderClosed=${this.closeMenu}\n            manuallyHandleClose\n            open\n          ></ia-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  openShortcut(selectedMenuId: MenuId = ''): void {\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n      if (id === 'fullscreen') {\n        return html`${icon}`;\n      }\n\n      return html`\n        <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n          ${icon}\n        </button>\n      `;\n    });\n    return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n  }\n  /** End Menu Shortcuts */\n\n  /** Misc Render */\n  get menuClass(): string {\n    const hasMenuOrShortcuts =\n      this.menuContents?.length || this.menuShortcuts?.length;\n    const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';\n    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n    return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n  }\n\n  static get styles(): CSSResult {\n    const subnavWidth = css`var(--menuWidth, 320px)`;\n    const transitionTiming = css`var(--animationTiming, 200ms)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n    const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n    const theaterBg = css`var(--theaterBgColor, #000)`;\n\n    return css`\n      :host,\n      #frame,\n      .menu-and-reader {\n        position: relative;\n        overflow: hidden;\n        display: block;\n      }\n\n      :host,\n      #frame,\n      .loading-area,\n      .loading-view {\n        min-height: inherit;\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n        width: 100%;\n      }\n\n      slot * {\n        display: block;\n        height: inherit;\n      }\n\n      #frame {\n        background-color: ${theaterBg};\n        color-scheme: dark;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #frame.fullscreen {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 9;\n      }\n\n      .loading-view {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .loading-area {\n        width: 100%;\n      }\n\n      ia-itemnav-loader {\n        display: block;\n        width: 100%;\n      }\n\n      .hidden {\n        display: none !important;\n      }\n\n      button {\n        cursor: pointer;\n        padding: 0;\n        border: 0;\n      }\n\n      button:focus,\n      button:active {\n        outline: none;\n      }\n\n      .menu-and-reader {\n        position: relative;\n        display: flex;\n        flex: 1;\n      }\n\n      nav button {\n        background: none;\n      }\n\n      nav .minimized {\n        background: rgba(0, 0, 0, 0.7);\n        padding-top: 6px;\n        position: absolute;\n        width: ${menuMargin};\n        z-index: 2;\n        left: 0;\n        border-bottom-right-radius: 5%;\n      }\n\n      nav .minimized button {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin-bottom: 0.2rem;\n        margin: auto;\n        display: inline-flex;\n        vertical-align: middle;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        width: ${menuMargin};\n        height: ${menuMargin};\n      }\n\n      nav .minimized button.toggle-menu > * {\n        border: 2px solid var(--iconStrokeColor);\n        border-radius: var(--iconWidth);\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n      }\n\n      ia-icon-ellipses {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n      }\n\n      #menu {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 3;\n        overflow: hidden;\n        transform: translateX(-${subnavWidth});\n        width: ${subnavWidth};\n        transform: translateX(calc(${subnavWidth} * -1));\n        transition: ${transitionEffect};\n      }\n\n      #reader {\n        position: relative;\n        z-index: 1;\n        transform: translateX(0);\n        width: 100%;\n        display: flex;\n      }\n\n      #reader > * {\n        width: 100%;\n        display: flex;\n        flex: 1;\n      }\n\n      .open.overlay #reader {\n        transition: none;\n      }\n\n      .open #menu {\n        width: ${subnavWidth};\n        transform: translateX(0);\n        transition: ${transitionEffect};\n      }\n\n      .open.shift #reader {\n        width: calc(100% - ${subnavWidth});\n        margin-left: ${subnavWidth};\n        transition: ${transitionEffect};\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  PropertyValues,\n  CSSResult,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n  SharedResizeObserver,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\n\nimport './menu-slider/ia-menu-slider';\nimport './loader';\n\nimport {\n  ToggleSideMenuOpenEvent,\n  ToggleSidePanelOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  loadingStateUpdatedEvent,\n  ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({\n    type: Object,\n    converter: (value: string | MetadataResponse | null): MetadataResponse => {\n      if (value && typeof value === 'string') {\n        return new MetadataResponse(JSON.parse(atob(value)));\n      }\n      return value as MetadataResponse;\n    },\n  })\n  item?: MetadataResponse;\n\n  @property({ type: Boolean }) viewAvailable: Boolean = true;\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({\n    converter: (arg: string | boolean | null) => {\n      if (typeof arg === 'boolean') {\n        return arg;\n      }\n      return arg === 'true';\n    },\n  })\n  signedIn = false;\n\n  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: true })\n  viewportInFullscreen: boolean | null = null;\n\n  @property({ type: Boolean }) menuOpened = false;\n\n  @property({ type: String }) openMenu?: MenuId;\n\n  @property({ attribute: false }) modal?: ModalManager;\n\n  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n    | true\n    | null = null;\n\n  @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n  @query('#frame') private frame!: HTMLDivElement;\n\n  @query('slot[name=\"header\"]') private headerSlot!: HTMLSlotElement;\n\n  @query('slot[name=\"main\"]') private mainSlot!: HTMLSlotElement;\n\n  disconnectedCallback() {\n    this.removeResizeObserver();\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharedObserver')) {\n      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n      oldObserver?.removeObserver(this.resizeObserverConfig);\n      this.setResizeObserver();\n    }\n  }\n\n  /** Shared observer */\n  handleResize(entry: ResizeObserverEntry): void {\n    const { width } = entry.contentRect;\n    if (width <= 600) {\n      this.openMenuState = 'overlay';\n      return;\n    }\n    this.openMenuState = 'shift';\n  }\n\n  private setResizeObserver(): void {\n    this.sharedObserver?.addObserver(this.resizeObserverConfig);\n    this.sharedObserver?.addObserver({\n      target: this.headerSlot,\n      handler: {\n        handleResize: ({ contentRect }) => {\n          if (contentRect.height) {\n            this.requestUpdate();\n          }\n        },\n      },\n    });\n  }\n\n  private removeResizeObserver(): void {\n    this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n  }\n\n  get resizeObserverConfig(): {\n    handler: SharedResizeObserverResizeHandlerInterface;\n    target: Element;\n  } {\n    return {\n      handler: this,\n      target: this.frame,\n    };\n  }\n  /** End shared observer */\n\n  get loaderTitle() {\n    return this.viewportInFullscreen ? 'Internet Archive' : '';\n  }\n\n  get loadingArea() {\n    return html`\n      <div class=\"loading-area\">\n        <div class=\"loading-view\">\n          <ia-itemnav-loader\n            .loaderMessage=${this.loaderTitle}\n          ></ia-itemnav-loader>\n        </div>\n      </div>\n    `;\n  }\n\n  slotChange(e: Event, type: 'header' | 'main'): void {\n    const slottedContent = (\n      e.target as HTMLSlotElement\n    ).assignedNodes()?.[0] as HTMLElement;\n\n    this.dispatchEvent(\n      new CustomEvent('slotChange', {\n        detail: { slot: slottedContent, type },\n      }),\n    );\n    this.requestUpdate();\n  }\n\n  render(): TemplateResult {\n    const displayReaderClass = this.loaded ? '' : 'hidden';\n    const headerHeight =\n      (this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;\n    return html`\n      <div id=\"frame\" class=${this.menuClass}>\n        <slot\n          name=\"header\"\n          style=${`height: ${headerHeight}px`}\n          @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n        ></slot>\n        <div class=\"menu-and-reader\">\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          <div id=\"reader\" class=${displayReaderClass}>\n            ${this.renderViewport}\n          </div>\n          ${!this.loaded ? this.loadingArea : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  get noTheaterView() {\n    return html`<ia-no-theater-available\n      .identifier=${this.item?.metadata?.identifier}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n    ></ia-no-theater-available>`;\n  }\n\n  get renderViewport(): TemplateResult | typeof nothing {\n    if (!this.viewAvailable) {\n      return this.noTheaterView;\n    }\n\n    const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n    return html`\n      <div slot=\"main\" style=${slotVisibility}>\n        <slot\n          name=\"main\"\n          @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n        ></slot>\n      </div>\n    `;\n  }\n\n  loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n    const { loaded } = e.detail;\n    this.loaded = loaded || null;\n  }\n\n  /** Fullscreen Management */\n  manageViewportFullscreen(e: ManageFullscreenEvent): void {\n    const fullscreenStatus = !!e.detail.isFullScreen;\n    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n    const event = new CustomEvent('fullscreenToggled', {\n      detail: e.detail,\n    }) as ManageFullscreenEvent;\n\n    this.dispatchEvent(event);\n  }\n  /** End Fullscreen Management */\n\n  /** Side menu */\n  get shouldRenderMenu(): boolean {\n    return !!this.menuContents?.length;\n  }\n\n  toggleMenu(): void {\n    this.menuOpened = !this.menuOpened;\n  }\n\n  closeMenu(): void {\n    this.menuOpened = false;\n  }\n\n  setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n    const { id } = e.detail;\n    this.openMenu = id !== this.openMenu ? id : undefined;\n  }\n\n  setMenuContents(e: SetSideMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n    this.menuShortcuts = [...e.detail];\n  }\n\n  /** Toggles Side Menu & Sets viewable subpanel  */\n  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n    const { menuId, action } = e.detail;\n    if (!menuId) {\n      return;\n    }\n\n    if (action === 'open') {\n      this.openShortcut(menuId);\n    } else if (action === 'toggle') {\n      this.openMenu = menuId;\n      this.toggleMenu();\n    }\n  }\n\n  get menuToggleButton() {\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${this.toggleMenu}\n        title=\"Toggle theater side panels\"\n      >\n        <div>\n          <ia-icon-ellipses\n            style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n          ></ia-icon-ellipses>\n        </div>\n      </button>\n    `;\n  }\n\n  get selectedMenuId(): MenuId | '' {\n    return this.openMenu || '';\n  }\n\n  get renderSideMenu(): TemplateResult {\n    const drawerState = this.menuOpened ? '' : 'hidden';\n    return html`\n      <nav>\n        <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n        <div id=\"menu\" class=${drawerState}>\n          <ia-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.selectedMenuId}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuSliderClosed=${this.closeMenu}\n            manuallyHandleClose\n            open\n          ></ia-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  openShortcut(selectedMenuId: MenuId = ''): void {\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n      if (id === 'fullscreen') {\n        return html`${icon}`;\n      }\n\n      return html`\n        <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n          ${icon}\n        </button>\n      `;\n    });\n    return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n  }\n  /** End Menu Shortcuts */\n\n  /** Misc Render */\n  get menuClass(): string {\n    const hasMenuOrShortcuts =\n      this.menuContents?.length || this.menuShortcuts?.length;\n    const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';\n    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n    return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n  }\n\n  static get styles(): CSSResult {\n    const subnavWidth = css`var(--menuWidth, 320px)`;\n    const transitionTiming = css`var(--animationTiming, 200ms)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n    const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n    const theaterBg = css`var(--theaterBgColor, #000)`;\n\n    return css`\n      :host,\n      #frame,\n      .menu-and-reader {\n        position: relative;\n        overflow: hidden;\n        display: block;\n      }\n\n      :host,\n      #frame,\n      .loading-area,\n      .loading-view {\n        min-height: inherit;\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n        width: 100%;\n      }\n\n      slot * {\n        display: block;\n        height: inherit;\n      }\n\n      #frame {\n        background-color: ${theaterBg};\n        color-scheme: dark;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #frame.fullscreen {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 9;\n      }\n\n      .loading-view {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .loading-area {\n        width: 100%;\n      }\n\n      ia-itemnav-loader {\n        display: block;\n        width: 100%;\n      }\n\n      .hidden {\n        display: none !important;\n      }\n\n      button {\n        cursor: pointer;\n        padding: 0;\n        border: 0;\n      }\n\n      button:focus,\n      button:active {\n        outline: none;\n      }\n\n      .menu-and-reader {\n        position: relative;\n        display: flex;\n        flex: 1;\n      }\n\n      nav button {\n        background: none;\n      }\n\n      nav .minimized {\n        background: rgba(0, 0, 0, 0.7);\n        padding-top: 6px;\n        position: absolute;\n        width: ${menuMargin};\n        z-index: 2;\n        left: 0;\n        border-bottom-right-radius: 5%;\n      }\n\n      nav .minimized button {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin-bottom: 0.2rem;\n        margin: auto;\n        display: inline-flex;\n        vertical-align: middle;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        width: ${menuMargin};\n        height: ${menuMargin};\n      }\n\n      nav .minimized button.toggle-menu > * {\n        border: 2px solid var(--iconStrokeColor);\n        border-radius: var(--iconWidth);\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n      }\n\n      ia-icon-ellipses {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n      }\n\n      #menu {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 3;\n        overflow: hidden;\n        transform: translateX(-${subnavWidth});\n        width: ${subnavWidth};\n        transform: translateX(calc(${subnavWidth} * -1));\n        transition: ${transitionEffect};\n      }\n\n      #reader {\n        position: relative;\n        z-index: 1;\n        transform: translateX(0);\n        width: 100%;\n        display: flex;\n      }\n\n      #reader > * {\n        width: 100%;\n        display: flex;\n        flex: 1;\n      }\n\n      .open.overlay #reader {\n        transition: none;\n      }\n\n      .open #menu {\n        width: ${subnavWidth};\n        transform: translateX(0);\n        transition: ${transitionEffect};\n      }\n\n      .open.shift #reader {\n        width: calc(100% - ${subnavWidth});\n        margin-left: ${subnavWidth};\n        transition: ${transitionEffect};\n      }\n    `;\n  }\n}\n"]}

package/dist/src/loader.d.ts

@@ -1,10 +1,6 @@
 import { LitElement } from 'lit';
 export declare class IAItemNavLoader extends LitElement {
-    static get properties(): {
-        title: {
-            type: StringConstructor;
-        };
-    };
+    loaderMessage: string;
     get bookIconSvg(): import("lit-html").TemplateResult<2>;
     get icon(): import("lit-html").TemplateResult<2>;
     get loader(): import("lit-html").TemplateResult<2>;

package/dist/src/loader.js

@@ -1,12 +1,11 @@
 import { __decorate } from "tslib";
 /* eslint-disable class-methods-use-this */
 import { css, html, LitElement, svg, nothing } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 let IAItemNavLoader = class IAItemNavLoader extends LitElement {
-    static get properties() {
-        return {
-            title: { type: String },
-        };
+    constructor() {
+        super(...arguments);
+        this.loaderMessage = '';
     }
     get bookIconSvg() {
         return svg `
@@ -43,7 +42,9 @@ let IAItemNavLoader = class IAItemNavLoader extends LitElement {
     `;
     }
     render() {
-        const title = this.title ? html `<h2>${this.title}</h2>` : nothing;
+        const title = this.loaderMessage
+            ? html `<h2>${this.loaderMessage}</h2>`
+            : nothing;
         return html `
       <div class="place-holder">
         ${title} ${this.loader}
@@ -93,6 +94,9 @@ let IAItemNavLoader = class IAItemNavLoader extends LitElement {
     `;
     }
 };
+__decorate([
+    property({ type: String })
+], IAItemNavLoader.prototype, "loaderMessage", void 0);
 IAItemNavLoader = __decorate([
     customElement('ia-itemnav-loader')
 ], IAItemNavLoader);

package/dist/src/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;UAWJ,IAAI,CAAC,IAAI;;;;;;;;KAQd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;QAClE,OAAO,IAAI,CAAA;;UAEL,KAAK,IAAI,IAAI,CAAC,MAAM;;;KAGzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AA/FY,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA+F3B;SA/FY,eAAe","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { css, html, LitElement, svg, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('ia-itemnav-loader')\nexport class IAItemNavLoader extends LitElement {\n  static get properties() {\n    return {\n      title: { type: String },\n    };\n  }\n\n  get bookIconSvg() {\n    return svg`\n      <g class=\"bookIcon\" transform=\"matrix(1 0 0 -1 28 67.362264)\">\n        <path d=\"m44.71698 31.6981124v-29.99320678s-18.0956599.30735848-18.6322637-.7171698c-.0633962-.12226414-1.890566-.59207545-2.9745282-.59207545-1.3228302 0-3.5122641 0-4.1286791.74547168-.9707547 1.17452827-18.82811278.71660375-18.82811278.71660375v30.040754l1.83849052.7867924.29094339-28.48188608s15.94981097.15339622 17.09094297-1.10716978c.8145283-.90056602 4.997547-.91641507 5.3450942-.3526415.9611321 1.55716977 14.7101883 1.31716978 17.6077354 1.45981128l.3266038 28.22830118z\"/>\n        <path d=\"m40.1129424 33.5957539h-12.8337733c-1.8690565 0-3.1098112-.7545283-3.9299999-1.6279245v-26.70452764l1.2362264-.00792453c.4584906.72962262 3.0922641 1.39415091 3.0922641 1.39415091h10.1298111s1.0381131.01754717 1.5141509.47377357c.5643396.54056602.7913207 1.36981129.7913207 1.36981129z\"/>\n        <path d=\"m17.3354713 33.5957539h-12.8337733v-25.37660316s0-.75283017.49358489-1.14113205c.52867924-.41433961 1.3415094-.42849055 1.3415094-.42849055h10.59905631s2.2075471-.52698112 3.0928301-1.39415091l1.2.00792453v26.74245214c-.8201886.8581132-2.0530188 1.59-3.8932074 1.59\"/>\n      </g>\n    `;\n  }\n\n  get icon() {\n    return this.bookIconSvg;\n  }\n\n  get loader() {\n    return svg`\n    <svg\n      height=\"100\"\n      viewBox=\"0 0 100 100\"\n      width=\"100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-labelledby=\"item-loading\"\n    >\n      <title id=\"item-loading\">Currently loading viewer.</title>\n      <desc>Please wait while we load theater.</desc>\n      <g fill=\"#333\" fill-rule=\"evenodd\" class=\"book-icon\">\n        ${this.icon}\n        <path\n          class=\"ring\"\n          d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n          fill-rule=\"nonzero\"\n        />\n      </g>\n    </svg>\n    `;\n  }\n\n  render() {\n    const title = this.title ? html`<h2>${this.title}</h2>` : nothing;\n    return html`\n      <div class=\"place-holder\">\n        ${title} ${this.loader}\n        <h3>Loading viewer</h3>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      .place-holder {\n        width: 30%;\n        margin: auto;\n        text-align: center;\n        color: var(--primaryTextColor);\n      }\n\n      .place-holder {\n        position: relative;\n      }\n\n      .place-holder svg {\n        display: block;\n        width: 60%;\n        max-width: 100px;\n        height: auto;\n        margin: auto;\n      }\n\n      svg * {\n        fill: var(--primaryTextColor);\n      }\n\n      svg .ring {\n        animation: rotate 1.3s infinite linear;\n        transform-origin: 50px 50px;\n        transform-box: fill-box;\n        display: block; // transform won't work on inline style\n      }\n\n      @keyframes rotate {\n        0% {\n          -moz-transform: rotate(-360deg);\n          -webkit-transform: rotate(-360deg);\n          transform: rotate(-360deg);\n        }\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QACuB,kBAAa,GAAG,EAAE,CAAC;IA4FjD,CAAC;IA1FC,IAAI,WAAW;QACb,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;UAWJ,IAAI,CAAC,IAAI;;;;;;;;KAQd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa;YAC9B,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,aAAa,OAAO;YACtC,CAAC,CAAC,OAAO,CAAC;QACZ,OAAO,IAAI,CAAA;;UAEL,KAAK,IAAI,IAAI,CAAC,MAAM;;;KAGzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AA5F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAoB;AADpC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA6F3B","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { css, html, LitElement, svg, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('ia-itemnav-loader')\nexport class IAItemNavLoader extends LitElement {\n  @property({ type: String }) loaderMessage = '';\n\n  get bookIconSvg() {\n    return svg`\n      <g class=\"bookIcon\" transform=\"matrix(1 0 0 -1 28 67.362264)\">\n        <path d=\"m44.71698 31.6981124v-29.99320678s-18.0956599.30735848-18.6322637-.7171698c-.0633962-.12226414-1.890566-.59207545-2.9745282-.59207545-1.3228302 0-3.5122641 0-4.1286791.74547168-.9707547 1.17452827-18.82811278.71660375-18.82811278.71660375v30.040754l1.83849052.7867924.29094339-28.48188608s15.94981097.15339622 17.09094297-1.10716978c.8145283-.90056602 4.997547-.91641507 5.3450942-.3526415.9611321 1.55716977 14.7101883 1.31716978 17.6077354 1.45981128l.3266038 28.22830118z\"/>\n        <path d=\"m40.1129424 33.5957539h-12.8337733c-1.8690565 0-3.1098112-.7545283-3.9299999-1.6279245v-26.70452764l1.2362264-.00792453c.4584906.72962262 3.0922641 1.39415091 3.0922641 1.39415091h10.1298111s1.0381131.01754717 1.5141509.47377357c.5643396.54056602.7913207 1.36981129.7913207 1.36981129z\"/>\n        <path d=\"m17.3354713 33.5957539h-12.8337733v-25.37660316s0-.75283017.49358489-1.14113205c.52867924-.41433961 1.3415094-.42849055 1.3415094-.42849055h10.59905631s2.2075471-.52698112 3.0928301-1.39415091l1.2.00792453v26.74245214c-.8201886.8581132-2.0530188 1.59-3.8932074 1.59\"/>\n      </g>\n    `;\n  }\n\n  get icon() {\n    return this.bookIconSvg;\n  }\n\n  get loader() {\n    return svg`\n    <svg\n      height=\"100\"\n      viewBox=\"0 0 100 100\"\n      width=\"100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-labelledby=\"item-loading\"\n    >\n      <title id=\"item-loading\">Currently loading viewer.</title>\n      <desc>Please wait while we load theater.</desc>\n      <g fill=\"#333\" fill-rule=\"evenodd\" class=\"book-icon\">\n        ${this.icon}\n        <path\n          class=\"ring\"\n          d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n          fill-rule=\"nonzero\"\n        />\n      </g>\n    </svg>\n    `;\n  }\n\n  render() {\n    const title = this.loaderMessage\n      ? html`<h2>${this.loaderMessage}</h2>`\n      : nothing;\n    return html`\n      <div class=\"place-holder\">\n        ${title} ${this.loader}\n        <h3>Loading viewer</h3>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      .place-holder {\n        width: 30%;\n        margin: auto;\n        text-align: center;\n        color: var(--primaryTextColor);\n      }\n\n      .place-holder {\n        position: relative;\n      }\n\n      .place-holder svg {\n        display: block;\n        width: 60%;\n        max-width: 100px;\n        height: auto;\n        margin: auto;\n      }\n\n      svg * {\n        fill: var(--primaryTextColor);\n      }\n\n      svg .ring {\n        animation: rotate 1.3s infinite linear;\n        transform-origin: 50px 50px;\n        transform-box: fill-box;\n        display: block; // transform won't work on inline style\n      }\n\n      @keyframes rotate {\n        0% {\n          -moz-transform: rotate(-360deg);\n          -webkit-transform: rotate(-360deg);\n          transform: rotate(-360deg);\n        }\n      }\n    `;\n  }\n}\n"]}

package/dist/src/menu-slider/ia-menu-slider.d.ts

@@ -1,9 +1,10 @@
 import { LitElement } from 'lit';
 import '@internetarchive/icon-collapse-sidebar';
 import './menu-button';
+import { MenuProviderInterface } from '../interfaces/menu-interfaces';
 export declare class IaMenuSlider extends LitElement {
     static get styles(): import("lit").CSSResult;
-    menus: never[];
+    menus: MenuProviderInterface[];
     open: boolean;
     manuallyHandleClose: boolean;
     selectedMenu: string;
@@ -18,7 +19,7 @@ export declare class IaMenuSlider extends LitElement {
      * closes menu drawer
      */
     closeMenu(): void;
-    get selectedMenuDetails(): undefined;
+    get selectedMenuDetails(): MenuProviderInterface | undefined;
     get selectedMenuComponent(): any;
     get sliderDetailsClass(): string;
     get selectedMenuClass(): "" | "open";

package/dist/src/menu-slider/ia-menu-slider.js

@@ -54,9 +54,8 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
         return selectedMenu;
     }
     get selectedMenuComponent() {
-        var _a;
         const menuItem = this.selectedMenuDetails;
-        return menuItem && ((_a = menuItem) === null || _a === void 0 ? void 0 : _a.component)
+        return menuItem && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.component)
             ? menuItem.component
             : html ``;
     }
@@ -71,19 +70,19 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
     }
     get menuItems() {
         return this.menus.map((menu) => html `
-          <li>
-            <menu-button
-              @menuTypeSelected=${this.setSelectedMenu}
-              .icon=${menu.icon}
-              .label=${menu.label}
-              .menuDetails=${menu.menuDetails}
-              .id=${menu.id}
-              .selected=${menu.id === this.selectedMenu}
-              .followable=${menu.followable}
-              .href=${menu.href}
-            ></menu-button>
-          </li>
-        `);
+        <li>
+          <menu-button
+            @menuTypeSelected=${this.setSelectedMenu}
+            .icon=${menu.icon}
+            .label=${menu.label}
+            .menuDetails=${menu.menuDetails}
+            .id=${menu.id}
+            .selected=${menu.id === this.selectedMenu}
+            .followable=${menu.followable}
+            .href=${menu.href}
+          ></menu-button>
+        </li>
+      `);
     }
     get renderMenuHeader() {
         const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};

package/dist/src/menu-slider/ia-menu-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-menu-slider.js","sourceRoot":"","sources":["../../../src/menu-slider/ia-menu-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport menuSliderCSS from './styles/menu-slider';\nimport '@internetarchive/icon-collapse-sidebar';\nimport './menu-button';\n\nconst sliderEvents = {\n  closeDrawer: 'menuSliderClosed',\n};\n\n@customElement('ia-menu-slider')\nexport class IaMenuSlider extends LitElement {\n  static get styles() {\n    return menuSliderCSS;\n  }\n\n  @property({ type: Array }) menus = [];\n\n  @property({ type: Boolean }) open = false;\n\n  @property({ type: Boolean }) manuallyHandleClose = false;\n\n  @property({ type: String }) selectedMenu = '';\n\n  @property({ type: Object }) selectedMenuAction = nothing;\n\n  @property({ type: Boolean }) animateMenuOpen = false;\n\n  updated() {\n    const { actionButton } =\n      this.selectedMenuDetails || ({} as Record<string, any>);\n    const actionButtonHasChanged = actionButton !== this.selectedMenuAction;\n    if (actionButtonHasChanged) {\n      this.selectedMenuAction = actionButton || nothing;\n    }\n  }\n\n  /**\n   * Event handler, captures state of selected menu\n   */\n  setSelectedMenu({ detail }: CustomEvent) {\n    const { id } = detail;\n    this.selectedMenu = this.selectedMenu === id ? '' : id;\n    const { actionButton } =\n      this.selectedMenuDetails || ({} as Record<string, any>);\n    this.selectedMenuAction = actionButton || nothing;\n  }\n\n  /**\n   * closes menu drawer\n   */\n  closeMenu() {\n    if (!this.manuallyHandleClose) {\n      this.open = false;\n    }\n    const { closeDrawer } = sliderEvents;\n    const drawerClosed = new CustomEvent(closeDrawer, {\n      detail: this.selectedMenuDetails,\n    });\n    this.dispatchEvent(drawerClosed);\n  }\n\n  get selectedMenuDetails() {\n    const selectedMenu = this.menus.find(\n      menu => (menu as any).id === this.selectedMenu\n    );\n    return selectedMenu;\n  }\n\n  get selectedMenuComponent() {\n    const menuItem = this.selectedMenuDetails;\n    return menuItem && (menuItem as any)?.component\n      ? (menuItem as any).component\n      : html``;\n  }\n\n  /* render */\n\n  get sliderDetailsClass() {\n    const animate = this.animateMenuOpen ? 'animate' : '';\n    const state = this.open ? 'open' : '';\n    return `${animate} ${state}`;\n  }\n\n  get selectedMenuClass() {\n    return this.selectedMenu ? 'open' : '';\n  }\n\n  get menuItems() {\n    return this.menus.map(\n      (menu: Record<string, any>) =>\n        html`\n          <li>\n            <menu-button\n              @menuTypeSelected=${this.setSelectedMenu}\n              .icon=${menu.icon}\n              .label=${menu.label}\n              .menuDetails=${menu.menuDetails}\n              .id=${menu.id}\n              .selected=${menu.id === this.selectedMenu}\n              .followable=${menu.followable}\n              .href=${menu.href}\n            ></menu-button>\n          </li>\n        `\n    );\n  }\n\n  get renderMenuHeader() {\n    const { label = '', menuDetails = '' } =\n      this.selectedMenuDetails || ({} as Record<string, any>);\n    const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';\n    const actionBlock = this.selectedMenuAction\n      ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n      : nothing;\n    return html`\n      <header class=\"${headerClass}\">\n        <div class=\"details\">\n          <h3>${label}</h3>\n          <span class=\"extra-details\">${menuDetails}</span>\n        </div>\n        ${actionBlock} ${this.closeButton}\n      </header>\n    `;\n  }\n\n  get closeButton() {\n    return html`\n      <button\n        class=\"close\"\n        aria-label=\"Close this menu\"\n        @click=${this.closeMenu}\n      >\n        <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>\n      </button>\n    `;\n  }\n\n  /** @inheritdoc */\n  render() {\n    return html`\n      <div class=\"main\">\n        <div class=\"menu ${this.sliderDetailsClass}\">\n          ${this.closeButton}\n          <ul class=\"menu-list\">\n            ${this.menuItems}\n          </ul>\n          <div\n            class=\"content ${this.selectedMenuClass}\"\n            @menuTypeSelected=${this.setSelectedMenu}\n          >\n            ${this.renderMenuHeader}\n            <section>\n              <div class=\"selected-menu\">${this.selectedMenuComponent}</div>\n            </section>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-menu-slider.js","sourceRoot":"","sources":["../../../src/menu-slider/ia-menu-slider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGvB,MAAM,YAAY,GAAG;IACnB,WAAW,EAAE,kBAAkB;CAChC,CAAC;AAGK,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAKsB,UAAK,GAA4B,EAAE,CAAC;QAElC,SAAI,GAAG,KAAK,CAAC;QAEb,wBAAmB,GAAG,KAAK,CAAC;QAE7B,iBAAY,GAAG,EAAE,CAAC;QAElB,uBAAkB,GAAG,OAAO,CAAC;QAE5B,oBAAe,GAAG,KAAK,CAAC;IAqIvD,CAAC;IAnJC,MAAM,KAAK,MAAM;QACf,OAAO,aAAa,CAAC;IACvB,CAAC;IAcD,OAAO;QACL,MAAM,EAAE,YAAY,EAAE,GACpB,IAAI,CAAC,mBAAmB,IAAK,EAA0B,CAAC;QAC1D,MAAM,sBAAsB,GAAG,YAAY,KAAK,IAAI,CAAC,kBAAkB,CAAC;QACxE,IAAI,sBAAsB,EAAE;YAC1B,IAAI,CAAC,kBAAkB,GAAG,YAAY,IAAI,OAAO,CAAC;SACnD;IACH,CAAC;IAED;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAe;QACrC,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACvD,MAAM,EAAE,YAAY,EAAE,GACpB,IAAI,CAAC,mBAAmB,IAAK,EAA0B,CAAC;QAC1D,IAAI,CAAC,kBAAkB,GAAG,YAAY,IAAI,OAAO,CAAC;IACpD,CAAC;IAED;;OAEG;IACH,SAAS;QACP,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;QACD,MAAM,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC;QACrC,MAAM,YAAY,GAAG,IAAI,WAAW,CAAC,WAAW,EAAE;YAChD,MAAM,EAAE,IAAI,CAAC,mBAAmB;SACjC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,mBAAmB;QACrB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAClC,IAAI,CAAC,EAAE,CAAE,IAAY,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,CAC/C,CAAC;QACF,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,IAAI,qBAAqB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC;QAC1C,OAAO,QAAQ,KAAK,QAAgB,aAAhB,QAAQ,uBAAR,QAAQ,CAAU,SAAS,CAAA;YAC7C,CAAC,CAAE,QAAgB,CAAC,SAAS;YAC7B,CAAC,CAAC,IAAI,CAAA,EAAE,CAAC;IACb,CAAC;IAED,YAAY;IAEZ,IAAI,kBAAkB;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QACtD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACtC,OAAO,GAAG,OAAO,IAAI,KAAK,EAAE,CAAC;IAC/B,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CACnB,CAAC,IAAyB,EAAE,EAAE,CAAC,IAAI,CAAA;;;gCAGT,IAAI,CAAC,eAAe;oBAChC,IAAI,CAAC,IAAI;qBACR,IAAI,CAAC,KAAK;2BACJ,IAAI,CAAC,WAAW;kBACzB,IAAI,CAAC,EAAE;wBACD,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY;0BAC3B,IAAI,CAAC,UAAU;oBACrB,IAAI,CAAC,IAAI;;;OAGtB,CACF,CAAC;IACJ,CAAC;IAED,IAAI,gBAAgB;QAClB,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,GACpC,IAAI,CAAC,mBAAmB,IAAK,EAA0B,CAAC;QAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB;YACzC,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,kBAAkB,SAAS;YACrE,CAAC,CAAC,OAAO,CAAC;QACZ,OAAO,IAAI,CAAA;uBACQ,WAAW;;gBAElB,KAAK;wCACmB,WAAW;;UAEzC,WAAW,IAAI,IAAI,CAAC,WAAW;;KAEpC,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,SAAS;;;;KAI1B,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;2BAEY,IAAI,CAAC,kBAAkB;YACtC,IAAI,CAAC,WAAW;;cAEd,IAAI,CAAC,SAAS;;;6BAGC,IAAI,CAAC,iBAAiB;gCACnB,IAAI,CAAC,eAAe;;cAEtC,IAAI,CAAC,gBAAgB;;2CAEQ,IAAI,CAAC,qBAAqB;;;;;KAKhE,CAAC;IACJ,CAAC;CACF,CAAA;AA/I4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAqC;AAElC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAc;AAEb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAA6B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA8B;AAE5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAAyB;AAf1C,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAoJxB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport menuSliderCSS from './styles/menu-slider';\nimport '@internetarchive/icon-collapse-sidebar';\nimport './menu-button';\nimport { MenuProviderInterface } from '../interfaces/menu-interfaces';\n\nconst sliderEvents = {\n  closeDrawer: 'menuSliderClosed',\n};\n\n@customElement('ia-menu-slider')\nexport class IaMenuSlider extends LitElement {\n  static get styles() {\n    return menuSliderCSS;\n  }\n\n  @property({ type: Array }) menus: MenuProviderInterface[] = [];\n\n  @property({ type: Boolean }) open = false;\n\n  @property({ type: Boolean }) manuallyHandleClose = false;\n\n  @property({ type: String }) selectedMenu = '';\n\n  @property({ type: Object }) selectedMenuAction = nothing;\n\n  @property({ type: Boolean }) animateMenuOpen = false;\n\n  updated() {\n    const { actionButton } =\n      this.selectedMenuDetails || ({} as Record<string, any>);\n    const actionButtonHasChanged = actionButton !== this.selectedMenuAction;\n    if (actionButtonHasChanged) {\n      this.selectedMenuAction = actionButton || nothing;\n    }\n  }\n\n  /**\n   * Event handler, captures state of selected menu\n   */\n  setSelectedMenu({ detail }: CustomEvent) {\n    const { id } = detail;\n    this.selectedMenu = this.selectedMenu === id ? '' : id;\n    const { actionButton } =\n      this.selectedMenuDetails || ({} as Record<string, any>);\n    this.selectedMenuAction = actionButton || nothing;\n  }\n\n  /**\n   * closes menu drawer\n   */\n  closeMenu() {\n    if (!this.manuallyHandleClose) {\n      this.open = false;\n    }\n    const { closeDrawer } = sliderEvents;\n    const drawerClosed = new CustomEvent(closeDrawer, {\n      detail: this.selectedMenuDetails,\n    });\n    this.dispatchEvent(drawerClosed);\n  }\n\n  get selectedMenuDetails() {\n    const selectedMenu = this.menus.find(\n      menu => (menu as any).id === this.selectedMenu,\n    );\n    return selectedMenu;\n  }\n\n  get selectedMenuComponent() {\n    const menuItem = this.selectedMenuDetails;\n    return menuItem && (menuItem as any)?.component\n      ? (menuItem as any).component\n      : html``;\n  }\n\n  /* render */\n\n  get sliderDetailsClass() {\n    const animate = this.animateMenuOpen ? 'animate' : '';\n    const state = this.open ? 'open' : '';\n    return `${animate} ${state}`;\n  }\n\n  get selectedMenuClass() {\n    return this.selectedMenu ? 'open' : '';\n  }\n\n  get menuItems() {\n    return this.menus.map(\n      (menu: Record<string, any>) => html`\n        <li>\n          <menu-button\n            @menuTypeSelected=${this.setSelectedMenu}\n            .icon=${menu.icon}\n            .label=${menu.label}\n            .menuDetails=${menu.menuDetails}\n            .id=${menu.id}\n            .selected=${menu.id === this.selectedMenu}\n            .followable=${menu.followable}\n            .href=${menu.href}\n          ></menu-button>\n        </li>\n      `,\n    );\n  }\n\n  get renderMenuHeader() {\n    const { label = '', menuDetails = '' } =\n      this.selectedMenuDetails || ({} as Record<string, any>);\n    const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';\n    const actionBlock = this.selectedMenuAction\n      ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n      : nothing;\n    return html`\n      <header class=\"${headerClass}\">\n        <div class=\"details\">\n          <h3>${label}</h3>\n          <span class=\"extra-details\">${menuDetails}</span>\n        </div>\n        ${actionBlock} ${this.closeButton}\n      </header>\n    `;\n  }\n\n  get closeButton() {\n    return html`\n      <button\n        class=\"close\"\n        aria-label=\"Close this menu\"\n        @click=${this.closeMenu}\n      >\n        <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>\n      </button>\n    `;\n  }\n\n  /** @inheritdoc */\n  render() {\n    return html`\n      <div class=\"main\">\n        <div class=\"menu ${this.sliderDetailsClass}\">\n          ${this.closeButton}\n          <ul class=\"menu-list\">\n            ${this.menuItems}\n          </ul>\n          <div\n            class=\"content ${this.selectedMenuClass}\"\n            @menuTypeSelected=${this.setSelectedMenu}\n          >\n            ${this.renderMenuHeader}\n            <section>\n              <div class=\"selected-menu\">${this.selectedMenuComponent}</div>\n            </section>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}