@teipublisher/pb-components 1.44.2 → 2.1.0

package/pb-elements.json

@@ -3172,6 +3172,11 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "disable-history",
+          "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.",
@@ -3236,6 +3241,12 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "disableHistory",
+          "attribute": "disable-history",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -3901,6 +3912,16 @@
           "type": "string",
           "default": "\"mouseover\""
         },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "order",
+          "type": "number",
+          "default": "\"POSITIVE_INFINITY\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -3924,7 +3945,8 @@
         {
           "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"
+          "type": "string",
+          "default": "\"pb-facsimile,pb-image-strip\""
         },
         {
           "name": "disabled",
@@ -3959,6 +3981,23 @@
           "type": "string",
           "default": "\"mouseover\""
         },
+        {
+          "name": "label",
+          "attribute": "label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "order",
+          "attribute": "order",
+          "type": "number",
+          "default": "\"POSITIVE_INFINITY\""
+        },
+        {
+          "name": "default",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -3987,7 +4026,8 @@
           "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"
+          "type": "string",
+          "default": "\"pb-facsimile,pb-image-strip\""
         },
         {
           "name": "disabled",
@@ -4753,7 +4793,8 @@
         {
           "name": "panels",
           "description": "an array of panel items to display when the component is loaded. It should contain a\nnumber for each panel to show, indicating the ordinal position of the template within the `<pb-panel>`\nto initialize. For example, if you have two templates in `<pb-panel>`: \"transcription\" and \"translation\",\nsetting `panels=\"[0, 1]\"` will show two columns, one with the transcription, the other with the translation.\n\nPassing in a browser parameter `panels` with a comma-separated list will set this property as well.",
-          "type": "array"
+          "type": "array",
+          "default": "[]"
         },
         {
           "name": "direction",
@@ -4809,7 +4850,8 @@
           "name": "panels",
           "attribute": "panels",
           "description": "an array of panel items to display when the component is loaded. It should contain a\nnumber for each panel to show, indicating the ordinal position of the template within the `<pb-panel>`\nto initialize. For example, if you have two templates in `<pb-panel>`: \"transcription\" and \"translation\",\nsetting `panels=\"[0, 1]\"` will show two columns, one with the transcription, the other with the translation.\n\nPassing in a browser parameter `panels` with a comma-separated list will set this property as well.",
-          "type": "array"
+          "type": "array",
+          "default": "[]"
         },
         {
           "name": "direction",
@@ -5076,6 +5118,130 @@
         }
       ]
     },
+    {
+      "name": "pb-image-strip",
+      "path": "./src/pb-image-strip.js",
+      "attributes": [
+        {
+          "name": "base-uri",
+          "type": "string"
+        },
+        {
+          "name": "items",
+          "description": "Array of image",
+          "type": "array",
+          "default": "[]"
+        },
+        {
+          "name": "image-height",
+          "type": "number",
+          "default": "80"
+        },
+        {
+          "name": "image-width",
+          "type": "number",
+          "default": "64"
+        },
+        {
+          "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": "baseUri",
+          "attribute": "base-uri",
+          "type": "string"
+        },
+        {
+          "name": "items",
+          "attribute": "items",
+          "description": "Array of image",
+          "type": "array",
+          "default": "[]"
+        },
+        {
+          "name": "urls",
+          "type": "Set<any>"
+        },
+        {
+          "name": "imageHeight",
+          "attribute": "image-height",
+          "type": "number",
+          "default": "80"
+        },
+        {
+          "name": "imageWidth",
+          "attribute": "image-width",
+          "type": "number",
+          "default": "64"
+        },
+        {
+          "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"
+        }
+      ]
+    },
     {
       "name": "pb-lang",
       "path": "./src/pb-lang.js",
@@ -7996,6 +8162,11 @@
           "type": "string",
           "default": "\".\""
         },
+        {
+          "name": "url-path",
+          "type": "string",
+          "default": "\"path\""
+        },
         {
           "name": "api-version",
           "type": "string",
@@ -8092,6 +8263,12 @@
           "type": "string",
           "default": "\".\""
         },
+        {
+          "name": "urlPath",
+          "attribute": "url-path",
+          "type": "string",
+          "default": "\"path\""
+        },
         {
           "name": "apiVersion",
           "attribute": "api-version",
@@ -9202,6 +9379,11 @@
           "name": "subforms",
           "type": "string"
         },
+        {
+          "name": "name",
+          "type": "string",
+          "default": "\"query\""
+        },
         {
           "name": "value",
           "type": "string",
@@ -9227,6 +9409,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "start",
+          "type": "number",
+          "default": "1"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -9275,6 +9462,12 @@
           "attribute": "subforms",
           "type": "string"
         },
+        {
+          "name": "name",
+          "attribute": "name",
+          "type": "string",
+          "default": "\"query\""
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -9305,6 +9498,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "start",
+          "attribute": "start",
+          "type": "number",
+          "default": "1"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -9385,7 +9584,7 @@
     {
       "name": "pb-select-feature",
       "path": "./src/pb-select-feature.js",
-      "description": "Similar to `pb-toggle-feature` but allows you to choose from a list of defined states instead of a simple\non/off toggle. Like `pb-toggle-feature` it can change state server-side as well as client-side. \n\nThe list of states is passed as a JSON array to property `items`:\n\n# Server-side\n\nProperties to be passed to the server are specified as follows:\n\n```javascript\n[\n      {\"name\": \"Diplomatic View\", \"properties\": {\"mode\": \"diplomatic\", \"view\": \"page\"}},\n      {\"name\": \"Normalized View\", \"properties\": {\"mode\": \"norm\", \"view\": \"single\"}}\n]\n```\n\n# Client-side\n\n```javascript\n[\n      {\"name\": \"Diplomatic View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": false},{\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\"}]},\n      {\"name\": \"Normalized View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": true},{\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\"}]},\n      {\"name\": \"Plain Reading View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": true}, {\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\", \"state\": true}]}\n]\n```\n\nEach item in the `selectors` property above defines either a state or a command. *state* will simply add\na css class `.toggled` to the target element when true. If *command* is set to 'disable', it will entirely disable\nthe functionality of selected elements - provided that they are\npublisher components implementing the corresponding `command` method of `pb-mixin`.",
+      "description": "Similar to `pb-toggle-feature` but allows you to choose from a list of defined states instead of a simple\non/off toggle. Like `pb-toggle-feature` it can change state server-side as well as client-side. \n\nThe list of states is passed as a JSON array to property `items`:\n\n# Server-side\n\nProperties to be passed to the server are specified as follows:\n\n```javascript\n[\n      {\"name\": \"Diplomatic View\", \"properties\": {\"mode\": \"diplomatic\", \"view\": \"page\"}},\n      {\"name\": \"Normalized View\", \"properties\": {\"mode\": \"norm\", \"view\": \"single\"}}\n]\n```\n\n# Client-side\n\n```javascript\n[\n      {\"name\": \"Diplomatic View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": false},{\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\"}]},\n      {\"name\": \"Normalized View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": true},{\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\"}]},\n      {\"name\": \"Plain Reading View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": true}, {\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\", \"state\": true}]}\n]\n```\n\nEach item in the `selectors` property above defines either a state or a command. *state* will simply add\na css class `.toggle` to the target element when true. If *command* is set to 'disable', it will entirely disable\nthe functionality of selected elements - provided that they are\npublisher components implementing the corresponding `command` method of `pb-mixin`.\n\nClient-side you may also pass an optional property `\"global\": true` to toggle the state of elements which reside\nin the surrounding HTML context below `pb-page` (means: elements which are not inside a `pb-view` or `pb-load`).",
       "attributes": [
         {
           "name": "name",
@@ -9511,6 +9710,9 @@
         {
           "name": "pb-toggle",
           "description": "Fired when a feature is selected from the dropdown and sends the selected properties"
+        },
+        {
+          "name": "pb-global-toggle"
         }
       ]
     },
@@ -10363,7 +10565,7 @@
         {
           "name": "selected",
           "type": "number",
-          "default": "\"_initial\""
+          "default": "0"
         },
         {
           "name": "subscribe",
@@ -10402,7 +10604,7 @@
           "name": "selected",
           "attribute": "selected",
           "type": "number",
-          "default": "\"_initial\""
+          "default": "0"
         },
         {
           "name": "subscribe",
@@ -10733,16 +10935,6 @@
           "description": "(optional) CSS selector: selects the elements to toggle client side (sets or unsets a \nCSS class `.toggled`). Setting this property will not trigger a reload as everything is\nhandled by javascript.",
           "type": "string"
         },
-        {
-          "name": "on",
-          "description": "Value to set the parameter to when the feature is enabled.",
-          "type": "string"
-        },
-        {
-          "name": "off",
-          "description": "Value to set the parameter to when the feature is disabled.",
-          "type": "string"
-        },
         {
           "name": "checked",
           "type": "boolean"
@@ -10753,6 +10945,18 @@
           "type": "string",
           "default": "\"on\""
         },
+        {
+          "name": "on",
+          "description": "Value to set the parameter to when the feature is enabled.",
+          "type": "string",
+          "default": "\"on\""
+        },
+        {
+          "name": "off",
+          "description": "Value to set the parameter to when the feature is disabled.",
+          "type": "string",
+          "default": "\"off\""
+        },
         {
           "name": "action",
           "description": "In combination with a selector specifies the action to be taken, currently one of\n`toggle` (default) or `disable`.",
@@ -10822,18 +11026,6 @@
           "description": "(optional) CSS selector: selects the elements to toggle client side (sets or unsets a \nCSS class `.toggled`). Setting this property will not trigger a reload as everything is\nhandled by javascript.",
           "type": "string"
         },
-        {
-          "name": "on",
-          "attribute": "on",
-          "description": "Value to set the parameter to when the feature is enabled.",
-          "type": "string"
-        },
-        {
-          "name": "off",
-          "attribute": "off",
-          "description": "Value to set the parameter to when the feature is disabled.",
-          "type": "string"
-        },
         {
           "name": "checked",
           "attribute": "checked",
@@ -10846,6 +11038,20 @@
           "type": "string",
           "default": "\"on\""
         },
+        {
+          "name": "on",
+          "attribute": "on",
+          "description": "Value to set the parameter to when the feature is enabled.",
+          "type": "string",
+          "default": "\"on\""
+        },
+        {
+          "name": "off",
+          "attribute": "off",
+          "description": "Value to set the parameter to when the feature is disabled.",
+          "type": "string",
+          "default": "\"off\""
+        },
         {
           "name": "action",
           "attribute": "action",
@@ -10938,6 +11144,12 @@
           "description": "a comma-separated list of file suffixes to accept for upload\n(by default: .xml,.tei,.odd,.docx)",
           "type": "string"
         },
+        {
+          "name": "event",
+          "description": "the event to emit when the upload has completed (default: 'pb-load')",
+          "type": "string",
+          "default": "\"pb-load\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -10983,6 +11195,13 @@
           "description": "a comma-separated list of file suffixes to accept for upload\n(by default: .xml,.tei,.odd,.docx)",
           "type": "string"
         },
+        {
+          "name": "event",
+          "attribute": "event",
+          "description": "the event to emit when the upload has completed (default: 'pb-load')",
+          "type": "string",
+          "default": "\"pb-load\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/src/dts-client.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
+import { translate } from './pb-i18n.js';
+import { registry } from './urls.js';
+
 import '@polymer/iron-ajax';
 import '@polymer/iron-icon';
 import '@polymer/iron-icons';
@@ -61,8 +63,8 @@ export class DtsClient extends pbMixin(LitElement) {
     connectedCallback() {
         super.connectedCallback();
 
-        this.collection = this.getParameter('id');
-        this.page = this.getParameter('page');
+        this.collection = registry.state.id;
+        this.page = registry.state.page;
 
         this.subscribeTo('dts-endpoint', (ev) => {
             this._setEndpoint(ev.detail.endpoint, ev.detail.collection, ev.detail.reload);
@@ -163,19 +165,16 @@ export class DtsClient extends pbMixin(LitElement) {
 
     _update() {
         this.emitTo('pb-start-update');
-        const params = {};
+        const newState = {};
         if (this.collection) {
-            params.id = this.collection;
-
-            this.setParameter('id', this.collection);
-        };
+            newState.id = this.collection;
+        }
         if (this.page) {
-            params.page = this.page + 1;
-            this.setParameter('page', this.page);
+            newState.page = this.page + 1;
         }
-        this.pushHistory('dts-client-navigate');
+        registry.commit(this, newState);
 
-        this.queryAPI.params = params;
+        this.queryAPI.params = newState;
         this.queryAPI.url = this._collectionEndpoint;
         this.queryAPI.generateRequest();
     }
@@ -205,7 +204,8 @@ export class DtsClient extends pbMixin(LitElement) {
         const json = this.documentsAPI.lastResponse;
         this.emitTo('pb-end-update');
         const url = new URL(json.path, window.location.href);
-        window.location = url;
+        // use registry here?
+        window.location.replace(url);
     }
 
     _handleError(ev) {
@@ -284,7 +284,7 @@ export class DtsClient extends pbMixin(LitElement) {
     }
 
     _renderMember(member) {
-        if (member['@type'] == 'Collection') {
+        if (member['@type'] === 'Collection') {
             return html`
                 <iron-icon icon="icons:folder-open"></iron-icon>
                 <div class="details">

package/src/dts-select-endpoint.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
+import { translate } from './pb-i18n.js';
+import { registry } from './urls.js';
+
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-listbox';
 import '@polymer/paper-item';
@@ -53,8 +55,7 @@ export class DtsSelectEndpoint extends pbMixin(LitElement) {
 
     connectedCallback() {
         super.connectedCallback();
-
-        this.endpoint = this.getParameter('endpoint');
+        this.endpoint = registry.state.endpoint;
     }
 
     updated(changedProperties) {
@@ -96,8 +97,7 @@ export class DtsSelectEndpoint extends pbMixin(LitElement) {
             return;
         }
         const endpoint = this.endpoints.find((endp) => endp.url === newEndpoint);
-        this.setParameter('endpoint', endpoint.url);
-        this.pushHistory('dts-endpoint');
+        registry.commit(this, { endpoint: endpoint.url });
         console.log('<dts-select-endpoint> Setting endpoint to %s', newEndpoint);
         this.emitTo('dts-endpoint', {
             endpoint: endpoint.url,

package/src/pb-ajax.js

@@ -121,8 +121,8 @@ export class PbAjax extends pbMixin(LitElement) {
         if (this.confirm) {
             const dialog = this.shadowRoot.getElementById('confirmDialog');
             dialog.confirm(this._dialogTitle, i18n(this.confirm))
-            .then(() => this.trigger())
-            .catch(() => console.log('<pb-ajax> Action cancelled'));
+                .then(() => this.trigger())
+                .catch(() => console.log('<pb-ajax> Action cancelled'));
         } else {
             this.trigger();
         }
@@ -161,8 +161,8 @@ export class PbAjax extends pbMixin(LitElement) {
         } else {
             this._message = msg;
         }
-        const dialog = this.shadowRoot.getElementById('messageDialog');
-        dialog.open();
+        const dialog = this.shadowRoot.getElementById('confirmDialog');
+        dialog.show(i18n('dialogs.error'), this._message);
         this.emitTo('pb-end-update');
     }
 

package/src/pb-authority-lookup.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 import { createConnectors } from "./authority/connectors.js";
 import '@polymer/paper-input/paper-input';
@@ -66,7 +66,7 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
         this._query();
     });
 
-    PbAuthorityLookup.waitOnce('pb-page-ready', () => {
+    waitOnce('pb-page-ready', () => {
       const connectors = createConnectors(this.getEndpoint(), this);
       connectors.forEach(connector => { this._authorities[connector.register] = connector });
     });

package/src/pb-autocomplete.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin';
+import { pbMixin, waitOnce } from './pb-mixin';
 import { translate } from './pb-i18n';
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/iron-ajax';
@@ -140,12 +140,12 @@ export class PbAutocomplete extends pbMixin(LitElement) {
             if (this.substring) {
                 autocomplete.queryFn = _query;
             }
-            PbAutocomplete.waitOnce('pb-page-ready', () => {
+            waitOnce('pb-page-ready', () => {
                 this._sendRequest();
             });
         } else if (this.value) {
             if (this.source) {
-                PbAutocomplete.waitOnce('pb-page-ready', () => {
+                waitOnce('pb-page-ready', () => {
                     //console.log('send autocomplete request for remote source %s on value %s', this.source, this.value);
                     this._sendRequest(this.value);
                 });
@@ -233,7 +233,7 @@ export class PbAutocomplete extends pbMixin(LitElement) {
         loader.url = this.toAbsoluteURL(this.source);
 
         const params = this._getParameters();
-        params['query'] = query;
+        params.query = query;
         loader.params = params;
         //console.log('send request for %s with %o', loaderId, params);
 
@@ -286,18 +286,16 @@ export class PbAutocomplete extends pbMixin(LitElement) {
     }
 
     _autocompleteSelected(ev) {
-        this.lastSelected = ev.detail.text;
+        const { text, value } = ev.detail;
+        this.lastSelected = text;
         const input = this.shadowRoot.getElementById('search');
-        input.value = ev.detail.text;
-        this.value = ev.detail.value;
+        input.value = text;
+        this.value = value;
         if (this._hiddenInput) {
             this._hiddenInput.value = this.value;
         }
 
-        this.emitTo('pb-autocomplete-selected', {
-            text: ev.detail.text,
-            value: ev.detail.value
-        });
+        this.emitTo('pb-autocomplete-selected', { text, value });
     }
 
     _setInput(ev) {

package/src/pb-blacklab-highlight.js

@@ -1,5 +1,5 @@
-import {LitElement, html, css} from 'lit-element';
-import {pbMixin} from './pb-mixin.js';
+import { LitElement, html, css } from 'lit-element';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 
 /**
  * This component queries the blacklab API of TEI-Publisher for a list of text matches
@@ -108,7 +108,7 @@ export class PbBlacklabHighlight extends pbMixin(LitElement) {
          * waiting for the page to be ready before storing a reference to the shadowDOM of the view element this
          * component is attached to via the 'view' attribute.
          */
-        PbBlacklabHighlight.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             this.viewElement = document.getElementById(this.view);
             if (!this.viewElement) {
                 console.error(`${this}: view element with id ${this.view} does not exist`);