@internetarchive/ia-topnav 0.0.0-webdev7666-1

package/README.md

@@ -0,0 +1,147 @@
+# The top navigation menu component for archive.org
+
+## Update guide
+https://git.archive.org/www/offshoot/-/blob/main/guides/update-top-nav.md
+## Installation
+
+```bash
+npm i -S @internetarchive/ia-topnav
+```
+
+## Usage
+
+@see [www/index.html](www/index.html) for the simplest example with all the defaults
+
+* Demo app is in another directory: `/www/index.html`
+  * `npm run start` - runs local server in Demo directory which is in `/www` folder
+  * you can also just use your preferred server
+  * open demo: `http://localhost:8000/www/index.html`
+
+It shows a dynamic change of the logged in user name -- and how it will re-paint the menus.
+
+
+```js
+// ia-top-nav.js
+import IATopNav from '@internetarchive/ia-topnav';
+export default IATopNav;
+```
+
+```html
+<!-- index.html -->
+<script type="module">
+  import './ia-topnav.js';
+</script>
+
+<style>
+  /* Defaults */
+  ia-topnav {
+    --white: #fff;
+    --grey13: #222;
+    --grey20: #333;
+    --grey40: #666;
+    --grey28: #474747;
+    --grey60: #999;
+    --grey66: #aaa;
+    --grey80: #ccc;
+    --errorYellow: #ffcd27;
+
+    --linkColor: #428bca;
+    --linkHoverColor: var(--white);
+    --subnavLinkColor: var(--grey66);
+    --primaryTextColor: var(--white);
+    --inverseTextColor: var(--grey20);
+    --lightTextColor: var(--grey60);
+    --activeColor: var(--white);
+    --activeButtonBg: var(--grey20);
+    --iconFill: var(--grey60);
+
+    --searchActiveBg: var(--grey20);
+    --searchActiveInputBg: var(--white);
+    --searchMenuBg: var(--grey20);
+    --desktopSearchIconFill: var(--grey20);
+
+    --mediaMenuBg: var(--grey13);
+    --mediaLabelDesktopColor: var(--grey60);
+    --activeDesktopMenuIcon: var(--grey28);
+
+    --mediaSliderBg: var(--grey20);
+    --mediaSliderDesktopBg: var(--grey28);
+
+    --primaryNavBg: var(--grey13);
+    --primaryNavBottomBorder: var(--grey20);
+
+    --desktopSubnavBg: var(--grey20);
+
+    --dropdownMenuBg: var(--grey20);
+    --dropdownMenuInfoItem: var(--grey60);
+    --dropdownMenuDivider: var(--grey40);
+
+    --loginTextColor: var(--grey60);
+
+    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --logoWidthTablet: 263px;
+
+    --savePageSubmitBg: var(--grey13);
+    --savePageSubmitText: var(--white);
+    --savePageInputBorder: var(--grey60);
+    --savePageErrorText: var(--errorYellow);
+
+    --topOffset: -1500px;
+  }
+</style>
+
+<!--
+  `baseHost` is the navigation base so leave emtpy for relative links
+  `mediaBaseHost` is the base host for media like the profile picture if it's not relative
+
+  NOTE:
+  When passing in the `searchQuery` attribute from HTML, not LitElement bindings,
+  you must base64 the value to account for any special characters.
+-->
+<ia-topnav
+  baseHost="https://archive.org"
+  mediaBaseHost="https://archive.org"
+  hideSearch=${true}
+  username="shaneriley"
+  screenName="long_screen_name_that_gets_truncated"
+  searchQuery="J2Zvbyc="
+></ia-topnav>
+```
+
+
+**Menus object:**
+
+Please see [src/data/menus.js](the menu objects) for our valid `menus` property.
+
+# Development
+
+## Prerequisite
+
+```bash
+npm install
+```
+
+## Start Development Server
+
+```bash
+npm run start  // start development server and typescript compiler
+```
+then open demo - http://localhost:8000/www/index.html
+
+## Testing
+
+```bash
+npm run test
+```
+
+## Testing via browserstack
+
+```bash
+npm run test:bs
+```
+
+## Linting
+
+```bash
+npm run lint
+```

package/demo/app-root.ts

@@ -0,0 +1,183 @@
+import { html, css, LitElement, TemplateResult } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import '../src/ia-topnav';
+import type { IATopNav } from '../src/ia-topnav';
+
+@customElement('app-root')
+export class AppRoot extends LitElement {
+  @query('ia-topnav')
+  private topnav!: IATopNav;
+
+  @state() private admin = false;
+
+  @state() private canManageFlags = false;
+
+  @state() private username = '';
+
+  @state() private screenName = '';
+
+  @state() private itemIdentifier = '';
+
+  render() {
+    return html`
+      <ia-topnav
+        ?admin=${this.admin}
+        ?canManageFlags=${this.canManageFlags}
+        .username=${this.username}
+        .screenName=${this.screenName}
+        .itemIdentifier=${this.itemIdentifier}
+      >
+      </ia-topnav>
+
+      ${this.devTools}
+    `;
+  }
+
+  private get devTools(): TemplateResult {
+    return html`
+      <div id="dev-tools">
+        <h1>Dev Tools</h1>
+
+        <h2>User menu</h2>
+        <fieldset>
+          <ul>
+            <li>
+              <button
+                @click=${() => {
+                  this.screenName = 'brewster';
+                  this.username = '@brewster';
+                }}
+              >
+                Switch username to brewster
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+                  this.screenName = 'a😊b😊c😊d😊e😊f😊g😊h😊i😊';
+                  this.username = '@test';
+                }}
+              >
+                Switch username to a😊b😊c😊d😊e😊f😊g😊h😊i😊
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+                  this.screenName =
+                    'الدكتور محمالدكتور محمد العجوز محمالدكتور محمد العجوز';
+                  this.username = '@test';
+                }}
+              >
+                Switch username to محمالدكتور محمد العجوز الدكتور محمالدكتور
+                محمد العجوز
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+                  this.username = '';
+                  this.screenName = '';
+                }}
+              >
+                Switch to logged out
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+                  this.itemIdentifier = this.admin ? '' : 'boop';
+                  this.admin = !this.admin;
+                }}
+              >
+                Toggle admin mode (${this.admin ? 'on' : 'off'}) (requires
+                logged in)
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+                  this.canManageFlags = !this.canManageFlags;
+                }}
+              >
+                Toggle manage flags mode (${this.canManageFlags ? 'on' : 'off'})
+                (requires admin mode)
+              </button>
+            </li>
+          </ul>
+        </fieldset>
+
+        <h2>Local Links</h2>
+        <fieldset>
+          <button
+            @click=${() => {
+              this.topnav.localLinks = false;
+            }}
+          >
+            Disable local links
+          </button>
+          <button
+            @click=${() => {
+              this.topnav.localLinks = true;
+            }}
+          >
+            Enable local links
+          </button>
+        </fieldset>
+
+        <h2>Wayback Count</h2>
+        <fieldset>
+          <button
+            @click=${() => {
+              this.topnav.waybackPagesArchived = 'many, MAAAANNNY';
+            }}
+          >
+            Change WB pages count
+          </button>
+
+          <button
+            @click=${() => {
+              this.topnav.waybackPagesArchived = '740 billion';
+            }}
+          >
+            Reset WB pages count
+          </button>
+        </fieldset>
+
+        <h2>Search</h2>
+        <fieldset>
+          <button
+            @click=${() => {
+              this.topnav.hideSearch = true;
+            }}
+          >
+            Hide Top Row Search button, like on mobile
+          </button>
+          <button
+            @click=${() => {
+              this.topnav.hideSearch = false;
+            }}
+          >
+            Show Top Row Search button, like on mobile
+          </button>
+        </fieldset>
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: sans-serif;
+    }
+
+    #dev-tools {
+      margin: 1rem;
+    }
+  `;
+}

package/demo/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en-GB">
+
+<head>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta charset="utf-8">
+  <style>
+    html {
+      font-size: 10px;
+    }
+
+    body {
+      background: #fafafa;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <app-root></app-root>
+
+  <script type="module" src="../dist/demo/app-root.js">
+  </script>
+</body>
+
+</html>

package/dist/demo/app-root.d.ts

@@ -0,0 +1,13 @@
+import { LitElement, TemplateResult } from 'lit';
+import '../src/ia-topnav';
+export declare class AppRoot extends LitElement {
+    private topnav;
+    private admin;
+    private canManageFlags;
+    private username;
+    private screenName;
+    private itemIdentifier;
+    render(): TemplateResult<1>;
+    private get devTools();
+    static styles: import("lit").CSSResult;
+}

package/dist/demo/app-root.js

@@ -0,0 +1,197 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import '../src/ia-topnav';
+let AppRoot = class AppRoot extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.admin = false;
+        this.canManageFlags = false;
+        this.username = '';
+        this.screenName = '';
+        this.itemIdentifier = '';
+    }
+    render() {
+        return html `
+      <ia-topnav
+        ?admin=${this.admin}
+        ?canManageFlags=${this.canManageFlags}
+        .username=${this.username}
+        .screenName=${this.screenName}
+        .itemIdentifier=${this.itemIdentifier}
+      >
+      </ia-topnav>
+
+      ${this.devTools}
+    `;
+    }
+    get devTools() {
+        return html `
+      <div id="dev-tools">
+        <h1>Dev Tools</h1>
+
+        <h2>User menu</h2>
+        <fieldset>
+          <ul>
+            <li>
+              <button
+                @click=${() => {
+            this.screenName = 'brewster';
+            this.username = '@brewster';
+        }}
+              >
+                Switch username to brewster
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+            this.screenName = 'a😊b😊c😊d😊e😊f😊g😊h😊i😊';
+            this.username = '@test';
+        }}
+              >
+                Switch username to a😊b😊c😊d😊e😊f😊g😊h😊i😊
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+            this.screenName =
+                'الدكتور محمالدكتور محمد العجوز محمالدكتور محمد العجوز';
+            this.username = '@test';
+        }}
+              >
+                Switch username to محمالدكتور محمد العجوز الدكتور محمالدكتور
+                محمد العجوز
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+            this.username = '';
+            this.screenName = '';
+        }}
+              >
+                Switch to logged out
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+            this.itemIdentifier = this.admin ? '' : 'boop';
+            this.admin = !this.admin;
+        }}
+              >
+                Toggle admin mode (${this.admin ? 'on' : 'off'}) (requires
+                logged in)
+              </button>
+            </li>
+
+            <li>
+              <button
+                @click=${() => {
+            this.canManageFlags = !this.canManageFlags;
+        }}
+              >
+                Toggle manage flags mode (${this.canManageFlags ? 'on' : 'off'})
+                (requires admin mode)
+              </button>
+            </li>
+          </ul>
+        </fieldset>
+
+        <h2>Local Links</h2>
+        <fieldset>
+          <button
+            @click=${() => {
+            this.topnav.localLinks = false;
+        }}
+          >
+            Disable local links
+          </button>
+          <button
+            @click=${() => {
+            this.topnav.localLinks = true;
+        }}
+          >
+            Enable local links
+          </button>
+        </fieldset>
+
+        <h2>Wayback Count</h2>
+        <fieldset>
+          <button
+            @click=${() => {
+            this.topnav.waybackPagesArchived = 'many, MAAAANNNY';
+        }}
+          >
+            Change WB pages count
+          </button>
+
+          <button
+            @click=${() => {
+            this.topnav.waybackPagesArchived = '740 billion';
+        }}
+          >
+            Reset WB pages count
+          </button>
+        </fieldset>
+
+        <h2>Search</h2>
+        <fieldset>
+          <button
+            @click=${() => {
+            this.topnav.hideSearch = true;
+        }}
+          >
+            Hide Top Row Search button, like on mobile
+          </button>
+          <button
+            @click=${() => {
+            this.topnav.hideSearch = false;
+        }}
+          >
+            Show Top Row Search button, like on mobile
+          </button>
+        </fieldset>
+      </div>
+    `;
+    }
+};
+AppRoot.styles = css `
+    :host {
+      display: block;
+      font-family: sans-serif;
+    }
+
+    #dev-tools {
+      margin: 1rem;
+    }
+  `;
+__decorate([
+    query('ia-topnav')
+], AppRoot.prototype, "topnav", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "admin", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "canManageFlags", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "username", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "screenName", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "itemIdentifier", void 0);
+AppRoot = __decorate([
+    customElement('app-root')
+], AppRoot);
+export { AppRoot };
+//# sourceMappingURL=app-root.js.map

package/dist/demo/app-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, TemplateResult } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport '../src/ia-topnav';\nimport type { IATopNav } from '../src/ia-topnav';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  @query('ia-topnav')\n  private topnav!: IATopNav;\n\n  @state() private admin = false;\n\n  @state() private canManageFlags = false;\n\n  @state() private username = '';\n\n  @state() private screenName = '';\n\n  @state() private itemIdentifier = '';\n\n  render() {\n    return html`\n      <ia-topnav\n        ?admin=${this.admin}\n        ?canManageFlags=${this.canManageFlags}\n        .username=${this.username}\n        .screenName=${this.screenName}\n        .itemIdentifier=${this.itemIdentifier}\n      >\n      </ia-topnav>\n\n      ${this.devTools}\n    `;\n  }\n\n  private get devTools(): TemplateResult {\n    return html`\n      <div id=\"dev-tools\">\n        <h1>Dev Tools</h1>\n\n        <h2>User menu</h2>\n        <fieldset>\n          <ul>\n            <li>\n              <button\n                @click=${() => {\n                  this.screenName = 'brewster';\n                  this.username = '@brewster';\n                }}\n              >\n                Switch username to brewster\n              </button>\n            </li>\n\n            <li>\n              <button\n                @click=${() => {\n                  this.screenName = 'a😊b😊c😊d😊e😊f😊g😊h😊i😊';\n                  this.username = '@test';\n                }}\n              >\n                Switch username to a😊b😊c😊d😊e😊f😊g😊h😊i😊\n              </button>\n            </li>\n\n            <li>\n              <button\n                @click=${() => {\n                  this.screenName =\n                    'الدكتور محمالدكتور محمد العجوز محمالدكتور محمد العجوز';\n                  this.username = '@test';\n                }}\n              >\n                Switch username to محمالدكتور محمد العجوز الدكتور محمالدكتور\n                محمد العجوز\n              </button>\n            </li>\n\n            <li>\n              <button\n                @click=${() => {\n                  this.username = '';\n                  this.screenName = '';\n                }}\n              >\n                Switch to logged out\n              </button>\n            </li>\n\n            <li>\n              <button\n                @click=${() => {\n                  this.itemIdentifier = this.admin ? '' : 'boop';\n                  this.admin = !this.admin;\n                }}\n              >\n                Toggle admin mode (${this.admin ? 'on' : 'off'}) (requires\n                logged in)\n              </button>\n            </li>\n\n            <li>\n              <button\n                @click=${() => {\n                  this.canManageFlags = !this.canManageFlags;\n                }}\n              >\n                Toggle manage flags mode (${this.canManageFlags ? 'on' : 'off'})\n                (requires admin mode)\n              </button>\n            </li>\n          </ul>\n        </fieldset>\n\n        <h2>Local Links</h2>\n        <fieldset>\n          <button\n            @click=${() => {\n              this.topnav.localLinks = false;\n            }}\n          >\n            Disable local links\n          </button>\n          <button\n            @click=${() => {\n              this.topnav.localLinks = true;\n            }}\n          >\n            Enable local links\n          </button>\n        </fieldset>\n\n        <h2>Wayback Count</h2>\n        <fieldset>\n          <button\n            @click=${() => {\n              this.topnav.waybackPagesArchived = 'many, MAAAANNNY';\n            }}\n          >\n            Change WB pages count\n          </button>\n\n          <button\n            @click=${() => {\n              this.topnav.waybackPagesArchived = '740 billion';\n            }}\n          >\n            Reset WB pages count\n          </button>\n        </fieldset>\n\n        <h2>Search</h2>\n        <fieldset>\n          <button\n            @click=${() => {\n              this.topnav.hideSearch = true;\n            }}\n          >\n            Hide Top Row Search button, like on mobile\n          </button>\n          <button\n            @click=${() => {\n              this.topnav.hideSearch = false;\n            }}\n          >\n            Show Top Row Search button, like on mobile\n          </button>\n        </fieldset>\n      </div>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      font-family: sans-serif;\n    }\n\n    #dev-tools {\n      margin: 1rem;\n    }\n  `;\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { IATopNav } from './src/ia-topnav';
+export { IATopNav };

package/dist/index.js

@@ -0,0 +1,3 @@
+import { IATopNav } from './src/ia-topnav';
+export { IATopNav };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import { IATopNav } from './src/ia-topnav';\n\nexport { IATopNav };\n"]}

package/dist/src/assets/img/hamburger.d.ts

@@ -0,0 +1,7 @@
+import Icon from './icon';
+export declare class HamBurger extends Icon {
+    static get styles(): import("lit").CSSResult;
+    static get closed(): import("lit").TemplateResult<1>;
+    static get opened(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/assets/img/hamburger.js

@@ -0,0 +1,51 @@
+var HamBurger_1;
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import Icon from './icon';
+import icons from './icons';
+import { customElement } from 'lit/decorators.js';
+let HamBurger = HamBurger_1 = class HamBurger extends Icon {
+    static get styles() {
+        return css `
+      svg {
+        display: block;
+        height: 4rem;
+        width: 4rem;
+      }
+      .fill-color {
+        fill: var(--activeColor);
+      }
+    `;
+    }
+    static get closed() {
+        return html `
+      <svg
+        viewBox="0 0 40 40"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-labelledby="hamburgerTitleID hamburgerDescID"
+      >
+        <title id="hamburgerTitleID">Hamburger icon</title>
+        <desc id="hamburgerDescID">
+          An icon used to represent a menu that can be toggled by interacting
+          with this icon.
+        </desc>
+        <path
+          d="m30.5 26.5c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5z"
+          fill="#999"
+          fill-rule="evenodd"
+        />
+      </svg>
+    `;
+    }
+    static get opened() {
+        return icons.close;
+    }
+    render() {
+        return this.active ? HamBurger_1.opened : HamBurger_1.closed;
+    }
+};
+HamBurger = HamBurger_1 = __decorate([
+    customElement('icon-hamburger')
+], HamBurger);
+export { HamBurger };
+//# sourceMappingURL=hamburger.js.map

package/dist/src/assets/img/hamburger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hamburger.js","sourceRoot":"","sources":["../../../../src/assets/img/hamburger.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,SAAS,iBAAf,MAAM,SAAU,SAAQ,IAAI;IACjC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;KAST,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;KAiBV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,KAAK,CAAC,KAAK,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,WAAS,CAAC,MAAM,CAAC,CAAC,CAAC,WAAS,CAAC,MAAM,CAAC;IAC3D,CAAC;CACF,CAAA;AA1CY,SAAS;IADrB,aAAa,CAAC,gBAAgB,CAAC;GACnB,SAAS,CA0CrB","sourcesContent":["import { html, css } from 'lit';\nimport Icon from './icon';\nimport icons from './icons';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('icon-hamburger')\nexport class HamBurger extends Icon {\n  static get styles() {\n    return css`\n      svg {\n        display: block;\n        height: 4rem;\n        width: 4rem;\n      }\n      .fill-color {\n        fill: var(--activeColor);\n      }\n    `;\n  }\n\n  static get closed() {\n    return html`\n      <svg\n        viewBox=\"0 0 40 40\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-labelledby=\"hamburgerTitleID hamburgerDescID\"\n      >\n        <title id=\"hamburgerTitleID\">Hamburger icon</title>\n        <desc id=\"hamburgerDescID\">\n          An icon used to represent a menu that can be toggled by interacting\n          with this icon.\n        </desc>\n        <path\n          d=\"m30.5 26.5c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5z\"\n          fill=\"#999\"\n          fill-rule=\"evenodd\"\n        />\n      </svg>\n    `;\n  }\n\n  static get opened() {\n    return icons.close;\n  }\n\n  render() {\n    return this.active ? HamBurger.opened : HamBurger.closed;\n  }\n}\n"]}

package/dist/src/assets/img/ia-icon.d.ts

@@ -0,0 +1,7 @@
+import { LitElement, TemplateResult } from 'lit';
+import './icons';
+export declare class IAIcon extends LitElement {
+    icon: string;
+    static get icons(): Record<string, TemplateResult>;
+    render(): TemplateResult;
+}