@internetarchive/bookreader 5.0.0-88-alpha.10 → 5.0.0-88

package/dist/esm/BookReader/Mode2UpLit.js

@@ -1,1020 +0,0 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-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 _decorate(e, r, t, i) { var o = _getDecoratorsApi(); if (i) for (var n = 0; n < i.length; n++) o = i[n](o); var s = r(function (e) { o.initializeInstanceElements(e, a.elements); }, t), a = o.decorateClass(_coalesceClassElements(s.d.map(_createElementDescriptor)), e); return o.initializeClassElements(s.F, a.elements), o.runClassFinishers(s.F, a.finishers); }
-function _getDecoratorsApi() { _getDecoratorsApi = function _getDecoratorsApi() { return e; }; var e = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function initializeInstanceElements(e, r) { ["method", "field"].forEach(function (t) { r.forEach(function (r) { r.kind === t && "own" === r.placement && this.defineClassElement(e, r); }, this); }, this); }, initializeClassElements: function initializeClassElements(e, r) { var t = e.prototype; ["method", "field"].forEach(function (i) { r.forEach(function (r) { var o = r.placement; if (r.kind === i && ("static" === o || "prototype" === o)) { var n = "static" === o ? e : t; this.defineClassElement(n, r); } }, this); }, this); }, defineClassElement: function defineClassElement(e, r) { var t = r.descriptor; if ("field" === r.kind) { var i = r.initializer; t = { enumerable: t.enumerable, writable: t.writable, configurable: t.configurable, value: void 0 === i ? void 0 : i.call(e) }; } Object.defineProperty(e, r.key, t); }, decorateClass: function decorateClass(e, r) { var t = [], i = [], o = { static: [], prototype: [], own: [] }; if (e.forEach(function (e) { this.addElementPlacement(e, o); }, this), e.forEach(function (e) { if (!_hasDecorators(e)) return t.push(e); var r = this.decorateElement(e, o); t.push(r.element), t.push.apply(t, r.extras), i.push.apply(i, r.finishers); }, this), !r) return { elements: t, finishers: i }; var n = this.decorateConstructor(t, r); return i.push.apply(i, n.finishers), n.finishers = i, n; }, addElementPlacement: function addElementPlacement(e, r, t) { var i = r[e.placement]; if (!t && -1 !== i.indexOf(e.key)) throw new TypeError("Duplicated element (" + e.key + ")"); i.push(e.key); }, decorateElement: function decorateElement(e, r) { for (var t = [], i = [], o = e.decorators, n = o.length - 1; n >= 0; n--) { var s = r[e.placement]; s.splice(s.indexOf(e.key), 1); var a = this.fromElementDescriptor(e), l = this.toElementFinisherExtras((0, o[n])(a) || a); e = l.element, this.addElementPlacement(e, r), l.finisher && i.push(l.finisher); var c = l.extras; if (c) { for (var p = 0; p < c.length; p++) this.addElementPlacement(c[p], r); t.push.apply(t, c); } } return { element: e, finishers: i, extras: t }; }, decorateConstructor: function decorateConstructor(e, r) { for (var t = [], i = r.length - 1; i >= 0; i--) { var o = this.fromClassDescriptor(e), n = this.toClassDescriptor((0, r[i])(o) || o); if (void 0 !== n.finisher && t.push(n.finisher), void 0 !== n.elements) { e = n.elements; for (var s = 0; s < e.length - 1; s++) for (var a = s + 1; a < e.length; a++) if (e[s].key === e[a].key && e[s].placement === e[a].placement) throw new TypeError("Duplicated element (" + e[s].key + ")"); } } return { elements: e, finishers: t }; }, fromElementDescriptor: function fromElementDescriptor(e) { var r = { kind: e.kind, key: e.key, placement: e.placement, descriptor: e.descriptor }; return Object.defineProperty(r, Symbol.toStringTag, { value: "Descriptor", configurable: !0 }), "field" === e.kind && (r.initializer = e.initializer), r; }, toElementDescriptors: function toElementDescriptors(e) { if (void 0 !== e) return _toArray(e).map(function (e) { var r = this.toElementDescriptor(e); return this.disallowProperty(e, "finisher", "An element descriptor"), this.disallowProperty(e, "extras", "An element descriptor"), r; }, this); }, toElementDescriptor: function toElementDescriptor(e) { var r = e.kind + ""; if ("method" !== r && "field" !== r) throw new TypeError('An element descriptor\'s .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "' + r + '"'); var t = _toPropertyKey(e.key), i = e.placement + ""; if ("static" !== i && "prototype" !== i && "own" !== i) throw new TypeError('An element descriptor\'s .placement property must be one of "static", "prototype" or "own", but a decorator created an element descriptor with .placement "' + i + '"'); var o = e.descriptor; this.disallowProperty(e, "elements", "An element descriptor"); var n = { kind: r, key: t, placement: i, descriptor: Object.assign({}, o) }; return "field" !== r ? this.disallowProperty(e, "initializer", "A method descriptor") : (this.disallowProperty(o, "get", "The property descriptor of a field descriptor"), this.disallowProperty(o, "set", "The property descriptor of a field descriptor"), this.disallowProperty(o, "value", "The property descriptor of a field descriptor"), n.initializer = e.initializer), n; }, toElementFinisherExtras: function toElementFinisherExtras(e) { return { element: this.toElementDescriptor(e), finisher: _optionalCallableProperty(e, "finisher"), extras: this.toElementDescriptors(e.extras) }; }, fromClassDescriptor: function fromClassDescriptor(e) { var r = { kind: "class", elements: e.map(this.fromElementDescriptor, this) }; return Object.defineProperty(r, Symbol.toStringTag, { value: "Descriptor", configurable: !0 }), r; }, toClassDescriptor: function toClassDescriptor(e) { var r = e.kind + ""; if ("class" !== r) throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator created a class descriptor with .kind "' + r + '"'); this.disallowProperty(e, "key", "A class descriptor"), this.disallowProperty(e, "placement", "A class descriptor"), this.disallowProperty(e, "descriptor", "A class descriptor"), this.disallowProperty(e, "initializer", "A class descriptor"), this.disallowProperty(e, "extras", "A class descriptor"); var t = _optionalCallableProperty(e, "finisher"); return { elements: this.toElementDescriptors(e.elements), finisher: t }; }, runClassFinishers: function runClassFinishers(e, r) { for (var t = 0; t < r.length; t++) { var i = (0, r[t])(e); if (void 0 !== i) { if ("function" != typeof i) throw new TypeError("Finishers must return a constructor."); e = i; } } return e; }, disallowProperty: function disallowProperty(e, r, t) { if (void 0 !== e[r]) throw new TypeError(t + " can't have a ." + r + " property."); } }; return e; }
-function _createElementDescriptor(e) { var r, t = _toPropertyKey(e.key); "method" === e.kind ? r = { value: e.value, writable: !0, configurable: !0, enumerable: !1 } : "get" === e.kind ? r = { get: e.value, configurable: !0, enumerable: !1 } : "set" === e.kind ? r = { set: e.value, configurable: !0, enumerable: !1 } : "field" === e.kind && (r = { configurable: !0, writable: !0, enumerable: !0 }); var i = { kind: "field" === e.kind ? "field" : "method", key: t, placement: e.static ? "static" : "field" === e.kind ? "own" : "prototype", descriptor: r }; return e.decorators && (i.decorators = e.decorators), "field" === e.kind && (i.initializer = e.value), i; }
-function _coalesceGetterSetter(e, r) { void 0 !== e.descriptor.get ? r.descriptor.get = e.descriptor.get : r.descriptor.set = e.descriptor.set; }
-function _coalesceClassElements(e) { for (var r = [], isSameElement = function isSameElement(e) { return "method" === e.kind && e.key === o.key && e.placement === o.placement; }, t = 0; t < e.length; t++) { var i, o = e[t]; if ("method" === o.kind && (i = r.find(isSameElement))) { if (_isDataDescriptor(o.descriptor) || _isDataDescriptor(i.descriptor)) { if (_hasDecorators(o) || _hasDecorators(i)) throw new ReferenceError("Duplicated methods (" + o.key + ") can't be decorated."); i.descriptor = o.descriptor; } else { if (_hasDecorators(o)) { if (_hasDecorators(i)) throw new ReferenceError("Decorators can't be placed on different accessors with for the same property (" + o.key + ")."); i.decorators = o.decorators; } _coalesceGetterSetter(o, i); } } else r.push(o); } return r; }
-function _hasDecorators(e) { return e.decorators && e.decorators.length; }
-function _isDataDescriptor(e) { return void 0 !== e && !(void 0 === e.value && void 0 === e.writable); }
-function _optionalCallableProperty(e, r) { var t = e[r]; if (void 0 !== t && "function" != typeof t) throw new TypeError("Expected '" + r + "' to be a function"); return t; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _superPropGet(t, e, o, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), e, o); return 2 & r && "function" == typeof p ? function (t) { return p.apply(o, t); } : p; }
-function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
-function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-// @ts-check
-import { customElement, property, query } from 'lit/decorators.js';
-import { LitElement, html } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
-import { ModeSmoothZoom } from './ModeSmoothZoom';
-import { arrChanged, promisifyEvent } from './utils';
-import { HTMLDimensionsCacher } from "./utils/HTMLDimensionsCacher";
-import { PageModel } from './BookModel';
-import { ModeCoordinateSpace } from './ModeCoordinateSpace';
-/** @typedef {import('./BookModel').BookModel} BookModel */
-/** @typedef {import('./BookModel').PageIndex} PageIndex */
-/** @typedef {import('./ModeSmoothZoom').SmoothZoomable} SmoothZoomable */
-/** @typedef {import('./PageContainer').PageContainer} PageContainer */
-/** @typedef {import('../BookReader').default} BookReader */
-
-// I _have_ to make this globally public, otherwise it won't let me call
-// its constructor :/
-/** @implements {SmoothZoomable} */
-export var Mode2UpLit = _decorate(null, function (_initialize, _LitElement) {
-  class Mode2UpLit extends _LitElement {
-    /****************************************/
-    /************** PROPERTIES **************/
-    /****************************************/
-
-    /** @type {BookReader} */
-
-    /************** BOOK-RELATED PROPERTIES **************/
-
-    /** @type {BookModel} */
-
-    /************** SCALE-RELATED PROPERTIES **************/
-
-    /** @type {ModeCoordinateSpace} Manage conversion between coordinates */
-
-    /** @type {import('./options').AutoFitValues} */
-
-    /************** VIRTUAL-FLIPPING PROPERTIES **************/
-
-    /** ms for flip animation */
-
-    /** @type {PageModel[]} */
-
-    /** @type {PageModel | null} */
-
-    /** @type {PageModel | null} */
-
-    /** @type {PageModel[]} */
-
-    /** @type {Record<PageIndex, PageContainer>} position in inches */
-
-    /** @type {{ direction: 'left' | 'right', pagesFlipping: [PageIndex, PageIndex], pagesFlippingCount: number }} */
-
-    /** @private cache this value */
-
-    /************** DOM-RELATED PROPERTIES **************/
-
-    /** @type {HTMLElement} */
-
-    /** @type {HTMLElement} */
-
-    /** @type {HTMLElement} */
-
-    /** @param {PageModel} page */
-
-    /** @param {PageModel} page */
-
-    /**
-     * @param {PageModel | null} pageLeft
-     * @param {PageModel | null} pageRight
-     */
-
-    /** @type {HTMLDimensionsCacher} Cache things like clientWidth to reduce repaints */
-
-    /************** CONSTANT PROPERTIES **************/
-
-    /** How much to zoom when zoom button pressed */
-
-    /** How thick a page is in the real world, as an estimate for the leafs */
-
-    /****************************************/
-    /************** PUBLIC API **************/
-    /****************************************/
-
-    /************** MAIN PUBLIC METHODS **************/
-
-    /**
-     * @param {PageIndex} index
-     * TODO Remove smooth option from everywhere.
-     */
-
-    /********************************************/
-    /************** INTERNAL STUFF **************/
-    /********************************************/
-
-    /************** LIFE CYCLE **************/
-
-    /**
-     * @param {BookModel} book
-     * @param {BookReader} br
-     */
-    constructor(book, br) {
-      super();
-      _initialize(this);
-      this.book = book;
-
-      /** @type {BookReader} */
-      this.br = br;
-    }
-
-    /** @override */
-
-    /** @override */
-
-    /** @override */
-
-    /** @override */
-
-    /************** LIT CONFIGS **************/
-
-    /** @override */
-
-    /************** RENDERING **************/
-
-    /** @override */
-
-    /** @param {PageModel} page */
-
-    /**
-     * @param {PageIndex} startIndex
-     */
-
-    /** @param {PageModel} page */
-
-    /**
-     * @param {'left' | 'right'} side
-     * Renders the current leaf edges, as well as any "moving" leaf edges,
-     * i.e. leaf edges that are currently being flipped. Uses a custom element
-     * to render br-leaf-edges.
-     **/
-
-    /**
-     * @returns {PageModel[]}
-     */
-
-    /**
-     * @param {PageModel} page
-     * @param {import('./options').AutoFitValues} autoFit
-     */
-
-    /**
-     * @param {PageModel} page
-     * @param {number} scale
-     * @returns {{x: number, y: number}}
-     */
-
-    /************** VIRTUAL FLIPPING LOGIC **************/
-
-    /**
-     * @param {'left' | 'right' | 'next' | 'prev' | PageIndex | PageModel | {left: PageModel | null, right: PageModel | null}} nextSpread
-     */
-
-    /**
-     * @param {'left' | 'right' | 'next' | 'prev' | PageIndex | PageModel | {left: PageModel | null, right: PageModel | null}} nextSpread
-     * @returns {{left: PageModel | null, right: PageModel | null}}
-     */
-
-    /************** INPUT HANDLERS **************/
-
-    /**
-     * @param {MouseEvent} ev
-     */
-  }
-  return {
-    F: Mode2UpLit,
-    d: [{
-      kind: "field",
-      key: "br",
-      value: void 0
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Object
-      })],
-      key: "book",
-      value: void 0
-    }, {
-      kind: "field",
-      key: "coordSpace",
-      value() {
-        return new ModeCoordinateSpace(this);
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Number
-      })],
-      key: "scale",
-      value() {
-        return 1;
-      }
-    }, {
-      kind: "field",
-      key: "initialScale",
-      value() {
-        return 1;
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: String
-      })],
-      key: "autoFit",
-      value() {
-        return 'auto';
-      }
-    }, {
-      kind: "field",
-      key: "flipSpeed",
-      value() {
-        return 400;
-      }
-    }, {
-      kind: "field",
-      decorators: [query('.br-mode-2up__leafs--flipping')],
-      key: "$flippingEdges",
-      value: void 0
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Array,
-        hasChanged: arrChanged
-      })],
-      key: "visiblePages",
-      value() {
-        return [];
-      }
-    }, {
-      kind: "get",
-      key: "pageLeft",
-      value: function value() {
-        return this.visiblePages.find(p => p.pageSide == 'L');
-      }
-    }, {
-      kind: "get",
-      key: "pageRight",
-      value: function value() {
-        return this.visiblePages.find(p => p.pageSide == 'R');
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Array
-      })],
-      key: "renderedPages",
-      value() {
-        return [];
-      }
-    }, {
-      kind: "field",
-      key: "pageContainerCache",
-      value() {
-        return {};
-      }
-    }, {
-      kind: "field",
-      key: "activeFlip",
-      value() {
-        return null;
-      }
-    }, {
-      kind: "field",
-      key: "_leftCoverWidth",
-      value() {
-        return 0;
-      }
-    }, {
-      kind: "get",
-      key: "$container",
-      value: function value() {
-        return this;
-      }
-    }, {
-      kind: "get",
-      key: "$visibleWorld",
-      value: function value() {
-        return this.$book;
-      }
-    }, {
-      kind: "field",
-      decorators: [query('.br-mode-2up__book')],
-      key: "$book",
-      value: void 0
-    }, {
-      kind: "get",
-      key: "positions",
-      value: function value() {
-        return this.computePositions(this.pageLeft, this.pageRight);
-      }
-    }, {
-      kind: "method",
-      key: "computePageHeight",
-      value: function computePageHeight(page) {
-        return this.book.getMedianPageSizeInches().height;
-      }
-    }, {
-      kind: "method",
-      key: "computePageWidth",
-      value: function computePageWidth(page) {
-        return page.widthInches * this.computePageHeight(page) / page.heightInches;
-      }
-    }, {
-      kind: "method",
-      key: "computePositions",
-      value: function computePositions(pageLeft, pageRight) {
-        var _pageLeft$index, _this$activeFlip, _pageRight$index, _this$activeFlip2;
-        var computePageWidth = this.computePageWidth.bind(this);
-        var numLeafs = this.book.getNumLeafs();
-        var movingPagesWidth = this.activeFlip ? Math.ceil(this.activeFlip.pagesFlippingCount / 2) * this.PAGE_THICKNESS_IN : 0;
-        var leftPagesCount = this.book.pageProgression == 'lr' ? (_pageLeft$index = pageLeft === null || pageLeft === void 0 ? void 0 : pageLeft.index) !== null && _pageLeft$index !== void 0 ? _pageLeft$index : 0 : !pageLeft ? 0 : numLeafs - pageLeft.index;
-
-        // Everything is relative to the gutter
-        var gutter = this._leftCoverWidth + leftPagesCount * this.PAGE_THICKNESS_IN;
-        var pageLeftEnd = gutter;
-        var pageLeftWidth = !pageLeft ? computePageWidth(pageRight.right) : computePageWidth(pageLeft);
-        var pageLeftStart = gutter - pageLeftWidth;
-        var leafEdgesLeftEnd = pageLeftStart; // leafEdgesLeftStart + leafEdgesLeftMainWidth + leafEdgesLeftMovingWidth;
-        var leafEdgesLeftMovingWidth = ((_this$activeFlip = this.activeFlip) === null || _this$activeFlip === void 0 ? void 0 : _this$activeFlip.direction) != 'left' ? 0 : movingPagesWidth;
-        var leafEdgesLeftMainWidth = Math.ceil(leftPagesCount / 2) * this.PAGE_THICKNESS_IN - leafEdgesLeftMovingWidth;
-        var leafEdgesLeftFullWidth = leafEdgesLeftMovingWidth + leafEdgesLeftMainWidth;
-        var leafEdgesLeftMovingStart = leafEdgesLeftEnd - leafEdgesLeftMovingWidth;
-        var leafEdgesLeftStart = leafEdgesLeftMovingStart - leafEdgesLeftMainWidth;
-        var pageRightStart = gutter;
-        var pageRightWidth = !pageRight ? 0 : computePageWidth(pageRight);
-        var pageRightEnd = pageRightStart + pageRightWidth;
-        var rightPagesCount = this.book.pageProgression == 'lr' ? !pageRight ? 0 : numLeafs - pageRight.index : (_pageRight$index = pageRight === null || pageRight === void 0 ? void 0 : pageRight.index) !== null && _pageRight$index !== void 0 ? _pageRight$index : 0;
-        var leafEdgesRightStart = pageRightEnd;
-        var leafEdgesRightMovingWidth = ((_this$activeFlip2 = this.activeFlip) === null || _this$activeFlip2 === void 0 ? void 0 : _this$activeFlip2.direction) != 'right' ? 0 : movingPagesWidth;
-        var leafEdgesRightMainStart = leafEdgesRightStart + leafEdgesRightMovingWidth;
-        var leafEdgesRightMainWidth = Math.ceil(rightPagesCount / 2) * this.PAGE_THICKNESS_IN - leafEdgesRightMovingWidth;
-        var leafEdgesRightEnd = leafEdgesRightStart + leafEdgesRightMainWidth + leafEdgesRightMovingWidth;
-        var leafEdgesRightFullWidth = leafEdgesRightMovingWidth + leafEdgesRightMainWidth;
-        var spreadWidth = pageRightEnd - pageLeftStart;
-        var bookWidth = leafEdgesRightEnd - leafEdgesLeftStart;
-        return {
-          leafEdgesLeftStart,
-          leafEdgesLeftMainWidth,
-          leafEdgesLeftMovingStart,
-          leafEdgesLeftMovingWidth,
-          leafEdgesLeftEnd,
-          leafEdgesLeftFullWidth,
-          pageLeftStart,
-          pageLeftWidth,
-          pageLeftEnd,
-          gutter,
-          pageRightStart,
-          pageRightWidth,
-          pageRightEnd,
-          leafEdgesRightStart,
-          leafEdgesRightMovingWidth,
-          leafEdgesRightMainStart,
-          leafEdgesRightMainWidth,
-          leafEdgesRightEnd,
-          leafEdgesRightFullWidth,
-          spreadWidth,
-          bookWidth
-        };
-      }
-    }, {
-      kind: "field",
-      key: "htmlDimensionsCacher",
-      value() {
-        return new HTMLDimensionsCacher(this);
-      }
-    }, {
-      kind: "field",
-      key: "smoothZoomer",
-      value() {
-        return new ModeSmoothZoom(this);
-      }
-    }, {
-      kind: "field",
-      key: "ZOOM_FACTOR",
-      value() {
-        return 1.1;
-      }
-    }, {
-      kind: "field",
-      key: "PAGE_THICKNESS_IN",
-      value() {
-        return 0.002;
-      }
-    }, {
-      kind: "method",
-      key: "jumpToIndex",
-      value: (function () {
-        var _jumpToIndex = _asyncToGenerator(function* (index) {
-          var {
-            smooth = true
-          } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-          yield this.flipAnimation(index, {
-            animate: smooth
-          });
-        });
-        function jumpToIndex(_x) {
-          return _jumpToIndex.apply(this, arguments);
-        }
-        return jumpToIndex;
-      }())
-    }, {
-      kind: "method",
-      key: "zoomIn",
-      value: function zoomIn() {
-        this.scale *= this.ZOOM_FACTOR;
-      }
-    }, {
-      kind: "method",
-      key: "zoomOut",
-      value: function zoomOut() {
-        this.scale *= 1 / this.ZOOM_FACTOR;
-      }
-    }, {
-      kind: "method",
-      key: "firstUpdated",
-      value: function firstUpdated(changedProps) {
-        _superPropGet(Mode2UpLit, "firstUpdated", this, 3)([changedProps]);
-        this.htmlDimensionsCacher.updateClientSizes();
-        this.smoothZoomer.attach();
-      }
-    }, {
-      kind: "method",
-      key: "connectedCallback",
-      value: function connectedCallback() {
-        _superPropGet(Mode2UpLit, "connectedCallback", this, 3)([]);
-        this.htmlDimensionsCacher.attachResizeListener();
-        this.smoothZoomer.attach();
-      }
-    }, {
-      kind: "method",
-      key: "disconnectedCallback",
-      value: function disconnectedCallback() {
-        this.htmlDimensionsCacher.detachResizeListener();
-        this.smoothZoomer.detach();
-        _superPropGet(Mode2UpLit, "disconnectedCallback", this, 3)([]);
-      }
-    }, {
-      kind: "method",
-      key: "updated",
-      value: function updated(changedProps) {
-        // this.X is the new value
-        // changedProps.get('X') is the old value
-        if (changedProps.has('book')) {
-          this._leftCoverWidth = this.computePageWidth(this.book.getPage(this.book.pageProgression == 'lr' ? 0 : -1));
-        }
-        if (changedProps.has('visiblePages')) {
-          this.renderedPages = this.computeRenderedPages();
-          this.br.displayedIndices = this.visiblePages.map(p => p.index);
-          this.br.updateFirstIndex(this.br.displayedIndices[0]);
-          this.br._components.navbar.updateNavIndexThrottled();
-        }
-        if (changedProps.has('autoFit')) {
-          if (this.autoFit != 'none') {
-            this.resizeViaAutofit();
-          }
-        }
-        if (changedProps.has('scale')) {
-          var oldVal = changedProps.get('scale');
-          this.recenter();
-          this.smoothZoomer.updateViewportOnZoom(this.scale, oldVal);
-        }
-      }
-    }, {
-      kind: "method",
-      key: "createRenderRoot",
-      value: function createRenderRoot() {
-        // Disable shadow DOM; that would require a huge rejiggering of CSS
-        return this;
-      }
-    }, {
-      kind: "method",
-      key: "render",
-      value: function render() {
-        return html(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      <div class=\"br-mode-2up__book\" @mouseup=", ">\n        ", "\n        ", "\n        ", "\n      </div>"])), this.handlePageClick, this.renderLeafEdges('left'), this.renderedPages.map(p => this.renderPage(p)), this.renderLeafEdges('right'));
-      }
-    }, {
-      kind: "field",
-      key: "createPageContainer",
-      value() {
-        return page => {
-          return this.pageContainerCache[page.index] || (this.pageContainerCache[page.index] =
-          // @ts-ignore I know it's protected, TS! But Mode2Up and BookReader are friends.
-          this.br._createPageContainer(page.index));
-        };
-      }
-    }, {
-      kind: "method",
-      key: "initFirstRender",
-      value: function initFirstRender(startIndex) {
-        var page = this.book.getPage(startIndex);
-        var spread = page.spread;
-        this.visiblePages = (this.book.pageProgression == 'lr' ? [spread.left, spread.right] : [spread.right, spread.left]).filter(p => p);
-        this.htmlDimensionsCacher.updateClientSizes();
-        this.resizeViaAutofit(page);
-        this.initialScale = this.scale;
-      }
-    }, {
-      kind: "field",
-      key: "renderPage",
-      value() {
-        return page => {
-          var wToR = this.coordSpace.worldUnitsToRenderedPixels;
-          var wToV = this.coordSpace.worldUnitsToVisiblePixels;
-          var width = wToR(this.computePageWidth(page));
-          var height = wToR(this.computePageHeight(page));
-          var isVisible = this.visiblePages.map(p => p.index).includes(page.index);
-          var positions = this.computePositions(page.spread.left, page.spread.right);
-          var pageContainerEl = this.createPageContainer(page).update({
-            dimensions: {
-              width,
-              height,
-              top: 0,
-              left: wToR(page.pageSide == 'L' ? positions.pageLeftStart : positions.pageLeftEnd)
-            },
-            reduce: page.width / wToV(this.computePageWidth(page))
-          }).$container[0];
-          pageContainerEl.classList.toggle('BRpage-visible', isVisible);
-          return pageContainerEl;
-        };
-      }
-    }, {
-      kind: "field",
-      key: "renderLeafEdges",
-      value() {
-        return side => {
-          var _this$activeFlip3;
-          if (!this.visiblePages.length) return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
-          var fullWidthIn = side == 'left' ? this.positions.leafEdgesLeftFullWidth : this.positions.leafEdgesRightFullWidth;
-          if (!fullWidthIn) return html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
-          var wToR = this.coordSpace.worldUnitsToRenderedPixels;
-          var height = wToR(this.computePageHeight(this.visiblePages[0]));
-          var hasMovingPages = ((_this$activeFlip3 = this.activeFlip) === null || _this$activeFlip3 === void 0 ? void 0 : _this$activeFlip3.direction) == side;
-          var leftmostPage = this.book.getPage(this.book.pageProgression == 'lr' ? 0 : this.book.getNumLeafs() - 1);
-          var rightmostPage = this.book.getPage(this.book.pageProgression == 'lr' ? this.book.getNumLeafs() - 1 : 0);
-          var numPagesFlipping = hasMovingPages ? this.activeFlip.pagesFlippingCount : 0;
-          var range = side == 'left' ? [leftmostPage.index, this.pageLeft.goLeft(numPagesFlipping).index] : [this.pageRight.goRight(numPagesFlipping).index, rightmostPage.index];
-          var mainEdgesStyle = {
-            width: "".concat(wToR(side == 'left' ? this.positions.leafEdgesLeftMainWidth : this.positions.leafEdgesRightMainWidth), "px"),
-            height: "".concat(height, "px"),
-            left: "".concat(wToR(side == 'left' ? this.positions.leafEdgesLeftStart : this.positions.leafEdgesRightMainStart), "px")
-          };
-          var mainEdges = html(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      <br-leaf-edges\n        leftIndex=", "\n        rightIndex=", "\n        .book=", "\n        .pageClickHandler=", "\n        side=", "\n        class=\"br-mode-2up__leafs br-mode-2up__leafs--", "\"\n        style=", "\n      ></br-leaf-edges>\n    "])), range[0], range[1], this.book, index => this.br.jumpToIndex(index), side, side, styleMap(mainEdgesStyle));
-          if (hasMovingPages) {
-            var width = wToR(side == 'left' ? this.positions.leafEdgesLeftMovingWidth : this.positions.leafEdgesRightMovingWidth);
-            var style = {
-              width: "".concat(width, "px"),
-              height: "".concat(height, "px"),
-              left: "".concat(wToR(side == 'left' ? this.positions.leafEdgesLeftMovingStart : this.positions.leafEdgesRightStart), "px"),
-              pointerEvents: 'none',
-              transformOrigin: "".concat(wToR(side == 'left' ? this.positions.pageLeftWidth : -this.positions.pageRightWidth) + width / 2, "px 0")
-            };
-            var movingEdges = html(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        <br-leaf-edges\n          leftIndex=", "\n          rightIndex=", "\n          .book=", "\n          side=", "\n          class=\"br-mode-2up__leafs br-mode-2up__leafs--", " br-mode-2up__leafs--flipping\"\n          style=", "\n        ></br-leaf-edges>\n      "])), this.activeFlip.pagesFlipping[0], this.activeFlip.pagesFlipping[1], this.book, side, side, styleMap(style));
-            return side == 'left' ? html(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", "", ""])), mainEdges, movingEdges) : html(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", "", ""])), movingEdges, mainEdges);
-          } else {
-            return mainEdges;
-          }
-        };
-      }
-    }, {
-      kind: "method",
-      key: "resizeViaAutofit",
-      value: function resizeViaAutofit() {
-        var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.visiblePages[0];
-        this.scale = this.computeScale(page, this.autoFit);
-      }
-    }, {
-      kind: "method",
-      key: "recenter",
-      value: function recenter() {
-        var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.visiblePages[0];
-        var translate = this.computeTranslate(page, this.scale);
-        this.$book.style.transform = "translateX(".concat(translate.x, "px) translateY(").concat(translate.y, "px) scale(").concat(this.scale, ")");
-      }
-    }, {
-      kind: "method",
-      key: "computeRenderedPages",
-      value: function computeRenderedPages() {
-        var _this$visiblePages$, _this$visiblePages$2, _this$visiblePages, _this$visiblePages2;
-        // Also render 2 pages before/after
-        // @ts-ignore TS doesn't understand the filtering out of null values
-        return [(_this$visiblePages$ = this.visiblePages[0]) === null || _this$visiblePages$ === void 0 || (_this$visiblePages$ = _this$visiblePages$.prev) === null || _this$visiblePages$ === void 0 ? void 0 : _this$visiblePages$.prev, (_this$visiblePages$2 = this.visiblePages[0]) === null || _this$visiblePages$2 === void 0 ? void 0 : _this$visiblePages$2.prev, ...this.visiblePages, (_this$visiblePages = this.visiblePages[this.visiblePages.length - 1]) === null || _this$visiblePages === void 0 ? void 0 : _this$visiblePages.next, (_this$visiblePages2 = this.visiblePages[this.visiblePages.length - 1]) === null || _this$visiblePages2 === void 0 || (_this$visiblePages2 = _this$visiblePages2.next) === null || _this$visiblePages2 === void 0 ? void 0 : _this$visiblePages2.next].filter(p => p)
-        // Never render more than 10 pages! Usually means something is wrong
-        .slice(0, 10);
-      }
-    }, {
-      kind: "method",
-      key: "computeScale",
-      value: function computeScale(page, autoFit) {
-        if (!page) return 1;
-        var spread = page.spread;
-        var bookWidth = this.computePositions(spread.left, spread.right).bookWidth;
-        var bookHeight = this.computePageHeight(spread.left || spread.right);
-        var BOOK_PADDING_PX = 10;
-        var curScale = this.scale;
-        this.scale = 1; // Need this temporarily
-        var widthScale = this.coordSpace.renderedPixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth - 2 * BOOK_PADDING_PX) / bookWidth;
-        var heightScale = this.coordSpace.renderedPixelsToWorldUnits(this.htmlDimensionsCacher.clientHeight - 2 * BOOK_PADDING_PX) / bookHeight;
-        this.scale = curScale;
-        var realScale = 1;
-        var scale = realScale;
-        if (autoFit == 'width') {
-          scale = widthScale;
-        } else if (autoFit == 'height') {
-          scale = heightScale;
-        } else if (autoFit == 'auto') {
-          scale = Math.min(widthScale, heightScale);
-        } else if (autoFit == 'none') {
-          scale = this.scale;
-        } else {
-          // Should be impossible
-          throw new Error("Invalid autoFit value: ".concat(autoFit));
-        }
-        return scale;
-      }
-    }, {
-      kind: "method",
-      key: "computeTranslate",
-      value: function computeTranslate(page) {
-        var scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.scale;
-        if (!page) return {
-          x: 0,
-          y: 0
-        };
-        var spread = page.spread;
-        // Default to real size if it fits, otherwise default to full height
-        var positions = this.computePositions(spread.left, spread.right);
-        var bookWidth = positions.bookWidth;
-        var bookHeight = this.computePageHeight(spread.left || spread.right);
-        var visibleBookWidth = this.coordSpace.worldUnitsToRenderedPixels(bookWidth) * scale;
-        var visibleBookHeight = this.coordSpace.worldUnitsToRenderedPixels(bookHeight) * scale;
-        var leftOffset = this.coordSpace.worldUnitsToRenderedPixels(-positions.leafEdgesLeftStart) * scale;
-        var translateX = (this.htmlDimensionsCacher.clientWidth - visibleBookWidth) / 2 + leftOffset;
-        var translateY = (this.htmlDimensionsCacher.clientHeight - visibleBookHeight) / 2;
-        return {
-          x: Math.max(leftOffset, translateX),
-          y: Math.max(0, translateY)
-        };
-      }
-    }, {
-      kind: "method",
-      key: "flipAnimation",
-      value: (function () {
-        var _flipAnimation = _asyncToGenerator(function* (nextSpread) {
-          var _ref, _curSpread$left$index, _curSpread$left, _nextSpread$left$inde, _nextSpread$left;
-          var {
-            animate = true
-          } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-          var curSpread = (_ref = this.pageLeft || this.pageRight) === null || _ref === void 0 ? void 0 : _ref.spread;
-          if (!curSpread) {
-            // Nothings been actually rendered yet! Will be corrected during initFirstRender
-            return;
-          }
-          nextSpread = this.parseNextSpread(nextSpread);
-          if (this.activeFlip || !nextSpread) return;
-          var progression = this.book.pageProgression;
-          var curLeftIndex = (_curSpread$left$index = (_curSpread$left = curSpread.left) === null || _curSpread$left === void 0 ? void 0 : _curSpread$left.index) !== null && _curSpread$left$index !== void 0 ? _curSpread$left$index : progression == 'lr' ? -1 : this.book.getNumLeafs();
-          var nextLeftIndex = (_nextSpread$left$inde = (_nextSpread$left = nextSpread.left) === null || _nextSpread$left === void 0 ? void 0 : _nextSpread$left.index) !== null && _nextSpread$left$inde !== void 0 ? _nextSpread$left$inde : progression == 'lr' ? -1 : this.book.getNumLeafs();
-          if (curLeftIndex == nextLeftIndex) return;
-          var renderedIndices = this.renderedPages.map(p => p.index);
-          /** @type {PageContainer[]} */
-          var nextPageContainers = [];
-          for (var page of [nextSpread.left, nextSpread.right]) {
-            if (!page) continue;
-            nextPageContainers.push(this.createPageContainer(page));
-            if (!renderedIndices.includes(page.index)) {
-              this.renderedPages.push(page);
-            }
-          }
-          var curTranslate = this.computeTranslate(curSpread.left || curSpread.right, this.scale);
-          var idealNextTranslate = this.computeTranslate(nextSpread.left || nextSpread.right, this.scale);
-          var translateDiff = Math.sqrt((idealNextTranslate.x - curTranslate.x) ** 2 + (idealNextTranslate.y - curTranslate.y) ** 2);
-          var nextTranslate = "translate(".concat(idealNextTranslate.x, "px, ").concat(idealNextTranslate.y, "px)");
-          if (translateDiff < 50) {
-            var _this$$book$style$tra;
-            var activeTranslate = (_this$$book$style$tra = this.$book.style.transform.match(/translate\([^)]+\)/)) === null || _this$$book$style$tra === void 0 ? void 0 : _this$$book$style$tra[0];
-            if (activeTranslate) {
-              nextTranslate = activeTranslate;
-            }
-          }
-          var newTransform = "".concat(nextTranslate, " scale(").concat(this.scale, ")");
-          if (animate && 'animate' in Element.prototype) {
-            // This table is used to determine the direction of the flip animation:
-            //    | < | >
-            // lr | L | R
-            // rl | R | L
-            var direction = progression == 'lr' ? nextLeftIndex > curLeftIndex ? 'right' : 'left' : nextLeftIndex > curLeftIndex ? 'left' : 'right';
-            this.activeFlip = {
-              direction,
-              pagesFlipping: [curLeftIndex, nextLeftIndex],
-              pagesFlippingCount: Math.abs(nextLeftIndex - curLeftIndex)
-            };
-            this.classList.add("br-mode-2up--flipping-".concat(direction));
-            this.classList.add("BRpageFlipping");
-
-            // Wait for lit update cycle to finish so that entering pages are rendered
-            this.requestUpdate();
-            yield this.updateComplete;
-            this.visiblePages.map(p => this.pageContainerCache[p.index].$container).forEach($c => $c.addClass('BRpage-exiting'));
-            nextPageContainers.forEach(c => c.$container.addClass('BRpage-entering'));
-
-            /** @type {KeyframeAnimationOptions} */
-            var animationStyle = {
-              duration: this.flipSpeed + this.activeFlip.pagesFlippingCount,
-              easing: 'ease-in',
-              fill: 'none'
-            };
-            var bookCenteringAnimation = this.$book.animate([{
-              transform: newTransform
-            }], animationStyle);
-            var edgeTranslationAnimation = this.$flippingEdges.animate([{
-              transform: "rotateY(0deg)"
-            }, {
-              transform: direction == 'left' ? "rotateY(-180deg)" : "rotateY(180deg)"
-            }], animationStyle);
-            var exitingPageAnimation = direction == 'left' ? this.querySelector('.BRpage-exiting[data-side=L]').animate([{
-              transform: "rotateY(0deg)"
-            }, {
-              transform: "rotateY(180deg)"
-            }], animationStyle) : this.querySelector('.BRpage-exiting[data-side=R]').animate([{
-              transform: "rotateY(0deg)"
-            }, {
-              transform: "rotateY(-180deg)"
-            }], animationStyle);
-            var enteringPageAnimation = direction == 'left' ? this.querySelector('.BRpage-entering[data-side=R]').animate([{
-              transform: "rotateY(-180deg)"
-            }, {
-              transform: "rotateY(0deg)"
-            }], animationStyle) : this.querySelector('.BRpage-entering[data-side=L]').animate([{
-              transform: "rotateY(180deg)"
-            }, {
-              transform: "rotateY(0deg)"
-            }], animationStyle);
-            bookCenteringAnimation.play();
-            edgeTranslationAnimation.play();
-            exitingPageAnimation.play();
-            enteringPageAnimation.play();
-            nextPageContainers.forEach(c => c.$container.addClass('BRpage-visible'));
-            yield Promise.race([promisifyEvent(bookCenteringAnimation, 'finish'), promisifyEvent(edgeTranslationAnimation, 'finish'), promisifyEvent(exitingPageAnimation, 'finish'), promisifyEvent(enteringPageAnimation, 'finish')]);
-            this.classList.remove("br-mode-2up--flipping-".concat(direction));
-            this.classList.remove("BRpageFlipping");
-            this.visiblePages.map(p => this.pageContainerCache[p.index].$container).forEach($c => $c.removeClass('BRpage-exiting BRpage-visible'));
-            nextPageContainers.forEach(c => c.$container.removeClass('BRpage-entering'));
-            this.activeFlip = null;
-          }
-          this.$book.style.transform = newTransform;
-          this.visiblePages = (progression == 'lr' ? [nextSpread.left, nextSpread.right] : [nextSpread.right, nextSpread.left]).filter(x => x);
-        });
-        function flipAnimation(_x2) {
-          return _flipAnimation.apply(this, arguments);
-        }
-        return flipAnimation;
-      }())
-    }, {
-      kind: "method",
-      key: "parseNextSpread",
-      value: function parseNextSpread(nextSpread) {
-        if (nextSpread == 'next') {
-          nextSpread = this.book.pageProgression == 'lr' ? 'right' : 'left';
-        } else if (nextSpread == 'prev') {
-          nextSpread = this.book.pageProgression == 'lr' ? 'left' : 'right';
-        }
-        var curSpread = (this.pageLeft || this.pageRight).spread;
-        if (nextSpread == 'left') {
-          var _curSpread$left2;
-          nextSpread = (_curSpread$left2 = curSpread.left) === null || _curSpread$left2 === void 0 || (_curSpread$left2 = _curSpread$left2.findLeft({
-            combineConsecutiveUnviewables: true
-          })) === null || _curSpread$left2 === void 0 ? void 0 : _curSpread$left2.spread;
-        } else if (nextSpread == 'right') {
-          var _curSpread$right;
-          nextSpread = (_curSpread$right = curSpread.right) === null || _curSpread$right === void 0 || (_curSpread$right = _curSpread$right.findRight({
-            combineConsecutiveUnviewables: true
-          })) === null || _curSpread$right === void 0 ? void 0 : _curSpread$right.spread;
-        }
-        if (typeof nextSpread == 'number') {
-          nextSpread = this.book.getPage(nextSpread).spread;
-        }
-        if (nextSpread instanceof PageModel) {
-          nextSpread = nextSpread.spread;
-        }
-        return nextSpread;
-      }
-    }, {
-      kind: "field",
-      key: "handlePageClick",
-      value() {
-        return ev => {
-          // right click
-          if (ev.which == 3 && this.br.protected) {
-            return false;
-          }
-          if (ev.which != 1) return;
-          var $page = $(ev.target).closest('.BRpagecontainer');
-          if (!$page.length) return;
-          if ($page.data('side') == 'L') {
-            this.flipAnimation('left');
-          } else if ($page.data('side') == 'R') {
-            this.flipAnimation('right');
-          }
-        };
-      }
-    }]
-  };
-}, LitElement);
-export var LeafEdges = _decorate(null, function (_initialize2, _LitElement2) {
-  class LeafEdges extends _LitElement2 {
-    constructor() {
-      super(...arguments);
-      _initialize2(this);
-    }
-  }
-  return {
-    F: LeafEdges,
-    d: [{
-      kind: "field",
-      decorators: [property({
-        type: Number
-      })],
-      key: "leftIndex",
-      value() {
-        return 0;
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Number
-      })],
-      key: "rightIndex",
-      value() {
-        return 0;
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: String
-      })],
-      key: "side",
-      value() {
-        return 'left';
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        attribute: false
-      })],
-      key: "book",
-      value() {
-        return null;
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        attribute: false,
-        type: Function
-      })],
-      key: "pageClickHandler",
-      value() {
-        return null;
-      }
-    }, {
-      kind: "field",
-      decorators: [query('.br-leaf-edges__bar')],
-      key: "$hoverBar",
-      value: void 0
-    }, {
-      kind: "field",
-      decorators: [query('.br-leaf-edges__label')],
-      key: "$hoverLabel",
-      value: void 0
-    }, {
-      kind: "get",
-      key: "pageWidthPercent",
-      value: /** @type {'left' | 'right'} */
-
-      /** @type {BookModel} */
-
-      /** @type {(index: PageIndex) => void} */
-
-      function value() {
-        return 100 * 1 / (this.rightIndex - this.leftIndex + 1);
-      }
-    }, {
-      kind: "method",
-      key: "render",
-      value: function render() {
-        return html(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      <div\n        class=\"br-leaf-edges__bar\"\n        style=\"", "\"\n      ></div>\n      <div class=\"br-leaf-edges__label\">Page</div>"])), styleMap({
-          width: "".concat(this.pageWidthPercent, "%")
-        }));
-      }
-    }, {
-      kind: "method",
-      key: "connectedCallback",
-      value: function connectedCallback() {
-        _superPropGet(LeafEdges, "connectedCallback", this, 3)([]);
-        this.addEventListener('mouseenter', this.onMouseEnter);
-        this.addEventListener('mouseleave', this.onMouseLeave);
-        this.addEventListener('click', this.onClick);
-      }
-    }, {
-      kind: "method",
-      key: "disconnectedCallback",
-      value: function disconnectedCallback() {
-        _superPropGet(LeafEdges, "disconnectedCallback", this, 3)([]);
-        this.addEventListener('mouseenter', this.onMouseEnter);
-        this.removeEventListener('mousemove', this.onMouseMove);
-        this.removeEventListener('mouseleave', this.onMouseLeave);
-      }
-
-      /** @override */
-    }, {
-      kind: "method",
-      key: "createRenderRoot",
-      value: function createRenderRoot() {
-        // Disable shadow DOM; that would require a huge rejiggering of CSS
-        return this;
-      }
-
-      /**
-       * @param {MouseEvent} e
-       */
-    }, {
-      kind: "field",
-      key: "onMouseEnter",
-      value() {
-        return e => {
-          this.addEventListener('mousemove', this.onMouseMove);
-          this.$hoverBar.style.display = 'block';
-          this.$hoverLabel.style.display = 'block';
-        };
-      }
-    }, {
-      kind: "field",
-      key: "onMouseMove",
-      value() {
-        return e => {
-          this.$hoverBar.style.left = "".concat(e.offsetX, "px");
-          if (this.side == 'right') {
-            this.$hoverLabel.style.left = "".concat(e.offsetX, "px");
-          } else {
-            this.$hoverLabel.style.right = "".concat(this.offsetWidth - e.offsetX, "px");
-          }
-          this.$hoverLabel.style.top = "".concat(e.offsetY, "px");
-          var index = this.mouseEventToPageIndex(e);
-          this.$hoverLabel.textContent = this.book.getPageName(index);
-        };
-      }
-    }, {
-      kind: "field",
-      key: "onMouseLeave",
-      value() {
-        return e => {
-          this.removeEventListener('mousemove', this.onMouseMove);
-          this.$hoverBar.style.display = 'none';
-          this.$hoverLabel.style.display = 'none';
-        };
-      }
-    }, {
-      kind: "field",
-      key: "onClick",
-      value() {
-        return e => {
-          this.pageClickHandler(this.mouseEventToPageIndex(e));
-        };
-      }
-    }, {
-      kind: "method",
-      key: "mouseEventToPageIndex",
-      value:
-      /**
-       * @param {MouseEvent} e
-       */
-      /**
-       * @param {MouseEvent} e
-       */
-      /**
-       * @param {MouseEvent} e
-       */
-      /**
-       * @param {MouseEvent} e
-       * @returns {PageIndex}
-       */
-      function mouseEventToPageIndex(e) {
-        return Math.floor(this.leftIndex + e.offsetX / this.offsetWidth * (this.rightIndex - this.leftIndex + 1));
-      }
-    }]
-  };
-}, LitElement);
-customElements.define('br-mode-2up', Mode2UpLit);
-customElements.define('br-leaf-edges', LeafEdges);