@teipublisher/pb-components 1.44.0 → 1.44.2

package/dist/pb-elements.json

@@ -4015,6 +4015,11 @@
       "path": "./src/pb-facsimile.js",
       "description": "View zoomable images using a IIIF server.",
       "attributes": [
+        {
+          "name": "show-sequence-control",
+          "description": "If true then the 'previous\" and 'next' button is displayed switch between images.",
+          "type": "boolean"
+        },
         {
           "name": "facsimiles",
           "description": "Array of facsimiles",
@@ -4139,6 +4144,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "showSequenceMode",
+          "attribute": "show-sequence-control",
+          "description": "If true then the 'previous\" and 'next' button is displayed switch between images.",
+          "type": "boolean"
+        },
         {
           "name": "facsimiles",
           "attribute": "facsimiles",
@@ -4172,6 +4183,11 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "sequenceMode",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "showHomeControl",
           "attribute": "show-home-control",
@@ -4299,7 +4315,7 @@
         },
         {
           "name": "pb-facsimile-status",
-          "description": "Indicates the status of loading an image into the viewer. The status is indicated\nby the `status` property in event.detail as follows: `loading` - image was requested; `loaded` - image is displayed; \n`fail` - image could not be loaded."
+          "description": "Indicates the status of loading an image into the viewer. The status is indicated\nby the `status` property in event.detail as follows: `loading` - image was requested; `loaded` - image is displayed;\n`fail` - image could not be loaded."
         }
       ],
       "slots": [
@@ -9899,7 +9915,7 @@
     {
       "name": "pb-split-list",
       "path": "./src/pb-split-list.js",
-      "description": "Implements a list which is split into different categories \n(e.g. letters of the alphabet, countries ...).\nOnly one category is shown at a time unless the server reports\nno categories (e.g. if the number of items to display goes below\na defined threshold).\n\nThe server-side API endpoint should return a JSON object with two\nproperties:\n\n+ `categories`: an array of category descriptions: each item should \n  be an object with two properties: `category` - containing the name of the category\n  and `count` - containing a count of items available under this category.\n+ `items`: an array with the items to be shown for the currently selected\n  category. Those may contain HTML markup.",
+      "description": "Implements a list which is split into different categories \n(e.g. letters of the alphabet, countries ...).\nOnly one category is shown at a time unless the server reports\nno categories (e.g. if the number of items to display goes below\na defined threshold).\n\nThe server-side API endpoint should return a JSON object with two\nproperties:\n\n+ `categories`: an array of category descriptions: each item should \n  be an object with two properties: `category` - containing the name of the category\n  and `count` - containing a count of items available under this category.\n+ `items`: an array with the items to be shown for the currently selected\n  category. Those may contain HTML markup.\n\nSample JSON object for pb-split-list\n```javascript\n{\n    \"items\": [\n        \"<span><a href='Abegg-Arter Carl?category=A&amp;view=correspondents&amp;search='>Abegg-Arter, Carl</a><span class='dates'> (1836–1912)</span></span>\",\n        \"<span><a href='Abegg Hans Heinrich?category=A&amp;view=correspondents&amp;search='>Abegg, Hans Heinrich</a><span class='dates'> (1805–1874)</span></span>\",\n        \"<span><a href='Abegg Jakob?category=A&amp;view=correspondents&amp;search='>Abegg, Jakob</a><span class='dates'> (1801–1871)</span></span>\",\n        \"<span><a href='Abys Raget?category=A&amp;view=correspondents&amp;search='>Abys, Raget</a><span class='dates'> (1790–1861)</span></span>\",\n        \"<span><a href='Aebli Johann Peter?category=A&amp;view=correspondents&amp;search='>Aebli, Johann Peter</a><span class='dates'> (1804–1879)</span></span>\",\n        \"<span><a href='Aepli Arnold Otto?category=A&amp;view=correspondents&amp;search='>Aepli, Arnold Otto</a><span class='dates'> (1816–1897)</span></span>\",\n        ...\n    ],\n    \"categories\": [\n        {\n            \"category\": \"A\",\n            \"count\": 22\n        },\n        {\n            \"category\": \"B\",\n            \"count\": 77\n        },\n        {\n            \"category\": \"C\",\n            \"count\": 19\n        },\n      ...\n    ]\n}\n```\n\nSample Usage \n```xml\n<pb-split-list url=\"api/people\" subforms=\"#options\" selected=\"A\" emit=\"transcription\" subscribe=\"transcription\"></pb-split-list>\n```\nSee https://www.briefedition.alfred-escher.ch/kontexte/personen/?category=A&search=&view=correspondents for a running sample. The source code of the webpage is here: https://github.com/stazh/briefedition-escher. Relevant files are: \n- [templates/index.html](https://github.com/stazh/briefedition-escher/blob/master/templates/index.html#L223) - usage of pb-timeline\n- [modules/custom-api.json](https://github.com/stazh/briefedition-escher/blob/master/modules/custom-api.json#L1098) - `/api/people` endpoint delivering required JSON object",
       "attributes": [
         {
           "name": "url",
@@ -10446,7 +10462,7 @@
     {
       "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.",
+      "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.\nExpected JSON: \n```javascript\n{\n  \"1852-01-14\": {\n      \"count\": 1,\n      \"info\": [\n        \"<a href='/briefe/B0977' part='tooltip-link'>Alfred Escher an Joseph Wolfgang von Deschwanden, Belvoir (Enge, Zürich), Mittwoch, 14. Januar 1852</a>\"\n     ]\n   },\n\"1874-01-25\": {\n    \"count\": 3,\n     \"info\": [\n         \"<a href='/briefe/B8140' part='tooltip-link'>Alfred Escher an Gustav von Mevissen, Zürich, Sonntag, 25. Januar 1874</a>\",\n         \"<a href='/briefe/B8139' part='tooltip-link'>Alfred Escher an Theodor Weishaupt, Zürich, Sonntag, 25. Januar 1874</a>\",\n         \"<a href='/briefe/B8143' part='tooltip-link'>Alfred Escher an Ludwig August Parcus, Zürich, Sonntag, 25. Januar 1874</a>\"\n     ]\n  }\n}\n```\nSample Usage:\n```xml\n<pb-timeline url=\"api/timeline\" scopes=\"['D', 'M', 'Y', '5Y', '10Y']\"\n      resettable=\"\"\n      subscribe=\"docs\" emit=\"timeline\">\n   <span slot=\"label\">Angezeigter Zeitraum: </span>\n</pb-timeline>\n```\nSee https://www.briefedition.alfred-escher.ch/briefe/ for a running sample. The source code of the webpage is here: https://github.com/stazh/briefedition-escher. Relevant files are: \n- [templates/people.html](https://github.com/stazh/briefedition-escher/blob/master/templates/people.html#L91) - usage of pb-timeline\n- [modules/custom-api.json](https://github.com/stazh/briefedition-escher/blob/master/modules/custom-api.json#L1080) - `/api/timeline` endpoint delivering required JSON object",
       "attributes": [
         {
           "name": "start-date",

package/gh-pages.js

@@ -18,6 +18,10 @@ copy('lib', path.join(dir, 'lib'));
 copy('css', path.join(dir, 'css'));
 copy('src', path.join(dir, 'src'));
 
+const redirect = fs.readFileSync(path.join('demo', 'redirect.js'), 'utf-8');
+fs.writeFileSync(path.join('docs', 'redirect.js'), redirect, { encoding: 'utf-8' });
+
 const index = fs.readFileSync(path.join('demo', 'redirect.html'), 'utf-8');
 const updated = index.toString().replace(/\$version/, versionTag);
-fs.writeFileSync(path.join('docs', 'index.html'), updated, { encoding: 'utf-8' });
+fs.writeFileSync(path.join('docs', 'index.html'), updated, { encoding: 'utf-8' });
+fs.writeFileSync(path.join('docs', 'api.html'), updated, { encoding: 'utf-8' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.44.0",
+  "version": "1.44.2",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -80,7 +80,7 @@
     "lit-element": "latest",
     "lit-html": "^1.3.0",
     "marked": "^1.2.0",
-    "openseadragon": "^2.4.2",
+    "openseadragon": "github:Jinntec/openseadragon",
     "pagedjs": "^0.4.0",
     "prismjs": "^1.21.0",
     "tippy.js": "^6.2.7",

package/pb-elements.json

@@ -4015,6 +4015,11 @@
       "path": "./src/pb-facsimile.js",
       "description": "View zoomable images using a IIIF server.",
       "attributes": [
+        {
+          "name": "show-sequence-control",
+          "description": "If true then the 'previous\" and 'next' button is displayed switch between images.",
+          "type": "boolean"
+        },
         {
           "name": "facsimiles",
           "description": "Array of facsimiles",
@@ -4139,6 +4144,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "showSequenceMode",
+          "attribute": "show-sequence-control",
+          "description": "If true then the 'previous\" and 'next' button is displayed switch between images.",
+          "type": "boolean"
+        },
         {
           "name": "facsimiles",
           "attribute": "facsimiles",
@@ -4172,6 +4183,11 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "sequenceMode",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "showHomeControl",
           "attribute": "show-home-control",
@@ -4299,7 +4315,7 @@
         },
         {
           "name": "pb-facsimile-status",
-          "description": "Indicates the status of loading an image into the viewer. The status is indicated\nby the `status` property in event.detail as follows: `loading` - image was requested; `loaded` - image is displayed; \n`fail` - image could not be loaded."
+          "description": "Indicates the status of loading an image into the viewer. The status is indicated\nby the `status` property in event.detail as follows: `loading` - image was requested; `loaded` - image is displayed;\n`fail` - image could not be loaded."
         }
       ],
       "slots": [
@@ -9899,7 +9915,7 @@
     {
       "name": "pb-split-list",
       "path": "./src/pb-split-list.js",
-      "description": "Implements a list which is split into different categories \n(e.g. letters of the alphabet, countries ...).\nOnly one category is shown at a time unless the server reports\nno categories (e.g. if the number of items to display goes below\na defined threshold).\n\nThe server-side API endpoint should return a JSON object with two\nproperties:\n\n+ `categories`: an array of category descriptions: each item should \n  be an object with two properties: `category` - containing the name of the category\n  and `count` - containing a count of items available under this category.\n+ `items`: an array with the items to be shown for the currently selected\n  category. Those may contain HTML markup.",
+      "description": "Implements a list which is split into different categories \n(e.g. letters of the alphabet, countries ...).\nOnly one category is shown at a time unless the server reports\nno categories (e.g. if the number of items to display goes below\na defined threshold).\n\nThe server-side API endpoint should return a JSON object with two\nproperties:\n\n+ `categories`: an array of category descriptions: each item should \n  be an object with two properties: `category` - containing the name of the category\n  and `count` - containing a count of items available under this category.\n+ `items`: an array with the items to be shown for the currently selected\n  category. Those may contain HTML markup.\n\nSample JSON object for pb-split-list\n```javascript\n{\n    \"items\": [\n        \"<span><a href='Abegg-Arter Carl?category=A&amp;view=correspondents&amp;search='>Abegg-Arter, Carl</a><span class='dates'> (1836–1912)</span></span>\",\n        \"<span><a href='Abegg Hans Heinrich?category=A&amp;view=correspondents&amp;search='>Abegg, Hans Heinrich</a><span class='dates'> (1805–1874)</span></span>\",\n        \"<span><a href='Abegg Jakob?category=A&amp;view=correspondents&amp;search='>Abegg, Jakob</a><span class='dates'> (1801–1871)</span></span>\",\n        \"<span><a href='Abys Raget?category=A&amp;view=correspondents&amp;search='>Abys, Raget</a><span class='dates'> (1790–1861)</span></span>\",\n        \"<span><a href='Aebli Johann Peter?category=A&amp;view=correspondents&amp;search='>Aebli, Johann Peter</a><span class='dates'> (1804–1879)</span></span>\",\n        \"<span><a href='Aepli Arnold Otto?category=A&amp;view=correspondents&amp;search='>Aepli, Arnold Otto</a><span class='dates'> (1816–1897)</span></span>\",\n        ...\n    ],\n    \"categories\": [\n        {\n            \"category\": \"A\",\n            \"count\": 22\n        },\n        {\n            \"category\": \"B\",\n            \"count\": 77\n        },\n        {\n            \"category\": \"C\",\n            \"count\": 19\n        },\n      ...\n    ]\n}\n```\n\nSample Usage \n```xml\n<pb-split-list url=\"api/people\" subforms=\"#options\" selected=\"A\" emit=\"transcription\" subscribe=\"transcription\"></pb-split-list>\n```\nSee https://www.briefedition.alfred-escher.ch/kontexte/personen/?category=A&search=&view=correspondents for a running sample. The source code of the webpage is here: https://github.com/stazh/briefedition-escher. Relevant files are: \n- [templates/index.html](https://github.com/stazh/briefedition-escher/blob/master/templates/index.html#L223) - usage of pb-timeline\n- [modules/custom-api.json](https://github.com/stazh/briefedition-escher/blob/master/modules/custom-api.json#L1098) - `/api/people` endpoint delivering required JSON object",
       "attributes": [
         {
           "name": "url",
@@ -10446,7 +10462,7 @@
     {
       "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.",
+      "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.\nExpected JSON: \n```javascript\n{\n  \"1852-01-14\": {\n      \"count\": 1,\n      \"info\": [\n        \"<a href='/briefe/B0977' part='tooltip-link'>Alfred Escher an Joseph Wolfgang von Deschwanden, Belvoir (Enge, Zürich), Mittwoch, 14. Januar 1852</a>\"\n     ]\n   },\n\"1874-01-25\": {\n    \"count\": 3,\n     \"info\": [\n         \"<a href='/briefe/B8140' part='tooltip-link'>Alfred Escher an Gustav von Mevissen, Zürich, Sonntag, 25. Januar 1874</a>\",\n         \"<a href='/briefe/B8139' part='tooltip-link'>Alfred Escher an Theodor Weishaupt, Zürich, Sonntag, 25. Januar 1874</a>\",\n         \"<a href='/briefe/B8143' part='tooltip-link'>Alfred Escher an Ludwig August Parcus, Zürich, Sonntag, 25. Januar 1874</a>\"\n     ]\n  }\n}\n```\nSample Usage:\n```xml\n<pb-timeline url=\"api/timeline\" scopes=\"['D', 'M', 'Y', '5Y', '10Y']\"\n      resettable=\"\"\n      subscribe=\"docs\" emit=\"timeline\">\n   <span slot=\"label\">Angezeigter Zeitraum: </span>\n</pb-timeline>\n```\nSee https://www.briefedition.alfred-escher.ch/briefe/ for a running sample. The source code of the webpage is here: https://github.com/stazh/briefedition-escher. Relevant files are: \n- [templates/people.html](https://github.com/stazh/briefedition-escher/blob/master/templates/people.html#L91) - usage of pb-timeline\n- [modules/custom-api.json](https://github.com/stazh/briefedition-escher/blob/master/modules/custom-api.json#L1080) - `/api/timeline` endpoint delivering required JSON object",
       "attributes": [
         {
           "name": "start-date",

package/src/pb-facsimile.js

@@ -10,13 +10,13 @@ import { resolveURL } from './utils.js';
  * @fires pb-update - Checks the contents received for pb-facs-links
  * @fires pb-show-annotation - When received, sets up the viewer to select a particular image and highlight coordinates
  * @fires pb-facsimile-status - Indicates the status of loading an image into the viewer. The status is indicated
- * by the `status` property in event.detail as follows: `loading` - image was requested; `loaded` - image is displayed; 
+ * by the `status` property in event.detail as follows: `loading` - image was requested; `loaded` - image is displayed;
  * `fail` - image could not be loaded.
- * 
+ *
  * @cssprop --pb-facsimile-height=auto - Max. height of the image viewer
  * @cssprop --pb-facsimile-border - Style for the annotation highlight border
  * @csspart image - exposes the inner div hosting the image viewer
- * 
+ *
  * @slot before - use for content which should be shown above the facsimile viewer
  * @slot after - use for content which should be shown below the facsimile viewer
  */
@@ -42,6 +42,13 @@ export class PbFacsimile extends pbMixin(LitElement) {
                 type: Boolean,
                 attribute: 'show-navigator'
             },
+            
+            /** If true then the 'previous" and 'next' button is displayed switch between images. */
+            showSequenceMode: {
+                type: Boolean,
+                attribute: 'show-sequence-control'
+            },
+
             /** If true then the 'Go home' button is displayed to go back to the original zoom and pan. */
             showHomeControl: {
                 type: Boolean,
@@ -143,6 +150,7 @@ export class PbFacsimile extends pbMixin(LitElement) {
         this.type = 'iiif';
         this.visibilityRatio = 1;
         this.defaultZoomLevel = 0;
+        this.sequenceMode = false;
         this.showHomeControl = false;
         this.showNavigator = false;
         this.showNavigationControl = false;
@@ -217,9 +225,9 @@ export class PbFacsimile extends pbMixin(LitElement) {
         const options = {
             element: this.shadowRoot.getElementById('viewer'),
             prefixUrl,
-            preserveViewport: true,
-            sequenceMode: true,
+            preserveViewport: true,            
             showZoomControl: true,
+            sequenceMode: this.showSequenceMode,
             showHomeControl: this.showHomeControl,
             showFullPageControl: this.showFullPageControl,
             showNavigator: this.showNavigator,
@@ -246,6 +254,28 @@ export class PbFacsimile extends pbMixin(LitElement) {
             this.loaded = false;
             this.emitTo('pb-facsimile-status', { status: 'fail' });
         });
+
+        /*
+        handling of full-screen view requires to hide/unhide the content of body to allow full screen viewer
+        to full-page functionality. Standard OSD completely deletes all body children disconnecting all event-handlers
+        that have been there. This solution just uses style.display to hide/show. Former display value of pb-page
+        will be preserved.
+
+        Current limitation: this solution assumes that a pb-page element exists and is an immediate child of body.
+         */
+        this.ownerPage = this.closest('pb-page');
+        if(this.ownerPage){
+            this.pbPageDisplay = window.getComputedStyle(this.ownerPage).getPropertyValue('display');
+            this.viewer.addHandler('full-screen', (ev) => {
+                if(ev.fullScreen){
+                    this.ownerPage.style.display = 'none';
+                }else{
+                    this.viewer.clearOverlays();
+                    this.emitTo('pb-refresh');
+                    this.ownerPage.style.display = this.pbPageDisplay;
+                }
+            });
+        }
         this._facsimileObserver();
 
         this.signalReady();
@@ -373,4 +403,6 @@ export class PbFacsimile extends pbMixin(LitElement) {
 
 
 }
-customElements.define('pb-facsimile', PbFacsimile);
+if (!customElements.get('pb-facsimile')) {
+    customElements.define('pb-facsimile', PbFacsimile);
+}

package/src/pb-split-list.js

@@ -19,6 +19,44 @@ import { themableMixin } from "./theming.js";
  * + `items`: an array with the items to be shown for the currently selected
  *  category. Those may contain HTML markup.
  * 
+ * Sample JSON object for pb-split-list
+ * ```javascript
+ * {
+ *    "items": [
+ *        "<span><a href='Abegg-Arter Carl?category=A&amp;view=correspondents&amp;search='>Abegg-Arter, Carl</a><span class='dates'> (1836–1912)</span></span>",
+ *        "<span><a href='Abegg Hans Heinrich?category=A&amp;view=correspondents&amp;search='>Abegg, Hans Heinrich</a><span class='dates'> (1805–1874)</span></span>",
+ *        "<span><a href='Abegg Jakob?category=A&amp;view=correspondents&amp;search='>Abegg, Jakob</a><span class='dates'> (1801–1871)</span></span>",
+ *        "<span><a href='Abys Raget?category=A&amp;view=correspondents&amp;search='>Abys, Raget</a><span class='dates'> (1790–1861)</span></span>",
+ *        "<span><a href='Aebli Johann Peter?category=A&amp;view=correspondents&amp;search='>Aebli, Johann Peter</a><span class='dates'> (1804–1879)</span></span>",
+ *        "<span><a href='Aepli Arnold Otto?category=A&amp;view=correspondents&amp;search='>Aepli, Arnold Otto</a><span class='dates'> (1816–1897)</span></span>",
+ *        ...
+ *    ],
+ *    "categories": [
+ *        {
+ *            "category": "A",
+ *            "count": 22
+ *        },
+ *        {
+ *            "category": "B",
+ *            "count": 77
+ *        },
+ *        {
+ *            "category": "C",
+ *            "count": 19
+ *        },
+ *      ...
+ *    ]
+ * }
+ * ```
+ * 
+ * Sample Usage 
+ * ```xml
+ * <pb-split-list url="api/people" subforms="#options" selected="A" emit="transcription" subscribe="transcription"></pb-split-list>
+ * ```
+ * See https://www.briefedition.alfred-escher.ch/kontexte/personen/?category=A&search=&view=correspondents for a running sample. The source code of the webpage is here: https://github.com/stazh/briefedition-escher. Relevant files are: 
+ * - [templates/index.html](https://github.com/stazh/briefedition-escher/blob/master/templates/index.html#L223) - usage of pb-timeline
+ * - [modules/custom-api.json](https://github.com/stazh/briefedition-escher/blob/master/modules/custom-api.json#L1098) - `/api/people` endpoint delivering required JSON object
+ * 
  * @cssprop --pb-categorized-list-columns - the number of columns to display (default: 2)
  * @fires pb-submit - when received, submit a request to the server and refresh
  * @fires pb-start-update - sent before the element sends the request to the server

package/src/pb-timeline.js

@@ -25,7 +25,37 @@ import { translate } from "./pb-i18n.js";
  * The value associated with each entry
  * should either correspond to a count of resources or an object with properties `count` and `info`. 
  * `info` should be an array, containing HTML to be shown in a list within the tooltips.
- *
+ * Expected JSON: 
+ * ```javascript
+ * {
+ *  "1852-01-14": {
+ *      "count": 1,
+ *      "info": [
+ *        "<a href='/briefe/B0977' part='tooltip-link'>Alfred Escher an Joseph Wolfgang von Deschwanden, Belvoir (Enge, Zürich), Mittwoch, 14. Januar 1852</a>"
+ *     ]
+ *   },
+ * "1874-01-25": {
+ *    "count": 3,
+ *     "info": [
+ *         "<a href='/briefe/B8140' part='tooltip-link'>Alfred Escher an Gustav von Mevissen, Zürich, Sonntag, 25. Januar 1874</a>",
+ *         "<a href='/briefe/B8139' part='tooltip-link'>Alfred Escher an Theodor Weishaupt, Zürich, Sonntag, 25. Januar 1874</a>",
+ *         "<a href='/briefe/B8143' part='tooltip-link'>Alfred Escher an Ludwig August Parcus, Zürich, Sonntag, 25. Januar 1874</a>"
+ *     ]
+ *  }
+ * }
+ * ```
+ * Sample Usage:
+ * ```xml
+ * <pb-timeline url="api/timeline" scopes="['D', 'M', 'Y', '5Y', '10Y']"
+ *      resettable=""
+ *      subscribe="docs" emit="timeline">
+ *   <span slot="label">Angezeigter Zeitraum: </span>
+ * </pb-timeline>
+ * ```
+ * See https://www.briefedition.alfred-escher.ch/briefe/ for a running sample. The source code of the webpage is here: https://github.com/stazh/briefedition-escher. Relevant files are: 
+ * - [templates/people.html](https://github.com/stazh/briefedition-escher/blob/master/templates/people.html#L91) - usage of pb-timeline
+ * - [modules/custom-api.json](https://github.com/stazh/briefedition-escher/blob/master/modules/custom-api.json#L1080) - `/api/timeline` endpoint delivering required JSON object
+ * 
  * @slot label - Inserted before the label showing the currently displayed time range
  * 
  * @fires pb-timeline-date-changed - Triggered when user clicks on a single entry