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

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

@@ -0,0 +1,222 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { property, queryAll } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import { defaultTopNavConfig } from './data/menus.js';
+import { formatUrl } from './lib/helpers.js';
+import './ia-topnav-media-button.js';
+import { TOPNAV_MOBILE_BREAKPOINT } from './models.js';
+import themeStyles from '../../themes/theme-styles.js';
+import { localized, msg } from '@lit/localize';
+/**
+ * The top-level media buttons. A function so the labels are read in the
+ * current locale each time the menu renders.
+ */
+function menuSelection() {
+    return [
+        {
+            icon: 'web',
+            menu: 'web',
+            href: 'https://web.archive.org',
+            label: 'Wayback Machine',
+        },
+        {
+            icon: 'texts',
+            menu: 'texts',
+            href: '/details/texts',
+            label: msg('Texts'),
+        },
+        {
+            icon: 'video',
+            menu: 'video',
+            href: '/details/movies',
+            label: msg('Video'),
+        },
+        {
+            icon: 'audio',
+            menu: 'audio',
+            href: '/details/audio',
+            label: msg('Audio'),
+        },
+        {
+            icon: 'software',
+            menu: 'software',
+            href: '/details/software',
+            label: msg('Software'),
+        },
+        {
+            icon: 'images',
+            menu: 'images',
+            href: '/details/image',
+            label: msg('Images'),
+        },
+        {
+            icon: 'donate',
+            menu: 'donate',
+            href: '/donate/?origin=iawww-mbhmbgrmenu',
+            label: msg('Donate'),
+            followable: true,
+        },
+        {
+            icon: 'ellipses',
+            menu: 'more',
+            href: '/about/',
+            label: msg('More'),
+        },
+    ];
+}
+let MediaMenu = class MediaMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.baseHost = '';
+        this.config = defaultTopNavConfig;
+        this.openMenu = '';
+        this.selectedMenuOption = '';
+    }
+    updated(props) {
+        if (props.has('currentTab')) {
+            const mediaButtons = Array.from(this.mediaButtons ?? []);
+            mediaButtons.map((button, index) => {
+                const linkItem = button.shadowRoot?.querySelector('a.menu-item');
+                if (linkItem) {
+                    if (linkItem.classList.contains(`${this.selectedMenuOption}`)) {
+                        linkItem.classList.remove('selected');
+                        linkItem.blur();
+                        const newFocusIndex = this.currentTab?.moveTo === 'next' ? index + 1 : index - 1;
+                        (mediaButtons[newFocusIndex]?.shadowRoot?.querySelector('a.menu-item')).focus();
+                    }
+                }
+            });
+        }
+    }
+    render() {
+        return html `
+      <div class="media-menu-container ${this.menuClass}">
+        <div class="overflow-clip">
+          <nav class="media-menu-inner" aria-expanded="${this.menuOpened}">
+            <div class="menu-group">${this.mediaMenuOptionsTemplate}</div>
+          </nav>
+        </div>
+      </div>
+    `;
+    }
+    get mediaMenuOptionsTemplate() {
+        const buttons = menuSelection().map(({ icon, menu, label, href, followable }) => {
+            const selected = this.selectedMenuOption === menu;
+            return html `
+          <ia-topnav-media-button
+            .config=${this.config}
+            .icon=${icon}
+            .href=${formatUrl(href, this.baseHost)}
+            ?followable=${followable}
+            .label=${label}
+            .mediatype=${menu}
+            .openMenu=${this.openMenu}
+            .selected=${selected}
+            .selectedMenuOption=${this.selectedMenuOption}
+            data-mediatype="${menu}"
+          ></ia-topnav-media-button>
+        `;
+        });
+        return buttons;
+    }
+    get menuOpened() {
+        return this.openMenu === 'media';
+    }
+    get menuClass() {
+        return this.menuOpened ? 'open' : 'closed';
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          outline: none;
+        }
+
+        .media-menu-inner {
+          z-index: -1;
+          top: -40rem;
+          background-color: var(--mediaMenuBg);
+          margin: 0;
+          overflow: hidden;
+          transition-duration: 0.2s;
+          transition-property: top;
+          transition-timing-function: ease;
+        }
+
+        .menu-group {
+          position: relative;
+          line-height: normal;
+        }
+
+        /* Mobile view styles */
+        @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
+          .media-menu-inner {
+            position: absolute;
+            width: 100%;
+          }
+
+          .open .media-menu-inner {
+            top: 0;
+          }
+
+          .overflow-clip {
+            position: absolute;
+            z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */
+            top: 4rem;
+            left: 0;
+            height: 0;
+            width: 100%;
+            overflow: hidden;
+            transition-duration: 0.2s;
+            transition-property: height;
+          }
+
+          .open .overflow-clip {
+            height: 40rem;
+          }
+        }
+
+        /* Desktop view styles */
+        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+          .media-menu-inner {
+            display: block;
+            position: static;
+            width: auto;
+            height: 5rem;
+            transition-property: none;
+          }
+
+          .menu-group {
+            font-size: 0;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], MediaMenu.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: Object })
+], MediaMenu.prototype, "config", void 0);
+__decorate([
+    property({ type: String })
+], MediaMenu.prototype, "openMenu", void 0);
+__decorate([
+    property({ type: String })
+], MediaMenu.prototype, "selectedMenuOption", void 0);
+__decorate([
+    property({ type: Object })
+], MediaMenu.prototype, "currentTab", void 0);
+__decorate([
+    queryAll('ia-topnav-media-button')
+], MediaMenu.prototype, "mediaButtons", void 0);
+MediaMenu = __decorate([
+    customElement('ia-topnav-media-menu'),
+    localized()
+], MediaMenu);
+export { MediaMenu };
+//# sourceMappingURL=ia-topnav-media-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-media-menu.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-media-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, LitElement, PropertyValues, css, html } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport { defaultTopNavConfig } from './data/menus';\nimport { formatUrl } from './lib/helpers';\nimport './ia-topnav-media-button';\nimport { MediaButton } from './ia-topnav-media-button';\nimport { IATopNavConfig, TOPNAV_MOBILE_BREAKPOINT } from './models';\nimport themeStyles from '@src/themes/theme-styles';\nimport { localized, msg } from '@lit/localize';\n\ntype MediaMenuOption = {\n  icon: string;\n  menu: string;\n  href: string;\n  label: string;\n  followable?: boolean;\n};\n\n/**\n * The top-level media buttons. A function so the labels are read in the\n * current locale each time the menu renders.\n */\nfunction menuSelection(): MediaMenuOption[] {\n  return [\n    {\n      icon: 'web',\n      menu: 'web',\n      href: 'https://web.archive.org',\n      label: 'Wayback Machine',\n    },\n    {\n      icon: 'texts',\n      menu: 'texts',\n      href: '/details/texts',\n      label: msg('Texts'),\n    },\n    {\n      icon: 'video',\n      menu: 'video',\n      href: '/details/movies',\n      label: msg('Video'),\n    },\n    {\n      icon: 'audio',\n      menu: 'audio',\n      href: '/details/audio',\n      label: msg('Audio'),\n    },\n    {\n      icon: 'software',\n      menu: 'software',\n      href: '/details/software',\n      label: msg('Software'),\n    },\n    {\n      icon: 'images',\n      menu: 'images',\n      href: '/details/image',\n      label: msg('Images'),\n    },\n    {\n      icon: 'donate',\n      menu: 'donate',\n      href: '/donate/?origin=iawww-mbhmbgrmenu',\n      label: msg('Donate'),\n      followable: true,\n    },\n    {\n      icon: 'ellipses',\n      menu: 'more',\n      href: '/about/',\n      label: msg('More'),\n    },\n  ];\n}\n\n@customElement('ia-topnav-media-menu')\n@localized()\nexport class MediaMenu extends LitElement {\n  @property({ type: String }) baseHost = '';\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) openMenu = '';\n  @property({ type: String }) selectedMenuOption = '';\n  @property({ type: Object }) currentTab: { moveTo: string } | undefined;\n\n  @queryAll('ia-topnav-media-button') mediaButtons?: MediaButton[];\n\n  updated(props: PropertyValues) {\n    if (props.has('currentTab')) {\n      const mediaButtons = Array.from(this.mediaButtons ?? []);\n\n      mediaButtons.map((button, index) => {\n        const linkItem = button.shadowRoot?.querySelector('a.menu-item');\n        if (linkItem) {\n          if (linkItem.classList.contains(`${this.selectedMenuOption}`)) {\n            linkItem.classList.remove('selected');\n            (linkItem as HTMLElement).blur();\n\n            const newFocusIndex =\n              this.currentTab?.moveTo === 'next' ? index + 1 : index - 1;\n            (\n              mediaButtons[newFocusIndex]?.shadowRoot?.querySelector(\n                'a.menu-item',\n              ) as HTMLElement\n            ).focus();\n          }\n        }\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"media-menu-container ${this.menuClass}\">\n        <div class=\"overflow-clip\">\n          <nav class=\"media-menu-inner\" aria-expanded=\"${this.menuOpened}\">\n            <div class=\"menu-group\">${this.mediaMenuOptionsTemplate}</div>\n          </nav>\n        </div>\n      </div>\n    `;\n  }\n\n  get mediaMenuOptionsTemplate() {\n    const buttons = menuSelection().map(\n      ({ icon, menu, label, href, followable }) => {\n        const selected = this.selectedMenuOption === menu;\n        return html`\n          <ia-topnav-media-button\n            .config=${this.config}\n            .icon=${icon}\n            .href=${formatUrl(href as string & Location, this.baseHost)}\n            ?followable=${followable}\n            .label=${label}\n            .mediatype=${menu}\n            .openMenu=${this.openMenu}\n            .selected=${selected}\n            .selectedMenuOption=${this.selectedMenuOption}\n            data-mediatype=\"${menu}\"\n          ></ia-topnav-media-button>\n        `;\n      },\n    );\n    return buttons;\n  }\n\n  get menuOpened() {\n    return this.openMenu === 'media';\n  }\n\n  get menuClass() {\n    return this.menuOpened ? 'open' : 'closed';\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          outline: none;\n        }\n\n        .media-menu-inner {\n          z-index: -1;\n          top: -40rem;\n          background-color: var(--mediaMenuBg);\n          margin: 0;\n          overflow: hidden;\n          transition-duration: 0.2s;\n          transition-property: top;\n          transition-timing-function: ease;\n        }\n\n        .menu-group {\n          position: relative;\n          line-height: normal;\n        }\n\n        /* Mobile view styles */\n        @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {\n          .media-menu-inner {\n            position: absolute;\n            width: 100%;\n          }\n\n          .open .media-menu-inner {\n            top: 0;\n          }\n\n          .overflow-clip {\n            position: absolute;\n            z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */\n            top: 4rem;\n            left: 0;\n            height: 0;\n            width: 100%;\n            overflow: hidden;\n            transition-duration: 0.2s;\n            transition-property: height;\n          }\n\n          .open .overflow-clip {\n            height: 40rem;\n          }\n        }\n\n        /* Desktop view styles */\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          .media-menu-inner {\n            display: block;\n            position: static;\n            width: auto;\n            height: 5rem;\n            transition-property: none;\n          }\n\n          .menu-group {\n            font-size: 0;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,16 @@
+import { CSSResultGroup, LitElement, PropertyValues } from 'lit';
+import './ia-topnav-media-subnav.js';
+import { IATopNavConfig, IATopNavMenuConfig } from './models.js';
+export declare class MediaSlider extends LitElement {
+    baseHost: string;
+    config: IATopNavConfig;
+    mediaSliderOpen: boolean;
+    menus: IATopNavMenuConfig;
+    selectedMenuOption: string;
+    private previousKeydownListener;
+    shouldUpdate(): boolean;
+    updated(props: PropertyValues): void;
+    render(): import("lit").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-topnav-media-slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-media-slider.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-media-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAC5E,OAAO,0BAA0B,CAAC;AAIlC,OAAO,EACL,cAAc,EACd,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAIlB,qBACa,WAAY,SAAQ,UAAU;IACb,QAAQ,SAAM;IACd,MAAM,EAAE,cAAc,CAAuB;IAC5C,eAAe,UAAS;IACzB,KAAK,EAAE,kBAAkB,CAAsB;IAC/C,kBAAkB,SAAW;IAEzD,OAAO,CAAC,uBAAuB,CAC6B;IAE5D,YAAY;IAWZ,OAAO,CAAC,KAAK,EAAE,cAAc;IAmB7B,MAAM;IA8EN,MAAM,KAAK,MAAM,IAAI,cAAc,CAmFlC;CACF"}

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

@@ -0,0 +1,221 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import './ia-topnav-media-subnav.js';
+import KeyboardNavigation from './lib/keyboard-navigation.js';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import { TOPNAV_MOBILE_BREAKPOINT, } from './models.js';
+import { buildTopNavMenus, defaultTopNavConfig } from './data/menus.js';
+import themeStyles from '../../themes/theme-styles.js';
+let MediaSlider = class MediaSlider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.baseHost = '';
+        this.config = defaultTopNavConfig;
+        this.mediaSliderOpen = false;
+        this.menus = buildTopNavMenus();
+        this.selectedMenuOption = 'texts';
+    }
+    shouldUpdate() {
+        const scrollPane = this.shadowRoot
+            ? this.shadowRoot.querySelector('.information-menu')
+            : null;
+        if (scrollPane) {
+            scrollPane.scrollTop = 0;
+        }
+        return true;
+    }
+    updated(props) {
+        if (props.has('selectedMenuOption') && this.selectedMenuOption) {
+            const container = this.shadowRoot?.querySelector('.has-focused')?.shadowRoot;
+            if (container) {
+                const keyboardNavigation = new KeyboardNavigation(container, this.selectedMenuOption);
+                if (this.previousKeydownListener) {
+                    this.removeEventListener('keydown', this.previousKeydownListener);
+                }
+                this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+                this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+            }
+        }
+    }
+    render() {
+        const sliderDetailsClass = this.mediaSliderOpen ? 'open' : 'closed';
+        return html `
+      <div class="media-slider-container">
+        <div class="overflow-clip ${sliderDetailsClass}">
+          <div class="information-menu ${sliderDetailsClass}">
+            <div class="info-box">
+              <ia-topnav-media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'audio'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="audio"
+                .menuItems=${this.menus.audio}
+              ></ia-topnav-media-subnav>
+              <ia-topnav-media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'images'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="images"
+                .menuItems=${this.menus.images}
+              ></ia-topnav-media-subnav>
+              <ia-topnav-media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'software'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="software"
+                .menuItems=${this.menus.software}
+              ></ia-topnav-media-subnav>
+              <ia-topnav-media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'texts'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="texts"
+                .menuItems=${this.menus.texts}
+              ></ia-topnav-media-subnav>
+              <ia-topnav-media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'video'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="video"
+                .menuItems=${this.menus.video}
+              ></ia-topnav-media-subnav>
+              <ia-topnav-media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'web'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="web"
+                .menuItems=${this.menus.web}
+              ></ia-topnav-media-subnav>
+              <ia-topnav-media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'more'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="more"
+                .menuItems=${this.menus.more}
+              ></ia-topnav-media-subnav>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        .media-slider-container {
+          position: relative;
+        }
+
+        .overflow-clip {
+          display: none;
+          position: absolute;
+          top: 0;
+          right: 0;
+          left: 0;
+          height: 0;
+          overflow: hidden;
+          transition: height 0.2s ease;
+        }
+
+        .information-menu {
+          position: absolute;
+          top: 0;
+          right: 0;
+          left: 0;
+          padding: 0;
+          height: 31.9rem;
+          overflow-x: hidden;
+          font-size: 1.4rem;
+          background: var(--mediaSliderBg);
+        }
+
+        .open {
+          display: block;
+        }
+
+        .hidden {
+          display: none;
+        }
+
+        .info-box {
+          padding: 1rem;
+        }
+
+        @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
+          .overflow-clip.open {
+            display: block;
+            height: 35.8rem;
+            left: 4rem;
+            top: 0;
+          }
+        }
+
+        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+          .overflow-clip {
+            display: block;
+          }
+
+          .information-menu {
+            left: 0;
+            z-index: 3;
+            height: auto;
+            min-height: 21rem;
+            background: var(--mediaSliderDesktopBg);
+            transform: translate(0, -100%);
+            transition: transform 0.2s ease;
+          }
+
+          .overflow-clip.open {
+            height: 22rem;
+          }
+
+          .information-menu.open {
+            transform: translate(0, 0);
+          }
+
+          .info-box {
+            max-width: 100rem;
+            padding: 1.5rem 0;
+            margin: 0 auto;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], MediaSlider.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: Object })
+], MediaSlider.prototype, "config", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaSlider.prototype, "mediaSliderOpen", void 0);
+__decorate([
+    property({ type: Object })
+], MediaSlider.prototype, "menus", void 0);
+__decorate([
+    property({ type: String })
+], MediaSlider.prototype, "selectedMenuOption", void 0);
+MediaSlider = __decorate([
+    customElement('ia-topnav-media-slider')
+], MediaSlider);
+export { MediaSlider };
+//# sourceMappingURL=ia-topnav-media-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-media-slider.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-media-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, LitElement, PropertyValues, css, html } from 'lit';\nimport './ia-topnav-media-subnav';\nimport KeyboardNavigation from './lib/keyboard-navigation';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport {\n  IATopNavConfig,\n  IATopNavMenuConfig,\n  TOPNAV_MOBILE_BREAKPOINT,\n} from './models';\nimport { buildTopNavMenus, defaultTopNavConfig } from './data/menus';\nimport themeStyles from '@src/themes/theme-styles';\n\n@customElement('ia-topnav-media-slider')\nexport class MediaSlider extends LitElement {\n  @property({ type: String }) baseHost = '';\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: Boolean }) mediaSliderOpen = false;\n  @property({ type: Object }) menus: IATopNavMenuConfig = buildTopNavMenus();\n  @property({ type: String }) selectedMenuOption = 'texts';\n\n  private previousKeydownListener: // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ((this: HTMLElement, ev: KeyboardEvent) => any) | undefined;\n\n  shouldUpdate() {\n    const scrollPane = this.shadowRoot\n      ? this.shadowRoot.querySelector('.information-menu')\n      : null;\n\n    if (scrollPane) {\n      scrollPane.scrollTop = 0;\n    }\n    return true;\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('selectedMenuOption') && this.selectedMenuOption) {\n      const container =\n        this.shadowRoot?.querySelector('.has-focused')?.shadowRoot;\n      if (container) {\n        const keyboardNavigation = new KeyboardNavigation(\n          container as unknown as HTMLElement,\n          this.selectedMenuOption,\n        );\n\n        if (this.previousKeydownListener) {\n          this.removeEventListener('keydown', this.previousKeydownListener);\n        }\n        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);\n        this.previousKeydownListener = keyboardNavigation.handleKeyDown;\n      }\n    }\n  }\n\n  render() {\n    const sliderDetailsClass = this.mediaSliderOpen ? 'open' : 'closed';\n\n    return html`\n      <div class=\"media-slider-container\">\n        <div class=\"overflow-clip ${sliderDetailsClass}\">\n          <div class=\"information-menu ${sliderDetailsClass}\">\n            <div class=\"info-box\">\n              <ia-topnav-media-subnav\n                .baseHost=${this.baseHost}\n                .config=${this.config}\n                class=\"${this.selectedMenuOption === 'audio'\n                  ? 'has-focused'\n                  : 'hidden'}\"\n                menu=\"audio\"\n                .menuItems=${this.menus.audio}\n              ></ia-topnav-media-subnav>\n              <ia-topnav-media-subnav\n                .baseHost=${this.baseHost}\n                .config=${this.config}\n                class=\"${this.selectedMenuOption === 'images'\n                  ? 'has-focused'\n                  : 'hidden'}\"\n                menu=\"images\"\n                .menuItems=${this.menus.images}\n              ></ia-topnav-media-subnav>\n              <ia-topnav-media-subnav\n                .baseHost=${this.baseHost}\n                .config=${this.config}\n                class=\"${this.selectedMenuOption === 'software'\n                  ? 'has-focused'\n                  : 'hidden'}\"\n                menu=\"software\"\n                .menuItems=${this.menus.software}\n              ></ia-topnav-media-subnav>\n              <ia-topnav-media-subnav\n                .baseHost=${this.baseHost}\n                .config=${this.config}\n                class=\"${this.selectedMenuOption === 'texts'\n                  ? 'has-focused'\n                  : 'hidden'}\"\n                menu=\"texts\"\n                .menuItems=${this.menus.texts}\n              ></ia-topnav-media-subnav>\n              <ia-topnav-media-subnav\n                .baseHost=${this.baseHost}\n                .config=${this.config}\n                class=\"${this.selectedMenuOption === 'video'\n                  ? 'has-focused'\n                  : 'hidden'}\"\n                menu=\"video\"\n                .menuItems=${this.menus.video}\n              ></ia-topnav-media-subnav>\n              <ia-topnav-media-subnav\n                .baseHost=${this.baseHost}\n                .config=${this.config}\n                class=\"${this.selectedMenuOption === 'web'\n                  ? 'has-focused'\n                  : 'hidden'}\"\n                menu=\"web\"\n                .menuItems=${this.menus.web}\n              ></ia-topnav-media-subnav>\n              <ia-topnav-media-subnav\n                .baseHost=${this.baseHost}\n                .config=${this.config}\n                class=\"${this.selectedMenuOption === 'more'\n                  ? 'has-focused'\n                  : 'hidden'}\"\n                menu=\"more\"\n                .menuItems=${this.menus.more}\n              ></ia-topnav-media-subnav>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        .media-slider-container {\n          position: relative;\n        }\n\n        .overflow-clip {\n          display: none;\n          position: absolute;\n          top: 0;\n          right: 0;\n          left: 0;\n          height: 0;\n          overflow: hidden;\n          transition: height 0.2s ease;\n        }\n\n        .information-menu {\n          position: absolute;\n          top: 0;\n          right: 0;\n          left: 0;\n          padding: 0;\n          height: 31.9rem;\n          overflow-x: hidden;\n          font-size: 1.4rem;\n          background: var(--mediaSliderBg);\n        }\n\n        .open {\n          display: block;\n        }\n\n        .hidden {\n          display: none;\n        }\n\n        .info-box {\n          padding: 1rem;\n        }\n\n        @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {\n          .overflow-clip.open {\n            display: block;\n            height: 35.8rem;\n            left: 4rem;\n            top: 0;\n          }\n        }\n\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          .overflow-clip {\n            display: block;\n          }\n\n          .information-menu {\n            left: 0;\n            z-index: 3;\n            height: auto;\n            min-height: 21rem;\n            background: var(--mediaSliderDesktopBg);\n            transform: translate(0, -100%);\n            transition: transform 0.2s ease;\n          }\n\n          .overflow-clip.open {\n            height: 22rem;\n          }\n\n          .information-menu.open {\n            transform: translate(0, 0);\n          }\n\n          .info-box {\n            max-width: 100rem;\n            padding: 1.5rem 0;\n            margin: 0 auto;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { CSSResultGroup } from 'lit';
+import TrackedElement from './tracked-element.js';
+import './ia-topnav-wayback-slider.js';
+import './ia-topnav-more-slider.js';
+import { IATopNavConfig, IATopNavLink, IATopNavMediaMenu } from './models.js';
+export declare class MediaSubnav extends TrackedElement {
+    baseHost: string;
+    config: IATopNavConfig;
+    menu: '' | 'web' | 'more' | 'audio' | 'images' | 'software' | 'texts' | 'video';
+    menuItems: IATopNavMediaMenu;
+    private links;
+    shouldUpdate(): boolean;
+    render(): import("lit").TemplateResult<1>;
+    static get defaultLinks(): IATopNavMediaMenu;
+    analyticsEvent(title: string): string;
+    get iconLinks(): import("lit").TemplateResult<1>[];
+    renderLinks(links: IATopNavLink[]): import("lit").TemplateResult<1>[];
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-topnav-media-subnav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-media-subnav.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-media-subnav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,4BAA4B,CAAC;AACpC,OAAO,yBAAyB,CAAC;AAIjC,OAAO,EACL,cAAc,EACd,YAAY,EACZ,iBAAiB,EAElB,MAAM,UAAU,CAAC;AAMlB,qBAEa,WAAY,SAAQ,cAAc;IACjB,QAAQ,SAAM;IACd,MAAM,EAAE,cAAc,CAAuB;IAC7C,IAAI,EAC5B,EAAE,GACF,KAAK,GACL,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,OAAO,GACP,OAAO,CAAM;IACW,SAAS,EAAE,iBAAiB,CAC7B;IAE3B,OAAO,CAAC,KAAK,CAA+C;IAE5D,YAAY;IAOZ,MAAM;IA8CN,MAAM,KAAK,YAAY,IAAI,iBAAiB,CAU3C;IAED,cAAc,CAAC,KAAK,EAAE,MAAM;IAI5B,IAAI,SAAS,sCAWZ;IAED,WAAW,CAAC,KAAK,EAAE,YAAY,EAAE;IAejC,MAAM,KAAK,MAAM,IAAI,cAAc,CA8JlC;CACF"}