@internetarchive/ia-topnav 1.2.2 → 1.3.0-WEBDEV-8274-1

package/dist/src/ia-topnav.js

@@ -0,0 +1,343 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { buildTopNavMenus, defaultTopNavConfig } from './data/menus';
+import './desktop-subnav';
+import './dropdown-menu';
+import './media-slider';
+import './primary-nav';
+import './search-menu';
+import './signed-out-dropdown';
+import iaTopNavCSS from './styles/ia-topnav';
+import './user-menu';
+import KeyboardNavigation from './lib/keyboard-navigation';
+let IATopNav = class IATopNav extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.localLinks = false;
+        this.waybackPagesArchived = '';
+        this.baseHost = 'https://archive.org';
+        this.mediaBaseHost = 'https://archive.org';
+        this.admin = false;
+        this.canManageFlags = false;
+        this.config = defaultTopNavConfig;
+        this.hideSearch = false;
+        this.itemIdentifier = '';
+        this.mediaSliderOpen = false;
+        this.openMenu = '';
+        this.screenName = '';
+        this.searchIn = '';
+        this.searchQuery = '';
+        this.selectedMenuOption = '';
+        this.username = '';
+        this.userProfileImagePath = '/services/img/user/profile';
+        this.secondIdentitySlotMode = '';
+        this.menus = buildTopNavMenus();
+    }
+    get normalizedBaseHost() {
+        return !this.localLinks ? this.baseHost : '';
+    }
+    static get styles() {
+        return iaTopNavCSS;
+    }
+    updated(props) {
+        var _a;
+        if (props.has('username') ||
+            props.has('waybackPagesArchived') ||
+            props.has('itemIdentifier') ||
+            props.has('localLinks') ||
+            props.has('baseHost')) {
+            this.menuSetup();
+        }
+        if (this.openMenu === 'search') {
+            const targetElement = (_a = this.renderRoot.querySelector('search-menu')) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+            if (targetElement) {
+                this.keyboardNavigation = new KeyboardNavigation(targetElement, this.openMenu);
+                if (this.previousKeydownListener) {
+                    this.removeEventListener('keydown', this.previousKeydownListener);
+                }
+                this.addEventListener('keydown', this.keyboardNavigation.handleKeyDown);
+                this.previousKeydownListener = this.keyboardNavigation.handleKeyDown;
+            }
+        }
+    }
+    firstUpdated() {
+        // close open menu on `esc` click
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this.openMenu = '';
+                this.mediaSliderOpen = false;
+            }
+        }, false);
+    }
+    menuSetup() {
+        // re/build the nav
+        this.menus = buildTopNavMenus(this.username, this.normalizedBaseHost, this.waybackPagesArchived, this.itemIdentifier);
+    }
+    menuToggled(e) {
+        const currentMenu = this.openMenu;
+        this.openMenu = currentMenu === e.detail.menuName ? '' : e.detail.menuName;
+        // Keeps media slider open if media menu is open
+        if (this.openMenu === 'media') {
+            return;
+        }
+        this.closeMediaSlider();
+    }
+    navSearchBlurEvent(e) {
+        var _a, _b;
+        if (this.previousKeydownListener) {
+            this.removeEventListener('keydown', this.previousKeydownListener);
+        }
+        const isUploadButton = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.isUploadButton;
+        if (!isUploadButton) {
+            const searchMenu = this.renderRoot.querySelector('search-menu');
+            const elements = (_b = this.keyboardNavigation) === null || _b === void 0 ? void 0 : _b.getFocusableElements();
+            if (searchMenu && (elements === null || elements === void 0 ? void 0 : elements.length)) {
+                elements[0].focus();
+            }
+        }
+    }
+    openMediaSlider() {
+        this.mediaSliderOpen = true;
+    }
+    closeMediaSlider() {
+        this.mediaSliderOpen = false;
+        this.selectedMenuOption = '';
+    }
+    closeMenus() {
+        this.openMenu = '';
+        this.closeMediaSlider();
+    }
+    searchInChanged(e) {
+        this.searchIn = e.detail.searchIn;
+    }
+    trackClick(e) {
+        this.dispatchEvent(new CustomEvent('analyticsClick', {
+            bubbles: true,
+            composed: true,
+            detail: e.detail,
+        }));
+    }
+    trackSubmit(e) {
+        this.dispatchEvent(new CustomEvent('analyticsSubmit', {
+            bubbles: true,
+            composed: true,
+            detail: e.detail,
+        }));
+    }
+    mediaTypeSelected(e) {
+        if (this.selectedMenuOption === e.detail.mediatype) {
+            this.closeMediaSlider();
+            return;
+        }
+        this.selectedMenuOption = e.detail.mediatype;
+        this.openMediaSlider();
+    }
+    get searchMenuOpened() {
+        return this.openMenu === 'search';
+    }
+    get signedOutOpened() {
+        return this.openMenu === 'login';
+    }
+    get userMenuOpened() {
+        return this.openMenu === 'user';
+    }
+    get searchMenuTabIndex() {
+        return this.searchMenuOpened ? '' : '-1';
+    }
+    get userMenuTabIndex() {
+        return this.userMenuOpened ? '' : '-1';
+    }
+    get signedOutTabIndex() {
+        return this.signedOutOpened ? '' : '-1';
+    }
+    get closeLayerClass() {
+        return !!this.openMenu || this.mediaSliderOpen ? 'visible' : '';
+    }
+    get userMenu() {
+        return html `
+      <user-menu
+        .baseHost=${this.normalizedBaseHost}
+        .config=${this.config}
+        .menuItems=${this.userMenuItems}
+        ?open=${this.openMenu === 'user'}
+        .username=${this.username}
+        ?hideSearch=${this.hideSearch}
+        tabindex="${this.userMenuTabIndex}"
+        @menuToggled=${this.menuToggled}
+        @trackClick=${this.trackClick}
+        @focusToOtherMenuItem=${(e) => (this.currentTab = e.detail)}
+      ></user-menu>
+    `;
+    }
+    get signedOutDropdown() {
+        return html `
+      <signed-out-dropdown
+        .baseHost=${this.normalizedBaseHost}
+        .config=${this.config}
+        .open=${this.signedOutOpened}
+        ?hideSearch=${this.hideSearch}
+        tabindex="${this.signedOutTabIndex}"
+        .menuItems=${this.signedOutMenuItems}
+        @focusToOtherMenuItem=${(e) => {
+            this.currentTab = e.detail;
+        }}
+      ></signed-out-dropdown>
+    `;
+    }
+    get signedOutMenuItems() {
+        return this.menus.signedOut;
+    }
+    /**
+     * Most users just get the basic menu items.
+     * For users with `/items` priv, additional admin menu items are included too.
+     * Having the `/flags` priv adds a further admin item for managing flags.
+     */
+    get userMenuItems() {
+        const basicItems = this.menus.user;
+        let adminItems = this.menus.userAdmin;
+        if (this.canManageFlags) {
+            adminItems = adminItems.concat(this.menus.userAdminFlags);
+        }
+        return this.itemIdentifier && this.admin
+            ? [basicItems, adminItems]
+            : [basicItems];
+    }
+    get allowSecondaryIcon() {
+        return this.secondIdentitySlotMode === 'allow';
+    }
+    get secondLogoSlot() {
+        return this.allowSecondaryIcon
+            ? html `
+          <slot name="opt-sec-logo" slot="opt-sec-logo"></slot>
+          <slot name="opt-sec-logo-mobile" slot="opt-sec-logo-mobile"></slot>
+        `
+            : nothing;
+    }
+    get separatorTemplate() {
+        return html `<li class="divider" role="presentation"></li>`;
+    }
+    render() {
+        return html `
+      <div class="topnav">
+        <primary-nav
+          .baseHost=${this.normalizedBaseHost}
+          .mediaBaseHost=${this.mediaBaseHost}
+          .config=${this.config}
+          .openMenu=${this.openMenu}
+          .screenName=${this.screenName}
+          .searchIn=${this.searchIn}
+          .searchQuery=${this.searchQuery}
+          .secondIdentitySlotMode=${this.secondIdentitySlotMode}
+          .selectedMenuOption=${this.selectedMenuOption}
+          .username=${this.username}
+          .userProfileImagePath=${this.userProfileImagePath}
+          .currentTab=${this.currentTab}
+          ?hideSearch=${this.hideSearch}
+          @mediaTypeSelected=${this.mediaTypeSelected}
+          @trackClick=${this.trackClick}
+          @trackSubmit=${this.trackSubmit}
+          @menuToggled=${this.menuToggled}
+          @navSearchBlur=${this.navSearchBlurEvent}
+        >
+          ${this.secondLogoSlot}
+        </primary-nav>
+        <media-slider
+          .baseHost=${this.normalizedBaseHost}
+          .config=${this.config}
+          .selectedMenuOption=${this.selectedMenuOption}
+          .mediaSliderOpen=${this.mediaSliderOpen}
+          .menus=${this.menus}
+          tabindex="${this.mediaSliderOpen ? '1' : '-1'}"
+          @focusToOtherMenuItem=${(e) => (this.currentTab = e.detail)}
+        ></media-slider>
+      </div>
+      ${this.username ? this.userMenu : this.signedOutDropdown}
+      <search-menu
+        .baseHost=${this.normalizedBaseHost}
+        .config=${this.config}
+        .openMenu=${this.openMenu}
+        tabindex="${this.searchMenuTabIndex}"
+        ?hideSearch=${this.hideSearch}
+        @searchInChanged=${this.searchInChanged}
+        @trackClick=${this.trackClick}
+        @trackSubmit=${this.trackSubmit}
+      ></search-menu>
+      <desktop-subnav
+        .baseHost=${this.normalizedBaseHost}
+        .menuItems=${this.menus.more.links}
+        @focus=${this.closeMenus}
+      ></desktop-subnav>
+      <div
+        id="close-layer"
+        class="${this.closeLayerClass}"
+        @click=${this.closeMenus}
+      ></div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], IATopNav.prototype, "localLinks", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "waybackPagesArchived", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "mediaBaseHost", void 0);
+__decorate([
+    property({ type: Boolean })
+], IATopNav.prototype, "admin", void 0);
+__decorate([
+    property({ type: Boolean })
+], IATopNav.prototype, "canManageFlags", void 0);
+__decorate([
+    property({ type: Object })
+], IATopNav.prototype, "config", void 0);
+__decorate([
+    property({ type: Boolean })
+], IATopNav.prototype, "hideSearch", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "itemIdentifier", void 0);
+__decorate([
+    property({ type: Boolean })
+], IATopNav.prototype, "mediaSliderOpen", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "openMenu", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "screenName", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "searchIn", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "searchQuery", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "selectedMenuOption", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "username", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "userProfileImagePath", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "secondIdentitySlotMode", void 0);
+__decorate([
+    property({ type: Object })
+], IATopNav.prototype, "currentTab", void 0);
+__decorate([
+    state()
+], IATopNav.prototype, "menus", void 0);
+IATopNav = __decorate([
+    customElement('ia-topnav')
+], IATopNav);
+export { IATopNav };
+//# sourceMappingURL=ia-topnav.js.map

package/dist/src/ia-topnav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../src/ia-topnav.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { buildTopNavMenus, defaultTopNavConfig } from './data/menus';\nimport './desktop-subnav';\nimport './dropdown-menu';\nimport './media-slider';\nimport {\n  IATopNavConfig,\n  IATopNavMenuConfig,\n  IATopNavSecondIdentitySlotMode,\n} from './models';\nimport './primary-nav';\nimport './search-menu';\nimport './signed-out-dropdown';\nimport iaTopNavCSS from './styles/ia-topnav';\nimport './user-menu';\nimport KeyboardNavigation from './lib/keyboard-navigation';\n\n@customElement('ia-topnav')\nexport class IATopNav extends LitElement {\n  @property({ type: Boolean }) localLinks = false;\n\n  @property({ type: String }) waybackPagesArchived = '';\n\n  @property({ type: String }) baseHost = 'https://archive.org';\n\n  @property({ type: String }) mediaBaseHost = 'https://archive.org';\n\n  @property({ type: Boolean }) admin = false;\n\n  @property({ type: Boolean }) canManageFlags = false;\n\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n\n  @property({ type: Boolean }) hideSearch = false;\n\n  @property({ type: String }) itemIdentifier = '';\n\n  @property({ type: Boolean }) mediaSliderOpen = false;\n\n  @property({ type: String }) openMenu = '';\n\n  @property({ type: String }) screenName: string = '';\n\n  @property({ type: String }) searchIn = '';\n\n  @property({ type: String }) searchQuery = '';\n\n  @property({ type: String }) selectedMenuOption = '';\n\n  @property({ type: String }) username: string = '';\n\n  @property({ type: String }) userProfileImagePath =\n    '/services/img/user/profile';\n\n  @property({ type: String })\n  secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\n\n  @property({ type: Object }) currentTab?: {\n    mediatype: string;\n    moveTo: string;\n  };\n\n  @state() private menus: IATopNavMenuConfig = buildTopNavMenus();\n  private previousKeydownListener: // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ((this: HTMLElement, ev: KeyboardEvent) => any) | undefined;\n\n  private keyboardNavigation?: KeyboardNavigation;\n\n  private get normalizedBaseHost() {\n    return !this.localLinks ? this.baseHost : '';\n  }\n\n  static get styles() {\n    return iaTopNavCSS;\n  }\n\n  updated(props: PropertyValues) {\n    if (\n      props.has('username') ||\n      props.has('waybackPagesArchived') ||\n      props.has('itemIdentifier') ||\n      props.has('localLinks') ||\n      props.has('baseHost')\n    ) {\n      this.menuSetup();\n    }\n\n    if (this.openMenu === 'search') {\n      const targetElement =\n        this.renderRoot.querySelector('search-menu')?.shadowRoot;\n      if (targetElement) {\n        this.keyboardNavigation = new KeyboardNavigation(\n          targetElement as unknown as HTMLElement,\n          this.openMenu,\n        );\n\n        if (this.previousKeydownListener) {\n          this.removeEventListener('keydown', this.previousKeydownListener);\n        }\n        this.addEventListener('keydown', this.keyboardNavigation.handleKeyDown);\n        this.previousKeydownListener = this.keyboardNavigation.handleKeyDown;\n      }\n    }\n  }\n\n  firstUpdated() {\n    // close open menu on `esc` click\n    document.addEventListener(\n      'keydown',\n      (e) => {\n        if (e.key === 'Escape') {\n          this.openMenu = '';\n          this.mediaSliderOpen = false;\n        }\n      },\n      false,\n    );\n  }\n\n  menuSetup() {\n    // re/build the nav\n    this.menus = buildTopNavMenus(\n      this.username,\n      this.normalizedBaseHost,\n      this.waybackPagesArchived,\n      this.itemIdentifier,\n    );\n  }\n\n  menuToggled(e: CustomEvent) {\n    const currentMenu = this.openMenu;\n    this.openMenu = currentMenu === e.detail.menuName ? '' : e.detail.menuName;\n    // Keeps media slider open if media menu is open\n    if (this.openMenu === 'media') {\n      return;\n    }\n    this.closeMediaSlider();\n  }\n\n  navSearchBlurEvent(e: CustomEvent) {\n    if (this.previousKeydownListener) {\n      this.removeEventListener('keydown', this.previousKeydownListener);\n    }\n\n    const isUploadButton = e.detail?.isUploadButton;\n    if (!isUploadButton) {\n      const searchMenu = this.renderRoot.querySelector(\n        'search-menu',\n      ) as HTMLElement;\n      const elements = this.keyboardNavigation?.getFocusableElements();\n      if (searchMenu && elements?.length) {\n        elements[0].focus();\n      }\n    }\n  }\n\n  openMediaSlider() {\n    this.mediaSliderOpen = true;\n  }\n\n  closeMediaSlider() {\n    this.mediaSliderOpen = false;\n    this.selectedMenuOption = '';\n  }\n\n  closeMenus() {\n    this.openMenu = '';\n    this.closeMediaSlider();\n  }\n\n  searchInChanged(e: CustomEvent) {\n    this.searchIn = e.detail.searchIn;\n  }\n\n  trackClick(e: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('analyticsClick', {\n        bubbles: true,\n        composed: true,\n        detail: e.detail,\n      }),\n    );\n  }\n\n  trackSubmit(e: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('analyticsSubmit', {\n        bubbles: true,\n        composed: true,\n        detail: e.detail,\n      }),\n    );\n  }\n\n  mediaTypeSelected(e: CustomEvent) {\n    if (this.selectedMenuOption === e.detail.mediatype) {\n      this.closeMediaSlider();\n      return;\n    }\n    this.selectedMenuOption = e.detail.mediatype;\n    this.openMediaSlider();\n  }\n\n  get searchMenuOpened() {\n    return this.openMenu === 'search';\n  }\n\n  get signedOutOpened() {\n    return this.openMenu === 'login';\n  }\n\n  get userMenuOpened() {\n    return this.openMenu === 'user';\n  }\n\n  get searchMenuTabIndex() {\n    return this.searchMenuOpened ? '' : '-1';\n  }\n\n  get userMenuTabIndex() {\n    return this.userMenuOpened ? '' : '-1';\n  }\n\n  get signedOutTabIndex() {\n    return this.signedOutOpened ? '' : '-1';\n  }\n\n  get closeLayerClass() {\n    return !!this.openMenu || this.mediaSliderOpen ? 'visible' : '';\n  }\n\n  get userMenu() {\n    return html`\n      <user-menu\n        .baseHost=${this.normalizedBaseHost}\n        .config=${this.config}\n        .menuItems=${this.userMenuItems}\n        ?open=${this.openMenu === 'user'}\n        .username=${this.username}\n        ?hideSearch=${this.hideSearch}\n        tabindex=\"${this.userMenuTabIndex}\"\n        @menuToggled=${this.menuToggled}\n        @trackClick=${this.trackClick}\n        @focusToOtherMenuItem=${(e: CustomEvent) =>\n          (this.currentTab = e.detail)}\n      ></user-menu>\n    `;\n  }\n\n  get signedOutDropdown() {\n    return html`\n      <signed-out-dropdown\n        .baseHost=${this.normalizedBaseHost}\n        .config=${this.config}\n        .open=${this.signedOutOpened}\n        ?hideSearch=${this.hideSearch}\n        tabindex=\"${this.signedOutTabIndex}\"\n        .menuItems=${this.signedOutMenuItems}\n        @focusToOtherMenuItem=${(e: CustomEvent) => {\n          this.currentTab = e.detail;\n        }}\n      ></signed-out-dropdown>\n    `;\n  }\n\n  get signedOutMenuItems() {\n    return this.menus.signedOut;\n  }\n\n  /**\n   * Most users just get the basic menu items.\n   * For users with `/items` priv, additional admin menu items are included too.\n   * Having the `/flags` priv adds a further admin item for managing flags.\n   */\n  get userMenuItems() {\n    const basicItems = this.menus.user;\n\n    let adminItems = this.menus.userAdmin;\n    if (this.canManageFlags) {\n      adminItems = adminItems.concat(this.menus.userAdminFlags);\n    }\n\n    return this.itemIdentifier && this.admin\n      ? [basicItems, adminItems]\n      : [basicItems];\n  }\n\n  get allowSecondaryIcon() {\n    return this.secondIdentitySlotMode === 'allow';\n  }\n\n  get secondLogoSlot() {\n    return this.allowSecondaryIcon\n      ? html`\n          <slot name=\"opt-sec-logo\" slot=\"opt-sec-logo\"></slot>\n          <slot name=\"opt-sec-logo-mobile\" slot=\"opt-sec-logo-mobile\"></slot>\n        `\n      : nothing;\n  }\n\n  get separatorTemplate() {\n    return html`<li class=\"divider\" role=\"presentation\"></li>`;\n  }\n\n  render() {\n    return html`\n      <div class=\"topnav\">\n        <primary-nav\n          .baseHost=${this.normalizedBaseHost}\n          .mediaBaseHost=${this.mediaBaseHost}\n          .config=${this.config}\n          .openMenu=${this.openMenu}\n          .screenName=${this.screenName}\n          .searchIn=${this.searchIn}\n          .searchQuery=${this.searchQuery}\n          .secondIdentitySlotMode=${this.secondIdentitySlotMode}\n          .selectedMenuOption=${this.selectedMenuOption}\n          .username=${this.username}\n          .userProfileImagePath=${this.userProfileImagePath}\n          .currentTab=${this.currentTab}\n          ?hideSearch=${this.hideSearch}\n          @mediaTypeSelected=${this.mediaTypeSelected}\n          @trackClick=${this.trackClick}\n          @trackSubmit=${this.trackSubmit}\n          @menuToggled=${this.menuToggled}\n          @navSearchBlur=${this.navSearchBlurEvent}\n        >\n          ${this.secondLogoSlot}\n        </primary-nav>\n        <media-slider\n          .baseHost=${this.normalizedBaseHost}\n          .config=${this.config}\n          .selectedMenuOption=${this.selectedMenuOption}\n          .mediaSliderOpen=${this.mediaSliderOpen}\n          .menus=${this.menus}\n          tabindex=\"${this.mediaSliderOpen ? '1' : '-1'}\"\n          @focusToOtherMenuItem=${(e: CustomEvent) =>\n            (this.currentTab = e.detail)}\n        ></media-slider>\n      </div>\n      ${this.username ? this.userMenu : this.signedOutDropdown}\n      <search-menu\n        .baseHost=${this.normalizedBaseHost}\n        .config=${this.config}\n        .openMenu=${this.openMenu}\n        tabindex=\"${this.searchMenuTabIndex}\"\n        ?hideSearch=${this.hideSearch}\n        @searchInChanged=${this.searchInChanged}\n        @trackClick=${this.trackClick}\n        @trackSubmit=${this.trackSubmit}\n      ></search-menu>\n      <desktop-subnav\n        .baseHost=${this.normalizedBaseHost}\n        .menuItems=${this.menus.more.links}\n        @focus=${this.closeMenus}\n      ></desktop-subnav>\n      <div\n        id=\"close-layer\"\n        class=\"${this.closeLayerClass}\"\n        @click=${this.closeMenus}\n      ></div>\n    `;\n  }\n}\n"]}

package/dist/src/lib/format-url.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (url: string | undefined, baseHost: string) => string;
+export default _default;

package/dist/src/lib/format-url.js

@@ -0,0 +1,2 @@
+export default (url = '', baseHost) => /^https?:/.test(url) ? url : `${baseHost}${url}`;
+//# sourceMappingURL=format-url.js.map

package/dist/src/lib/format-url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-url.js","sourceRoot":"","sources":["../../../src/lib/format-url.ts"],"names":[],"mappings":"AAAA,eAAe,CAAC,MAAc,EAAE,EAAE,QAAgB,EAAU,EAAE,CAC5D,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAE,GAAG,QAAQ,GAAG,GAAG,EAAwB,CAAC","sourcesContent":["export default (url: string = '', baseHost: string): string =>\n  /^https?:/.test(url) ? url : (`${baseHost}${url}` as string & Location);\n"]}

package/dist/src/lib/keyboard-navigation.d.ts

@@ -0,0 +1,45 @@
+export default class KeyboardNavigation {
+    elementsContainer: HTMLElement;
+    menuOption: string;
+    focusableElements: HTMLElement[];
+    focusedIndex: number;
+    /**
+     * Constructor for the KeyboardNavigation class.
+     * @param {HTMLElement} elementsContainer - The container element that holds the focusable elements.
+     * @param {string} menuOption - The type of menu option ('web' or 'usermenu').
+     */
+    constructor(elementsContainer: HTMLElement, menuOption: string);
+    /**
+     * Gets an array of focusable elements within the container.
+     * @returns {HTMLElement[]} An array of focusable elements.
+     */
+    getFocusableElements(): HTMLElement[];
+    /**
+     * Handles keyboard events and focuses the appropriate element.
+     * @param {KeyboardEvent} event - The keyboard event object.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handles arrow key events and focuses the next or previous element for topnav sub-nav and usermenu
+     * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').
+     */
+    handleArrowKey(key: string): void;
+    /**
+     * Handles the Tab key event and focuses the next or previous menu item.
+     * @param {KeyboardEvent} event - The keyboard event object.
+     */
+    handleTabKey(event: KeyboardEvent): void;
+    /**
+     * Focuses the previous focusable element in the container.
+     */
+    focusPrevious(): void;
+    /**
+     * Focuses the next focusable element in the container.
+     */
+    focusNext(): void;
+    /**
+     * Focuses the other parent menu items based on the provided flag.
+     * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.
+     */
+    emitFocusToOtherMenuItems(isPrevious?: boolean): void;
+}

package/dist/src/lib/keyboard-navigation.js

@@ -0,0 +1,140 @@
+export default class KeyboardNavigation {
+    /**
+     * Constructor for the KeyboardNavigation class.
+     * @param {HTMLElement} elementsContainer - The container element that holds the focusable elements.
+     * @param {string} menuOption - The type of menu option ('web' or 'usermenu').
+     */
+    constructor(elementsContainer, menuOption) {
+        var _a;
+        this.elementsContainer = elementsContainer;
+        this.menuOption = menuOption;
+        this.focusableElements = this.getFocusableElements();
+        this.focusedIndex = 0; // always start from first element
+        if (menuOption !== 'search') {
+            (_a = this.focusableElements[this.focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+    }
+    /**
+     * Gets an array of focusable elements within the container.
+     * @returns {HTMLElement[]} An array of focusable elements.
+     */
+    getFocusableElements() {
+        var _a, _b, _c, _d, _e, _f;
+        const focusableTagSelectors = 'a[href], button, input, [tabindex]';
+        const isFocusable = (el) => !el.hasAttribute('disabled') &&
+            el.getAttribute('aria-hidden') !== 'true' &&
+            el.getAttribute('tabindex') !== '-1';
+        let elements;
+        if (this.menuOption === 'web') {
+            // wayback focusable elements
+            const waybackSlider = (_a = this.elementsContainer.querySelector('wayback-slider')) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+            const waybackSearch = waybackSlider === null || waybackSlider === void 0 ? void 0 : waybackSlider.querySelector('wayback-search');
+            const waybackSearchElements = Array.from((_c = (_b = waybackSearch === null || waybackSearch === void 0 ? void 0 : waybackSearch.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll(focusableTagSelectors)) !== null && _c !== void 0 ? _c : []);
+            const normalElements = Array.from((_d = waybackSlider === null || waybackSlider === void 0 ? void 0 : waybackSlider.querySelectorAll(focusableTagSelectors)) !== null && _d !== void 0 ? _d : []);
+            // wayback save-form focusable elements
+            const savePageForm = waybackSlider === null || waybackSlider === void 0 ? void 0 : waybackSlider.querySelector('save-page-form');
+            const savePageFormElements = Array.from((_f = (_e = savePageForm === null || savePageForm === void 0 ? void 0 : savePageForm.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelectorAll(focusableTagSelectors)) !== null && _f !== void 0 ? _f : []);
+            elements = [
+                ...waybackSearchElements,
+                ...normalElements,
+                ...savePageFormElements,
+            ];
+        }
+        else {
+            elements = this.elementsContainer.querySelectorAll(focusableTagSelectors);
+        }
+        return Array.from(elements !== null && elements !== void 0 ? elements : []).filter(isFocusable);
+    }
+    /**
+     * Handles keyboard events and focuses the appropriate element.
+     * @param {KeyboardEvent} event - The keyboard event object.
+     */
+    handleKeyDown(event) {
+        const target = event.composedPath()[0];
+        // Ignore events from editable fields
+        if (target instanceof HTMLInputElement ||
+            target instanceof HTMLTextAreaElement ||
+            target.isContentEditable) {
+            return;
+        }
+        const { key } = event;
+        const isArrowKey = [
+            'ArrowDown',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowLeft',
+        ].includes(key);
+        const isTabKey = key === 'Tab';
+        if (isArrowKey) {
+            this.handleArrowKey(key);
+            event.preventDefault();
+        }
+        else if (isTabKey) {
+            this.handleTabKey(event);
+        }
+    }
+    /**
+     * Handles arrow key events and focuses the next or previous element for topnav sub-nav and usermenu
+     * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').
+     */
+    handleArrowKey(key) {
+        const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);
+        if (isDownOrRight) {
+            this.focusNext();
+        }
+        else {
+            this.focusPrevious();
+        }
+    }
+    /**
+     * Handles the Tab key event and focuses the next or previous menu item.
+     * @param {KeyboardEvent} event - The keyboard event object.
+     */
+    handleTabKey(event) {
+        var _a;
+        const isShiftPressed = event.shiftKey;
+        this.emitFocusToOtherMenuItems(isShiftPressed);
+        (_a = this.focusableElements[this.focusedIndex]) === null || _a === void 0 ? void 0 : _a.blur();
+        if (!['search'].includes(this.menuOption)) {
+            event.preventDefault();
+        }
+    }
+    /**
+     * Focuses the previous focusable element in the container.
+     */
+    focusPrevious() {
+        var _a;
+        if (this.focusableElements.length === 0)
+            return;
+        this.focusedIndex =
+            (this.focusedIndex - 1 + this.focusableElements.length) %
+                this.focusableElements.length;
+        (_a = this.focusableElements[this.focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Focuses the next focusable element in the container.
+     */
+    focusNext() {
+        var _a;
+        if (this.focusableElements.length === 0)
+            return;
+        this.focusedIndex = (this.focusedIndex + 1) % this.focusableElements.length;
+        (_a = this.focusableElements[this.focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Focuses the other parent menu items based on the provided flag.
+     * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.
+     */
+    emitFocusToOtherMenuItems(isPrevious = false) {
+        this.elementsContainer.dispatchEvent(new CustomEvent('focusToOtherMenuItem', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                mediatype: this.menuOption,
+                moveTo: isPrevious ? 'prev' : 'next',
+            },
+        }));
+    }
+}
+//# sourceMappingURL=keyboard-navigation.js.map

package/dist/src/lib/keyboard-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-navigation.js","sourceRoot":"","sources":["../../../src/lib/keyboard-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["export default class KeyboardNavigation {\n  elementsContainer: HTMLElement;\n  menuOption: string;\n  focusableElements: HTMLElement[];\n  focusedIndex: number;\n\n  /**\n   * Constructor for the KeyboardNavigation class.\n   * @param {HTMLElement} elementsContainer - The container element that holds the focusable elements.\n   * @param {string} menuOption - The type of menu option ('web' or 'usermenu').\n   */\n  constructor(elementsContainer: HTMLElement, menuOption: string) {\n    this.elementsContainer = elementsContainer;\n    this.menuOption = menuOption;\n    this.focusableElements = this.getFocusableElements();\n    this.focusedIndex = 0; // always start from first element\n\n    if (menuOption !== 'search') {\n      this.focusableElements[this.focusedIndex]?.focus();\n    }\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Gets an array of focusable elements within the container.\n   * @returns {HTMLElement[]} An array of focusable elements.\n   */\n  getFocusableElements(): HTMLElement[] {\n    const focusableTagSelectors = 'a[href], button, input, [tabindex]';\n\n    const isFocusable = (el: Element) =>\n      !el.hasAttribute('disabled') &&\n      el.getAttribute('aria-hidden') !== 'true' &&\n      el.getAttribute('tabindex') !== '-1';\n\n    let elements;\n    if (this.menuOption === 'web') {\n      // wayback focusable elements\n      const waybackSlider =\n        this.elementsContainer.querySelector('wayback-slider')?.shadowRoot;\n      const waybackSearch = waybackSlider?.querySelector('wayback-search');\n      const waybackSearchElements = Array.from(\n        waybackSearch?.shadowRoot?.querySelectorAll(focusableTagSelectors) ??\n          [],\n      );\n\n      const normalElements = Array.from(\n        waybackSlider?.querySelectorAll(focusableTagSelectors) ?? [],\n      );\n\n      // wayback save-form focusable elements\n      const savePageForm = waybackSlider?.querySelector('save-page-form');\n      const savePageFormElements = Array.from(\n        savePageForm?.shadowRoot?.querySelectorAll(focusableTagSelectors) ?? [],\n      );\n\n      elements = [\n        ...waybackSearchElements,\n        ...normalElements,\n        ...savePageFormElements,\n      ];\n    } else {\n      elements = this.elementsContainer.querySelectorAll(focusableTagSelectors);\n    }\n\n    return Array.from(elements ?? []).filter(isFocusable) as HTMLElement[];\n  }\n\n  /**\n   * Handles keyboard events and focuses the appropriate element.\n   * @param {KeyboardEvent} event - The keyboard event object.\n   */\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.composedPath()[0] as HTMLElement;\n\n    // Ignore events from editable fields\n    if (\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target.isContentEditable\n    ) {\n      return;\n    }\n\n    const { key } = event;\n    const isArrowKey = [\n      'ArrowDown',\n      'ArrowRight',\n      'ArrowUp',\n      'ArrowLeft',\n    ].includes(key);\n    const isTabKey = key === 'Tab';\n\n    if (isArrowKey) {\n      this.handleArrowKey(key);\n      event.preventDefault();\n    } else if (isTabKey) {\n      this.handleTabKey(event);\n    }\n  }\n\n  /**\n   * Handles arrow key events and focuses the next or previous element for topnav sub-nav and usermenu\n   * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').\n   */\n  handleArrowKey(key: string) {\n    const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);\n    if (isDownOrRight) {\n      this.focusNext();\n    } else {\n      this.focusPrevious();\n    }\n  }\n\n  /**\n   * Handles the Tab key event and focuses the next or previous menu item.\n   * @param {KeyboardEvent} event - The keyboard event object.\n   */\n  handleTabKey(event: KeyboardEvent) {\n    const isShiftPressed = event.shiftKey;\n\n    this.emitFocusToOtherMenuItems(isShiftPressed);\n\n    this.focusableElements[this.focusedIndex]?.blur();\n    if (!['search'].includes(this.menuOption)) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Focuses the previous focusable element in the container.\n   */\n  focusPrevious() {\n    if (this.focusableElements.length === 0) return;\n    this.focusedIndex =\n      (this.focusedIndex - 1 + this.focusableElements.length) %\n      this.focusableElements.length;\n    this.focusableElements[this.focusedIndex]?.focus();\n  }\n\n  /**\n   * Focuses the next focusable element in the container.\n   */\n  focusNext() {\n    if (this.focusableElements.length === 0) return;\n    this.focusedIndex = (this.focusedIndex + 1) % this.focusableElements.length;\n    this.focusableElements[this.focusedIndex]?.focus();\n  }\n\n  /**\n   * Focuses the other parent menu items based on the provided flag.\n   * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.\n   */\n  emitFocusToOtherMenuItems(isPrevious: boolean = false) {\n    this.elementsContainer.dispatchEvent(\n      new CustomEvent('focusToOtherMenuItem', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          mediatype: this.menuOption,\n          moveTo: isPrevious ? 'prev' : 'next',\n        },\n      }),\n    );\n  }\n}\n"]}

package/dist/src/lib/location-handler.d.ts

@@ -0,0 +1 @@
+export default function (url: string): void;

package/dist/src/lib/location-handler.js

@@ -0,0 +1,5 @@
+/* istanbul ignore file */
+export default function (url) {
+    window.location.href = url;
+}
+//# sourceMappingURL=location-handler.js.map

package/dist/src/lib/location-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"location-handler.js","sourceRoot":"","sources":["../../../src/lib/location-handler.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAE1B,MAAM,CAAC,OAAO,WAAW,GAAW;IAClC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;AAC7B,CAAC","sourcesContent":["/* istanbul ignore file */\n\nexport default function (url: string) {\n  window.location.href = url;\n}\n"]}

package/dist/src/lib/make-boolean-string.d.ts

@@ -0,0 +1,2 @@
+export declare function makeBooleanFromString(value: string): 'true' | 'false';
+export declare function makeBooleanString(value: boolean): 'true' | 'false';

package/dist/src/lib/make-boolean-string.js

@@ -0,0 +1,12 @@
+export function makeBooleanFromString(value) {
+    const lowerValue = value.toLowerCase();
+    let booleanValue = false;
+    if (lowerValue === 'true' || lowerValue === '1') {
+        booleanValue = true;
+    }
+    return makeBooleanString(booleanValue);
+}
+export function makeBooleanString(value) {
+    return value ? 'true' : 'false';
+}
+//# sourceMappingURL=make-boolean-string.js.map

package/dist/src/lib/make-boolean-string.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-boolean-string.js","sourceRoot":"","sources":["../../../src/lib/make-boolean-string.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,qBAAqB,CAAC,KAAa;IACjD,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IACvC,IAAI,YAAY,GAAY,KAAK,CAAC;IAClC,IAAI,UAAU,KAAK,MAAM,IAAI,UAAU,KAAK,GAAG,EAAE,CAAC;QAChD,YAAY,GAAG,IAAI,CAAC;IACtB,CAAC;IACD,OAAO,iBAAiB,CAAC,YAAY,CAAC,CAAC;AACzC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAc;IAC9C,OAAO,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;AAClC,CAAC","sourcesContent":["export function makeBooleanFromString(value: string): 'true' | 'false' {\n  const lowerValue = value.toLowerCase();\n  let booleanValue: boolean = false;\n  if (lowerValue === 'true' || lowerValue === '1') {\n    booleanValue = true;\n  }\n  return makeBooleanString(booleanValue);\n}\n\nexport function makeBooleanString(value: boolean): 'true' | 'false' {\n  return value ? 'true' : 'false';\n}\n"]}

package/dist/src/lib/query-handler.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    performQuery(query: string): void;
+};
+export default _default;

package/dist/src/lib/query-handler.js

@@ -0,0 +1,7 @@
+/* istanbul ignore file */
+export default {
+    performQuery(query) {
+        window.location.href = `https://web.archive.org/web/*/${query}`;
+    },
+};
+//# sourceMappingURL=query-handler.js.map

package/dist/src/lib/query-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-handler.js","sourceRoot":"","sources":["../../../src/lib/query-handler.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAE1B,eAAe;IACb,YAAY,CAAC,KAAa;QACxB,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,iCAAiC,KAAK,EAAE,CAAC;IAClE,CAAC;CACF,CAAC","sourcesContent":["/* istanbul ignore file */\n\nexport default {\n  performQuery(query: string) {\n    window.location.href = `https://web.archive.org/web/*/${query}`;\n  },\n};\n"]}