@internetarchive/elements 0.2.14-webdev-8969.0 → 0.3.0

package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js

@@ -0,0 +1,394 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import themeStyles from '../../themes/theme-styles.js';
+import { collapseSidebarIcon } from './icons.js';
+import './ia-itemnav-menu-button.js';
+const sliderEvents = {
+    closeDrawer: 'menuSliderClosed',
+    closePanel: 'menuPanelClosed',
+};
+/**
+ * The sliding drawer that lists the navigator's menu providers and renders the
+ * body of whichever provider is currently selected.
+ */
+let IAItemNavMenuSlider = class IAItemNavMenuSlider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.menus = [];
+        /**
+         * Which panel is open. The navigator owns this — the slider only reports
+         * what the user did and renders whatever comes back, so there is one copy
+         * of the state rather than two that have to agree.
+         */
+        this.selectedMenu = '';
+        this.selectedMenuAction = nothing;
+        /** Focus should follow what the user did, not the first render. */
+        this.isFirstRender = true;
+    }
+    updated(changed) {
+        const actionButton = this.selectedMenuDetails?.actionButton || nothing;
+        if (actionButton !== this.selectedMenuAction) {
+            this.selectedMenuAction = actionButton;
+        }
+        if (!this.isFirstRender && changed.has('selectedMenu')) {
+            this.moveFocusForSelection(changed.get('selectedMenu'));
+        }
+        this.isFirstRender = false;
+    }
+    /**
+     * Opening a panel moves focus into it, so it is announced by name; closing
+     * hands focus back to the button that opened it.
+     */
+    moveFocusForSelection(previousMenu) {
+        if (this.selectedMenu) {
+            this.panel?.focus();
+        }
+        else if (previousMenu) {
+            this.menuButtonFor(previousMenu)?.focus();
+        }
+    }
+    menuButtonFor(menuId) {
+        const buttons = this.menuList?.querySelectorAll('ia-itemnav-menu-button') ?? [];
+        return [...buttons].find((button) => button.buttonId === menuId);
+    }
+    /**
+     * Moves focus into the drawer — the open panel if there is one, otherwise
+     * the first thing worth acting on. Exposed so the navigator doesn't have to
+     * reach through this component's shadow DOM to place focus.
+     */
+    focusDrawer() {
+        if (this.selectedMenu) {
+            this.panel?.focus();
+            return;
+        }
+        const firstMenuButton = this.menuList?.querySelector('ia-itemnav-menu-button');
+        (firstMenuButton ?? this.drawerCloseButton)?.focus();
+    }
+    /** Asks the navigator to close the whole drawer. */
+    closeMenu() {
+        this.dispatchEvent(new CustomEvent(sliderEvents.closeDrawer, {
+            detail: this.selectedMenuDetails,
+        }));
+    }
+    /** Asks the navigator to close just the open panel. */
+    closePanel() {
+        this.dispatchEvent(new CustomEvent(sliderEvents.closePanel, {
+            detail: { id: this.selectedMenu },
+        }));
+    }
+    /** Escape closes the panel first, then the drawer. */
+    handleKeyDown(event) {
+        if (event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        if (this.selectedMenu) {
+            this.closePanel();
+        }
+        else {
+            this.closeMenu();
+        }
+    }
+    get selectedMenuDetails() {
+        return this.menus.find((menu) => menu.id === this.selectedMenu);
+    }
+    /* render */
+    get selectedMenuClass() {
+        return this.selectedMenu ? 'open' : '';
+    }
+    get menuItems() {
+        return this.menus.map((menu) => html `
+        <li>
+          <ia-itemnav-menu-button
+            .icon=${menu.icon}
+            .label=${menu.label}
+            .menuDetails=${menu.menuDetails || ''}
+            .buttonId=${menu.id}
+            .selected=${menu.id === this.selectedMenu}
+            .followable=${menu.followable || false}
+            .href=${menu.href || ''}
+          ></ia-itemnav-menu-button>
+        </li>
+      `);
+    }
+    get renderMenuHeader() {
+        const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};
+        // `selectedMenuAction` defaults to Lit's `nothing` sentinel, which is
+        // truthy — so compare against it explicitly, otherwise the header would
+        // always get the secondary-action treatment (and an empty action span).
+        const hasAction = this.selectedMenuAction !== nothing;
+        const headerClass = hasAction ? 'with-secondary-action' : '';
+        const actionBlock = hasAction
+            ? html `<span class="custom-action">${this.selectedMenuAction}</span>`
+            : nothing;
+        const closeLabel = label ? `Close ${label}` : 'Close this panel';
+        return html `
+      <header class=${headerClass}>
+        <div class="details">
+          <h3 id="panel-title">${label}</h3>
+          <span class="extra-details">${menuDetails}</span>
+        </div>
+        ${actionBlock}
+        <button
+          class="close"
+          aria-label=${closeLabel}
+          title=${closeLabel}
+          @click=${this.closePanel}
+        >
+          ${collapseSidebarIcon}
+        </button>
+      </header>
+    `;
+    }
+    get closeButton() {
+        return html `
+      <button
+        class="close"
+        aria-label="Close navigation"
+        title="Close navigation"
+        @click=${this.closeMenu}
+      >
+        ${collapseSidebarIcon}
+      </button>
+    `;
+    }
+    /** @inheritdoc */
+    render() {
+        const panelOpen = !!this.selectedMenu;
+        return html `
+      <div class="main" @keydown=${this.handleKeyDown}>
+        <div class="menu">
+          ${this.closeButton}
+          <ul class="menu-list" role="list">
+            ${this.menuItems}
+          </ul>
+          <!-- Closed panels are inert so the tab order and the accessibility
+               tree agree with what is on screen; the slide is a consequence
+               of the class, not something to wait on. -->
+          <div
+            class="content ${this.selectedMenuClass}"
+            role="region"
+            aria-labelledby="panel-title"
+            tabindex="-1"
+            ?inert=${!panelOpen}
+          >
+            ${this.renderMenuHeader}
+            <section>
+              <div class="selected-menu">
+                ${this.selectedMenuDetails?.component || nothing}
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static get styles() {
+        const menuButtonWidth = css `42px`;
+        const sliderWidth = css `var(--item-navigator-menu-width--)`;
+        const transitionTiming = css `var(--item-navigator-animation-timing--)`;
+        return [
+            themeStyles,
+            css `
+        :host {
+          --item-navigator-menu-width--: var(
+            --item-navigator-menu-width,
+            320px
+          );
+          --item-navigator-animation-timing--: var(
+            --item-navigator-animation-timing,
+            200ms
+          );
+          --item-navigator-text-color--: var(
+            --item-navigator-text-color,
+            var(--true-white)
+          );
+          --item-navigator-menu-slider-bg--: var(
+            --item-navigator-menu-slider-bg,
+            #212121
+          );
+          --item-navigator-active-button-bg--: var(
+            --item-navigator-active-button-bg,
+            var(--mid-gray)
+          );
+          --item-navigator-border-color--: var(
+            --item-navigator-border-color,
+            #4b4b4b
+          );
+          /* Every glyph is square, so one knob sizes both axes. */
+          --item-navigator-header-icon-size--: var(
+            --item-navigator-header-icon-size,
+            2em
+          );
+          --item-navigator-icon-color--: var(
+            --item-navigator-icon-color,
+            var(--item-navigator-text-color--)
+          );
+
+          /* 10px base (petabox scale); internal sizing is em against it. */
+          --item-navigator-base-font-size--: var(
+            --item-navigator-base-font-size,
+            10px
+          );
+          font-size: var(--item-navigator-base-font-size--);
+        }
+
+        .main {
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+        }
+
+        /* The drawer's own slide is owned by the navigator's #menu; this just
+           fills it. */
+        .menu {
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          width: ${sliderWidth};
+          padding: 0.5em 0.5em 0 0;
+          box-sizing: border-box;
+          font-size: 1.4em;
+          color: var(--item-navigator-text-color--);
+          background: var(--item-navigator-menu-slider-bg--);
+        }
+
+        button {
+          cursor: pointer;
+        }
+
+        header {
+          margin: 0 0 0.5em 0;
+        }
+
+        header * {
+          margin: 0;
+          display: inline-block;
+        }
+
+        header button {
+          cursor: pointer;
+        }
+
+        header.with-secondary-action .details {
+          width: 80%;
+        }
+
+        header .details {
+          font-weight: bold;
+          width: 88%;
+        }
+
+        header .custom-action > *,
+        button.close {
+          padding: 0;
+          background-color: transparent;
+          border: 0;
+        }
+
+        header .custom-action,
+        button.close {
+          position: absolute;
+        }
+
+        button.close {
+          /* Reset to the base so the header icon (em) doesn't compound
+             against .menu's enlarged font-size. */
+          font-size: var(--item-navigator-base-font-size--);
+          min-width: 38px;
+          min-height: 38px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          right: 0;
+          top: 0;
+        }
+
+        button.close .ia-icon {
+          width: var(--item-navigator-header-icon-size--);
+          height: var(--item-navigator-header-icon-size--);
+        }
+
+        /* Our glyphs are masked spans: the mask supplies the shape, this
+           supplies the paint. */
+        span.ia-icon {
+          background-color: var(--item-navigator-icon-color--);
+        }
+
+        /* Host-supplied icons may still be inline svg, so keep theming those
+           the original way. */
+        .ia-icon .fill-color {
+          fill: var(--item-navigator-icon-color--);
+        }
+
+        .content {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: ${menuButtonWidth};
+          z-index: 1;
+          transform: translateX(calc(${sliderWidth} * -1));
+          transition: var(
+            --item-navigator-panel-transition--,
+            transform ${transitionTiming} ease-out
+          );
+          background: var(--item-navigator-active-button-bg--);
+          border-right: 0.2em solid;
+          border-color: var(--item-navigator-border-color--);
+          padding: 0.5em 0 0 0.5em;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .content.open {
+          transform: translateX(0);
+        }
+
+        .content:focus {
+          outline: none;
+        }
+
+        .menu-list {
+          padding: 0;
+          margin: 0;
+          list-style: none;
+          background: var(--item-navigator-menu-slider-bg--);
+        }
+
+        .menu-list li {
+          margin-bottom: 0.2em;
+        }
+
+        .content > section {
+          overflow: auto;
+          overscroll-behavior: contain;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Array })
+], IAItemNavMenuSlider.prototype, "menus", void 0);
+__decorate([
+    property({ type: String })
+], IAItemNavMenuSlider.prototype, "selectedMenu", void 0);
+__decorate([
+    property({ type: Object })
+], IAItemNavMenuSlider.prototype, "selectedMenuAction", void 0);
+__decorate([
+    query('.content')
+], IAItemNavMenuSlider.prototype, "panel", void 0);
+__decorate([
+    query('.menu-list')
+], IAItemNavMenuSlider.prototype, "menuList", void 0);
+__decorate([
+    query('.menu > button.close')
+], IAItemNavMenuSlider.prototype, "drawerCloseButton", void 0);
+IAItemNavMenuSlider = __decorate([
+    customElement('ia-itemnav-menu-slider')
+], IAItemNavMenuSlider);
+export { IAItemNavMenuSlider };
+//# sourceMappingURL=ia-itemnav-menu-slider.js.map

package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-itemnav-menu-slider.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValues,\n  TemplateResult,\n  type CSSResultGroup,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport { collapseSidebarIcon } from './icons';\nimport './ia-itemnav-menu-button';\nimport type { IAItemNavMenuButton } from './ia-itemnav-menu-button';\nimport { MenuProviderInterface } from './interfaces/menu-interfaces';\n\nconst sliderEvents = {\n  closeDrawer: 'menuSliderClosed',\n  closePanel: 'menuPanelClosed',\n};\n\n/**\n * The sliding drawer that lists the navigator's menu providers and renders the\n * body of whichever provider is currently selected.\n */\n@customElement('ia-itemnav-menu-slider')\nexport class IAItemNavMenuSlider extends LitElement {\n  @property({ type: Array }) menus: MenuProviderInterface[] = [];\n\n  /**\n   * Which panel is open. The navigator owns this — the slider only reports\n   * what the user did and renders whatever comes back, so there is one copy\n   * of the state rather than two that have to agree.\n   */\n  @property({ type: String }) selectedMenu = '';\n\n  @property({ type: Object }) selectedMenuAction:\n    | TemplateResult\n    | typeof nothing = nothing;\n\n  @query('.content') private panel?: HTMLElement;\n\n  @query('.menu-list') private menuList?: HTMLUListElement;\n\n  @query('.menu > button.close') private drawerCloseButton?: HTMLElement;\n\n  /** Focus should follow what the user did, not the first render. */\n  private isFirstRender = true;\n\n  protected updated(changed: PropertyValues): void {\n    const actionButton = this.selectedMenuDetails?.actionButton || nothing;\n    if (actionButton !== this.selectedMenuAction) {\n      this.selectedMenuAction = actionButton;\n    }\n\n    if (!this.isFirstRender && changed.has('selectedMenu')) {\n      this.moveFocusForSelection(changed.get('selectedMenu') as string);\n    }\n    this.isFirstRender = false;\n  }\n\n  /**\n   * Opening a panel moves focus into it, so it is announced by name; closing\n   * hands focus back to the button that opened it.\n   */\n  private moveFocusForSelection(previousMenu: string): void {\n    if (this.selectedMenu) {\n      this.panel?.focus();\n    } else if (previousMenu) {\n      this.menuButtonFor(previousMenu)?.focus();\n    }\n  }\n\n  private menuButtonFor(menuId: string): IAItemNavMenuButton | undefined {\n    const buttons =\n      this.menuList?.querySelectorAll<IAItemNavMenuButton>(\n        'ia-itemnav-menu-button',\n      ) ?? [];\n    return [...buttons].find((button) => button.buttonId === menuId);\n  }\n\n  /**\n   * Moves focus into the drawer — the open panel if there is one, otherwise\n   * the first thing worth acting on. Exposed so the navigator doesn't have to\n   * reach through this component's shadow DOM to place focus.\n   */\n  focusDrawer(): void {\n    if (this.selectedMenu) {\n      this.panel?.focus();\n      return;\n    }\n    const firstMenuButton = this.menuList?.querySelector<HTMLElement>(\n      'ia-itemnav-menu-button',\n    );\n    (firstMenuButton ?? this.drawerCloseButton)?.focus();\n  }\n\n  /** Asks the navigator to close the whole drawer. */\n  closeMenu(): void {\n    this.dispatchEvent(\n      new CustomEvent(sliderEvents.closeDrawer, {\n        detail: this.selectedMenuDetails,\n      }),\n    );\n  }\n\n  /** Asks the navigator to close just the open panel. */\n  closePanel(): void {\n    this.dispatchEvent(\n      new CustomEvent(sliderEvents.closePanel, {\n        detail: { id: this.selectedMenu },\n      }),\n    );\n  }\n\n  /** Escape closes the panel first, then the drawer. */\n  handleKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape') return;\n    event.preventDefault();\n    if (this.selectedMenu) {\n      this.closePanel();\n    } else {\n      this.closeMenu();\n    }\n  }\n\n  get selectedMenuDetails(): MenuProviderInterface | undefined {\n    return this.menus.find((menu) => menu.id === this.selectedMenu);\n  }\n\n  /* render */\n\n  get selectedMenuClass(): string {\n    return this.selectedMenu ? 'open' : '';\n  }\n\n  get menuItems(): TemplateResult[] {\n    return this.menus.map(\n      (menu) => html`\n        <li>\n          <ia-itemnav-menu-button\n            .icon=${menu.icon}\n            .label=${menu.label}\n            .menuDetails=${menu.menuDetails || ''}\n            .buttonId=${menu.id}\n            .selected=${menu.id === this.selectedMenu}\n            .followable=${menu.followable || false}\n            .href=${menu.href || ''}\n          ></ia-itemnav-menu-button>\n        </li>\n      `,\n    );\n  }\n\n  get renderMenuHeader(): TemplateResult {\n    const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};\n    // `selectedMenuAction` defaults to Lit's `nothing` sentinel, which is\n    // truthy — so compare against it explicitly, otherwise the header would\n    // always get the secondary-action treatment (and an empty action span).\n    const hasAction = this.selectedMenuAction !== nothing;\n    const headerClass = hasAction ? 'with-secondary-action' : '';\n    const actionBlock = hasAction\n      ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n      : nothing;\n    const closeLabel = label ? `Close ${label}` : 'Close this panel';\n    return html`\n      <header class=${headerClass}>\n        <div class=\"details\">\n          <h3 id=\"panel-title\">${label}</h3>\n          <span class=\"extra-details\">${menuDetails}</span>\n        </div>\n        ${actionBlock}\n        <button\n          class=\"close\"\n          aria-label=${closeLabel}\n          title=${closeLabel}\n          @click=${this.closePanel}\n        >\n          ${collapseSidebarIcon}\n        </button>\n      </header>\n    `;\n  }\n\n  get closeButton(): TemplateResult {\n    return html`\n      <button\n        class=\"close\"\n        aria-label=\"Close navigation\"\n        title=\"Close navigation\"\n        @click=${this.closeMenu}\n      >\n        ${collapseSidebarIcon}\n      </button>\n    `;\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    const panelOpen = !!this.selectedMenu;\n    return html`\n      <div class=\"main\" @keydown=${this.handleKeyDown}>\n        <div class=\"menu\">\n          ${this.closeButton}\n          <ul class=\"menu-list\" role=\"list\">\n            ${this.menuItems}\n          </ul>\n          <!-- Closed panels are inert so the tab order and the accessibility\n               tree agree with what is on screen; the slide is a consequence\n               of the class, not something to wait on. -->\n          <div\n            class=\"content ${this.selectedMenuClass}\"\n            role=\"region\"\n            aria-labelledby=\"panel-title\"\n            tabindex=\"-1\"\n            ?inert=${!panelOpen}\n          >\n            ${this.renderMenuHeader}\n            <section>\n              <div class=\"selected-menu\">\n                ${this.selectedMenuDetails?.component || nothing}\n              </div>\n            </section>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const menuButtonWidth = css`42px`;\n    const sliderWidth = css`var(--item-navigator-menu-width--)`;\n    const transitionTiming = css`var(--item-navigator-animation-timing--)`;\n\n    return [\n      themeStyles,\n      css`\n        :host {\n          --item-navigator-menu-width--: var(\n            --item-navigator-menu-width,\n            320px\n          );\n          --item-navigator-animation-timing--: var(\n            --item-navigator-animation-timing,\n            200ms\n          );\n          --item-navigator-text-color--: var(\n            --item-navigator-text-color,\n            var(--true-white)\n          );\n          --item-navigator-menu-slider-bg--: var(\n            --item-navigator-menu-slider-bg,\n            #212121\n          );\n          --item-navigator-active-button-bg--: var(\n            --item-navigator-active-button-bg,\n            var(--mid-gray)\n          );\n          --item-navigator-border-color--: var(\n            --item-navigator-border-color,\n            #4b4b4b\n          );\n          /* Every glyph is square, so one knob sizes both axes. */\n          --item-navigator-header-icon-size--: var(\n            --item-navigator-header-icon-size,\n            2em\n          );\n          --item-navigator-icon-color--: var(\n            --item-navigator-icon-color,\n            var(--item-navigator-text-color--)\n          );\n\n          /* 10px base (petabox scale); internal sizing is em against it. */\n          --item-navigator-base-font-size--: var(\n            --item-navigator-base-font-size,\n            10px\n          );\n          font-size: var(--item-navigator-base-font-size--);\n        }\n\n        .main {\n          overflow: hidden;\n          width: 100%;\n          height: 100%;\n        }\n\n        /* The drawer's own slide is owned by the navigator's #menu; this just\n           fills it. */\n        .menu {\n          position: absolute;\n          top: 0;\n          left: 0;\n          bottom: 0;\n          width: ${sliderWidth};\n          padding: 0.5em 0.5em 0 0;\n          box-sizing: border-box;\n          font-size: 1.4em;\n          color: var(--item-navigator-text-color--);\n          background: var(--item-navigator-menu-slider-bg--);\n        }\n\n        button {\n          cursor: pointer;\n        }\n\n        header {\n          margin: 0 0 0.5em 0;\n        }\n\n        header * {\n          margin: 0;\n          display: inline-block;\n        }\n\n        header button {\n          cursor: pointer;\n        }\n\n        header.with-secondary-action .details {\n          width: 80%;\n        }\n\n        header .details {\n          font-weight: bold;\n          width: 88%;\n        }\n\n        header .custom-action > *,\n        button.close {\n          padding: 0;\n          background-color: transparent;\n          border: 0;\n        }\n\n        header .custom-action,\n        button.close {\n          position: absolute;\n        }\n\n        button.close {\n          /* Reset to the base so the header icon (em) doesn't compound\n             against .menu's enlarged font-size. */\n          font-size: var(--item-navigator-base-font-size--);\n          min-width: 38px;\n          min-height: 38px;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          right: 0;\n          top: 0;\n        }\n\n        button.close .ia-icon {\n          width: var(--item-navigator-header-icon-size--);\n          height: var(--item-navigator-header-icon-size--);\n        }\n\n        /* Our glyphs are masked spans: the mask supplies the shape, this\n           supplies the paint. */\n        span.ia-icon {\n          background-color: var(--item-navigator-icon-color--);\n        }\n\n        /* Host-supplied icons may still be inline svg, so keep theming those\n           the original way. */\n        .ia-icon .fill-color {\n          fill: var(--item-navigator-icon-color--);\n        }\n\n        .content {\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: ${menuButtonWidth};\n          z-index: 1;\n          transform: translateX(calc(${sliderWidth} * -1));\n          transition: var(\n            --item-navigator-panel-transition--,\n            transform ${transitionTiming} ease-out\n          );\n          background: var(--item-navigator-active-button-bg--);\n          border-right: 0.2em solid;\n          border-color: var(--item-navigator-border-color--);\n          padding: 0.5em 0 0 0.5em;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .content.open {\n          transform: translateX(0);\n        }\n\n        .content:focus {\n          outline: none;\n        }\n\n        .menu-list {\n          padding: 0;\n          margin: 0;\n          list-style: none;\n          background: var(--item-navigator-menu-slider-bg--);\n        }\n\n        .menu-list li {\n          margin-bottom: 0.2em;\n        }\n\n        .content > section {\n          overflow: auto;\n          overscroll-behavior: contain;\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ia-itemnav-menu-slider': IAItemNavMenuSlider;\n  }\n}\n"]}

package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult, PropertyValues, type CSSResultGroup } from 'lit';
+/**
+ * Placeholder shown in place of the theater when `viewAvailable` is false,
+ * i.e. the item has no files that can be experienced in the browser. Emits
+ * `loadingStateUpdated` so the navigator hides its loading spinner.
+ */
+export declare class IAItemNavNoTheaterAvailable extends LitElement {
+    identifier?: string;
+    emitLoaded(): void;
+    updated(changed: PropertyValues): void;
+    get downloadUrl(): string;
+    render(): TemplateResult;
+    static get styles(): CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ia-itemnav-no-theater-available': IAItemNavNoTheaterAvailable;
+    }
+}
+//# sourceMappingURL=ia-itemnav-no-theater-available.d.ts.map

package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-itemnav-no-theater-available.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EACd,cAAc,EAEd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb;;;;GAIG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAM;IAErD,UAAU,IAAI,IAAI;IAQlB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,MAAM,IAAI,cAAc;IAexB,MAAM,KAAK,MAAM,IAAI,cAAc,CAmDlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}

package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js

@@ -0,0 +1,102 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import themeStyles from '../../themes/theme-styles.js';
+/**
+ * Placeholder shown in place of the theater when `viewAvailable` is false,
+ * i.e. the item has no files that can be experienced in the browser. Emits
+ * `loadingStateUpdated` so the navigator hides its loading spinner.
+ */
+let IAItemNavNoTheaterAvailable = class IAItemNavNoTheaterAvailable 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 [
+            themeStyles,
+            css `
+        :host {
+          --item-navigator-text-color--: var(
+            --item-navigator-text-color,
+            var(--true-white)
+          );
+          color: var(--item-navigator-text-color--);
+          text-align: center;
+          /* 10px base (petabox scale); internal sizing is em against it. */
+          --item-navigator-base-font-size--: var(
+            --item-navigator-base-font-size,
+            10px
+          );
+          font-size: var(--item-navigator-base-font-size--);
+        }
+
+        section {
+          width: 100%;
+          margin: 5%;
+          padding: 0 5%;
+        }
+
+        p {
+          font-size: 1.4em;
+        }
+
+        a {
+          color: var(--item-navigator-text-color--);
+          background-color: var(--navy-blue);
+          min-height: 35px;
+          cursor: pointer;
+          line-height: normal;
+          border-radius: 0.4em;
+          text-align: center;
+          vertical-align: middle;
+          font-size: 1.4em;
+          font-family: var(--base-font-family);
+          display: inline-block;
+          padding: 0.85em 1.2em;
+          border: 1px solid var(--lightest-gray);
+          white-space: nowrap;
+          appearance: auto;
+          box-sizing: border-box;
+          user-select: none;
+          text-decoration: none;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IAItemNavNoTheaterAvailable.prototype, "identifier", void 0);
+IAItemNavNoTheaterAvailable = __decorate([
+    customElement('ia-itemnav-no-theater-available')
+], IAItemNavNoTheaterAvailable);
+export { IAItemNavNoTheaterAvailable };
+//# sourceMappingURL=ia-itemnav-no-theater-available.js.map

package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-itemnav-no-theater-available.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;GAIG;AAEI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IAApD;;QACuB,eAAU,GAAY,EAAE,CAAC;IAuFvD,CAAC;IArFC,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,CAAC;YAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;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;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8CF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAvF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA0B;AAD1C,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CAwFvC","sourcesContent":["import {\n  LitElement,\n  html,\n  TemplateResult,\n  PropertyValues,\n  css,\n  type CSSResultGroup,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Placeholder shown in place of the theater when `viewAvailable` is false,\n * i.e. the item has no files that can be experienced in the browser. Emits\n * `loadingStateUpdated` so the navigator hides its loading spinner.\n */\n@customElement('ia-itemnav-no-theater-available')\nexport class IAItemNavNoTheaterAvailable 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(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --item-navigator-text-color--: var(\n            --item-navigator-text-color,\n            var(--true-white)\n          );\n          color: var(--item-navigator-text-color--);\n          text-align: center;\n          /* 10px base (petabox scale); internal sizing is em against it. */\n          --item-navigator-base-font-size--: var(\n            --item-navigator-base-font-size,\n            10px\n          );\n          font-size: var(--item-navigator-base-font-size--);\n        }\n\n        section {\n          width: 100%;\n          margin: 5%;\n          padding: 0 5%;\n        }\n\n        p {\n          font-size: 1.4em;\n        }\n\n        a {\n          color: var(--item-navigator-text-color--);\n          background-color: var(--navy-blue);\n          min-height: 35px;\n          cursor: pointer;\n          line-height: normal;\n          border-radius: 0.4em;\n          text-align: center;\n          vertical-align: middle;\n          font-size: 1.4em;\n          font-family: var(--base-font-family);\n          display: inline-block;\n          padding: 0.85em 1.2em;\n          border: 1px solid var(--lightest-gray);\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}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ia-itemnav-no-theater-available': IAItemNavNoTheaterAvailable;\n  }\n}\n"]}

package/dist/src/elements/ia-item-navigator/icons/collapse-sidebar.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill="#000"
+    fill-rule="evenodd"
+    d="m9 0c4.9705627 0 9 4.02943725 9 9 0 4.9705627-4.0294373 9-9 9-4.97056275 0-9-4.0294373-9-9 0-4.97056275 4.02943725-9 9-9zm1.6976167 5.28352881c-.365258-.3556459-.9328083-.37581056-1.32099801-.06558269l-.09308988.0844372-3 3.08108108-.08194436.09533317c-.27484337.36339327-.26799482.87009349.01656959 1.22592581l.084491.09308363 3 2.91891889.09533796.0818904c.3633964.2746544.8699472.2677153 1.2256839-.0167901l.093059-.0844712.0818904-.095338c.2746544-.3633964.2677153-.8699472-.0167901-1.2256839l-.0844712-.093059-2.283355-2.2222741 2.3024712-2.36338332.0819252-.09530804c.2997677-.39632298.2644782-.96313393-.1007797-1.31877983z"
+  />
+</svg>

package/dist/src/elements/ia-item-navigator/icons/ellipses.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill="#000"
+    fill-rule="evenodd"
+    d="m10.5 17.5c1.3807119 0 2.5 1.1192881 2.5 2.5s-1.1192881 2.5-2.5 2.5c-1.38071187 0-2.5-1.1192881-2.5-2.5s1.11928813-2.5 2.5-2.5zm9.5 0c1.3807119 0 2.5 1.1192881 2.5 2.5s-1.1192881 2.5-2.5 2.5-2.5-1.1192881-2.5-2.5 1.1192881-2.5 2.5-2.5zm9.5 0c1.3807119 0 2.5 1.1192881 2.5 2.5s-1.1192881 2.5-2.5 2.5-2.5-1.1192881-2.5-2.5 1.1192881-2.5 2.5-2.5z"
+  />
+</svg>

package/dist/src/elements/ia-item-navigator/icons.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Icons taken from the `@internetarchive/icon-ellipses` and
+ * `@internetarchive/icon-collapse-sidebar` packages (v1.4.1). They ship as
+ * standalone `.svg` files — rather than icon package dependencies or inline
+ * templates — so their path data stays out of the JS bundle. Each is rendered
+ * as a CSS-masked span (see `maskedIcon`) so host components can still recolor
+ * it via their own custom properties.
+ */
+/** Three-dot "more options" glyph used by the menu toggle button. */
+export declare const ellipsesIcon: import("lit").TemplateResult;
+/** Circular "collapse sidebar" glyph used by the menu/panel close buttons. */
+export declare const collapseSidebarIcon: import("lit").TemplateResult;
+//# sourceMappingURL=icons.d.ts.map

package/dist/src/elements/ia-item-navigator/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/icons.ts"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AAEH,qEAAqE;AACrE,eAAO,MAAM,YAAY,8BAA0B,CAAC;AAEpD,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,8BAAiC,CAAC"}

package/dist/src/elements/ia-item-navigator/icons.js

@@ -0,0 +1,16 @@
+import { maskedIcon } from '../../util/masked-icon.js';
+import ellipsesUrl from './icons/ellipses.svg';
+import collapseSidebarUrl from './icons/collapse-sidebar.svg';
+/**
+ * Icons taken from the `@internetarchive/icon-ellipses` and
+ * `@internetarchive/icon-collapse-sidebar` packages (v1.4.1). They ship as
+ * standalone `.svg` files — rather than icon package dependencies or inline
+ * templates — so their path data stays out of the JS bundle. Each is rendered
+ * as a CSS-masked span (see `maskedIcon`) so host components can still recolor
+ * it via their own custom properties.
+ */
+/** Three-dot "more options" glyph used by the menu toggle button. */
+export const ellipsesIcon = maskedIcon(ellipsesUrl);
+/** Circular "collapse sidebar" glyph used by the menu/panel close buttons. */
+export const collapseSidebarIcon = maskedIcon(collapseSidebarUrl);
+//# sourceMappingURL=icons.js.map

package/dist/src/elements/ia-item-navigator/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAC/C,OAAO,kBAAkB,MAAM,8BAA8B,CAAC;AAE9D;;;;;;;GAOG;AAEH,qEAAqE;AACrE,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAEpD,8EAA8E;AAC9E,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import { maskedIcon } from '@src/util/masked-icon';\n\nimport ellipsesUrl from './icons/ellipses.svg';\nimport collapseSidebarUrl from './icons/collapse-sidebar.svg';\n\n/**\n * Icons taken from the `@internetarchive/icon-ellipses` and\n * `@internetarchive/icon-collapse-sidebar` packages (v1.4.1). They ship as\n * standalone `.svg` files — rather than icon package dependencies or inline\n * templates — so their path data stays out of the JS bundle. Each is rendered\n * as a CSS-masked span (see `maskedIcon`) so host components can still recolor\n * it via their own custom properties.\n */\n\n/** Three-dot \"more options\" glyph used by the menu toggle button. */\nexport const ellipsesIcon = maskedIcon(ellipsesUrl);\n\n/** Circular \"collapse sidebar\" glyph used by the menu/panel close buttons. */\nexport const collapseSidebarIcon = maskedIcon(collapseSidebarUrl);\n"]}

package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts

@@ -0,0 +1,41 @@
+import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './menu-interfaces.js';
+/** Toggles Menu && Sets open panel */
+export interface ToggleSideMenuOpenEvent extends CustomEvent {
+    type: 'updateSideMenu';
+    detail: {
+        menuId: MenuId | undefined | '';
+        action: 'open' | 'toggle' | '';
+    };
+}
+/** Sets open panel */
+export interface ToggleSidePanelOpenEvent extends CustomEvent {
+    type: 'menuTypeSelected';
+    detail: {
+        id: MenuId | '';
+    };
+}
+/** Sets menu order that is displayed */
+export interface SetSideMenuContentsEvent extends CustomEvent {
+    type: 'menuUpdated';
+    detail: MenuProviderInterface[];
+}
+/** Sets menu shortcuts that is displayed */
+export interface SetSideMenuShortcutsEvent extends CustomEvent {
+    type: 'menuUpdated';
+    detail: MenuShortcutInterface[];
+}
+/** Toggles fullscreen mode */
+export interface ManageFullscreenEvent extends CustomEvent {
+    type: 'ViewportInFullScreen';
+    detail: {
+        isFullScreen: boolean;
+    };
+}
+/** Toggles loading view */
+export interface LoadingStateUpdatedEvent extends CustomEvent {
+    type: 'loadingStateUpdated';
+    detail: {
+        loaded: boolean;
+    };
+}
+//# sourceMappingURL=event-interfaces.d.ts.map