@teipublisher/pb-components 1.36.2 → 1.38.0

package/src/pb-map-icon.js

@@ -0,0 +1,101 @@
+import { LitElement } from 'lit-element';
+
+function sizeConverter(value, type) {
+    try {
+        return value.split(/\s*,\s*/).map(s => parseInt(s, 10));
+    } catch (e) {
+        console.error(`<pb-map-icon> Invalid size specified: ${value}`);
+        return null;
+    }
+}
+/**
+ * Configure a map icon type to be used for markers. 
+ * Should be nested inside `pb-leaflet-map`.
+ *
+ */
+export class PbMapIcon extends LitElement {
+    static get properties() {
+        return {
+            /**
+             * Name of the icon. Set to 'active' to configure the icon used for
+             * places which were target of a previous `pb-geolocation` event (i.e. are currently 'active').
+             */
+            name: {
+                type: String
+            },
+            /**
+             * The URL to load the icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.
+             */
+            iconUrl: {
+                type: String,
+                attribute: 'icon-url'
+            },
+            /**
+             * Size of the icon as comma-separated string, i.e. 'height, width'.
+             */
+            iconSize: {
+                type: Array,
+                converter: sizeConverter,
+                attribute: 'icon-size'
+            },
+            /**
+             * Anchor position of the icon as comma-separated string, i.e. 'height, width'.
+             */
+            iconAnchor: {
+                type: Array,
+                converter: sizeConverter,
+                attribute: 'icon-anchor'
+            },
+            /**
+             * The URL to load the shadow icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.
+             */
+            shadowUrl: {
+                type: String,
+                attribute: 'shadow-url'
+            },
+            /**
+             * Size of the shadow icon as comma-separated string, i.e. 'height, width'.
+             */
+            shadowSize: {
+                type: Array,
+                converter: sizeConverter,
+                attribute: 'shadow-size'
+            },
+            /**
+             * Anchor position of the shadow icon as comma-separated string, i.e. 'height, width'.
+             */
+            shadowAnchor: {
+                type: Array,
+                converter: sizeConverter,
+                attribute: 'shadow-anchor'
+            },
+            /**
+             * Anchor position of the popup as comma-separated string, i.e. 'height, width'.
+             */
+            popupAncor: {
+                type: Array,
+                converter: sizeConverter,
+                attribute: 'popup-anchor'
+            }
+        };
+    }
+
+    constructor() {
+        super();
+        this.name = 'default';
+        this.type = 'image';
+        this.iconUrl = null;
+    }
+
+    get options() {
+        const options = {};
+        Object.keys(PbMapIcon.properties).forEach(key => {
+            if (this[key]) {
+                options[key] = this[key];
+            }
+        });
+        console.log('<pb-map-icon> Options: %o', options);
+        return options;
+    }
+}
+customElements.define('pb-map-icon', PbMapIcon);

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.

package/src/pb-timeline.js

@@ -282,6 +282,10 @@ export class PbTimeline extends pbMixin(LitElement) {
             scopes: {
               type: Array
             },
+            maxInterval: {
+              type: Number,
+              attribute: 'max-interval'
+            },
             /**
              * Endpoint to load timeline data from. Expects response to be an
              * object with key value pairs for (date, hits).
@@ -315,6 +319,7 @@ export class PbTimeline extends pbMixin(LitElement) {
     this.endDate = '';
     this.scope = '';
     this.scopes = ["D", "W", "M", "Y", "5Y", "10Y"];
+    this.maxInterval = 60;
     this.url = '';
     this.auto = false;
     this.resettable = false;
@@ -516,10 +521,18 @@ export class PbTimeline extends pbMixin(LitElement) {
           endDateStr: this.searchResult.getEndOfRangeDate(this.dataObj.scope, endDateStr),
           scope: this.dataObj.scope,
           categories,
-          count: itemCount
+          count: itemCount,
+          label: this.label
         });
       } else {
-        this.emitTo('pb-timeline-date-changed', { startDateStr, endDateStr: null, scope: this.dataObj.scope, categories, count: itemCount });
+        this.emitTo('pb-timeline-date-changed', { 
+          startDateStr, 
+          endDateStr: null, 
+          scope: this.dataObj.scope, 
+          categories, 
+          count: itemCount,
+          label: this.label
+        });
       }
     } else {
       this.emitTo('pb-timeline-daterange-changed', {
@@ -527,7 +540,8 @@ export class PbTimeline extends pbMixin(LitElement) {
         endDateStr,
         categories,
         scope: this.dataObj.scope,
-        count: itemCount
+        count: itemCount,
+        label: this.label
       });
     }
   }
@@ -732,15 +746,12 @@ export class PbTimeline extends pbMixin(LitElement) {
         } else {
           newJsonData = data;
         }
-        this.searchResult = new SearchResultService(newJsonData, 60, this.scopes);
+        this.searchResult = new SearchResultService(newJsonData, this.maxInterval, this.scopes);
         this.setData(this.searchResult.export(this.scope));
-        this.dispatchEvent(new CustomEvent('pb-timeline-loaded', {
-            detail: {
-                value: true
-            },
-            composed: true,
-            bubbles: true
-        }));
+        this.emitTo('pb-timeline-loaded', {
+          value: true,
+          label: this.label
+        });
     }
 
 }