@dso-toolkit/core 33.2.0 → 34.1.0

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

@@ -1,6 +1,5 @@
-import { checkFix } from '@dso-toolkit/sources';
 import { html } from 'lit-html';
-export function mapControlsTemplate({ zoomIn, zoomOut, open, baseLayers, selectedBaseLayer, baseLayerChange, overlays, checkedOverlays, checkedOverlaysChange, disableZoom }) {
+export function mapControlsTemplate({ zoomIn, zoomOut, open, baseLayers, baseLayerChange, overlays, toggleOverlay, disableZoom }) {
   return html `
     <dso-map-controls
       @zoomIn=${zoomIn}
@@ -8,24 +7,17 @@ export function mapControlsTemplate({ zoomIn, zoomOut, open, baseLayers, selecte
       .disableZoom=${disableZoom}
       ?open=${open}
     >
-      <form>
-        <div class="rich-content">
-          <p>Inhoud</p>
-        </div>
-        <dso-map-base-layers
-          .baseLayers=${baseLayers}
-          .selectedBaseLayer=${selectedBaseLayer}
-          @baseLayerChange=${(e) => baseLayerChange(e.detail)}
-        ></dso-map-base-layers>
-        <dso-map-overlays
-          .overlays=${overlays}
-          .checkedOverlays=${checkFix(checkedOverlays, overlays, o => o.name)}
-          @checkedOverlaysChange=${(e) => checkedOverlaysChange(e.detail)}
-        ></dso-map-overlays>
-        <div class="rich-content">
-          <p>Ook nog meer inhoud</p>
-        </div>
-      </form>
+      <dso-map-base-layers
+        .baseLayers=${baseLayers}
+        @baseLayerChange=${(e) => baseLayerChange(e)}
+      ></dso-map-base-layers>
+      <dso-map-overlays
+        .overlays=${overlays}
+        @toggleOverlay=${(e) => toggleOverlay(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>
+      </div>
     </dso-map-controls>
   `;
 }

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

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: block;
 }
@@ -34,4 +31,8 @@ fieldset .control-label {
   margin-bottom: 8px;
   max-width: 100%;
   text-align: left;
+}
+
+p[slot=info] {
+  margin: 0;
 }

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

@@ -1,20 +1,19 @@
 import { Component, Event, Prop, h } from '@stencil/core';
 export class MapOverlays {
-  constructor() {
-    this.checkedOverlays = [];
-  }
-  toggleOverlay(overlay, checked) {
-    this.checkedOverlays = checked
-      ? [...this.checkedOverlays, overlay]
-      : this.checkedOverlays.filter(o => o !== overlay);
-    this.checkedOverlaysChange.emit(this.checkedOverlays);
+  overlayChangeHandler(overlay, e) {
+    const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
+    this.toggleOverlay.emit({ overlay, checked });
   }
   render() {
     return (h("fieldset", { class: "form-group dso-checkboxes" },
       h("legend", { class: "sr-only" }, "Kaartlagen"),
       h("div", { class: "dso-label-container" },
         h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")),
-      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { type: "checkbox", value: overlay.name, checked: this.checkedOverlays.includes(overlay), onDsoChange: () => this.toggleOverlay(overlay, !this.checkedOverlays.includes(overlay)) }, overlay.name))))));
+      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, onDsoChange: e => this.overlayChangeHandler(overlay, e) },
+        overlay.name,
+        overlay.info
+          ? h("p", { slot: "info" }, overlay.info)
+          : null))))));
   }
   static get is() { return "dso-map-overlays"; }
   static get encapsulation() { return "shadow"; }
@@ -44,32 +43,11 @@ export class MapOverlays {
         "tags": [],
         "text": ""
       }
-    },
-    "checkedOverlays": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Overlay[]",
-        "resolved": "Overlay[]",
-        "references": {
-          "Overlay": {
-            "location": "import",
-            "path": "./map-overlays.interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
     }
   }; }
   static get events() { return [{
-      "method": "checkedOverlaysChange",
-      "name": "checkedOverlaysChange",
+      "method": "toggleOverlay",
+      "name": "toggleOverlay",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -78,10 +56,10 @@ export class MapOverlays {
         "text": ""
       },
       "complexType": {
-        "original": "Overlay[]",
-        "resolved": "Overlay[]",
+        "original": "OverlayChangeEvent",
+        "resolved": "OverlayChangeEvent",
         "references": {
-          "Overlay": {
+          "OverlayChangeEvent": {
             "location": "import",
             "path": "./map-overlays.interfaces"
           }

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

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 dso-ozon-content {
   display: block;
 }

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

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: block;
 }

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

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 *,
 *::after,
 *::before {

package/dist/collection/components/selectable/selectable.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: block;
   padding: 0 0 0 32px;

package/dist/collection/components/toggletip/toggletip.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 *,
 *::after,
 *::before {

package/dist/collection/components/tooltip/tooltip.css

@@ -1,8 +1,24 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
-:host(:not([hidden])) {
-  display: inline-block;
+:host(.hidden) {
+  visibility: hidden;
+}
+
+:host-context(dso-toggletip) {
+  color: red !important;
+}
+:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow {
+  margin-left: 3px;
+}
+:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow {
+  margin-top: 0;
+}
+:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow {
+  margin-left: 3px;
+}
+:host-context(dso-toggletip) *[data-popper-placement=left] {
+  margin-right: -8px !important;
+}
+:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow {
+  margin-top: 0;
 }
 
 *,
@@ -36,7 +52,7 @@
   z-index: 1070;
 }
 .tooltip.in {
-  opacity: 0.9;
+  opacity: 1;
 }
 .tooltip .tooltip-inner {
   background-color: #fff;
@@ -55,7 +71,6 @@
   border-color: transparent;
   border-style: solid;
   height: 0;
-  position: absolute;
   width: 0;
 }
 .tooltip[data-popper-placement=top] {
@@ -66,8 +81,9 @@
   border-top-color: #fff;
   border-width: 6px 6px 0;
   bottom: 0;
-  left: 50%;
-  margin-left: -6px;
+}
+.tooltip[data-popper-placement=top] .tooltip-arrow {
+  margin-left: -3px;
 }
 .tooltip[data-popper-placement=right] {
   margin-left: 3px;
@@ -77,8 +93,9 @@
   border-right-color: #fff;
   border-width: 6px 6px 6px 0;
   left: 0;
-  margin-top: -6px;
-  top: 50%;
+}
+.tooltip[data-popper-placement=right] .tooltip-arrow {
+  margin-top: -3px;
 }
 .tooltip[data-popper-placement=bottom] {
   margin-top: 3px;
@@ -87,10 +104,11 @@
 .tooltip[data-popper-placement=bottom] .tooltip-arrow {
   border-bottom-color: #fff;
   border-width: 0 6px 6px;
-  left: 50%;
-  margin-left: -6px;
   top: 0;
 }
+.tooltip[data-popper-placement=bottom] .tooltip-arrow {
+  margin-left: -3px;
+}
 .tooltip[data-popper-placement=left] {
   margin-left: -3px;
   padding: 0 6px;
@@ -98,7 +116,8 @@
 .tooltip[data-popper-placement=left] .tooltip-arrow {
   border-left-color: #fff;
   border-width: 6px 0 6px 6px;
-  margin-top: -6px;
   right: 0;
-  top: 50%;
+}
+.tooltip[data-popper-placement=left] .tooltip-arrow {
+  margin-top: -3px;
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -1,4 +1,5 @@
-import { createPopper } from '@popperjs/core';
+import { beforeWrite, createPopper } from '@popperjs/core';
+import maxSize from 'popper-max-size-modifier';
 import { h, Component, Element, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import clsx from 'clsx';
 // Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
@@ -18,6 +19,19 @@ export class Tooltip {
      */
     this.active = false;
     this.hidden = true;
+    this.applyMaxSize = {
+      name: 'applyMaxSize',
+      enabled: true,
+      phase: beforeWrite,
+      requires: ['maxSize'],
+      fn({ state }) {
+        let { width } = state.modifiersData.maxSize;
+        if (width < 160) {
+          width = 160;
+        }
+        state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), { maxWidth: `${width}px` });
+      },
+    };
   }
   /**
    * Activate the tooltip (Sets the `active` attribute)
@@ -75,7 +89,8 @@ export class Tooltip {
     }
     this.target = this.getTarget();
     this.popper = createPopper(this.target, tooltip, {
-      placement: this.position
+      placement: this.position,
+      modifiers: [maxSize, this.applyMaxSize],
     });
     this.callbacks = {
       activate: () => (this.active = true),
@@ -107,9 +122,9 @@ export class Tooltip {
     }
   }
   render() {
-    return (h(Host, { hidden: this.hidden },
+    return (h(Host, { class: { 'hidden': this.hidden } },
       h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" },
-        !this.noArrow && h("div", { class: "tooltip-arrow" }),
+        !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }),
         h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) },
           h("slot", null)))));
   }

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

@@ -1,9 +1,7 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 export function tooltipTemplate({ active, position, label, id }) {
-  return html `
-    <dso-tooltip position=${position} for=${ifDefined(id)} ?active=${active}>
-      ${label}
-    </dso-tooltip>
-  `;
+  return html `<dso-tooltip position=${position} for=${ifDefined(id)} ?active=${active}>
+    ${label}
+  </dso-tooltip>`;
 }

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

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host ul {
   list-style-type: none;
 }
@@ -13,11 +10,14 @@
 :host .tree-branch-control {
   cursor: pointer;
   display: inline-block;
+  margin: 8px 0;
+  vertical-align: top;
 }
 :host .tree-content {
   cursor: pointer;
   display: inline-block;
   margin: 8px 0;
+  width: calc(100% - 24px);
 }
 :host .tree-content.active {
   font-weight: 700;

package/dist/collection/components/viewer-grid/viewer-grid-document-header.template.js

@@ -0,0 +1,39 @@
+import { html, nothing } from "lit-html";
+import { buttonTemplate } from "../button/button.template";
+import { definitionListTemplate } from "../definition-list/definition-list.template";
+export function viewerGridDocumentHeaderTemplate({ title, type, features, featuresAction, mapAction, featuresOpen, owner, status, }) {
+  return html `
+    <div class="dso-document-header">
+      ${title}
+
+      <div class="dso-document-header-container">
+        <p class="dso-document-header-type">${type}</p>
+        <p class="dso-document-header-owner">${owner}</p>
+        <p class="dso-document-header-status">${status}</p>
+
+        ${buttonTemplate({
+    onClick: mapAction,
+    label: "Actie",
+    variant: null,
+    modifier: "dso-document-header-map-action",
+    icon: {
+      icon: "map-location",
+    },
+    iconMode: "only",
+  })}
+        ${buttonTemplate({
+    ariaExpanded: featuresOpen,
+    onClick: featuresAction,
+    label: featuresOpen ? "Minder kenmerken" : "Meer kenmerken",
+    variant: null,
+    modifier: "dso-document-header-toggle-features",
+    icon: {
+      icon: featuresOpen ? "angle-up" : "angle-down",
+    },
+    iconMode: "after",
+  })}
+      </div>
+      ${featuresOpen ? definitionListTemplate(features) : nothing}
+    </div>
+  `;
+}

package/dist/collection/components/viewer-grid/viewer-grid-document-list-item.template.js

@@ -0,0 +1,19 @@
+import { html } from "lit-html";
+import { anchorTemplate } from "../anchor/anchor.template";
+export function viewerGridDocumentListItem({ title, type, owner, status, }) {
+  return html `
+    <div class="dso-document-list-item">
+      ${title}
+      <div class="dso-document-list-item-container">
+        <p class="dso-document-list-item-type">${type}</p>
+        <p class="dso-document-list-item-owner">${owner}</p>
+        <p class="dso-document-list-item-status">${status}</p>
+        ${anchorTemplate({
+    url: "#",
+    label: "Hele document bekijken",
+    modifier: "dso-document-list-item-open-document",
+  })}
+      </div>
+    </div>
+  `;
+}

package/dist/collection/components/viewer-grid/viewer-grid-filterblok.template.js

@@ -0,0 +1,28 @@
+import { html } from "lit-html";
+import { buttonTemplate } from "../button/button.template";
+import { contextTemplate } from "../context/context.template";
+import { labelGroupTemplate } from "../label-group/label-group.template";
+export function viewerGridFilterblok({ title, address, activeFilters, onAllOptions, }) {
+  return html `
+    <section class="dso-filterblok">
+      <div class="dso-highlight-box">
+        ${contextTemplate({
+    type: "label",
+    label: title,
+    content: buttonTemplate({
+      onClick: onAllOptions,
+      variant: "tertiary",
+      label: "Alle opties",
+      icon: {
+        icon: "pencil",
+      },
+    }),
+    children: html `
+            <p class="dso-filterblok-address">${address}</p>
+            ${labelGroupTemplate({ labels: activeFilters })}
+          `,
+  })}
+      </div>
+    </section>
+  `;
+}