@internetarchive/ia-item-navigator 0.0.0-a9 → 0.0.2-a2

package/dist/src/no-theater-available.js

@@ -0,0 +1,79 @@
+import { __decorate } from "tslib";
+import { LitElement, customElement, property, html, css, } from 'lit-element';
+let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.identifier = '';
+    }
+    emitLoaded() {
+        this.dispatchEvent(new CustomEvent('loadingStateUpdated', {
+            detail: { loaded: true },
+        }));
+    }
+    updated(changed) {
+        if (changed.has('identifier')) {
+            this.emitLoaded();
+        }
+    }
+    get downloadUrl() {
+        return `/download/${this.identifier}`;
+    }
+    render() {
+        return html `
+      <section>
+        <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>
+        <p>
+          This item does not appear to have any files that can be experienced on
+          Archive.org. <br />
+          Please download files in this item to interact with them on your
+          computer.
+        </p>
+        <a href=${this.downloadUrl}>Show all files</a>
+      </section>
+    `;
+    }
+    static get styles() {
+        return css `
+      :host {
+        color: var(--primaryTextColor, #fff);
+        text-align: center;
+      }
+      section {
+        margin: 10% auto 0;
+        padding: 0 5%;
+      }
+      p {
+        font-size: 1.4rem;
+      }
+      a {
+        color: var(--primaryTextColor, #fff);
+        background-color: rgb(25, 72, 128);
+        min-height: 35px;
+        outline: none;
+        cursor: pointer;
+        line-height: normal;
+        border-radius: 0.4rem;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 1.4rem;
+        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        display: inline-block;
+        padding: 0.85rem 1.2rem;
+        border: 1px solid rgb(197, 209, 223);
+        white-space: nowrap;
+        appearance: auto;
+        box-sizing: border-box;
+        user-select: none;
+        text-decoration: none;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], IANoTheaterAvailable.prototype, "identifier", void 0);
+IANoTheaterAvailable = __decorate([
+    customElement('ia-no-theater-available')
+], IANoTheaterAvailable);
+export { IANoTheaterAvailable };
+//# sourceMappingURL=no-theater-available.js.map

package/dist/src/no-theater-available.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-theater-available.js","sourceRoot":"","sources":["../../src/no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,QAAQ,EACR,IAAI,EAIJ,GAAG,GACJ,MAAM,aAAa,CAAC;AAGrB,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QAC8B,eAAU,GAAY,EAAE,CAAC;IAuEvD,CAAC;IArEC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,qBAAqB,EAAE;YAC1D,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;kBASG,IAAI,CAAC,WAAW;;KAE7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCT,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA0B;AAD1C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC;SAxEY,oBAAoB","sourcesContent":["import {\n  LitElement,\n  customElement,\n  property,\n  html,\n  TemplateResult,\n  PropertyValues,\n  CSSResult,\n  css,\n} from 'lit-element';\n\n@customElement('ia-no-theater-available')\nexport class IANoTheaterAvailable extends LitElement {\n  @property({ type: String }) identifier?: string = '';\n\n  emitLoaded(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {\n        detail: { loaded: true },\n      })\n    );\n  }\n\n  updated(changed: PropertyValues): void {\n    if (changed.has('identifier')) {\n      this.emitLoaded();\n    }\n  }\n\n  get downloadUrl(): string {\n    return `/download/${this.identifier}`;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <section>\n        <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>\n        <p>\n          This item does not appear to have any files that can be experienced on\n          Archive.org. <br />\n          Please download files in this item to interact with them on your\n          computer.\n        </p>\n        <a href=${this.downloadUrl}>Show all files</a>\n      </section>\n    `;\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      :host {\n        color: var(--primaryTextColor, #fff);\n        text-align: center;\n      }\n      section {\n        margin: 10% auto 0;\n        padding: 0 5%;\n      }\n      p {\n        font-size: 1.4rem;\n      }\n      a {\n        color: var(--primaryTextColor, #fff);\n        background-color: rgb(25, 72, 128);\n        min-height: 35px;\n        outline: none;\n        cursor: pointer;\n        line-height: normal;\n        border-radius: 0.4rem;\n        text-align: center;\n        vertical-align: middle;\n        font-size: 1.4rem;\n        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        display: inline-block;\n        padding: 0.85rem 1.2rem;\n        border: 1px solid rgb(197, 209, 223);\n        white-space: nowrap;\n        appearance: auto;\n        box-sizing: border-box;\n        user-select: none;\n        text-decoration: none;\n      }\n    `;\n  }\n}\n"]}

package/dist/test/book-nav-stub.d.ts

@@ -0,0 +1,22 @@
+import { ModalManager } from '@internetarchive/modal-manager';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { LitElement } from 'lit-element';
+import { MetadataResponse } from '@internetarchive/search-service';
+import { MenuProviderInterface, MenuShortcutInterface } from '../src/interfaces/menu-interfaces';
+import { CustomTheaterInterface } from '../src/interfaces/custom-theater-interface';
+export declare class BookNavigator extends LitElement implements CustomTheaterInterface {
+    modal?: ModalManager;
+    itemMD?: MetadataResponse;
+    baseHost?: string;
+    signedIn?: boolean | null;
+    sideMenuOpen: boolean;
+    sharedObserver?: SharedResizeObserver;
+    menuProviders?: MenuProviderInterface[];
+    menuShortcuts?: MenuShortcutInterface[];
+    emitLoadingStatusUpdate(): void;
+    addMenuShortcut(menuId: string): string;
+    removeMenuShortcut(menuId: string): string;
+    sortMenuShortcuts(): void;
+    emitMenuShortcutsUpdated(): void;
+    render(): import("lit-element").TemplateResult;
+}

package/dist/test/book-nav-stub.js

@@ -0,0 +1,49 @@
+import { __decorate } from "tslib";
+import { html, customElement, LitElement, property } from 'lit-element';
+let BookNavigator = class BookNavigator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.signedIn = null;
+    }
+    emitLoadingStatusUpdate() { }
+    addMenuShortcut(menuId) {
+        return menuId;
+    }
+    removeMenuShortcut(menuId) {
+        return menuId;
+    }
+    sortMenuShortcuts() { }
+    emitMenuShortcutsUpdated() { }
+    render() {
+        return html ` <p>foo</p> `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], BookNavigator.prototype, "modal", void 0);
+__decorate([
+    property({ type: Object })
+], BookNavigator.prototype, "itemMD", void 0);
+__decorate([
+    property({ type: String })
+], BookNavigator.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BookNavigator.prototype, "signedIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], BookNavigator.prototype, "sideMenuOpen", void 0);
+__decorate([
+    property({ attribute: false })
+], BookNavigator.prototype, "sharedObserver", void 0);
+__decorate([
+    property({ type: Array })
+], BookNavigator.prototype, "menuProviders", void 0);
+__decorate([
+    property({ type: Array })
+], BookNavigator.prototype, "menuShortcuts", void 0);
+BookNavigator = __decorate([
+    customElement('book-navigator')
+], BookNavigator);
+export { BookNavigator };
+//# sourceMappingURL=book-nav-stub.js.map

package/dist/test/book-nav-stub.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"book-nav-stub.js","sourceRoot":"","sources":["../../test/book-nav-stub.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAQxE,IAAa,aAAa,GAA1B,MAAa,aACX,SAAQ,UAAU;IADpB;;QAS8C,aAAQ,GAAoB,IAAI,CAAC;IA2B/E,CAAC;IAjBC,uBAAuB,KAAI,CAAC;IAE5B,eAAe,CAAC,MAAc;QAC5B,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,kBAAkB,CAAC,MAAc;QAC/B,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,iBAAiB,KAAI,CAAC;IAEtB,wBAAwB,KAAI,CAAC;IAE7B,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,CAAC;IAC5B,CAAC;CACF,CAAA;AAjCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAAsB;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAEF;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkC;AAEhD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAwB;AAEpB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAAuC;AAE3C;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAyC;AAExC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAyC;AAjBxD,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoCzB;SApCY,aAAa","sourcesContent":["import { ModalManager } from '@internetarchive/modal-manager';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { html, customElement, LitElement, property } from 'lit-element';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n} from '../src/interfaces/menu-interfaces';\nimport { CustomTheaterInterface } from '../src/interfaces/custom-theater-interface';\n@customElement('book-navigator')\nexport class BookNavigator\n  extends LitElement\n  implements CustomTheaterInterface {\n  @property({ attribute: false }) modal?: ModalManager;\n\n  @property({ type: Object }) itemMD?: MetadataResponse;\n\n  @property({ type: String }) baseHost?: string;\n\n  @property({ type: Boolean, reflect: true }) signedIn?: boolean | null = null;\n\n  @property({ type: Boolean }) sideMenuOpen!: boolean;\n\n  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n  @property({ type: Array }) menuProviders?: MenuProviderInterface[];\n\n  @property({ type: Array }) menuShortcuts?: MenuShortcutInterface[];\n\n  emitLoadingStatusUpdate() {}\n\n  addMenuShortcut(menuId: string) {\n    return menuId;\n  }\n\n  removeMenuShortcut(menuId: string) {\n    return menuId;\n  }\n\n  sortMenuShortcuts() {}\n\n  emitMenuShortcutsUpdated() {}\n\n  render() {\n    return html` <p>foo</p> `;\n  }\n}\n"]}

package/dist/test/ia-item-navigator.test.d.ts

@@ -1 +1,2 @@
 import '../src/item-navigator';
+import '../test/book-nav-stub';

package/dist/test/ia-item-navigator.test.js

@@ -1,169 +1,317 @@
 /* eslint-disable camelcase */
-/* eslint-disable import/no-duplicates */
 import { html, fixture, expect } from '@open-wc/testing';
 import Sinon from 'sinon';
-// import { MetadataResponse, Metadata, File, Review, SpeechMusicASREntry } from '@internetarchive/search-service';
-import { SharedResizeObserver,
-// SharedResizeObserverInterface
- } from '@internetarchive/shared-resize-observer';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { ModalManager } from '@internetarchive/modal-manager';
+import { ItemType } from '../src/item-navigator';
 import '../src/item-navigator';
-// import { IaItemInspector } from '../src/item-inspector/item-inspector';
-// class ItemStub implements MetadataResponse {
-//   constructor() {
-//     this.rawResponse = '';
-//     this.created = 1;
-//     this.d1 = 'hello';
-//     this.d2 = 'boop';
-//     this.dir = 'whee';
-//     this.files = [];
-//     this.files_count = 0;
-//     this.item_last_updated = 2020;
-//     this.item_size = 111;
-//     this.metadata = { identifier: 'foo' } as Metadata;
-//     this.server = 'foo-server';
-//     this.uniq = 2;
-//     this.workable_servers = ['abc'];
-//   }
-//   rawResponse: any;
-//   created: number;
-//   d1: string;
-//   d2: string;
-//   dir: string;
-//   files: File[];
-//   files_count: number;
-//   item_last_updated: number;
-//   item_size: number;
-//   metadata: Metadata;
-//   server: string;
-//   uniq: number;
-//   workable_servers: string[];
-//   speech_vs_music_asr?: SpeechMusicASREntry[] | undefined;
-//   reviews?: Review[] | undefined;
-// };
+import '../test/book-nav-stub';
+import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
 afterEach(() => {
     Sinon.restore();
 });
 describe('ItemNavigator', () => {
-    describe('Loading Behavior', () => {
-        it('shows the spinning loader', async () => {
+    describe('Theaters', () => {
+        it('shows <ia-no-theater-available> by default', async () => {
             var _a;
-            const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
-            expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-itemnav-loader')).to.be.exist;
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-no-theater-available')).to.exist;
         });
-        it('hides reader section if not `loaded`', async () => {
+        it('shows <book-navigator> if `this.itemType = "bookreader"`', async () => {
             var _a;
-            const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
-            const mainTheaterSection = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader');
-            expect(mainTheaterSection).to.be.exist;
-            expect(mainTheaterSection === null || mainTheaterSection === void 0 ? void 0 : mainTheaterSection.classList.contains('hide')).to.be.true;
-            expect(el.loaded).to.be.false;
-            expect(el.hasAttribute('loaded')).to.equal(false);
+            const el = await fixture(html `<ia-item-navigator
+          .itemType=${ItemType.BOOK}
+          .item=${new ItemStub()}
+          .modal=${new ModalManager()}
+          .sharedObserver=${new SharedResizeObserver()}
+        ></ia-item-navigator>`);
+            await el.updateComplete;
+            el.toggleMenu();
+            await el.updateComplete;
+            const bookNavigator = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('book-navigator');
+            await bookNavigator.updateComplete;
+            console.log('132234234324324324');
+            // TODO: add BookNavigator type & import via @internetarchive/bookreader
+            // For now, let's check that the BookNavigator element and its properties exist w/ stub
+            expect(bookNavigator).to.exist;
+            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.modal).to.exist;
+            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.baseHost).to.exist;
+            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.signedIn).to.be.null;
+            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.sharedObserver).to.exist;
+            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.sideMenuOpen).to.exist;
         });
-        it('shows reader once `loaded`', async () => {
+    });
+    describe('`el.loaded`', () => {
+        it('toggles the spinning loader', async () => {
             var _a;
             const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
-            el.loaded = true;
-            await el.updateComplete;
+            expect(el.loaded).to.be.null; // initial load
+            expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-itemnav-loader')).to.exist;
+        });
+        it('hides reader section if `!loaded`', async () => {
+            var _a, _b;
+            const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
+            expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader')) === null || _b === void 0 ? void 0 : _b.getAttribute('class')).to.contain('hide');
+        });
+        it('shows reader when `loaded` ', async () => {
+            var _a, _b;
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
             const mainTheaterSection = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader');
             expect(mainTheaterSection === null || mainTheaterSection === void 0 ? void 0 : mainTheaterSection.classList.contains('hide')).to.be.false;
             expect(el.loaded).to.be.true;
             // `loaded` property is reflected as DOM attribute
             expect(el.hasAttribute('loaded')).to.equal(true);
+            expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ia-no-theater-available')).to.exist;
         });
-        // it('listens to event `loadingStateUpdated` to signal load', async () => {
-        //   const item = new ItemStub() as MetadataResponse;
-        //   const el = await fixture<ItemNavigator>(
-        //     html`<ia-item-navigator .item=${item}></ia-item-navigator>`
-        //   );
-        //   // const loadSpy = Sinon.spy();
-        //   // el.loadingStateUpdated = loadSpy;
-        //   await el.updateComplete;
-        //   expect(el?.item).to.not.be.undefined;
-        //   const mainTheaterSection = el.shadowRoot?.querySelector('#reader');
-        //   const contentController = mainTheaterSection?.querySelector('ia-item-inspector');
-        //   expect(contentController).to.equal(32324);
-        //   // const loadingEvent = new CustomEvent('loadingStateUpdated', { detail: { loaded: true }}) as IntLoadingStateUpdatedEvent;
-        //   // contentController?.emitLoadingStatusUpdate(true);
-        //   // await contentController?.updateComplete;
-        //   // await el.updateComplete;
-        // });
-    });
-    describe('It uses a shared ResizeObserver', () => {
-        it('can create one', async () => {
+        it('listens to `@loadingStateUpdated` to update `loaded`', async () => {
             const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
             await el.updateComplete;
-            expect(el.sharedObserver).to.not.be.null;
-            expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
+            const spy = Sinon.spy();
+            el.loadingStateUpdated = spy;
+            el.loaded = null;
+            await el.updateComplete;
+            // check base properties
+            expect(el.loaded).to.equal(null);
+            expect(el.item).to.be.undefined;
+            // hydrate item
+            el.item = new ItemStub();
+            await el.updateComplete;
+            // spy fires
+            expect(spy.called).to.equal(true);
+            expect(spy.callCount).to.equal(1);
         });
-        it('can recieve one', async () => {
+    });
+    describe('`el.sharedObserver`', () => {
+        it('uses one', async () => {
             const sharedObserver = new SharedResizeObserver();
             const el = await fixture(html `<ia-item-navigator
           .sharedObserver=${sharedObserver}
         ></ia-item-navigator>`);
-            await el.updateComplete;
-            expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
+            expect(el.sharedObserver).to.equal(sharedObserver);
+            expect(typeof el.handleResize).to.equal('function');
         });
-    });
-    describe('It uses a shared modal component', () => {
-        it('can create one', async () => {
-            const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
-            await el.updateComplete;
-            expect(el.sharedObserver).to.not.be.null;
-            expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
+        it('freshly registers handler', async () => {
+            const sharedObserver = new SharedResizeObserver();
+            const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');
+            await fixture(html `<ia-item-navigator
+          .sharedObserver=${sharedObserver}
+        ></ia-item-navigator>`);
+            expect(addObserverSpy.callCount).to.equal(1);
         });
-        it('can recieve one', async () => {
+        it('removes handler when component disconnects', async () => {
             const sharedObserver = new SharedResizeObserver();
-            const observerSpy = Sinon.stub(sharedObserver, 'addObserver');
+            const removeObserverSpy = Sinon.spy(sharedObserver, 'removeObserver');
             const el = await fixture(html `<ia-item-navigator
           .sharedObserver=${sharedObserver}
         ></ia-item-navigator>`);
+            el.disconnectedCallback();
+            await el.updateComplete;
+            expect(removeObserverSpy.callCount).to.equal(1);
+        });
+        it('sets menu to overlay if container width is <= 600px', async () => {
+            const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
+            expect(el.openMenuState).to.equal('shift'); // as starting point
+            const overlaySize = {
+                contentRect: { width: 600 },
+            };
+            el.handleResize(overlaySize);
+            await el.updateComplete;
+            expect(el.openMenuState).to.equal('overlay'); // changes open menu display to an overlay
+            const shiftSize = {
+                contentRect: { width: 601 },
+            };
+            el.handleResize(shiftSize);
+            await el.updateComplete;
+            expect(el.openMenuState).to.equal('shift');
+        });
+    });
+    describe('`el.modal`', () => {
+        it('uses one', async () => {
+            const modal = new ModalManager();
+            const el = await fixture(html `<ia-item-navigator .modal=${modal}></ia-item-navigator>`);
+            expect(el.modal).to.equal(modal);
+        });
+    });
+    describe('full browser window immersion "fullscreen"', () => {
+        it('creates reflected attribute `viewportinfullscreen`', async () => {
+            /** to help with external styling adjustmnents */
+            const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
+            expect(el.getAttribute('viewportinfullscreen')).to.be.null;
+            el.viewportInFullscreen = true;
+            await el.updateComplete;
+            expect(el.getAttribute('viewportinfullscreen')).to.exist;
+        });
+        it('@ViewportInFullScreen', async () => {
+            const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
+            expect(el.viewportInFullscreen).to.be.null;
+            const yesFullscreenEvent = {
+                detail: {
+                    isFullScreen: true,
+                },
+            };
+            el.manageViewportFullscreen(yesFullscreenEvent);
+            await el.updateComplete;
+            expect(el.viewportInFullscreen).to.be.true;
+            const noFullscreenEvent = {
+                detail: {
+                    isFullScreen: false,
+                },
+            };
+            el.manageViewportFullscreen(noFullscreenEvent);
+            await el.updateComplete;
+            expect(el.viewportInFullscreen).to.be.null;
+        });
+    });
+    /* Side menu & shortcuts tests */
+    describe('el.menuOpened', () => {
+        it('toggles side menu open', async () => {
+            var _a, _b, _c;
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            el.menuContents = [menuProvider];
+            await el.updateComplete;
+            const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
+            expect(nav === null || nav === void 0 ? void 0 : nav.querySelector('#menu')).to.exist;
+            // side menu starts closed
+            expect(el.menuOpened).to.be.false;
+            expect((_b = nav === null || nav === void 0 ? void 0 : nav.querySelector('#menu')) === null || _b === void 0 ? void 0 : _b.getAttribute('class')).to.contain('hidden');
+            // let's open menu
+            el.toggleMenu();
+            await el.updateComplete;
+            expect(el.menuOpened).to.be.true;
+            expect((_c = nav === null || nav === void 0 ? void 0 : nav.querySelector('#menu')) === null || _c === void 0 ? void 0 : _c.getAttribute('class')).to.not.contain('hidden');
+        });
+        it('opens menu shortcut with `@manageSideMenuEvents`', async () => {
+            var _a;
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            const detail = {
+                menuId: 'fullscreen',
+                action: 'open',
+            };
+            el.menuContents = [menuProvider];
+            await el.updateComplete;
+            const frame = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#frame');
+            // default menu open behavior is to side menu open, not overlay
+            expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.contain('shift');
+            expect(el.menuOpened).to.be.false;
+            expect(el.openMenu).to.be.undefined;
+            expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.not.contain('open');
+            const event = new CustomEvent('updateSideMenu', {
+                detail,
+            });
+            el.manageSideMenuEvents(event);
+            await el.updateComplete;
+            expect(el.shouldRenderMenu).to.be.true;
+            expect(el.menuOpened).to.be.true;
+            expect(el.openMenu).to.equal(detail.menuId);
+            expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.contain('open');
+            // no menu provided
+            const openShortcutSpy = Sinon.spy(el, 'openShortcut');
+            const toggleMenuSpy = Sinon.spy(el, 'toggleMenu');
+            const noMenuProvidedEvent = new CustomEvent('updateSideMenu', {
+                detail: {},
+            });
+            el.manageSideMenuEvents(noMenuProvidedEvent);
+            await el.updateComplete;
+            expect(openShortcutSpy.called).to.be.false;
+            expect(toggleMenuSpy.called).to.be.false;
+            // toggle menu
+            const toggleMenuEvent = new CustomEvent('updateSideMenu', {
+                detail: { action: 'toggle', menuId: 'fullscreen' },
+            });
+            el.manageSideMenuEvents(toggleMenuEvent);
+            await el.updateComplete;
+            expect(toggleMenuSpy.callCount).to.equal(1);
+            // open menu
+            const openMenuEvent = new CustomEvent('updateSideMenu', {
+                detail: { action: 'open', menuId: 'fullscreen' },
+            });
+            el.manageSideMenuEvents(openMenuEvent);
+            await el.updateComplete;
+            expect(openShortcutSpy.callCount).to.equal(1);
+        });
+    });
+    describe('el.menuContents', () => {
+        it('draws side menu when populated', async () => {
+            var _a;
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            el.menuContents = [menuProvider];
+            await el.updateComplete;
+            expect(el.menuContents.length).to.exist;
+            expect(el.shouldRenderMenu).to.be.true;
+            const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
+            expect(nav).to.exist;
+            const menuSlider = nav === null || nav === void 0 ? void 0 : nav.querySelector('ia-menu-slider');
+            expect(menuSlider).to.exist;
+            expect(menuSlider === null || menuSlider === void 0 ? void 0 : menuSlider.getAttribute('manuallyhandleclose')).to.exist;
+            expect(menuSlider === null || menuSlider === void 0 ? void 0 : menuSlider.getAttribute('open')).to.exist;
+        });
+    });
+    describe('`el.menuShortcuts`', () => {
+        it('displays shortcut & toggle side menu button', async () => {
+            var _a;
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            const anotherShortcut = {
+                id: 'foo',
+                icon: html `<i class="foo-shortcut"></i>`,
+            };
+            el.menuContents = [menuProvider];
+            el.menuShortcuts = [shortcut, anotherShortcut];
+            await el.updateComplete;
+            const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
+            const shortcutsContainer = nav === null || nav === void 0 ? void 0 : nav.querySelector('.shortcuts');
+            expect(el.menuShortcuts.length).to.exist;
+            expect(nav).to.exist;
+            expect(shortcutsContainer).to.exist;
+            expect(shortcutsContainer === null || shortcutsContainer === void 0 ? void 0 : shortcutsContainer.querySelector('i.fullscreen-test')).to.exist;
+            expect(shortcutsContainer === null || shortcutsContainer === void 0 ? void 0 : shortcutsContainer.querySelector('button.shortcut.foo')).to.exist;
+            expect(nav === null || nav === void 0 ? void 0 : nav.querySelector('.toggle-menu')).to.exist;
+        });
+    });
+    describe('Menu events', () => {
+        it('`el.setMenuShortcuts`', async () => {
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            expect(el.menuShortcuts.length).to.equal(0);
+            const menuShortcuts = [shortcut];
+            el.setMenuShortcuts({
+                detail: menuShortcuts,
+            });
+            await el.updateComplete;
+            expect(el.menuShortcuts.length).to.equal(1);
+        });
+        it('`el.setMenuContents`', async () => {
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            expect(el.menuContents.length).to.equal(0);
+            el.setMenuShortcuts({
+                detail: [menuProvider],
+            });
+            await el.updateComplete;
+            expect(el.menuShortcuts.length).to.equal(1);
+        });
+        it('`el.setOpenMenu`', async () => {
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            el.setOpenMenu({
+                detail: { id: 'foo' },
+            });
+            await el.updateComplete;
+            expect(el.openMenu).to.equal('foo');
+            expect(el.selectedMenuId).to.equal('foo');
+            // toggles it off
+            el.setOpenMenu({
+                detail: { id: 'foo' },
+            });
+            await el.updateComplete;
+            expect(el.openMenu).to.be.undefined;
+            expect(el.selectedMenuId).to.equal('');
+        });
+        it('`el.closeMenu`', async () => {
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            el.menuOpened = true;
+            await el.updateComplete;
+            expect(el.menuOpened).to.be.true;
+            el.closeMenu();
             await el.updateComplete;
-            expect(el.sharedObserver).to.be.instanceOf(SharedResizeObserver);
-            expect(observerSpy.called).to.equal(true);
+            expect(el.menuOpened).to.be.false;
         });
     });
-    // describe('full browser window immersion "fullscreen"', () => {
-    //   it('creates reflected attribute `viewportinfullscreen`', () =>{
-    //     /** to help with external styling adjustmnents */
-    //   });
-    // });
-    // describe('Loads side menu contents', () =>{
-    // });
-    // describe('Menu Shortcuts', () => {
-    // });
-    //   it('passes the a11y audit', async () => {
-    //     const el = await fixture<YourWebComponent>(
-    //       html`<your-webcomponent></your-webcomponent>`
-    //     );
-    //     await expect(el).shadowDom.to.be.accessible();
-    //   });
 });
-// describe('YourWebComponent', () => {
-//   it('has a default title "Hey there" and counter 5', async () => {
-//     const el = await fixture<YourWebComponent>(
-//       html`<your-webcomponent></your-webcomponent>`
-//     );
-//     expect(el.title).to.equal('Hey there');
-//     expect(el.counter).to.equal(5);
-//   });
-//   it('increases the counter on button click', async () => {
-//     const el = await fixture<YourWebComponent>(
-//       html`<your-webcomponent></your-webcomponent>`
-//     );
-//     el.shadowRoot!.querySelector('button')!.click();
-//     expect(el.counter).to.equal(6);
-//   });
-//   it('can override the title via attribute', async () => {
-//     const el = await fixture<YourWebComponent>(
-//       html`<your-webcomponent title="attribute title"></your-webcomponent>`
-//     );
-//     expect(el.title).to.equal('attribute title');
-//   });
-//   it('passes the a11y audit', async () => {
-//     const el = await fixture<YourWebComponent>(
-//       html`<your-webcomponent></your-webcomponent>`
-//     );
-//     await expect(el).shadowDom.to.be.accessible();
-//   });
-// });
 //# sourceMappingURL=ia-item-navigator.test.js.map