@internetarchive/ia-item-navigator 2.1.3-alpha.1 → 2.2.0

package/dist/src/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QACuB,kBAAa,GAAG,EAAE,CAAC;IA4FjD,CAAC;IA1FC,IAAI,WAAW;QACb,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;UAWJ,IAAI,CAAC,IAAI;;;;;;;;KAQd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa;YAC9B,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,aAAa,OAAO;YACtC,CAAC,CAAC,OAAO,CAAC;QACZ,OAAO,IAAI,CAAA;;UAEL,KAAK,IAAI,IAAI,CAAC,MAAM;;;KAGzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AA5F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAoB;AADpC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA6F3B","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { css, html, LitElement, svg, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('ia-itemnav-loader')\nexport class IAItemNavLoader extends LitElement {\n  @property({ type: String }) loaderMessage = '';\n\n  get bookIconSvg() {\n    return svg`\n      <g class=\"bookIcon\" transform=\"matrix(1 0 0 -1 28 67.362264)\">\n        <path d=\"m44.71698 31.6981124v-29.99320678s-18.0956599.30735848-18.6322637-.7171698c-.0633962-.12226414-1.890566-.59207545-2.9745282-.59207545-1.3228302 0-3.5122641 0-4.1286791.74547168-.9707547 1.17452827-18.82811278.71660375-18.82811278.71660375v30.040754l1.83849052.7867924.29094339-28.48188608s15.94981097.15339622 17.09094297-1.10716978c.8145283-.90056602 4.997547-.91641507 5.3450942-.3526415.9611321 1.55716977 14.7101883 1.31716978 17.6077354 1.45981128l.3266038 28.22830118z\"/>\n        <path d=\"m40.1129424 33.5957539h-12.8337733c-1.8690565 0-3.1098112-.7545283-3.9299999-1.6279245v-26.70452764l1.2362264-.00792453c.4584906.72962262 3.0922641 1.39415091 3.0922641 1.39415091h10.1298111s1.0381131.01754717 1.5141509.47377357c.5643396.54056602.7913207 1.36981129.7913207 1.36981129z\"/>\n        <path d=\"m17.3354713 33.5957539h-12.8337733v-25.37660316s0-.75283017.49358489-1.14113205c.52867924-.41433961 1.3415094-.42849055 1.3415094-.42849055h10.59905631s2.2075471-.52698112 3.0928301-1.39415091l1.2.00792453v26.74245214c-.8201886.8581132-2.0530188 1.59-3.8932074 1.59\"/>\n      </g>\n    `;\n  }\n\n  get icon() {\n    return this.bookIconSvg;\n  }\n\n  get loader() {\n    return svg`\n    <svg\n      height=\"100\"\n      viewBox=\"0 0 100 100\"\n      width=\"100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-labelledby=\"item-loading\"\n    >\n      <title id=\"item-loading\">Currently loading viewer.</title>\n      <desc>Please wait while we load theater.</desc>\n      <g fill=\"#333\" fill-rule=\"evenodd\" class=\"book-icon\">\n        ${this.icon}\n        <path\n          class=\"ring\"\n          d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n          fill-rule=\"nonzero\"\n        />\n      </g>\n    </svg>\n    `;\n  }\n\n  render() {\n    const title = this.loaderMessage\n      ? html`<h2>${this.loaderMessage}</h2>`\n      : nothing;\n    return html`\n      <div class=\"place-holder\">\n        ${title} ${this.loader}\n        <h3>Loading viewer</h3>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      .place-holder {\n        width: 30%;\n        margin: auto;\n        text-align: center;\n        color: var(--primaryTextColor);\n      }\n\n      .place-holder {\n        position: relative;\n      }\n\n      .place-holder svg {\n        display: block;\n        width: 60%;\n        max-width: 100px;\n        height: auto;\n        margin: auto;\n      }\n\n      svg * {\n        fill: var(--primaryTextColor);\n      }\n\n      svg .ring {\n        animation: rotate 1.3s infinite linear;\n        transform-origin: 50px 50px;\n        transform-box: fill-box;\n        display: block; // transform won't work on inline style\n      }\n\n      @keyframes rotate {\n        0% {\n          -moz-transform: rotate(-360deg);\n          -webkit-transform: rotate(-360deg);\n          transform: rotate(-360deg);\n        }\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QACuB,kBAAa,GAAG,EAAE,CAAC;IA4FjD,CAAC;IA1FC,IAAI,WAAW;QACb,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;UAWJ,IAAI,CAAC,IAAI;;;;;;;;KAQd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa;YAC9B,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,aAAa,OAAO;YACtC,CAAC,CAAC,OAAO,CAAC;QACZ,OAAO,IAAI,CAAA;;UAEL,KAAK,IAAI,IAAI,CAAC,MAAM;;;KAGzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AA5F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAoB;AADpC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA6F3B","sourcesContent":["import { css, html, LitElement, svg, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('ia-itemnav-loader')\nexport class IAItemNavLoader extends LitElement {\n  @property({ type: String }) loaderMessage = '';\n\n  get bookIconSvg() {\n    return svg`\n      <g class=\"bookIcon\" transform=\"matrix(1 0 0 -1 28 67.362264)\">\n        <path d=\"m44.71698 31.6981124v-29.99320678s-18.0956599.30735848-18.6322637-.7171698c-.0633962-.12226414-1.890566-.59207545-2.9745282-.59207545-1.3228302 0-3.5122641 0-4.1286791.74547168-.9707547 1.17452827-18.82811278.71660375-18.82811278.71660375v30.040754l1.83849052.7867924.29094339-28.48188608s15.94981097.15339622 17.09094297-1.10716978c.8145283-.90056602 4.997547-.91641507 5.3450942-.3526415.9611321 1.55716977 14.7101883 1.31716978 17.6077354 1.45981128l.3266038 28.22830118z\"/>\n        <path d=\"m40.1129424 33.5957539h-12.8337733c-1.8690565 0-3.1098112-.7545283-3.9299999-1.6279245v-26.70452764l1.2362264-.00792453c.4584906.72962262 3.0922641 1.39415091 3.0922641 1.39415091h10.1298111s1.0381131.01754717 1.5141509.47377357c.5643396.54056602.7913207 1.36981129.7913207 1.36981129z\"/>\n        <path d=\"m17.3354713 33.5957539h-12.8337733v-25.37660316s0-.75283017.49358489-1.14113205c.52867924-.41433961 1.3415094-.42849055 1.3415094-.42849055h10.59905631s2.2075471-.52698112 3.0928301-1.39415091l1.2.00792453v26.74245214c-.8201886.8581132-2.0530188 1.59-3.8932074 1.59\"/>\n      </g>\n    `;\n  }\n\n  get icon() {\n    return this.bookIconSvg;\n  }\n\n  get loader() {\n    return svg`\n    <svg\n      height=\"100\"\n      viewBox=\"0 0 100 100\"\n      width=\"100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-labelledby=\"item-loading\"\n    >\n      <title id=\"item-loading\">Currently loading viewer.</title>\n      <desc>Please wait while we load theater.</desc>\n      <g fill=\"#333\" fill-rule=\"evenodd\" class=\"book-icon\">\n        ${this.icon}\n        <path\n          class=\"ring\"\n          d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n          fill-rule=\"nonzero\"\n        />\n      </g>\n    </svg>\n    `;\n  }\n\n  render() {\n    const title = this.loaderMessage\n      ? html`<h2>${this.loaderMessage}</h2>`\n      : nothing;\n    return html`\n      <div class=\"place-holder\">\n        ${title} ${this.loader}\n        <h3>Loading viewer</h3>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      .place-holder {\n        width: 30%;\n        margin: auto;\n        text-align: center;\n        color: var(--primaryTextColor);\n      }\n\n      .place-holder {\n        position: relative;\n      }\n\n      .place-holder svg {\n        display: block;\n        width: 60%;\n        max-width: 100px;\n        height: auto;\n        margin: auto;\n      }\n\n      svg * {\n        fill: var(--primaryTextColor);\n      }\n\n      svg .ring {\n        animation: rotate 1.3s infinite linear;\n        transform-origin: 50px 50px;\n        transform-box: fill-box;\n        display: block; // transform won't work on inline style\n      }\n\n      @keyframes rotate {\n        0% {\n          -moz-transform: rotate(-360deg);\n          -webkit-transform: rotate(-360deg);\n          transform: rotate(-360deg);\n        }\n      }\n    `;\n  }\n}\n"]}

package/dist/src/menu-slider/ia-menu-slider.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult, nothing } from 'lit';
 import '@internetarchive/icon-collapse-sidebar';
 import './menu-button';
 import { MenuProviderInterface } from '../interfaces/menu-interfaces';
@@ -8,8 +8,10 @@ export declare class IaMenuSlider extends LitElement {
     open: boolean;
     manuallyHandleClose: boolean;
     selectedMenu: string;
-    selectedMenuAction: symbol;
+    selectedMenuAction: TemplateResult | typeof nothing;
     animateMenuOpen: boolean;
+    contentCloseButton: HTMLElement;
+    menuList: HTMLUListElement;
     updated(): void;
     /**
      * Event handler, captures state of selected menu
@@ -19,13 +21,17 @@ export declare class IaMenuSlider extends LitElement {
      * closes menu drawer
      */
     closeMenu(): void;
+    closePanel(): void;
+    /**
+     * Handle keyboard events, specifically ESC key to close menu details
+     */
+    handleKeyDown(event: KeyboardEvent): void;
     get selectedMenuDetails(): MenuProviderInterface | undefined;
-    get selectedMenuComponent(): any;
     get sliderDetailsClass(): string;
     get selectedMenuClass(): "" | "open";
-    get menuItems(): import("lit").TemplateResult<1>[];
-    get renderMenuHeader(): import("lit").TemplateResult<1>;
-    get closeButton(): import("lit").TemplateResult<1>;
+    get menuItems(): TemplateResult<1>[];
+    get renderMenuHeader(): TemplateResult<1>;
+    get closeButton(): TemplateResult<1>;
     /** @inheritdoc */
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }

package/dist/src/menu-slider/ia-menu-slider.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { LitElement, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import menuSliderCSS from './styles/menu-slider';
 import '@internetarchive/icon-collapse-sidebar';
 import './menu-button';
@@ -21,20 +21,25 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
         return menuSliderCSS;
     }
     updated() {
-        const { actionButton } = this.selectedMenuDetails || {};
+        var _a;
+        const actionButton = ((_a = this.selectedMenuDetails) === null || _a === void 0 ? void 0 : _a.actionButton) || nothing;
         const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
         if (actionButtonHasChanged) {
-            this.selectedMenuAction = actionButton || nothing;
+            this.selectedMenuAction = actionButton;
         }
     }
     /**
      * Event handler, captures state of selected menu
      */
     setSelectedMenu({ detail }) {
+        var _a;
         const { id } = detail;
         this.selectedMenu = this.selectedMenu === id ? '' : id;
-        const { actionButton } = this.selectedMenuDetails || {};
-        this.selectedMenuAction = actionButton || nothing;
+        this.selectedMenuAction = ((_a = this.selectedMenuDetails) === null || _a === void 0 ? void 0 : _a.actionButton) || nothing;
+        this.updateComplete.then(() => {
+            var _a;
+            (_a = this.contentCloseButton) === null || _a === void 0 ? void 0 : _a.focus();
+        });
     }
     /**
      * closes menu drawer
@@ -49,15 +54,37 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
         });
         this.dispatchEvent(drawerClosed);
     }
-    get selectedMenuDetails() {
-        const selectedMenu = this.menus.find(menu => menu.id === this.selectedMenu);
-        return selectedMenu;
+    closePanel() {
+        const menuId = this.selectedMenu;
+        this.selectedMenu = '';
+        this.selectedMenuAction = nothing;
+        // Return focus to the menu button that was previously selected
+        if (menuId) {
+            this.updateComplete.then(() => {
+                const menuIndex = this.menus.findIndex(menu => menu.id === menuId);
+                if (menuIndex !== -1) {
+                    const menuButton = this.menuList.querySelector(`li:nth-child(${menuIndex + 1}) menu-button`);
+                    menuButton === null || menuButton === void 0 ? void 0 : menuButton.focus();
+                }
+            });
+        }
+    }
+    /**
+     * Handle keyboard events, specifically ESC key to close menu details
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            if (this.selectedMenu) {
+                this.closePanel();
+            }
+            else {
+                this.closeMenu();
+            }
+        }
     }
-    get selectedMenuComponent() {
-        const menuItem = this.selectedMenuDetails;
-        return menuItem && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.component)
-            ? menuItem.component
-            : html ``;
+    get selectedMenuDetails() {
+        return this.menus.find(menu => menu.id === this.selectedMenu);
     }
     /* render */
     get sliderDetailsClass() {
@@ -69,17 +96,17 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
         return this.selectedMenu ? 'open' : '';
     }
     get menuItems() {
-        return this.menus.map((menu) => html `
+        return this.menus.map(menu => html `
         <li>
           <menu-button
             @menuTypeSelected=${this.setSelectedMenu}
             .icon=${menu.icon}
             .label=${menu.label}
-            .menuDetails=${menu.menuDetails}
+            .menuDetails=${menu.menuDetails || ''}
             .buttonId=${menu.id}
             .selected=${menu.id === this.selectedMenu}
-            .followable=${menu.followable}
-            .href=${menu.href}
+            .followable=${menu.followable || false}
+            .href=${menu.href || ''}
           ></menu-button>
         </li>
       `);
@@ -96,7 +123,15 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
           <h3>${label}</h3>
           <span class="extra-details">${menuDetails}</span>
         </div>
-        ${actionBlock} ${this.closeButton}
+        ${actionBlock}
+        <button
+          class="close"
+          aria-label="Close this menu"
+          title="Close this menu"
+          @click=${this.closePanel}
+        >
+          <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>
+        </button>
       </header>
     `;
     }
@@ -105,6 +140,7 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
       <button
         class="close"
         aria-label="Close this menu"
+        title="Close this menu"
         @click=${this.closeMenu}
       >
         <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>
@@ -113,8 +149,9 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
     }
     /** @inheritdoc */
     render() {
+        var _a;
         return html `
-      <div class="main">
+      <div class="main" @keydown=${this.handleKeyDown}>
         <div class="menu ${this.sliderDetailsClass}">
           ${this.closeButton}
           <ul class="menu-list">
@@ -126,7 +163,9 @@ let IaMenuSlider = class IaMenuSlider extends LitElement {
           >
             ${this.renderMenuHeader}
             <section>
-              <div class="selected-menu">${this.selectedMenuComponent}</div>
+              <div class="selected-menu">
+                ${((_a = this.selectedMenuDetails) === null || _a === void 0 ? void 0 : _a.component) || nothing}
+              </div>
             </section>
           </div>
         </div>
@@ -152,6 +191,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], IaMenuSlider.prototype, "animateMenuOpen", void 0);
+__decorate([
+    query('.content.open button.close')
+], IaMenuSlider.prototype, "contentCloseButton", void 0);
+__decorate([
+    query('.menu-list')
+], IaMenuSlider.prototype, "menuList", void 0);
 IaMenuSlider = __decorate([
     customElement('ia-menu-slider')
 ], IaMenuSlider);

package/dist/src/menu-slider/ia-menu-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-menu-slider.js","sourceRoot":"","sources":["../../../src/menu-slider/ia-menu-slider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGvB,MAAM,YAAY,GAAG;IACnB,WAAW,EAAE,kBAAkB;CAChC,CAAC;AAGK,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAKsB,UAAK,GAA4B,EAAE,CAAC;QAElC,SAAI,GAAG,KAAK,CAAC;QAEb,wBAAmB,GAAG,KAAK,CAAC;QAE7B,iBAAY,GAAG,EAAE,CAAC;QAElB,uBAAkB,GAAG,OAAO,CAAC;QAE5B,oBAAe,GAAG,KAAK,CAAC;IAqIvD,CAAC;IAnJC,MAAM,KAAK,MAAM;QACf,OAAO,aAAa,CAAC;IACvB,CAAC;IAcD,OAAO;QACL,MAAM,EAAE,YAAY,EAAE,GACpB,IAAI,CAAC,mBAAmB,IAAK,EAA0B,CAAC;QAC1D,MAAM,sBAAsB,GAAG,YAAY,KAAK,IAAI,CAAC,kBAAkB,CAAC;QACxE,IAAI,sBAAsB,EAAE,CAAC;YAC3B,IAAI,CAAC,kBAAkB,GAAG,YAAY,IAAI,OAAO,CAAC;QACpD,CAAC;IACH,CAAC;IAED;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAe;QACrC,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACvD,MAAM,EAAE,YAAY,EAAE,GACpB,IAAI,CAAC,mBAAmB,IAAK,EAA0B,CAAC;QAC1D,IAAI,CAAC,kBAAkB,GAAG,YAAY,IAAI,OAAO,CAAC;IACpD,CAAC;IAED;;OAEG;IACH,SAAS;QACP,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC9B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;QACD,MAAM,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC;QACrC,MAAM,YAAY,GAAG,IAAI,WAAW,CAAC,WAAW,EAAE;YAChD,MAAM,EAAE,IAAI,CAAC,mBAAmB;SACjC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,mBAAmB;QACrB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAClC,IAAI,CAAC,EAAE,CAAE,IAAY,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,CAC/C,CAAC;QACF,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,IAAI,qBAAqB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC;QAC1C,OAAO,QAAQ,KAAK,QAAgB,aAAhB,QAAQ,uBAAR,QAAQ,CAAU,SAAS,CAAA;YAC7C,CAAC,CAAE,QAAgB,CAAC,SAAS;YAC7B,CAAC,CAAC,IAAI,CAAA,EAAE,CAAC;IACb,CAAC;IAED,YAAY;IAEZ,IAAI,kBAAkB;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QACtD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACtC,OAAO,GAAG,OAAO,IAAI,KAAK,EAAE,CAAC;IAC/B,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CACnB,CAAC,IAAyB,EAAE,EAAE,CAAC,IAAI,CAAA;;;gCAGT,IAAI,CAAC,eAAe;oBAChC,IAAI,CAAC,IAAI;qBACR,IAAI,CAAC,KAAK;2BACJ,IAAI,CAAC,WAAW;wBACnB,IAAI,CAAC,EAAE;wBACP,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY;0BAC3B,IAAI,CAAC,UAAU;oBACrB,IAAI,CAAC,IAAI;;;OAGtB,CACF,CAAC;IACJ,CAAC;IAED,IAAI,gBAAgB;QAClB,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,GACpC,IAAI,CAAC,mBAAmB,IAAK,EAA0B,CAAC;QAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB;YACzC,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,kBAAkB,SAAS;YACrE,CAAC,CAAC,OAAO,CAAC;QACZ,OAAO,IAAI,CAAA;uBACQ,WAAW;;gBAElB,KAAK;wCACmB,WAAW;;UAEzC,WAAW,IAAI,IAAI,CAAC,WAAW;;KAEpC,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,SAAS;;;;KAI1B,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;2BAEY,IAAI,CAAC,kBAAkB;YACtC,IAAI,CAAC,WAAW;;cAEd,IAAI,CAAC,SAAS;;;6BAGC,IAAI,CAAC,iBAAiB;gCACnB,IAAI,CAAC,eAAe;;cAEtC,IAAI,CAAC,gBAAgB;;2CAEQ,IAAI,CAAC,qBAAqB;;;;;KAKhE,CAAC;IACJ,CAAC;CACF,CAAA;AA/I4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAqC;AAElC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAc;AAEb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAA6B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA8B;AAE5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAAyB;AAf1C,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAoJxB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport menuSliderCSS from './styles/menu-slider';\nimport '@internetarchive/icon-collapse-sidebar';\nimport './menu-button';\nimport { MenuProviderInterface } from '../interfaces/menu-interfaces';\n\nconst sliderEvents = {\n  closeDrawer: 'menuSliderClosed',\n};\n\n@customElement('ia-menu-slider')\nexport class IaMenuSlider extends LitElement {\n  static get styles() {\n    return menuSliderCSS;\n  }\n\n  @property({ type: Array }) menus: MenuProviderInterface[] = [];\n\n  @property({ type: Boolean }) open = false;\n\n  @property({ type: Boolean }) manuallyHandleClose = false;\n\n  @property({ type: String }) selectedMenu = '';\n\n  @property({ type: Object }) selectedMenuAction = nothing;\n\n  @property({ type: Boolean }) animateMenuOpen = false;\n\n  updated() {\n    const { actionButton } =\n      this.selectedMenuDetails || ({} as Record<string, any>);\n    const actionButtonHasChanged = actionButton !== this.selectedMenuAction;\n    if (actionButtonHasChanged) {\n      this.selectedMenuAction = actionButton || nothing;\n    }\n  }\n\n  /**\n   * Event handler, captures state of selected menu\n   */\n  setSelectedMenu({ detail }: CustomEvent) {\n    const { id } = detail;\n    this.selectedMenu = this.selectedMenu === id ? '' : id;\n    const { actionButton } =\n      this.selectedMenuDetails || ({} as Record<string, any>);\n    this.selectedMenuAction = actionButton || nothing;\n  }\n\n  /**\n   * closes menu drawer\n   */\n  closeMenu() {\n    if (!this.manuallyHandleClose) {\n      this.open = false;\n    }\n    const { closeDrawer } = sliderEvents;\n    const drawerClosed = new CustomEvent(closeDrawer, {\n      detail: this.selectedMenuDetails,\n    });\n    this.dispatchEvent(drawerClosed);\n  }\n\n  get selectedMenuDetails() {\n    const selectedMenu = this.menus.find(\n      menu => (menu as any).id === this.selectedMenu,\n    );\n    return selectedMenu;\n  }\n\n  get selectedMenuComponent() {\n    const menuItem = this.selectedMenuDetails;\n    return menuItem && (menuItem as any)?.component\n      ? (menuItem as any).component\n      : html``;\n  }\n\n  /* render */\n\n  get sliderDetailsClass() {\n    const animate = this.animateMenuOpen ? 'animate' : '';\n    const state = this.open ? 'open' : '';\n    return `${animate} ${state}`;\n  }\n\n  get selectedMenuClass() {\n    return this.selectedMenu ? 'open' : '';\n  }\n\n  get menuItems() {\n    return this.menus.map(\n      (menu: Record<string, any>) => html`\n        <li>\n          <menu-button\n            @menuTypeSelected=${this.setSelectedMenu}\n            .icon=${menu.icon}\n            .label=${menu.label}\n            .menuDetails=${menu.menuDetails}\n            .buttonId=${menu.id}\n            .selected=${menu.id === this.selectedMenu}\n            .followable=${menu.followable}\n            .href=${menu.href}\n          ></menu-button>\n        </li>\n      `,\n    );\n  }\n\n  get renderMenuHeader() {\n    const { label = '', menuDetails = '' } =\n      this.selectedMenuDetails || ({} as Record<string, any>);\n    const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';\n    const actionBlock = this.selectedMenuAction\n      ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n      : nothing;\n    return html`\n      <header class=\"${headerClass}\">\n        <div class=\"details\">\n          <h3>${label}</h3>\n          <span class=\"extra-details\">${menuDetails}</span>\n        </div>\n        ${actionBlock} ${this.closeButton}\n      </header>\n    `;\n  }\n\n  get closeButton() {\n    return html`\n      <button\n        class=\"close\"\n        aria-label=\"Close this menu\"\n        @click=${this.closeMenu}\n      >\n        <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>\n      </button>\n    `;\n  }\n\n  /** @inheritdoc */\n  render() {\n    return html`\n      <div class=\"main\">\n        <div class=\"menu ${this.sliderDetailsClass}\">\n          ${this.closeButton}\n          <ul class=\"menu-list\">\n            ${this.menuItems}\n          </ul>\n          <div\n            class=\"content ${this.selectedMenuClass}\"\n            @menuTypeSelected=${this.setSelectedMenu}\n          >\n            ${this.renderMenuHeader}\n            <section>\n              <div class=\"selected-menu\">${this.selectedMenuComponent}</div>\n            </section>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-menu-slider.js","sourceRoot":"","sources":["../../../src/menu-slider/ia-menu-slider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGvB,MAAM,YAAY,GAAG;IACnB,WAAW,EAAE,kBAAkB;CAChC,CAAC;AAGK,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAKsB,UAAK,GAA4B,EAAE,CAAC;QAElC,SAAI,GAAG,KAAK,CAAC;QAEb,wBAAmB,GAAG,KAAK,CAAC;QAE7B,iBAAY,GAAG,EAAE,CAAC;QAElB,uBAAkB,GAEzB,OAAO,CAAC;QAEA,oBAAe,GAAG,KAAK,CAAC;IA0KvD,CAAC;IA1LC,MAAM,KAAK,MAAM;QACf,OAAO,aAAa,CAAC;IACvB,CAAC;IAoBD,OAAO;;QACL,MAAM,YAAY,GAAG,CAAA,MAAA,IAAI,CAAC,mBAAmB,0CAAE,YAAY,KAAI,OAAO,CAAC;QACvE,MAAM,sBAAsB,GAAG,YAAY,KAAK,IAAI,CAAC,kBAAkB,CAAC;QACxE,IAAI,sBAAsB,EAAE,CAAC;YAC3B,IAAI,CAAC,kBAAkB,GAAG,YAAY,CAAC;QACzC,CAAC;IACH,CAAC;IAED;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAe;;QACrC,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACvD,IAAI,CAAC,kBAAkB,GAAG,CAAA,MAAA,IAAI,CAAC,mBAAmB,0CAAE,YAAY,KAAI,OAAO,CAAC;QAC5E,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;;YAC5B,MAAA,IAAI,CAAC,kBAAkB,0CAAE,KAAK,EAAE,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,SAAS;QACP,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC9B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;QACD,MAAM,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC;QACrC,MAAM,YAAY,GAAG,IAAI,WAAW,CAAC,WAAW,EAAE;YAChD,MAAM,EAAE,IAAI,CAAC,mBAAmB;SACjC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACnC,CAAC;IAED,UAAU;QACR,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;QACjC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC;QAElC,+DAA+D;QAC/D,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;gBACnE,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE,CAAC;oBACrB,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAC5C,gBAAgB,SAAS,GAAG,CAAC,eAAe,CAC9B,CAAC;oBACjB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,EAAE,CAAC;gBACtB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;OAEG;IACH,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC;IAED,YAAY;IAEZ,IAAI,kBAAkB;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QACtD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACtC,OAAO,GAAG,OAAO,IAAI,KAAK,EAAE,CAAC;IAC/B,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CACnB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;gCAGc,IAAI,CAAC,eAAe;oBAChC,IAAI,CAAC,IAAI;qBACR,IAAI,CAAC,KAAK;2BACJ,IAAI,CAAC,WAAW,IAAI,EAAE;wBACzB,IAAI,CAAC,EAAE;wBACP,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY;0BAC3B,IAAI,CAAC,UAAU,IAAI,KAAK;oBAC9B,IAAI,CAAC,IAAI,IAAI,EAAE;;;OAG5B,CACF,CAAC;IACJ,CAAC;IAED,IAAI,gBAAgB;QAClB,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,mBAAmB,IAAI,EAAE,CAAC;QACxE,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB;YACzC,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,kBAAkB,SAAS;YACrE,CAAC,CAAC,OAAO,CAAC;QACZ,OAAO,IAAI,CAAA;uBACQ,WAAW;;gBAElB,KAAK;wCACmB,WAAW;;UAEzC,WAAW;;;;;mBAKF,IAAI,CAAC,UAAU;;;;;KAK7B,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;;;iBAKE,IAAI,CAAC,SAAS;;;;KAI1B,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,MAAM;;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,aAAa;2BAC1B,IAAI,CAAC,kBAAkB;YACtC,IAAI,CAAC,WAAW;;cAEd,IAAI,CAAC,SAAS;;;6BAGC,IAAI,CAAC,iBAAiB;gCACnB,IAAI,CAAC,eAAe;;cAEtC,IAAI,CAAC,gBAAgB;;;kBAGjB,CAAA,MAAA,IAAI,CAAC,mBAAmB,0CAAE,SAAS,KAAI,OAAO;;;;;;KAM3D,CAAC;IACJ,CAAC;CACF,CAAA;AAtL4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAqC;AAElC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAc;AAEb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAA6B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAEE;AAEA;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAAyB;AAEhB;IAApC,KAAK,CAAC,4BAA4B,CAAC;wDAAkC;AAEjD;IAApB,KAAK,CAAC,YAAY,CAAC;8CAA6B;AArBtC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA2LxB","sourcesContent":["import { LitElement, TemplateResult, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport menuSliderCSS from './styles/menu-slider';\nimport '@internetarchive/icon-collapse-sidebar';\nimport './menu-button';\nimport { MenuProviderInterface } from '../interfaces/menu-interfaces';\n\nconst sliderEvents = {\n  closeDrawer: 'menuSliderClosed',\n};\n\n@customElement('ia-menu-slider')\nexport class IaMenuSlider extends LitElement {\n  static get styles() {\n    return menuSliderCSS;\n  }\n\n  @property({ type: Array }) menus: MenuProviderInterface[] = [];\n\n  @property({ type: Boolean }) open = false;\n\n  @property({ type: Boolean }) manuallyHandleClose = false;\n\n  @property({ type: String }) selectedMenu = '';\n\n  @property({ type: Object }) selectedMenuAction:\n    | TemplateResult\n    | typeof nothing = nothing;\n\n  @property({ type: Boolean }) animateMenuOpen = false;\n\n  @query('.content.open button.close') contentCloseButton!: HTMLElement;\n\n  @query('.menu-list') menuList!: HTMLUListElement;\n\n  updated() {\n    const actionButton = this.selectedMenuDetails?.actionButton || nothing;\n    const actionButtonHasChanged = actionButton !== this.selectedMenuAction;\n    if (actionButtonHasChanged) {\n      this.selectedMenuAction = actionButton;\n    }\n  }\n\n  /**\n   * Event handler, captures state of selected menu\n   */\n  setSelectedMenu({ detail }: CustomEvent) {\n    const { id } = detail;\n    this.selectedMenu = this.selectedMenu === id ? '' : id;\n    this.selectedMenuAction = this.selectedMenuDetails?.actionButton || nothing;\n    this.updateComplete.then(() => {\n      this.contentCloseButton?.focus();\n    });\n  }\n\n  /**\n   * closes menu drawer\n   */\n  closeMenu() {\n    if (!this.manuallyHandleClose) {\n      this.open = false;\n    }\n    const { closeDrawer } = sliderEvents;\n    const drawerClosed = new CustomEvent(closeDrawer, {\n      detail: this.selectedMenuDetails,\n    });\n    this.dispatchEvent(drawerClosed);\n  }\n\n  closePanel() {\n    const menuId = this.selectedMenu;\n    this.selectedMenu = '';\n    this.selectedMenuAction = nothing;\n\n    // Return focus to the menu button that was previously selected\n    if (menuId) {\n      this.updateComplete.then(() => {\n        const menuIndex = this.menus.findIndex(menu => menu.id === menuId);\n        if (menuIndex !== -1) {\n          const menuButton = this.menuList.querySelector(\n            `li:nth-child(${menuIndex + 1}) menu-button`,\n          ) as HTMLElement;\n          menuButton?.focus();\n        }\n      });\n    }\n  }\n\n  /**\n   * Handle keyboard events, specifically ESC key to close menu details\n   */\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      if (this.selectedMenu) {\n        this.closePanel();\n      } else {\n        this.closeMenu();\n      }\n    }\n  }\n\n  get selectedMenuDetails() {\n    return this.menus.find(menu => menu.id === this.selectedMenu);\n  }\n\n  /* render */\n\n  get sliderDetailsClass() {\n    const animate = this.animateMenuOpen ? 'animate' : '';\n    const state = this.open ? 'open' : '';\n    return `${animate} ${state}`;\n  }\n\n  get selectedMenuClass() {\n    return this.selectedMenu ? 'open' : '';\n  }\n\n  get menuItems() {\n    return this.menus.map(\n      menu => html`\n        <li>\n          <menu-button\n            @menuTypeSelected=${this.setSelectedMenu}\n            .icon=${menu.icon}\n            .label=${menu.label}\n            .menuDetails=${menu.menuDetails || ''}\n            .buttonId=${menu.id}\n            .selected=${menu.id === this.selectedMenu}\n            .followable=${menu.followable || false}\n            .href=${menu.href || ''}\n          ></menu-button>\n        </li>\n      `,\n    );\n  }\n\n  get renderMenuHeader() {\n    const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};\n    const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';\n    const actionBlock = this.selectedMenuAction\n      ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n      : nothing;\n    return html`\n      <header class=\"${headerClass}\">\n        <div class=\"details\">\n          <h3>${label}</h3>\n          <span class=\"extra-details\">${menuDetails}</span>\n        </div>\n        ${actionBlock}\n        <button\n          class=\"close\"\n          aria-label=\"Close this menu\"\n          title=\"Close this menu\"\n          @click=${this.closePanel}\n        >\n          <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>\n        </button>\n      </header>\n    `;\n  }\n\n  get closeButton() {\n    return html`\n      <button\n        class=\"close\"\n        aria-label=\"Close this menu\"\n        title=\"Close this menu\"\n        @click=${this.closeMenu}\n      >\n        <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>\n      </button>\n    `;\n  }\n\n  /** @inheritdoc */\n  render() {\n    return html`\n      <div class=\"main\" @keydown=${this.handleKeyDown}>\n        <div class=\"menu ${this.sliderDetailsClass}\">\n          ${this.closeButton}\n          <ul class=\"menu-list\">\n            ${this.menuItems}\n          </ul>\n          <div\n            class=\"content ${this.selectedMenuClass}\"\n            @menuTypeSelected=${this.setSelectedMenu}\n          >\n            ${this.renderMenuHeader}\n            <section>\n              <div class=\"selected-menu\">\n                ${this.selectedMenuDetails?.component || nothing}\n              </div>\n            </section>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/menu-slider/menu-button.d.ts

@@ -1,10 +1,18 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 export declare class MenuButton extends LitElement {
     static get styles(): import("lit").CSSResult;
-    icon: string;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    icon: TemplateResult | string;
     href: string;
     label: string;
-    menuDetails: string;
+    menuDetails: TemplateResult | string;
     buttonId: string;
     selected: boolean;
     followable: boolean;
@@ -12,8 +20,8 @@ export declare class MenuButton extends LitElement {
     dispatchMenuTypeSelectedEvent(): void;
     get buttonClass(): "" | "selected";
     get iconClass(): "" | "active";
-    get menuItem(): import("lit").TemplateResult<1>;
-    get linkButton(): import("lit").TemplateResult<1>;
-    get clickButton(): import("lit").TemplateResult<1>;
-    render(): import("lit").TemplateResult<1>;
+    get menuItem(): TemplateResult<1>;
+    get linkButton(): TemplateResult<1>;
+    get clickButton(): TemplateResult<1>;
+    render(): TemplateResult<1>;
 }

package/dist/src/menu-slider/menu-button.js

@@ -37,7 +37,12 @@ let MenuButton = class MenuButton extends LitElement {
     }
     get menuItem() {
         return html `
-      <span class="icon ${this.iconClass}"> ${this.icon} </span>
+      <span
+        class="icon ${this.iconClass}"
+        aria-hidden="true"
+        title="${this.label}"
+        >${this.icon}</span
+      >
       <span class="label">${this.label}</span>
       <span class="menu-details">${this.menuDetails}</span>
     `;
@@ -63,8 +68,12 @@ let MenuButton = class MenuButton extends LitElement {
         return this.href ? this.linkButton : this.clickButton;
     }
 };
+MenuButton.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
-    property({ type: String })
+    property({ type: Object })
 ], MenuButton.prototype, "icon", void 0);
 __decorate([
     property({ type: String })
@@ -73,7 +82,7 @@ __decorate([
     property({ type: String })
 ], MenuButton.prototype, "label", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Object })
 ], MenuButton.prototype, "menuDetails", void 0);
 __decorate([
     property({ type: String })

package/dist/src/menu-slider/menu-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.js","sourceRoot":"","sources":["../../../src/menu-slider/menu-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAG1C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAKuB,SAAI,GAAG,EAAE,CAAC;QAEV,SAAI,GAAG,EAAE,CAAC;QAEV,UAAK,GAAG,EAAE,CAAC;QAEX,gBAAW,GAAG,EAAE,CAAC;QAEjB,aAAQ,GAAG,EAAE,CAAC;QAEb,aAAQ,GAAG,KAAK,CAAC;QAEjB,eAAU,GAAG,KAAK,CAAC;IAyDlD,CAAC;IAzEC,MAAM,KAAK,MAAM;QACf,OAAO,aAAa,CAAC;IACvB,CAAC;IAgBD,OAAO,CAAC,CAAQ;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAED,6BAA6B;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,EAAE,EAAE,IAAI,CAAC,QAAQ;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,SAAS,MAAM,IAAI,CAAC,IAAI;4BAC3B,IAAI,CAAC,KAAK;mCACH,IAAI,CAAC,WAAW;KAC9C,CAAC;IACJ,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;2BACE,IAAI,CAAC,WAAW;iBAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;WAChD,IAAI,CAAC,QAAQ;;KAEnB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,WAAW,YAAY,IAAI,CAAC,OAAO;UAC/D,IAAI,CAAC,QAAQ;;KAElB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACxD,CAAC;CACF,CAAA;AArE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAW;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAW;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAkB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAEb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAoB;AAjBrC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA0EtB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport menuButtonCSS from './styles/menu-button';\n\n@customElement('menu-button')\nexport class MenuButton extends LitElement {\n  static get styles() {\n    return menuButtonCSS;\n  }\n\n  @property({ type: String }) icon = '';\n\n  @property({ type: String }) href = '';\n\n  @property({ type: String }) label = '';\n\n  @property({ type: String }) menuDetails = '';\n\n  @property({ type: String }) buttonId = '';\n\n  @property({ type: Boolean }) selected = false;\n\n  @property({ type: Boolean }) followable = false;\n\n  onClick(e: Event) {\n    e.preventDefault();\n    this.dispatchMenuTypeSelectedEvent();\n  }\n\n  dispatchMenuTypeSelectedEvent() {\n    this.dispatchEvent(\n      new CustomEvent('menuTypeSelected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          id: this.buttonId,\n        },\n      }),\n    );\n  }\n\n  get buttonClass() {\n    return this.selected ? 'selected' : '';\n  }\n\n  get iconClass() {\n    return this.selected ? 'active' : '';\n  }\n\n  get menuItem() {\n    return html`\n      <span class=\"icon ${this.iconClass}\"> ${this.icon} </span>\n      <span class=\"label\">${this.label}</span>\n      <span class=\"menu-details\">${this.menuDetails}</span>\n    `;\n  }\n\n  get linkButton() {\n    return html`\n      <a\n        href=\"${this.href}\"\n        class=\"menu-item ${this.buttonClass}\"\n        @click=${this.followable ? undefined : this.onClick}\n        >${this.menuItem}</a\n      >\n    `;\n  }\n\n  get clickButton() {\n    return html`\n      <button class=\"menu-item ${this.buttonClass}\" @click=${this.onClick}>\n        ${this.menuItem}\n      </button>\n    `;\n  }\n\n  render() {\n    return this.href ? this.linkButton : this.clickButton;\n  }\n}\n"]}
+{"version":3,"file":"menu-button.js","sourceRoot":"","sources":["../../../src/menu-slider/menu-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAG1C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAUuB,SAAI,GAA4B,EAAE,CAAC;QAEnC,SAAI,GAAG,EAAE,CAAC;QAEV,UAAK,GAAG,EAAE,CAAC;QAEX,gBAAW,GAA4B,EAAE,CAAC;QAE1C,aAAQ,GAAG,EAAE,CAAC;QAEb,aAAQ,GAAG,KAAK,CAAC;QAEjB,eAAU,GAAG,KAAK,CAAC;IA8DlD,CAAC;IAnFC,MAAM,KAAK,MAAM;QACf,OAAO,aAAa,CAAC;IACvB,CAAC;IAqBD,OAAO,CAAC,CAAQ;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAED,6BAA6B;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,EAAE,EAAE,IAAI,CAAC,QAAQ;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAA;;sBAEO,IAAI,CAAC,SAAS;;iBAEnB,IAAI,CAAC,KAAK;WAChB,IAAI,CAAC,IAAI;;4BAEQ,IAAI,CAAC,KAAK;mCACH,IAAI,CAAC,WAAW;KAC9C,CAAC;IACJ,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;2BACE,IAAI,CAAC,WAAW;iBAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;WAChD,IAAI,CAAC,QAAQ;;KAEnB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,WAAW,YAAY,IAAI,CAAC,OAAO;UAC/D,IAAI,CAAC,QAAQ;;KAElB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACxD,CAAC;;AA9EM,4BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAW;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA2C;AAE1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAEb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAoB;AAtBrC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAoFtB","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport menuButtonCSS from './styles/menu-button';\n\n@customElement('menu-button')\nexport class MenuButton extends LitElement {\n  static get styles() {\n    return menuButtonCSS;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @property({ type: Object }) icon: TemplateResult | string = '';\n\n  @property({ type: String }) href = '';\n\n  @property({ type: String }) label = '';\n\n  @property({ type: Object }) menuDetails: TemplateResult | string = '';\n\n  @property({ type: String }) buttonId = '';\n\n  @property({ type: Boolean }) selected = false;\n\n  @property({ type: Boolean }) followable = false;\n\n  onClick(e: Event) {\n    e.preventDefault();\n    this.dispatchMenuTypeSelectedEvent();\n  }\n\n  dispatchMenuTypeSelectedEvent() {\n    this.dispatchEvent(\n      new CustomEvent('menuTypeSelected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          id: this.buttonId,\n        },\n      }),\n    );\n  }\n\n  get buttonClass() {\n    return this.selected ? 'selected' : '';\n  }\n\n  get iconClass() {\n    return this.selected ? 'active' : '';\n  }\n\n  get menuItem() {\n    return html`\n      <span\n        class=\"icon ${this.iconClass}\"\n        aria-hidden=\"true\"\n        title=\"${this.label}\"\n        >${this.icon}</span\n      >\n      <span class=\"label\">${this.label}</span>\n      <span class=\"menu-details\">${this.menuDetails}</span>\n    `;\n  }\n\n  get linkButton() {\n    return html`\n      <a\n        href=\"${this.href}\"\n        class=\"menu-item ${this.buttonClass}\"\n        @click=${this.followable ? undefined : this.onClick}\n        >${this.menuItem}</a\n      >\n    `;\n  }\n\n  get clickButton() {\n    return html`\n      <button class=\"menu-item ${this.buttonClass}\" @click=${this.onClick}>\n        ${this.menuItem}\n      </button>\n    `;\n  }\n\n  render() {\n    return this.href ? this.linkButton : this.clickButton;\n  }\n}\n"]}

package/dist/src/menu-slider/styles/menu-button.js

@@ -5,6 +5,11 @@ export default css `
     text-decoration: none;
   }
 
+  button.menu-item {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
   .menu-item {
     display: inline-flex;
     width: 100%;
@@ -17,12 +22,12 @@ export default css `
     align-items: center;
     border: none;
     cursor: pointer;
+    transition: background-color 0.2s;
+    border-radius: 6px;
   }
 
-  button.menu-item {
-    -webkit-appearance: none;
-    appearance: none;
-    border-radius: 0;
+  .menu-item:hover {
+    background-color: rgba(255, 255, 255, 0.1);
   }
 
   .label {
@@ -59,6 +64,11 @@ export default css `
     justify-content: center;
   }
 
+  .menu-item > .icon > * {
+    /* Prevent tooltip containing icon literal description */
+    pointer-events: none;
+  }
+
   .menu-item.selected .icon {
     background-color: var(--activeButtonBg);
     border-radius: 1rem 0 0 1rem;

package/dist/src/menu-slider/styles/menu-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  a {\n    display: inline-block;\n    text-decoration: none;\n  }\n\n  .menu-item {\n    display: inline-flex;\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    border: none;\n    cursor: pointer;\n  }\n\n  button.menu-item {\n    -webkit-appearance: none;\n    appearance: none;\n    border-radius: 0;\n  }\n\n  .label {\n    display: var(--menuButtonLabelDisplay, none);\n    padding: 0;\n    font-weight: 400;\n    color: var(--primaryTextColor);\n    text-align: left;\n    vertical-align: middle;\n    margin-left: 1rem;\n  }\n\n  .menu-details {\n    color: var(--primaryTextColor);\n    display: inline-block;\n    margin-left: 0.5rem;\n    font-style: italic;\n    font-size: 1.5rem;\n  }\n\n  .menu-item > .icon {\n    position: relative;\n    display: inline-flex;\n    z-index: 2;\n    min-width: 4.2rem;\n    max-width: 4.2rem;\n    height: 4.2rem;\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.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"]}
+{"version":3,"file":"menu-button.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  a {\n    display: inline-block;\n    text-decoration: none;\n  }\n\n  button.menu-item {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .menu-item {\n    display: inline-flex;\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    border: none;\n    cursor: pointer;\n    transition: background-color 0.2s;\n    border-radius: 6px;\n  }\n\n  .menu-item:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .label {\n    display: var(--menuButtonLabelDisplay, none);\n    padding: 0;\n    font-weight: 400;\n    color: var(--primaryTextColor);\n    text-align: left;\n    vertical-align: middle;\n    margin-left: 1rem;\n  }\n\n  .menu-details {\n    color: var(--primaryTextColor);\n    display: inline-block;\n    margin-left: 0.5rem;\n    font-style: italic;\n    font-size: 1.5rem;\n  }\n\n  .menu-item > .icon {\n    position: relative;\n    display: inline-flex;\n    z-index: 2;\n    min-width: 4.2rem;\n    max-width: 4.2rem;\n    height: 4.2rem;\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 > * {\n    /* Prevent tooltip containing icon literal description */\n    pointer-events: none;\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"]}

package/dist/src/menu-slider/styles/menu-slider.js

@@ -27,10 +27,6 @@ export default css `
     transform: translateX(calc(${sliderWidth} * -1));
   }
 
-  .menu > button.close {
-    right: 0.7rem;
-  }
-
   button {
     cursor: pointer;
   }
@@ -70,11 +66,13 @@ export default css `
     position: absolute;
   }
   button.close {
-    right: 0.5rem;
-  }
-
-  button.close * {
-    float: right;
+    min-width: 38px;
+    min-height: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    right: 0;
+    top: 0;
   }
 
   .content {

package/dist/src/menu-slider/styles/menu-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-slider.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA,MAAM,CAAC;AAClC,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;AACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;AAE5D,eAAe,GAAG,CAAA;;;;;;;;4BAQU,gBAAgB;;;;;;;;aAQ/B,WAAW;;;;;;iCAMS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA0DhC,eAAe;;iCAEM,WAAW;4BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuButtonWidth = css`42px`;\nconst sliderWidth = css`var(--menuWidth, 320px)`;\nconst transitionTiming = css`var(--animationTiming, 200ms)`;\n\nexport default css`\n  .main {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  .animate {\n    transition: transform ${transitionTiming} ease-out;\n  }\n\n  .menu {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: ${sliderWidth};\n    padding: 0.5rem 0.5rem 0 0;\n    box-sizing: border-box;\n    font-size: 1.4rem;\n    color: var(--primaryTextColor);\n    background: var(--menuSliderBg);\n    transform: translateX(calc(${sliderWidth} * -1));\n  }\n\n  .menu > button.close {\n    right: 0.7rem;\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  header {\n    margin: 0 0 0.5rem 0;\n  }\n\n  header * {\n    margin: 0;\n    display: inline-block;\n  }\n  header button {\n    cursor: pointer;\n  }\n\n  header.with-secondary-action .details {\n    width: 80%;\n  }\n\n  header .details {\n    font-weight: bold;\n    width: 88%;\n  }\n\n  header .custom-action > *,\n  button.close {\n    padding: 0;\n    background-color: transparent;\n    border: 0;\n    --iconWidth: var(--menuSliderHeaderIconWidth);\n    --iconHeight: var(--menuSliderHeaderIconHeight);\n  }\n\n  header .custom-action,\n  button.close {\n    position: absolute;\n  }\n  button.close {\n    right: 0.5rem;\n  }\n\n  button.close * {\n    float: right;\n  }\n\n  .content {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: ${menuButtonWidth};\n    z-index: 1;\n    transform: translateX(calc(${sliderWidth} * -1));\n    transition: transform ${transitionTiming} ease-out;\n    background: var(--activeButtonBg);\n    border-right: 0.2rem solid;\n    border-color: var(--subpanelRightBorderColor);\n    padding: 0.5rem 0 0 0.5rem;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .open {\n    transform: translateX(0);\n  }\n\n  .menu-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    background: var(--menuSliderBg);\n  }\n  .menu-list li {\n    margin-bottom: 0.2rem;\n  }\n\n  .content > section {\n    overflow: auto;\n    overscroll-behavior: contain;\n  }\n`;\n"]}
+{"version":3,"file":"menu-slider.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA,MAAM,CAAC;AAClC,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;AACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;AAE5D,eAAe,GAAG,CAAA;;;;;;;;4BAQU,gBAAgB;;;;;;;;aAQ/B,WAAW;;;;;;iCAMS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAwDhC,eAAe;;iCAEM,WAAW;4BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuButtonWidth = css`42px`;\nconst sliderWidth = css`var(--menuWidth, 320px)`;\nconst transitionTiming = css`var(--animationTiming, 200ms)`;\n\nexport default css`\n  .main {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  .animate {\n    transition: transform ${transitionTiming} ease-out;\n  }\n\n  .menu {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: ${sliderWidth};\n    padding: 0.5rem 0.5rem 0 0;\n    box-sizing: border-box;\n    font-size: 1.4rem;\n    color: var(--primaryTextColor);\n    background: var(--menuSliderBg);\n    transform: translateX(calc(${sliderWidth} * -1));\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  header {\n    margin: 0 0 0.5rem 0;\n  }\n\n  header * {\n    margin: 0;\n    display: inline-block;\n  }\n  header button {\n    cursor: pointer;\n  }\n\n  header.with-secondary-action .details {\n    width: 80%;\n  }\n\n  header .details {\n    font-weight: bold;\n    width: 88%;\n  }\n\n  header .custom-action > *,\n  button.close {\n    padding: 0;\n    background-color: transparent;\n    border: 0;\n    --iconWidth: var(--menuSliderHeaderIconWidth);\n    --iconHeight: var(--menuSliderHeaderIconHeight);\n  }\n\n  header .custom-action,\n  button.close {\n    position: absolute;\n  }\n  button.close {\n    min-width: 38px;\n    min-height: 38px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: 0;\n    top: 0;\n  }\n\n  .content {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: ${menuButtonWidth};\n    z-index: 1;\n    transform: translateX(calc(${sliderWidth} * -1));\n    transition: transform ${transitionTiming} ease-out;\n    background: var(--activeButtonBg);\n    border-right: 0.2rem solid;\n    border-color: var(--subpanelRightBorderColor);\n    padding: 0.5rem 0 0 0.5rem;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .open {\n    transform: translateX(0);\n  }\n\n  .menu-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    background: var(--menuSliderBg);\n  }\n  .menu-list li {\n    margin-bottom: 0.2rem;\n  }\n\n  .content > section {\n    overflow: auto;\n    overscroll-behavior: contain;\n  }\n`;\n"]}

package/dist/src/menus/share-panel.js

@@ -1,6 +1,4 @@
 import { __decorate } from "tslib";
-/* eslint-disable lit-a11y/click-events-have-key-events */
-/* eslint-disable lit-a11y/list */
 import { css, html, LitElement, nothing, } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import '@internetarchive/icon-share/icon-share';
@@ -58,7 +56,7 @@ let IauxSharingOptions = class IauxSharingOptions extends LitElement {
         this.sharingOptions = [
             {
                 name: 'Twitter',
-                icon: html `<ia-icon-twitter></ia-icon-twitter>`,
+                icon: html `<ia-icon-twitter aria-hidden="true"></ia-icon-twitter>`,
                 url: `https://twitter.com/intent/tweet?${new URLSearchParams({
                     url: shareUrl,
                     text: shareBlurb,
@@ -67,14 +65,14 @@ let IauxSharingOptions = class IauxSharingOptions extends LitElement {
             },
             {
                 name: 'Facebook',
-                icon: html `<ia-icon-facebook></ia-icon-facebook>`,
+                icon: html `<ia-icon-facebook aria-hidden="true"></ia-icon-facebook>`,
                 url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({
                     u: shareUrl,
                 })}`,
             },
             {
                 name: 'Tumblr',
-                icon: html `<ia-icon-tumblr></ia-icon-tumblr>`,
+                icon: html `<ia-icon-tumblr aria-hidden="true"></ia-icon-tumblr>`,
                 url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams({
                     posttype: 'link',
                     canonicalUrl: shareUrl,
@@ -83,7 +81,7 @@ let IauxSharingOptions = class IauxSharingOptions extends LitElement {
             },
             {
                 name: 'Pinterest',
-                icon: html `<ia-icon-pinterest></ia-icon-pinterest>`,
+                icon: html `<ia-icon-pinterest aria-hidden="true"></ia-icon-pinterest>`,
                 url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams({
                     url: shareUrl,
                     description: shareBlurb,
@@ -91,7 +89,7 @@ let IauxSharingOptions = class IauxSharingOptions extends LitElement {
             },
             {
                 name: 'Email',
-                icon: html `<ia-icon-email></ia-icon-email>`,
+                icon: html `<ia-icon-email aria-hidden="true"></ia-icon-email>`,
                 url: `mailto:?${new URLSearchParams({
                     subject: shareBlurb,
                     body: shareUrl,
@@ -119,13 +117,13 @@ let IauxSharingOptions = class IauxSharingOptions extends LitElement {
     render() {
         return html `
       ${this.header}
-      <main>
+      <div>
         ${this.sharingOptions.map(option => html ` <a class="share-option" href="${option.url}" target="_blank">
               ${option.icon} ${option.name}
             </a>`)}
         <details>
           <summary class="share-option">
-            <ia-icon-link></ia-icon-link>
+            <ia-icon-link aria-hidden="true"></ia-icon-link>
             Get an embeddable link
           </summary>
           <div class="embed">
@@ -150,7 +148,7 @@ let IauxSharingOptions = class IauxSharingOptions extends LitElement {
             </p>
           </div>
         </details>
-      </main>
+      </div>
     `;
     }
     get providerIcon() {
@@ -183,7 +181,7 @@ let IauxSharingOptions = class IauxSharingOptions extends LitElement {
         font-size: 1.4rem;
       }
 
-      main {
+      :host > div {
         padding: 1rem 0;
       }
 
@@ -194,6 +192,12 @@ let IauxSharingOptions = class IauxSharingOptions extends LitElement {
         text-decoration: none;
         color: var(--shareLinkColor);
         cursor: pointer;
+        transition: background-color 0.2s;
+        border-radius: 6px;
+      }
+
+      .share-option:hover {
+        background-color: rgba(255, 255, 255, 0.05);
       }
 
       .share-option > * {

package/dist/src/menus/share-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"share-panel.js","sourceRoot":"","sources":["../../../src/menus/share-panel.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\n/* eslint-disable lit-a11y/list */\nimport {\n  css,\n  CSSResult,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@internetarchive/icon-share/icon-share';\nimport '@internetarchive/icon-twitter/icon-twitter';\nimport '@internetarchive/icon-facebook/icon-facebook';\nimport '@internetarchive/icon-tumblr/icon-tumblr';\nimport '@internetarchive/icon-pinterest/icon-pinterest';\nimport '@internetarchive/icon-email/icon-email';\nimport '@internetarchive/icon-link/icon-link';\n\ntype ShareOption = {\n  name: string;\n  icon: TemplateResult | string;\n  url: string;\n};\n\nconst copyToClipboard = (event: MouseEvent) => {\n  const currentTarget = event.currentTarget as HTMLElement;\n  const textarea = currentTarget.querySelector('textarea');\n  const note = currentTarget.querySelector('small') as any;\n  textarea!.select();\n  document.execCommand('copy');\n  textarea!.blur();\n  note.classList.add('visible');\n  clearTimeout(note.timeout);\n  note.timeout = setTimeout(() => note.classList.remove('visible'), 4000);\n};\n\nexport const iauxShareIcon: TemplateResult = html`<ia-icon-share\n  style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n></ia-icon-share>`;\n\n@customElement('iaux-in-share-panel')\nexport class IauxSharingOptions extends LitElement {\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({ type: String }) creator = '';\n\n  @property({ type: String }) description = '';\n\n  @property({ type: Boolean }) embedOptionsVisible = false;\n\n  @property({ type: String }) identifier = '';\n\n  @property({ type: Array }) sharingOptions: ShareOption[] = [];\n\n  @property({ type: String }) type = '';\n\n  @property({ type: Boolean }) renderHeader = false;\n\n  @property({ type: String }) fileSubPrefix = '';\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharingOptions') && !this.sharingOptions.length) {\n      this.loadProviders();\n    }\n  }\n\n  loadProviders() {\n    let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;\n    if (this.fileSubPrefix) {\n      shareUrl += `/${this.fileSubPrefix}`;\n    }\n    const shareBlurb = [\n      this.description,\n      this.creator,\n      'Free Download, Borrow, and Streaming',\n      'Internet Archive',\n    ]\n      .filter(Boolean)\n      .join(' : ');\n\n    this.sharingOptions = [\n      {\n        name: 'Twitter',\n        icon: html`<ia-icon-twitter></ia-icon-twitter>`,\n        url: `https://twitter.com/intent/tweet?${new URLSearchParams({\n          url: shareUrl,\n          text: shareBlurb,\n          via: 'internetarchive',\n        })}`,\n      },\n      {\n        name: 'Facebook',\n        icon: html`<ia-icon-facebook></ia-icon-facebook>`,\n        url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({\n          u: shareUrl,\n        })}`,\n      },\n      {\n        name: 'Tumblr',\n        icon: html`<ia-icon-tumblr></ia-icon-tumblr>`,\n        url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams(\n          {\n            posttype: 'link',\n            canonicalUrl: shareUrl,\n            title: shareBlurb,\n          },\n        )}`,\n      },\n      {\n        name: 'Pinterest',\n        icon: html`<ia-icon-pinterest></ia-icon-pinterest>`,\n        url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams(\n          {\n            url: shareUrl,\n            description: shareBlurb,\n          },\n        )}`,\n      },\n      {\n        name: 'Email',\n        icon: html`<ia-icon-email></ia-icon-email>`,\n        url: `mailto:?${new URLSearchParams({\n          subject: shareBlurb,\n          body: shareUrl,\n        })}`,\n      },\n    ];\n  }\n\n  get iframeEmbed() {\n    return `<iframe\n      src=\"https://${this.baseHost}/embed/${this.identifier}\"\n      width=\"560\" height=\"384\" frameborder=\"0\"\n      webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" allowfullscreen\n    ></iframe>`;\n  }\n\n  get bbcodeEmbed() {\n    return `[archiveorg ${this.identifier} width=560 height=384 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]`;\n  }\n\n  get helpURL() {\n    return `https://${this.baseHost}/help/audio.php?identifier=${this.identifier}`;\n  }\n\n  get header() {\n    const header = html`<header><h3>Share this ${this.type}</h3></header>`;\n    return this.renderHeader ? header : nothing;\n  }\n\n  render() {\n    return html`\n      ${this.header}\n      <main>\n        ${this.sharingOptions.map(\n          option =>\n            html` <a class=\"share-option\" href=\"${option.url}\" target=\"_blank\">\n              ${option.icon} ${option.name}\n            </a>`,\n        )}\n        <details>\n          <summary class=\"share-option\">\n            <ia-icon-link></ia-icon-link>\n            Get an embeddable link\n          </summary>\n          <div class=\"embed\">\n            <h4>Embed</h4>\n            <div class=\"code\" @click=${copyToClipboard}>\n              <textarea readonly>${this.iframeEmbed}</textarea>\n              <small>Copied to clipboard</small>\n            </div>\n            <h4>\n              Embed for wordpress.com hosted blogs and archive.org item\n              &lt;description&gt; tags\n            </h4>\n            <div class=\"code\" @click=${copyToClipboard}>\n              <textarea readonly>${this.bbcodeEmbed}</textarea>\n              <small>Copied to clipboard</small>\n            </div>\n            <p>\n              Want more?\n              <a href=${this.helpURL}\n                >Advanced embedding details, examples, and help</a\n              >!\n            </p>\n          </div>\n        </details>\n      </main>\n    `;\n  }\n\n  get providerIcon(): TemplateResult {\n    return html`<ia-icon-share\n      style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n    ></ia-icon-share>`;\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n        overflow-y: auto;\n        font-size: 1.4rem;\n        box-sizing: border-box;\n      }\n\n      header {\n        display: flex;\n        align-items: baseline;\n      }\n\n      h3 {\n        padding: 0;\n        margin: 0 1rem 0 0;\n        font-size: 1.6rem;\n      }\n\n      h4 {\n        font-size: 1.4rem;\n      }\n\n      main {\n        padding: 1rem 0;\n      }\n\n      .share-option {\n        display: block;\n        padding: 0.5rem 0;\n        font-size: 1.6rem;\n        text-decoration: none;\n        color: var(--shareLinkColor);\n        cursor: pointer;\n      }\n\n      .share-option > * {\n        display: inline-block;\n        padding: 0.2rem;\n        margin-right: 1rem;\n        vertical-align: middle;\n        border: 1px solid var(--shareIconBorder);\n        border-radius: 7px;\n        background: var(--shareIconBg);\n      }\n\n      /* Hide the triangle that appears on details tags */\n      summary::marker {\n        content: '';\n      }\n\n      summary::-webkit-details-marker {\n        display: none;\n      }\n\n      .embed {\n        padding-right: 5px;\n      }\n\n      .embed a {\n        color: var(--shareLinkColor);\n      }\n\n      .code {\n        position: relative;\n      }\n\n      textarea {\n        display: block;\n        width: 100%;\n        height: 120px;\n        padding: 0.8rem 1rem;\n        box-sizing: border-box;\n        resize: none;\n        cursor: pointer;\n        font:\n          normal 1.4rem 'Helvetica Neue',\n          Helvetica,\n          Arial,\n          sans-serif;\n        color: var(--textareaColor, #fff);\n        background: var(--textareaBg, #151515);\n      }\n\n      small {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 3rem;\n        padding: 0.5rem 1rem;\n        box-sizing: border-box;\n        font:\n          normal 1.2rem/2rem 'Helvetica Neue',\n          Helvetica,\n          Arial,\n          sans-serif;\n        color: var(--textareaBg, #151515);\n        background: var(--textareaColor, #fff);\n        opacity: 0;\n        transition: opacity 300ms linear;\n      }\n      small.visible {\n        opacity: 1;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"share-panel.js","sourceRoot":"","sources":["../../../src/menus/share-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResult,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@internetarchive/icon-share/icon-share';\nimport '@internetarchive/icon-twitter/icon-twitter';\nimport '@internetarchive/icon-facebook/icon-facebook';\nimport '@internetarchive/icon-tumblr/icon-tumblr';\nimport '@internetarchive/icon-pinterest/icon-pinterest';\nimport '@internetarchive/icon-email/icon-email';\nimport '@internetarchive/icon-link/icon-link';\n\ntype ShareOption = {\n  name: string;\n  icon: TemplateResult | string;\n  url: string;\n};\n\nconst copyToClipboard = (event: MouseEvent) => {\n  const currentTarget = event.currentTarget as HTMLElement;\n  const textarea = currentTarget.querySelector('textarea');\n  const note = currentTarget.querySelector('small') as any;\n  textarea!.select();\n  document.execCommand('copy');\n  textarea!.blur();\n  note.classList.add('visible');\n  clearTimeout(note.timeout);\n  note.timeout = setTimeout(() => note.classList.remove('visible'), 4000);\n};\n\nexport const iauxShareIcon: TemplateResult = html`<ia-icon-share\n  style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n></ia-icon-share>`;\n\n@customElement('iaux-in-share-panel')\nexport class IauxSharingOptions extends LitElement {\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({ type: String }) creator = '';\n\n  @property({ type: String }) description = '';\n\n  @property({ type: Boolean }) embedOptionsVisible = false;\n\n  @property({ type: String }) identifier = '';\n\n  @property({ type: Array }) sharingOptions: ShareOption[] = [];\n\n  @property({ type: String }) type = '';\n\n  @property({ type: Boolean }) renderHeader = false;\n\n  @property({ type: String }) fileSubPrefix = '';\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharingOptions') && !this.sharingOptions.length) {\n      this.loadProviders();\n    }\n  }\n\n  loadProviders() {\n    let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;\n    if (this.fileSubPrefix) {\n      shareUrl += `/${this.fileSubPrefix}`;\n    }\n    const shareBlurb = [\n      this.description,\n      this.creator,\n      'Free Download, Borrow, and Streaming',\n      'Internet Archive',\n    ]\n      .filter(Boolean)\n      .join(' : ');\n\n    this.sharingOptions = [\n      {\n        name: 'Twitter',\n        icon: html`<ia-icon-twitter aria-hidden=\"true\"></ia-icon-twitter>`,\n        url: `https://twitter.com/intent/tweet?${new URLSearchParams({\n          url: shareUrl,\n          text: shareBlurb,\n          via: 'internetarchive',\n        })}`,\n      },\n      {\n        name: 'Facebook',\n        icon: html`<ia-icon-facebook aria-hidden=\"true\"></ia-icon-facebook>`,\n        url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({\n          u: shareUrl,\n        })}`,\n      },\n      {\n        name: 'Tumblr',\n        icon: html`<ia-icon-tumblr aria-hidden=\"true\"></ia-icon-tumblr>`,\n        url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams(\n          {\n            posttype: 'link',\n            canonicalUrl: shareUrl,\n            title: shareBlurb,\n          },\n        )}`,\n      },\n      {\n        name: 'Pinterest',\n        icon: html`<ia-icon-pinterest aria-hidden=\"true\"></ia-icon-pinterest>`,\n        url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams(\n          {\n            url: shareUrl,\n            description: shareBlurb,\n          },\n        )}`,\n      },\n      {\n        name: 'Email',\n        icon: html`<ia-icon-email aria-hidden=\"true\"></ia-icon-email>`,\n        url: `mailto:?${new URLSearchParams({\n          subject: shareBlurb,\n          body: shareUrl,\n        })}`,\n      },\n    ];\n  }\n\n  get iframeEmbed() {\n    return `<iframe\n      src=\"https://${this.baseHost}/embed/${this.identifier}\"\n      width=\"560\" height=\"384\" frameborder=\"0\"\n      webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" allowfullscreen\n    ></iframe>`;\n  }\n\n  get bbcodeEmbed() {\n    return `[archiveorg ${this.identifier} width=560 height=384 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]`;\n  }\n\n  get helpURL() {\n    return `https://${this.baseHost}/help/audio.php?identifier=${this.identifier}`;\n  }\n\n  get header() {\n    const header = html`<header><h3>Share this ${this.type}</h3></header>`;\n    return this.renderHeader ? header : nothing;\n  }\n\n  render() {\n    return html`\n      ${this.header}\n      <div>\n        ${this.sharingOptions.map(\n          option =>\n            html` <a class=\"share-option\" href=\"${option.url}\" target=\"_blank\">\n              ${option.icon} ${option.name}\n            </a>`,\n        )}\n        <details>\n          <summary class=\"share-option\">\n            <ia-icon-link aria-hidden=\"true\"></ia-icon-link>\n            Get an embeddable link\n          </summary>\n          <div class=\"embed\">\n            <h4>Embed</h4>\n            <div class=\"code\" @click=${copyToClipboard}>\n              <textarea readonly>${this.iframeEmbed}</textarea>\n              <small>Copied to clipboard</small>\n            </div>\n            <h4>\n              Embed for wordpress.com hosted blogs and archive.org item\n              &lt;description&gt; tags\n            </h4>\n            <div class=\"code\" @click=${copyToClipboard}>\n              <textarea readonly>${this.bbcodeEmbed}</textarea>\n              <small>Copied to clipboard</small>\n            </div>\n            <p>\n              Want more?\n              <a href=${this.helpURL}\n                >Advanced embedding details, examples, and help</a\n              >!\n            </p>\n          </div>\n        </details>\n      </div>\n    `;\n  }\n\n  get providerIcon(): TemplateResult {\n    return html`<ia-icon-share\n      style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n    ></ia-icon-share>`;\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n        overflow-y: auto;\n        font-size: 1.4rem;\n        box-sizing: border-box;\n      }\n\n      header {\n        display: flex;\n        align-items: baseline;\n      }\n\n      h3 {\n        padding: 0;\n        margin: 0 1rem 0 0;\n        font-size: 1.6rem;\n      }\n\n      h4 {\n        font-size: 1.4rem;\n      }\n\n      :host > div {\n        padding: 1rem 0;\n      }\n\n      .share-option {\n        display: block;\n        padding: 0.5rem 0;\n        font-size: 1.6rem;\n        text-decoration: none;\n        color: var(--shareLinkColor);\n        cursor: pointer;\n        transition: background-color 0.2s;\n        border-radius: 6px;\n      }\n\n      .share-option:hover {\n        background-color: rgba(255, 255, 255, 0.05);\n      }\n\n      .share-option > * {\n        display: inline-block;\n        padding: 0.2rem;\n        margin-right: 1rem;\n        vertical-align: middle;\n        border: 1px solid var(--shareIconBorder);\n        border-radius: 7px;\n        background: var(--shareIconBg);\n      }\n\n      /* Hide the triangle that appears on details tags */\n      summary::marker {\n        content: '';\n      }\n\n      summary::-webkit-details-marker {\n        display: none;\n      }\n\n      .embed {\n        padding-right: 5px;\n      }\n\n      .embed a {\n        color: var(--shareLinkColor);\n      }\n\n      .code {\n        position: relative;\n      }\n\n      textarea {\n        display: block;\n        width: 100%;\n        height: 120px;\n        padding: 0.8rem 1rem;\n        box-sizing: border-box;\n        resize: none;\n        cursor: pointer;\n        font:\n          normal 1.4rem 'Helvetica Neue',\n          Helvetica,\n          Arial,\n          sans-serif;\n        color: var(--textareaColor, #fff);\n        background: var(--textareaBg, #151515);\n      }\n\n      small {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 3rem;\n        padding: 0.5rem 1rem;\n        box-sizing: border-box;\n        font:\n          normal 1.2rem/2rem 'Helvetica Neue',\n          Helvetica,\n          Arial,\n          sans-serif;\n        color: var(--textareaBg, #151515);\n        background: var(--textareaColor, #fff);\n        opacity: 0;\n        transition: opacity 300ms linear;\n      }\n      small.visible {\n        opacity: 1;\n      }\n    `;\n  }\n}\n"]}