@internetarchive/elements 1.1.5 → 1.1.7-webdev-9378.0

package/dist/src/elements/ia-topnav/ia-topnav-login-button.js

@@ -0,0 +1,183 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import TrackedElement from './tracked-element.js';
+import icons from './assets/img/icons.js';
+import { formatUrl, makeBooleanString } from './lib/helpers.js';
+import { property, query } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import { TOPNAV_MOBILE_BREAKPOINT } from './models.js';
+import { defaultTopNavConfig } from './data/menus.js';
+import themeStyles from '../../themes/theme-styles.js';
+import { localized, msg } from '@lit/localize';
+let LoginButton = class LoginButton extends TrackedElement {
+    constructor() {
+        super(...arguments);
+        this.baseHost = '';
+        this.config = defaultTopNavConfig;
+        this.openMenu = '';
+    }
+    render() {
+        return html `
+      <div class="logged-out-toolbar">
+        <button
+          class="logged-out-menu ${this.avatarClass}"
+          @click=${this.toggleDropdown}
+          data-event-click-tracking="${this.analyticsEvent}"
+          aria-label=${msg('Toggle login menu')}
+          aria-expanded="${makeBooleanString(this.menuOpened)}"
+        >
+          ${icons.user}
+        </button>
+        <span>
+          <a href="${this.signupPath}">${msg('Sign up')}</a>
+          |
+          <a href="${this.loginPath}">${msg('Log in')}</a>
+        </span>
+      </div>
+    `;
+    }
+    /** Distance (px) from this element's right edge to the right edge of the dropdown toggle icon. */
+    getDropdownToggleOffset() {
+        if (!this.toggleButton)
+            return 0;
+        return (this.getBoundingClientRect().right -
+            this.toggleButton.getBoundingClientRect().right);
+    }
+    get signupPath() {
+        return formatUrl('/signup', this.baseHost);
+    }
+    get loginPath() {
+        return formatUrl('/login', this.baseHost);
+    }
+    get analyticsEvent() {
+        return `${this.config?.eventCategory}|NavLoginIcon`;
+    }
+    get menuOpened() {
+        return this.openMenu === 'login';
+    }
+    get avatarClass() {
+        return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
+    }
+    toggleDropdown(e) {
+        e.preventDefault();
+        this.trackClick(e);
+        this.dispatchEvent(new CustomEvent('menuToggled', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                menuName: 'login',
+            },
+        }));
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        .logged-out-menu {
+          background: inherit;
+          border: none;
+        }
+        .logged-out-menu:focus-visible {
+          outline: none;
+          border: none;
+        }
+        .dropdown-toggle {
+          display: block;
+          text-transform: uppercase;
+          color: var(--grey80);
+          cursor: pointer;
+        }
+
+        .dropdown-toggle svg {
+          height: 100%;
+          width: 4rem;
+        }
+
+        .dropdown-toggle .fill-color {
+          fill: var(--iconFill);
+        }
+
+        .dropdown-toggle:active .fill-color,
+        .dropdown-toggle:focus .fill-color,
+        .dropdown-toggle:hover .fill-color {
+          fill: var(--linkHoverColor);
+        }
+
+        .active {
+          border-radius: 1rem 1rem 0 0;
+          background: var(--activeButtonBg);
+        }
+
+        .active .fill-color {
+          fill: var(--activeColor);
+        }
+
+        span {
+          display: none;
+          font-size: 1.4rem;
+          text-transform: uppercase;
+          color: var(--loginTextColor);
+        }
+
+        span a {
+          color: inherit;
+          text-decoration: none;
+          outline: 0;
+        }
+
+        a:hover,
+        a:active,
+        a:focus {
+          color: var(--linkHoverColor) !important;
+          outline: none !important;
+          outline-offset: inherit !important;
+        }
+
+        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+          .logged-out-toolbar {
+            padding: 1rem 0.5rem;
+            vertical-align: middle;
+          }
+
+          .active {
+            background: transparent;
+          }
+
+          .dropdown-toggle {
+            display: inline-block;
+            vertical-align: middle;
+          }
+
+          .dropdown-toggle svg {
+            height: 3rem;
+            width: 3rem;
+            display: block;
+          }
+
+          span {
+            display: inline;
+            vertical-align: middle;
+          }
+        }
+      `,
+        ];
+    }
+};
+__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([
+    query('button.logged-out-menu')
+], LoginButton.prototype, "toggleButton", void 0);
+LoginButton = __decorate([
+    customElement('ia-topnav-login-button'),
+    localized()
+], LoginButton);
+export { LoginButton };
+//# sourceMappingURL=ia-topnav-login-button.js.map

package/dist/src/elements/ia-topnav/ia-topnav-login-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-login-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-login-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, css, html } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport { formatUrl, makeBooleanString } from './lib/helpers';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { IATopNavConfig, TOPNAV_MOBILE_BREAKPOINT } from './models';\nimport { defaultTopNavConfig } from './data/menus';\nimport themeStyles from '@src/themes/theme-styles';\nimport { localized, msg } from '@lit/localize';\n\n@customElement('ia-topnav-login-button')\n@localized()\nexport class LoginButton extends TrackedElement {\n  @property({ type: String }) baseHost = '';\n  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n  @property({ type: String }) openMenu = '';\n\n  @query('button.logged-out-menu') private toggleButton?: HTMLButtonElement;\n\n  render() {\n    return html`\n      <div class=\"logged-out-toolbar\">\n        <button\n          class=\"logged-out-menu ${this.avatarClass}\"\n          @click=${this.toggleDropdown}\n          data-event-click-tracking=\"${this.analyticsEvent}\"\n          aria-label=${msg('Toggle login menu')}\n          aria-expanded=\"${makeBooleanString(this.menuOpened)}\"\n        >\n          ${icons.user}\n        </button>\n        <span>\n          <a href=\"${this.signupPath}\">${msg('Sign up')}</a>\n          |\n          <a href=\"${this.loginPath}\">${msg('Log in')}</a>\n        </span>\n      </div>\n    `;\n  }\n\n  /** Distance (px) from this element's right edge to the right edge of the dropdown toggle icon. */\n  getDropdownToggleOffset(): number {\n    if (!this.toggleButton) return 0;\n    return (\n      this.getBoundingClientRect().right -\n      this.toggleButton.getBoundingClientRect().right\n    );\n  }\n\n  get signupPath() {\n    return formatUrl('/signup', this.baseHost);\n  }\n\n  get loginPath() {\n    return formatUrl('/login', this.baseHost);\n  }\n\n  get analyticsEvent() {\n    return `${this.config?.eventCategory}|NavLoginIcon`;\n  }\n\n  get menuOpened(): boolean {\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.dispatchEvent(\n      new CustomEvent('menuToggled', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          menuName: 'login',\n        },\n      }),\n    );\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        .logged-out-menu {\n          background: inherit;\n          border: none;\n        }\n        .logged-out-menu:focus-visible {\n          outline: none;\n          border: none;\n        }\n        .dropdown-toggle {\n          display: block;\n          text-transform: uppercase;\n          color: var(--grey80);\n          cursor: pointer;\n        }\n\n        .dropdown-toggle svg {\n          height: 100%;\n          width: 4rem;\n        }\n\n        .dropdown-toggle .fill-color {\n          fill: var(--iconFill);\n        }\n\n        .dropdown-toggle:active .fill-color,\n        .dropdown-toggle:focus .fill-color,\n        .dropdown-toggle:hover .fill-color {\n          fill: var(--linkHoverColor);\n        }\n\n        .active {\n          border-radius: 1rem 1rem 0 0;\n          background: var(--activeButtonBg);\n        }\n\n        .active .fill-color {\n          fill: var(--activeColor);\n        }\n\n        span {\n          display: none;\n          font-size: 1.4rem;\n          text-transform: uppercase;\n          color: var(--loginTextColor);\n        }\n\n        span a {\n          color: inherit;\n          text-decoration: none;\n          outline: 0;\n        }\n\n        a:hover,\n        a:active,\n        a:focus {\n          color: var(--linkHoverColor) !important;\n          outline: none !important;\n          outline-offset: inherit !important;\n        }\n\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          .logged-out-toolbar {\n            padding: 1rem 0.5rem;\n            vertical-align: middle;\n          }\n\n          .active {\n            background: transparent;\n          }\n\n          .dropdown-toggle {\n            display: inline-block;\n            vertical-align: middle;\n          }\n\n          .dropdown-toggle svg {\n            height: 3rem;\n            width: 3rem;\n            display: block;\n          }\n\n          span {\n            display: inline;\n            vertical-align: middle;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,31 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import TrackedElement from './tracked-element.js';
+import { IATopNavConfig } from './models.js';
+export declare class MediaButton extends TrackedElement {
+    config: IATopNavConfig;
+    icon: string;
+    href: string;
+    label: string;
+    mediatype: string;
+    openMenu: string;
+    selected: boolean;
+    followable: boolean;
+    render(): TemplateResult<1>;
+    static get icons(): Record<string, TemplateResult>;
+    onClick(e: Event): void;
+    dispatchMenuToggledEvent(): void;
+    dispatchMediaTypeSelectedEvent(): void;
+    get buttonClass(): "" | "selected";
+    /**
+     * The button's tooltip.
+     *
+     * Each menu has its own whole phrase, so a translator can reword it and
+     * move the menu name freely, and the name shown is a translated one.
+     */
+    get tooltip(): string;
+    get iconClass(): "" | "active";
+    get analyticsEvent(): string;
+    get menuItem(): TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-topnav-media-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-media-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-media-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAChE,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAK/C,OAAO,EAAE,cAAc,EAA4B,MAAM,UAAU,CAAC;AAKpE,qBAEa,WAAY,SAAQ,cAAc;IACjB,MAAM,EAAE,cAAc,CAAuB;IAC7C,IAAI,SAAM;IACV,IAAI,SAAM;IACV,KAAK,SAAM;IACX,SAAS,SAAM;IACf,QAAQ,SAAM;IACb,QAAQ,UAAS;IACjB,UAAU,UAAS;IAEhD,MAAM;IAcN,MAAM,KAAK,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAEjD;IAED,OAAO,CAAC,CAAC,EAAE,KAAK;IAYhB,wBAAwB;IAYxB,8BAA8B;IAY9B,IAAI,WAAW,oBAEd;IAED;;;;;OAKG;IACH,IAAI,OAAO,WA0BV;IAED,IAAI,SAAS,kBAEZ;IAED,IAAI,cAAc,WAEjB;IAED,IAAI,QAAQ,sBAOX;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CA8JlC;CACF"}

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

@@ -0,0 +1,307 @@
+var MediaButton_1;
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import TrackedElement from './tracked-element.js';
+import icons from './assets/img/icons.js';
+import { 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 themeStyles from '../../themes/theme-styles.js';
+import { localized, msg } from '@lit/localize';
+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;
+    }
+    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.tooltip}
+      >
+        ${this.menuItem}
+      </a>
+    `;
+    }
+    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' : '';
+    }
+    /**
+     * The button's tooltip.
+     *
+     * Each menu has its own whole phrase, so a translator can reword it and
+     * move the menu name freely, and the name shown is a translated one.
+     */
+    get tooltip() {
+        const phrases = this.selected
+            ? {
+                web: msg('Collapse web menu'),
+                texts: msg('Collapse texts menu'),
+                video: msg('Collapse video menu'),
+                audio: msg('Collapse audio menu'),
+                software: msg('Collapse software menu'),
+                images: msg('Collapse images menu'),
+                donate: msg('Collapse donate menu'),
+                more: msg('Collapse more menu'),
+            }
+            : {
+                web: msg('Expand web menu'),
+                texts: msg('Expand texts menu'),
+                video: msg('Expand video menu'),
+                audio: msg('Expand audio menu'),
+                software: msg('Expand software menu'),
+                images: msg('Expand images menu'),
+                donate: msg('Expand donate menu'),
+                more: msg('Expand more menu'),
+            };
+        return (phrases[this.mediatype] ??
+            (this.selected ? msg('Collapse menu') : msg('Expand menu')));
+    }
+    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>
+    `;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        a {
+          display: inline-block;
+          text-decoration: none;
+        }
+
+        .menu-item {
+          display: inline-block;
+          width: 100%;
+          padding: 0;
+          font-size: 1.6rem;
+          text-align: left;
+          background: transparent;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        .menu-item:focus {
+          outline: none;
+        }
+
+        .label {
+          display: inline-block;
+          padding: 0;
+          font-weight: 400;
+          color: var(--primaryTextColor);
+          text-align: left;
+          vertical-align: middle;
+        }
+
+        .menu-item > .icon {
+          display: inline-flex;
+          vertical-align: middle;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          -webkit-box-pack: center;
+          -ms-flex-pack: center;
+          justify-content: center;
+        }
+
+        .menu-item > .icon > svg {
+          height: 4rem;
+          width: 4rem;
+        }
+
+        .menu-item.selected .icon {
+          background-color: var(--activeButtonBg);
+          border-radius: 1rem 0 0 1rem;
+        }
+
+        .icon .fill-color {
+          fill: #999;
+        }
+
+        .icon.active .fill-color {
+          fill: #fff;
+        }
+
+        .donate .fill-color {
+          fill: #f00;
+        }
+
+        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+          .menu-item {
+            width: auto;
+            height: 5rem;
+            color: var(--mediaLabelDesktopColor);
+            display: inline-flex;
+          }
+          .menu-item:hover,
+          .menu-item:active,
+          .menu-item:focus {
+            color: var(--linkHoverColor);
+          }
+
+          .menu-item:hover .fill-color,
+          .menu-item:active .fill-color,
+          .menu-item:focus .fill-color {
+            fill: var(--linkHoverColor);
+          }
+
+          .label {
+            display: none;
+          }
+
+          .label,
+          .web:after {
+            padding-right: 1rem;
+            font-size: 1.3rem;
+            text-transform: uppercase;
+            color: inherit;
+          }
+
+          .web:after {
+            display: none;
+            content: 'web';
+          }
+          .donate,
+          .more {
+            display: none;
+          }
+
+          .menu-item.selected {
+            background: var(--activeDesktopMenuIcon);
+          }
+
+          .menu-item.selected .label,
+          .menu-item.selected.web:after {
+            color: var(--linkHoverColor);
+          }
+
+          .menu-item.selected .icon {
+            background: transparent;
+          }
+
+          /* selected state icon colors */
+          .web.selected .fill-color {
+            fill: #ffcd27;
+          }
+
+          .texts.selected .fill-color {
+            fill: #faab3c;
+          }
+
+          .video.selected .fill-color {
+            fill: #f1644b;
+          }
+
+          .audio.selected .fill-color {
+            fill: #00adef;
+          }
+
+          .software.selected .fill-color {
+            fill: #9ecc4f;
+          }
+
+          .images.selected .fill-color {
+            fill: #aa99c9;
+          }
+        }
+
+        @media (min-width: 1200px) {
+          .label,
+          .web:after {
+            display: inline;
+          }
+
+          .web .label {
+            display: none;
+          }
+        }
+      `,
+        ];
+    }
+};
+__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('ia-topnav-media-button'),
+    localized()
+], MediaButton);
+export { MediaButton };
+//# sourceMappingURL=ia-topnav-media-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-media-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-media-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, TemplateResult, css, html } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport { toSentenceCase } from './lib/helpers';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { IATopNavConfig, TOPNAV_MOBILE_BREAKPOINT } from './models';\nimport { defaultTopNavConfig } from './data/menus';\nimport themeStyles from '@src/themes/theme-styles';\nimport { localized, msg } from '@lit/localize';\n\n@customElement('ia-topnav-media-button')\n@localized()\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  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.tooltip}\n      >\n        ${this.menuItem}\n      </a>\n    `;\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  /**\n   * The button's tooltip.\n   *\n   * Each menu has its own whole phrase, so a translator can reword it and\n   * move the menu name freely, and the name shown is a translated one.\n   */\n  get tooltip() {\n    const phrases = this.selected\n      ? {\n          web: msg('Collapse web menu'),\n          texts: msg('Collapse texts menu'),\n          video: msg('Collapse video menu'),\n          audio: msg('Collapse audio menu'),\n          software: msg('Collapse software menu'),\n          images: msg('Collapse images menu'),\n          donate: msg('Collapse donate menu'),\n          more: msg('Collapse more menu'),\n        }\n      : {\n          web: msg('Expand web menu'),\n          texts: msg('Expand texts menu'),\n          video: msg('Expand video menu'),\n          audio: msg('Expand audio menu'),\n          software: msg('Expand software menu'),\n          images: msg('Expand images menu'),\n          donate: msg('Expand donate menu'),\n          more: msg('Expand more menu'),\n        };\n    return (\n      (phrases as Record<string, string>)[this.mediatype] ??\n      (this.selected ? msg('Collapse menu') : msg('Expand menu'))\n    );\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  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        a {\n          display: inline-block;\n          text-decoration: none;\n        }\n\n        .menu-item {\n          display: inline-block;\n          width: 100%;\n          padding: 0;\n          font-size: 1.6rem;\n          text-align: left;\n          background: transparent;\n          -webkit-box-align: center;\n          -ms-flex-align: center;\n          align-items: center;\n        }\n\n        .menu-item:focus {\n          outline: none;\n        }\n\n        .label {\n          display: inline-block;\n          padding: 0;\n          font-weight: 400;\n          color: var(--primaryTextColor);\n          text-align: left;\n          vertical-align: middle;\n        }\n\n        .menu-item > .icon {\n          display: inline-flex;\n          vertical-align: middle;\n          -webkit-box-align: center;\n          -ms-flex-align: center;\n          align-items: center;\n          -webkit-box-pack: center;\n          -ms-flex-pack: center;\n          justify-content: center;\n        }\n\n        .menu-item > .icon > svg {\n          height: 4rem;\n          width: 4rem;\n        }\n\n        .menu-item.selected .icon {\n          background-color: var(--activeButtonBg);\n          border-radius: 1rem 0 0 1rem;\n        }\n\n        .icon .fill-color {\n          fill: #999;\n        }\n\n        .icon.active .fill-color {\n          fill: #fff;\n        }\n\n        .donate .fill-color {\n          fill: #f00;\n        }\n\n        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n          .menu-item {\n            width: auto;\n            height: 5rem;\n            color: var(--mediaLabelDesktopColor);\n            display: inline-flex;\n          }\n          .menu-item:hover,\n          .menu-item:active,\n          .menu-item:focus {\n            color: var(--linkHoverColor);\n          }\n\n          .menu-item:hover .fill-color,\n          .menu-item:active .fill-color,\n          .menu-item:focus .fill-color {\n            fill: var(--linkHoverColor);\n          }\n\n          .label {\n            display: none;\n          }\n\n          .label,\n          .web:after {\n            padding-right: 1rem;\n            font-size: 1.3rem;\n            text-transform: uppercase;\n            color: inherit;\n          }\n\n          .web:after {\n            display: none;\n            content: 'web';\n          }\n          .donate,\n          .more {\n            display: none;\n          }\n\n          .menu-item.selected {\n            background: var(--activeDesktopMenuIcon);\n          }\n\n          .menu-item.selected .label,\n          .menu-item.selected.web:after {\n            color: var(--linkHoverColor);\n          }\n\n          .menu-item.selected .icon {\n            background: transparent;\n          }\n\n          /* selected state icon colors */\n          .web.selected .fill-color {\n            fill: #ffcd27;\n          }\n\n          .texts.selected .fill-color {\n            fill: #faab3c;\n          }\n\n          .video.selected .fill-color {\n            fill: #f1644b;\n          }\n\n          .audio.selected .fill-color {\n            fill: #00adef;\n          }\n\n          .software.selected .fill-color {\n            fill: #9ecc4f;\n          }\n\n          .images.selected .fill-color {\n            fill: #aa99c9;\n          }\n        }\n\n        @media (min-width: 1200px) {\n          .label,\n          .web:after {\n            display: inline;\n          }\n\n          .web .label {\n            display: none;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-topnav-media-menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-topnav/ia-topnav-media-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAM5E,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,cAAc,EAA4B,MAAM,UAAU,CAAC;AAsEpE,qBAEa,SAAU,SAAQ,UAAU;IACX,QAAQ,SAAM;IACd,MAAM,EAAE,cAAc,CAAuB;IAC7C,QAAQ,SAAM;IACd,kBAAkB,SAAM;IACxB,UAAU,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IAEnC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAEjE,OAAO,CAAC,KAAK,EAAE,cAAc;IAwB7B,MAAM;IAYN,IAAI,wBAAwB,sCAqB3B;IAED,IAAI,UAAU,YAEb;IAED,IAAI,SAAS,sBAEZ;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAoElC;CACF"}