@dso-toolkit/core 34.2.1 → 36.1.0

package/dist/collection/collection-manifest.json

@@ -14,6 +14,7 @@
     "./components/helpcenter-panel/helpcenter-panel.js",
     "./components/highlight-box/highlight-box.js",
     "./components/icon/icon.js",
+    "./components/image-overlay/image-overlay.js",
     "./components/info/info.js",
     "./components/label/label.js",
     "./components/map-base-layers/map-base-layers.js",
@@ -28,8 +29,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.9.0",
-    "typescriptVersion": "4.2.3"
+    "version": "2.10.0",
+    "typescriptVersion": "4.3.5"
   },
   "collections": [],
   "bundles": []

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

@@ -1,5 +1,5 @@
 import { html, nothing } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 export function alertTemplate({ status, message, onClick, withRoleAlert }) {
   return html `
     <dso-alert status=${status} ?role-alert=${withRoleAlert}>

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

@@ -1,5 +1,5 @@
 import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { iconTemplate } from '../icon/icon.template';
 export function anchorTemplate({ icon, iconMode, label, modifier, url }) {
   return html `<a

package/dist/collection/components/autosuggest/autosuggest.css

@@ -16,7 +16,7 @@ ul {
   left: 0;
   right: 0;
   top: 100%;
-  z-index: 10;
+  z-index: 200;
 }
 ul li {
   display: flex;

package/dist/collection/components/autosuggest/autosuggest.js

@@ -5,7 +5,11 @@ import escapeStringRegexp from "escape-string-regexp";
 export class Autosuggest {
   constructor() {
     /**
-     * The suggestions for the value of the slotted input element
+     * The suggestions for the value of the slotted input element. Optionally a
+     * Suggestion can have a `type` and `item`.
+     *
+     * The `type` is used to style the suggestion. `item` can be use to reference
+     * the original object that was used to create the suggestion.
      */
     this.suggestions = [];
     /**
@@ -238,7 +242,7 @@ export class Autosuggest {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The suggestions for the value of the slotted input element"
+        "text": "The suggestions for the value of the slotted input element. Optionally a\nSuggestion can have a `type` and `item`.\n\nThe `type` is used to style the suggestion. `item` can be use to reference\nthe original object that was used to create the suggestion."
       },
       "defaultValue": "[]"
     },

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

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function badgeTemplate({ status, message }) {
   return html `
     <dso-badge status=${ifDefined(status)}>${message}</dso-badge>

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

@@ -1,5 +1,5 @@
 import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { iconTemplate } from '../icon/icon.template';
 export function buttonTemplate(button) {
   return 'url' in button

package/dist/collection/components/date-picker/date-picker.css

@@ -96,7 +96,7 @@
   top: 50%;
   user-select: none;
   width: 38px;
-  z-index: 2;
+  z-index: 101;
 }
 .dso-date__toggle:disabled {
   color: #afcf9d;
@@ -116,7 +116,7 @@
   transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
   visibility: hidden;
   will-change: transform, opacity, visibility;
-  z-index: 600;
+  z-index: 210;
 }
 @media (max-width: 35.9375em) {
   .dso-date__dialog {
@@ -155,7 +155,7 @@
   position: relative;
   transform: none;
   width: 100%;
-  z-index: 600;
+  z-index: 210;
 }
 @media (max-width: 35.9375em) {
   .dso-date__dialog-content {
@@ -233,7 +233,7 @@
   text-align: center;
   vertical-align: middle;
   width: 38px;
-  z-index: 1;
+  z-index: 100;
 }
 .dso-date__day.is-today {
   background: transparent;
@@ -372,7 +372,7 @@
   position: absolute;
   top: 0;
   width: 100%;
-  z-index: 2;
+  z-index: 101;
 }
 .dso-date__select select:focus + .dso-date__select-label {
   box-shadow: 0 0 0 2px #275937;
@@ -390,7 +390,7 @@
   pointer-events: none;
   position: relative;
   width: 100%;
-  z-index: 1;
+  z-index: 100;
 }
 .dso-date__select-label span {
   font-size: 1.25rem;

package/dist/collection/components/date-picker/date-picker.template.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus, direction }) {
   return html `
     <dso-date-picker

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { listTemplate } from '../list/list.template';
 function definitionTemplate({ term, descriptions }, useSrOnlyColon) {
   return html `

package/dist/collection/components/dropdown-menu/dropdown-menu.template.js

@@ -1,5 +1,5 @@
 import { html } from "lit-html";
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function dropdownMenuTemplate({ id, button, dropdownAlign, isCheckable, children }) {
   return html `
     <dso-dropdown-menu

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

@@ -165,7 +165,7 @@ dso-dropdown-menu .dso-dropdown-options {
   position: absolute;
   text-align: left;
   top: 100%;
-  z-index: 1000;
+  z-index: 220;
 }
 dso-dropdown-menu .dso-dropdown-options li {
   list-style: none;

package/dist/collection/components/header/header.js

@@ -1,9 +1,10 @@
-import { Component, Element, Fragment, h, Prop, State, Watch, } from "@stencil/core";
+import { Component, Element, Event, Fragment, h, Prop, State, Watch, } from "@stencil/core";
 import clsx from "clsx";
 import debounce from "debounce";
 const minDesktopViewportWidth = 992;
 export class Header {
   constructor() {
+    this.mainMenu = [];
     this.useDropDownMenu = "auto";
     this.showDropDown = false;
     this.isLoggedIn = false;
@@ -13,6 +14,17 @@ export class Header {
       this.setDropDownMenu();
       this.setOverflowMenu();
     }, 100);
+    this.MenuItem = (item) => {
+      const click = (event) => {
+        event.preventDefault();
+        this.menuItemClick.emit({
+          originalEvent: event,
+          menuItem: item,
+        });
+      };
+      return (h("li", { class: item.active ? "dso-active" : undefined },
+        h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: click }, item.label)));
+    };
   }
   watchUseDropDownMenu(value) {
     if (value === "auto") {
@@ -64,10 +76,6 @@ export class Header {
   disconnectedCallback() {
     window.removeEventListener("resize", this.onWindowResize);
   }
-  MenuItem(item) {
-    return (h("li", { class: item.active ? "dso-active" : undefined },
-      h("a", { href: item.url, "aria-current": item.active ? "page" : undefined }, item.label)));
-  }
   render() {
     return (h(Fragment, null,
       h("div", { class: clsx("dso-header", {
@@ -79,7 +87,7 @@ export class Header {
             h("slot", { name: "logo" })),
           h("div", { class: "sub-logo" },
             h("slot", { name: "sub-logo" }))),
-        this.showDropDown && (h("div", { class: "dropdown" },
+        this.showDropDown && this.mainMenu.length > 0 && (h("div", { class: "dropdown" },
           h("dso-dropdown-menu", { "dropdown-align": "right" },
             h("button", { type: "button", class: "tertiary", slot: "toggle" },
               h("span", null, "Menu")),
@@ -99,7 +107,7 @@ export class Header {
                       h("span", { class: "profile-label" }, "- Mijn profiel")))),
                   this.logoutUrl && this.isLoggedIn && (h("li", null,
                     h("a", { href: this.logoutUrl }, "Uitloggen"))))))))),
-        !this.showDropDown && (h(Fragment, null,
+        !this.showDropDown && this.mainMenu.length > 0 && (h(Fragment, null,
           h("div", { class: "dso-header-session" },
             this.userProfileUrl &&
               this.userProfileName &&
@@ -186,12 +194,13 @@ export class Header {
           }
         }
       },
-      "required": true,
+      "required": false,
       "optional": false,
       "docs": {
         "tags": [],
         "text": ""
-      }
+      },
+      "defaultValue": "[]"
     },
     "useDropDownMenu": {
       "type": "string",
@@ -286,6 +295,26 @@ export class Header {
     "hasSubLogo": {},
     "overflowMenuItems": {}
   }; }
+  static get events() { return [{
+      "method": "menuItemClick",
+      "name": "menuItemClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HeaderMenuItemClickEvent",
+        "resolved": "HeaderMenuItemClickEvent",
+        "references": {
+          "HeaderMenuItemClickEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "useDropDownMenu",

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

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
-import { ifDefined } from "lit-html/directives/if-defined";
-export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showSubLogo, loginUrl, logoutUrl, isLoggedIn, showLoggedIn, userProfileUrl, userProfileName, userHomeUrl, }) {
+import { ifDefined } from "lit-html/directives/if-defined.js";
+export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showSubLogo, loginUrl, logoutUrl, isLoggedIn, showLoggedIn, userProfileUrl, userProfileName, userHomeUrl, menuItemClick, }) {
   const bindLoginUrl = showLoggedIn && loginUrl ? loginUrl : undefined;
   const bindLogoutUrl = showLoggedIn && logoutUrl ? logoutUrl : undefined;
   return showSubLogo
@@ -13,6 +13,7 @@ export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showS
         user-profile-url=${ifDefined(userProfileUrl)}
         user-profile-name=${ifDefined(userProfileName)}
         user-home-url=${ifDefined(userHomeUrl)}
+        @menuItemClick=${menuItemClick}
       >
         <div slot="logo"><img height="40" alt="Omgevingsloket" src="${logo}" /></div>
         <div slot="sub-logo"><img alt="Regels op de kaart" src="${subLogo}" /></div></div>
@@ -26,6 +27,7 @@ export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showS
         user-profile-url=${ifDefined(userProfileUrl)}
         user-profile-name=${ifDefined(userProfileName)}
         user-home-url=${ifDefined(userHomeUrl)}
+        @menuItemClick=${menuItemClick}
       >
         <div slot="logo"><img alt="Omgevingsloket" src="${logo}" /></div>
       </dso-header>`;

package/dist/collection/components/helpcenter-panel/helpcenter-panel.template.js

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { unsafeHTML } from "lit-html/directives/unsafe-html";
+import { ifDefined } from "lit-html/directives/if-defined.js";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 export function helpcenterPanelTemplate({ label, url, content, }) {
   return html `
     ${unsafeHTML(content)}

package/dist/collection/components/highlight-box/highlight-box.template.js

@@ -1,5 +1,6 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { iconTemplate } from '../icon/icon.template';
 export function highlightBoxTemplate({ yellow, white, dropShadow, border, step, icon, richContent }) {
   return html `
@@ -11,7 +12,9 @@ export function highlightBoxTemplate({ yellow, white, dropShadow, border, step,
       ?border=${border}
     >
       ${icon && iconTemplate({ icon }, 'icon')}
-      ${richContent}
+      <div class="dso-rich-content">
+        ${typeof richContent === 'string' ? unsafeHTML(richContent) : richContent}
+      </div>
     </dso-highlight-box>
   `;
 }

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

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function iconTemplate({ icon }, slot) {
   return html `
     <dso-icon

package/dist/collection/components/image-overlay/image-overlay.css

@@ -0,0 +1,263 @@
+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 {
+  display: inline-block;
+  position: relative;
+}
+
+:host(:hover) .open,
+.open:focus {
+  opacity: 1;
+}
+
+.open {
+  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;
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border: 0;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  min-width: auto;
+  padding: 8px;
+  opacity: 0;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+}
+.open:focus, .open:focus-visible {
+  outline-offset: 2px;
+}
+.open:active {
+  outline: 0;
+}
+.open.extern::after, .open.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open:hover {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.open:active {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.open[disabled], .open[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+.open.btn-sm {
+  line-height: 16px;
+}
+.open.btn-sm dso-icon,
+.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.open.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;
+}
+.open.download:hover::after {
+  --dso-icon: var(--di-download-wit);
+}
+.open.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.open.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;
+}
+.open.extern:hover::after {
+  --dso-icon: var(--di-external-link-wit);
+}
+.open.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.open > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.dimmer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 19;
+  display: flex;
+  padding: 32px;
+  background-color: rgba(255, 255, 255, 0.8);
+  justify-content: center;
+}
+
+.wrapper {
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
+  position: relative;
+  z-index: 20;
+  align-self: center;
+  line-height: 0;
+}
+.wrapper img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: calc(100vh - 64px);
+}
+
+.close {
+  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;
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border: 0;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  min-width: auto;
+  padding: 8px;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+.close:focus, .close:focus-visible {
+  outline-offset: 2px;
+}
+.close:active {
+  outline: 0;
+}
+.close.extern::after, .close.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close:hover {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.close:active {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.close[disabled], .close[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+.close.btn-sm {
+  line-height: 16px;
+}
+.close.btn-sm dso-icon,
+.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.close.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;
+}
+.close.download:hover::after {
+  --dso-icon: var(--di-download-wit);
+}
+.close.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.close.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;
+}
+.close.extern:hover::after {
+  --dso-icon: var(--di-external-link-wit);
+}
+.close.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.close > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

package/dist/collection/components/image-overlay/image-overlay.js

@@ -0,0 +1,72 @@
+import { Component, Element, forceUpdate, h, Host, State } from "@stencil/core";
+import { createFocusTrap } from 'focus-trap';
+export class ImageOverlay {
+  constructor() {
+    this.active = false;
+    this.focused = false;
+  }
+  componentDidLoad() {
+    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+    this.mutationObserver.observe(this.host, {
+      attributes: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+    (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  render() {
+    var _a;
+    const { src, alt } = (_a = this.host.querySelector('img')) !== null && _a !== void 0 ? _a : {};
+    return (h(Host, { tabindex: this.focused ? -1 : 0, onFocus: () => {
+        var _a;
+        (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus();
+      } },
+      this.active && src && alt && (h("div", { class: "dimmer", ref: element => this.wrapperElement = element },
+        h("div", { class: "wrapper" },
+          h("img", { src: src, alt: alt }),
+          h("button", { type: "button", class: "close", onClick: () => this.active = false },
+            h("dso-icon", { icon: "times" }),
+            h("span", null, "Sluiten"))))),
+      h("slot", null),
+      h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false },
+        h("dso-icon", { icon: "external-link" }),
+        h("span", null, "Afbeelding vergroot weergeven"))));
+  }
+  componentDidRender() {
+    var _a, _b;
+    if (this.active && this.wrapperElement && !this.trap) {
+      this.trap = createFocusTrap(this.wrapperElement, {
+        escapeDeactivates: true,
+        clickOutsideDeactivates: (e) => {
+          if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {
+            this.active = false;
+            return false;
+          }
+          return true;
+        },
+        setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
+        onDeactivate: () => this.active = false
+      }).activate();
+    }
+    else if (!this.active && this.trap) {
+      (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
+      delete this.trap;
+    }
+  }
+  static get is() { return "dso-image-overlay"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./image-overlay.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["image-overlay.css"]
+  }; }
+  static get states() { return {
+    "active": {},
+    "focused": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/image-overlay/image-overlay.template.js

@@ -0,0 +1,7 @@
+import { html } from "lit-html";
+import { imageTemplate } from '@dso-toolkit/css/src/components/image/image.template';
+export function imageOverlayTemplate({ image }) {
+  return html `
+    <dso-image-overlay>${imageTemplate(image)}</dso-image-overlay>
+  `;
+}