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

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

@@ -0,0 +1,285 @@
+var MediaSubnav_1;
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import TrackedElement from './tracked-element.js';
+import './ia-topnav-wayback-slider.js';
+import './ia-topnav-more-slider.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 MediaSubnav = MediaSubnav_1 = class MediaSubnav extends TrackedElement {
+    constructor() {
+        super(...arguments);
+        this.baseHost = '';
+        this.config = defaultTopNavConfig;
+        this.menu = '';
+        this.menuItems = MediaSubnav_1.defaultLinks;
+        this.links = MediaSubnav_1.defaultLinks;
+    }
+    shouldUpdate() {
+        if (this.menuItems) {
+            this.links = this.menuItems;
+        }
+        return true;
+    }
+    render() {
+        if (!this.menu) {
+            return html ``;
+        }
+        if (this.menuItems) {
+            this.links = this.menuItems;
+        }
+        if (this.menu === 'web') {
+            return html ` <ia-topnav-wayback-slider
+        .baseHost=${this.baseHost}
+        .config=${this.config}
+        .archiveItLinks=${this.menuItems.archiveItLinks}
+        .browserExtensionsLinks=${this.menuItems.browserExtensionsLinks}
+        .mobileAppsLinks=${this.menuItems.mobileAppsLinks}
+      ></ia-topnav-wayback-slider>`;
+        }
+        if (this.menu === 'more') {
+            return html ` <ia-topnav-more-slider
+        .baseHost=${this.baseHost}
+        .config=${this.config}
+        .menuItems=${this.menuItems.links}
+      >
+      </ia-topnav-more-slider>`;
+        }
+        return html `
+      <h3>${this.links.heading}</h3>
+      <div class="icon-links">${this.iconLinks}</div>
+      <div class="links featured">
+        <h4>${msg('Featured')}</h4>
+        <ul>
+          ${this.renderLinks(this.links.featuredLinks)}
+        </ul>
+      </div>
+      <div class="links top">
+        <h4>${msg('Top')}</h4>
+        <ul>
+          ${this.renderLinks(this.links.links)}
+        </ul>
+      </div>
+    `;
+    }
+    static get defaultLinks() {
+        return {
+            heading: '',
+            iconLinks: [],
+            featuredLinks: [],
+            links: [],
+            mobileAppsLinks: [],
+            browserExtensionsLinks: [],
+            archiveItLinks: [],
+        };
+    }
+    analyticsEvent(title) {
+        return `${this.config?.eventCategory}|${toSentenceCase(title)}${toSentenceCase(this.menu)}`;
+    }
+    get iconLinks() {
+        return this.links.iconLinks.map((link) => html `
+        <a
+          .href="${formatUrl(link.url, this.baseHost)}"
+          @click=${this.trackClick}
+          data-event-click-tracking="${this.analyticsEvent(link.key ?? link.title)}"
+          ><img src="${ifDefined(link.icon)}" loading="lazy" />${link.title}</a
+        >
+      `);
+    }
+    renderLinks(links) {
+        return links.map((link) => html `
+        <li>
+          <a
+            .href="${formatUrl(link.url, this.baseHost)}"
+            @click=${this.trackClick}
+            data-event-click-tracking="${this.analyticsEvent(link.key ?? link.title)}"
+            >${link.title}</a
+          >
+        </li>
+      `);
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            subnavListCSS,
+            css `
+        img {
+          display: block;
+          width: 90px;
+          height: 90px;
+          margin: 0 auto 1rem auto;
+          border-radius: 45px;
+        }
+
+        h3 {
+          margin-top: 0;
+          font-size: 1.8rem;
+        }
+
+        .icon-links {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-pack: space-evenly;
+          -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+          text-align: center;
+        }
+
+        .icon-links a {
+          display: inline-block;
+          width: 12rem;
+          margin-bottom: 1.5rem;
+          overflow: hidden;
+          white-space: nowrap;
+          text-align: center;
+          text-overflow: ellipsis;
+        }
+
+        .icon-links a + a {
+          margin-left: 2rem;
+        }
+
+        .featured h4 {
+          display: none;
+        }
+
+        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+          :host {
+            display: -ms-grid;
+            display: grid;
+            -ms-grid-columns: 40% 20% 40%;
+            grid-template-columns: 40% 20% 40%;
+          }
+
+          .wayback-search {
+            -ms-grid-column: 1;
+            -ms-grid-column-span: 3;
+            grid-column: 1 / 4;
+          }
+
+          h3 {
+            display: none;
+          }
+
+          .icon-links {
+            -ms-grid-column: 1;
+          }
+
+          .icon-links a {
+            padding-top: 3.5rem;
+            max-width: 16rem;
+          }
+
+          .links {
+            padding: 0 1.5rem;
+          }
+
+          .featured {
+            -ms-grid-column: 2;
+          }
+
+          .featured h4 {
+            display: block;
+          }
+
+          .top {
+            -ms-grid-column: 3;
+          }
+
+          .top ul {
+            display: -ms-grid;
+            display: grid;
+            -ms-grid-columns: 50% 3rem 50%;
+            grid-template-columns: 50% 50%;
+            -ms-grid-rows: (auto) [7];
+            grid-template-rows: repeat(7, auto);
+            grid-column-gap: 3rem;
+            grid-auto-flow: column;
+          }
+          .top ul > *:nth-child(1) {
+            -ms-grid-row: 1;
+            -ms-grid-column: 1;
+          }
+          .top ul > *:nth-child(2) {
+            -ms-grid-row: 2;
+            -ms-grid-column: 1;
+          }
+          .top ul > *:nth-child(3) {
+            -ms-grid-row: 3;
+            -ms-grid-column: 1;
+          }
+          .top ul > *:nth-child(4) {
+            -ms-grid-row: 4;
+            -ms-grid-column: 1;
+          }
+          .top ul > *:nth-child(5) {
+            -ms-grid-row: 5;
+            -ms-grid-column: 1;
+          }
+          .top ul > *:nth-child(6) {
+            -ms-grid-row: 6;
+            -ms-grid-column: 1;
+          }
+          .top ul > *:nth-child(7) {
+            -ms-grid-row: 7;
+            -ms-grid-column: 1;
+          }
+          .top ul > *:nth-child(8) {
+            -ms-grid-row: 1;
+            -ms-grid-column: 3;
+          }
+          .top ul > *:nth-child(9) {
+            -ms-grid-row: 2;
+            -ms-grid-column: 3;
+          }
+          .top ul > *:nth-child(10) {
+            -ms-grid-row: 3;
+            -ms-grid-column: 3;
+          }
+          .top ul > *:nth-child(11) {
+            -ms-grid-row: 4;
+            -ms-grid-column: 3;
+          }
+          .top ul > *:nth-child(12) {
+            -ms-grid-row: 5;
+            -ms-grid-column: 3;
+          }
+          .top ul > *:nth-child(13) {
+            -ms-grid-row: 6;
+            -ms-grid-column: 3;
+          }
+          .top ul > *:nth-child(14) {
+            -ms-grid-row: 7;
+            -ms-grid-column: 3;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], MediaSubnav.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: Object })
+], MediaSubnav.prototype, "config", void 0);
+__decorate([
+    property({ type: String })
+], MediaSubnav.prototype, "menu", void 0);
+__decorate([
+    property({ type: Object })
+], MediaSubnav.prototype, "menuItems", void 0);
+MediaSubnav = MediaSubnav_1 = __decorate([
+    customElement('ia-topnav-media-subnav'),
+    localized()
+], MediaSubnav);
+export { MediaSubnav };
+//# sourceMappingURL=ia-topnav-media-subnav.js.map

package/dist/src/elements/ia-topnav/ia-topnav-media-subnav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-media-subnav.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-media-subnav.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, css, html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport TrackedElement from './tracked-element';\nimport './ia-topnav-wayback-slider';\nimport './ia-topnav-more-slider';\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  IATopNavMediaMenu,\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-media-subnav')\n@localized()\nexport class MediaSubnav extends TrackedElement {\n  @property({ type: String }) baseHost = '';\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) menu:\n    | ''\n    | 'web'\n    | 'more'\n    | 'audio'\n    | 'images'\n    | 'software'\n    | 'texts'\n    | 'video' = '';\n  @property({ type: Object }) menuItems: IATopNavMediaMenu =\n    MediaSubnav.defaultLinks;\n\n  private links: IATopNavMediaMenu = MediaSubnav.defaultLinks;\n\n  shouldUpdate() {\n    if (this.menuItems) {\n      this.links = this.menuItems;\n    }\n    return true;\n  }\n\n  render() {\n    if (!this.menu) {\n      return html``;\n    }\n\n    if (this.menuItems) {\n      this.links = this.menuItems;\n    }\n\n    if (this.menu === 'web') {\n      return html` <ia-topnav-wayback-slider\n        .baseHost=${this.baseHost}\n        .config=${this.config}\n        .archiveItLinks=${this.menuItems.archiveItLinks}\n        .browserExtensionsLinks=${this.menuItems.browserExtensionsLinks}\n        .mobileAppsLinks=${this.menuItems.mobileAppsLinks}\n      ></ia-topnav-wayback-slider>`;\n    }\n\n    if (this.menu === 'more') {\n      return html` <ia-topnav-more-slider\n        .baseHost=${this.baseHost}\n        .config=${this.config}\n        .menuItems=${this.menuItems.links}\n      >\n      </ia-topnav-more-slider>`;\n    }\n\n    return html`\n      <h3>${this.links.heading}</h3>\n      <div class=\"icon-links\">${this.iconLinks}</div>\n      <div class=\"links featured\">\n        <h4>${msg('Featured')}</h4>\n        <ul>\n          ${this.renderLinks(this.links.featuredLinks)}\n        </ul>\n      </div>\n      <div class=\"links top\">\n        <h4>${msg('Top')}</h4>\n        <ul>\n          ${this.renderLinks(this.links.links)}\n        </ul>\n      </div>\n    `;\n  }\n\n  static get defaultLinks(): IATopNavMediaMenu {\n    return {\n      heading: '',\n      iconLinks: [],\n      featuredLinks: [],\n      links: [],\n      mobileAppsLinks: [],\n      browserExtensionsLinks: [],\n      archiveItLinks: [],\n    };\n  }\n\n  analyticsEvent(title: string) {\n    return `${this.config?.eventCategory}|${toSentenceCase(title)}${toSentenceCase(this.menu)}`;\n  }\n\n  get iconLinks() {\n    return this.links.iconLinks.map(\n      (link) => html`\n        <a\n          .href=\"${formatUrl(link.url, this.baseHost)}\"\n          @click=${this.trackClick}\n          data-event-click-tracking=\"${this.analyticsEvent(\n            link.key ?? link.title,\n          )}\"\n          ><img src=\"${ifDefined(link.icon)}\" loading=\"lazy\" />${link.title}</a\n        >\n      `,\n    );\n  }\n\n  renderLinks(links: IATopNavLink[]) {\n    return links.map(\n      (link) => html`\n        <li>\n          <a\n            .href=\"${formatUrl(link.url, this.baseHost)}\"\n            @click=${this.trackClick}\n            data-event-click-tracking=\"${this.analyticsEvent(\n              link.key ?? link.title,\n            )}\"\n            >${link.title}</a\n          >\n        </li>\n      `,\n    );\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      subnavListCSS,\n      css`\n        img {\n          display: block;\n          width: 90px;\n          height: 90px;\n          margin: 0 auto 1rem auto;\n          border-radius: 45px;\n        }\n\n        h3 {\n          margin-top: 0;\n          font-size: 1.8rem;\n        }\n\n        .icon-links {\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-pack: space-evenly;\n          -ms-flex-pack: space-evenly;\n          justify-content: space-evenly;\n          text-align: center;\n        }\n\n        .icon-links a {\n          display: inline-block;\n          width: 12rem;\n          margin-bottom: 1.5rem;\n          overflow: hidden;\n          white-space: nowrap;\n          text-align: center;\n          text-overflow: ellipsis;\n        }\n\n        .icon-links a + a {\n          margin-left: 2rem;\n        }\n\n        .featured h4 {\n          display: none;\n        }\n\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          :host {\n            display: -ms-grid;\n            display: grid;\n            -ms-grid-columns: 40% 20% 40%;\n            grid-template-columns: 40% 20% 40%;\n          }\n\n          .wayback-search {\n            -ms-grid-column: 1;\n            -ms-grid-column-span: 3;\n            grid-column: 1 / 4;\n          }\n\n          h3 {\n            display: none;\n          }\n\n          .icon-links {\n            -ms-grid-column: 1;\n          }\n\n          .icon-links a {\n            padding-top: 3.5rem;\n            max-width: 16rem;\n          }\n\n          .links {\n            padding: 0 1.5rem;\n          }\n\n          .featured {\n            -ms-grid-column: 2;\n          }\n\n          .featured h4 {\n            display: block;\n          }\n\n          .top {\n            -ms-grid-column: 3;\n          }\n\n          .top ul {\n            display: -ms-grid;\n            display: grid;\n            -ms-grid-columns: 50% 3rem 50%;\n            grid-template-columns: 50% 50%;\n            -ms-grid-rows: (auto) [7];\n            grid-template-rows: repeat(7, auto);\n            grid-column-gap: 3rem;\n            grid-auto-flow: column;\n          }\n          .top ul > *:nth-child(1) {\n            -ms-grid-row: 1;\n            -ms-grid-column: 1;\n          }\n          .top ul > *:nth-child(2) {\n            -ms-grid-row: 2;\n            -ms-grid-column: 1;\n          }\n          .top ul > *:nth-child(3) {\n            -ms-grid-row: 3;\n            -ms-grid-column: 1;\n          }\n          .top ul > *:nth-child(4) {\n            -ms-grid-row: 4;\n            -ms-grid-column: 1;\n          }\n          .top ul > *:nth-child(5) {\n            -ms-grid-row: 5;\n            -ms-grid-column: 1;\n          }\n          .top ul > *:nth-child(6) {\n            -ms-grid-row: 6;\n            -ms-grid-column: 1;\n          }\n          .top ul > *:nth-child(7) {\n            -ms-grid-row: 7;\n            -ms-grid-column: 1;\n          }\n          .top ul > *:nth-child(8) {\n            -ms-grid-row: 1;\n            -ms-grid-column: 3;\n          }\n          .top ul > *:nth-child(9) {\n            -ms-grid-row: 2;\n            -ms-grid-column: 3;\n          }\n          .top ul > *:nth-child(10) {\n            -ms-grid-row: 3;\n            -ms-grid-column: 3;\n          }\n          .top ul > *:nth-child(11) {\n            -ms-grid-row: 4;\n            -ms-grid-column: 3;\n          }\n          .top ul > *:nth-child(12) {\n            -ms-grid-row: 5;\n            -ms-grid-column: 3;\n          }\n          .top ul > *:nth-child(13) {\n            -ms-grid-row: 6;\n            -ms-grid-column: 3;\n          }\n          .top ul > *:nth-child(14) {\n            -ms-grid-row: 7;\n            -ms-grid-column: 3;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+import { CSSResultGroup } from 'lit';
+import TrackedElement from './tracked-element.js';
+import { IATopNavConfig, IATopNavLink } from './models.js';
+export declare class MoreSlider extends TrackedElement {
+    baseHost: string;
+    config: IATopNavConfig;
+    menuItems: IATopNavLink[];
+    render(): import("lit").TemplateResult<1>;
+    analyticsEvent(title: string): string;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-topnav-more-slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-more-slider.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-more-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAIhD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAIxD,qBACa,UAAW,SAAQ,cAAc;IAChB,QAAQ,SAAM;IACd,MAAM,EAAE,cAAc,CAAuB;IAC9C,SAAS,EAAE,YAAY,EAAE,CAAM;IAE1D,MAAM;IAoBN,cAAc,CAAC,KAAK,EAAE,MAAM;IAI5B,MAAM,KAAK,MAAM,IAAI,cAAc,CAiBlC;CACF"}

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

@@ -0,0 +1,65 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import TrackedElement from './tracked-element.js';
+import { formatUrl, toSentenceCase } from './lib/helpers.js';
+import { defaultTopNavConfig } from './data/menus.js';
+import themeStyles from '../../themes/theme-styles.js';
+let MoreSlider = class MoreSlider extends TrackedElement {
+    constructor() {
+        super(...arguments);
+        this.baseHost = '';
+        this.config = defaultTopNavConfig;
+        this.menuItems = [];
+    }
+    render() {
+        return html `
+      <ul>
+        ${this.menuItems.map((item) => html `<li>
+              <a
+                @click=${this.trackClick}
+                href=${formatUrl(item.url, this.baseHost)}
+                data-event-click-tracking="${this.analyticsEvent(item.key ?? item.title)}"
+                >${item.title}</a
+              >
+            </li>`)}
+      </ul>
+    `;
+    }
+    analyticsEvent(title) {
+        return `${this.config.eventCategory}|NavMore${toSentenceCase(title)}`;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        ul {
+          padding: 0;
+          margin: -1rem 0 0 0;
+          list-style: none;
+        }
+        a {
+          display: block;
+          padding: 1rem 0;
+          text-decoration: none;
+          color: var(--activeColor);
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], MoreSlider.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: Object })
+], MoreSlider.prototype, "config", void 0);
+__decorate([
+    property({ type: Array })
+], MoreSlider.prototype, "menuItems", void 0);
+MoreSlider = __decorate([
+    customElement('ia-topnav-more-slider')
+], MoreSlider);
+export { MoreSlider };
+//# sourceMappingURL=ia-topnav-more-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-more-slider.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-more-slider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAG5C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,cAAc;IAAvC;;QACuB,aAAQ,GAAG,EAAE,CAAC;QACd,WAAM,GAAmB,mBAAmB,CAAC;QAC9C,cAAS,GAAmB,EAAE,CAAC;IA4C5D,CAAC;IA1CC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAA;;yBAES,IAAI,CAAC,UAAU;uBACjB,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC;6CACZ,IAAI,CAAC,cAAc,CAC9C,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CACvB;mBACE,IAAI,CAAC,KAAK;;kBAEX,CACT;;KAEJ,CAAC;IACJ,CAAC;IAED,cAAc,CAAC,KAAa;QAC1B,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,WAAW,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACxE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;OAYF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA9C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA8C;AAC9C;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAAgC;AAH/C,UAAU;IADtB,aAAa,CAAC,uBAAuB,CAAC;GAC1B,UAAU,CA+CtB","sourcesContent":["import { CSSResultGroup, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport TrackedElement from './tracked-element';\nimport { formatUrl, toSentenceCase } from './lib/helpers';\nimport { IATopNavConfig, IATopNavLink } from './models';\nimport { defaultTopNavConfig } from './data/menus';\nimport themeStyles from '@src/themes/theme-styles';\n\n@customElement('ia-topnav-more-slider')\nexport class MoreSlider extends TrackedElement {\n  @property({ type: String }) baseHost = '';\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: Array }) menuItems: IATopNavLink[] = [];\n\n  render() {\n    return html`\n      <ul>\n        ${this.menuItems.map(\n          (item) =>\n            html`<li>\n              <a\n                @click=${this.trackClick}\n                href=${formatUrl(item.url, this.baseHost)}\n                data-event-click-tracking=\"${this.analyticsEvent(\n                  item.key ?? item.title,\n                )}\"\n                >${item.title}</a\n              >\n            </li>`,\n        )}\n      </ul>\n    `;\n  }\n\n  analyticsEvent(title: string) {\n    return `${this.config.eventCategory}|NavMore${toSentenceCase(title)}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        ul {\n          padding: 0;\n          margin: -1rem 0 0 0;\n          list-style: none;\n        }\n        a {\n          display: block;\n          padding: 1rem 0;\n          text-decoration: none;\n          color: var(--activeColor);\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,53 @@
+import { CSSResultGroup, PropertyValues, nothing } from 'lit';
+import TrackedElement from './tracked-element.js';
+import './ia-topnav-icon-hamburger.js';
+import './ia-topnav-login-button.js';
+import './ia-topnav-media-menu.js';
+import '../../elements/ia-sr-only-text/ia-sr-only-text.js';
+import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models.js';
+export declare class PrimaryNav extends TrackedElement {
+    mediaBaseHost: string;
+    baseHost: string;
+    hideSearch: boolean;
+    config: IATopNavConfig;
+    openMenu: string;
+    screenName: string;
+    secondIdentitySlotMode: IATopNavSecondIdentitySlotMode;
+    selectedMenuOption: string;
+    signedOutMenuOpen: boolean;
+    userMenuOpen: boolean;
+    mediaMenuAnimate: boolean;
+    username: string;
+    userProfileImagePath: string;
+    currentTab: {
+        mediatype: string;
+        moveTo: string;
+    } | undefined;
+    signedOutMenuToggled: unknown;
+    private userMenuButton?;
+    private loginButton?;
+    updated(props: PropertyValues): typeof nothing | undefined;
+    render(): import("lit").TemplateResult<1>;
+    /** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */
+    getAccountDropdownOffset(): number;
+    toggleMediaMenu(e: Event): void;
+    toggleSearchMenu(e: Event): void;
+    toggleUserMenu(e: Event): void;
+    get userIcon(): import("lit").TemplateResult<1>;
+    get loginIcon(): import("lit").TemplateResult<1>;
+    get searchMenuOpen(): boolean;
+    get allowSecondaryIcon(): boolean;
+    /**
+     * The search slot container, rendered between ia-topnav-media-menu and
+     * right-side-section so it sits left of the Upload button on desktop.
+     */
+    get searchSlotContainer(): import("lit").TemplateResult<1> | typeof nothing;
+    get searchMenu(): import("lit").TemplateResult<1> | typeof nothing;
+    get mobileDonateHeart(): import("lit").TemplateResult<1>;
+    get uploadButtonTemplate(): import("lit").TemplateResult<1>;
+    get userStateTemplate(): import("lit").TemplateResult<1>;
+    get secondLogoSlot(): import("lit").TemplateResult<1> | typeof nothing;
+    get secondLogoClass(): "" | "second-logo";
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-topnav-primary-nav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-primary-nav.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-primary-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AACzE,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAElC,OAAO,wBAAwB,CAAC;AAChC,OAAO,+CAA+C,CAAC;AAKvD,OAAO,EACL,cAAc,EACd,8BAA8B,EAE/B,MAAM,UAAU,CAAC;AAKlB,qBAEa,UAAW,SAAQ,cAAc;IAChB,aAAa,SAAyB;IACtC,QAAQ,SAAM;IACb,UAAU,UAAS;IACpB,MAAM,EAAE,cAAc,CAAuB;IAC7C,QAAQ,SAAM;IACd,UAAU,SAAM;IAE5C,sBAAsB,EAAE,8BAA8B,CAAM;IAChC,kBAAkB,SAAM;IACvB,iBAAiB,UAAS;IAC1B,YAAY,UAAS;IACrB,gBAAgB,UAAS;IAC1B,QAAQ,SAAM;IACd,oBAAoB,SAAM;IAC1B,UAAU,EAClC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GACrC,SAAS,CAAC;IACd,oBAAoB,EAAE,OAAO,CAAC;IAEH,OAAO,CAAC,cAAc,CAAC,CAAoB;IACrC,OAAO,CAAC,WAAW,CAAC,CAAc;IAEnE,OAAO,CAAC,KAAK,EAAE,cAAc;IAoD7B,MAAM;IA2CN,qGAAqG;IACrG,wBAAwB,IAAI,MAAM;IAkBlC,eAAe,CAAC,CAAC,EAAE,KAAK;IAWxB,gBAAgB,CAAC,CAAC,EAAE,KAAK;IAWzB,cAAc,CAAC,CAAC,EAAE,KAAK;IAWvB,IAAI,QAAQ,oCAqBX;IAED,IAAI,SAAS,oCAUZ;IAED,IAAI,cAAc,YAEjB;IAED,IAAI,kBAAkB,YAErB;IAED;;;OAGG;IACH,IAAI,mBAAmB,qDAOtB;IAED,IAAI,UAAU,qDAYb;IAED,IAAI,iBAAiB,oCAapB;IAED,IAAI,oBAAoB,oCASvB;IAED,IAAI,iBAAiB,oCAIpB;IAED,IAAI,cAAc,qDAOjB;IAED,IAAI,eAAe,uBAElB;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAuVlC;CACF"}