@internetarchive/elements 1.1.2 → 1.1.3-l10n-demo.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,21 @@
+import { CSSResultGroup, LitElement } from 'lit';
+/**
+ * The Wayback Machine search form shown inside the topnav's wayback slider.
+ *
+ * The layout rules the topnav needs sit in the last `css` block so they win
+ * over the base ones on equal specificity.
+ */
+export declare class IATopNavWaybackSearch extends LitElement {
+    queryHandler: {
+        performQuery: (query: string) => void;
+    };
+    waybackPagesArchived: string;
+    private urlInput;
+    render(): import("lit").TemplateResult<1>;
+    handleSubmit(e: Event): void;
+    emitWaybackSearchSubmitted(query: string): void;
+    emitWaybackMachineStatsLinkClicked(): void;
+    emitWaybackMachineLogoLinkClicked(): void;
+    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,UAAU,EAAQ,MAAM,KAAK,CAAC;AAU5D;;;;;GAKG;AACH,qBAEa,qBAAsB,SAAQ,UAAU;IACvB,YAAY,EAAE;QACxC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACvC,CAGC;IAE0B,oBAAoB,SAAiB;IAElD,OAAO,CAAC,QAAQ,CAAoB;IAEnD,MAAM;IAsCN,YAAY,CAAC,CAAC,EAAE,KAAK;IAOrB,0BAA0B,CAAC,KAAK,EAAE,MAAM;IAUxC,kCAAkC;IAIlC,iCAAiC;IAIjC,MAAM,KAAK,MAAM,IAAI,cAAc,CAwLlC;CACF"}

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

@@ -0,0 +1,278 @@
+import { __decorate } from "tslib";
+import { css, LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import searchIcon from './assets/img/icon-search.js';
+import logo from './assets/img/wayback-logo.js';
+import { TOPNAV_MOBILE_BREAKPOINT } from './models.js';
+import themeStyles from '../../themes/theme-styles.js';
+import { localized, msg } from '@lit/localize';
+/**
+ * The Wayback Machine search form shown inside the topnav's wayback slider.
+ *
+ * The layout rules the topnav needs sit in the last `css` block so they win
+ * over the base ones on equal specificity.
+ */
+let IATopNavWaybackSearch = class IATopNavWaybackSearch extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.queryHandler = {
+            performQuery: (query) => (window.location.href = `https://web.archive.org/web/*/${query}`),
+        };
+        this.waybackPagesArchived = '916 billion';
+    }
+    render() {
+        return html `
+      <form method="post" @submit=${this.handleSubmit}>
+        <p>
+          ${msg(html `Search the history of more than ${this.waybackPagesArchived}
+              <a
+                @click=${this.emitWaybackMachineStatsLinkClicked}
+                data-event-click-tracking="TopNav|WaybackMachineStatsLink"
+                href="https://blog.archive.org/2016/10/23/defining-web-pages-web-sites-and-web-captures/"
+                >web pages</a
+              >
+              on the Internet.`)}
+        </p>
+        <fieldset>
+          <a
+            @click=${this.emitWaybackMachineLogoLinkClicked}
+            data-event-click-tracking="TopNav|WaybackMachineLogoLink"
+            aria-label=${msg('Visit the Wayback Machine')}
+            href="https://web.archive.org"
+            >${logo}</a
+          >
+          <div class="search-field">
+            <input
+              type="text"
+              aria-label=${msg('Search the Wayback Machine')}
+              name="url"
+              id="url"
+              placeholder=${msg('Enter URL or keywords')}
+            />
+            ${searchIcon}
+          </div>
+        </fieldset>
+      </form>
+    `;
+    }
+    handleSubmit(e) {
+        e.preventDefault();
+        const query = this.urlInput.value;
+        this.emitWaybackSearchSubmitted(query);
+        this.queryHandler.performQuery(query);
+    }
+    emitWaybackSearchSubmitted(query) {
+        this.dispatchEvent(new CustomEvent('waybackSearchSubmitted', {
+            detail: {
+                query,
+            },
+        }));
+    }
+    emitWaybackMachineStatsLinkClicked() {
+        this.dispatchEvent(new CustomEvent('waybackMachineStatsLinkClicked'));
+    }
+    emitWaybackMachineLogoLinkClicked() {
+        this.dispatchEvent(new CustomEvent('waybackMachineLogoLink'));
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --topnav-wayback-input-text-color--: var(
+            --ia-theme-secondary-text-color,
+            #666
+          );
+          --topnav-wayback-input-bg--: var(
+            --ia-theme-secondary-background-color,
+            #fff
+          );
+          /*
+           * Darker than the mobile glyph, which follows --iconFill. The topnav
+           * declares this alongside its other color knobs. The literal covers
+           * mounting this search on its own, where none of those greys exist,
+           * and it has to be a literal because fill inherits: an unresolved
+           * value paints black rather than falling through to another rule.
+           */
+          --topnav-wayback-desktop-icon-fill--: var(
+            --desktopSearchIconFill,
+            #333
+          );
+
+          font: normal 1.2rem/1.5 var(--themeFontFamily);
+        }
+
+        form {
+          max-width: 600px;
+        }
+
+        p {
+          margin-top: 0;
+          font-weight: 200;
+        }
+
+        a {
+          font-weight: 500;
+          text-decoration: none;
+          color: var(--activeColor);
+        }
+
+        fieldset {
+          padding: 0.7rem 2rem;
+          margin: 1.5rem 0;
+          box-sizing: border-box;
+          text-align: center;
+          border: none;
+          border-radius: 7px;
+          background-color: #fcf5e6;
+          box-shadow: 3px 3px 0 0 #c3ad97;
+        }
+
+        fieldset a {
+          font-size: 0;
+        }
+
+        img {
+          width: 100%;
+          max-width: 215px;
+          max-height: 60px;
+          margin-bottom: 1.3rem;
+          vertical-align: middle;
+        }
+
+        input {
+          display: block;
+          width: 100%;
+          height: 3rem;
+          padding: 0.5rem 1rem 0.5rem 3rem;
+          font: normal 1.2rem/1.5 var(--themeFontFamily);
+          color: var(--topnav-wayback-input-text-color--);
+          box-sizing: border-box;
+          border: 1px solid var(--grey80);
+          border-radius: 2rem;
+          background: var(--topnav-wayback-input-bg--);
+        }
+
+        input:focus {
+          border-color: #66afe9;
+          outline: none;
+        }
+
+        .search-field {
+          position: relative;
+          overflow: hidden;
+        }
+
+        .search-field svg {
+          position: absolute;
+          top: 3px;
+          left: 3px;
+          width: 2.4rem;
+          height: 2.4rem;
+        }
+
+        .search-field .fill-color {
+          fill: var(--iconFill);
+        }
+
+        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+          form {
+            margin: 0 auto;
+          }
+
+          p {
+            margin-bottom: 3rem;
+            font-size: 1.6rem;
+            text-align: center;
+          }
+
+          img {
+            margin: 0;
+          }
+
+          fieldset {
+            margin: 0 auto;
+          }
+
+          fieldset a,
+          .search-field {
+            display: inline-block;
+            width: 49%;
+            vertical-align: middle;
+          }
+
+          fieldset a {
+            text-align: center;
+          }
+
+          .search-field svg {
+            top: 2px;
+          }
+
+          .search-field .fill-color {
+            fill: var(--topnav-wayback-desktop-icon-fill--);
+          }
+        }
+      `,
+            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;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], IATopNavWaybackSearch.prototype, "queryHandler", void 0);
+__decorate([
+    property({ type: String })
+], IATopNavWaybackSearch.prototype, "waybackPagesArchived", void 0);
+__decorate([
+    query('#url')
+], IATopNavWaybackSearch.prototype, "urlInput", void 0);
+IATopNavWaybackSearch = __decorate([
+    customElement('ia-topnav-wayback-search'),
+    localized()
+], 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,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAE/C;;;;;GAKG;AAGI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QACuB,iBAAY,GAEpC;YACF,YAAY,EAAE,CAAC,KAAa,EAAE,EAAE,CAC9B,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,iCAAiC,KAAK,EAAE,CAAC;SACpE,CAAC;QAE0B,yBAAoB,GAAG,aAAa,CAAC;IA4PnE,CAAC;IAxPC,MAAM;QACJ,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,YAAY;;YAEzC,GAAG,CACH,IAAI,CAAA,mCAAmC,IAAI,CAAC,oBAAoB;;yBAEnD,IAAI,CAAC,kCAAkC;;;;;+BAKjC,CACpB;;;;qBAIU,IAAI,CAAC,iCAAiC;;yBAElC,GAAG,CAAC,2BAA2B,CAAC;;eAE1C,IAAI;;;;;2BAKQ,GAAG,CAAC,4BAA4B,CAAC;;;4BAGhC,GAAG,CAAC,uBAAuB,CAAC;;cAE1C,UAAU;;;;KAInB,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,0BAA0B,CAAC,KAAa;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,wBAAwB,EAAE;YACxC,MAAM,EAAE;gBACN,KAAK;aACN;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,kCAAkC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gCAAgC,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,iCAAiC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAkGoB,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsC9C;YACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA+BoB,wBAAwB;;;;;;;;;;;OAW9C;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAnQ6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAKzB;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAsC;AAE1C;IAAtB,KAAK,CAAC,MAAM,CAAC;uDAAqC;AAVxC,qBAAqB;IAFjC,aAAa,CAAC,0BAA0B,CAAC;IACzC,SAAS,EAAE;GACC,qBAAqB,CAoQjC","sourcesContent":["import { css, CSSResultGroup, LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport searchIcon from './assets/img/icon-search';\nimport logo from './assets/img/wayback-logo';\nimport { TOPNAV_MOBILE_BREAKPOINT } from './models';\nimport themeStyles from '@src/themes/theme-styles';\nimport { localized, msg } from '@lit/localize';\n\n/**\n * The Wayback Machine search form shown inside the topnav's wayback slider.\n *\n * The layout rules the topnav needs sit in the last `css` block so they win\n * over the base ones on equal specificity.\n */\n@customElement('ia-topnav-wayback-search')\n@localized()\nexport class IATopNavWaybackSearch extends LitElement {\n  @property({ type: Object }) queryHandler: {\n    performQuery: (query: string) => void;\n  } = {\n    performQuery: (query: string) =>\n      (window.location.href = `https://web.archive.org/web/*/${query}`),\n  };\n\n  @property({ type: String }) waybackPagesArchived = '916 billion';\n\n  @query('#url') private urlInput!: HTMLInputElement;\n\n  render() {\n    return html`\n      <form method=\"post\" @submit=${this.handleSubmit}>\n        <p>\n          ${msg(\n            html`Search the history of more than ${this.waybackPagesArchived}\n              <a\n                @click=${this.emitWaybackMachineStatsLinkClicked}\n                data-event-click-tracking=\"TopNav|WaybackMachineStatsLink\"\n                href=\"https://blog.archive.org/2016/10/23/defining-web-pages-web-sites-and-web-captures/\"\n                >web pages</a\n              >\n              on the Internet.`,\n          )}\n        </p>\n        <fieldset>\n          <a\n            @click=${this.emitWaybackMachineLogoLinkClicked}\n            data-event-click-tracking=\"TopNav|WaybackMachineLogoLink\"\n            aria-label=${msg('Visit the Wayback Machine')}\n            href=\"https://web.archive.org\"\n            >${logo}</a\n          >\n          <div class=\"search-field\">\n            <input\n              type=\"text\"\n              aria-label=${msg('Search the Wayback Machine')}\n              name=\"url\"\n              id=\"url\"\n              placeholder=${msg('Enter URL or keywords')}\n            />\n            ${searchIcon}\n          </div>\n        </fieldset>\n      </form>\n    `;\n  }\n\n  handleSubmit(e: Event) {\n    e.preventDefault();\n    const query = this.urlInput.value;\n    this.emitWaybackSearchSubmitted(query);\n    this.queryHandler.performQuery(query);\n  }\n\n  emitWaybackSearchSubmitted(query: string) {\n    this.dispatchEvent(\n      new CustomEvent('waybackSearchSubmitted', {\n        detail: {\n          query,\n        },\n      }),\n    );\n  }\n\n  emitWaybackMachineStatsLinkClicked() {\n    this.dispatchEvent(new CustomEvent('waybackMachineStatsLinkClicked'));\n  }\n\n  emitWaybackMachineLogoLinkClicked() {\n    this.dispatchEvent(new CustomEvent('waybackMachineLogoLink'));\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --topnav-wayback-input-text-color--: var(\n            --ia-theme-secondary-text-color,\n            #666\n          );\n          --topnav-wayback-input-bg--: var(\n            --ia-theme-secondary-background-color,\n            #fff\n          );\n          /*\n           * Darker than the mobile glyph, which follows --iconFill. The topnav\n           * declares this alongside its other color knobs. The literal covers\n           * mounting this search on its own, where none of those greys exist,\n           * and it has to be a literal because fill inherits: an unresolved\n           * value paints black rather than falling through to another rule.\n           */\n          --topnav-wayback-desktop-icon-fill--: var(\n            --desktopSearchIconFill,\n            #333\n          );\n\n          font: normal 1.2rem/1.5 var(--themeFontFamily);\n        }\n\n        form {\n          max-width: 600px;\n        }\n\n        p {\n          margin-top: 0;\n          font-weight: 200;\n        }\n\n        a {\n          font-weight: 500;\n          text-decoration: none;\n          color: var(--activeColor);\n        }\n\n        fieldset {\n          padding: 0.7rem 2rem;\n          margin: 1.5rem 0;\n          box-sizing: border-box;\n          text-align: center;\n          border: none;\n          border-radius: 7px;\n          background-color: #fcf5e6;\n          box-shadow: 3px 3px 0 0 #c3ad97;\n        }\n\n        fieldset a {\n          font-size: 0;\n        }\n\n        img {\n          width: 100%;\n          max-width: 215px;\n          max-height: 60px;\n          margin-bottom: 1.3rem;\n          vertical-align: middle;\n        }\n\n        input {\n          display: block;\n          width: 100%;\n          height: 3rem;\n          padding: 0.5rem 1rem 0.5rem 3rem;\n          font: normal 1.2rem/1.5 var(--themeFontFamily);\n          color: var(--topnav-wayback-input-text-color--);\n          box-sizing: border-box;\n          border: 1px solid var(--grey80);\n          border-radius: 2rem;\n          background: var(--topnav-wayback-input-bg--);\n        }\n\n        input:focus {\n          border-color: #66afe9;\n          outline: none;\n        }\n\n        .search-field {\n          position: relative;\n          overflow: hidden;\n        }\n\n        .search-field svg {\n          position: absolute;\n          top: 3px;\n          left: 3px;\n          width: 2.4rem;\n          height: 2.4rem;\n        }\n\n        .search-field .fill-color {\n          fill: var(--iconFill);\n        }\n\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          form {\n            margin: 0 auto;\n          }\n\n          p {\n            margin-bottom: 3rem;\n            font-size: 1.6rem;\n            text-align: center;\n          }\n\n          img {\n            margin: 0;\n          }\n\n          fieldset {\n            margin: 0 auto;\n          }\n\n          fieldset a,\n          .search-field {\n            display: inline-block;\n            width: 49%;\n            vertical-align: middle;\n          }\n\n          fieldset a {\n            text-align: center;\n          }\n\n          .search-field svg {\n            top: 2px;\n          }\n\n          .search-field .fill-color {\n            fill: var(--topnav-wayback-desktop-icon-fill--);\n          }\n        }\n      `,\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"}