@internetarchive/ia-topnav 1.4.1-alpha-webdev8259.0 → 1.4.1-alpha-webdev8259.1

package/dist/src/models.js.map

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"","sourcesContent":["export interface IATopNavConfig {\r\n  /**\r\n   * Google Analytics event category\r\n   */\r\n  eventCategory?: string;\r\n\r\n  /**\r\n   * Copy to display for number of pages archived at the top of the Wayback search form\r\n   *\r\n   * ie. \"425 billion\"\r\n   */\r\n  waybackPagesArchived?: string;\r\n\r\n  /**\r\n   * Array of strings representing the values of options that should be hidden from search options\r\n   */\r\n  hiddenSearchOptions?: string[];\r\n\r\n  /**\r\n   * Map from dropdown item ids to any callout text that should be applied beside them\r\n   */\r\n  callouts?: Record<string, string>;\r\n}\r\n\r\nexport interface IATopNavLink {\r\n  title: string;\r\n\r\n  url?: string;\r\n\r\n  class?: string;\r\n\r\n  icon?: string;\r\n\r\n  analyticsEvent?: string;\r\n\r\n  external?: boolean;\r\n}\r\n\r\nexport interface IATopNavMediaMenu {\r\n  heading: string;\r\n  iconLinks: IATopNavLink[];\r\n  featuredLinks: IATopNavLink[];\r\n  links: IATopNavLink[];\r\n  mobileAppsLinks: IATopNavLink[];\r\n  browserExtensionsLinks: IATopNavLink[];\r\n  archiveItLinks: IATopNavLink[];\r\n}\r\n\r\nexport interface IATopNavMenuConfig {\r\n  audio: IATopNavMediaMenu;\r\n  images: IATopNavMediaMenu;\r\n  more: IATopNavMediaMenu;\r\n  signedOut: IATopNavLink[];\r\n  software: IATopNavMediaMenu;\r\n  texts: IATopNavMediaMenu;\r\n  user: IATopNavLink[];\r\n  userAdmin: IATopNavLink[];\r\n  userAdminFlags: IATopNavLink[];\r\n  video: IATopNavMediaMenu;\r\n  web: IATopNavMediaMenu;\r\n}\r\n\r\nexport type IATopNavSecondIdentitySlotMode = 'allow' | '';\r\n\r\nexport type IATopNavSearchSlotMode = 'custom' | '';\r\n"]}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"","sourcesContent":["export interface IATopNavConfig {\n  /**\n   * Google Analytics event category\n   */\n  eventCategory?: string;\n\n  /**\n   * Copy to display for number of pages archived at the top of the Wayback search form\n   *\n   * ie. \"425 billion\"\n   */\n  waybackPagesArchived?: string;\n\n  /**\n   * Array of strings representing the values of options that should be hidden from search options\n   */\n  hiddenSearchOptions?: string[];\n\n  /**\n   * Map from dropdown item ids to any callout text that should be applied beside them\n   */\n  callouts?: Record<string, string>;\n}\n\nexport interface IATopNavLink {\n  title: string;\n\n  url?: string;\n\n  class?: string;\n\n  icon?: string;\n\n  analyticsEvent?: string;\n\n  external?: boolean;\n}\n\nexport interface IATopNavMediaMenu {\n  heading: string;\n  iconLinks: IATopNavLink[];\n  featuredLinks: IATopNavLink[];\n  links: IATopNavLink[];\n  mobileAppsLinks: IATopNavLink[];\n  browserExtensionsLinks: IATopNavLink[];\n  archiveItLinks: IATopNavLink[];\n}\n\nexport interface IATopNavMenuConfig {\n  audio: IATopNavMediaMenu;\n  images: IATopNavMediaMenu;\n  more: IATopNavMediaMenu;\n  signedOut: IATopNavLink[];\n  software: IATopNavMediaMenu;\n  texts: IATopNavMediaMenu;\n  user: IATopNavLink[];\n  userAdmin: IATopNavLink[];\n  userAdminFlags: IATopNavLink[];\n  video: IATopNavMediaMenu;\n  web: IATopNavMediaMenu;\n}\n\nexport type IATopNavSecondIdentitySlotMode = 'allow' | '';\n"]}

package/dist/src/primary-nav.d.ts

@@ -2,9 +2,8 @@ import { nothing, PropertyValues } from 'lit';
 import TrackedElement from './tracked-element';
 import './assets/img/hamburger';
 import './login-button';
-import './nav-search';
 import './media-menu';
-import { IATopNavConfig, IATopNavSearchSlotMode, IATopNavSecondIdentitySlotMode } from './models';
+import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';
 export declare class PrimaryNav extends TrackedElement {
     mediaBaseHost: string;
     baseHost: string;
@@ -12,9 +11,6 @@ export declare class PrimaryNav extends TrackedElement {
     config: IATopNavConfig;
     openMenu: string;
     screenName: string;
-    searchIn: string;
-    searchQuery: string;
-    searchSlotMode: IATopNavSearchSlotMode;
     secondIdentitySlotMode: IATopNavSecondIdentitySlotMode;
     selectedMenuOption: string;
     signedOutMenuOpen: boolean;
@@ -35,10 +31,13 @@ export declare class PrimaryNav extends TrackedElement {
     get userIcon(): import("lit").TemplateResult<1>;
     get loginIcon(): import("lit").TemplateResult<1>;
     get searchMenuOpen(): boolean;
-    get useCustomSearch(): boolean;
     get allowSecondaryIcon(): boolean;
+    /**
+     * The search slot container, rendered between media-menu and
+     * right-side-section so it sits left of the Upload button on desktop.
+     */
+    get searchSlotContainer(): import("lit").TemplateResult<1> | typeof nothing;
     get searchMenu(): import("lit").TemplateResult<1> | typeof nothing;
-    private emitNavSearchBlurEvent;
     get mobileDonateHeart(): import("lit").TemplateResult<1>;
     get uploadButtonTemplate(): import("lit").TemplateResult<1>;
     get userStateTemplate(): import("lit").TemplateResult<1>;

package/dist/src/primary-nav.js

@@ -4,11 +4,9 @@ import TrackedElement from './tracked-element';
 import icons from './assets/img/icons';
 import './assets/img/hamburger';
 import './login-button';
-import './nav-search';
 import './media-menu';
 import logoWordmarkStacked from './assets/img/wordmark-stacked';
 import primaryNavCSS from './styles/primary-nav';
-import locationHandler from './lib/location-handler';
 import formatUrl from './lib/format-url';
 import { customElement, property } from 'lit/decorators.js';
 import { defaultTopNavConfig } from './data/menus';
@@ -21,9 +19,6 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
         this.config = defaultTopNavConfig;
         this.openMenu = '';
         this.screenName = '';
-        this.searchIn = '';
-        this.searchQuery = '';
-        this.searchSlotMode = '';
         this.secondIdentitySlotMode = '';
         this.selectedMenuOption = '';
         this.signedOutMenuOpen = false;
@@ -99,127 +94,96 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
         var _a;
         const userMenuClass = this.openMenu === 'user' ? 'active' : '';
         const userMenuToolTip = this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';
-        return html `
-      <button
-        class="user-menu ${userMenuClass}"
-        title="${userMenuToolTip}"
-        @click="${this.toggleUserMenu}"
-        data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavUserMenu"
-      >
-        <img
-          src="${this.mediaBaseHost}${this.userProfileImagePath}"
-          alt="Profile picture for ${this.screenName}"
-        />
-        <span class="screen-name" dir="auto">${this.screenName}</span>
-      </button>
+        return html `
+      <button
+        class="user-menu ${userMenuClass}"
+        title="${userMenuToolTip}"
+        @click="${this.toggleUserMenu}"
+        data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavUserMenu"
+      >
+        <img
+          src="${this.mediaBaseHost}${this.userProfileImagePath}"
+          alt="Profile picture for ${this.screenName}"
+        />
+        <span class="screen-name" dir="auto">${this.screenName}</span>
+      </button>
     `;
     }
     get loginIcon() {
-        return html `
-      <login-button
-        .baseHost=${this.baseHost}
-        .config=${this.config}
-        .dropdownOpen=${this.signedOutMenuOpen}
-        .openMenu=${this.openMenu}
-        @signedOutMenuToggled=${this.signedOutMenuToggled}
-      ></login-button>
+        return html `
+      <login-button
+        .baseHost=${this.baseHost}
+        .config=${this.config}
+        .dropdownOpen=${this.signedOutMenuOpen}
+        .openMenu=${this.openMenu}
+        @signedOutMenuToggled=${this.signedOutMenuToggled}
+      ></login-button>
     `;
     }
     get searchMenuOpen() {
         return this.openMenu === 'search';
     }
-    get useCustomSearch() {
-        return this.searchSlotMode === 'custom';
-    }
     get allowSecondaryIcon() {
         return this.secondIdentitySlotMode === 'allow';
     }
-    get searchMenu() {
-        var _a, _b;
+    /**
+     * The search slot container, rendered between media-menu and
+     * right-side-section so it sits left of the Upload button on desktop.
+     */
+    get searchSlotContainer() {
         if (this.hideSearch)
             return nothing;
-        if (this.useCustomSearch) {
-            return html `
-        <button
-          class="search-trigger"
-          @click="${this.toggleSearchMenu}"
-          data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavSearchOpen"
-        >
-          ${icons.search}
-        </button>
-        <div
-          class="custom-search-container ${this.searchMenuOpen ? 'open' : ''}"
-        >
-          <slot name="custom-search"></slot>
-        </div>
-      `;
-        }
-        return html `
-      <button
-        class="search-trigger"
-        @click="${this.toggleSearchMenu}"
-        data-event-click-tracking="${(_b = this.config) === null || _b === void 0 ? void 0 : _b.eventCategory}|NavSearchOpen"
-      >
-        ${icons.search}
-      </button>
-      <nav-search
-        .baseHost=${this.baseHost}
-        .config=${this.config}
-        .locationHandler=${locationHandler}
-        .open=${this.searchMenuOpen}
-        .openMenu=${this.openMenu}
-        .searchIn=${this.searchIn}
-        .searchQuery=${this.searchQuery}
-        @blur=${this.emitNavSearchBlurEvent}
-      ></nav-search>
+        return html `
+      <div class="custom-search-container ${this.searchMenuOpen ? 'open' : ''}">
+        <slot name="custom-search"></slot>
+      </div>
     `;
     }
-    emitNavSearchBlurEvent(e) {
+    get searchMenu() {
         var _a;
-        const relatedTarget = e.relatedTarget;
-        const isUploadButton = relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.classList.contains('upload');
-        if (isUploadButton) {
-            ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a.upload')).focus();
-        }
-        this.dispatchEvent(new CustomEvent('navSearchBlur', {
-            detail: {
-                isUploadButton: !!isUploadButton,
-            },
-            bubbles: true,
-            composed: true,
-        }));
+        if (this.hideSearch)
+            return nothing;
+        return html `
+      <button
+        class="search-trigger"
+        @click="${this.toggleSearchMenu}"
+        data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavSearchOpen"
+      >
+        ${icons.search}
+      </button>
+    `;
     }
     get mobileDonateHeart() {
-        return html `
-      <a
-        class="mobile-donate-link"
-        .href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}
-      >
-        ${icons.donateUnpadded}
-        <span class="sr-only">"Donate to the archive"</span>
-      </a>
+        return html `
+      <a
+        class="mobile-donate-link"
+        .href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}
+      >
+        ${icons.donateUnpadded}
+        <span class="sr-only">"Donate to the archive"</span>
+      </a>
     `;
     }
     get uploadButtonTemplate() {
-        return html ` <a
-      .href="${formatUrl('/upload', this.baseHost)}"
-      class="upload"
-      @focus=${this.toggleMediaMenu}
-    >
-      ${icons.upload}
-      <span>Upload</span>
+        return html ` <a
+      .href="${formatUrl('/upload', this.baseHost)}"
+      class="upload"
+      @focus=${this.toggleMediaMenu}
+    >
+      ${icons.upload}
+      <span>Upload</span>
     </a>`;
     }
     get userStateTemplate() {
-        return html `<div class="user-info">
-      ${this.username ? this.userIcon : this.loginIcon}
+        return html `<div class="user-info">
+      ${this.username ? this.userIcon : this.loginIcon}
     </div>`;
     }
     get secondLogoSlot() {
         return this.allowSecondaryIcon
-            ? html `
-          <slot name="opt-sec-logo"></slot>
-          <slot name="opt-sec-logo-mobile"></slot>
+            ? html `
+          <slot name="opt-sec-logo"></slot>
+          <slot name="opt-sec-logo-mobile"></slot>
         `
             : nothing;
     }
@@ -229,41 +193,42 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
     render() {
         var _a, _b;
         // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';
-        return html `
-      <nav class=${this.hideSearch ? 'hide-search' : ''}>
-        <button
-          class="hamburger"
-          @click="${this.toggleMediaMenu}"
-          data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavHamburger"
-          title="Open main menu"
-        >
-          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
-        </button>
-
-        <div class=${`branding ${this.secondLogoClass}`}>
-          <a
-            .href=${formatUrl('/', this.baseHost)}
-            @click=${this.trackClick}
-            data-event-click-tracking="${(_b = this.config) === null || _b === void 0 ? void 0 : _b.eventCategory}|NavHome"
-            title="Go home"
-            class="link-home"
-            >${icons.iaLogo}${logoWordmarkStacked}</a
-          >
-          ${this.secondLogoSlot}
-        </div>
-        <media-menu
-          .baseHost=${this.baseHost}
-          .config=${this.config}
-          ?mediaMenuAnimate=${this.mediaMenuAnimate}
-          .selectedMenuOption=${this.selectedMenuOption}
-          .openMenu=${this.openMenu}
-          .currentTab=${this.currentTab}
-        ></media-menu>
-        <div class="right-side-section">
-          ${this.mobileDonateHeart} ${this.userStateTemplate}
-          ${this.uploadButtonTemplate} ${this.searchMenu}
-        </div>
-      </nav>
+        return html `
+      <nav class=${this.hideSearch ? 'hide-search' : ''}>
+        <button
+          class="hamburger"
+          @click="${this.toggleMediaMenu}"
+          data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavHamburger"
+          title="Open main menu"
+        >
+          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
+        </button>
+
+        <div class=${`branding ${this.secondLogoClass}`}>
+          <a
+            .href=${formatUrl('/', this.baseHost)}
+            @click=${this.trackClick}
+            data-event-click-tracking="${(_b = this.config) === null || _b === void 0 ? void 0 : _b.eventCategory}|NavHome"
+            title="Go home"
+            class="link-home"
+            >${icons.iaLogo}${logoWordmarkStacked}</a
+          >
+          ${this.secondLogoSlot}
+        </div>
+        <media-menu
+          .baseHost=${this.baseHost}
+          .config=${this.config}
+          ?mediaMenuAnimate=${this.mediaMenuAnimate}
+          .selectedMenuOption=${this.selectedMenuOption}
+          .openMenu=${this.openMenu}
+          .currentTab=${this.currentTab}
+        ></media-menu>
+        ${this.searchSlotContainer}
+        <div class="right-side-section">
+          ${this.mobileDonateHeart} ${this.userStateTemplate}
+          ${this.uploadButtonTemplate} ${this.searchMenu}
+        </div>
+      </nav>
     `;
     }
 };
@@ -285,15 +250,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], PrimaryNav.prototype, "screenName", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "searchIn", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "searchQuery", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "searchSlotMode", void 0);
 __decorate([
     property({ type: String })
 ], PrimaryNav.prototype, "secondIdentitySlotMode", void 0);

package/dist/src/primary-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../src/primary-nav.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues } from 'lit';\r\nimport TrackedElement from './tracked-element';\r\nimport icons from './assets/img/icons';\r\nimport './assets/img/hamburger';\r\nimport './login-button';\r\nimport './nav-search';\r\nimport './media-menu';\r\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\r\nimport primaryNavCSS from './styles/primary-nav';\r\nimport locationHandler from './lib/location-handler';\r\nimport formatUrl from './lib/format-url';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport {\r\n  IATopNavConfig,\r\n  IATopNavSearchSlotMode,\r\n  IATopNavSecondIdentitySlotMode,\r\n} from './models';\r\nimport { defaultTopNavConfig } from './data/menus';\r\n\r\n@customElement('primary-nav')\r\nexport class PrimaryNav extends TrackedElement {\r\n  @property({ type: String }) mediaBaseHost = 'https://archive.org';\r\n  @property({ type: String }) baseHost = '';\r\n  @property({ type: Boolean }) hideSearch = false;\r\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\r\n  @property({ type: String }) openMenu = '';\r\n  @property({ type: String }) screenName = '';\r\n  @property({ type: String }) searchIn = '';\r\n  @property({ type: String }) searchQuery = '';\r\n  @property({ type: String })\r\n  searchSlotMode: IATopNavSearchSlotMode = '';\r\n  @property({ type: String })\r\n  secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\r\n  @property({ type: String }) selectedMenuOption = '';\r\n  @property({ type: Boolean }) signedOutMenuOpen = false;\r\n  @property({ type: Boolean }) userMenuOpen = false;\r\n  @property({ type: Boolean }) mediaMenuAnimate = false;\r\n  @property({ type: String }) username = '';\r\n  @property({ type: String }) userProfileImagePath = '';\r\n  @property({ type: Object }) currentTab:\r\n    | { mediatype: string; moveTo: string }\r\n    | undefined;\r\n  signedOutMenuToggled: unknown;\r\n\r\n  static get styles() {\r\n    return primaryNavCSS;\r\n  }\r\n\r\n  toggleMediaMenu(e: Event) {\r\n    this.trackClick(e);\r\n    this.dispatchEvent(\r\n      new CustomEvent('menuToggled', {\r\n        detail: {\r\n          menuName: 'media',\r\n        },\r\n      }),\r\n    );\r\n  }\r\n\r\n  toggleSearchMenu(e: Event) {\r\n    this.trackClick(e);\r\n    this.dispatchEvent(\r\n      new CustomEvent('menuToggled', {\r\n        detail: {\r\n          menuName: 'search',\r\n        },\r\n      }),\r\n    );\r\n  }\r\n\r\n  toggleUserMenu(e: Event) {\r\n    this.trackClick(e);\r\n    this.dispatchEvent(\r\n      new CustomEvent('menuToggled', {\r\n        detail: {\r\n          menuName: 'user',\r\n        },\r\n      }),\r\n    );\r\n  }\r\n\r\n  updated(props: PropertyValues) {\r\n    if (props.has('currentTab')) {\r\n      // early return\r\n      if (!this.currentTab || Object.keys(this.currentTab).length === 0)\r\n        return nothing;\r\n\r\n      const isUserMenuTab =\r\n        this.currentTab && this.currentTab.mediatype === 'usermenu';\r\n      if (isUserMenuTab) {\r\n        const mediaButtons = Array.from(\r\n          this.shadowRoot\r\n            ?.querySelector('media-menu')\r\n            ?.shadowRoot?.querySelectorAll('media-button') ?? [],\r\n        );\r\n        const lastMediaButton = mediaButtons.filter((element) => {\r\n          return element.shadowRoot\r\n            ?.querySelector('a')\r\n            ?.classList.contains('images');\r\n        });\r\n\r\n        let nextElement;\r\n        if (this.username) {\r\n          nextElement = this.shadowRoot?.querySelector('a.upload');\r\n        } else {\r\n          nextElement = this.shadowRoot\r\n            ?.querySelector('login-button')\r\n            ?.shadowRoot?.querySelector('span a');\r\n        }\r\n\r\n        const menuItemElement =\r\n          lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');\r\n\r\n        const focusElement =\r\n          this.currentTab.moveTo === 'next' ? nextElement : menuItemElement;\r\n\r\n        if (focusElement) {\r\n          (focusElement as HTMLElement).focus();\r\n        }\r\n      } else if (this.currentTab.moveTo === 'next') {\r\n        if (this.shadowRoot?.querySelector('.user-menu')) {\r\n          (this.shadowRoot?.querySelector('.user-menu') as HTMLElement).focus();\r\n        } else {\r\n          (\r\n            this.shadowRoot\r\n              ?.querySelector('login-button')\r\n              ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement\r\n          )?.focus();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  get userIcon() {\r\n    const userMenuClass = this.openMenu === 'user' ? 'active' : '';\r\n    const userMenuToolTip =\r\n      this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';\r\n\r\n    return html`\r\n      <button\r\n        class=\"user-menu ${userMenuClass}\"\r\n        title=\"${userMenuToolTip}\"\r\n        @click=\"${this.toggleUserMenu}\"\r\n        data-event-click-tracking=\"${this.config?.eventCategory}|NavUserMenu\"\r\n      >\r\n        <img\r\n          src=\"${this.mediaBaseHost}${this.userProfileImagePath}\"\r\n          alt=\"Profile picture for ${this.screenName}\"\r\n        />\r\n        <span class=\"screen-name\" dir=\"auto\">${this.screenName}</span>\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  get loginIcon() {\r\n    return html`\r\n      <login-button\r\n        .baseHost=${this.baseHost}\r\n        .config=${this.config}\r\n        .dropdownOpen=${this.signedOutMenuOpen}\r\n        .openMenu=${this.openMenu}\r\n        @signedOutMenuToggled=${this.signedOutMenuToggled}\r\n      ></login-button>\r\n    `;\r\n  }\r\n\r\n  get searchMenuOpen() {\r\n    return this.openMenu === 'search';\r\n  }\r\n\r\n  get useCustomSearch() {\r\n    return this.searchSlotMode === 'custom';\r\n  }\r\n\r\n  get allowSecondaryIcon() {\r\n    return this.secondIdentitySlotMode === 'allow';\r\n  }\r\n\r\n  get searchMenu() {\r\n    if (this.hideSearch) return nothing;\r\n\r\n    if (this.useCustomSearch) {\r\n      return html`\r\n        <button\r\n          class=\"search-trigger\"\r\n          @click=\"${this.toggleSearchMenu}\"\r\n          data-event-click-tracking=\"${this.config\r\n            ?.eventCategory}|NavSearchOpen\"\r\n        >\r\n          ${icons.search}\r\n        </button>\r\n        <div\r\n          class=\"custom-search-container ${this.searchMenuOpen ? 'open' : ''}\"\r\n        >\r\n          <slot name=\"custom-search\"></slot>\r\n        </div>\r\n      `;\r\n    }\r\n\r\n    return html`\r\n      <button\r\n        class=\"search-trigger\"\r\n        @click=\"${this.toggleSearchMenu}\"\r\n        data-event-click-tracking=\"${this.config?.eventCategory}|NavSearchOpen\"\r\n      >\r\n        ${icons.search}\r\n      </button>\r\n      <nav-search\r\n        .baseHost=${this.baseHost}\r\n        .config=${this.config}\r\n        .locationHandler=${locationHandler}\r\n        .open=${this.searchMenuOpen}\r\n        .openMenu=${this.openMenu}\r\n        .searchIn=${this.searchIn}\r\n        .searchQuery=${this.searchQuery}\r\n        @blur=${this.emitNavSearchBlurEvent}\r\n      ></nav-search>\r\n    `;\r\n  }\r\n\r\n  private emitNavSearchBlurEvent(e: FocusEvent) {\r\n    const relatedTarget = e.relatedTarget as HTMLElement;\r\n    const isUploadButton = relatedTarget?.classList.contains('upload');\r\n\r\n    if (isUploadButton) {\r\n      (this.shadowRoot?.querySelector('a.upload') as HTMLElement).focus();\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('navSearchBlur', {\r\n        detail: {\r\n          isUploadButton: !!isUploadButton,\r\n        },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  get mobileDonateHeart() {\r\n    return html`\r\n      <a\r\n        class=\"mobile-donate-link\"\r\n        .href=${formatUrl(\r\n          '/donate/?origin=iawww-mbhrt' as string & Location,\r\n          this.baseHost,\r\n        )}\r\n      >\r\n        ${icons.donateUnpadded}\r\n        <span class=\"sr-only\">\"Donate to the archive\"</span>\r\n      </a>\r\n    `;\r\n  }\r\n\r\n  get uploadButtonTemplate() {\r\n    return html` <a\r\n      .href=\"${formatUrl('/upload' as string & Location, this.baseHost)}\"\r\n      class=\"upload\"\r\n      @focus=${this.toggleMediaMenu}\r\n    >\r\n      ${icons.upload}\r\n      <span>Upload</span>\r\n    </a>`;\r\n  }\r\n\r\n  get userStateTemplate() {\r\n    return html`<div class=\"user-info\">\r\n      ${this.username ? this.userIcon : this.loginIcon}\r\n    </div>`;\r\n  }\r\n\r\n  get secondLogoSlot() {\r\n    return this.allowSecondaryIcon\r\n      ? html`\r\n          <slot name=\"opt-sec-logo\"></slot>\r\n          <slot name=\"opt-sec-logo-mobile\"></slot>\r\n        `\r\n      : nothing;\r\n  }\r\n\r\n  get secondLogoClass() {\r\n    return this.allowSecondaryIcon ? 'second-logo' : '';\r\n  }\r\n\r\n  render() {\r\n    // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';\r\n    return html`\r\n      <nav class=${this.hideSearch ? 'hide-search' : ''}>\r\n        <button\r\n          class=\"hamburger\"\r\n          @click=\"${this.toggleMediaMenu}\"\r\n          data-event-click-tracking=\"${this.config?.eventCategory}|NavHamburger\"\r\n          title=\"Open main menu\"\r\n        >\r\n          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>\r\n        </button>\r\n\r\n        <div class=${`branding ${this.secondLogoClass}`}>\r\n          <a\r\n            .href=${formatUrl('/' as string & Location, this.baseHost)}\r\n            @click=${this.trackClick}\r\n            data-event-click-tracking=\"${this.config?.eventCategory}|NavHome\"\r\n            title=\"Go home\"\r\n            class=\"link-home\"\r\n            >${icons.iaLogo}${logoWordmarkStacked}</a\r\n          >\r\n          ${this.secondLogoSlot}\r\n        </div>\r\n        <media-menu\r\n          .baseHost=${this.baseHost}\r\n          .config=${this.config}\r\n          ?mediaMenuAnimate=${this.mediaMenuAnimate}\r\n          .selectedMenuOption=${this.selectedMenuOption}\r\n          .openMenu=${this.openMenu}\r\n          .currentTab=${this.currentTab}\r\n        ></media-menu>\r\n        <div class=\"right-side-section\">\r\n          ${this.mobileDonateHeart} ${this.userStateTemplate}\r\n          ${this.uploadButtonTemplate} ${this.searchMenu}\r\n        </div>\r\n      </nav>\r\n    `;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../src/primary-nav.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport './assets/img/hamburger';\nimport './login-button';\nimport './media-menu';\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\nimport primaryNavCSS from './styles/primary-nav';\nimport formatUrl from './lib/format-url';\nimport { customElement, property } from 'lit/decorators.js';\nimport { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('primary-nav')\nexport class PrimaryNav extends TrackedElement {\n  @property({ type: String }) mediaBaseHost = 'https://archive.org';\n  @property({ type: String }) baseHost = '';\n  @property({ type: Boolean }) hideSearch = false;\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) openMenu = '';\n  @property({ type: String }) screenName = '';\n  @property({ type: String })\n  secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\n  @property({ type: String }) selectedMenuOption = '';\n  @property({ type: Boolean }) signedOutMenuOpen = false;\n  @property({ type: Boolean }) userMenuOpen = false;\n  @property({ type: Boolean }) mediaMenuAnimate = false;\n  @property({ type: String }) username = '';\n  @property({ type: String }) userProfileImagePath = '';\n  @property({ type: Object }) currentTab:\n    | { mediatype: string; moveTo: string }\n    | undefined;\n  signedOutMenuToggled: unknown;\n\n  static get styles() {\n    return primaryNavCSS;\n  }\n\n  toggleMediaMenu(e: Event) {\n    this.trackClick(e);\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        detail: {\n          menuName: 'media',\n        },\n      }),\n    );\n  }\n\n  toggleSearchMenu(e: Event) {\n    this.trackClick(e);\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        detail: {\n          menuName: 'search',\n        },\n      }),\n    );\n  }\n\n  toggleUserMenu(e: Event) {\n    this.trackClick(e);\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        detail: {\n          menuName: 'user',\n        },\n      }),\n    );\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('currentTab')) {\n      // early return\n      if (!this.currentTab || Object.keys(this.currentTab).length === 0)\n        return nothing;\n\n      const isUserMenuTab =\n        this.currentTab && this.currentTab.mediatype === 'usermenu';\n      if (isUserMenuTab) {\n        const mediaButtons = Array.from(\n          this.shadowRoot\n            ?.querySelector('media-menu')\n            ?.shadowRoot?.querySelectorAll('media-button') ?? [],\n        );\n        const lastMediaButton = mediaButtons.filter((element) => {\n          return element.shadowRoot\n            ?.querySelector('a')\n            ?.classList.contains('images');\n        });\n\n        let nextElement;\n        if (this.username) {\n          nextElement = this.shadowRoot?.querySelector('a.upload');\n        } else {\n          nextElement = this.shadowRoot\n            ?.querySelector('login-button')\n            ?.shadowRoot?.querySelector('span a');\n        }\n\n        const menuItemElement =\n          lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');\n\n        const focusElement =\n          this.currentTab.moveTo === 'next' ? nextElement : menuItemElement;\n\n        if (focusElement) {\n          (focusElement as HTMLElement).focus();\n        }\n      } else if (this.currentTab.moveTo === 'next') {\n        if (this.shadowRoot?.querySelector('.user-menu')) {\n          (this.shadowRoot?.querySelector('.user-menu') as HTMLElement).focus();\n        } else {\n          (\n            this.shadowRoot\n              ?.querySelector('login-button')\n              ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement\n          )?.focus();\n        }\n      }\n    }\n  }\n\n  get userIcon() {\n    const userMenuClass = this.openMenu === 'user' ? 'active' : '';\n    const userMenuToolTip =\n      this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';\n\n    return html`\n      <button\n        class=\"user-menu ${userMenuClass}\"\n        title=\"${userMenuToolTip}\"\n        @click=\"${this.toggleUserMenu}\"\n        data-event-click-tracking=\"${this.config?.eventCategory}|NavUserMenu\"\n      >\n        <img\n          src=\"${this.mediaBaseHost}${this.userProfileImagePath}\"\n          alt=\"Profile picture for ${this.screenName}\"\n        />\n        <span class=\"screen-name\" dir=\"auto\">${this.screenName}</span>\n      </button>\n    `;\n  }\n\n  get loginIcon() {\n    return html`\n      <login-button\n        .baseHost=${this.baseHost}\n        .config=${this.config}\n        .dropdownOpen=${this.signedOutMenuOpen}\n        .openMenu=${this.openMenu}\n        @signedOutMenuToggled=${this.signedOutMenuToggled}\n      ></login-button>\n    `;\n  }\n\n  get searchMenuOpen() {\n    return this.openMenu === 'search';\n  }\n\n  get allowSecondaryIcon() {\n    return this.secondIdentitySlotMode === 'allow';\n  }\n\n  /**\n   * The search slot container, rendered between media-menu and\n   * right-side-section so it sits left of the Upload button on desktop.\n   */\n  get searchSlotContainer() {\n    if (this.hideSearch) return nothing;\n    return html`\n      <div class=\"custom-search-container ${this.searchMenuOpen ? 'open' : ''}\">\n        <slot name=\"custom-search\"></slot>\n      </div>\n    `;\n  }\n\n  get searchMenu() {\n    if (this.hideSearch) return nothing;\n\n    return html`\n      <button\n        class=\"search-trigger\"\n        @click=\"${this.toggleSearchMenu}\"\n        data-event-click-tracking=\"${this.config?.eventCategory}|NavSearchOpen\"\n      >\n        ${icons.search}\n      </button>\n    `;\n  }\n\n  get mobileDonateHeart() {\n    return html`\n      <a\n        class=\"mobile-donate-link\"\n        .href=${formatUrl(\n          '/donate/?origin=iawww-mbhrt' as string & Location,\n          this.baseHost,\n        )}\n      >\n        ${icons.donateUnpadded}\n        <span class=\"sr-only\">\"Donate to the archive\"</span>\n      </a>\n    `;\n  }\n\n  get uploadButtonTemplate() {\n    return html` <a\n      .href=\"${formatUrl('/upload' as string & Location, this.baseHost)}\"\n      class=\"upload\"\n      @focus=${this.toggleMediaMenu}\n    >\n      ${icons.upload}\n      <span>Upload</span>\n    </a>`;\n  }\n\n  get userStateTemplate() {\n    return html`<div class=\"user-info\">\n      ${this.username ? this.userIcon : this.loginIcon}\n    </div>`;\n  }\n\n  get secondLogoSlot() {\n    return this.allowSecondaryIcon\n      ? html`\n          <slot name=\"opt-sec-logo\"></slot>\n          <slot name=\"opt-sec-logo-mobile\"></slot>\n        `\n      : nothing;\n  }\n\n  get secondLogoClass() {\n    return this.allowSecondaryIcon ? 'second-logo' : '';\n  }\n\n  render() {\n    // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';\n    return html`\n      <nav class=${this.hideSearch ? 'hide-search' : ''}>\n        <button\n          class=\"hamburger\"\n          @click=\"${this.toggleMediaMenu}\"\n          data-event-click-tracking=\"${this.config?.eventCategory}|NavHamburger\"\n          title=\"Open main menu\"\n        >\n          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>\n        </button>\n\n        <div class=${`branding ${this.secondLogoClass}`}>\n          <a\n            .href=${formatUrl('/' as string & Location, this.baseHost)}\n            @click=${this.trackClick}\n            data-event-click-tracking=\"${this.config?.eventCategory}|NavHome\"\n            title=\"Go home\"\n            class=\"link-home\"\n            >${icons.iaLogo}${logoWordmarkStacked}</a\n          >\n          ${this.secondLogoSlot}\n        </div>\n        <media-menu\n          .baseHost=${this.baseHost}\n          .config=${this.config}\n          ?mediaMenuAnimate=${this.mediaMenuAnimate}\n          .selectedMenuOption=${this.selectedMenuOption}\n          .openMenu=${this.openMenu}\n          .currentTab=${this.currentTab}\n        ></media-menu>\n        ${this.searchSlotContainer}\n        <div class=\"right-side-section\">\n          ${this.mobileDonateHeart} ${this.userStateTemplate}\n          ${this.uploadButtonTemplate} ${this.searchMenu}\n        </div>\n      </nav>\n    `;\n  }\n}\n"]}

package/dist/src/styles/login-button.js

@@ -1,90 +1,90 @@
 import { css } from 'lit';
-export default css `
-  .logged-out-menu {
-    background: inherit;
-    border: none;
-  }
-  .logged-out-menu:focus-visible {
-    outline: none;
-    border: none;
-  }
-  .dropdown-toggle {
-    display: block;
-    text-transform: uppercase;
-    color: var(--grey80);
-    cursor: pointer;
-  }
-
-  .dropdown-toggle svg {
-    height: 100%;
-    width: 4rem;
-  }
-
-  .dropdown-toggle .fill-color {
-    fill: var(--iconFill);
-  }
-
-  .dropdown-toggle:active .fill-color,
-  .dropdown-toggle:focus .fill-color,
-  .dropdown-toggle:hover .fill-color {
-    fill: var(--linkHoverColor);
-  }
-
-  .active {
-    border-radius: 1rem 1rem 0 0;
-    background: var(--activeButtonBg);
-  }
-
-  .active .fill-color {
-    fill: var(--activeColor);
-  }
-
-  span {
-    display: none;
-    font-size: 1.4rem;
-    text-transform: uppercase;
-    color: var(--loginTextColor);
-  }
-
-  span a {
-    color: inherit;
-    text-decoration: none;
-    outline: 0;
-  }
-
-  a:hover,
-  a:active,
-  a:focus {
-    color: var(--linkHoverColor) !important;
-    outline: none !important;
-    outline-offset: inherit !important;
-  }
-
-  @media (min-width: 890px) {
-    .logged-out-toolbar {
-      padding: 1rem 0.5rem;
-      vertical-align: middle;
-    }
-
-    .active {
-      background: transparent;
-    }
-
-    .dropdown-toggle {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .dropdown-toggle svg {
-      height: 3rem;
-      width: 3rem;
-      display: block;
-    }
-
-    span {
-      display: inline;
-      vertical-align: middle;
-    }
-  }
+export default css `
+  .logged-out-menu {
+    background: inherit;
+    border: none;
+  }
+  .logged-out-menu:focus-visible {
+    outline: none;
+    border: none;
+  }
+  .dropdown-toggle {
+    display: block;
+    text-transform: uppercase;
+    color: var(--grey80);
+    cursor: pointer;
+  }
+
+  .dropdown-toggle svg {
+    height: 100%;
+    width: 4rem;
+  }
+
+  .dropdown-toggle .fill-color {
+    fill: var(--iconFill);
+  }
+
+  .dropdown-toggle:active .fill-color,
+  .dropdown-toggle:focus .fill-color,
+  .dropdown-toggle:hover .fill-color {
+    fill: var(--linkHoverColor);
+  }
+
+  .active {
+    border-radius: 1rem 1rem 0 0;
+    background: var(--activeButtonBg);
+  }
+
+  .active .fill-color {
+    fill: var(--activeColor);
+  }
+
+  span {
+    display: none;
+    font-size: 1.4rem;
+    text-transform: uppercase;
+    color: var(--loginTextColor);
+  }
+
+  span a {
+    color: inherit;
+    text-decoration: none;
+    outline: 0;
+  }
+
+  a:hover,
+  a:active,
+  a:focus {
+    color: var(--linkHoverColor) !important;
+    outline: none !important;
+    outline-offset: inherit !important;
+  }
+
+  @media (min-width: 890px) {
+    .logged-out-toolbar {
+      padding: 1rem 0.5rem;
+      vertical-align: middle;
+    }
+
+    .active {
+      background: transparent;
+    }
+
+    .dropdown-toggle {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .dropdown-toggle svg {
+      height: 3rem;
+      width: 3rem;
+      display: block;
+    }
+
+    span {
+      display: inline;
+      vertical-align: middle;
+    }
+  }
 `;
 //# sourceMappingURL=login-button.js.map

package/dist/src/styles/login-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../../src/styles/login-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFjB,CAAC","sourcesContent":["import { css } from 'lit';\r\n\r\nexport default css`\r\n  .logged-out-menu {\r\n    background: inherit;\r\n    border: none;\r\n  }\r\n  .logged-out-menu:focus-visible {\r\n    outline: none;\r\n    border: none;\r\n  }\r\n  .dropdown-toggle {\r\n    display: block;\r\n    text-transform: uppercase;\r\n    color: var(--grey80);\r\n    cursor: pointer;\r\n  }\r\n\r\n  .dropdown-toggle svg {\r\n    height: 100%;\r\n    width: 4rem;\r\n  }\r\n\r\n  .dropdown-toggle .fill-color {\r\n    fill: var(--iconFill);\r\n  }\r\n\r\n  .dropdown-toggle:active .fill-color,\r\n  .dropdown-toggle:focus .fill-color,\r\n  .dropdown-toggle:hover .fill-color {\r\n    fill: var(--linkHoverColor);\r\n  }\r\n\r\n  .active {\r\n    border-radius: 1rem 1rem 0 0;\r\n    background: var(--activeButtonBg);\r\n  }\r\n\r\n  .active .fill-color {\r\n    fill: var(--activeColor);\r\n  }\r\n\r\n  span {\r\n    display: none;\r\n    font-size: 1.4rem;\r\n    text-transform: uppercase;\r\n    color: var(--loginTextColor);\r\n  }\r\n\r\n  span a {\r\n    color: inherit;\r\n    text-decoration: none;\r\n    outline: 0;\r\n  }\r\n\r\n  a:hover,\r\n  a:active,\r\n  a:focus {\r\n    color: var(--linkHoverColor) !important;\r\n    outline: none !important;\r\n    outline-offset: inherit !important;\r\n  }\r\n\r\n  @media (min-width: 890px) {\r\n    .logged-out-toolbar {\r\n      padding: 1rem 0.5rem;\r\n      vertical-align: middle;\r\n    }\r\n\r\n    .active {\r\n      background: transparent;\r\n    }\r\n\r\n    .dropdown-toggle {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n    }\r\n\r\n    .dropdown-toggle svg {\r\n      height: 3rem;\r\n      width: 3rem;\r\n      display: block;\r\n    }\r\n\r\n    span {\r\n      display: inline;\r\n      vertical-align: middle;\r\n    }\r\n  }\r\n`;\r\n"]}
+{"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../../src/styles/login-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  .logged-out-menu {\n    background: inherit;\n    border: none;\n  }\n  .logged-out-menu:focus-visible {\n    outline: none;\n    border: none;\n  }\n  .dropdown-toggle {\n    display: block;\n    text-transform: uppercase;\n    color: var(--grey80);\n    cursor: pointer;\n  }\n\n  .dropdown-toggle svg {\n    height: 100%;\n    width: 4rem;\n  }\n\n  .dropdown-toggle .fill-color {\n    fill: var(--iconFill);\n  }\n\n  .dropdown-toggle:active .fill-color,\n  .dropdown-toggle:focus .fill-color,\n  .dropdown-toggle:hover .fill-color {\n    fill: var(--linkHoverColor);\n  }\n\n  .active {\n    border-radius: 1rem 1rem 0 0;\n    background: var(--activeButtonBg);\n  }\n\n  .active .fill-color {\n    fill: var(--activeColor);\n  }\n\n  span {\n    display: none;\n    font-size: 1.4rem;\n    text-transform: uppercase;\n    color: var(--loginTextColor);\n  }\n\n  span a {\n    color: inherit;\n    text-decoration: none;\n    outline: 0;\n  }\n\n  a:hover,\n  a:active,\n  a:focus {\n    color: var(--linkHoverColor) !important;\n    outline: none !important;\n    outline-offset: inherit !important;\n  }\n\n  @media (min-width: 890px) {\n    .logged-out-toolbar {\n      padding: 1rem 0.5rem;\n      vertical-align: middle;\n    }\n\n    .active {\n      background: transparent;\n    }\n\n    .dropdown-toggle {\n      display: inline-block;\n      vertical-align: middle;\n    }\n\n    .dropdown-toggle svg {\n      height: 3rem;\n      width: 3rem;\n      display: block;\n    }\n\n    span {\n      display: inline;\n      vertical-align: middle;\n    }\n  }\n`;\n"]}