@internetarchive/elements 1.1.3-webdev-9226.1 → 1.1.3-webdev-9241.0

package/dist/src/elements/ia-topnav/ia-topnav-primary-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-primary-nav.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-primary-nav.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, PropertyValues, css, html, nothing } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport './ia-topnav-icon-hamburger';\nimport './ia-topnav-login-button';\nimport type { LoginButton } from './ia-topnav-login-button';\nimport './ia-topnav-media-menu';\nimport '@src/elements/ia-sr-only-text/ia-sr-only-text';\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\nimport { formatUrl } from './lib/helpers';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport {\n  IATopNavConfig,\n  IATopNavSecondIdentitySlotMode,\n  TOPNAV_MOBILE_BREAKPOINT,\n} from './models';\nimport { defaultTopNavConfig } from './data/menus';\nimport themeStyles from '@src/themes/theme-styles';\nimport { localized, msg, str } from '@lit/localize';\n\n@customElement('ia-topnav-primary-nav')\n@localized()\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  @query('button.user-menu') private userMenuButton?: HTMLButtonElement;\n  @query('ia-topnav-login-button') private loginButton?: HTMLElement;\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('ia-topnav-media-menu')\n            ?.shadowRoot?.querySelectorAll('ia-topnav-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('ia-topnav-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('ia-topnav-login-button')\n              ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement\n          )?.focus();\n        }\n      }\n    }\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=${msg('Open main menu')}\n        >\n          <ia-topnav-icon-hamburger\n            ?active=${this.openMenu === 'media'}\n          ></ia-topnav-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=${msg('Go home')}\n            class=\"link-home\"\n            >${icons.iaLogo}${logoWordmarkStacked}</a\n          >\n          ${this.secondLogoSlot}\n        </div>\n        <ia-topnav-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        ></ia-topnav-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  /** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */\n  getAccountDropdownOffset(): number {\n    const hostRect = this.getBoundingClientRect();\n\n    if (this.userMenuButton) {\n      return hostRect.right - this.userMenuButton.getBoundingClientRect().right;\n    }\n\n    if (this.loginButton) {\n      const loginRect = this.loginButton.getBoundingClientRect();\n      const innerOffset = (\n        this.loginButton as LoginButton\n      ).getDropdownToggleOffset();\n      return hostRect.right - loginRect.right + innerOffset;\n    }\n\n    return 0;\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  get userIcon() {\n    const userMenuClass = this.openMenu === 'user' ? 'active' : '';\n    const userMenuToolTip =\n      this.openMenu === 'user'\n        ? msg('Close user menu')\n        : msg('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=${msg(str`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      <ia-topnav-login-button\n        .baseHost=${this.baseHost}\n        .config=${this.config}\n        .dropdownOpen=${this.signedOutMenuOpen}\n        .openMenu=${this.openMenu}\n        @signedOutMenuToggled=${this.signedOutMenuToggled}\n      ></ia-topnav-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 ia-topnav-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=\"search-container ${this.searchMenuOpen ? 'open' : ''}\">\n        <slot name=\"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        <ia-sr-only-text>${msg('Donate to the archive')}</ia-sr-only-text>\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>${msg('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  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        button:focus,\n        input:focus {\n          outline: none;\n        }\n\n        nav {\n          position: relative;\n          display: flex;\n          height: 4rem;\n          grid-template-areas: 'hamburger empty heart search user';\n          -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;\n          grid-template-columns: 4rem auto 4rem 4rem 4rem;\n          -ms-grid-rows: 100%;\n          grid-template-rows: 100%;\n          background: var(--primaryNavBg);\n          border-bottom: 1px solid var(--primaryNavBottomBorder);\n        }\n\n        nav.hide-search {\n          grid-template-areas: 'hamburger empty heart user';\n          -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;\n          grid-template-columns: 4rem auto 4rem 4rem;\n        }\n\n        .right-side-section {\n          display: flex;\n          margin-left: auto;\n          user-select: none;\n        }\n        button {\n          background: none;\n          color: inherit;\n          border: none;\n          font: inherit;\n          cursor: pointer;\n        }\n\n        .branding {\n          position: static;\n          float: left;\n          margin: 0 !important;\n          padding: 0 5px 0 10px;\n          -webkit-transform: translate(0, 0);\n          -ms-transform: translate(0, 0);\n          transform: translate(0, 0);\n        }\n\n        slot,\n        .branding {\n          display: flex;\n          justify-content: left;\n          align-items: center;\n        }\n\n        ia-topnav-media-menu {\n          flex: 1;\n          justify-self: stretch;\n        }\n\n        .ia-logo {\n          height: 3rem;\n          width: 2.7rem;\n          display: inline-block;\n        }\n        .ia-wordmark {\n          height: 3rem;\n          width: 9.5rem;\n        }\n        .ia-logo,\n        .ia-wordmark {\n          margin-right: 5px;\n        }\n\n        .hamburger {\n          -ms-grid-row: 1;\n          -ms-grid-column: 1;\n          grid-area: hamburger;\n          padding: 0;\n        }\n        .hamburger svg {\n          height: 4rem;\n          width: 4rem;\n          fill: var(--activeColor);\n        }\n\n        .mobile-donate-link {\n          display: inline-block;\n        }\n        .mobile-donate-link svg {\n          height: 4rem;\n          width: 4rem;\n        }\n        .mobile-donate-link .fill-color {\n          fill: rgb(255, 0, 0);\n        }\n\n        .search-trigger {\n          padding: 0;\n        }\n        .search-trigger svg {\n          height: 4rem;\n          width: 4rem;\n        }\n        .search-trigger .fill-color {\n          fill: var(--iconFill);\n        }\n\n        .search-container {\n          display: none;\n        }\n\n        .search-container.open {\n          display: flex;\n          position: absolute;\n          top: 0;\n          right: 4rem;\n          bottom: 0;\n          left: 4rem;\n          z-index: 3;\n          padding: 0.5rem;\n          border-radius: 1rem 1rem 0 0;\n          background: var(--primaryNavBg);\n          align-items: center;\n          animation: fade-in 0.2s forwards;\n        }\n\n        .search-container ::slotted(*) {\n          display: block;\n        }\n\n        .search-container slot {\n          width: 100%;\n        }\n\n        @keyframes fade-in {\n          0% {\n            opacity: 0;\n          }\n          100% {\n            opacity: 1;\n          }\n        }\n\n        .upload {\n          display: none;\n        }\n\n        .upload span {\n          display: none;\n        }\n\n        .upload svg {\n          height: 3rem;\n          width: 3rem;\n        }\n\n        .screen-name {\n          display: none;\n          font-size: 1.3rem;\n          vertical-align: middle;\n          text-transform: uppercase;\n        }\n\n        .user-menu {\n          color: var(--lightTextColor);\n          padding: 0.5rem;\n          height: 100%;\n        }\n\n        button.user-menu:hover,\n        button.user-menu:focus {\n          color: var(--linkHoverColor);\n          outline: none;\n        }\n\n        .user-menu.active {\n          border-radius: 1rem 1rem 0 0;\n          background: var(--activeButtonBg);\n        }\n\n        .user-menu img {\n          display: block;\n          width: 3rem;\n          height: 3rem;\n        }\n\n        .link-home {\n          text-decoration: none;\n          display: inline-flex;\n        }\n        a.link-home:focus,\n        a.link-home:focus-visible {\n          outline-offset: 1px;\n        }\n\n        @media only screen and (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) and (max-device-width: 905px) {\n          .branding.second-logo {\n            padding-right: 0;\n          }\n        }\n\n        @media (min-width: 906px) {\n          .branding.second-logo {\n            padding-right: 20px;\n          }\n        }\n\n        @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {\n          slot[name='opt-sec-logo'] {\n            display: none;\n          }\n\n          .right-side-section {\n            display: initial;\n          }\n          .right-side-section .user-info {\n            float: right;\n          }\n        }\n\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          :host {\n            --userIconWidth: 3.2rem;\n            --userIconHeight: 3.2rem;\n          }\n\n          nav {\n            display: flex;\n            z-index: 4;\n            height: 5rem;\n            padding-right: 1.5rem;\n          }\n\n          slot[name='opt-sec-logo-mobile'] {\n            display: none;\n          }\n\n          .ia-logo,\n          .ia-wordmark {\n            margin-right: 10px;\n          }\n\n          .hamburger,\n          .search-trigger,\n          .mobile-donate-link {\n            display: none;\n          }\n\n          .user-info {\n            display: block;\n            float: right;\n            vertical-align: middle;\n            height: 100%;\n          }\n\n          .user-info .user-menu img {\n            height: 3rem;\n            width: 3rem;\n            margin-right: 0.5rem;\n          }\n\n          .user-menu {\n            padding: 1rem 0.5rem;\n          }\n          .user-menu.active {\n            background: transparent;\n          }\n\n          .user-menu img {\n            display: inline-block;\n            vertical-align: middle;\n            margin-right: 0.5rem;\n          }\n\n          .upload {\n            display: block;\n            padding: 1rem 0.5rem;\n            float: right;\n            font-size: 1.4rem;\n            text-transform: uppercase;\n            text-decoration: none;\n            color: var(--lightTextColor);\n          }\n          .upload:active,\n          .upload:focus,\n          .upload:hover {\n            color: var(--linkHoverColor);\n          }\n          .upload:focus-visible {\n            outline: none;\n          }\n\n          .upload svg {\n            vertical-align: middle;\n            fill: var(--iconFill);\n          }\n\n          .upload:hover svg,\n          .upload:focus svg,\n          .upload:active svg {\n            fill: var(--linkHoverColor);\n          }\n\n          .search-container,\n          .search-container.open {\n            display: flex;\n            position: static;\n            top: auto;\n            right: auto;\n            bottom: auto;\n            left: auto;\n            align-items: center;\n            padding: 0 0 0 1rem;\n            background: transparent;\n            border-radius: 0;\n            z-index: auto;\n          }\n\n          .search-container slot {\n            width: auto;\n          }\n        }\n\n        @media (min-width: 990px) {\n          .screen-name {\n            display: inline-block;\n            text-overflow: ellipsis;\n            overflow: hidden;\n            white-space: nowrap;\n            max-width: 165px;\n          }\n\n          .upload span {\n            display: inline-block;\n            vertical-align: middle;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-topnav/ia-topnav-save-page-form.d.ts

@@ -0,0 +1,12 @@
+import { CSSResultGroup } from 'lit';
+import TrackedElement from './tracked-element.js';
+import { IATopNavConfig } from './models.js';
+export declare class SavePageForm extends TrackedElement {
+    config: IATopNavConfig;
+    inputValid: boolean;
+    render(): import("lit").TemplateResult<1>;
+    private validateURL;
+    get errorClass(): string;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-topnav-save-page-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-save-page-form.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-save-page-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAChD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAE,cAAc,EAA4B,MAAM,UAAU,CAAC;AAKpE,qBAEa,YAAa,SAAQ,cAAc;IAClB,MAAM,EAAE,cAAc,CAAuB;IAEhE,UAAU,UAAQ;IAE3B,MAAM;IA+BN,OAAO,CAAC,WAAW;IAgBnB,IAAI,UAAU,WAEb;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAwDlC;CACF"}

package/dist/src/elements/ia-topnav/ia-topnav-save-page-form.js

@@ -0,0 +1,128 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import TrackedElement from './tracked-element.js';
+import { property, state } 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 themeStyles from '../../themes/theme-styles.js';
+import { localized, msg } from '@lit/localize';
+let SavePageForm = class SavePageForm extends TrackedElement {
+    constructor() {
+        super(...arguments);
+        this.config = defaultTopNavConfig;
+        this.inputValid = true;
+    }
+    render() {
+        return html `
+      <form
+        action="//web.archive.org/save"
+        method="post"
+        data-event-submit-tracking="${this.config.eventCategory}|SavePageSubmit"
+        @submit=${this.validateURL}
+      >
+        <h3>${msg('Save Page Now')}</h3>
+        <p>
+          ${msg('Capture a web page as it appears now for use as a trusted citation in the future.')}
+        </p>
+        <div>
+          <input
+            type="text"
+            aria-label=${msg('Enter a URL to save')}
+            name="url_preload"
+            id="url_preload"
+            placeholder="https://"
+          />
+          <input type="submit" value=${msg('Save')} />
+        </div>
+        <p class=${this.errorClass}>
+          ${msg('Please enter a valid web address')}
+        </p>
+      </form>
+    `;
+    }
+    validateURL(e) {
+        const target = e.target;
+        const urlInput = target.querySelector('[name="url_preload"]');
+        const valid = /\..{2,}$/.test(urlInput.value);
+        if (!valid) {
+            e.preventDefault();
+            this.inputValid = false;
+            return;
+        }
+        this.inputValid = true;
+        this.trackSubmit(e);
+    }
+    get errorClass() {
+        return `error${this.inputValid ? '' : ' visible'}`;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        div {
+          display: grid;
+          grid-template-columns: 1fr auto;
+          grid-column-gap: 0.8rem;
+          margin: 0;
+          padding: 0;
+          border: none;
+        }
+
+        input[type='text'] {
+          width: 100%;
+          height: 3rem;
+          box-sizing: border-box;
+          border: 1px solid var(--savePageInputBorder);
+          border-radius: 0.5rem;
+          color: var(--grey13);
+          font-size: inherit;
+        }
+
+        input[type='submit'] {
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          appearance: none;
+          padding: 0.4rem 0.8rem;
+          font: normal 1.3rem var(--themeFontFamily);
+          text-transform: uppercase;
+          color: var(--savePageSubmitText);
+          border: none;
+          border-radius: 16px;
+          background: var(--savePageSubmitBg);
+          cursor: pointer;
+        }
+
+        .error {
+          display: none;
+          margin-top: 0.5rem;
+          font-weight: bold;
+          color: var(--savePageErrorText);
+        }
+
+        .visible {
+          display: block;
+        }
+
+        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+          h3 {
+            margin-top: 0;
+            font: normal 100 1.6rem var(--themeFontFamily);
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], SavePageForm.prototype, "config", void 0);
+__decorate([
+    state()
+], SavePageForm.prototype, "inputValid", void 0);
+SavePageForm = __decorate([
+    customElement('ia-topnav-save-page-form'),
+    localized()
+], SavePageForm);
+export { SavePageForm };
+//# sourceMappingURL=ia-topnav-save-page-form.js.map

package/dist/src/elements/ia-topnav/ia-topnav-save-page-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-save-page-form.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-save-page-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAkB,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIxC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc;IAAzC;;QACuB,WAAM,GAAmB,mBAAmB,CAAC;QAEhE,eAAU,GAAG,IAAI,CAAC;IA8G7B,CAAC;IA5GC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;sCAIuB,IAAI,CAAC,MAAM,CAAC,aAAa;kBAC7C,IAAI,CAAC,WAAW;;cAEpB,GAAG,CAAC,eAAe,CAAC;;YAEtB,GAAG,CACH,mFAAmF,CACpF;;;;;yBAKc,GAAG,CAAC,qBAAqB,CAAC;;;;;uCAKZ,GAAG,CAAC,MAAM,CAAC;;mBAE/B,IAAI,CAAC,UAAU;YACtB,GAAG,CAAC,kCAAkC,CAAC;;;KAG9C,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,CAAc;QAChC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAyB,CAAC;QAC3C,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAE9C,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,QAAQ,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IACrD,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA6CoB,wBAAwB;;;;;;OAM9C;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAhH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA8C;AAEhE;IAAR,KAAK,EAAE;gDAAmB;AAHhB,YAAY;IAFxB,aAAa,CAAC,0BAA0B,CAAC;IACzC,SAAS,EAAE;GACC,YAAY,CAiHxB","sourcesContent":["import { CSSResultGroup, css, html } from 'lit';\nimport TrackedElement from './tracked-element';\nimport { property, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { IATopNavConfig, TOPNAV_MOBILE_BREAKPOINT } from './models';\nimport { defaultTopNavConfig } from './data/menus';\nimport themeStyles from '@src/themes/theme-styles';\nimport { localized, msg } from '@lit/localize';\n\n@customElement('ia-topnav-save-page-form')\n@localized()\nexport class SavePageForm extends TrackedElement {\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n\n  @state() inputValid = true;\n\n  render() {\n    return html`\n      <form\n        action=\"//web.archive.org/save\"\n        method=\"post\"\n        data-event-submit-tracking=\"${this.config.eventCategory}|SavePageSubmit\"\n        @submit=${this.validateURL}\n      >\n        <h3>${msg('Save Page Now')}</h3>\n        <p>\n          ${msg(\n            'Capture a web page as it appears now for use as a trusted citation in the future.',\n          )}\n        </p>\n        <div>\n          <input\n            type=\"text\"\n            aria-label=${msg('Enter a URL to save')}\n            name=\"url_preload\"\n            id=\"url_preload\"\n            placeholder=\"https://\"\n          />\n          <input type=\"submit\" value=${msg('Save')} />\n        </div>\n        <p class=${this.errorClass}>\n          ${msg('Please enter a valid web address')}\n        </p>\n      </form>\n    `;\n  }\n\n  private validateURL(e: SubmitEvent) {\n    const target = e.target as HTMLFormElement;\n    const urlInput = target.querySelector(\n      '[name=\"url_preload\"]',\n    ) as HTMLInputElement;\n    const valid = /\\..{2,}$/.test(urlInput.value);\n\n    if (!valid) {\n      e.preventDefault();\n      this.inputValid = false;\n      return;\n    }\n    this.inputValid = true;\n    this.trackSubmit(e);\n  }\n\n  get errorClass() {\n    return `error${this.inputValid ? '' : ' visible'}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        div {\n          display: grid;\n          grid-template-columns: 1fr auto;\n          grid-column-gap: 0.8rem;\n          margin: 0;\n          padding: 0;\n          border: none;\n        }\n\n        input[type='text'] {\n          width: 100%;\n          height: 3rem;\n          box-sizing: border-box;\n          border: 1px solid var(--savePageInputBorder);\n          border-radius: 0.5rem;\n          color: var(--grey13);\n          font-size: inherit;\n        }\n\n        input[type='submit'] {\n          -webkit-appearance: none;\n          -moz-appearance: none;\n          appearance: none;\n          padding: 0.4rem 0.8rem;\n          font: normal 1.3rem var(--themeFontFamily);\n          text-transform: uppercase;\n          color: var(--savePageSubmitText);\n          border: none;\n          border-radius: 16px;\n          background: var(--savePageSubmitBg);\n          cursor: pointer;\n        }\n\n        .error {\n          display: none;\n          margin-top: 0.5rem;\n          font-weight: bold;\n          color: var(--savePageErrorText);\n        }\n\n        .visible {\n          display: block;\n        }\n\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          h3 {\n            margin-top: 0;\n            font: normal 100 1.6rem var(--themeFontFamily);\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-topnav/ia-topnav-signed-out-dropdown.d.ts

@@ -0,0 +1,4 @@
+import DropdownMenu from './dropdown-menu.js';
+export declare class SignedOutDropdown extends DropdownMenu {
+}
+//# sourceMappingURL=ia-topnav-signed-out-dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-signed-out-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-signed-out-dropdown.ts"],"names":[],"mappings":"AACA,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAE3C,qBACa,iBAAkB,SAAQ,YAAY;CAAG"}

package/dist/src/elements/ia-topnav/ia-topnav-signed-out-dropdown.js

@@ -0,0 +1,10 @@
+import { __decorate } from "tslib";
+import { customElement } from '../../util/custom-element.js';
+import DropdownMenu from './dropdown-menu.js';
+let SignedOutDropdown = class SignedOutDropdown extends DropdownMenu {
+};
+SignedOutDropdown = __decorate([
+    customElement('ia-topnav-signed-out-dropdown')
+], SignedOutDropdown);
+export { SignedOutDropdown };
+//# sourceMappingURL=ia-topnav-signed-out-dropdown.js.map

package/dist/src/elements/ia-topnav/ia-topnav-signed-out-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-signed-out-dropdown.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-signed-out-dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAGpC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,YAAY;CAAG,CAAA;AAAzC,iBAAiB;IAD7B,aAAa,CAAC,+BAA+B,CAAC;GAClC,iBAAiB,CAAwB","sourcesContent":["import { customElement } from '@src/util/custom-element';\nimport DropdownMenu from './dropdown-menu';\n\n@customElement('ia-topnav-signed-out-dropdown')\nexport class SignedOutDropdown extends DropdownMenu {}\n"]}

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

@@ -0,0 +1,7 @@
+import DropdownMenu from './dropdown-menu.js';
+export default class UserMenu extends DropdownMenu {
+    username: string;
+    screenName: string;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=ia-topnav-user-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-user-menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-user-menu.ts"],"names":[],"mappings":"AACA,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAK3C,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,YAAY;IACpB,QAAQ,SAAM;IACd,UAAU,SAAM;IAE5C,MAAM;CAgBP"}

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

@@ -0,0 +1,39 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import DropdownMenu from './dropdown-menu.js';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+let UserMenu = class UserMenu extends DropdownMenu {
+    constructor() {
+        super(...arguments);
+        this.username = '';
+        this.screenName = '';
+    }
+    render() {
+        return html `
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden=${!this.open}
+          aria-expanded=${this.open}
+        >
+          <h3>${this.screenName}</h3>
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], UserMenu.prototype, "username", void 0);
+__decorate([
+    property({ type: String })
+], UserMenu.prototype, "screenName", void 0);
+UserMenu = __decorate([
+    customElement('ia-topnav-user-menu')
+], UserMenu);
+export default UserMenu;
+//# sourceMappingURL=ia-topnav-user-menu.js.map

package/dist/src/elements/ia-topnav/ia-topnav-user-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-user-menu.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-user-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAG1C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QACe,aAAQ,GAAG,EAAE,CAAC;QACd,eAAU,GAAG,EAAE,CAAC;IAkB9C,CAAC;IAhBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,SAAS;wBACT,CAAC,IAAI,CAAC,IAAI;0BACR,IAAI,CAAC,IAAI;;gBAEnB,IAAI,CAAC,UAAU;;cAEjB,IAAI,CAAC,aAAa;;;;KAI3B,CAAC;IACJ,CAAC;CACF,CAAA;AAnB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAiB;AAFzB,QAAQ;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GAChB,QAAQ,CAoB5B;eApBoB,QAAQ","sourcesContent":["import { html } from 'lit';\nimport DropdownMenu from './dropdown-menu';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\n@customElement('ia-topnav-user-menu')\nexport default class UserMenu extends DropdownMenu {\n  @property({ type: String }) username = '';\n  @property({ type: String }) screenName = '';\n\n  render() {\n    return html`\n      <div class=\"nav-container\">\n        <nav\n          class=\"${this.menuClass}\"\n          aria-hidden=${!this.open}\n          aria-expanded=${this.open}\n        >\n          <h3>${this.screenName}</h3>\n          <ul>\n            ${this.dropdownItems}\n          </ul>\n        </nav>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,10 @@
+import { CSSResultGroup } from 'lit';
+import { IAWaybackSearchForm } from '../../elements/ia-wayback-search-form/ia-wayback-search-form.js';
+/**
+ * The Wayback Machine search form shown inside the topnav's wayback slider.
+ * It is `ia-wayback-search-form` with the topnav's layout on top.
+ */
+export declare class IATopNavWaybackSearch extends IAWaybackSearchForm {
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-topnav-wayback-search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-wayback-search.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-wayback-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,6DAA6D,CAAC;AAGlG;;;GAGG;AACH,qBACa,qBAAsB,SAAQ,mBAAmB;IAC5D,MAAM,KAAK,MAAM,IAAI,cAAc,CA+ClC;CACF"}

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

@@ -0,0 +1,64 @@
+import { __decorate } from "tslib";
+import { css } from 'lit';
+import { customElement } from '../../util/custom-element.js';
+import { IAWaybackSearchForm } from '../../elements/ia-wayback-search-form/ia-wayback-search-form.js';
+import { TOPNAV_MOBILE_BREAKPOINT } from './models.js';
+/**
+ * The Wayback Machine search form shown inside the topnav's wayback slider.
+ * It is `ia-wayback-search-form` with the topnav's layout on top.
+ */
+let IATopNavWaybackSearch = class IATopNavWaybackSearch extends IAWaybackSearchForm {
+    static get styles() {
+        return [
+            super.styles,
+            css `
+        p {
+          margin-bottom: 1rem;
+          font-size: 1.6rem;
+          text-align: center;
+        }
+
+        fieldset {
+          padding: 0.5rem;
+          border-radius: 5px;
+          box-shadow: none;
+        }
+
+        input {
+          padding-left: 3rem;
+          margin-top: 0.3rem;
+          font-size: 1.4rem;
+          border-color: #bca38e;
+          background: #fff;
+        }
+
+        input::placeholder,
+        input::-webkit-input-placeholder {
+          color: #8e8e8e;
+        }
+
+        .search-field svg {
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+          fieldset a,
+          .search-field {
+            display: block;
+            width: auto;
+          }
+
+          fieldset a {
+            margin: 0 1.5rem;
+          }
+        }
+      `,
+        ];
+    }
+};
+IATopNavWaybackSearch = __decorate([
+    customElement('ia-topnav-wayback-search')
+], IATopNavWaybackSearch);
+export { IATopNavWaybackSearch };
+//# sourceMappingURL=ia-topnav-wayback-search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-wayback-search.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-wayback-search.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6DAA6D,CAAC;AAClG,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEpD;;;GAGG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,mBAAmB;IAC5D,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA+BoB,wBAAwB;;;;;;;;;;;OAW9C;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAjDY,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAiDjC","sourcesContent":["import { css, CSSResultGroup } from 'lit';\nimport { customElement } from '@src/util/custom-element';\n\nimport { IAWaybackSearchForm } from '@src/elements/ia-wayback-search-form/ia-wayback-search-form';\nimport { TOPNAV_MOBILE_BREAKPOINT } from './models';\n\n/**\n * The Wayback Machine search form shown inside the topnav's wayback slider.\n * It is `ia-wayback-search-form` with the topnav's layout on top.\n */\n@customElement('ia-topnav-wayback-search')\nexport class IATopNavWaybackSearch extends IAWaybackSearchForm {\n  static get styles(): CSSResultGroup {\n    return [\n      super.styles,\n      css`\n        p {\n          margin-bottom: 1rem;\n          font-size: 1.6rem;\n          text-align: center;\n        }\n\n        fieldset {\n          padding: 0.5rem;\n          border-radius: 5px;\n          box-shadow: none;\n        }\n\n        input {\n          padding-left: 3rem;\n          margin-top: 0.3rem;\n          font-size: 1.4rem;\n          border-color: #bca38e;\n          background: #fff;\n        }\n\n        input::placeholder,\n        input::-webkit-input-placeholder {\n          color: #8e8e8e;\n        }\n\n        .search-field svg {\n          top: 50%;\n          transform: translateY(-50%);\n        }\n\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          fieldset a,\n          .search-field {\n            display: block;\n            width: auto;\n          }\n\n          fieldset a {\n            margin: 0 1.5rem;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { CSSResultGroup } from 'lit';
+import './ia-topnav-wayback-search.js';
+import TrackedElement from './tracked-element.js';
+import './ia-topnav-save-page-form.js';
+import { IATopNavConfig, IATopNavLink } from './models.js';
+export declare class WaybackSlider extends TrackedElement {
+    archiveItLinks: IATopNavLink[];
+    baseHost: string;
+    browserExtensionsLinks: IATopNavLink[];
+    config: IATopNavConfig;
+    mobileAppsLinks: IATopNavLink[];
+    render(): import("lit").TemplateResult<1>;
+    get mobileAppsItems(): import("lit").TemplateResult<1>[];
+    get browserExtensionsItems(): import("lit").TemplateResult<1>[];
+    get archiveItItems(): import("lit").TemplateResult<1>[];
+    private linkList;
+    analyticsEvent(title: string): string;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-topnav-wayback-slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-wayback-slider.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-wayback-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAChD,OAAO,4BAA4B,CAAC;AACpC,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,4BAA4B,CAAC;AAIpC,OAAO,EACL,cAAc,EACd,YAAY,EAEb,MAAM,UAAU,CAAC;AAMlB,qBAEa,aAAc,SAAQ,cAAc;IACpB,cAAc,EAAE,YAAY,EAAE,CAAM;IACnC,QAAQ,SAAM;IACf,sBAAsB,EAAE,YAAY,EAAE,CAAM;IAC3C,MAAM,EAAE,cAAc,CAAuB;IAC9C,eAAe,EAAE,YAAY,EAAE,CAAM;IAEhE,MAAM;IA+BN,IAAI,eAAe,sCAElB;IAED,IAAI,sBAAsB,sCAEzB;IAED,IAAI,cAAc,sCAEjB;IAED,OAAO,CAAC,QAAQ;IAkBhB,cAAc,CAAC,KAAK,EAAE,MAAM;IAI5B,MAAM,KAAK,MAAM,IAAI,cAAc,CAgClC;CACF"}

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.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.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"]}