@dso-toolkit/core 33.3.0 → 34.2.0

package/dist/cjs/{index-fcdfdd38.js → index-5ea63531.js}

@@ -94,6 +94,7 @@ const HYDRATE_ID = 's-id';
 const HYDRATED_STYLE_ID = 'sty-id';
 const HYDRATE_CHILD_ID = 'c-id';
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
 const createTime = (fnName, tagName = '') => {
     {
         return () => {
@@ -443,16 +444,36 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
                 catch (e) { }
             }
+            /**
+             * Need to manually update attribute if:
+             * - memberName is not an attribute
+             * - if we are rendering the host element in order to reflect attribute
+             * - if it's a SVG, since properties might not work in <svg>
+             * - if the newValue is null/undefined or 'false'.
+             */
+            let xlink = false;
+            {
+                if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
+                    memberName = ln;
+                    xlink = true;
+                }
+            }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
-                    {
+                    if (xlink) {
+                        elm.removeAttributeNS(XLINK_NS, memberName);
+                    }
+                    else {
                         elm.removeAttribute(memberName);
                     }
                 }
             }
             else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
                 newValue = newValue === true ? '' : newValue;
-                {
+                if (xlink) {
+                    elm.setAttributeNS(XLINK_NS, memberName, newValue);
+                }
+                else {
                     elm.setAttribute(memberName, newValue);
                 }
             }
@@ -1210,6 +1231,9 @@ const postUpdateComponent = (hostRef) => {
         }
     }
     else {
+        {
+            safeCall(instance, 'componentDidUpdate');
+        }
         endPostUpdate();
     }
     {

package/dist/cjs/index.esm-2ac7081c.js

@@ -0,0 +1,267 @@
+'use strict';
+
+/*!
+* tabbable 5.2.1
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
+var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
+var matches = typeof Element === 'undefined' ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+
+var getCandidates = function getCandidates(el, includeContainer, filter) {
+  var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
+
+  if (includeContainer && matches.call(el, candidateSelector)) {
+    candidates.unshift(el);
+  }
+
+  candidates = candidates.filter(filter);
+  return candidates;
+};
+
+var isContentEditable = function isContentEditable(node) {
+  return node.contentEditable === 'true';
+};
+
+var getTabindex = function getTabindex(node) {
+  var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
+
+  if (!isNaN(tabindexAttr)) {
+    return tabindexAttr;
+  } // Browsers do not return `tabIndex` correctly for contentEditable nodes;
+  // so if they don't have a tabindex attribute specifically set, assume it's 0.
+
+
+  if (isContentEditable(node)) {
+    return 0;
+  } // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+  //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+  //  yet they are still part of the regular tab order; in FF, they get a default
+  //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+  //  order, consider their tab index to be 0.
+
+
+  if ((node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
+    return 0;
+  }
+
+  return node.tabIndex;
+};
+
+var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
+  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
+};
+
+var isInput = function isInput(node) {
+  return node.tagName === 'INPUT';
+};
+
+var isHiddenInput = function isHiddenInput(node) {
+  return isInput(node) && node.type === 'hidden';
+};
+
+var isDetailsWithSummary = function isDetailsWithSummary(node) {
+  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
+    return child.tagName === 'SUMMARY';
+  });
+  return r;
+};
+
+var getCheckedRadio = function getCheckedRadio(nodes, form) {
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].checked && nodes[i].form === form) {
+      return nodes[i];
+    }
+  }
+};
+
+var isTabbableRadio = function isTabbableRadio(node) {
+  if (!node.name) {
+    return true;
+  }
+
+  var radioScope = node.form || node.ownerDocument;
+
+  var queryRadios = function queryRadios(name) {
+    return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
+  };
+
+  var radioSet;
+
+  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
+    radioSet = queryRadios(window.CSS.escape(node.name));
+  } else {
+    try {
+      radioSet = queryRadios(node.name);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
+      return false;
+    }
+  }
+
+  var checked = getCheckedRadio(radioSet, node.form);
+  return !checked || checked === node;
+};
+
+var isRadio = function isRadio(node) {
+  return isInput(node) && node.type === 'radio';
+};
+
+var isNonTabbableRadio = function isNonTabbableRadio(node) {
+  return isRadio(node) && !isTabbableRadio(node);
+};
+
+var isHidden = function isHidden(node, displayCheck) {
+  if (getComputedStyle(node).visibility === 'hidden') {
+    return true;
+  }
+
+  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
+  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
+
+  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
+    return true;
+  }
+
+  if (!displayCheck || displayCheck === 'full') {
+    while (node) {
+      if (getComputedStyle(node).display === 'none') {
+        return true;
+      }
+
+      node = node.parentElement;
+    }
+  } else if (displayCheck === 'non-zero-area') {
+    var _node$getBoundingClie = node.getBoundingClientRect(),
+        width = _node$getBoundingClie.width,
+        height = _node$getBoundingClie.height;
+
+    return width === 0 && height === 0;
+  }
+
+  return false;
+}; // form fields (nested) inside a disabled fieldset are not focusable/tabbable
+//  unless they are in the _first_ <legend> element of the top-most disabled
+//  fieldset
+
+
+var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
+  if (isInput(node) || node.tagName === 'SELECT' || node.tagName === 'TEXTAREA' || node.tagName === 'BUTTON') {
+    var parentNode = node.parentElement;
+
+    while (parentNode) {
+      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
+        // look for the first <legend> as an immediate child of the disabled
+        //  <fieldset>: if the node is in that legend, it'll be enabled even
+        //  though the fieldset is disabled; otherwise, the node is in a
+        //  secondary/subsequent legend, or somewhere else within the fieldset
+        //  (however deep nested) and it'll be disabled
+        for (var i = 0; i < parentNode.children.length; i++) {
+          var child = parentNode.children.item(i);
+
+          if (child.tagName === 'LEGEND') {
+            if (child.contains(node)) {
+              return false;
+            } // the node isn't in the first legend (in doc order), so no matter
+            //  where it is now, it'll be disabled
+
+
+            return true;
+          }
+        } // the node isn't in a legend, so no matter where it is now, it'll be disabled
+
+
+        return true;
+      }
+
+      parentNode = parentNode.parentElement;
+    }
+  } // else, node's tabbable/focusable state should not be affected by a fieldset's
+  //  enabled/disabled state
+
+
+  return false;
+};
+
+var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
+  if (node.disabled || isHiddenInput(node) || isHidden(node, options.displayCheck) || // For a details element with a summary, the summary element gets the focus
+  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
+    return false;
+  }
+
+  return true;
+};
+
+var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
+  if (!isNodeMatchingSelectorFocusable(options, node) || isNonTabbableRadio(node) || getTabindex(node) < 0) {
+    return false;
+  }
+
+  return true;
+};
+
+var tabbable = function tabbable(el, options) {
+  options = options || {};
+  var regularTabbables = [];
+  var orderedTabbables = [];
+  var candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+  candidates.forEach(function (candidate, i) {
+    var candidateTabindex = getTabindex(candidate);
+
+    if (candidateTabindex === 0) {
+      regularTabbables.push(candidate);
+    } else {
+      orderedTabbables.push({
+        documentOrder: i,
+        tabIndex: candidateTabindex,
+        node: candidate
+      });
+    }
+  });
+  var tabbableNodes = orderedTabbables.sort(sortOrderedTabbables).map(function (a) {
+    return a.node;
+  }).concat(regularTabbables);
+  return tabbableNodes;
+};
+
+var focusable = function focusable(el, options) {
+  options = options || {};
+  var candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
+  return candidates;
+};
+
+var isTabbable = function isTabbable(node, options) {
+  options = options || {};
+
+  if (!node) {
+    throw new Error('No node provided');
+  }
+
+  if (matches.call(node, candidateSelector) === false) {
+    return false;
+  }
+
+  return isNodeMatchingSelectorTabbable(options, node);
+};
+
+var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
+
+var isFocusable = function isFocusable(node, options) {
+  options = options || {};
+
+  if (!node) {
+    throw new Error('No node provided');
+  }
+
+  if (matches.call(node, focusableCandidateSelector) === false) {
+    return false;
+  }
+
+  return isNodeMatchingSelectorFocusable(options, node);
+};
+
+exports.focusable = focusable;
+exports.isFocusable = isFocusable;
+exports.isTabbable = isTabbable;
+exports.tabbable = tabbable;

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fcdfdd38.js');
+const index = require('./index-5ea63531.js');
 
 /*
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "./components/header/header.js",
     "./components/info-button/info-button.js",
     "./components/selectable/selectable.js",
+    "./components/viewer-grid/viewer-grid.js",
     "./components/alert/alert.js",
     "./components/attachments-counter/attachments-counter.js",
     "./components/badge/badge.js",

package/dist/collection/components/alert/alert.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 @media screen and (min-width: 481px) {
   .alert {
     padding: 19px 16px 19px 63px;

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

@@ -0,0 +1,17 @@
+import { html, nothing } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { iconTemplate } from '../icon/icon.template';
+export function anchorTemplate({ icon, iconMode, label, modifier, url }) {
+  return html `<a
+    href=${url}
+    class=${ifDefined(modifier)}
+    target=${ifDefined((modifier === null || modifier === void 0 ? void 0 : modifier.includes('extern')) ? '_blank' : undefined)}
+    rel=${ifDefined((modifier === null || modifier === void 0 ? void 0 : modifier.includes('extern')) ? 'noopener noreferrer' : undefined)}
+  >${icon && iconMode !== 'after'
+    ? iconTemplate(icon)
+    : nothing}${label}${(modifier === null || modifier === void 0 ? void 0 : modifier.includes('extern'))
+    ? html `<span class="sr-only">(Opent andere website in nieuw tabblad)</span>`
+    : nothing}${icon && iconMode === 'after'
+    ? iconTemplate(icon)
+    : nothing}</a>`;
+}

package/dist/collection/components/attachments-counter/attachments-counter.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: inline-block;
   --di-paperclip-grijs: url("data:image/svg+xml,%3csvg id='paperclip' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M21.88%2c8.94%2c10%2c20.6A4.63%2c4.63%2c0%2c0%2c1%2c6.62%2c22h0a5.78%2c5.78%2c0%2c0%2c1-4.05-1.81%2c5.34%2c5.34%2c0%2c0%2c1%2c0-7.56l9.3-9.26a1%2c1%2c0%2c1%2c1%2c1.48%2c1.48l-9.3%2c9.26h0a3.26%2c3.26%2c0%2c0%2c0%2c0%2c4.6%2c3.79%2c3.79%2c0%2c0%2c0%2c2.58%2c1.21%2c2.55%2c2.55%2c0%2c0%2c0%2c1.85-.81h0L20.4%2c7.46a1.83%2c1.83%2c0%2c0%2c0%2c.5-1.39%2c2.24%2c2.24%2c0%2c0%2c0-.63-1.44%2c1.85%2c1.85%2c0%2c0%2c0-2.61%2c0h0L7.43%2c14.73a.48.48%2c0%2c0%2c0%2c0%2c.67.48.48%2c0%2c0%2c0%2c.34.14.46.46%2c0%2c0%2c0%2c.34-.14l7.36-7.28a1%2c1%2c0%2c0%2c1%2c1.48%2c0A1%2c1%2c0%2c0%2c1%2c17%2c9.6h0L9.6%2c16.88h0a2.66%2c2.66%2c0%2c0%2c1-3.65%2c0%2c2.55%2c2.55%2c0%2c0%2c1%2c0-3.63L16.17%2c3.15a4%2c4%2c0%2c0%2c1%2c5.59%2c0A4.31%2c4.31%2c0%2c0%2c1%2c23%2c6%2c3.89%2c3.89%2c0%2c0%2c1%2c21.88%2c8.94Z'/%3e %3c/svg%3e");
@@ -30,7 +27,6 @@
   font-weight: 400;
   text-decoration: none;
   white-space: nowrap;
-  /* stylelint-disable-line declaration-property-value-disallowed-list */
 }
 .dso-attachments::after {
   background: var(--dso-icon, var(--di-paperclip-grijs)) no-repeat;

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

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

package/dist/collection/components/badge/badge.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/banner/banner.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: block;
   --di-status-danger: url("data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' style='fill: white'/%3e %3c/svg%3e");

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

@@ -0,0 +1,48 @@
+import { html, nothing } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { iconTemplate } from '../icon/icon.template';
+export function buttonTemplate(button) {
+  return 'url' in button
+    ? anchorElement(button)
+    : buttonElement(button);
+}
+function anchorElement({ url, label, modifier, id, icon, iconMode }) {
+  return html `
+    <a
+      href=${url}
+      class=${ifDefined(modifier)}
+      ?id=${id}
+    >
+      ${icon && !iconMode
+    ? iconTemplate(icon)
+    : nothing}<span class=${ifDefined(iconMode === 'only' ? 'sr-only' : undefined)}>${label}</span>${(modifier === null || modifier === void 0 ? void 0 : modifier.includes('extern'))
+    ? html `<span class="sr-only">(Opent andere website in nieuw tabblad)</span>`
+    : nothing}${icon && iconMode
+    ? iconTemplate(icon)
+    : nothing}
+    </a>
+  `;
+}
+function buttonElement({ variant, label, type, modifier, id, disabled, icon, iconMode, ariaDescribedby, ariaExpanded, ariaHaspopup, ariaRoledescription, onClick }) {
+  type !== null && type !== void 0 ? type : (type = 'button');
+  const className = variant ? `dso-${variant}` : modifier;
+  return html `
+    <button
+      type=${type}
+      id=${ifDefined(id)}
+      class=${ifDefined(className)}
+      ?disabled=${disabled}
+      aria-describedby=${ifDefined(ariaDescribedby)}
+      aria-expanded=${ifDefined(ariaExpanded)}
+      aria-haspopup=${ifDefined(ariaHaspopup)}
+      aria-roledescription=${ifDefined(ariaRoledescription)}
+      @click=${ifDefined(onClick)}
+    >
+      ${icon && !iconMode
+    ? iconTemplate(icon)
+    : nothing}<span class=${ifDefined(iconMode === 'only' ? 'sr-only' : undefined)}>${label}</span>${icon && iconMode
+    ? iconTemplate(icon)
+    : nothing}
+    </button>
+  `;
+}

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

@@ -0,0 +1,42 @@
+import { html } from 'lit-html';
+function contextLabelTemplate(label, content, children) {
+  return html `
+    <div class="dso-context-wrapper">
+      <span class="dso-context-label">
+        ${label}
+      </span>
+      <div class="dso-context-container">
+        ${content}
+      </div>
+    </div>
+    ${children}
+  `;
+}
+function contextFieldsetTemplate(label, content, children) {
+  return html `
+    <fieldset>
+      <legend class="sr-only">
+        ${label}
+      </legend>
+      <div class="dso-context-wrapper">
+        <span class="dso-context-label" aria-hidden="true">
+          ${label}
+        </span>
+        <div class="dso-context-container">
+          ${content}
+        </div>
+      </div>
+      ${children}
+    </fieldset>
+  `;
+}
+export function contextTemplate({ label, type, content, children }) {
+  switch (type) {
+    case 'label':
+      return contextLabelTemplate(label, content, children);
+    case 'legend':
+      return contextFieldsetTemplate(label, content, children);
+    default:
+      throw new TypeError('type can only be label or legend');
+  }
+}

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

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: block;
 }
@@ -107,6 +104,7 @@
 }
 
 .dso-date__dialog {
+  border-width: 1px;
   display: flex;
   right: 0;
   min-width: 320px;
@@ -133,8 +131,8 @@
   }
 }
 .dso-date__dialog.is-left {
-  left: auto;
-  right: 0;
+  left: -11px;
+  right: auto;
   width: auto;
 }
 .dso-date__dialog.is-active {

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

@@ -23,7 +23,7 @@ const keyCode = {
   RIGHT: 39,
   DOWN: 40,
 };
-const DISALLOWED_CHARACTERS = /[^0-9\.\/\-]+/g;
+const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
 const TRANSITION_MS = 300;
 export class DsoDatePicker {
   constructor() {
@@ -229,7 +229,49 @@ export class DsoDatePicker {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      this.setValue(target.value.replace(DISALLOWED_CHARACTERS, ""));
+      this.setValue(target.value);
+    };
+    this.handleKeyPress = (e) => {
+      if (e.key.search(DISALLOWED_CHARACTERS) > -1) {
+        e.preventDefault();
+      }
+    };
+    this.prepareEvent = (value) => {
+      var event = {
+        component: "dso-date-picker",
+        value: "",
+        valueAsDate: undefined
+      };
+      if (value instanceof Date) {
+        event.valueAsDate = value;
+      }
+      else {
+        event.value = value;
+        event.valueAsDate = parseDutchDate(value);
+      }
+      if (event.valueAsDate) {
+        event.value = printDutchDate(event.valueAsDate);
+      }
+      if (!event.valueAsDate && this.required) {
+        event.error = "required";
+      }
+      if (event.value && !event.valueAsDate) {
+        event.error = "invalid";
+      }
+      if (event.valueAsDate && (this.min || this.max)) {
+        const min = parseDutchDate(this.min);
+        const max = parseDutchDate(this.max);
+        const clampValue = clamp(event.valueAsDate, min, max);
+        if (clampValue !== event.valueAsDate && clampValue === min) {
+          event.valueAsDate = undefined;
+          event.error = "min-range";
+        }
+        else if (clampValue !== event.valueAsDate && clampValue === max) {
+          event.valueAsDate = undefined;
+          event.error = "max-range";
+        }
+      }
+      return event;
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -321,27 +363,7 @@ export class DsoDatePicker {
     this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
   }
   setValue(value) {
-    var event = {
-      component: "dso-date-picker",
-      value: "",
-      valueAsDate: undefined
-    };
-    if (value instanceof Date) {
-      event.valueAsDate = value;
-    }
-    else {
-      event.value = value;
-      event.valueAsDate = parseDutchDate(value);
-    }
-    if (event.valueAsDate) {
-      event.value = printDutchDate(event.valueAsDate);
-    }
-    if (!event.valueAsDate && this.required) {
-      event.error = "required";
-    }
-    if (event.value && !event.valueAsDate) {
-      event.error = "invalid";
-    }
+    const event = this.prepareEvent(value);
     this.value = event.value;
     this.dateChange.emit(event);
   }
@@ -379,7 +401,7 @@ export class DsoDatePicker {
     return (h(Host, null,
       h("div", { class: "dso-date" },
         h("div", { class: "dso-date__input-wrapper" },
-          h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
+          h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onKeyPress: this.handleKeyPress, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
           h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) },
             h("span", { class: "dso-date__toggle-icon" },
               h("dso-icon", { icon: "calendar" })),
@@ -636,7 +658,7 @@ export class DsoDatePicker {
       },
       "complexType": {
         "original": "DsoDatePickerChangeEvent",
-        "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | undefined; }",
+        "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\" | undefined; }",
         "references": {
           "DsoDatePickerChangeEvent": {
             "location": "local"

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

@@ -1,9 +1,10 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus }) {
+export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus, direction }) {
   return html `
     <dso-date-picker
       @dateChange=${(e) => onDateChange(e)}
+      direction=${ifDefined(direction)}
       identifier=${ifDefined(id)}
       value=${ifDefined(value || undefined)}
       min=${ifDefined(min || undefined)}