@dso-toolkit/core 33.3.0 → 34.2.0

package/dist/collection/components/definition-list/definition-list.template.js

@@ -0,0 +1,36 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { listTemplate } from '../list/list.template';
+function definitionTemplate({ term, descriptions }, useSrOnlyColon) {
+  return html `
+    <dt>
+      ${term}${useSrOnlyColon
+    ? html `<span class="sr-only">:</span>`
+    : ':'}
+    </dt>
+    ${descriptions.map(description => html `
+      <dd>${definitionContentTemplate(description)}</dd>
+    `)}
+  `;
+}
+function definitionContentTemplate(description) {
+  if ('content' in description) {
+    if (typeof description.content === 'string') {
+      return unsafeHTML(description.content);
+    }
+    return description.content;
+  }
+  return listTemplate(description.list);
+}
+export function definitionListTemplate({ modifier, definitions, useSrOnlyColon }) {
+  return html `
+    <dl class=${ifDefined(modifier)}>
+      ${definitions.map(definition => (modifier === null || modifier === void 0 ? void 0 : modifier.split(' ').includes('dso-columns'))
+    ? html `
+            <div>${definitionTemplate(definition, useSrOnlyColon)}</div>
+          `
+    : definitionTemplate(definition, useSrOnlyColon))}
+    </dl>
+  `;
+}

package/dist/collection/components/dropdown-menu/dropdown-menu.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host(:focus) {
   outline: none;
 }

package/dist/collection/components/header/header.css

@@ -1,7 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
-/* stylelint-disable-next-line no-invalid-position-at-import-rule */
 :host {
   --di-chevron-down-bosgroen: url("data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e");
   --di-chevron-up-bosgroen: url("data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e");
@@ -12,6 +8,8 @@
   border-bottom: 1px solid #ccc;
   display: flex;
   flex-wrap: wrap;
+  padding: 0 16px;
+  position: relative;
 }
 @media screen and (min-width: 768px) {
   .dso-header {
@@ -30,6 +28,14 @@
   padding-bottom: 16px;
   padding-top: 16px;
 }
+@media screen and (max-width: 767px) {
+  .logo-container {
+    max-width: 200px;
+  }
+}
+.logo-container + .dropdown dso-dropdown-menu {
+  position: static;
+}
 
 @media screen and (min-width: 768px) {
   .sub-logo {
@@ -178,7 +184,6 @@ dso-dropdown-menu .dso-dropdown-options li button {
   padding: 3px 20px;
   text-decoration: none;
   white-space: nowrap;
-  /* stylelint-disable-line declaration-property-value-disallowed-list */
 }
 dso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus, dso-dropdown-menu .dso-dropdown-options li a:active,
 dso-dropdown-menu .dso-dropdown-options li button:hover,
@@ -282,11 +287,6 @@ dso-dropdown-menu button::after {
   top: 50%;
   transform: translateY(-50%);
 }
-@media screen and (max-width: 991px) {
-  dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options {
-    right: -16px;
-  }
-}
 @media screen and (max-width: 767px) {
   dso-dropdown-menu {
     top: 12px;
@@ -301,7 +301,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
 }
 @media screen and (max-width: 991px) {
   dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
-    width: 100vw;
+    width: 100%;
   }
 }
 dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {
@@ -309,6 +309,11 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {
   font-size: 1.25rem;
   padding: 16px;
 }
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover {
+  background-color: #fff;
+  color: #275937;
+  text-decoration: underline;
+}
 dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a {
   font-weight: 600;
 }
@@ -321,16 +326,13 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
 }
 @media screen and (max-width: 767px) {
   .dropdown dso-dropdown-menu {
-    top: 28px;
+    margin-top: 28px;
   }
 }
 .dropdown dso-dropdown-menu .dso-dropdown-options {
-  top: calc(100% + 29px);
-}
-@media screen and (max-width: 767px) {
-  .dropdown dso-dropdown-menu .dso-dropdown-options {
-    top: 72px;
-  }
+  left: 0;
+  right: 0;
+  top: 100%;
 }
 .dropdown dso-dropdown-menu[open] button::after {
   background: var(--dso-icon, var(--di-chevron-up)) no-repeat;
@@ -344,6 +346,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
   color: #39870c;
   font-size: 16px;
   font-weight: 600;
+  position: relative;
 }
 .dropdown dso-dropdown-menu button:hover, .dropdown dso-dropdown-menu button:active {
   cursor: pointer;
@@ -389,7 +392,6 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
   line-height: 1;
   margin-top: 8px;
   padding: 16px 0;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
   white-space: nowrap;
 }
 .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active {

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: block;
   --di-times: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");

package/dist/collection/components/highlight-box/highlight-box.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   --di-external-link-grijs90: url("data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e");
   --di-download-grijs90: url("data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e");

package/dist/collection/components/icon/icon.css

@@ -1,8 +1,4 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
-  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
   display: inline-block;
   height: 1.5em;
   vertical-align: top;

package/dist/collection/components/info/info.css

@@ -1,8 +1,25 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
 :host {
-  --di-times-bosgroen: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
+  --di-times-grijs90: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
   display: block;
   background-color: #f2f2f2;
   padding: 16px 32px 16px 16px;

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

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: inline-block;
   --di-info: url("data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");

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

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

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

@@ -0,0 +1,7 @@
+import { html } from 'lit-html';
+import { labelTemplate } from '../label/label.template';
+export function labelGroupTemplate({ labels }) {
+  return html `<div class="dso-label-group">
+    ${labels.map(labels => labelTemplate(labels))}
+  </div>`;
+}

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

@@ -0,0 +1,37 @@
+// Keep in sync with packages\css\src\components\list\list.template.ts (https://github.com/dso-toolkit/dso-toolkit/issues/1438)
+import { Type } from '@dso-toolkit/sources';
+import { html } from 'lit-html';
+import { classMap } from 'lit-html/directives/class-map';
+function ul(children, modifier) {
+  return html `
+    <ul class="${classMap({
+    'list-group': modifier === 'group',
+    'dso-columns-list': modifier === 'columns'
+  })}">
+      ${children}
+    </ul>
+  `;
+}
+function ol(children, modifier) {
+  return html `
+    <ol class="${classMap({
+    'list-group': modifier === 'group',
+    'dso-columns-list': modifier === 'columns'
+  })}">
+      ${children}
+    </ol>
+  `;
+}
+export function listTemplate({ type, items, modifier }) {
+  const children = html `
+    ${items.map(item => html `
+      <li class="${classMap({ 'list-group-item': modifier === 'group' })}">
+        ${item}
+      </li>
+    `)}
+  `;
+  if (type === Type.Ol) {
+    return ol(children, modifier);
+  }
+  return ul(children, modifier);
+}

package/dist/collection/components/map-base-layers/map-base-layers.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-base-layers/map-base-layers.js

@@ -1,14 +1,33 @@
 import { Component, h, Prop, Event } from '@stencil/core';
 export class MapBaseLayers {
+  constructor() {
+    this.selectableRefs = {};
+  }
   baseLayerChangeHandler(baseLayer) {
     this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
   }
+  componentDidRender() {
+    this.baseLayers
+      .filter(l => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find(p => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach(o => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousBaselayers = this.baseLayers;
+  }
   render() {
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
     return (h("fieldset", { class: "form-group dso-radios" },
       h("legend", { class: "sr-only" }, "Achtergrond"),
       h("div", { class: "dso-label-container" },
         h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")),
-      h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name))))));
+      h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, ref: ref => this.selectableRefs[baseLayer.id] = ref, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) },
+        baseLayer.name,
+        baseLayer.info
+          ? h("p", { slot: "info" }, baseLayer.info)
+          : null))))));
   }
   static get is() { return "dso-map-base-layers"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 button {
   -webkit-appearance: button;
   color: inherit;
@@ -378,6 +375,12 @@ button::-moz-focus-inner {
   border: 0;
 }
 
+section {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 header,
 .content {
   padding: 16px;
@@ -385,6 +388,7 @@ header,
 
 header {
   border-bottom: 1px solid #ccc;
+  flex-grow: 0;
   position: relative;
 }
 header h2 {
@@ -392,4 +396,9 @@ header h2 {
   font-family: "Asap", sans-serif;
   line-height: 1;
   margin: 0;
+}
+
+.content {
+  flex-grow: 1;
+  overflow-y: auto;
 }

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

@@ -7,22 +7,17 @@ export function mapControlsTemplate({ zoomIn, zoomOut, open, baseLayers, baseLay
       .disableZoom=${disableZoom}
       ?open=${open}
     >
-      <form>
-        <div class="dso-rich-content">
-          <p>Inhoud</p>
-        </div>
-        <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>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,15 +1,34 @@
 import { Component, Event, Prop, h } from '@stencil/core';
 export class MapOverlays {
+  constructor() {
+    this.selectableRefs = {};
+  }
   overlayChangeHandler(overlay, e) {
     const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
     this.toggleOverlay.emit({ overlay, checked });
   }
+  componentDidRender() {
+    this.overlays
+      .filter(o => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find(p => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach(o => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousOverlays = this.overlays;
+  }
   render() {
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
     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: overlay.checked, disabled: overlay.disabled, onDsoChange: e => this.overlayChangeHandler(overlay, e) }, overlay.name))))));
+      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, ref: ref => this.selectableRefs[overlay.id] = ref, 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"; }

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/selectable/selectable.js

@@ -1,10 +1,13 @@
-import { h, Component, Prop, Event, Fragment, Element, State, forceUpdate, Watch } from '@stencil/core';
+import { h, Component, Prop, Event, Fragment, Element, State, forceUpdate, Watch, Method } from '@stencil/core';
 import { createIdentifier } from '../../utils/create-identifier';
 export class Selectable {
   constructor() {
     this.infoActive = false;
     this.fallbackIdentifier = createIdentifier('DsoSelectable');
   }
+  async toggleInfo(active) {
+    this.infoActive = active !== null && active !== void 0 ? active : !this.infoActive;
+  }
   componentDidLoad() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -260,6 +263,27 @@ export class Selectable {
         }
       }
     }]; }
+  static get methods() { return {
+    "toggleInfo": {
+      "complexType": {
+        "signature": "(active?: boolean | undefined) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "indeterminate",

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,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host(.hidden) {
   visibility: hidden;
 }

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>
+  `;
+}