@dso-toolkit/core 39.0.0 → 41.0.0

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

@@ -1,7 +1,9 @@
 import { Component, Event, Prop, h } from '@stencil/core';
+import { v4 as uuidv4 } from 'uuid';
 export class MapOverlays {
   constructor() {
     this.selectableRefs = {};
+    this.group = uuidv4();
   }
   overlayChangeHandler(overlay, e) {
     const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
@@ -24,7 +26,7 @@ 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", { 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) },
+      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, name: this.group, ref: ref => this.selectableRefs[overlay.id] = ref, onDsoChange: e => this.overlayChangeHandler(overlay, e) },
         overlay.name,
         overlay.info
           ? h("p", { slot: "info" }, overlay.info)
@@ -39,6 +41,24 @@ export class MapOverlays {
     "$": ["map-overlays.css"]
   }; }
   static get properties() { return {
+    "group": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "group",
+      "reflect": false,
+      "defaultValue": "uuidv4()"
+    },
     "overlays": {
       "type": "unknown",
       "mutable": false,

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

@@ -44,7 +44,10 @@ export class OzonContent {
         transformed,
         h("span", { class: "deleted-end" }, "Einde verwijderd element")));
     }
-    return (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, transformed));
+    return (h(Host, { onClick: (e) => this.handleHostOnClick(e) },
+      h("slot", { name: "prefix" }),
+      transformed,
+      h("slot", { name: "suffix" })));
   }
   static get is() { return "dso-ozon-content"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,6 @@
-import { html } from 'lit-html';
+import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function ozonContentTemplate({ content, inline, interactive, deleted, onAnchorClick, onClick }) {
+export function ozonContentTemplate({ content, inline, interactive, deleted, prefix, suffix, onAnchorClick, onClick }) {
   return html `
     <dso-ozon-content
       .content=${content}
@@ -9,6 +9,6 @@ export function ozonContentTemplate({ content, inline, interactive, deleted, onA
       ?deleted=${deleted}
       @anchorClick=${onAnchorClick}
       @dsoClick=${ifDefined(interactive ? onClick : undefined)}
-    ></dso-ozon-content>
+    >${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.css

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.pagination {
+  text-align: center;
+}
+.pagination > li {
+  display: inline-block;
+  font-weight: bold;
+  line-height: 28px;
+  text-align: center;
+  vertical-align: middle;
+}
+.pagination > li > a,
+.pagination > li > span {
+  align-items: center;
+  color: #39870c;
+  display: flex;
+  height: 32px;
+  justify-content: center;
+  position: relative;
+  width: 32px;
+}
+.pagination > li > a:active,
+.pagination > li > span:active {
+  background-color: #ebf3e6;
+}
+.pagination > li > span {
+  border: 2px solid transparent;
+  border-radius: 50%;
+}
+.pagination > li a {
+  line-height: 32px;
+  text-decoration: none;
+}
+.pagination > li a:hover, .pagination > li a:focus {
+  text-decoration: none;
+}
+.pagination > li a:hover::after, .pagination > li a:focus::after {
+  border-bottom-color: #39870c;
+}
+.pagination > li a::after {
+  border-bottom: 3px solid transparent;
+  bottom: 0;
+  content: "";
+  display: inline-block;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+.pagination > li.active span {
+  background-color: #39870c;
+  color: #fff;
+}
+.pagination > li + li {
+  margin-left: 8px;
+}
+
+.dso-page-hidden {
+  visibility: hidden;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,114 @@
+import { h, Component, Event, Prop } from '@stencil/core';
+export class Pagination {
+  constructor() {
+    /**
+     * This function is called to format the href
+     */
+    this.formatHref = (page) => '#' + page;
+  }
+  clickHandler(e, page) {
+    this.selectPage.emit({
+      originalEvent: e,
+      page,
+      isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
+    });
+  }
+  ;
+  render() {
+    if (!this.totalPages) {
+      return null;
+    }
+    const pages = Array.from({ length: this.totalPages }, (_value, i) => i + 1);
+    return (h("ul", { class: "pagination" },
+      h("li", { class: this.currentPage === pages[0] ? 'dso-page-hidden' : undefined },
+        h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => this.currentPage && this.clickHandler(e, pages[this.currentPage - 2]) },
+          h("dso-icon", { icon: "chevron-left" }))),
+      pages.map(page => (h("li", { key: page, class: this.currentPage === page ? 'active' : undefined }, this.currentPage === page
+        ? (h("span", { "aria-current": "page" }, page))
+        : (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))))),
+      h("li", { class: this.currentPage === pages[pages.length - 1] ? 'dso-page-hidden' : undefined },
+        h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => this.currentPage && this.clickHandler(e, pages[this.currentPage]) },
+          h("dso-icon", { icon: "chevron-right" })))));
+  }
+  static get is() { return "dso-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["pagination.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pagination.css"]
+  }; }
+  static get properties() { return {
+    "totalPages": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Total pages"
+      },
+      "attribute": "total-pages",
+      "reflect": false
+    },
+    "currentPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Current page"
+      },
+      "attribute": "current-page",
+      "reflect": false
+    },
+    "formatHref": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(page: number) => string",
+        "resolved": "(page: number) => string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This function is called to format the href"
+      },
+      "defaultValue": "(page) => '#' + page"
+    }
+  }; }
+  static get events() { return [{
+      "method": "selectPage",
+      "name": "selectPage",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted on page select"
+      },
+      "complexType": {
+        "original": "PaginationSelectPageEvent",
+        "resolved": "PaginationSelectPageEvent",
+        "references": {
+          "PaginationSelectPageEvent": {
+            "location": "import",
+            "path": "./pagination.interfaces"
+          }
+        }
+      }
+    }]; }
+}

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

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

package/dist/collection/components/responsive-element/responsive-element.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/responsive-element/responsive-element.js

@@ -0,0 +1,46 @@
+import { Component, Element, Host, State, h } from '@stencil/core';
+const elementSizes = [
+  {
+    width: 624, alias: 'large'
+  },
+  {
+    width: 375, alias: 'medium'
+  },
+  {
+    width: 0, alias: 'small'
+  }
+];
+export class ResponsiveElement {
+  constructor() {
+    this.sizeAlias = elementSizes[0].alias;
+    this.sizeWidth = 0;
+    this.observer = new ResizeObserver(([entry]) => {
+      var _a, _b;
+      const size = (_b = (_a = elementSizes.find(s => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
+      this.sizeAlias = size;
+    });
+  }
+  componentWillLoad() {
+    this.observer.observe(this.host);
+  }
+  disconnectedCallback() {
+    this.observer.unobserve(this.host);
+  }
+  render() {
+    return (h(Host, { small: this.sizeAlias === 'small', medium: this.sizeAlias === 'medium', large: this.sizeAlias === 'large' },
+      h("slot", null)));
+  }
+  static get is() { return "dso-responsive-element"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./responsive-element.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["responsive-element.css"]
+  }; }
+  static get states() { return {
+    "sizeAlias": {},
+    "sizeWidth": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/responsive-element/responsive-element.template.js

@@ -0,0 +1,8 @@
+import { html } from 'lit-html';
+export function responsiveElementTemplate({ children }) {
+  return html `
+    <dso-responsive-element>
+      ${children}
+    </dso-responsive-element>
+  `;
+}

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

@@ -31,20 +31,21 @@ 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": this.describedById, 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.change.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", { fixed: this.infoFixed, active: this.infoActive, onClose: () => this.infoActive = false },
-          h("slot", { name: "info" }))))));
+        h("dso-info", { id: (hasInfo && this.infoFixed) ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onClose: () => this.infoActive = false },
+          h("div", null,
+            h("slot", { name: "info" })))))));
   }
   getIdentifier() {
     var _a;
     return (_a = this.identifier) !== null && _a !== void 0 ? _a : this.fallbackIdentifier;
   }
   static get is() { return "dso-selectable"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["selectable.scss"]
   }; }

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

@@ -4,6 +4,13 @@ import { h, Component, Element, Host, Listen, Method, Prop, State, Watch } from
 import clsx from 'clsx';
 // Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;
+function hasOverflow(el) {
+  const style = window.getComputedStyle(el);
+  const overflowX = style.getPropertyValue('overflow-x');
+  const overflowY = style.getPropertyValue('overflow-y');
+  const overflowValues = ['hidden', 'clip'];
+  return overflowValues.indexOf(overflowX) != -1 || overflowValues.indexOf(overflowY) != -1;
+}
 export class Tooltip {
   constructor() {
     /**
@@ -14,6 +21,10 @@ export class Tooltip {
      * Set position of tooltip relative to target
      */
     this.position = 'top';
+    /**
+     * Set position strategy of tooltip
+     */
+    this.strategy = 'auto';
     /**
      * Set attribute `no-arrow` to hide the arrow
      */
@@ -57,6 +68,33 @@ export class Tooltip {
       placement: this.position
     });
   }
+  watchStrategy() {
+    this.setStrategy();
+  }
+  setStrategy() {
+    if (!this.popper) {
+      return;
+    }
+    if (this.strategy == 'absolute' || this.strategy == 'fixed') {
+      this.popper.setOptions({
+        strategy: this.strategy,
+      });
+      return;
+    }
+    let element = this.element;
+    while ((element === null || element === void 0 ? void 0 : element.parentNode) != null && element.parentNode != document) {
+      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+      if (element != null && hasOverflow(element)) {
+        this.popper.setOptions({
+          strategy: 'fixed',
+        });
+        return;
+      }
+    }
+    this.popper.setOptions({
+      strategy: 'absolute',
+    });
+  }
   watchActive() {
     var _a;
     if (this.active) {
@@ -121,6 +159,7 @@ export class Tooltip {
   }
   componentDidRender() {
     var _a;
+    this.setStrategy();
     if (this.active) {
       (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
     }
@@ -198,6 +237,24 @@ export class Tooltip {
       "reflect": false,
       "defaultValue": "'top'"
     },
+    "strategy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'auto' | 'absolute' | 'fixed'",
+        "resolved": "\"absolute\" | \"auto\" | \"fixed\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set position strategy of tooltip"
+      },
+      "attribute": "strategy",
+      "reflect": false,
+      "defaultValue": "'auto'"
+    },
     "for": {
       "type": "string",
       "mutable": false,
@@ -331,6 +388,9 @@ export class Tooltip {
   static get watchers() { return [{
       "propName": "position",
       "methodName": "watchPosition"
+    }, {
+      "propName": "strategy",
+      "methodName": "watchStrategy"
     }, {
       "propName": "active",
       "methodName": "watchActive"

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

@@ -1,170 +1,21 @@
 import { AlertType } from "@dso-toolkit/sources";
-import { html, nothing } from "lit-html";
-import { alertTemplate } from "../../alert/alert.template";
-import { anchorTemplate } from "../../anchor/anchor.template";
-import { badgeTemplate } from "../../badge/badge.template";
-import { buttonTemplate } from "../../button/button.template";
-import { definitionListTemplate } from "../../definition-list/definition-list.template";
-import { iconTemplate } from "../../icon/icon.template";
-import { labelTemplate } from "../../label/label.template";
-import { viewerGridTemplate } from "../templates/viewer-grid.template";
+import { documentHeaderTemplate } from '@dso-toolkit/css/src/components/document-header/document-header.template';
+import { status, features, statusContent } from '@dso-toolkit/css/src/components/document-header/document-header.content';
+import { alertTemplate } from '../../alert/alert.template';
+import { viewerGridTemplate } from '../templates/viewer-grid.template';
 export function viewerGridDocumentHeaderExampleTemplate({ documentHeaderFeaturesOpen, documentHeaderFeatureAction, documentHeaderStatusOpen }) {
-  const features = {
-    modifier: "dso-document-header-features",
-    definitions: [
-      {
-        term: "Opschrift",
-        descriptions: [
-          {
-            content: "Besluit van 3 juli 2018, houdende regels over activiteiten in de fysieke leefomgeving"
-          },
-        ],
-      },
-      {
-        term: "Identificatie",
-        descriptions: [
-          {
-            content: "/akn/nl/act/mnre1034/2021/BWBR0041330"
-          }
-        ],
-      },
-      {
-        term: "Besluit",
-        descriptions: [
-          {
-            content: anchorTemplate({
-              label: "Bekijk besluit",
-              url: "#",
-              icon: {
-                icon: "external-link",
-              },
-              iconMode: "after",
-            })
-          }
-        ],
-      },
-    ],
-    useSrOnlyColon: false,
-  };
   return viewerGridTemplate({
-    main: html `
-      <div class="dso-document-header">
-        <h1>Omgevingsplan gemeente Gouda</h1>
-
-         <div class="dso-document-header-container">
-           <p class="dso-document-header-type">Een omgevingsplan waar de omgeving mooier van wordt</p>
-           <p class="dso-document-header-owner">Gemeente Gouda</p>
-
-           ${buttonTemplate({
-      label: "Actie",
-      variant: null,
-      modifier: "dso-document-header-map-action",
-      icon: {
-        icon: "map-location",
-      },
-      iconMode: "only",
-    })}
-
-           <div class="dso-document-header-features-wrapper">
-             ${buttonTemplate({
-      ariaExpanded: documentHeaderFeaturesOpen,
-      onClick: documentHeaderFeatureAction,
-      label: documentHeaderFeaturesOpen ? "Minder kenmerken" : "Meer kenmerken",
-      variant: null,
-      modifier: "dso-document-header-toggle-features",
-      icon: {
-        icon: documentHeaderFeaturesOpen ? "angle-up" : "angle-down",
-      },
-      iconMode: "after",
-    })}
-             ${documentHeaderFeaturesOpen ? definitionListTemplate(features) : nothing}
-           </div>
-
-           <div class="dso-document-header-status-wrapper">
-             <p class="dso-document-header-status">
-              Gepubliceerd 03-03-2021
-              ${labelTemplate({
-      status: "bright",
-      label: "in werking",
-    })}
-              ${buttonTemplate({
-      ariaExpanded: documentHeaderStatusOpen,
-      onClick: documentHeaderFeatureAction,
-      label: "overige versies",
-      variant: null,
-      modifier: "dso-document-header-toggle-status",
-      icon: {
-        icon: documentHeaderStatusOpen ? "angle-up" : "angle-down",
-      },
-      iconMode: "after",
-    })}
-              ${badgeTemplate({
-      status: "warning",
-      message: "3",
-    })}
-              ${badgeTemplate({
-      status: "outline",
-      message: "1",
-    })}
-            </p>
-            ${documentHeaderStatusOpen ? html `
-              <div class="dso-document-header-status-content">
-                <h2>Versies</h2>
-
-                <h3>Vastgesteld</h3>
-                <div>
-                  ${iconTemplate({ icon: 'eye' })}
-                  <strong>Gepubliceerd op 01-03-2021</strong>
-                  ${labelTemplate({
-      label: "In werking",
-    })}
-                </div>
-                <div>
-                  ${iconTemplate({ icon: 'chevron-right' })}
-                  Gepubliceerd op 10-03-2021
-                  ${labelTemplate({
-      status: "bright",
-      label: "Toekomstige versie",
-    })}
-                  datum in werking: 1-6-2022
-                </div>
-                ${anchorTemplate({ label: 'bekijk eerdere versies', url: '#' })}
-
-                <h3>Ontwerpen binnen inzagetermijn</h3>
-                <div>
-                  ${iconTemplate({ icon: 'chevron-right' })}
-                  Gepubliceerd op 09-02-2021
-                  ${labelTemplate({
-      status: "warning",
-      label: "Ontwerp",
-    })}
-                  Eind inzagetermijn: 23-03-2022
-                </div>
-                <div>
-                  ${iconTemplate({ icon: 'chevron-right' })}
-                  Gepubliceerd op 01-02-2021
-                  ${labelTemplate({
-      status: "warning",
-      label: "Ontwerp",
-    })}
-                  Eind inzagetermijn: 15-03-2022
-                </div>
-                <div>
-                  ${iconTemplate({ icon: 'chevron-right' })}
-                  Gepubliceerd op 20-01-2021
-                  ${labelTemplate({
-      status: "warning",
-      label: "Ontwerp",
-    })}
-                  Eind inzagetermijn: 03-03-2022
-                </div>
-                ${anchorTemplate({ label: 'bekijk ontwerpen waarvan inzagetermijn voorbij is', url: '#' })}
-              </div>
-             ` : nothing}
-           </div>
-         </div>
-       </div>
-    `,
+    main: documentHeaderTemplate({
+      title: 'Omgevingsplan gemeente Gouda',
+      type: 'Een omgevingsplan waar de omgeving mooier van wordt',
+      owner: 'Gemeente Gouda',
+      features,
+      featureAction: documentHeaderFeatureAction,
+      featuresOpen: documentHeaderFeaturesOpen,
+      statusContentOpen: documentHeaderStatusOpen,
+      status: status(documentHeaderFeaturesOpen, documentHeaderFeatureAction),
+      statusContent
+    }),
     map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
   });
 }

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

@@ -0,0 +1,12 @@
+import { AlertType } from "@dso-toolkit/sources";
+import { documentListStatusDemoContentMapper } from '@dso-toolkit/css/src/components/document-list/document-list.mapper';
+import { documentListTemplate } from '@dso-toolkit/css/src/components/document-list/document-list.template';
+import { alertTemplate } from "../../alert/alert.template";
+import { viewerGridTemplate } from '../templates/viewer-grid.template';
+export function viewerGridDocumentListExampleTemplate(documentList) {
+  return viewerGridTemplate({
+    main: documentListTemplate({ items: documentList.items.map(item => (Object.assign(Object.assign({}, item), { status: documentListStatusDemoContentMapper(item.status) }))) }),
+    map: alertTemplate({ message: 'Dit is de kaart', status: AlertType.Info })
+  });
+}
+;