@internetarchive/bookreader 5.0.0-88-alpha.7 → 5.0.0-88-alpha.9

package/dist/esm/BookNavigator/downloads/downloads.js

@@ -0,0 +1,69 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { css, html, LitElement, nothing } from 'lit';
+import buttonStyles from '../assets/button-base.js';
+export class IABookDownloads extends LitElement {
+  static get properties() {
+    return {
+      downloads: {
+        type: Array
+      },
+      expiration: {
+        type: Number
+      },
+      renderHeader: {
+        type: Boolean
+      },
+      isBookProtected: {
+        type: Boolean
+      }
+    };
+  }
+  constructor() {
+    super();
+    this.downloads = [];
+    this.expiration = 0;
+    this.renderHeader = false;
+    this.isBookProtected = false;
+  }
+  get formatsCount() {
+    var count = this.downloads.length;
+    return count ? html(_templateObject || (_templateObject = _taggedTemplateLiteral(["<p>", " format", "</p>"])), count, count > 1 ? 's' : '') : html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+  }
+  get loanExpiryMessage() {
+    return this.expiration ? html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["<h2>These files will expire in ", " days.</h2>"])), this.expiration) : html(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
+  }
+  renderDownloadOptions() {
+    return this.downloads.map(option => html(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        <li>\n          <a class=\"ia-button link primary\" href=\"", "\">Get ", "</a>\n          ", "\n        </li>\n      "])), option.url, option.type, option.note ? html(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["<p>", "</p>"])), option.note) : html(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])))));
+  }
+
+  /**
+   * checks if downloads list contains an LCP option
+   * @return {boolean}
+   */
+  get hasLCPOption() {
+    var regex = /^(LCP)/g;
+    var lcpAvailable = this.downloads.some(option => {
+      var _option$type;
+      return (_option$type = option.type) === null || _option$type === void 0 ? void 0 : _option$type.match(regex);
+    });
+    return lcpAvailable;
+  }
+  get header() {
+    if (!this.renderHeader) {
+      return nothing;
+    }
+    return html(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      <header>\n        <h3>Downloadable files</h3>\n        ", "\n      </header>\n    "])), this.formatsCount);
+  }
+  get installLCPSoftwareMsg() {
+    return html(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    <p>For LCP downloads, make sure you have LCP software such as <a href=\"https://thorium.edrlab.org/\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">Thorium (desktop)</a>, <a href=\"https://apps.apple.com/us/app/cantook-by-aldiko/id1476410111\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">Cantook (iOS)</a> or <a href=\"https://play.google.com/store/apps/details?id=com.aldiko.android\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">Cantook (Android)</a> installed on your device.</p>\n  "])));
+  }
+  render() {
+    return html(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      ", "\n      ", "\n      <ul>", "</ul>\n      ", "\n    "])), this.header, this.loanExpiryMessage, this.renderDownloadOptions(), this.hasLCPOption ? this.installLCPSoftwareMsg : nothing);
+  }
+  static get styles() {
+    var mainCss = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      :host {\n        display: block;\n        height: 100%;\n        padding: 1.5rem 0;\n        overflow-y: auto;\n        font-size: 1.4rem;\n        box-sizing: border-box;\n      }\n\n      a.close ia-icon {\n        --iconWidth: 18px;\n        --iconHeight: 18px;\n      }\n      a.close {\n        justify-self: end;\n      }\n\n      header {\n        display: flex;\n        align-items: center;\n        padding: 0 2rem;\n      }\n      header p {\n        padding: 0;\n        margin: 0;\n        font-size: 1.2rem;\n        font-weight: bold;\n        font-style: italic;\n      }\n      header div {\n        display: flex;\n        align-items: baseline;\n      }      \n\n      h2 {\n        font-size: 1.6rem;\n      }\n\n      h3 {\n        padding: 0;\n        margin: 0 1rem 0 0;\n        font-size: 1.4rem;\n      }\n\n      ul {\n        padding: 0;\n        margin: 0;\n        list-style: none;\n      }\n\n      p {\n        margin: .3rem 0 0 0;\n      }\n\n      li,\n      ul + p {\n        padding-bottom: 1.2rem;\n        font-size: 1.2rem;\n        line-height: 140%;\n      }\n    "])));
+    return [buttonStyles, mainCss];
+  }
+}
+customElements.define('ia-book-downloads', IABookDownloads);

package/dist/esm/BookNavigator/search/search-provider.js

@@ -0,0 +1,238 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { html, nothing } from 'lit';
+import '@internetarchive/icon-search/icon-search';
+import './search-results';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
+
+var searchState = {
+  query: '',
+  results: [],
+  resultsCount: 0,
+  queryInProgress: false,
+  errorMessage: ''
+};
+export default class SearchProvider {
+  constructor(_ref) {
+    var {
+      onProviderChange,
+      bookreader
+    } = _ref;
+    /* search menu events */
+    this.onBookSearchInitiated = this.onBookSearchInitiated.bind(this);
+    /* bookreader search events */
+    this.onSearchStarted = this.onSearchStarted.bind(this);
+    this.onSearchRequestError = this.onSearchRequestError.bind(this);
+    this.onSearchResultsClicked = this.onSearchResultsClicked.bind(this);
+    this.onSearchResultsChange = this.onSearchResultsChange.bind(this);
+    this.onSearchResultsCleared = this.onSearchResultsCleared.bind(this);
+    this.searchCanceledInMenu = this.searchCanceledInMenu.bind(this);
+
+    /* class methods */
+    this.bindEventListeners = this.bindEventListeners.bind(this);
+    this.getMenuDetails = this.getMenuDetails.bind(this);
+    this.getComponent = this.getComponent.bind(this);
+    this.updateMenu = this.updateMenu.bind(this);
+    this.onProviderChange = onProviderChange;
+    /** @type {import('@/src/BookReader.js').default} */
+    this.bookreader = bookreader;
+    this.icon = html(_templateObject || (_templateObject = _taggedTemplateLiteral(["<ia-icon-search style=\"width: var(--iconWidth); height: var(--iconHeight);\"></ia-icon-search>"])));
+    this.label = 'Search inside';
+    this.menuDetails = this.getMenuDetails();
+    this.id = 'search';
+    this.component = this.getComponent();
+    this.bindEventListeners();
+  }
+  getMenuDetails() {
+    var {
+      resultsCount,
+      query,
+      queryInProgress
+    } = searchState;
+    if (queryInProgress || !query) {
+      return nothing;
+    }
+    var unit = resultsCount === 1 ? 'result' : 'results';
+    return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["(", " ", ")"])), resultsCount, unit);
+  }
+  bindEventListeners() {
+    window.addEventListener('BookReader:SearchStarted', this.onSearchStarted);
+    window.addEventListener('BookReader:SearchCallback', this.onSearchResultsChange);
+    window.addEventListener('BookReader:SearchCallbackEmpty', event => {
+      this.onSearchRequestError(event, 'noResults');
+    });
+    window.addEventListener('BookReader:SearchCallbackNotIndexed', event => {
+      this.onSearchRequestError(event, 'notIndexed');
+    });
+    window.addEventListener('BookReader:SearchCallbackError', event => {
+      this.onSearchRequestError(event);
+    });
+    window.addEventListener('BookReader:SearchResultsCleared', () => {
+      this.onSearchResultsCleared();
+    });
+    window.addEventListener('BookReader:SearchCanceled', e => {
+      this.onSearchCanceled(e);
+    });
+  }
+
+  /**
+   * Cancel search handler
+   * resets `searchState`
+   */
+  onSearchCanceled() {
+    searchState = {
+      query: '',
+      results: [],
+      resultsCount: 0,
+      queryInProgress: false,
+      errorMessage: ''
+    };
+    var updateMenuFor = {
+      searchCanceled: true
+    };
+    this.updateMenu(updateMenuFor);
+    if (this.bookreader.urlPlugin) {
+      this.updateSearchInUrl();
+    }
+  }
+  onSearchStarted(e) {
+    var {
+      term = '',
+      instance
+    } = e.detail.props;
+    if (instance) {
+      this.bookreader = instance;
+    }
+    searchState.query = term;
+    searchState.results = [];
+    searchState.resultsCount = 0;
+    searchState.queryInProgress = true;
+    searchState.errorMessage = '';
+    this.updateMenu();
+  }
+  onBookSearchInitiated(_ref2) {
+    var {
+      detail
+    } = _ref2;
+    searchState.query = detail.query;
+    this.bookreader.search(searchState.query);
+  }
+  onSearchRequestError(event) {
+    var _errorMessages$errorT, _instance$searchResul;
+    var errorType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+    var {
+      detail: {
+        props = {}
+      }
+    } = event;
+    var {
+      instance = null
+    } = props;
+    if (instance) {
+      /* keep bookreader instance reference up-to-date */
+      this.bookreader = instance;
+    }
+    var errorMessages = {
+      noResults: '0 results',
+      notIndexed: "This book hasn't been indexed for searching yet.  We've just started indexing it,\n       so search should be available soon.  Please try again later.  Thanks!",
+      default: 'Sorry, there was an error with your search.  Please try again.'
+    };
+    var messageToShow = (_errorMessages$errorT = errorMessages[errorType]) !== null && _errorMessages$errorT !== void 0 ? _errorMessages$errorT : errorMessages.default;
+    searchState.query = (instance === null || instance === void 0 || (_instance$searchResul = instance.searchResults) === null || _instance$searchResul === void 0 ? void 0 : _instance$searchResul.q) || '';
+    searchState.results = [];
+    searchState.resultsCount = 0;
+    searchState.queryInProgress = false;
+    searchState.errorMessage = html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["<p class=\"error\">", "</p>"])), messageToShow);
+    this.updateMenu();
+  }
+  onSearchResultsChange(_ref3) {
+    var {
+      detail: {
+        props = {}
+      }
+    } = _ref3;
+    var {
+      instance = null,
+      results: searchResults = []
+    } = props;
+    if (instance) {
+      /* keep bookreader instance reference up-to-date */
+      this.bookreader = instance;
+    }
+    var results = searchResults.matches || [];
+    var resultsCount = results.length;
+    var query = searchResults.q;
+    var queryInProgress = false;
+    searchState = {
+      results,
+      resultsCount,
+      query,
+      queryInProgress,
+      errorMessage: ''
+    };
+    this.updateMenu();
+  }
+  searchCanceledInMenu() {
+    var _this$bookreader;
+    (_this$bookreader = this.bookreader) === null || _this$bookreader === void 0 || _this$bookreader.cancelSearchRequest();
+  }
+  onSearchResultsCleared() {
+    var _this$bookreader2;
+    searchState = {
+      query: '',
+      results: [],
+      resultsCount: 0,
+      queryInProgress: false,
+      errorMessage: ''
+    };
+    this.updateMenu({
+      openMenu: false
+    });
+    (_this$bookreader2 = this.bookreader) === null || _this$bookreader2 === void 0 || (_this$bookreader2 = _this$bookreader2.searchView) === null || _this$bookreader2 === void 0 || _this$bookreader2.clearSearchFieldAndResults(false);
+    if (this.bookreader.urlPlugin) {
+      this.updateSearchInUrl();
+    }
+  }
+
+  /** update URL `q=<term>` query param in URL */
+  updateSearchInUrl() {
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+      if (searchState.query) {
+        this.bookreader.urlPlugin.setUrlParam('q', searchState.query);
+      } else {
+        this.bookreader.urlPlugin.removeUrlParam('q');
+      }
+    }
+  }
+
+  /**
+   * Relays how to update side menu given the context of a search update
+    @param {{searchCanceled: boolean}} searchUpdates
+   */
+  updateMenu() {
+    var searchUpdates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    this.menuDetails = this.getMenuDetails();
+    this.component = this.getComponent();
+    this.onProviderChange(this.bookreader, searchUpdates);
+  }
+  getComponent() {
+    var {
+      query,
+      results,
+      queryInProgress,
+      errorMessage
+    } = searchState;
+    return html(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    <ia-book-search-results\n      .query=", "\n      .results=", "\n      .errorMessage=", "\n      ?queryInProgress=", "\n      ?renderSearchAllFiles=", "\n      @resultSelected=", "\n      @bookSearchInitiated=", "\n      @bookSearchResultsCleared=", "\n      @bookSearchCanceled=", "\n    ></ia-book-search-results>\n  "])), query, results, errorMessage, queryInProgress, false, this.onSearchResultsClicked, this.onBookSearchInitiated, this.onSearchResultsCleared, this.searchCanceledInMenu);
+  }
+
+  /**
+   * @param {{ detail: {match: SearchInsideMatch} }} param0
+   */
+  onSearchResultsClicked(_ref4) {
+    var {
+      detail
+    } = _ref4;
+    this.bookreader._searchPluginGoToResult(detail.match.matchIndex);
+  }
+}

package/dist/esm/BookNavigator/search/search-results.js

@@ -0,0 +1,161 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/* eslint-disable class-methods-use-this */
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { css, html, LitElement, nothing } from 'lit';
+import '@internetarchive/ia-activity-indicator';
+import checkmarkIcon from '../assets/icon_checkmark.js';
+import closeIcon from '../assets/icon_close.js';
+import buttonCSS from '../assets/button-base.js';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
+
+export class IABookSearchResults extends LitElement {
+  static get properties() {
+    return {
+      results: {
+        type: Array
+      },
+      query: {
+        type: String
+      },
+      queryInProgress: {
+        type: Boolean
+      },
+      renderHeader: {
+        type: Boolean
+      },
+      renderSearchAllFiles: {
+        type: Boolean
+      },
+      displayResultImages: {
+        type: Boolean
+      },
+      errorMessage: {
+        type: String
+      }
+    };
+  }
+  constructor() {
+    super();
+
+    /** @type {SearchInsideMatch[]} */
+    this.results = [];
+    this.query = '';
+    this.queryInProgress = false;
+    this.renderHeader = false;
+    this.renderSearchAllFiles = false;
+    this.displayResultImages = false;
+    this.errorMessage = '';
+    this.bindBookReaderListeners();
+  }
+
+  /** @inheritdoc */
+  updated() {
+    this.focusOnInputIfNecessary();
+  }
+  bindBookReaderListeners() {
+    document.addEventListener('BookReader:SearchCallback', this.setResults.bind(this));
+  }
+
+  /**
+   * Provide immediate input focus if there aren't any results displayed
+   */
+  focusOnInputIfNecessary() {
+    if (this.results.length) {
+      return;
+    }
+    var searchInput = this.shadowRoot.querySelector('input[type=\'search\']');
+    searchInput.focus();
+  }
+  setResults(_ref) {
+    var {
+      detail
+    } = _ref;
+    this.results = detail.results;
+  }
+  setQuery(e) {
+    this.query = e.currentTarget.value;
+    if (!this.query) {
+      this.cancelSearch();
+    }
+  }
+  performSearch(e) {
+    e.preventDefault();
+    var input = e.currentTarget.querySelector('input[type="search"]');
+    if (!input || !input.value) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('bookSearchInitiated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        query: this.query
+      }
+    }));
+  }
+
+  /**
+   * @param {SearchInsideMatch} match
+   */
+  selectResult(match) {
+    this.dispatchEvent(new CustomEvent('resultSelected', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        match
+      }
+    }));
+    this.dispatchEvent(new CustomEvent('closeMenu', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  cancelSearch() {
+    this.queryInProgress = false;
+    this.dispatchSearchCanceled();
+  }
+  dispatchSearchCanceled() {
+    this.dispatchEvent(new Event('bookSearchCanceled'));
+  }
+  get resultsCount() {
+    var count = this.results.length;
+    return count ? html(_templateObject || (_templateObject = _taggedTemplateLiteral(["<p>(", " result", ")</p>"])), count, count > 1 ? 's' : '') : nothing;
+  }
+  get headerSection() {
+    var header = html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["<header>\n      <h3>Search inside</h3>\n      ", "\n    </header>"])), this.resultsCount);
+    return this.renderHeader ? header : nothing;
+  }
+  get searchMultipleControls() {
+    var controls = html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      <input name=\"all_files\" id=\"all_files\" type=\"checkbox\" />\n      <label class=\"checkbox\" for=\"all_files\">Search all files</label>\n    "])));
+    return this.renderSearchAllFiles ? controls : nothing;
+  }
+  get loadingIndicator() {
+    return html(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      <div class=\"loading\">\n        <ia-activity-indicator mode=\"processing\"></ia-activity-indicator>\n        <p>Searching</p>\n        <button class=\"ia-button external cancel-search\" @click=", ">Cancel</button>\n      </div>\n    "])), this.cancelSearch);
+  }
+  get resultsSet() {
+    var resultsClass = this.displayResultImages ? 'show-image' : '';
+    return html(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      <ul class=\"results ", "\">\n        ", "\n      </ul>\n    "])), resultsClass, this.results.map(match => html(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            <li @click=", ">\n              ", "\n              <h4>", "</h4>\n              <p class=\"page-num\">Page ", "</p>\n              <p>", "</p>\n            </li>\n          "])), this.selectResult.bind(this, match), match.cover ? html(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["<img src=\"", "\" />"])), match.cover) : nothing, match.title || nothing, match.displayPageNumber, unsafeHTML(match.html))));
+  }
+  get searchForm() {
+    return html(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      <form action=\"\" method=\"get\" @submit=", ">\n        <fieldset>\n          ", "\n          <input\n            type=\"search\"\n            name=\"query\"\n            alt=\"Search inside this book.\"\n            @keyup=", "\n            @search=", "\n            .value=", "\n          />\n        </fieldset>\n      </form>\n    "])), this.performSearch, this.searchMultipleControls, this.setQuery, this.setQuery, this.query);
+  }
+  get setErrorMessage() {
+    return html(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      <p class=\"error-message\">", "</p>\n    "])), this.errorMessage);
+  }
+  get searchCTA() {
+    return html(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["<p class=\"search-cta\"><em>Please enter text to search for</em></p>"])));
+  }
+  render() {
+    var showSearchCTA = !this.queryInProgress && !this.errorMessage && !this.queryInProgress && !this.results.length;
+    return html(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      ", "\n      ", "\n      <div class=\"results-container\">\n        ", "\n        ", "\n        ", "\n        ", "\n      </div>\n    "])), this.headerSection, this.searchForm, this.queryInProgress ? this.loadingIndicator : nothing, this.errorMessage ? this.setErrorMessage : nothing, this.results.length ? this.resultsSet : nothing, showSearchCTA ? this.searchCTA : nothing);
+  }
+  static get styles() {
+    var searchResultText = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["var(--searchResultText, #adaedc)"])));
+    var searchResultBg = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["var(--searchResultBg, #272958)"])));
+    var searchResultBorder = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["var(--searchResultBorder, #adaedc)"])));
+    var activeButtonBg = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["(--tertiaryBGColor, #333)"])));
+    var mainCSS = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      :host {\n        display: block;\n        height: 100%;\n        padding: 1.5rem 1rem 2rem 0;\n        overflow-y: auto;\n        font-size: 1.4rem;\n        box-sizing: border-box;\n      }\n\n      mark {\n        padding: 0 .2rem;\n        color: ", ";\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: 2px;\n      }\n\n      h3 {\n        padding: 0;\n        margin: 0 1rem 0 0;\n        font-size: 2rem;\n      }\n\n      header {\n        display: flex;\n        align-items: center;\n        padding: 0 2rem 0 0;\n      }\n      header p {\n        padding: 0;\n        margin: 0;\n        font-size: 1.2rem;\n        font-weight: bold;\n        font-style: italic;\n      }\n\n      fieldset {\n        padding: 0 0 1rem 0;\n        border: none;\n      }\n\n      [type=\"checkbox\"] {\n        display: none;\n      }\n\n      label {\n        display: block;\n        text-align: center;\n      }\n\n      label.checkbox {\n        padding-bottom: .5rem;\n        font-size: 1.6rem;\n        line-height: 150%;\n        vertical-align: middle;\n      }\n\n      label.checkbox:after {\n        display: inline-block;\n        width: 14px;\n        height: 14px;\n        margin-left: .7rem;\n        content: \"\";\n        border-radius: 2px;\n      }\n      :checked + label.checkbox:after {\n        background-image: url('", "');\n      }\n\n      label.checkbox[for=\"all_files\"]:after {\n        background: ", " 50% 50% no-repeat;\n        border: 1px solid var(--primaryTextColor);\n      }\n\n      [type=\"search\"] {\n        color: var(--primaryTextColor);\n        border: 1px solid var(--primaryTextColor);\n        -webkit-appearance: textfield;\n        width: 100%;\n        height: 3rem;\n        padding: 0 1.5rem;\n        box-sizing: border-box;\n        font: normal 1.6rem \"Helvetica qNeue\", Helvetica, Arial, sans-serif;\n        border-radius: 1.5rem;\n        background: transparent;\n      }\n      [type=\"search\"]:focus {\n        outline: none;\n      }\n      [type=\"search\"]::-webkit-search-cancel-button {\n        width: 18px;\n        height: 18px;\n        -webkit-appearance: none;\n        appearance: none;\n        -webkit-mask: url('", "') 0 0 no-repeat;\n        mask: url('", "') 0 0 no-repeat;\n        -webkit-mask-size: 100%;\n        mask-size: 100%;\n        background: #fff;\n      }\n\n      p.page-num {\n        font-weight: bold;\n        padding-bottom: 0;\n      }\n\n      p.search-cta {\n        text-align: center;\n      }\n\n      .results-container {\n        padding-bottom: 2rem;\n      }\n\n      ul {\n        padding: 0 0 2rem 0;\n        margin: 0;\n        list-style: none;\n      }\n\n      ul.show-image li {\n        display: grid;\n      }\n\n      li {\n        cursor: pointer;\n        grid-template-columns: 30px 1fr;\n        grid-gap: 0 .5rem;\n      }\n\n      li img {\n        display: block;\n        width: 100%;\n      }\n\n      li h4 {\n        grid-column: 2 / 3;\n        padding: 0 0 2rem 0;\n        margin: 0;\n        font-weight: normal;\n      }\n\n      li p {\n        grid-column: 2 / 3;\n        padding: 0 0 1.5rem 0;\n        margin: 0;\n        font-size: 1.2rem;\n      }\n\n      .loading {\n        text-align: center;\n      }\n\n      .loading p {\n        padding: 0 0 1rem 0;\n        margin: 0;\n        font-size: 1.2rem;\n      }\n\n      ia-activity-indicator {\n        display: block;\n        width: 40px;\n        height: 40px;\n        margin: 0 auto;\n      }\n    "])), searchResultText, searchResultBg, searchResultBorder, checkmarkIcon, activeButtonBg, closeIcon, closeIcon);
+    return [buttonCSS, mainCSS];
+  }
+}
+customElements.define('ia-book-search-results', IABookSearchResults);

package/dist/esm/BookNavigator/sharing.js

@@ -0,0 +1,26 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { html } from 'lit';
+import { iauxShareIcon } from '@internetarchive/ia-item-navigator/dist/src/menus/share-panel';
+import '@internetarchive/ia-item-navigator/dist/src/menus/share-panel';
+export default class SharingProvider {
+  constructor(_ref) {
+    var {
+      item,
+      baseHost,
+      bookreader
+    } = _ref;
+    var {
+      identifier,
+      creator,
+      title
+    } = item === null || item === void 0 ? void 0 : item.metadata;
+    var creatorToUse = Array.isArray(creator) ? creator[0] : creator;
+    var subPrefix = bookreader.options.subPrefix || '';
+    var label = "Share this book";
+    this.icon = html(_templateObject || (_templateObject = _taggedTemplateLiteral(["", ""])), iauxShareIcon);
+    this.label = label;
+    this.id = 'share';
+    this.component = html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["<iaux-in-share-panel\n      .identifier=", "\n      .type=", "\n      .creator=", "\n      .description=", "\n      .baseHost=", "\n      .fileSubPrefix=", "\n    ></iaux-in-share-panel>"])), identifier, "book", creatorToUse, title, baseHost, subPrefix);
+  }
+}

package/dist/esm/BookNavigator/viewable-files.js

@@ -0,0 +1,94 @@
+var _templateObject;
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { html } from 'lit';
+import { viewableFilesIcon } from '@internetarchive/ia-item-navigator/dist/src/menus/viewable-files';
+import '@internetarchive/ia-item-navigator/dist/src/menus/viewable-files';
+
+/**
+ * * @typedef { 'title_asc' | 'title_desc' | 'default'} SortTypesT
+ */
+var sortTypes = {
+  title_asc: 'title_asc',
+  title_desc: 'title_desc',
+  default: 'default'
+};
+export default class ViewableFilesProvider {
+  /**
+   * @param {import('../BookReader').default} bookreader
+   */
+  constructor(_ref) {
+    var {
+      baseHost,
+      bookreader,
+      onProviderChange
+    } = _ref;
+    /** @type {import('../BookReader').default} */
+    this.bookreader = bookreader;
+    this.onProviderChange = onProviderChange;
+    this.baseHost = baseHost;
+    var files = bookreader.options.multipleBooksList.by_subprefix;
+    this.viewableFiles = Object.keys(files).map(item => files[item]);
+    this.volumeCount = Object.keys(files).length;
+    this.id = "volumes";
+    this.label = "Viewable files (".concat(this.volumeCount, ")");
+    this.icon = html(_templateObject || (_templateObject = _taggedTemplateLiteral(["", ""])), viewableFilesIcon);
+    this.sortOrderBy = sortTypes.default;
+    this.component = document.createElement("iaux-in-viewable-files-panel");
+    this.component.addSortToUrl = true;
+    this.component.subPrefix = bookreader.options.subPrefix || "";
+    this.component.baseHost = baseHost;
+    this.component.fileList = [...this.viewableFiles];
+    this.sortFilesComponent = document.createElement("iaux-in-sort-files-button");
+    this.sortFilesComponent.fileListRaw = this.viewableFiles;
+    this.sortFilesComponent.addEventListener('fileListSorted', e => this.handleFileListSorted(e));
+    this.actionButton = this.sortFilesComponent;
+
+    // get sort state from query param
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+      var urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
+      if (urlSortValue === sortTypes.title_asc || urlSortValue === sortTypes.title_desc) {
+        this.sortOrderBy = urlSortValue;
+      }
+    }
+    this.sortFilesComponent.sortVolumes(this.sortOrderBy);
+    this.onProviderChange(this.bookreader);
+  }
+
+  /** @param { SortTypesT } sortType */
+  handleFileListSorted(event) {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      var {
+        sortType,
+        sortedFiles
+      } = event.detail;
+      _this.viewableFiles = sortedFiles;
+      _this.sortOrderBy = sortType;
+
+      // update the component
+      _this.component.fileList = [..._this.viewableFiles];
+      yield _this.component.updateComplete;
+      if (_this.bookreader.urlPlugin) {
+        _this.bookreader.urlPlugin.pullFromAddressBar();
+        if (_this.sortOrderBy !== sortTypes.default) {
+          _this.bookreader.urlPlugin.setUrlParam('sort', _this.sortOrderBy);
+        } else {
+          _this.bookreader.urlPlugin.removeUrlParam('sort');
+        }
+      }
+      _this.onProviderChange(_this.bookreader);
+      _this.multipleFilesClicked(_this.sortOrderBy);
+    })();
+  }
+
+  /**
+   * @param { SortTypesT } orderBy
+   */
+  multipleFilesClicked(orderBy) {
+    var _window$archive_analy;
+    (_window$archive_analy = window.archive_analytics) === null || _window$archive_analy === void 0 || _window$archive_analy.send_event('BookReader', "VolumesSort|".concat(orderBy), window.location.path);
+  }
+}