@internetarchive/bookreader 5.0.0-18

package/src/BookReaderComponent/BookReaderComponent.js

@@ -0,0 +1,112 @@
+/**
+ * BookReaderTemplate to load BookNavigator components
+ */
+
+import { LitElement, html, css } from 'lit-element';
+
+import '../ItemNavigator/ItemNavigator.js';
+import '../BookNavigator/BookNavigator.js';
+
+export class BookReader extends LitElement {
+  static get properties() {
+    return {
+      base64Json: { type: String },
+      baseHost: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.base64Json = '';
+    this.baseHost = 'https://archive.org';
+  }
+
+  firstUpdated() {
+    this.fetchData();
+  }
+
+  /**
+   * Fetch metadata response from public metadata API
+   * convert response to base64 data
+   * set base64 data to props
+   */
+  async fetchData() {
+    const ocaid = new URLSearchParams(location.search).get('ocaid');
+    const response = await fetch(`${this.baseHost}/metadata/${ocaid}`);
+    const bookMetadata = await response.json();
+    const jsonBtoa = btoa(JSON.stringify(bookMetadata));
+    this.setBaseJSON(jsonBtoa);
+  }
+
+  /**
+   * Set base64 data to prop
+   * @param {string} value - base64 string format
+   */
+  setBaseJSON(value) {
+    this.base64Json = value;
+  }
+
+  render() {
+    return html`
+      <div class="ia-bookreader">
+        <item-navigator
+          itemType="bookreader"
+          basehost=${this.baseHost}
+          item=${this.base64Json}>
+          <div slot="bookreader">
+            <slot name="bookreader"></slot>
+          </div>
+        </item-navigator>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        --primaryBGColor: var(--black, #000);
+        --secondaryBGColor: #222;
+        --tertiaryBGColor: #333;
+        --primaryTextColor: var(--white, #fff);
+        --primaryCTAFill: #194880;
+        --primaryCTABorder: #c5d1df;
+        --secondaryCTAFill: #333;
+        --secondaryCTABorder: #999;
+        --primaryErrorCTAFill: #e51c26;
+        --primaryErrorCTABorder: #f8c6c8;
+      }
+
+      .ia-bookreader {
+        background-color: var(--primaryBGColor);
+        position: relative;
+        height: auto;
+      }
+
+      item-navigator {
+        display: block;
+        width: 100%;
+        color: var(--primaryTextColor);
+        --menuButtonLabelDisplay: block;
+        --menuWidth: 320px;
+        --menuSliderBg: var(--secondaryBGColor);
+        --activeButtonBg: var(--tertiaryBGColor);
+        --subpanelRightBorderColor: var(--secondaryCTABorder);
+        --animationTiming: 100ms;
+        --iconFillColor: var(--primaryTextColor);
+        --iconStrokeColor: var(--primaryTextColor);
+        --menuSliderHeaderIconHeight: 2rem;
+        --menuSliderHeaderIconWidth: 2rem;
+        --iconWidth: 2.4rem;
+        --iconHeight: 2.4rem;
+        --shareLinkColor: var(--primaryTextColor);
+        --shareIconBorder: var(--primaryTextColor);
+        --shareIconBg: var(--secondaryBGColor);
+        --activityIndicatorLoadingDotColor: var(--primaryTextColor);
+        --activityIndicatorLoadingRingColor: var(--primaryTextColor);
+      }
+    `;
+  }
+}
+
+window.customElements.define("ia-bookreader", BookReader);

package/src/ItemNavigator/ItemNavigator.js

@@ -0,0 +1,376 @@
+import { css, html, LitElement } from "lit-element";
+import { nothing } from "lit-html";
+import { IAMenuSlider } from "@internetarchive/ia-menu-slider";
+import IAIcon from "@internetarchive/ia-icons";
+import { ModalConfig } from "@internetarchive/modal-manager";
+
+export default class ItemNavigator extends LitElement {
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      item: {
+        type: Object,
+        converter(value) {
+          return !value ? {} : JSON.parse(atob(value));
+        },
+      },
+      itemType: { type: String },
+      menuShortcuts: {
+        type: Array,
+        hasChanged(newVal, oldVal) {
+          if (newVal !== oldVal) {
+            return true;
+          }
+          return false;
+        },
+      },
+      menuOpened: { type: Boolean },
+      menuContents: { type: Array },
+      openMenu: { type: String },
+      signedIn: {
+        type: Boolean,
+        converter: (arg) => {
+          if (typeof (arg) === 'boolean') {
+            return arg;
+          }
+          return arg === 'true';
+        },
+      },
+      viewportInFullscreen: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    /** TODO: Request BookModel.js
+    * Request BookNavigator.js
+    * Show loading spinner
+    * When JS assets loaded:
+    * - render book-navigator component
+    */
+    super();
+    this.baseHost = 'archive.org';
+    this.item = {};
+    this.itemType = '';
+    this.menuOpened = false;
+    this.signedIn = false;
+    this.menuShortcuts = [];
+    this.menuContents = [];
+    this.viewportInFullscreen = false;
+    this.openMenu = '';
+    this.renderModalManager();
+  }
+
+  showItemNavigatorModal({ detail }) {
+    this.modal.showModal({
+      config: this.modalConfig,
+      customModalContent: detail.customModalContent,
+    });
+  }
+
+  closeItemNavigatorModal() {
+    this.modal.closeModal();
+  }
+
+  /**
+   * Event handler - handles viewport slot going into fullscreen
+   * @param {Event} e - custom event object
+   */
+  manageViewportFullscreen({ detail }) {
+    const { isFullScreen } = detail;
+    this.viewportInFullscreen = isFullScreen;
+  }
+
+  /**
+   * Event handler - handles viewport slot going into fullscreen
+   * @param {Event} e - custom event object
+   *   @param {object} event.detail - custom event detail
+   *     @param {(open, toggle, close)} detail.action
+   *     @param {string} detail.menuId - menu id to be shown
+   */
+  manageSideMenuEvents({ detail }) {
+    const { action = '', menuId = '' } = detail;
+    if (!menuId) { return; }
+    switch (action) {
+    case 'open':
+      this.openShortcut(menuId);
+      break;
+    case 'toggle':
+      this.openMenu = menuId;
+      this.toggleMenu();
+      break;
+    default:
+      this.closeMenu();
+    }
+  }
+
+  toggleMenu() {
+    this.menuOpened = !this.menuOpened;
+  }
+
+  closeMenu() {
+    this.menuOpened = false;
+  }
+
+  /**
+   * Opens menu to selected menu
+   * @param {string} selectedMenuId
+   */
+  openShortcut(selectedMenuId = '') {
+    // open sidemenu to proper tab
+    this.openMenu = selectedMenuId;
+    this.menuOpened = true;
+  }
+
+  setOpenMenu({ detail }) {
+    const { id } = detail;
+    this.openMenu = id === this.openMenu ? '' : id;
+  }
+
+  setMenuContents({ detail }) {
+    this.menuContents = [...detail];
+  }
+
+  setMenuShortcuts({ detail }) {
+    this.menuShortcuts = [...detail];
+  }
+
+  /**
+   * computes classes for item-navigator <section> node
+   */
+  get menuClass() {
+    const drawerState = this.menuOpened ? 'open' : '';
+    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
+    return `${drawerState} ${fullscreenState}`;
+  }
+
+  get menuToggleButton() {
+    return html`
+      <button class="toggle-menu" @click=${this.toggleMenu.bind(this)}>
+        <div>
+          <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
+        </div>
+      </button>
+    `;
+  }
+
+  get menuSlider() {
+    return html`
+      <div id="menu">
+        <ia-menu-slider
+          .menus=${this.menuContents}
+          .open=${true}
+          .selectedMenu=${this.openMenu}
+          @menuTypeSelected=${this.setOpenMenu}
+          @menuSliderClosed=${this.closeMenu}
+          ?manuallyHandleClose=${true}
+          ?animateMenuOpen=${false}
+        ></ia-menu-slider>
+      </div>
+    `;
+  }
+
+  /**
+   * Returns the shortcut buttons for minimized view
+   * @return html
+   */
+  get shortcuts() {
+    // todo: aria tags
+    const shortcuts = this.menuShortcuts.map(({
+      icon,
+      id,
+    }) => html`
+        <button class="shortcut ${id}" @click="${(e) => { this.openShortcut(id); }}">
+          ${icon}
+        </button>
+      `);
+
+    return html`<div class="shortcuts">${shortcuts}</div>`;
+  }
+
+  /**
+   * Returns the side menu given it's open/close state
+   * @return html
+   */
+  get renderSideMenu() {
+    // todo: aria tags
+    return html`
+      <nav>
+        <div class="minimized">
+          ${this.shortcuts}
+          ${this.menuToggleButton}
+        </div>
+        ${this.menuSlider}
+      </nav>
+    `;
+  }
+
+  /**
+   * Given a itemType, this chooses the proper viewport component
+   * @return html
+   */
+  get renderViewport() {
+    if (this.itemType === 'bookreader') {
+      return html`
+        <book-navigator
+          .baseHost=${this.baseHost}
+          .book=${this.item}
+          ?signedIn=${this.signedIn}
+          ?sideMenuOpen=${this.menuOpened}
+          @ViewportInFullScreen=${this.manageViewportFullscreen}
+          @updateSideMenu=${this.manageSideMenuEvents}
+          @menuUpdated=${this.setMenuContents}
+          @menuShortcutsUpdated=${this.setMenuShortcuts}
+          @showItemNavigatorModal=${this.showItemNavigatorModal}
+          @closeItemNavigatorModal=${this.closeItemNavigatorModal}
+        >
+          <div slot="bookreader">
+            <slot name="bookreader"></slot>
+          </div>
+        </book-navigator>
+      `;
+    }
+    return html`<div class="viewport"></div>`;
+  }
+
+  renderModalManager() {
+    this.modal = document.createElement('modal-manager');
+    this.modal.setAttribute('id', 'item-navigator-modal');
+    this.modalConfig = new ModalConfig();
+    this.modalConfig.title = 'Delete Bookmark';
+    this.modalConfig.headline = 'This bookmark contains a note. Deleting it will permanently delete the note. Are you sure?';
+    this.modalConfig.headerColor = '#194880';
+    document.body.appendChild(this.modal);
+  }
+
+  render() {
+    const renderMenu = this.menuContents.length || this.menuShortcuts.length;
+    return html`
+      <div id="frame" class=${this.menuClass}>
+        <slot name="item-nav-header"></slot>
+        <div class="menu-and-reader">
+          ${renderMenu ? this.renderSideMenu : nothing}
+          <div id="reader">
+            ${this.renderViewport}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    const subnavWidth = css`var(--menuWidth, 320px)`;
+    const tabletPlusQuery = css`@media (min-width: 640px)`;
+    const transitionTiming = css`var(--animationTiming, 200ms)`;
+    const transitionEffect = css`transform ${transitionTiming} ease-out`;
+
+    return css`
+      #frame {
+        position: relative;
+        overflow: hidden;
+      }
+
+      #frame.fullscreen,
+      #frame.fullscreen #reader {
+        height: 100vh;
+      }
+
+      button {
+        cursor: pointer;
+        padding: 0;
+        border: 0;
+      }
+
+      button:focus,
+      button:active {
+        outline: none;
+      }
+
+      .menu-and-reader {
+        position: relative;
+      }
+
+      nav button {
+        background: none;
+      }
+
+      nav .minimized {
+        background: rgba(0, 0, 0, .7);
+        border-bottom-right-radius: 5%;
+        position: absolute;
+        padding-top: .6rem;
+        left: 0;
+        width: 4rem;
+        z-index: 2;
+      }
+
+      nav .minimized button {
+        width: var(--iconWidth);
+        height: var(--iconHeight);
+        margin: auto;
+        display: inline-flex;
+        vertical-align: middle;
+        -webkit-box-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        justify-content: center;
+        width: 4rem;
+        height: 4rem;
+      }
+
+      nav .minimized button.toggle-menu > * {
+        border: 2px solid var(--iconStrokeColor);
+        border-radius: var(--iconWidth);
+        width: var(--iconWidth);
+        height: var(--iconHeight);
+        margin: auto;
+      }
+
+      #menu {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 3;
+        overflow: hidden;
+        transform: translateX(-${subnavWidth});
+        width: ${subnavWidth};
+        transform: translateX(calc(${subnavWidth} * -1));
+        transition: ${transitionEffect};
+      }
+
+      #reader {
+        position: relative;
+        z-index: 1;
+        transition: ${transitionEffect};
+        transform: translateX(0);
+        width: 100%;
+      }
+
+      .open #menu {
+        width: ${subnavWidth};
+        transform: translateX(0);
+        transition: ${transitionEffect};
+      }
+
+      ${tabletPlusQuery} {
+        .open #reader {
+          transition: ${transitionEffect};
+          transform: translateX(${subnavWidth});
+          width: calc(100% - ${subnavWidth});
+        }
+      }
+
+      #loading-indicator {
+        display: none;
+      }
+
+      #loading-indicator.visible {
+        display: block;
+      }
+    `;
+  }
+}
+
+customElements.define('ia-icon', IAIcon);
+customElements.define('ia-menu-slider', IAMenuSlider);
+customElements.define('item-navigator', ItemNavigator);

package/src/ItemNavigator/providers/sharing.js

@@ -0,0 +1,33 @@
+import { html } from 'lit-element';
+
+/* register subpanel */
+import { IASharingOptions } from '@internetarchive/ia-sharing-options';
+customElements.define('ia-sharing-options', IASharingOptions);
+
+export default class {
+  constructor(metadata = {}, baseHost, baseItemType, subPrefix = '') {
+    const { identifier, creator, title } = metadata;
+    const encodedSubPrefix = encodeURIComponent(subPrefix);
+    const urlIdentifier = subPrefix && (subPrefix !== identifier) ? `${identifier}/${encodedSubPrefix}` : identifier;
+    this.idPath = urlIdentifier;
+    this.itemType = baseItemType;
+    const label = `Share this ${this.reconcileItemType}`;
+    this.icon = html`<ia-icon icon="share" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
+    this.label = label;
+    this.id = 'share';
+    this.component = html`<ia-sharing-options
+      identifier="${urlIdentifier}"
+      type="book"
+      creator="${creator}"
+      description="${title}"
+      baseHost="${baseHost}"
+    ></ia-sharing-options>`;
+  }
+
+  get reconcileItemType() {
+    if (this.itemType === 'bookreader') {
+      return 'book';
+    }
+    return 'item';
+  }
+}

package/src/assets/icons/1up.svg

@@ -0,0 +1,12 @@
+<svg
+  width="11"
+  height="19"
+  viewBox="0 0 11 19"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="1upTitleID 1upDescID"
+>
+  <title id="1upTitleID">One-page mode</title>
+  <desc id="1upDescID">An illustration of a rectangle representing a book page</desc>
+  <path d="m9.77194068 1c.10796015 0 .19839954.08352773.2220361.19570997l.00602322.05822495v16.49213018c0 .1202095-.07501651.22091-.17576747.2472283l-.05229185.0067066h-8.54388136c-.10796015 0-.19839954-.0835277-.2220361-.19571l-.00602322-.0582249v-16.49213018c0-.12020948.07501651-.22091.17576747-.24722832l.05229185-.0067066z" fill="none" stroke="#fff" stroke-width="1.5" />
+</svg>

package/src/assets/icons/2up.svg

@@ -0,0 +1,15 @@
+<svg
+  width="20"
+  height="19"
+  viewBox="0 0 20 19"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="2upTitleID 2upDescID"
+>
+  <title id="2upTitleID">Two-page mode</title>
+  <desc id="2upDescID">An illustration of two rectangles in a row representing an open book</desc>
+  <g fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="1.5">
+    <path d="m18.5438814 1c.2159203 0 .396799.08352773.4440722.19570997l.0120464.05822495v16.49213018c0 .1202095-.150033.22091-.3515349.2472283l-.1045837.0067066h-17.08776275c-.21592031 0-.3967991-.0835277-.44407221-.19571l-.01204644-.0582249v-16.49213018c0-.12020948.15003302-.22091.35153494-.24722832l.10458371-.0067066z" />
+    <path d="m10 2v15" stroke-linecap="square" />
+  </g>
+</svg>

package/src/assets/icons/advance.svg

@@ -0,0 +1,26 @@
+<svg
+  width="21"
+  height="19"
+  viewBox="0 0 21 19"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="advanceTitleID advanceDescID"
+>
+  <title id="advanceTitleID">Advance icon</title>
+  <desc id="advanceDescID">An arrow pointing in a forward direction</desc>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-200.000000, -15.000000)">
+      <g transform="translate(56.922243, 5.000000)">
+        <g transform="translate(144.000000, 10.000000)">
+          <g transform="translate(11.000000, 10.000000) scale(-1, 1) translate(-11.000000, -10.000000) translate(1.000000, 0.000000)">
+            <polyline stroke="#fff" stroke-width="2" stroke-linejoin="round" points="14.4444444 16.6666667 20 16.6666667 20 3.33333333 5.55555556 3.33333333"></polyline>
+            <polygon fill="#fff" points="5.55555556 0 5.55555556 6.66666667 1.11111111 3.33333333"></polygon>
+            <text transform="translate(6.666667, 13.333333) scale(-1, 1) translate(-6.666667, -13.333333) " font-family="HelveticaNeue, Helvetica Neue, sans-serif" font-size="10" font-weight="normal" fill="#fff">
+              <tspan x="0" y="17.3333333">10</tspan>
+            </text>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/assets/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg height="8" viewBox="0 0 5 8" width="5" xmlns="http://www.w3.org/2000/svg"><path d="m.30238333.28352881c.36525795-.3556459.93280829-.37581056 1.32099799-.06558269l.09308988.0844372 3 3.08108108.08194437.09533317c.27484336.36339327.26799481.87009349-.01656959 1.22592581l-.08449101.09308363-3 2.91891892-.09533796.08189041c-.3633964.27465435-.86994721.2677153-1.22568389-.01679019l-.09305904-.08447119-.08189041-.09533796c-.27465435-.3633964-.2677153-.86994722.01679019-1.22568389l.0844712-.09305904 2.28335496-2.22227407-2.30247119-2.36338332-.08192523-.09530804c-.2997677-.39632298-.26447822-.96313393.10077973-1.31877983z" fill="#fff" fill-rule="evenodd"/></svg>

package/src/assets/icons/close-circle-dark.svg

@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6 0c3.3137085 0 6 2.6862915 6 6s-2.6862915 6-6 6-6-2.6862915-6-6 2.6862915-6 6-6zm-2.3406945 2.96359116c-.19486814-.13499605-.46429254-.1157109-.63785889.05785545-.19526215.19526215-.19526215.51184463 0 .70710678l2.27155339 2.27144661-2.20567981 2.20557302-.05785545.06924789c-.13499605.19486814-.1157109.46429254.05785545.6378589.19526215.19526214.51184464.19526214.70710679 0l2.20557302-2.20567981 2.20557302 2.20567981.06924789.05785545c.19486814.13499605.46429254.1157109.6378589-.05785545.19526214-.19526215.19526214-.51184464 0-.70710679l-2.20567981-2.20557302 2.27155339-2.27144661.05785545-.06924789c.13499605-.19486814.1157109-.46429254-.05785545-.63785889-.19526215-.19526215-.51184463-.19526215-.70710678 0l-2.27144661 2.27155339-2.27144661-2.27155339z" fill="#222" fill-rule="evenodd"/></svg>

package/src/assets/icons/close-circle.svg

@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6 0c3.3137085 0 6 2.6862915 6 6s-2.6862915 6-6 6-6-2.6862915-6-6 2.6862915-6 6-6zm-2.3406945 2.96359116c-.19486814-.13499605-.46429254-.1157109-.63785889.05785545-.19526215.19526215-.19526215.51184463 0 .70710678l2.27155339 2.27144661-2.20567981 2.20557302-.05785545.06924789c-.13499605.19486814-.1157109.46429254.05785545.6378589.19526215.19526214.51184464.19526214.70710679 0l2.20557302-2.20567981 2.20557302 2.20567981.06924789.05785545c.19486814.13499605.46429254.1157109.6378589-.05785545.19526214-.19526215.19526214-.51184464 0-.70710679l-2.20567981-2.20557302 2.27155339-2.27144661.05785545-.06924789c.13499605-.19486814.1157109-.46429254-.05785545-.63785889-.19526215-.19526215-.51184463-.19526215-.70710678 0l-2.27144661 2.27155339-2.27144661-2.27155339z" fill="#fff" fill-rule="evenodd"/></svg>

package/src/assets/icons/fullscreen.svg

@@ -0,0 +1,17 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="fullscreenTitleID fullscreenDescID"
+>
+  <title id="fullscreenTitleID">Fullscreen</title>
+  <desc id="fullscreenDescID">An illustration of a square</desc>
+  <g fill="none" fill-rule="evenodd" stroke="#fff" stroke-linejoin="round" stroke-width="1.5">
+    <path d="m12 1h5v5" />
+    <path d="m12 12h5v5" transform="matrix(1 0 0 -1 0 29)" />
+    <path d="m1 1h5v5" transform="matrix(-1 0 0 1 7 0)" />
+    <path d="m1 12h5v5" transform="matrix(-1 0 0 -1 7 29)" />
+  </g>
+</svg>

package/src/assets/icons/fullscreen_exit.svg

@@ -0,0 +1,17 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="fullscreen-exitTitleID fullscreen-exitDescID"
+>
+  <title id="fullscreen-exitTitleID">Exit fullscreen</title>
+  <desc id="fullscreen-exitDescID">An illustration of a crosshair</desc>
+  <g fill="none" fill-rule="evenodd" stroke="#fff" stroke-linejoin="round" stroke-width="1.5">
+    <path d="m12 1h5v5" transform="matrix(-1 0 0 -1 29 7)" />
+    <path d="m12 12h5v5" transform="matrix(-1 0 0 1 29 0)" />
+    <path d="m1 1h5v5" transform="matrix(1 0 0 -1 0 7)" />
+    <path d="m1 12h5v5" />
+  </g>
+</svg>

package/src/assets/icons/hamburger.svg

@@ -0,0 +1,15 @@
+<svg
+  width="30px"
+  height="24px"
+  viewBox="0 0 30 24"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="hamburgerTitle hamburgerDescription">
+  <title id="hamburgerTitle">Menu icon</title>
+  <desc id="hamburgerDescription">Three parallel horizontal lines in a vertical column</desc>
+  <g stroke="none" stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="round">
+    <path d="M2,2 L28,2" stroke="#fff"></path>
+    <path d="M2,12 L28,12" stroke="#fff"></path>
+    <path d="M2,22 L28,22" stroke="#fff"></path>
+  </g>
+</svg>

package/src/assets/icons/left-arrow.svg

@@ -0,0 +1,12 @@
+<svg
+  width="12"
+  height="14"
+  viewBox="0 0 12 14"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="leftArrowTitleID leftArrowDescID"
+>
+  <title id="leftArrowTitleID">Left arrow</title>
+  <desc id="leftArrowDescID">An arrow pointing left</desc>
+  <polygon transform="translate(6.000000, 7.500000) scale(-1, 1) rotate(90.000000) translate(-6.000000, -7.500000) " points="6 2 13 13 -1 13" stroke="none" stroke-width="1" fill-rule="evenodd" fill="#fff"></polygon>
+</svg>

package/src/assets/icons/magnify-minus.svg

@@ -0,0 +1,16 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="magnify-minusTitleID magnify-minusDescID"
+>
+  <title id="magnify-minusTitleID">Zoom out</title>
+  <desc id="magnify-minusDescID">An icon of a minus symbol</desc>
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="2" />
+    <path d="m12 12 4.335213 4.335213" stroke="#fff" stroke-linecap="round" stroke-width="2" />
+    <path d="m10 7.75v-1.5h-6v1.5z" fill="#fff" fill-rule="nonzero" />
+  </g>
+</svg>