@teipublisher/pb-components 1.32.2 → 1.34.1

package/pb-elements.json

@@ -1328,6 +1328,12 @@
           "type": "string",
           "default": "\"title\""
         },
+        {
+          "name": "static",
+          "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "url",
           "description": "The URL for the AJAX request. If a relative URL is passed, it will be resolved\nagainst the current API endpoint.",
@@ -1497,6 +1503,13 @@
           "type": "string",
           "default": "\"title\""
         },
+        {
+          "name": "static",
+          "attribute": "static",
+          "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "url",
           "attribute": "url",
@@ -9471,6 +9484,254 @@
         }
       ]
     },
+    {
+      "name": "pb-timeline",
+      "path": "./src/pb-timeline.js",
+      "description": "A timeline component to display time series data in a bar chart like view.\n\nTime series data can be displayed in one of 6 different scales:\n\n- by decade (10Y)\n- by 5 years (5Y)\n- by years (Y)\n- by month (M)\n- by week (W)\n- by day (D)\n\nThe endpoint is expected to return a JSON object. Each property should either be a date or the special\nmarker `?`, which indicates undated resources.\nThe value associated with each entry\nshould either correspond to a count of resources or an object with properties `count` and `info`. \n`info` should be an array, containing HTML to be shown in a list within the tooltips.",
+      "attributes": [
+        {
+          "name": "start-date",
+          "description": "start date for timeline to display",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "end-date",
+          "description": "endDate for timeline to display",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "scope",
+          "description": "The scope for the timeline. Must be one of the pre-defined scopes.\nIf not set, the component automatically tries to determine the best scope fitting the\ngiven time series.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "scopes",
+          "description": "The scopes to consider for automatic scoping.\n\nDefaults to [\"D\", \"W\", \"M\", \"Y\", \"5Y\", \"10Y\"]",
+          "type": "array",
+          "default": "[\"D\",\"W\",\"M\",\"Y\",\"5Y\",\"10Y\"]"
+        },
+        {
+          "name": "url",
+          "description": "Endpoint to load timeline data from. Expects response to be an\nobject with key value pairs for (date, hits).\n\nWill be reloaded whenever 'start-date' or 'end-date' attributes change.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "auto",
+          "description": "If set, data will be retrieved automatically on first load.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "resettable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "label"
+        },
+        {
+          "name": "maxHeight",
+          "type": "number",
+          "default": "80"
+        },
+        {
+          "name": "multiplier",
+          "type": "number",
+          "default": "0.75"
+        },
+        {
+          "name": "mousedown",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "startDate",
+          "attribute": "start-date",
+          "description": "start date for timeline to display",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "endDate",
+          "attribute": "end-date",
+          "description": "endDate for timeline to display",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "scope",
+          "attribute": "scope",
+          "description": "The scope for the timeline. Must be one of the pre-defined scopes.\nIf not set, the component automatically tries to determine the best scope fitting the\ngiven time series.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "scopes",
+          "attribute": "scopes",
+          "description": "The scopes to consider for automatic scoping.\n\nDefaults to [\"D\", \"W\", \"M\", \"Y\", \"5Y\", \"10Y\"]",
+          "type": "array",
+          "default": "[\"D\",\"W\",\"M\",\"Y\",\"5Y\",\"10Y\"]"
+        },
+        {
+          "name": "url",
+          "attribute": "url",
+          "description": "Endpoint to load timeline data from. Expects response to be an\nobject with key value pairs for (date, hits).\n\nWill be reloaded whenever 'start-date' or 'end-date' attributes change.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "auto",
+          "attribute": "auto",
+          "description": "If set, data will be retrieved automatically on first load.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "resettable",
+          "attribute": "resettable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "pb-timeline-date-changed",
+          "description": "Triggered when user clicks on a single entry"
+        },
+        {
+          "name": "pb-timeline-daterange-changed",
+          "description": "Triggered when user selects a range of entries"
+        },
+        {
+          "name": "pb-timeline-reset-selection",
+          "description": "Requests that the timeline is reset to initial state"
+        },
+        {
+          "name": "pb-timeline-loaded",
+          "description": "Timeline was loaded"
+        }
+      ],
+      "slots": [
+        {
+          "name": "label",
+          "description": "Inserted before the label showing the currently displayed time range"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--pb-timeline-height"
+        },
+        {
+          "name": "--pb-timeline-padding"
+        },
+        {
+          "name": "--pb-timeline-color-highlight"
+        },
+        {
+          "name": "--pb-timeline-color-light"
+        },
+        {
+          "name": "--pb-timeline-color-dark"
+        },
+        {
+          "name": "--pb-timeline-color-selected"
+        },
+        {
+          "name": "--pb-timeline-color-bin"
+        },
+        {
+          "name": "--pb-timeline-title-font-size"
+        },
+        {
+          "name": "--pb-timeline-tooltip-font-size"
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "label"
+        },
+        {
+          "name": "tooltip"
+        },
+        {
+          "name": "title"
+        }
+      ]
+    },
     {
       "name": "pb-toggle-feature",
       "path": "./src/pb-toggle-feature.js",
@@ -9961,6 +10222,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "static",
+          "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -10156,6 +10423,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "static",
+          "attribute": "static",
+          "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -10412,6 +10686,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "static",
+          "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -10590,6 +10870,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "static",
+          "attribute": "static",
+          "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/src/parse-date-service.js

@@ -0,0 +1,266 @@
+export class ParseDateService {
+  /*
+  * PARSE DATE SERVICE
+  * whenever the user types a date, it should be allowed
+  * to type in a lot of dirrerent date formats. This service
+  * should detect all of the supported formats. Some supported formats:
+  * - 1. April 1970 => 1970-04-01
+  * - 1970          => 1970-01-01
+  * - 1970-12-23    => 1970-12-23
+  * - 1900 12 23    => 1900-12-23
+  * - 1 jan 1970    => 1970-01-01
+  * - 2020-W12      => 2020-03-16
+  * - 2020-01       => 2020-01-01
+  * For all formats check the tests written in AVA `test/parse-date-service-test.js`
+  *
+  * public methods
+  *   run()
+  */
+  constructor() {
+  }
+
+  run (input) {
+    this.input = input;
+    this.day = "??";
+    this.month = "??";
+    this.year = "????";
+
+    const resultIsoMatch = this.input.match(this._isoMatchRegex());
+    const resultCustomMatch = this.input.match(this._customRegex());
+    const resultWeekMatch = this.input.match(this._weekMatchRegex());
+    const resultYearAndMonthMatch = this.input.match(this._yearAndMonthRegex());
+    if (resultIsoMatch) {
+      const split = resultIsoMatch[0].split(/-|\/|\s/);
+      this.year  = split[0];
+      this.month = this._setWithLeadingZero(split[1]);
+      this.day   = this._setWithLeadingZero(split[2]);
+    } else if (resultYearAndMonthMatch) {
+      const split = resultYearAndMonthMatch[0].split("-");
+      this.year = split[0];
+      this.month = this._setWithLeadingZero(split[1]);
+      this.day = "01";
+    } else if (resultCustomMatch) {
+      const split = resultCustomMatch[0].split(/\.|\s|\/|-/);
+      this.day = this._setWithLeadingZero(split[0]);
+      this.month = this._setWithLeadingZero(split[1]);
+      this.year = split[2];
+    } else if (resultWeekMatch) {
+      const split = resultWeekMatch[0].split(/\.|\s|\/|-/);
+      const year = Number(split[0]);
+      const week = Number(split[1].replace("W0", "").replace("W", ""));
+      return this._getDateStrOfISOWeek(year, week);
+    } else {
+      this._findYear();
+      this._findMonth();
+      this._findDay();
+    }
+    return this._buildResult();
+  }
+
+  _buildResult() {
+    if (this.year != "????" && this.month === "??") {
+      this.month = "01";
+    }
+    if (this.month != "??" && this.day === "??") {
+      this.day = "01";
+    }
+    return `${this.year}-${this.month}-${this.day}`;
+  }
+
+  /*
+  * matches ISO string format (with some extensions)
+  * | 2012-01-31 | 2012-1-31 | 2012/01/31 |
+  * | 2012/1/31  | 2012 1 31 | 2012 01 31 |
+  */
+  _isoMatchRegex() {
+    return /(?<=\s|^)\d{4}(-|\s|\/)([0][1-9]|[1-9]|10|11|12)(-|\s|\/)([0][1-9]|[1-2][0-9]|3[01]|[1-9])(?=\s|$|\.)/;
+    /*      |        | year         | 01-09 | 1-9 | 10-12   |         |01-09  |10-29     |30,31| 1-9  |
+    *       |             | dash or slash                   | dash or slash                           |
+    *       |preceding with space or start of string                 end with space endofstr or dot <-|*/
+  }
+
+  /*
+  * matches a custom date string format (reversed order, day-month-year)
+  * | 12.3.2000 | 1.2.2012 | 1-2-2012 |
+  * | 12/3/2000 | 1 2 2012 | 1/2/2012 |
+  */
+  _customRegex() {
+    return /\d{1,2}(\.|\s|\/|-)\d{1,2}(\.|\s|\/|-)\d{4}/;
+    /*      | day  |           | month |          | year
+    *              |___________________|
+    *                        |
+    *        seperated by dot, space, slash or dash */
+  }
+
+  /*
+  * matches a date format that specifies the week
+  * | 2012-W1 | 2012 W1  | 2012 W01 |
+  * | 2020.W2 | 2020-W53 | 2012/W1  |
+  */
+  _weekMatchRegex() {
+    return /\d{4}(\.|\s|\/|-)W\d{1,2}(?=\s|$|\.)/;
+    /*      |year |         |W1-W53   |
+    *             |___________________|
+    *                      |
+    *     seperated by dot, space, slash or dash */
+  }
+
+  /*
+  * matches a date format with only year and month
+  * YYYY-MM (1-12)
+  * | 2020-01 | 2020-12 | 2012-1 |
+  */
+  _yearAndMonthRegex() {
+    return /(?<=\s|^)\d{4}-([0][1-9]|[1-9]|10|11|12)(?=\s|$)/;
+  }
+
+  _findYear() {
+    let regex = /[1-9]{1}[0-9]{3}/;
+    const result = this.input.match(regex)
+    if (result) {
+      this.year = result[0];
+      this._removeMatchFromInput(result);
+    }
+  }
+
+  _findMonth() {
+    const months = this._monthDictionaryValues();
+    months.forEach(month => {
+      let re = new RegExp(`(?<=\\s|^)(${month})(?=\\s|$|\\.)`, "i")
+      const result = this.input.match(re);
+      if (result) { // yes => get dict and value + return
+        this.month = this._monthDictionary()[result[0].toLowerCase()];
+        this._removeMatchFromInput(result);
+        return this.month;
+      }
+    })
+    return undefined;
+  }
+
+  /*
+  * find single numbers from 1-31
+  */
+  _findDay() {
+    let regex = /(?<=\s|^)([0][1-9]|[1-2][0-9]|3[01]|[1-9])(?=\s|$|\.|st|nd|rd|th)/;
+    /*           |         | 01-09 | 10-29    |30,31|1-9    | ends with whitespace, endofstr or dot.
+    *            | starts with whitepace or startoftr       | won't be included in match (lookbehind operator)
+    *            | look behind operator (not included)
+    *            | https://stackoverflow.com/a/6713378/6272061 */
+    const result = this.input.match(regex)
+    if (result) {
+      this.day = this._setWithLeadingZero(result[0]);
+    }
+  }
+
+  /*
+  * if a string or number has only 1 digit or char
+  * a leading zro is added
+  * returns a string
+  */
+  _setWithLeadingZero(input) {
+    input = input.toString();
+    if (input.length == 1) {
+      return "0" + input;
+    } else {
+      return input;
+    }
+  }
+
+  _removeMatchFromInput(matchObj) {
+    if (matchObj && matchObj[0] && matchObj.index) {
+      let len = matchObj[0].length;
+      let charArr = this.input.split('');
+      charArr.splice(matchObj.index, len);
+      this.input = charArr.join("");
+    }
+  }
+
+  _monthDictionaryValues() {
+    return Object.keys(this._monthDictionary());
+  }
+  _monthDictionary() {
+    return {
+      // german
+      "jan": "01", "januar":    "01",
+      "feb": "02", "februar":   "02",
+      "mär": "03", "märz":      "03",
+      "apr": "04", "april":     "04",
+      "mai": "05", "mai":       "05",
+      "jun": "06", "juni":      "06",
+      "jul": "07", "juli":      "07",
+      "aug": "08", "august":    "08",
+      "sep": "09", "september": "09",
+      "okt": "10", "oktober":   "10",
+      "nov": "11", "november":  "11",
+      "dez": "12", "dezember":  "12",
+      // english
+      "jan": "01", "january":   "01",
+      "feb": "02", "february":  "02",
+      "mar": "03", "march":     "03",
+      "apr": "04", "april":     "04",
+      "may": "05", "may":       "05",
+      "jun": "06", "june":      "06",
+      "jul": "07", "july":      "07",
+      "aug": "08", "august":    "08",
+      "sep": "09", "september": "09",
+      "oct": "10", "october":   "10",
+      "nov": "11", "november":  "11",
+      "dec": "12", "december":  "12",
+      // french
+      "janv":"01", "janvier":   "01",
+      "févr":"02", "février'":  "02",
+      "mars":"03", "mars":      "03",
+      "avr": "04", "avril":     "04",
+      "mai": "05", "mai":       "05",
+      "juin":"06", "juin":      "06",
+      "juil":"07", "juillet":   "07",
+      "août":"08", "août":      "08",
+      "sept":"09", "septembre": "09",
+      "oct": "10", "octobre":   "10",
+      "nov": "11", "novembre":  "11",
+      "déc": "12", "décembre":  "12",
+      //italian
+      "gen": "01", "gennaio":   "01",
+      "feb": "02", "febbraio":  "02",
+      "mar": "03", "marzo":     "03",
+      "apr": "04", "aprile":    "04",
+      "mag": "05", "maggio":    "05",
+      "giu": "06", "giugno":    "06",
+      "lug": "07", "luglio":    "07",
+      "ago": "08", "agosto":    "08",
+      "set": "09", "settembre": "09",
+      "ott": "10", "ottobre":   "10",
+      "nov": "11", "novembre":  "11",
+      "dic": "12", "dicembre":  "12",
+    }
+  }
+
+  _getDateStrOfISOWeek(y, w) {
+    let simple = new Date(y, 0, 1 + (w - 1) * 7);
+    let dow = simple.getDay();
+    let ISOweekStart = simple;
+    if (dow <= 4) {
+      ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
+    } else {
+      ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
+    }
+    // do not rollover to next or previous year
+    if (ISOweekStart.getFullYear() > y) {
+      return `${y}-12-31`;
+    } else if (ISOweekStart.getFullYear() < y) {
+      return `${y}-01-01`;
+    }
+    return this._dateToDateStr(ISOweekStart);
+  }
+
+  /*
+  * formats date object to dateStr YYYY-MM-DD
+  */
+  _dateToDateStr(date) {
+    let d = new Date(date);
+    let month = this._setWithLeadingZero((d.getMonth() + 1));
+    let day = this._setWithLeadingZero(d.getDate());
+    let year = d.getFullYear();
+    return `${year}-${month}-${day}`;
+  }
+}

package/src/pb-browse-docs.js

@@ -87,6 +87,13 @@ export class PbBrowseDocs extends PbLoad {
             subforms: {
                 type: String
             },
+            /**
+             * If set, rewrite URLs to load pages as static HTML files,
+             * so no TEI Publisher instance is required
+             */
+            static: {
+                type: Boolean
+            },
             _file: {
                 type: String
             },
@@ -120,6 +127,8 @@ export class PbBrowseDocs extends PbLoad {
         this.filterBy = 'title';
         this._allowModification = false;
         this._suggestions = [];
+
+        this.static = false;
     }
 
     connectedCallback() {
@@ -177,14 +186,16 @@ export class PbBrowseDocs extends PbLoad {
         });
         this.shadowRoot.getElementById('autocomplete').addEventListener('autocomplete-change', this._autocomplete.bind(this));
 
-        const login = document.getElementById(this.login);
-        if (!login) {
-            console.error('<pb-browse-docs> connected pb-login element not found!');
-        } else {
-            this.subscribeTo('pb-login', (ev) => {
-                this._allowModification = this._loggedIn(ev.detail.user, ev.detail.group);
-            }, []);
-            this._allowModification = login.loggedIn && this._loggedIn(login.user, login.groups);
+        if (this.login) {
+            const login = document.getElementById(this.login);
+            if (!login) {
+                console.error('<pb-browse-docs> connected pb-login element not found!');
+            } else {
+                this.subscribeTo('pb-login', (ev) => {
+                    this._allowModification = this._loggedIn(ev.detail.user, ev.detail.group);
+                }, []);
+                this._allowModification = login.loggedIn && this._loggedIn(login.user, login.groups);
+            }
         }
 
         this.shadowRoot.getElementById('sort-list').addEventListener('selected-item-changed', this._sort.bind(this));
@@ -206,6 +217,7 @@ export class PbBrowseDocs extends PbLoad {
                     }
                 </style>
             </custom-style>
+            <slot name="header"></slot>
             <div class="toolbar">
                 <paper-dropdown-menu id="sort" label="${translate(this.sortLabel)}" part="sort-dropdown">
                     <paper-listbox id="sort-list" selected="${this.sortBy}" slot="dropdown-content" class="dropdown-content" attr-for-selected="value">
@@ -312,6 +324,10 @@ export class PbBrowseDocs extends PbLoad {
     }
 
     getURL(params) {
+        if (this.static) {
+            // use a static URL
+            return `collections/${this.collection ? this.collection + '/' : ''}${params.start || '1'}.html`;
+        }
         const url = super.getURL(params);
         return this.collection ? `${url}/${this.collection}` : url;
     }
@@ -424,6 +440,7 @@ export class PbBrowseDocs extends PbLoad {
             link.addEventListener('click', (ev) => {
                 ev.preventDefault();
                 this.collection = link.getAttribute('data-collection');
+                this.start = 1;
                 this.setParameter('collection', this.collection);
                 this.pushHistory('browse collection');
                 console.log('<pb-browse-docs> loading collection %s', this.collection);

package/src/pb-components.js

@@ -58,6 +58,7 @@ import './pb-blacklab-results.js';
 import './pb-blacklab-highlight.js';
 import './pb-table-grid.js';
 import './pb-split-list.js';
+import './pb-timeline.js';
 
 import '@polymer/iron-icons/editor-icons';
 import '@polymer/iron-icons/social-icons';