@internetarchive/elements 1.1.3-webdev-9241.0 → 1.1.3

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

@@ -1,183 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,31 +0,0 @@
-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.
-     *
-     * Built as a whole phrase per state, because word order around the
-     * mediatype differs by language.
-     */
-    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

@@ -1 +0,0 @@
-{"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,WAIV;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

@@ -1,287 +0,0 @@
-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, str } 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.
-     *
-     * Built as a whole phrase per state, because word order around the
-     * mediatype differs by language.
-     */
-    get tooltip() {
-        return this.selected
-            ? msg(str `Collapse ${this.mediatype} menu`)
-            : msg(str `Expand ${this.mediatype} 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

@@ -1 +0,0 @@
-{"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, str } 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   * Built as a whole phrase per state, because word order around the\n   * mediatype differs by language.\n   */\n  get tooltip() {\n    return this.selected\n      ? msg(str`Collapse ${this.mediatype} menu`)\n      : msg(str`Expand ${this.mediatype} menu`);\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

@@ -1,21 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}