@internetarchive/elements 1.1.2-webdev-9192.0 → 1.1.3-l10n-demo.0

package/dist/src/elements/ia-topnav/ia-topnav-wayback-slider.js

@@ -0,0 +1,131 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import './ia-topnav-wayback-search.js';
+import TrackedElement from './tracked-element.js';
+import './ia-topnav-save-page-form.js';
+import { formatUrl, toSentenceCase } from './lib/helpers.js';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import { TOPNAV_MOBILE_BREAKPOINT, } from './models.js';
+import { defaultTopNavConfig } from './data/menus.js';
+import { subnavListCSS } from './subnav-list-styles.js';
+import themeStyles from '../../themes/theme-styles.js';
+import { localized, msg } from '@lit/localize';
+let WaybackSlider = class WaybackSlider extends TrackedElement {
+    constructor() {
+        super(...arguments);
+        this.archiveItLinks = [];
+        this.baseHost = '';
+        this.browserExtensionsLinks = [];
+        this.config = defaultTopNavConfig;
+        this.mobileAppsLinks = [];
+    }
+    render() {
+        return html `
+      <div class="grid">
+        <ia-topnav-wayback-search
+          .waybackPagesArchived=${this.config.waybackPagesArchived ?? ''}
+        ></ia-topnav-wayback-search>
+        <div class="link-lists">
+          <div>
+            <h4>${msg('Mobile Apps')}</h4>
+            <ul class="mobile-apps">
+              ${this.mobileAppsItems}
+            </ul>
+            <h4>${msg('Browser Extensions')}</h4>
+            <ul class="browser-extensions">
+              ${this.browserExtensionsItems}
+            </ul>
+          </div>
+          <div>
+            <h4>${msg('Archive-It Subscription')}</h4>
+            <ul class="archive-it">
+              ${this.archiveItItems}
+            </ul>
+          </div>
+        </div>
+        <ia-topnav-save-page-form
+          .config=${this.config}
+        ></ia-topnav-save-page-form>
+      </div>
+    `;
+    }
+    get mobileAppsItems() {
+        return this.linkList(this.mobileAppsLinks, 'Wayback');
+    }
+    get browserExtensionsItems() {
+        return this.linkList(this.browserExtensionsLinks, 'Wayback');
+    }
+    get archiveItItems() {
+        return this.linkList(this.archiveItLinks, 'ArchiveIt');
+    }
+    linkList(links, eventPrefix) {
+        return links.map((link) => html `<li>
+          <a
+            .href=${formatUrl(link.url, this.baseHost)}
+            @click=${this.trackClick}
+            data-event-click-tracking="${this.analyticsEvent(`${eventPrefix}${link.key ?? link.title}`)}"
+            target=${link.external ? '_blank' : ''}
+            rel=${link.external ? 'noreferrer noopener' : ''}
+            >${link.title}</a
+          >
+        </li>`);
+    }
+    analyticsEvent(title) {
+        return `${this.config?.eventCategory}|${toSentenceCase(title)}`;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            subnavListCSS,
+            css `
+        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+          :host {
+            display: block;
+            grid-column: 1 / 4;
+            padding: 0 1.5rem;
+          }
+
+          h4 {
+            margin-top: 0;
+            font: normal 100 1.6rem var(--themeFontFamily);
+          }
+
+          .grid {
+            display: grid;
+            grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);
+            /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */
+            grid-column-gap: 2.5rem;
+          }
+
+          .link-lists {
+            display: grid;
+            grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);
+            grid-column-gap: 2.5rem;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Array })
+], WaybackSlider.prototype, "archiveItLinks", void 0);
+__decorate([
+    property({ type: String })
+], WaybackSlider.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: Array })
+], WaybackSlider.prototype, "browserExtensionsLinks", void 0);
+__decorate([
+    property({ type: Object })
+], WaybackSlider.prototype, "config", void 0);
+__decorate([
+    property({ type: Array })
+], WaybackSlider.prototype, "mobileAppsLinks", void 0);
+WaybackSlider = __decorate([
+    customElement('ia-topnav-wayback-slider'),
+    localized()
+], WaybackSlider);
+export { WaybackSlider };
+//# sourceMappingURL=ia-topnav-wayback-slider.js.map

package/dist/src/elements/ia-topnav/ia-topnav-wayback-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-wayback-slider.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-wayback-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, css, html } from 'lit';\nimport './ia-topnav-wayback-search';\nimport TrackedElement from './tracked-element';\nimport './ia-topnav-save-page-form';\nimport { formatUrl, toSentenceCase } from './lib/helpers';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport {\n  IATopNavConfig,\n  IATopNavLink,\n  TOPNAV_MOBILE_BREAKPOINT,\n} from './models';\nimport { defaultTopNavConfig } from './data/menus';\nimport { subnavListCSS } from './subnav-list-styles';\nimport themeStyles from '@src/themes/theme-styles';\nimport { localized, msg } from '@lit/localize';\n\n@customElement('ia-topnav-wayback-slider')\n@localized()\nexport class WaybackSlider extends TrackedElement {\n  @property({ type: Array }) archiveItLinks: IATopNavLink[] = [];\n  @property({ type: String }) baseHost = '';\n  @property({ type: Array }) browserExtensionsLinks: IATopNavLink[] = [];\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: Array }) mobileAppsLinks: IATopNavLink[] = [];\n\n  render() {\n    return html`\n      <div class=\"grid\">\n        <ia-topnav-wayback-search\n          .waybackPagesArchived=${this.config.waybackPagesArchived ?? ''}\n        ></ia-topnav-wayback-search>\n        <div class=\"link-lists\">\n          <div>\n            <h4>${msg('Mobile Apps')}</h4>\n            <ul class=\"mobile-apps\">\n              ${this.mobileAppsItems}\n            </ul>\n            <h4>${msg('Browser Extensions')}</h4>\n            <ul class=\"browser-extensions\">\n              ${this.browserExtensionsItems}\n            </ul>\n          </div>\n          <div>\n            <h4>${msg('Archive-It Subscription')}</h4>\n            <ul class=\"archive-it\">\n              ${this.archiveItItems}\n            </ul>\n          </div>\n        </div>\n        <ia-topnav-save-page-form\n          .config=${this.config}\n        ></ia-topnav-save-page-form>\n      </div>\n    `;\n  }\n\n  get mobileAppsItems() {\n    return this.linkList(this.mobileAppsLinks, 'Wayback');\n  }\n\n  get browserExtensionsItems() {\n    return this.linkList(this.browserExtensionsLinks, 'Wayback');\n  }\n\n  get archiveItItems() {\n    return this.linkList(this.archiveItLinks, 'ArchiveIt');\n  }\n\n  private linkList(links: IATopNavLink[], eventPrefix: string) {\n    return links.map(\n      (link) =>\n        html`<li>\n          <a\n            .href=${formatUrl(link.url, this.baseHost)}\n            @click=${this.trackClick}\n            data-event-click-tracking=\"${this.analyticsEvent(\n              `${eventPrefix}${link.key ?? link.title}`,\n            )}\"\n            target=${link.external ? '_blank' : ''}\n            rel=${link.external ? 'noreferrer noopener' : ''}\n            >${link.title}</a\n          >\n        </li>`,\n    );\n  }\n\n  analyticsEvent(title: string) {\n    return `${this.config?.eventCategory}|${toSentenceCase(title)}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      subnavListCSS,\n      css`\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          :host {\n            display: block;\n            grid-column: 1 / 4;\n            padding: 0 1.5rem;\n          }\n\n          h4 {\n            margin-top: 0;\n            font: normal 100 1.6rem var(--themeFontFamily);\n          }\n\n          .grid {\n            display: grid;\n            grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);\n            /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */\n            grid-column-gap: 2.5rem;\n          }\n\n          .link-lists {\n            display: grid;\n            grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);\n            grid-column-gap: 2.5rem;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-topnav/ia-topnav.d.ts

@@ -0,0 +1,88 @@
+import { CSSResultGroup, LitElement, PropertyValues, nothing } from 'lit';
+import './ia-topnav-desktop-subnav.js';
+import './dropdown-menu.js';
+import './ia-topnav-media-slider.js';
+import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models.js';
+import './ia-topnav-primary-nav.js';
+import './ia-topnav-signed-out-dropdown.js';
+import './ia-topnav-user-menu.js';
+export declare class IATopNav extends LitElement {
+    localLinks: boolean;
+    waybackPagesArchived: string;
+    baseHost: string;
+    mediaBaseHost: string;
+    admin: boolean;
+    canManageFlags: boolean;
+    config: IATopNavConfig;
+    hideSearch: boolean;
+    itemIdentifier: string;
+    /**
+     * Email of the item's uploader. When set for an admin viewing an item, the
+     * user menu gets an "uploader:" section with user admin / user privs links.
+     */
+    uploader: string;
+    /**
+     * Biblio URL for a texts item, which must already carry a query string
+     * (the item identifier is appended to it as `&ignored=`). When set for an
+     * admin viewing an item, the user menu gets biblio / bookview / jp2 zip links.
+     */
+    biblio: string;
+    mediaSliderOpen: boolean;
+    openMenu: string;
+    screenName: string;
+    selectedMenuOption: string;
+    username: string;
+    userProfileImagePath: string;
+    secondIdentitySlotMode: IATopNavSecondIdentitySlotMode;
+    currentTab?: {
+        mediatype: string;
+        moveTo: string;
+    };
+    private primaryNav?;
+    /** Only one of ia-topnav-user-menu or ia-topnav-signed-out-dropdown is rendered at a time. */
+    private accountDropdown?;
+    private menus;
+    private boundHandleKeydown;
+    private boundHandleClick;
+    private boundHandleLocaleStatus;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(props: PropertyValues): void;
+    render(): import("lit").TemplateResult<1>;
+    private get normalizedBaseHost();
+    private handleDocumentKeydown;
+    private handleDocumentClick;
+    /** The menu labels are built by `buildTopNavMenus()`, so a new locale needs a rebuild. */
+    private handleLocaleStatus;
+    menuSetup(): void;
+    menuToggled(e: CustomEvent): void;
+    openMediaSlider(): void;
+    closeMediaSlider(): void;
+    closeMenus(): void;
+    trackClick(e: CustomEvent): void;
+    trackSubmit(e: CustomEvent): void;
+    mediaTypeSelected(e: CustomEvent): void;
+    get signedOutOpened(): boolean;
+    get userMenuOpened(): boolean;
+    get userMenuTabIndex(): "" | "-1";
+    get signedOutTabIndex(): "" | "-1";
+    get closeLayerClass(): "" | "visible";
+    get userMenu(): import("lit").TemplateResult<1>;
+    get signedOutDropdown(): import("lit").TemplateResult<1>;
+    get signedOutMenuItems(): import("./models.js").IATopNavLink[];
+    /**
+     * 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.
+     * A `biblio` URL adds a section of book-scanning links, and an `uploader`
+     * adds a section with the uploader's email and account admin links. Each
+     * section is rendered with a divider above it.
+     */
+    get userMenuItems(): import("./models.js").IATopNavLink[][];
+    get allowSecondaryIcon(): boolean;
+    get searchSlot(): import("lit").TemplateResult<1>;
+    get secondLogoSlot(): import("lit").TemplateResult<1> | typeof nothing;
+    get separatorTemplate(): import("lit").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-topnav.d.ts.map

package/dist/src/elements/ia-topnav/ia-topnav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,UAAU,EACV,cAAc,EAGd,OAAO,EACR,MAAM,KAAK,CAAC;AAMb,OAAO,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAClC,OAAO,EACL,cAAc,EAEd,8BAA8B,EAE/B,MAAM,UAAU,CAAC;AAClB,OAAO,yBAAyB,CAAC;AAEjC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uBAAuB,CAAC;AAG/B,qBACa,QAAS,SAAQ,UAAU;IACT,UAAU,UAAS;IAEpB,oBAAoB,SAAM;IAE1B,QAAQ,SAAyB;IAEjC,aAAa,SAAyB;IAErC,KAAK,UAAS;IAEd,cAAc,UAAS;IAExB,MAAM,EAAE,cAAc,CAAuB;IAE5C,UAAU,UAAS;IAEpB,cAAc,SAAM;IAEhD;;;OAGG;IACyB,QAAQ,SAAM;IAE1C;;;;OAIG;IACyB,MAAM,SAAM;IAEX,eAAe,UAAS;IAEzB,QAAQ,SAAM;IAEd,UAAU,EAAE,MAAM,CAAM;IAExB,kBAAkB,SAAM;IAExB,QAAQ,EAAE,MAAM,CAAM;IAEtB,oBAAoB,SACjB;IAG/B,sBAAsB,EAAE,8BAA8B,CAAM;IAEhC,UAAU,CAAC,EAAE;QACvC,SAAS,EAAE,MAAM,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IAE8B,OAAO,CAAC,UAAU,CAAC,CAAa;IAChE,8FAA8F;IAE9F,OAAO,CAAC,eAAe,CAAC,CAAc;IAE7B,OAAO,CAAC,KAAK,CAA0C;IAEhE,OAAO,CAAC,kBAAkB,CAAyC;IAEnE,OAAO,CAAC,gBAAgB,CAAuC;IAE/D,OAAO,CAAC,uBAAuB,CAAsC;IAErE,iBAAiB;IAOjB,oBAAoB;IAUpB,UAAU,CAAC,KAAK,EAAE,cAAc;IAchC,MAAM;IA+CN,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,mBAAmB;IAQ3B,0FAA0F;IAC1F,OAAO,CAAC,kBAAkB;IAI1B,SAAS;IAYT,WAAW,CAAC,CAAC,EAAE,WAAW;IAoB1B,eAAe;IAIf,gBAAgB;IAKhB,UAAU;IAKV,UAAU,CAAC,CAAC,EAAE,WAAW;IAUzB,WAAW,CAAC,CAAC,EAAE,WAAW;IAU1B,iBAAiB,CAAC,CAAC,EAAE,WAAW;IAShC,IAAI,eAAe,YAElB;IAED,IAAI,cAAc,YAEjB;IAED,IAAI,gBAAgB,cAEnB;IAED,IAAI,iBAAiB,cAEpB;IAED,IAAI,eAAe,mBAElB;IAED,IAAI,QAAQ,oCAeX;IAED,IAAI,iBAAiB,oCAapB;IAED,IAAI,kBAAkB,sCAErB;IAED;;;;;;;OAOG;IACH,IAAI,aAAa,wCAiBhB;IAED,IAAI,kBAAkB,YAErB;IAED,IAAI,UAAU,oCAEb;IAED,IAAI,cAAc,qDAOjB;IAED,IAAI,iBAAiB,oCAEpB;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAwFlC;CACF"}

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

@@ -0,0 +1,443 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html, nothing, } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import { LOCALE_STATUS_EVENT } from '@lit/localize';
+import { buildTopNavMenus, defaultTopNavConfig } from './data/menus.js';
+import './ia-topnav-desktop-subnav.js';
+import './dropdown-menu.js';
+import './ia-topnav-media-slider.js';
+import { TOPNAV_MOBILE_BREAKPOINT, } from './models.js';
+import './ia-topnav-primary-nav.js';
+import './ia-topnav-signed-out-dropdown.js';
+import './ia-topnav-user-menu.js';
+import themeStyles from '../../themes/theme-styles.js';
+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 = '';
+        /**
+         * Email of the item's uploader. When set for an admin viewing an item, the
+         * user menu gets an "uploader:" section with user admin / user privs links.
+         */
+        this.uploader = '';
+        /**
+         * Biblio URL for a texts item, which must already carry a query string
+         * (the item identifier is appended to it as `&ignored=`). When set for an
+         * admin viewing an item, the user menu gets biblio / bookview / jp2 zip links.
+         */
+        this.biblio = '';
+        this.mediaSliderOpen = false;
+        this.openMenu = '';
+        this.screenName = '';
+        this.selectedMenuOption = '';
+        this.username = '';
+        this.userProfileImagePath = '/services/img/user/profile';
+        this.secondIdentitySlotMode = '';
+        this.menus = buildTopNavMenus();
+        this.boundHandleKeydown = this.handleDocumentKeydown.bind(this);
+        this.boundHandleClick = this.handleDocumentClick.bind(this);
+        this.boundHandleLocaleStatus = this.handleLocaleStatus.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener(LOCALE_STATUS_EVENT, this.boundHandleLocaleStatus);
+        document.addEventListener('keydown', this.boundHandleKeydown);
+        document.addEventListener('click', this.boundHandleClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener(LOCALE_STATUS_EVENT, this.boundHandleLocaleStatus);
+        document.removeEventListener('keydown', this.boundHandleKeydown);
+        document.removeEventListener('click', this.boundHandleClick);
+    }
+    willUpdate(props) {
+        if (props.has('username') ||
+            props.has('waybackPagesArchived') ||
+            props.has('itemIdentifier') ||
+            props.has('uploader') ||
+            props.has('biblio') ||
+            props.has('localLinks') ||
+            props.has('baseHost')) {
+            this.menuSetup();
+        }
+    }
+    render() {
+        return html `
+      <div class="topnav">
+        <ia-topnav-primary-nav
+          .baseHost=${this.normalizedBaseHost}
+          .mediaBaseHost=${this.mediaBaseHost}
+          .config=${this.config}
+          .openMenu=${this.openMenu}
+          .screenName=${this.screenName}
+          .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}
+        >
+          ${this.secondLogoSlot} ${this.searchSlot}
+        </ia-topnav-primary-nav>
+        <ia-topnav-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)}
+        ></ia-topnav-media-slider>
+      </div>
+      ${this.username ? this.userMenu : this.signedOutDropdown}
+      <ia-topnav-desktop-subnav
+        .baseHost=${this.normalizedBaseHost}
+        .menuItems=${this.menus.more.links}
+        @focus=${this.closeMenus}
+      ></ia-topnav-desktop-subnav>
+      <div
+        id="close-layer"
+        class="${this.closeLayerClass}"
+        @click=${this.closeMenus}
+      ></div>
+    `;
+    }
+    get normalizedBaseHost() {
+        return !this.localLinks ? this.baseHost : '';
+    }
+    handleDocumentKeydown(e) {
+        if (e.key === 'Escape') {
+            this.openMenu = '';
+            this.mediaSliderOpen = false;
+        }
+    }
+    handleDocumentClick(e) {
+        if (!this.openMenu)
+            return;
+        const path = e.composedPath();
+        if (!path.includes(this)) {
+            this.closeMenus();
+        }
+    }
+    /** The menu labels are built by `buildTopNavMenus()`, so a new locale needs a rebuild. */
+    handleLocaleStatus(e) {
+        if (e.detail.status === 'ready')
+            this.menuSetup();
+    }
+    menuSetup() {
+        // re/build the nav
+        this.menus = buildTopNavMenus(this.username, this.normalizedBaseHost, this.waybackPagesArchived, this.itemIdentifier, this.uploader, this.biblio);
+    }
+    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();
+        if (this.openMenu === 'user' || this.openMenu === 'login') {
+            if (this.primaryNav && this.accountDropdown) {
+                const right = this.primaryNav.getAccountDropdownOffset();
+                this.accountDropdown.style.setProperty('--dropdownMenuRight', `${right}px`);
+            }
+        }
+    }
+    openMediaSlider() {
+        this.mediaSliderOpen = true;
+    }
+    closeMediaSlider() {
+        this.mediaSliderOpen = false;
+        this.selectedMenuOption = '';
+    }
+    closeMenus() {
+        this.openMenu = '';
+        this.closeMediaSlider();
+    }
+    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 signedOutOpened() {
+        return this.openMenu === 'login';
+    }
+    get userMenuOpened() {
+        return this.openMenu === 'user';
+    }
+    get userMenuTabIndex() {
+        return this.userMenuOpened ? '' : '-1';
+    }
+    get signedOutTabIndex() {
+        return this.signedOutOpened ? '' : '-1';
+    }
+    get closeLayerClass() {
+        return !!this.openMenu || this.mediaSliderOpen ? 'visible' : '';
+    }
+    get userMenu() {
+        return html `
+      <ia-topnav-user-menu
+        .baseHost=${this.normalizedBaseHost}
+        .config=${this.config}
+        .menuItems=${this.userMenuItems}
+        ?open=${this.openMenu === 'user'}
+        .username=${this.username}
+        tabindex="${this.userMenuTabIndex}"
+        @menuToggled=${this.menuToggled}
+        @trackClick=${this.trackClick}
+        @focusToOtherMenuItem=${(e) => (this.currentTab = e.detail)}
+      ></ia-topnav-user-menu>
+    `;
+    }
+    get signedOutDropdown() {
+        return html `
+      <ia-topnav-signed-out-dropdown
+        .baseHost=${this.normalizedBaseHost}
+        .config=${this.config}
+        .open=${this.signedOutOpened}
+        tabindex="${this.signedOutTabIndex}"
+        .menuItems=${this.signedOutMenuItems}
+        @focusToOtherMenuItem=${(e) => {
+            this.currentTab = e.detail;
+        }}
+      ></ia-topnav-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.
+     * A `biblio` URL adds a section of book-scanning links, and an `uploader`
+     * adds a section with the uploader's email and account admin links. Each
+     * section is rendered with a divider above it.
+     */
+    get userMenuItems() {
+        const basicItems = this.menus.user;
+        if (!this.itemIdentifier || !this.admin)
+            return [basicItems];
+        let adminItems = this.menus.userAdmin;
+        if (this.canManageFlags) {
+            adminItems = adminItems.concat(this.menus.userAdminFlags);
+        }
+        // The built sections are empty until the matching prop is set and the
+        // menus have been rebuilt, so gating on them keeps a divider from ever
+        // rendering above an empty section.
+        const { userAdminBiblio, userAdminUploader } = this.menus;
+        const sections = [basicItems, adminItems];
+        if (userAdminBiblio.length)
+            sections.push(userAdminBiblio);
+        if (userAdminUploader.length)
+            sections.push(userAdminUploader);
+        return sections;
+    }
+    get allowSecondaryIcon() {
+        return this.secondIdentitySlotMode === 'allow';
+    }
+    get searchSlot() {
+        return html `<slot name="search" slot="search"></slot>`;
+    }
+    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>`;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            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);
+          --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);
+        }
+
+        ia-topnav-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: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
+          ia-topnav-desktop-subnav {
+            display: none;
+          }
+        }
+      `,
+        ];
+    }
+};
+__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: String })
+], IATopNav.prototype, "uploader", void 0);
+__decorate([
+    property({ type: String })
+], IATopNav.prototype, "biblio", 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, "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([
+    query('ia-topnav-primary-nav')
+], IATopNav.prototype, "primaryNav", void 0);
+__decorate([
+    query('ia-topnav-user-menu, ia-topnav-signed-out-dropdown')
+], IATopNav.prototype, "accountDropdown", void 0);
+__decorate([
+    state()
+], IATopNav.prototype, "menus", void 0);
+IATopNav = __decorate([
+    customElement('ia-topnav')
+], IATopNav);
+export { IATopNav };
+//# sourceMappingURL=ia-topnav.js.map