@dso-toolkit/core 43.1.0 → 45.0.0

package/dist/collection/components/map-controls/map-controls.js

@@ -14,6 +14,7 @@ import { Component, h, Host, Prop, Event, State, Watch } from '@stencil/core';
 const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
 export class MapControls {
   constructor() {
+    this.panelTitle = 'Kaartlagen';
     this.open = false;
     this.hideContent = !this.open;
     _MapControls_closeButtonElement.set(this, void 0);
@@ -37,17 +38,19 @@ export class MapControls {
         h("dso-icon", { icon: "layers" }),
         h("span", null, "Kaartlagen")),
       h("div", { id: "zoom-buttons" },
-        h("button", { type: "button", onClick: e => this.zoomIn.emit(e), disabled: this.disableZoom === 'in' || this.disableZoom === 'both' },
+        h("button", { type: "button", onClick: e => this.dsoZoomIn.emit(e), disabled: this.disableZoom === 'in' || this.disableZoom === 'both' },
           h("span", null, "Zoom in"),
           h("dso-icon", { icon: "plus" })),
-        h("button", { type: "button", onClick: e => this.zoomOut.emit(e), disabled: this.disableZoom === 'out' || this.disableZoom === 'both' },
+        h("button", { type: "button", onClick: e => this.dsoZoomOut.emit(e), disabled: this.disableZoom === 'out' || this.disableZoom === 'both' },
           h("span", null, "Zoom uit"),
           h("dso-icon", { icon: "minus" }))),
       h("section", { hidden: this.hideContent },
         h("header", null,
-          h("h2", null, "Kaartlagen"),
+          h("h2", null, this.panelTitle),
           h("button", { type: "button", id: "close-button", onClick: () => this.open = false, ref: element => __classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f") },
-            h("span", null, "Sluit dialoog"),
+            h("span", null,
+              "Verberg paneel ",
+              this.panelTitle),
             h("dso-icon", { icon: "times" }))),
         h("div", { class: "content" },
           h("slot", null)))));
@@ -101,8 +104,8 @@ export class MapControls {
     "hideContent": {}
   }; }
   static get events() { return [{
-      "method": "zoomIn",
-      "name": "zoomIn",
+      "method": "dsoZoomIn",
+      "name": "dsoZoomIn",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -120,8 +123,8 @@ export class MapControls {
         }
       }
     }, {
-      "method": "zoomOut",
-      "name": "zoomOut",
+      "method": "dsoZoomOut",
+      "name": "dsoZoomOut",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/map-controls/map-controls.template.js

@@ -1,19 +1,19 @@
 import { html } from 'lit-html';
-export function mapControlsTemplate({ zoomIn, zoomOut, open, baseLayers, baseLayerChange, overlays, toggleOverlay, disableZoom }) {
+export function mapControlsTemplate({ dsoZoomIn, dsoZoomOut, open, baseLayers, dsoBaseLayerChange, overlays, dsoToggleOverlay, disableZoom }) {
   return html `
     <dso-map-controls
-      @zoomIn=${zoomIn}
-      @zoomOut=${zoomOut}
+      @dsoZoomIn=${dsoZoomIn}
+      @dsoZoomOut=${dsoZoomOut}
       .disableZoom=${disableZoom}
       ?open=${open}
     >
       <dso-map-base-layers
         .baseLayers=${baseLayers}
-        @baseLayerChange=${(e) => baseLayerChange(e)}
+        @dsoBaseLayerChange=${(e) => dsoBaseLayerChange(e)}
       ></dso-map-base-layers>
       <dso-map-overlays
         .overlays=${overlays}
-        @toggleOverlay=${(e) => toggleOverlay(e)}
+        @dsoToggleOverlay=${(e) => dsoToggleOverlay(e)}
       ></dso-map-overlays>
       <div class="dso-rich-content">
         <p>Dit is een Web Component wat aangesloten kan worden op Leaflet.js of OpenLayers.</p>

package/dist/collection/components/map-overlays/map-overlays.js

@@ -7,7 +7,7 @@ export class MapOverlays {
   }
   overlayChangeHandler(overlay, e) {
     const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
-    this.toggleOverlay.emit({ overlay, checked });
+    this.dsoToggleOverlay.emit({ overlay, checked });
   }
   componentDidRender() {
     this.overlays
@@ -81,8 +81,8 @@ export class MapOverlays {
     }
   }; }
   static get events() { return [{
-      "method": "toggleOverlay",
-      "name": "toggleOverlay",
+      "method": "dsoToggleOverlay",
+      "name": "dsoToggleOverlay",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/ozon-content/nodes/ext-ref.node.js

@@ -7,8 +7,8 @@ export class OzonContentExtRefNode {
     ];
   }
   render(node, { mapNodeToJsx }) {
-    var _a;
-    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: (_a = node.getAttribute('ref')) !== null && _a !== void 0 ? _a : undefined },
+    const href = node.tagName === 'ExtIoRef' ? node.getAttribute('href') : node.getAttribute('ref');
+    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: href !== null && href !== void 0 ? href : undefined },
       h("span", { class: "sr-only" }, "opent in nieuw venster"),
       mapNodeToJsx(node.childNodes)));
   }

package/dist/collection/components/ozon-content/ozon-content.css

@@ -15,6 +15,9 @@
   color: #39870c;
   text-decoration: underline;
   cursor: pointer;
+  color: #275937;
+  font-weight: 600;
+  text-decoration: none;
 }
 :host([interactive]):hover, :host([interactive]):focus {
   color: #676cb0;
@@ -24,6 +27,10 @@
   text-decoration: none;
 }
 
+:host([interactive=sub]) {
+  color: #191919;
+}
+
 .deleted-start,
 .deleted-end {
   position: absolute;
@@ -75,6 +82,7 @@ button.toggle-note[disabled].dso-spinner-left, button.toggle-note[disabled].dso-
 button.toggle-note:not([disabled]):hover {
   color: #676cb0;
   text-decoration: underline;
+  text-underline-position: under;
 }
 button.toggle-note:not([disabled]):active {
   color: #676cb0;
@@ -142,6 +150,16 @@ button.toggle-note span:not(.sr-only) + dso-icon,
 button.toggle-note span:not(.sr-only) + svg.di {
   margin-left: 8px;
 }
+button.toggle-note dso-icon[icon=chevron-left] + span:not(.sr-only),
+button.toggle-note dso-icon[icon=chevron-right] + span:not(.sr-only),
+button.toggle-note svg.di.di-angle-down + span:not(.sr-only),
+button.toggle-note svg.di.di-angle-up + span:not(.sr-only),
+button.toggle-note span:not(.sr-only) + svg.di.di-angle-down,
+button.toggle-note span:not(.sr-only) + svg.di.di-angle-up,
+button.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-left],
+button.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-right] {
+  margin-left: 0;
+}
 button.toggle-note dso-icon,
 button.toggle-note svg.di,
 button.toggle-note span {

package/dist/collection/components/ozon-content/ozon-content.js

@@ -16,13 +16,18 @@ export class OzonContent {
      *
      * **Do not** use this without an accessible companion element! `interactive` is only
      * meant to ease the use of the companion element for mouse/touch users.
+     *
+     * * `true`: Interactive anchor-look-alike
+     * * `"sub"`: Interactive anchor-look-alike for sub navigation
+     * * `false | undefined`: Disabled
      */
     this.interactive = false;
     this.state = {};
     this.mapper = new Mapper();
   }
   handleHostOnClick(e) {
-    if (!this.interactive) {
+    // '' is `true`: <dso-ozon-content interactive>
+    if (this.interactive !== '' && !this.interactive) {
       return;
     }
     const doIt = e.composedPath().find(e => e === this.host || (e instanceof HTMLElement && isTabbable(e))) === this.host;
@@ -35,7 +40,7 @@ export class OzonContent {
     const context = {
       state: this.state,
       setState: state => this.state = state,
-      emitAnchorClick: this.anchorClick.emit
+      emitAnchorClick: this.dsoAnchorClick.emit
     };
     const transformed = this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
     if (this.deleted) {
@@ -114,18 +119,18 @@ export class OzonContent {
       "defaultValue": "false"
     },
     "interactive": {
-      "type": "boolean",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "'sub' | '' | boolean",
+        "resolved": "\"\" | \"sub\" | boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\n\n**Do not** use this without an accessible companion element! `interactive` is only\nmeant to ease the use of the companion element for mouse/touch users."
+        "text": "Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\n\n**Do not** use this without an accessible companion element! `interactive` is only\nmeant to ease the use of the companion element for mouse/touch users.\n\n* `true`: Interactive anchor-look-alike\n* `\"sub\"`: Interactive anchor-look-alike for sub navigation\n* `false | undefined`: Disabled"
       },
       "attribute": "interactive",
       "reflect": true,
@@ -136,8 +141,8 @@ export class OzonContent {
     "state": {}
   }; }
   static get events() { return [{
-      "method": "anchorClick",
-      "name": "anchorClick",
+      "method": "dsoAnchorClick",
+      "name": "dsoAnchorClick",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/ozon-content/ozon-content.template.js

@@ -1,14 +1,14 @@
 import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function ozonContentTemplate({ content, inline, interactive, deleted, prefix, suffix, onAnchorClick, onClick }) {
+export function ozonContentTemplate({ content, inline, interactive, deleted, prefix, suffix, dsoAnchorClick, dsoClick }) {
   return html `
     <dso-ozon-content
+      interactive=${ifDefined(interactive || undefined)}
       .content=${content}
       ?inline=${inline}
-      ?interactive=${interactive}
       ?deleted=${deleted}
-      @anchorClick=${onAnchorClick}
-      @dsoClick=${ifDefined(interactive ? onClick : undefined)}
+      @dsoAnchorClick=${dsoAnchorClick}
+      @dsoClick=${ifDefined(interactive ? dsoClick : undefined)}
     >${prefix ? html `<span slot="prefix">${prefix}</span>` : nothing}${suffix ? html `<span slot="suffix">${suffix}</span>` : nothing}</dso-ozon-content>
   `;
 }

package/dist/collection/components/pagination/pagination.js

@@ -7,7 +7,7 @@ export class Pagination {
     this.formatHref = (page) => '#' + page;
   }
   clickHandler(e, page) {
-    this.selectPage.emit({
+    this.dsoSelectPage.emit({
       originalEvent: e,
       page,
       isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
@@ -94,8 +94,8 @@ export class Pagination {
     }
   }; }
   static get events() { return [{
-      "method": "selectPage",
-      "name": "selectPage",
+      "method": "dsoSelectPage",
+      "name": "dsoSelectPage",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -1,11 +1,11 @@
 import { html } from 'lit-html';
-export function paginationTemplate({ totalPages, currentPage, onSelectPage, formatHref, }) {
+export function paginationTemplate({ totalPages, currentPage, dsoSelectPage, formatHref, }) {
   return html `
     <dso-pagination
       total-pages=${totalPages}
       current-page=${currentPage}
       .formatHref=${formatHref}
-      @selectPage=${onSelectPage}
+      @dsoSelectPage=${dsoSelectPage}
     ></dso-pagination>
   `;
 }

package/dist/collection/components/progress-bar/progress-bar.css

@@ -20,25 +20,21 @@
 }
 
 .progress {
+  margin-bottom: 8px;
+}
+.progress #progress-bar-label {
+  font-size: 0.875rem;
+  margin-top: 8px;
+}
+.progress .progress-bar {
   background-color: #fff;
   border: 1px solid #39870c;
+  display: block;
   height: 16px;
-  margin-bottom: calc(16px + 1em);
-  position: relative;
 }
-.progress .progress-bar {
+.progress .progress-bar > span {
   background-color: #39870c;
-  color: #fff;
   float: left;
-  font-size: 0.875rem;
   height: 100%;
-  line-height: 16px;
-  text-align: center;
   width: 0%;
-}
-.progress .progress-bar > span:not(.sr-only) {
-  color: #191919;
-  left: 0;
-  position: absolute;
-  top: calc(100% + 8px);
 }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -8,9 +8,10 @@ export class ProgressBar {
     const progressNumber = Math.round(this.progress);
     const progressPercentage = `${progressNumber}%`;
     return (h("div", { class: "progress" },
-      h("div", { class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max, style: { width: `${progressPercentage}` } },
-        h("span", { id: "progress-bar-label" },
-          h("slot", null)))));
+      h("span", { class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max },
+        h("span", { style: { width: `${progressPercentage}` } })),
+      h("span", { id: "progress-bar-label" },
+        h("slot", null))));
   }
   static get is() { return "dso-progress-bar"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.css

@@ -16,10 +16,6 @@ span.dso-progress-indicator-label {
   vertical-align: middle;
 }
 
-:host {
-  display: block;
-}
-
 :host([block]) {
   align-items: center;
   display: flex;

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -4,7 +4,7 @@ export class Progressindicator {
     var _a;
     const label = (_a = this.label) !== null && _a !== void 0 ? _a : 'Resultaten laden: een moment geduld alstublieft.';
     return (h(Host, null,
-      h("div", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" },
+      h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" },
         h("svg", { class: "spinner", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
           h("style", null, `
                 .spinner { animation: rotator 8s linear infinite; transform-origin: center; }

package/dist/collection/components/selectable/selectable.js

@@ -31,12 +31,12 @@ export class Selectable {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
     return (h(Fragment, null,
-      h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": (hasInfo && this.infoFixed) ? this.describedById : undefined, disabled: this.disabled, required: this.required, checked: this.checked, onChange: e => this.change.emit(e), ref: (el) => this.input = el }),
+      h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": (hasInfo && this.infoFixed) ? this.describedById : undefined, disabled: this.disabled, required: this.required, checked: this.checked, onChange: e => this.dsoChange.emit(e), ref: (el) => this.input = el }),
       h("label", { htmlFor: this.getIdentifier() },
         h("slot", null)),
       hasInfo && (h(Fragment, null,
-        !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onToggle: e => this.infoActive = e.detail.active })),
-        h("dso-info", { id: (hasInfo && this.infoFixed) ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onClose: () => this.infoActive = false },
+        !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: e => this.infoActive = e.detail.active })),
+        h("dso-info", { id: (hasInfo && this.infoFixed) ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => this.infoActive = false },
           h("div", null,
             h("slot", { name: "info" })))))));
   }
@@ -245,7 +245,7 @@ export class Selectable {
     "infoActive": {}
   }; }
   static get events() { return [{
-      "method": "change",
+      "method": "dsoChange",
       "name": "dsoChange",
       "bubbles": true,
       "cancelable": true,

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

@@ -1,6 +1,6 @@
 import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function selectableTemplate({ type, id, name, label, value, required, invalid, describedById, checked, indeterminate, disabled, onChange, info }) {
+export function selectableTemplate({ type, id, name, label, value, required, invalid, describedById, checked, indeterminate, disabled, dsoChange, info }) {
   var _a;
   return html `
     <dso-selectable
@@ -15,7 +15,7 @@ export function selectableTemplate({ type, id, name, label, value, required, inv
       ?checked=${checked}
       ?indeterminate=${indeterminate}
       ?info-fixed=${info === null || info === void 0 ? void 0 : info.fixed}
-      @dsoChange=${(e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.detail)}
+      @dsoChange=${(e) => dsoChange === null || dsoChange === void 0 ? void 0 : dsoChange(e.detail)}
     >
       ${label}
       ${(_a = info === null || info === void 0 ? void 0 : info.richContent) !== null && _a !== void 0 ? _a : nothing}

package/dist/collection/components/tree-view/tree-view.js

@@ -55,14 +55,14 @@ export class TreeView {
           return;
         }
         TreeView.setFocus(tree, contentElement);
-        this.clickItem.emit({ path: [...ancestors, item], originalEvent: event });
+        this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });
         return;
       }
       if (item.open) {
-        this.closeItem.emit([...ancestors, item]);
+        this.dsoCloseItem.emit([...ancestors, item]);
       }
       else {
-        this.openItem.emit([...ancestors, item]);
+        this.dsoOpenItem.emit([...ancestors, item]);
       }
     };
   }
@@ -198,8 +198,8 @@ export class TreeView {
     }
   }; }
   static get events() { return [{
-      "method": "openItem",
-      "name": "openItem",
+      "method": "dsoOpenItem",
+      "name": "dsoOpenItem",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -218,8 +218,8 @@ export class TreeView {
         }
       }
     }, {
-      "method": "closeItem",
-      "name": "closeItem",
+      "method": "dsoCloseItem",
+      "name": "dsoCloseItem",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -238,8 +238,8 @@ export class TreeView {
         }
       }
     }, {
-      "method": "clickItem",
-      "name": "clickItem",
+      "method": "dsoClickItem",
+      "name": "dsoClickItem",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/tree-view/tree-view.template.js

@@ -1,11 +1,11 @@
 import { html } from 'lit-html';
-export function treeViewTemplate({ collection, onOpenItem, onCloseItem, onClickItem }) {
+export function treeViewTemplate({ collection, dsoOpenItem, dsoCloseItem, dsoClickItem }) {
   return html `
     <dso-tree-view
       .collection=${collection}
-      @openItem=${onOpenItem}
-      @closeItem=${onCloseItem}
-      @clickItem=${onClickItem}
+      @dsoOpenItem=${dsoOpenItem}
+      @dsoCloseItem=${dsoCloseItem}
+      @dsoClickItem=${dsoClickItem}
     ></dso-tree-view>
   `;
 }