@internetarchive/ia-topnav 1.3.8 → 1.3.10-webdev-7394.0

package/dist/src/login-button.d.ts

@@ -0,0 +1,16 @@
+import TrackedElement from './tracked-element';
+import { IATopNavConfig } from './models';
+export declare class LoginButton extends TrackedElement {
+    baseHost: string;
+    config: IATopNavConfig;
+    openMenu: string;
+    private dropdownTabIndex;
+    static get styles(): import("lit").CSSResult;
+    get signupPath(): string;
+    get loginPath(): string;
+    get analyticsEvent(): string;
+    get menuOpened(): boolean;
+    get avatarClass(): string;
+    toggleDropdown(e: Event): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/login-button.js

@@ -0,0 +1,83 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import TrackedElement from './tracked-element';
+import icons from './assets/img/icons';
+import loginButtonCSS from './styles/login-button';
+import formatUrl from './lib/formatUrl';
+import { customElement, property, state } from 'lit/decorators.js';
+import { defaultTopNavConfig } from './data/menus';
+let LoginButton = class LoginButton extends TrackedElement {
+    constructor() {
+        super(...arguments);
+        this.baseHost = '';
+        this.config = defaultTopNavConfig;
+        this.openMenu = '';
+        this.dropdownTabIndex = '';
+    }
+    static get styles() {
+        return loginButtonCSS;
+    }
+    get signupPath() {
+        return formatUrl('/account/signup', this.baseHost);
+    }
+    get loginPath() {
+        return formatUrl('/account/login', this.baseHost);
+    }
+    get analyticsEvent() {
+        var _a;
+        return `${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavLoginIcon`;
+    }
+    get menuOpened() {
+        return this.openMenu === 'login';
+    }
+    get avatarClass() {
+        return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
+    }
+    toggleDropdown(e) {
+        e.preventDefault();
+        this.trackClick(e);
+        this.dropdownTabIndex = this.menuOpened ? '' : '-1';
+        this.dispatchEvent(new CustomEvent('menuToggled', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                menuName: 'login',
+            },
+        }));
+    }
+    render() {
+        return html `
+      <div class="logged-out-toolbar">
+        <a
+          class="${this.avatarClass}"
+          @click=${this.toggleDropdown}
+          data-event-click-tracking="${this.analyticsEvent}"
+        >
+          ${icons.user}
+        </a>
+        <span>
+          <a href="${this.signupPath}">Sign up</a>
+          |
+          <a href="${this.loginPath}">Log in</a>
+        </span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], LoginButton.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: Object })
+], LoginButton.prototype, "config", void 0);
+__decorate([
+    property({ type: String })
+], LoginButton.prototype, "openMenu", void 0);
+__decorate([
+    state()
+], LoginButton.prototype, "dropdownTabIndex", void 0);
+LoginButton = __decorate([
+    customElement('login-button')
+], LoginButton);
+export { LoginButton };
+//# sourceMappingURL=login-button.js.map

package/dist/src/login-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../src/login-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG5C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACuB,aAAQ,GAAG,EAAE,CAAC;QACd,WAAM,GAAmB,mBAAmB,CAAC;QAC7C,aAAQ,GAAG,EAAE,CAAC;QAEzB,qBAAgB,GAAG,EAAE,CAAC;IA2DzC,CAAC;IAzDC,MAAM,KAAK,MAAM;QACf,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,SAAS,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,SAAS;QACX,OAAO,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpD,CAAC;IAED,IAAI,cAAc;;QAChB,OAAO,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,eAAe,CAAC;IACtD,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;IACnC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,kBAAkB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9D,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,OAAO;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,cAAc;uCACC,IAAI,CAAC,cAAc;;YAE9C,KAAK,CAAC,IAAI;;;qBAGD,IAAI,CAAC,UAAU;;qBAEf,IAAI,CAAC,SAAS;;;KAG9B,CAAC;IACJ,CAAC;CACF,CAAA;AA/D6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAA8C;AAC7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEzB;IAAhB,KAAK,EAAE;qDAA+B;AAL5B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAgEvB","sourcesContent":["import { html } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport loginButtonCSS from './styles/login-button';\nimport formatUrl from './lib/formatUrl';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { IATopNavConfig } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('login-button')\nexport class LoginButton extends TrackedElement {\n  @property({ type: String }) baseHost = '';\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) openMenu = '';\n\n  @state() private dropdownTabIndex = '';\n\n  static get styles() {\n    return loginButtonCSS;\n  }\n\n  get signupPath() {\n    return formatUrl('/account/signup', this.baseHost);\n  }\n\n  get loginPath() {\n    return formatUrl('/account/login', this.baseHost);\n  }\n\n  get analyticsEvent() {\n    return `${this.config?.eventCategory}|NavLoginIcon`;\n  }\n\n  get menuOpened() {\n    return this.openMenu === 'login';\n  }\n\n  get avatarClass() {\n    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;\n  }\n\n  toggleDropdown(e: Event) {\n    e.preventDefault();\n    this.trackClick(e);\n    this.dropdownTabIndex = this.menuOpened ? '' : '-1';\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          menuName: 'login',\n        },\n      }),\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"logged-out-toolbar\">\n        <a\n          class=\"${this.avatarClass}\"\n          @click=${this.toggleDropdown}\n          data-event-click-tracking=\"${this.analyticsEvent}\"\n        >\n          ${icons.user}\n        </a>\n        <span>\n          <a href=\"${this.signupPath}\">Sign up</a>\n          |\n          <a href=\"${this.loginPath}\">Log in</a>\n        </span>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/media-button.d.ts

@@ -0,0 +1,24 @@
+import { TemplateResult } from 'lit';
+import TrackedElement from './tracked-element';
+import { IATopNavConfig } from './models';
+export declare class MediaButton extends TrackedElement {
+    config: IATopNavConfig;
+    icon: string;
+    href: string;
+    label: string;
+    mediatype: string;
+    openMenu: string;
+    selected: boolean;
+    followable: boolean;
+    static get styles(): import("lit").CSSResult;
+    static get icons(): Record<string, TemplateResult>;
+    onClick(e: Event): void;
+    dispatchMenuToggledEvent(): void;
+    dispatchMediaTypeSelectedEvent(): void;
+    get buttonClass(): "" | "selected";
+    get tooltipPrefix(): "Collapse" | "Expand";
+    get iconClass(): "" | "active";
+    get analyticsEvent(): string;
+    get menuItem(): TemplateResult<1>;
+    render(): TemplateResult<1>;
+}

package/dist/src/media-button.js

@@ -0,0 +1,119 @@
+var MediaButton_1;
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import TrackedElement from './tracked-element';
+import icons from './assets/img/icons';
+import toSentenceCase from './lib/toSentenceCase';
+import mediaButtonCSS from './styles/media-button';
+import { customElement, property } from 'lit/decorators.js';
+import { defaultTopNavConfig } from './data/menus';
+let MediaButton = MediaButton_1 = class MediaButton extends TrackedElement {
+    constructor() {
+        super(...arguments);
+        this.config = defaultTopNavConfig;
+        this.icon = '';
+        this.href = '';
+        this.label = '';
+        this.mediatype = '';
+        this.openMenu = '';
+        this.selected = false;
+        this.followable = false;
+    }
+    static get styles() {
+        return mediaButtonCSS;
+    }
+    static get icons() {
+        return icons;
+    }
+    onClick(e) {
+        this.trackClick(e);
+        e.preventDefault();
+        // On desktop viewport widths, the media subnav is always visible. To
+        // ensure the media subnav is open on mobile if the viewport is
+        // resized, the openMenu needs to be set to 'media'.
+        if (this.openMenu !== 'media') {
+            this.dispatchMenuToggledEvent();
+        }
+        this.dispatchMediaTypeSelectedEvent();
+    }
+    dispatchMenuToggledEvent() {
+        this.dispatchEvent(new CustomEvent('menuToggled', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                menuName: 'media',
+            },
+        }));
+    }
+    dispatchMediaTypeSelectedEvent() {
+        this.dispatchEvent(new CustomEvent('mediaTypeSelected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                mediatype: this.mediatype,
+            },
+        }));
+    }
+    get buttonClass() {
+        return this.selected ? 'selected' : '';
+    }
+    get tooltipPrefix() {
+        return this.selected ? 'Collapse' : 'Expand';
+    }
+    get iconClass() {
+        return this.selected ? 'active' : '';
+    }
+    get analyticsEvent() {
+        return `${this.config.eventCategory}|NavMenu${toSentenceCase(this.mediatype)}`;
+    }
+    get menuItem() {
+        return html `
+      <span class="icon ${this.iconClass}">
+        ${MediaButton_1.icons[this.icon]}
+      </span>
+      <span class="label">${this.label}</span>
+    `;
+    }
+    render() {
+        return html `
+      <a
+        href="${this.href}"
+        class="menu-item ${this.mediatype} ${this.buttonClass}"
+        @click=${this.followable ? this.trackClick : this.onClick}
+        data-event-click-tracking="${this.analyticsEvent}"
+        title="${this.tooltipPrefix} ${this.mediatype} menu"
+      >
+        ${this.menuItem}
+      </a>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], MediaButton.prototype, "config", void 0);
+__decorate([
+    property({ type: String })
+], MediaButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], MediaButton.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], MediaButton.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], MediaButton.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: String })
+], MediaButton.prototype, "openMenu", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaButton.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaButton.prototype, "followable", void 0);
+MediaButton = MediaButton_1 = __decorate([
+    customElement('media-button')
+], MediaButton);
+export { MediaButton };
+//# sourceMappingURL=media-button.js.map

package/dist/src/media-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-button.js","sourceRoot":"","sources":["../../src/media-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport toSentenceCase from './lib/toSentenceCase';\nimport mediaButtonCSS from './styles/media-button';\nimport { customElement, property } from 'lit/decorators.js';\nimport { IATopNavConfig } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('media-button')\nexport class MediaButton extends TrackedElement {\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) icon = '';\n  @property({ type: String }) href = '';\n  @property({ type: String }) label = '';\n  @property({ type: String }) mediatype = '';\n  @property({ type: String }) openMenu = '';\n  @property({ type: Boolean }) selected = false;\n  @property({ type: Boolean }) followable = false;\n\n  static get styles() {\n    return mediaButtonCSS;\n  }\n\n  static get icons(): Record<string, TemplateResult> {\n    return icons;\n  }\n\n  onClick(e: Event) {\n    this.trackClick(e);\n    e.preventDefault();\n    // On desktop viewport widths, the media subnav is always visible. To\n    // ensure the media subnav is open on mobile if the viewport is\n    // resized, the openMenu needs to be set to 'media'.\n    if (this.openMenu !== 'media') {\n      this.dispatchMenuToggledEvent();\n    }\n    this.dispatchMediaTypeSelectedEvent();\n  }\n\n  dispatchMenuToggledEvent() {\n    this.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          menuName: 'media',\n        },\n      }),\n    );\n  }\n\n  dispatchMediaTypeSelectedEvent() {\n    this.dispatchEvent(\n      new CustomEvent('mediaTypeSelected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          mediatype: this.mediatype,\n        },\n      }),\n    );\n  }\n\n  get buttonClass() {\n    return this.selected ? 'selected' : '';\n  }\n\n  get tooltipPrefix() {\n    return this.selected ? 'Collapse' : 'Expand';\n  }\n\n  get iconClass() {\n    return this.selected ? 'active' : '';\n  }\n\n  get analyticsEvent() {\n    return `${this.config.eventCategory}|NavMenu${toSentenceCase(this.mediatype)}`;\n  }\n\n  get menuItem() {\n    return html`\n      <span class=\"icon ${this.iconClass}\">\n        ${MediaButton.icons[this.icon]}\n      </span>\n      <span class=\"label\">${this.label}</span>\n    `;\n  }\n\n  render() {\n    return html`\n      <a\n        href=\"${this.href}\"\n        class=\"menu-item ${this.mediatype} ${this.buttonClass}\"\n        @click=${this.followable ? this.trackClick : this.onClick}\n        data-event-click-tracking=\"${this.analyticsEvent}\"\n        title=\"${this.tooltipPrefix} ${this.mediatype} menu\"\n      >\n        ${this.menuItem}\n      </a>\n    `;\n  }\n}\n"]}

package/dist/src/media-menu.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, PropertyValues } from 'lit';
+import './media-button';
+import { MediaButton } from './media-button';
+import { IATopNavConfig } from './models';
+export declare class MediaMenu extends LitElement {
+    baseHost: string;
+    config: IATopNavConfig;
+    openMenu: string;
+    selectedMenuOption: string;
+    currentTab: {
+        moveTo: string;
+    } | undefined;
+    mediaButtons?: MediaButton[];
+    static get styles(): import("lit").CSSResult;
+    updated(props: PropertyValues): void;
+    get mediaMenuOptionsTemplate(): import("lit").TemplateResult<1>[];
+    get menuOpened(): boolean;
+    get menuClass(): "closed" | "open";
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/media-menu.js

@@ -0,0 +1,148 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, queryAll } from 'lit/decorators.js';
+import { defaultTopNavConfig } from './data/menus';
+import formatUrl from './lib/formatUrl';
+import './media-button';
+import mediaMenuCSS from './styles/media-menu';
+const menuSelection = [
+    {
+        icon: 'web',
+        menu: 'web',
+        href: 'https://web.archive.org',
+        label: 'Wayback Machine',
+    },
+    {
+        icon: 'texts',
+        menu: 'texts',
+        href: '/details/texts',
+        label: 'Texts',
+    },
+    {
+        icon: 'video',
+        menu: 'video',
+        href: '/details/movies',
+        label: 'Video',
+    },
+    {
+        icon: 'audio',
+        menu: 'audio',
+        href: '/details/audio',
+        label: 'Audio',
+    },
+    {
+        icon: 'software',
+        menu: 'software',
+        href: '/details/software',
+        label: 'Software',
+    },
+    {
+        icon: 'images',
+        menu: 'images',
+        href: '/details/image',
+        label: 'Images',
+    },
+    {
+        icon: 'donate',
+        menu: 'donate',
+        href: '/donate/',
+        label: 'Donate',
+        followable: true,
+    },
+    {
+        icon: 'ellipses',
+        menu: 'more',
+        href: '/about/',
+        label: 'More',
+    },
+];
+let MediaMenu = class MediaMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.baseHost = '';
+        this.config = defaultTopNavConfig;
+        this.openMenu = '';
+        this.selectedMenuOption = '';
+    }
+    static get styles() {
+        return mediaMenuCSS;
+    }
+    updated(props) {
+        var _a;
+        if (props.has('currentTab')) {
+            const mediaButtons = Array.from((_a = this.mediaButtons) !== null && _a !== void 0 ? _a : []);
+            mediaButtons.map((button, index) => {
+                var _a, _b, _c, _d;
+                const linkItem = (_a = button.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a.menu-item');
+                if (linkItem) {
+                    if (linkItem.classList.contains(`${this.selectedMenuOption}`)) {
+                        linkItem.classList.remove('selected');
+                        linkItem.blur();
+                        const newFocusIndex = ((_b = this.currentTab) === null || _b === void 0 ? void 0 : _b.moveTo) === 'next' ? index + 1 : index - 1;
+                        ((_d = (_c = mediaButtons[newFocusIndex]) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a.menu-item')).focus();
+                    }
+                }
+            });
+        }
+    }
+    get mediaMenuOptionsTemplate() {
+        const buttons = menuSelection.map(({ icon, menu, label, href, followable }) => {
+            const selected = this.selectedMenuOption === menu;
+            return html `
+          <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}"
+          ></media-button>
+        `;
+        });
+        return buttons;
+    }
+    get menuOpened() {
+        return this.openMenu === 'media';
+    }
+    get menuClass() {
+        return this.menuOpened ? 'open' : 'closed';
+    }
+    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>
+    `;
+    }
+};
+__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('media-button')
+], MediaMenu.prototype, "mediaButtons", void 0);
+MediaMenu = __decorate([
+    customElement('media-menu')
+], MediaMenu);
+export { MediaMenu };
+//# sourceMappingURL=media-menu.js.map

package/dist/src/media-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-menu.js","sourceRoot":"","sources":["../../src/media-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html } from 'lit';\nimport { customElement, property, queryAll } from 'lit/decorators.js';\n\nimport { defaultTopNavConfig } from './data/menus';\nimport formatUrl from './lib/formatUrl';\nimport './media-button';\nimport { MediaButton } from './media-button';\nimport { IATopNavConfig } from './models';\nimport mediaMenuCSS from './styles/media-menu';\n\nconst menuSelection = [\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: 'Texts',\n  },\n  {\n    icon: 'video',\n    menu: 'video',\n    href: '/details/movies',\n    label: 'Video',\n  },\n  {\n    icon: 'audio',\n    menu: 'audio',\n    href: '/details/audio',\n    label: 'Audio',\n  },\n  {\n    icon: 'software',\n    menu: 'software',\n    href: '/details/software',\n    label: 'Software',\n  },\n  {\n    icon: 'images',\n    menu: 'images',\n    href: '/details/image',\n    label: 'Images',\n  },\n  {\n    icon: 'donate',\n    menu: 'donate',\n    href: '/donate/',\n    label: 'Donate',\n    followable: true,\n  },\n  {\n    icon: 'ellipses',\n    menu: 'more',\n    href: '/about/',\n    label: 'More',\n  },\n];\n\n@customElement('media-menu')\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('media-button') mediaButtons?: MediaButton[];\n\n  static get styles() {\n    return mediaMenuCSS;\n  }\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  get mediaMenuOptionsTemplate() {\n    const buttons = menuSelection.map(\n      ({ icon, menu, label, href, followable }) => {\n        const selected = this.selectedMenuOption === menu;\n        return html`\n          <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          ></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  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"]}

package/dist/src/media-slider.d.ts

@@ -0,0 +1,15 @@
+import { LitElement, PropertyValues } from 'lit';
+import './media-subnav';
+import { IATopNavConfig, IATopNavMenuConfig } from './models';
+export declare class MediaSlider extends LitElement {
+    baseHost: string;
+    config: IATopNavConfig;
+    mediaSliderOpen: boolean;
+    menus: IATopNavMenuConfig;
+    selectedMenuOption: string;
+    private previousKeydownListener;
+    static get styles(): import("lit").CSSResult;
+    updated(props: PropertyValues): void;
+    shouldUpdate(): boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/media-slider.js

@@ -0,0 +1,139 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import './media-subnav';
+import mediaSliderCSS from './styles/media-slider';
+import KeyboardNavigation from './lib/keyboard-navigation';
+import { customElement, property } from 'lit/decorators.js';
+import { buildTopNavMenus, defaultTopNavConfig } from './data/menus';
+let MediaSlider = class MediaSlider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.baseHost = '';
+        this.config = defaultTopNavConfig;
+        this.mediaSliderOpen = false;
+        this.menus = buildTopNavMenus();
+        this.selectedMenuOption = 'texts';
+    }
+    static get styles() {
+        return mediaSliderCSS;
+    }
+    updated(props) {
+        var _a;
+        if (props.has('selectedMenuOption') && this.selectedMenuOption) {
+            const container = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.has-focused'); //?.shadowRoot;
+            if (container) {
+                const keyboardNavigation = new KeyboardNavigation(container, this.selectedMenuOption);
+                this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+                if (this.previousKeydownListener) {
+                    this.removeEventListener('keydown', this.previousKeydownListener);
+                }
+                this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+            }
+        }
+    }
+    shouldUpdate() {
+        const scrollPane = this.shadowRoot
+            ? this.shadowRoot.querySelector('.information-menu')
+            : null;
+        if (scrollPane) {
+            scrollPane.scrollTop = 0;
+        }
+        return true;
+    }
+    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">
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'audio'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="audio"
+                .menuItems=${this.menus.audio}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'images'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="images"
+                .menuItems=${this.menus.images}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'software'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="software"
+                .menuItems=${this.menus.software}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'texts'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="texts"
+                .menuItems=${this.menus.texts}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'video'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="video"
+                .menuItems=${this.menus.video}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'web'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="web"
+                .menuItems=${this.menus.web}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'more'
+            ? 'has-focused'
+            : 'hidden'}"
+                menu="more"
+                .menuItems=${this.menus.web}
+              ></media-subnav>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__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('media-slider')
+], MediaSlider);
+export { MediaSlider };
+//# sourceMappingURL=media-slider.js.map

package/dist/src/media-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-slider.js","sourceRoot":"","sources":["../../src/media-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html } from 'lit';\nimport './media-subnav';\nimport mediaSliderCSS from './styles/media-slider';\nimport KeyboardNavigation from './lib/keyboard-navigation';\nimport { customElement, property } from 'lit/decorators.js';\nimport { IATopNavConfig, IATopNavMenuConfig } from './models';\nimport { buildTopNavMenus, defaultTopNavConfig } from './data/menus';\n\n@customElement('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  static get styles() {\n    return mediaSliderCSS;\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('selectedMenuOption') && this.selectedMenuOption) {\n      const container = this.shadowRoot?.querySelector('.has-focused'); //?.shadowRoot;\n\n      if (container) {\n        const keyboardNavigation = new KeyboardNavigation(\n          container as HTMLElement,\n          this.selectedMenuOption,\n        );\n        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);\n        if (this.previousKeydownListener) {\n          this.removeEventListener('keydown', this.previousKeydownListener);\n        }\n        this.previousKeydownListener = keyboardNavigation.handleKeyDown;\n      }\n    }\n  }\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  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              <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              ></media-subnav>\n              <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              ></media-subnav>\n              <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              ></media-subnav>\n              <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              ></media-subnav>\n              <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              ></media-subnav>\n              <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              ></media-subnav>\n              <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.web}\n              ></media-subnav>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/media-subnav.d.ts

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