@dso-toolkit/core 33.3.0 → 34.0.0

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

@@ -8,7 +8,11 @@ export class MapBaseLayers {
       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, 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;

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

@@ -9,7 +9,11 @@ export class MapOverlays {
       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", { 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"; }

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

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -0,0 +1,251 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+:host([small]) .main {
+  flex-basis: 375px;
+}
+@media screen and (max-width: 375px) {
+  :host([small]) .main {
+    transition: none;
+    flex-basis: 100vw;
+  }
+}
+
+:host([medium]) .main {
+  flex-basis: 624px;
+}
+@media screen and (max-width: 624px) {
+  :host([medium]) .main {
+    transition: none;
+    flex-basis: 100vw;
+  }
+}
+
+:host([large]) .main {
+  flex-basis: 60%;
+  min-width: 768px;
+  max-width: 1024px;
+}
+@media screen and (max-width: 768px) {
+  :host([large]) .main {
+    transition: none;
+    flex-basis: 100vw;
+    min-width: auto;
+    max-width: auto;
+  }
+}
+
+.shrink,
+.expand,
+.overlay-close-button {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
+.shrink:focus, .shrink:focus-visible,
+.expand:focus,
+.expand:focus-visible,
+.overlay-close-button:focus,
+.overlay-close-button:focus-visible {
+  outline-offset: 2px;
+}
+.shrink:active,
+.expand:active,
+.overlay-close-button:active {
+  outline: 0;
+}
+.shrink.extern::after, .shrink.download::after,
+.expand.extern::after,
+.expand.download::after,
+.overlay-close-button.extern::after,
+.overlay-close-button.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.shrink[disabled],
+.expand[disabled],
+.overlay-close-button[disabled] {
+  color: #afcf9d;
+}
+.shrink:not([disabled]):hover,
+.expand:not([disabled]):hover,
+.overlay-close-button:not([disabled]):hover {
+  color: #676cb0;
+  text-decoration: underline;
+}
+.shrink:not([disabled]):active,
+.expand:not([disabled]):active,
+.overlay-close-button:not([disabled]):active {
+  color: #676cb0;
+}
+.shrink.btn-align,
+.expand.btn-align,
+.overlay-close-button.btn-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
+  position: relative;
+}
+.shrink.extern::after, .shrink.download::after,
+.expand.extern::after,
+.expand.download::after,
+.overlay-close-button.extern::after,
+.overlay-close-button.download::after {
+  position: relative;
+  top: -2px;
+}
+.shrink.download::after,
+.expand.download::after,
+.overlay-close-button.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.shrink.download[disabled]::after,
+.expand.download[disabled]::after,
+.overlay-close-button.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.shrink.download:not([disabled]):hover::after, .shrink.download:not([disabled]):active::after,
+.expand.download:not([disabled]):hover::after,
+.expand.download:not([disabled]):active::after,
+.overlay-close-button.download:not([disabled]):hover::after,
+.overlay-close-button.download:not([disabled]):active::after {
+  --dso-icon: var(--di-download-scampi);
+}
+.shrink.extern::after,
+.expand.extern::after,
+.overlay-close-button.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.shrink.extern[disabled]::after,
+.expand.extern[disabled]::after,
+.overlay-close-button.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.shrink.extern:not([disabled]):hover::after, .shrink.extern:not([disabled]):active::after,
+.expand.extern:not([disabled]):hover::after,
+.expand.extern:not([disabled]):active::after,
+.overlay-close-button.extern:not([disabled]):hover::after,
+.overlay-close-button.extern:not([disabled]):active::after {
+  --dso-icon: var(--di-external-link-scampi);
+}
+.shrink dso-icon + span:not(.sr-only),
+.shrink svg.di + span:not(.sr-only),
+.shrink span:not(.sr-only) + dso-icon,
+.shrink span:not(.sr-only) + svg.di,
+.expand dso-icon + span:not(.sr-only),
+.expand svg.di + span:not(.sr-only),
+.expand span:not(.sr-only) + dso-icon,
+.expand span:not(.sr-only) + svg.di,
+.overlay-close-button dso-icon + span:not(.sr-only),
+.overlay-close-button svg.di + span:not(.sr-only),
+.overlay-close-button span:not(.sr-only) + dso-icon,
+.overlay-close-button span:not(.sr-only) + svg.di {
+  margin-left: 8px;
+}
+.shrink dso-icon,
+.shrink svg.di,
+.shrink span,
+.expand dso-icon,
+.expand svg.di,
+.expand span,
+.overlay-close-button dso-icon,
+.overlay-close-button svg.di,
+.overlay-close-button span {
+  vertical-align: middle;
+}
+.shrink:hover,
+.expand:hover,
+.overlay-close-button:hover {
+  cursor: pointer;
+}
+.shrink[disabled],
+.expand[disabled],
+.overlay-close-button[disabled] {
+  display: none;
+}
+
+.overlay-close-button {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+}
+.overlay-close-button .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.sizing-buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 8px;
+}
+
+.main {
+  background-color: #fff;
+  box-shadow: 2px 0 5px #666;
+  flex-shrink: 0;
+  flex-grow: 0;
+  height: 100%;
+  transition: flex-basis 0.2s ease-in, max-width 0.2s ease-in, min-width 0.2s ease-in;
+  padding: 8px 16px;
+  overflow-y: auto;
+  z-index: 1;
+}
+
+.map {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.overlay {
+  background-color: #fff;
+  box-shadow: -2px 0 5px #666;
+  height: 100%;
+  overflow-y: auto;
+  padding: 40px 16px 8px;
+  position: absolute;
+  right: 0;
+  width: 624px;
+  z-index: 2;
+}