@teipublisher/pb-components 1.36.3 → 1.38.1

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.