@internetarchive/ia-topnav 1.4.1 → 2.0.0

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,8 +19,6 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
         this.config = defaultTopNavConfig;
         this.openMenu = '';
         this.screenName = '';
-        this.searchIn = '';
-        this.searchQuery = '';
         this.secondIdentitySlotMode = '';
         this.selectedMenuOption = '';
         this.signedOutMenuOpen = false;
@@ -98,30 +94,30 @@ 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() {
@@ -130,76 +126,64 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
     get allowSecondaryIcon() {
         return this.secondIdentitySlotMode === 'allow';
     }
-    get searchMenu() {
-        var _a;
+    /**
+     * 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;
-        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>
-      <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="search-container ${this.searchMenuOpen ? 'open' : ''}">
+        <slot name="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;
     }
@@ -209,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>
     `;
     }
 };
@@ -265,12 +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, "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';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport './assets/img/hamburger';\nimport './login-button';\nimport './nav-search';\nimport './media-menu';\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\nimport primaryNavCSS from './styles/primary-nav';\nimport locationHandler from './lib/location-handler';\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 }) searchIn = '';\n  @property({ type: String }) searchQuery = '';\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  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      <nav-search\n        .baseHost=${this.baseHost}\n        .config=${this.config}\n        .locationHandler=${locationHandler}\n        .open=${this.searchMenuOpen}\n        .openMenu=${this.openMenu}\n        .searchIn=${this.searchIn}\n        .searchQuery=${this.searchQuery}\n        @blur=${this.emitNavSearchBlurEvent}\n      ></nav-search>\n    `;\n  }\n\n  private emitNavSearchBlurEvent(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as HTMLElement;\n    const isUploadButton = relatedTarget?.classList.contains('upload');\n\n    if (isUploadButton) {\n      (this.shadowRoot?.querySelector('a.upload') as HTMLElement).focus();\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('navSearchBlur', {\n        detail: {\n          isUploadButton: !!isUploadButton,\n        },\n        bubbles: true,\n        composed: true,\n      }),\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        <div class=\"right-side-section\">\n          ${this.mobileDonateHeart} ${this.userStateTemplate}\n          ${this.uploadButtonTemplate} ${this.searchMenu}\n        </div>\n      </nav>\n    `;\n  }\n}\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';\r\nimport TrackedElement from './tracked-element';\r\nimport icons from './assets/img/icons';\r\nimport './assets/img/hamburger';\r\nimport './login-button';\r\nimport './media-menu';\r\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\r\nimport primaryNavCSS from './styles/primary-nav';\r\nimport formatUrl from './lib/format-url';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { IATopNavConfig, IATopNavSecondIdentitySlotMode } 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 })\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 allowSecondaryIcon() {\r\n    return this.secondIdentitySlotMode === 'allow';\r\n  }\r\n\r\n  /**\r\n   * The search slot container, rendered between media-menu and\r\n   * right-side-section so it sits left of the Upload button on desktop.\r\n   */\r\n  get searchSlotContainer() {\r\n    if (this.hideSearch) return nothing;\r\n    return html`\r\n      <div class=\"search-container ${this.searchMenuOpen ? 'open' : ''}\">\r\n        <slot name=\"search\"></slot>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  get searchMenu() {\r\n    if (this.hideSearch) return nothing;\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    `;\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        ${this.searchSlotContainer}\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"]}

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

@@ -1,90 +1,85 @@
 import { css } from 'lit';
-export default css `
-  :host {
-    --white: #fff;
-    --grey13: #222;
-    --grey20: #333;
-    --grey40: #666;
-    --grey28: #474747;
-    --grey60: #999;
-    --grey66: #aaa;
-    --grey80: #ccc;
-    --greya0: #a0a0a0;
-    --grey6f: #6f6f6f;
-    --errorYellow: #ffcd27;
-
-    --linkColor: #4b64ff;
-    --linkHoverColor: var(--white);
-    --subnavLinkColor: var(--grey66);
-    --primaryTextColor: var(--white);
-    --inverseTextColor: var(--grey20);
-    --lightTextColor: var(--grey60);
-    --activeColor: var(--white);
-    --activeButtonBg: var(--grey20);
-    --iconFill: var(--grey60);
-
-    --searchActiveBg: var(--grey20);
-    --searchActiveInputBg: var(--white);
-    --searchMenuBg: var(--grey20);
-    --desktopSearchIconFill: var(--grey20);
-
-    --mediaMenuBg: var(--grey13);
-    --mediaLabelDesktopColor: var(--grey60);
-    --activeDesktopMenuIcon: var(--grey28);
-
-    --mediaSliderBg: var(--grey20);
-    --mediaSliderDesktopBg: var(--grey28);
-
-    --primaryNavBg: var(--grey13);
-    --primaryNavBottomBorder: var(--grey20);
-
-    --desktopSubnavBg: var(--grey20);
-
-    --dropdownMenuBg: var(--grey20);
-    --dropdownMenuInfoItem: var(--greya0);
-    --dropdownMenuDivider: var(--grey40);
-    --inverseDropdownMenuInfoItem: var(--grey6f);
-
-    --loginTextColor: var(--grey60);
-
-    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    --logoWidthTablet: 263px;
-
-    --savePageSubmitBg: var(--grey13);
-    --savePageSubmitText: var(--white);
-    --savePageInputBorder: var(--grey60);
-    --savePageErrorText: var(--errorYellow);
-
-    color: var(--primaryTextColor);
-    font-family: var(--themeFontFamily);
-  }
-
-  primary-nav:focus {
-    outline: none !important;
-  }
-
-  #close-layer {
-    display: none;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 3;
-  }
-  #close-layer.visible {
-    display: block;
-  }
-
-  .topnav {
-    position: relative;
-    z-index: 4;
-  }
-
-  @media (max-width: 889px) {
-    desktop-subnav {
-      display: none;
-    }
-  }
+export default css `
+  :host {
+    --white: #fff;
+    --grey13: #222;
+    --grey20: #333;
+    --grey40: #666;
+    --grey28: #474747;
+    --grey60: #999;
+    --grey66: #aaa;
+    --grey80: #ccc;
+    --greya0: #a0a0a0;
+    --grey6f: #6f6f6f;
+    --errorYellow: #ffcd27;
+
+    --linkColor: #4b64ff;
+    --linkHoverColor: var(--white);
+    --subnavLinkColor: var(--grey66);
+    --primaryTextColor: var(--white);
+    --inverseTextColor: var(--grey20);
+    --lightTextColor: var(--grey60);
+    --activeColor: var(--white);
+    --activeButtonBg: var(--grey20);
+    --iconFill: var(--grey60);
+
+    --mediaMenuBg: var(--grey13);
+    --mediaLabelDesktopColor: var(--grey60);
+    --activeDesktopMenuIcon: var(--grey28);
+
+    --mediaSliderBg: var(--grey20);
+    --mediaSliderDesktopBg: var(--grey28);
+
+    --primaryNavBg: var(--grey13);
+    --primaryNavBottomBorder: var(--grey20);
+
+    --desktopSubnavBg: var(--grey20);
+
+    --dropdownMenuBg: var(--grey20);
+    --dropdownMenuInfoItem: var(--greya0);
+    --dropdownMenuDivider: var(--grey40);
+    --inverseDropdownMenuInfoItem: var(--grey6f);
+
+    --loginTextColor: var(--grey60);
+
+    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --logoWidthTablet: 263px;
+
+    --savePageSubmitBg: var(--grey13);
+    --savePageSubmitText: var(--white);
+    --savePageInputBorder: var(--grey60);
+    --savePageErrorText: var(--errorYellow);
+
+    color: var(--primaryTextColor);
+    font-family: var(--themeFontFamily);
+  }
+
+  primary-nav:focus {
+    outline: none !important;
+  }
+
+  #close-layer {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+  }
+  #close-layer.visible {
+    display: block;
+  }
+
+  .topnav {
+    position: relative;
+    z-index: 4;
+  }
+
+  @media (max-width: 889px) {
+    desktop-subnav {
+      display: none;
+    }
+  }
 `;
 //# sourceMappingURL=ia-topnav.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../../src/styles/ia-topnav.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  :host {\n    --white: #fff;\n    --grey13: #222;\n    --grey20: #333;\n    --grey40: #666;\n    --grey28: #474747;\n    --grey60: #999;\n    --grey66: #aaa;\n    --grey80: #ccc;\n    --greya0: #a0a0a0;\n    --grey6f: #6f6f6f;\n    --errorYellow: #ffcd27;\n\n    --linkColor: #4b64ff;\n    --linkHoverColor: var(--white);\n    --subnavLinkColor: var(--grey66);\n    --primaryTextColor: var(--white);\n    --inverseTextColor: var(--grey20);\n    --lightTextColor: var(--grey60);\n    --activeColor: var(--white);\n    --activeButtonBg: var(--grey20);\n    --iconFill: var(--grey60);\n\n    --searchActiveBg: var(--grey20);\n    --searchActiveInputBg: var(--white);\n    --searchMenuBg: var(--grey20);\n    --desktopSearchIconFill: var(--grey20);\n\n    --mediaMenuBg: var(--grey13);\n    --mediaLabelDesktopColor: var(--grey60);\n    --activeDesktopMenuIcon: var(--grey28);\n\n    --mediaSliderBg: var(--grey20);\n    --mediaSliderDesktopBg: var(--grey28);\n\n    --primaryNavBg: var(--grey13);\n    --primaryNavBottomBorder: var(--grey20);\n\n    --desktopSubnavBg: var(--grey20);\n\n    --dropdownMenuBg: var(--grey20);\n    --dropdownMenuInfoItem: var(--greya0);\n    --dropdownMenuDivider: var(--grey40);\n    --inverseDropdownMenuInfoItem: var(--grey6f);\n\n    --loginTextColor: var(--grey60);\n\n    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --logoWidthTablet: 263px;\n\n    --savePageSubmitBg: var(--grey13);\n    --savePageSubmitText: var(--white);\n    --savePageInputBorder: var(--grey60);\n    --savePageErrorText: var(--errorYellow);\n\n    color: var(--primaryTextColor);\n    font-family: var(--themeFontFamily);\n  }\n\n  primary-nav:focus {\n    outline: none !important;\n  }\n\n  #close-layer {\n    display: none;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 3;\n  }\n  #close-layer.visible {\n    display: block;\n  }\n\n  .topnav {\n    position: relative;\n    z-index: 4;\n  }\n\n  @media (max-width: 889px) {\n    desktop-subnav {\n      display: none;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../../src/styles/ia-topnav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFjB,CAAC","sourcesContent":["import { css } from 'lit';\r\n\r\nexport default css`\r\n  :host {\r\n    --white: #fff;\r\n    --grey13: #222;\r\n    --grey20: #333;\r\n    --grey40: #666;\r\n    --grey28: #474747;\r\n    --grey60: #999;\r\n    --grey66: #aaa;\r\n    --grey80: #ccc;\r\n    --greya0: #a0a0a0;\r\n    --grey6f: #6f6f6f;\r\n    --errorYellow: #ffcd27;\r\n\r\n    --linkColor: #4b64ff;\r\n    --linkHoverColor: var(--white);\r\n    --subnavLinkColor: var(--grey66);\r\n    --primaryTextColor: var(--white);\r\n    --inverseTextColor: var(--grey20);\r\n    --lightTextColor: var(--grey60);\r\n    --activeColor: var(--white);\r\n    --activeButtonBg: var(--grey20);\r\n    --iconFill: var(--grey60);\r\n\r\n    --mediaMenuBg: var(--grey13);\r\n    --mediaLabelDesktopColor: var(--grey60);\r\n    --activeDesktopMenuIcon: var(--grey28);\r\n\r\n    --mediaSliderBg: var(--grey20);\r\n    --mediaSliderDesktopBg: var(--grey28);\r\n\r\n    --primaryNavBg: var(--grey13);\r\n    --primaryNavBottomBorder: var(--grey20);\r\n\r\n    --desktopSubnavBg: var(--grey20);\r\n\r\n    --dropdownMenuBg: var(--grey20);\r\n    --dropdownMenuInfoItem: var(--greya0);\r\n    --dropdownMenuDivider: var(--grey40);\r\n    --inverseDropdownMenuInfoItem: var(--grey6f);\r\n\r\n    --loginTextColor: var(--grey60);\r\n\r\n    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n    --logoWidthTablet: 263px;\r\n\r\n    --savePageSubmitBg: var(--grey13);\r\n    --savePageSubmitText: var(--white);\r\n    --savePageInputBorder: var(--grey60);\r\n    --savePageErrorText: var(--errorYellow);\r\n\r\n    color: var(--primaryTextColor);\r\n    font-family: var(--themeFontFamily);\r\n  }\r\n\r\n  primary-nav:focus {\r\n    outline: none !important;\r\n  }\r\n\r\n  #close-layer {\r\n    display: none;\r\n    position: fixed;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    z-index: 3;\r\n  }\r\n  #close-layer.visible {\r\n    display: block;\r\n  }\r\n\r\n  .topnav {\r\n    position: relative;\r\n    z-index: 4;\r\n  }\r\n\r\n  @media (max-width: 889px) {\r\n    desktop-subnav {\r\n      display: none;\r\n    }\r\n  }\r\n`;\r\n"]}