@teipublisher/pb-components 1.36.3 → 1.37.0

package/dist/pb-elements.json

@@ -2285,6 +2285,161 @@
         }
       ]
     },
+    {
+      "name": "pb-combo-box",
+      "path": "./src/pb-combo-box.js",
+      "description": "Provides a combo box, i.e. a combination of an input with a dropdown.\nItems to select from may be obtained from a remote data source.\n\nThe form control to be used (either a select or input) should be passed \nin the content of the element. If no control is provided, a simple `<input>`\nwill be created.",
+      "attributes": [
+        {
+          "name": "source",
+          "description": "A remote data source to use. The component will pass the text entered by the user\nin parameter `query`. It expects a JSON array of objects with each object describing\none item:\n\n```json\n{\n  \"text\": \"Text to show as label\",\n  \"value\": \"value-to-use\"\n}\n```",
+          "type": "string"
+        },
+        {
+          "name": "close-after-select",
+          "description": "Automatically close the dropdown once the user made a selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "preload",
+          "description": "Preload all items from the remote data source at startup",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "on-blur",
+          "description": "Name of the event to be emitted when the user leaves the form control",
+          "type": "string",
+          "default": "\"pb-combo-box-blur\""
+        },
+        {
+          "name": "on-change",
+          "description": "Name of the event to be emitted when the value of the form control has changed",
+          "type": "string",
+          "default": "\"pb-combo-box-change\""
+        },
+        {
+          "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": "renderItem",
+          "description": "Set a javascript function to be called whenever an item\nneeds to be rendered. The function will be passed the data\nobject of the current item as argument.",
+          "type": "Function"
+        },
+        {
+          "name": "theme",
+          "type": "string",
+          "default": "\"default\""
+        },
+        {
+          "name": "source",
+          "attribute": "source",
+          "description": "A remote data source to use. The component will pass the text entered by the user\nin parameter `query`. It expects a JSON array of objects with each object describing\none item:\n\n```json\n{\n  \"text\": \"Text to show as label\",\n  \"value\": \"value-to-use\"\n}\n```",
+          "type": "string"
+        },
+        {
+          "name": "closeAfterSelect",
+          "attribute": "close-after-select",
+          "description": "Automatically close the dropdown once the user made a selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "preload",
+          "attribute": "preload",
+          "description": "Preload all items from the remote data source at startup",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "renderFunction",
+          "type": "object",
+          "default": "\"renderDefault\""
+        },
+        {
+          "name": "onBlur",
+          "attribute": "on-blur",
+          "description": "Name of the event to be emitted when the user leaves the form control",
+          "type": "string",
+          "default": "\"pb-combo-box-blur\""
+        },
+        {
+          "name": "onChange",
+          "attribute": "on-change",
+          "description": "Name of the event to be emitted when the value of the form control has changed",
+          "type": "string",
+          "default": "\"pb-combo-box-change\""
+        },
+        {
+          "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-custom-form",
       "path": "./src/pb-custom-form.js",
@@ -7390,6 +7545,9 @@
         {
           "name": "pb-toggle",
           "description": "when received, dispatch state changes to the elements on the page (see `pb-toggle-feature`, `pb-select-feature`)"
+        },
+        {
+          "name": "pb-page-loaded"
         }
       ],
       "slots": [
@@ -7773,7 +7931,8 @@
         },
         {
           "name": "popup-class",
-          "type": "string"
+          "description": "Additional class names which will be added to the popup element.\nUse this to apply a specific style to certain popovers, but not others.",
+          "type": "String"
         },
         {
           "name": "subscribe",
@@ -7808,11 +7967,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "poupClass",
-          "description": "Additional class names which will be added to the popup element.\nUse this to apply a specific style to certain popovers, but not others.",
-          "type": "String"
-        },
         {
           "name": "remote",
           "attribute": "remote",
@@ -7863,7 +8017,8 @@
         {
           "name": "popupClass",
           "attribute": "popup-class",
-          "type": "string"
+          "description": "Additional class names which will be added to the popup element.\nUse this to apply a specific style to certain popovers, but not others.",
+          "type": "String"
         },
         {
           "name": "subscribe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.36.3",
+  "version": "1.37.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -83,6 +83,7 @@
     "openseadragon": "^2.4.2",
     "prismjs": "^1.21.0",
     "tippy.js": "^6.2.7",
+    "tom-select": "^2.0.2",
     "uniqolor": "^1.0.1",
     "web-animations-js": "^2.3.2"
   },

package/pb-elements.json

@@ -2285,6 +2285,161 @@
         }
       ]
     },
+    {
+      "name": "pb-combo-box",
+      "path": "./src/pb-combo-box.js",
+      "description": "Provides a combo box, i.e. a combination of an input with a dropdown.\nItems to select from may be obtained from a remote data source.\n\nThe form control to be used (either a select or input) should be passed \nin the content of the element. If no control is provided, a simple `<input>`\nwill be created.",
+      "attributes": [
+        {
+          "name": "source",
+          "description": "A remote data source to use. The component will pass the text entered by the user\nin parameter `query`. It expects a JSON array of objects with each object describing\none item:\n\n```json\n{\n  \"text\": \"Text to show as label\",\n  \"value\": \"value-to-use\"\n}\n```",
+          "type": "string"
+        },
+        {
+          "name": "close-after-select",
+          "description": "Automatically close the dropdown once the user made a selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "preload",
+          "description": "Preload all items from the remote data source at startup",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "on-blur",
+          "description": "Name of the event to be emitted when the user leaves the form control",
+          "type": "string",
+          "default": "\"pb-combo-box-blur\""
+        },
+        {
+          "name": "on-change",
+          "description": "Name of the event to be emitted when the value of the form control has changed",
+          "type": "string",
+          "default": "\"pb-combo-box-change\""
+        },
+        {
+          "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": "renderItem",
+          "description": "Set a javascript function to be called whenever an item\nneeds to be rendered. The function will be passed the data\nobject of the current item as argument.",
+          "type": "Function"
+        },
+        {
+          "name": "theme",
+          "type": "string",
+          "default": "\"default\""
+        },
+        {
+          "name": "source",
+          "attribute": "source",
+          "description": "A remote data source to use. The component will pass the text entered by the user\nin parameter `query`. It expects a JSON array of objects with each object describing\none item:\n\n```json\n{\n  \"text\": \"Text to show as label\",\n  \"value\": \"value-to-use\"\n}\n```",
+          "type": "string"
+        },
+        {
+          "name": "closeAfterSelect",
+          "attribute": "close-after-select",
+          "description": "Automatically close the dropdown once the user made a selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "preload",
+          "attribute": "preload",
+          "description": "Preload all items from the remote data source at startup",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "renderFunction",
+          "type": "object",
+          "default": "\"renderDefault\""
+        },
+        {
+          "name": "onBlur",
+          "attribute": "on-blur",
+          "description": "Name of the event to be emitted when the user leaves the form control",
+          "type": "string",
+          "default": "\"pb-combo-box-blur\""
+        },
+        {
+          "name": "onChange",
+          "attribute": "on-change",
+          "description": "Name of the event to be emitted when the value of the form control has changed",
+          "type": "string",
+          "default": "\"pb-combo-box-change\""
+        },
+        {
+          "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-custom-form",
       "path": "./src/pb-custom-form.js",
@@ -7390,6 +7545,9 @@
         {
           "name": "pb-toggle",
           "description": "when received, dispatch state changes to the elements on the page (see `pb-toggle-feature`, `pb-select-feature`)"
+        },
+        {
+          "name": "pb-page-loaded"
         }
       ],
       "slots": [
@@ -7773,7 +7931,8 @@
         },
         {
           "name": "popup-class",
-          "type": "string"
+          "description": "Additional class names which will be added to the popup element.\nUse this to apply a specific style to certain popovers, but not others.",
+          "type": "String"
         },
         {
           "name": "subscribe",
@@ -7808,11 +7967,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "poupClass",
-          "description": "Additional class names which will be added to the popup element.\nUse this to apply a specific style to certain popovers, but not others.",
-          "type": "String"
-        },
         {
           "name": "remote",
           "attribute": "remote",
@@ -7863,7 +8017,8 @@
         {
           "name": "popupClass",
           "attribute": "popup-class",
-          "type": "string"
+          "description": "Additional class names which will be added to the popup element.\nUse this to apply a specific style to certain popovers, but not others.",
+          "type": "String"
         },
         {
           "name": "subscribe",

package/src/pb-combo-box.js

@@ -0,0 +1,154 @@
+import { LitElement } from 'lit-element';
+import TomSelect from "tom-select";
+import { pbMixin } from './pb-mixin.js';
+import { resolveURL } from './utils.js';
+
+function importTheme(theme) {
+    if (document.getElementById('__pb-multi-select-css')) {
+        return;
+    }
+    const themes = resolveURL('../css/tom-select');
+    const link = document.createElement('link');
+    link.id = '__pb-multi-select-css';
+    link.href = `${themes}/tom-select.${theme}.min.css`;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+}
+
+const renderDefault = (data) =>
+    data ? `<div>${data.text}</div>` : '';
+
+/**
+ * Provides a combo box, i.e. a combination of an input with a dropdown.
+ * Items to select from may be obtained from a remote data source.
+ * 
+ * The form control to be used (either a select or input) should be passed 
+ * in the content of the element. If no control is provided, a simple `<input>`
+ * will be created.
+ * 
+ */
+export class PbComboBox extends pbMixin(LitElement) {
+    static get properties() {
+        return {
+            ...super.properties,
+            /**
+             * A remote data source to use. The component will pass the text entered by the user
+             * in parameter `query`. It expects a JSON array of objects with each object describing
+             * one item:
+             * 
+             * ```json
+             * {
+             *  "text": "Text to show as label",
+             *  "value": "value-to-use"
+             * }
+             * ```
+             */
+            source: {
+                type: String
+            },
+            /**
+             * Automatically close the dropdown once the user made a selection
+             */
+            closeAfterSelect: {
+                type: Boolean,
+                attribute: 'close-after-select'
+            },
+            /**
+             * Preload all items from the remote data source at startup
+             */
+            preload: {
+                type: Boolean
+            },
+            /**
+             * Name of the event to be emitted when the user leaves the form control
+             */
+            onBlur: {
+                type: String,
+                attribute: 'on-blur'
+            },
+            /**
+             * Name of the event to be emitted when the value of the form control has changed
+             */
+            onChange: {
+                type: String,
+                attribute: 'on-change'
+            }
+        };
+    }
+
+    /**
+     * Set a javascript function to be called whenever an item
+     * needs to be rendered. The function will be passed the data
+     * object of the current item as argument.
+     * 
+     * @param {Function} callbackFunction
+     */
+    set renderItem(callbackFunction) {
+        this.renderFunction = callbackFunction;
+    }
+
+    constructor() {
+        super();
+        this.theme = 'default';
+        this.source = null;
+        this.closeAfterSelect = false;
+        this.preload = false;
+        this.renderFunction = renderDefault;
+        this.onBlur = 'pb-combo-box-blur';
+        this.onChange = 'pb-combo-box-change';
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    firstUpdated() {
+        importTheme(this.theme);
+
+        let input = this.querySelector('select,input');
+
+        if (!input) {
+            // create input if none was passed
+            input = document.createElement('input');
+            this.appendChild(input);
+        }
+        input.autocomplete = false;
+
+        PbComboBox.waitOnce('pb-page-ready', () => {
+            const options = {};
+            if (this.source) {
+                const url = this.toAbsoluteURL(this.source);
+                options.labelField = 'text';
+                options.valueField = 'value';
+                options.searchField = ['text', 'value'];
+                options.preload = this.preload;
+                options.load = (query, callback) => {
+                    fetch(`${url}?query=${encodeURIComponent(query)}`, {
+                        method: 'GET',
+                        mode: 'cors',
+                        credentials: 'same-origin'
+                    })
+                    .then(response => response.json())
+                    .then(json => {
+                        callback(json);
+                    }).catch(()=>{
+                        callback();
+                    });
+                };
+                options.render = {
+                    option: this.renderFunction,
+                    item: this.renderFunction
+                };
+            }
+            options.closeAfterSelect = this.closeAfterSelect;
+            options.onBlur = () => this.emitTo(this.onBlur);
+            options.onChange = () => this.emitTo(this.onChange);
+            this._select = new TomSelect(input, options);
+        });
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+}
+customElements.define('pb-combo-box', PbComboBox);

package/src/pb-components.js

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

package/src/pb-page.js

@@ -229,6 +229,15 @@ class PbPage extends pbMixin(LitElement) {
             return;
         }
 
+        const slot = this.shadowRoot.querySelector('slot');
+        slot.addEventListener('slotchange', () => {
+            const ev = new CustomEvent('pb-page-loaded', {
+                bubbles: true,
+                composed: true
+            });
+            this.dispatchEvent(ev);
+        }, { once: true });
+
         const defaultLocales = resolveURL('../i18n/') + '{{ns}}/{{lng}}.json';
         console.log('<pb-page> Loading locales. common: %s; additional: %s; namespaces: %o',
             defaultLocales, this.locales, this._localeFallbacks);

package/src/pb-popover.js

@@ -74,7 +74,7 @@ export function loadTippyStyles(root, theme) {
  * unless defined otherwise; clicking anywhere on the page will close the popup.
  * @prop {"click" | "mouseenter" | "focus" | "focusin"} trigger - Defines one or more actions (space separated) which should cause
  * the popover to show. If property `persistent` is set, `trigger` will by default be set to `click`.
- * @prop {String} poupClass - Additional class names which will be added to the popup element.
+ * @prop {String} popupClass - Additional class names which will be added to the popup element.
  * Use this to apply a specific style to certain popovers, but not others.
  * @prop {String} remote - An optional URL to asynchronously load the popover's content from. Content will
  * be loaded after the popover is displayed. The downloaded HTML content will replace the text set via the alternate slot.