@dso-toolkit/core 43.1.0 → 45.0.0

package/dist/collection/components/info/info.js

@@ -2,9 +2,9 @@ import { h, Component, Event, Prop, Fragment } from '@stencil/core';
 export class Info {
   render() {
     return (h(Fragment, null,
-      !this.fixed && (h("button", { type: "button", onClick: e => this.close.emit(e) },
-        h("span", { class: "sr-only" }, "Sluiten"))),
-      h("slot", null)));
+      h("slot", null),
+      !this.fixed && (h("button", { type: "button", onClick: e => this.dsoClose.emit(e) },
+        h("span", { class: "sr-only" }, "Sluiten")))));
   }
   static get is() { return "dso-info"; }
   static get encapsulation() { return "shadow"; }
@@ -51,8 +51,8 @@ export class Info {
     }
   }; }
   static get events() { return [{
-      "method": "close",
-      "name": "close",
+      "method": "dsoClose",
+      "name": "dsoClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/info/info.template.js

@@ -1,10 +1,10 @@
 import { html } from 'lit-html';
-export function infoTemplate({ fixed, active, richContent, onClose }) {
+export function infoTemplate({ fixed, active, richContent, dsoClose }) {
   return html `
     <dso-info
       ?fixed=${fixed}
       ?active=${active}
-      @close=${onClose}
+      @dsoClose=${dsoClose}
     >
       ${richContent}
     </dso-info>

package/dist/collection/components/info-button/info-button.js

@@ -10,7 +10,7 @@ export class InfoButton {
   }
   handleToggle(e) {
     this.active = !this.active;
-    this.toggle.emit({ originalEvent: e, active: this.active });
+    this.dsoToggle.emit({ originalEvent: e, active: this.active });
   }
   render() {
     return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e), ref: element => (this.button = element) },
@@ -79,8 +79,8 @@ export class InfoButton {
     }
   }; }
   static get events() { return [{
-      "method": "toggle",
-      "name": "toggle",
+      "method": "dsoToggle",
+      "name": "dsoToggle",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/info-button/info-button.template.js

@@ -1,11 +1,11 @@
 import { html } from 'lit-html';
-export function infoButtonTemplate({ label, active, secondary, onClick }) {
+export function infoButtonTemplate({ label, active, secondary, dsoToggle }) {
   return html `
     <dso-info-button
       label=${label}
       ?active=${active}
       ?secondary=${secondary}
-      @toggle=${(e) => onClick(e.detail)}
+      @dsoToggle=${(e) => dsoToggle(e.detail)}
     ></dso-info-button>
   `;
 }

package/dist/collection/components/label/label.css

@@ -26,6 +26,7 @@
   color: #191919;
   display: inline-block;
   line-height: 1.5;
+  max-width: 100%;
 }
 .dso-label:not(.dso-label-bright) {
   padding: 4px 8px;
@@ -89,9 +90,13 @@
 
 .dso-truncate.dso-label-content {
   display: inline-block;
-  max-width: 184px;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: bottom;
   white-space: nowrap;
+}
+
+:host([removable]) .dso-truncate.dso-label-content {
+  max-width: calc(100% - 28px);
 }

package/dist/collection/components/label/label.js

@@ -1,10 +1,16 @@
-import { Component, h, Prop, Event, State, Element, Fragment, Watch } from '@stencil/core';
+import { Component, h, Prop, Event, State, Element, Watch, Host } from '@stencil/core';
 import clsx from 'clsx';
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;
 }
 export class Label {
   constructor() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.labelText = this.host.innerText;
+      if (this.truncate) {
+        this.truncateLabel();
+      }
+    });
     this.resizeObserver = new ResizeObserver(() => this.truncateLabel());
     this.keydownListenerActive = false;
     this.keyDownListener = (event) => {
@@ -40,35 +46,33 @@ export class Label {
     });
   }
   componentDidLoad() {
+    this.labelText = this.host.innerText;
+    this.mutationObserver.observe(this.host, {
+      attributes: true,
+      subtree: true
+    });
     if (this.truncate) {
       this.startTruncate();
     }
   }
   disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.stopTruncate();
   }
   startTruncate() {
-    this.mutationObserver = new MutationObserver(() => {
-      this.truncateLabel();
-    });
-    this.mutationObserver.observe(this.host, {
-      attributes: true,
-      subtree: true
-    });
     this.resizeObserver.observe(this.host);
     this.truncateLabel();
   }
   stopTruncate() {
-    var _a;
     document.removeEventListener('keydown', this.keyDownListener);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.resizeObserver.unobserve(this.host);
     this.truncatedContent = undefined;
     this.keydownListenerActive = false;
   }
   render() {
     const status = this.status && Label.statusMap.get(this.status);
-    return (h(Fragment, null,
+    return (h(Host, { "aria-roledescription": (this.truncate && this.truncatedContent) ? 'Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus.' : undefined },
       h("span", { id: "toggle-anchor", class: clsx('dso-label', {
           [`dso-label-${this.status}`]: this.status,
           'dso-compact': this.compact && !this.removable,
@@ -82,10 +86,12 @@ export class Label {
             'dso-truncate': !!this.truncate,
           }), ref: element => this.labelContent = element, tabindex: (this.truncate && this.truncatedContent) ? 0 : -1, onMouseEnter: () => this.textHover = true, onMouseLeave: () => this.textHover = false, onFocus: () => this.textFocus = true, onBlur: () => this.textFocus = false },
           h("slot", null)),
-        this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.removeHover = true, onMouseLeave: () => this.removeHover = false, onFocus: () => this.removeFocus = true, onBlur: () => this.removeFocus = false },
-          h("span", { class: "sr-only" }, "Verwijder"),
+        this.removable && (h("button", { type: "button", onClick: e => this.dsoRemoveClick.emit(e), onMouseEnter: () => this.removeHover = true, onMouseLeave: () => this.removeHover = false, onFocus: () => this.removeFocus = true, onBlur: () => this.removeFocus = false },
+          h("span", { class: "sr-only" },
+            "Verwijder: ",
+            this.labelText),
           h("dso-icon", { icon: "times" })))),
-      h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top" }, this.truncatedContent)));
+      h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
   }
   static get is() { return "dso-label"; }
   static get encapsulation() { return "shadow"; }
@@ -170,11 +176,12 @@ export class Label {
     "removeFocus": {},
     "textHover": {},
     "textFocus": {},
-    "truncatedContent": {}
+    "truncatedContent": {},
+    "labelText": {}
   }; }
   static get events() { return [{
-      "method": "removeClick",
-      "name": "removeClick",
+      "method": "dsoRemoveClick",
+      "name": "dsoRemoveClick",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/label/label.template.js

@@ -1,14 +1,14 @@
 import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-export function labelTemplate({ status, label, button, compact, truncate, symbol }) {
+export function labelTemplate({ status, label, removable, dsoRemoveClick, compact, truncate, symbol }) {
   return html `
     <dso-label
       status=${ifDefined(status)}
-      @removeClick=${ifDefined(button === null || button === void 0 ? void 0 : button.onClick)}
+      @dsoRemoveClick=${ifDefined(dsoRemoveClick)}
       ?truncate=${truncate}
       ?compact=${compact}
-      ?removable=${button}
+      ?removable=${removable}
     >
       ${symbol
     ? html `

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -6,7 +6,7 @@ export class MapBaseLayers {
     this.group = uuidv4();
   }
   baseLayerChangeHandler(baseLayer) {
-    this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
+    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });
   }
   componentDidRender() {
     this.baseLayers
@@ -80,8 +80,8 @@ export class MapBaseLayers {
     }
   }; }
   static get events() { return [{
-      "method": "baseLayerChange",
-      "name": "baseLayerChange",
+      "method": "dsoBaseLayerChange",
+      "name": "dsoBaseLayerChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,