@dso-toolkit/core 31.0.0 → 32.1.0

package/dist/esm/dso-tree-view.entry.js

@@ -1,24 +1,23 @@
-import { h, r as registerInstance, c as createEvent } from './index-61410be2.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-61410be2.js';
 import { c as clsx } from './clsx.m-071989db.js';
 
 const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
-  var _a, _b;
-  return (h("li", { key: item.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), role: "treeitem", "aria-expanded": item.hasItems ? '' + !!item.open : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1 },
+  var _a, _b, _c;
+  return (h("li", { key: item.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
     h("div", { class: "tree-branch-control" }, item.hasItems
       ?
         h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
           h("dso-icon", { icon: item.open ? 'chevron-down' : 'chevron-right' }))
       : h("dso-icon", null)),
-    h("p", { class: "tree-content", tabindex: level === 1 && index === 0 ? 0 : -1, onClick: (e) => owner.itemClick(e, ancestors, item) },
+    h("p", { class: "tree-content", tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
       item.href
-        ? h("a", { href: item.href }, item.label)
-        : h("span", null, item.label), (_a = item.icons) === null || _a === void 0 ? void 0 :
-      _a.map((icon) => h("dso-icon", { icon: icon.icon, title: icon.label }))),
-    h("ul", { role: "group", "aria-busy": item.loading ? 'true' : undefined },
-      item.hasItems && !item.items && item.loading
+        ? h("a", { href: item.href, tabindex: "-1" }, item.label)
+        : h("span", null, item.label), (_b = item.icons) === null || _b === void 0 ? void 0 :
+      _b.map((icon) => h("dso-icon", { icon: icon.icon, title: icon.label }))),
+    item.open &&
+      h(Fragment, null, item.hasItems && !item.items && item.loading
         ? h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })
-        : undefined,
-      item.open && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
+        : h("ul", { role: "group" }, (_c = item.items) === null || _c === void 0 ? void 0 : _c.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
 };
 
 const treeViewCss = ":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content a,:host .tree-content a:visited{color:#39870c;text-decoration:none}:host .tree-content a:hover,:host .tree-content a:focus{color:#676cb0;text-decoration:underline}:host .tree-content a:active{text-decoration:none}:host .tree-content dso-icon{vertical-align:text-bottom;font-size:0.75em;margin-left:0.5em}*,*::after,*::before{box-sizing:border-box}";
@@ -72,11 +71,16 @@ let TreeView = class {
       event.preventDefault();
     };
     this.itemClick = (event, ancestors, item) => {
-      var _a;
       if (!(event.target instanceof HTMLElement)) {
         return;
       }
-      if (event.target.classList.contains('tree-content') || ((_a = event.target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('tree-content'))) {
+      const contentElement = event.target.closest('.tree-content');
+      if (contentElement) {
+        const tree = event.composedPath().find(item => (item instanceof HTMLElement) ? item.className === 'dso-tree' : false);
+        if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {
+          return;
+        }
+        TreeView.setFocus(tree, contentElement);
         this.clickItem.emit([...ancestors, item]);
         return;
       }
@@ -118,27 +122,27 @@ let TreeView = class {
     TreeView.setFocus(tree, focusableItems[index]);
   }
   static expandItemOrFocusChild(tree, target) {
-    var _a, _b;
-    if (((_a = target === null || target === void 0 ? void 0 : target.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === 'true') {
+    var _a;
+    if ((target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === 'true') {
       TreeView.moveFocus(tree, target, 'next');
     }
     else {
-      const controlElement = (_b = target.previousElementSibling) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+      const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
       if (controlElement instanceof HTMLElement) {
         controlElement.click();
       }
     }
   }
   static collapseItemOrFocusParent(tree, target) {
-    var _a, _b, _c, _d;
-    if (((_a = target === null || target === void 0 ? void 0 : target.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === 'true') {
-      const controlElement = (_b = target.previousElementSibling) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+    var _a, _b, _c;
+    if ((target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === 'true') {
+      const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
       if (controlElement instanceof HTMLElement) {
         controlElement.click();
       }
     }
     else {
-      const parentTarget = (_d = (_c = target === null || target === void 0 ? void 0 : target.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.previousElementSibling;
+      const parentTarget = (_c = (_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.previousElementSibling;
       if (parentTarget instanceof HTMLElement) {
         TreeView.setFocus(tree, parentTarget);
       }

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker",[[1,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"value":[513],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[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-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"label":[1]}]]],["dso-info_2",[[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]}]]]], options);
+  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker",[[1,"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",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[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",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2",[[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",[[1,"dso-icon",{"icon":[1]}]]]], options);
   });
 };
 

package/dist/types/components/date-picker/date-picker.d.ts

@@ -3,10 +3,15 @@ export declare type DsoDatePickerChangeEvent = {
   component: "dso-date-picker";
   valueAsDate: Date | undefined;
   value: string;
+  error?: "invalid" | "required";
 };
 export declare type DsoDatePickerFocusEvent = {
   component: "dso-date-picker";
 };
+export declare type DsoDatePickerKeyboardEvent = {
+  component: "dso-date-picker";
+  originalEvent: KeyboardEvent;
+};
 export declare type DsoDatePickerDirection = "left" | "right";
 export declare class DsoDatePicker implements ComponentInterface {
   /**
@@ -65,6 +70,10 @@ export declare class DsoDatePicker implements ComponentInterface {
    * Should the input be marked as required?
    */
   required: boolean;
+  /**
+   * Should the input be focused on load?
+   */
+  dsoAutofocus: boolean;
   /**
    * Date value. Must be in Dutch date format: DD-MM-YYYY.
    */
@@ -90,6 +99,14 @@ export declare class DsoDatePicker implements ComponentInterface {
    * Event emitted the date picker input is blurred.
    */
   dsoBlur: EventEmitter<DsoDatePickerFocusEvent>;
+  /**
+   * Event emitted on key up in the date picker input.
+   */
+  dsoKeyUp: EventEmitter<DsoDatePickerKeyboardEvent>;
+  /**
+   * Event emitted on key down in the date picker input.
+   */
+  dsoKeyDown: EventEmitter<DsoDatePickerKeyboardEvent>;
   /**
    * Event emitted the date picker input is focused.
    */
@@ -130,6 +147,8 @@ export declare class DsoDatePicker implements ComponentInterface {
   private toggleOpen;
   private handleEscKey;
   private handleBlur;
+  private handleKeyUp;
+  private handleKeyDown;
   private handleFocus;
   private handleTouchStart;
   private handleTouchMove;
@@ -144,6 +163,7 @@ export declare class DsoDatePicker implements ComponentInterface {
   private handleInputChange;
   private setValue;
   private processFocusedDayNode;
+  componentDidLoad(): void;
   /**
    * render() function
    * Always the last one in the class.

package/dist/types/components/date-picker/date-picker.template.d.ts

@@ -1,5 +1,5 @@
 import { DatePicker } from '@dso-toolkit/sources';
 import { TemplateResult } from 'lit-html';
-export declare function datePickerTemplate({ id, onDateChange, value, min, max, disabled }: DatePicker): TemplateResult<1>;
+export declare function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus }: DatePicker): TemplateResult<1>;
 export declare function datePickerWithLabelTemplate(datePicker: TemplateResult, id: string, label: string): TemplateResult<1>;
 export declare function datePickerShowByScriptingTemplate(datePicker: TemplateResult, id: string): TemplateResult<1>;

package/dist/types/components/helpcenter-panel/helpcenter-panel.d.ts

@@ -0,0 +1,11 @@
+export declare class HelpcenterPanel {
+  label?: string;
+  url: string;
+  visibility: "visible" | "hidden";
+  isOpen: "open" | "close";
+  slideState: "open" | "close";
+  loadIframe: boolean;
+  openClick: () => void;
+  closeClick: () => void;
+  render(): any;
+}

package/dist/types/components/helpcenter-panel/helpcenter-panel.template.d.ts

@@ -0,0 +1,2 @@
+import { HelpcenterPanel } from "@dso-toolkit/sources";
+export declare function helpcenterPanelTemplate({ label, url, content, }: HelpcenterPanel): import("lit-html").TemplateResult<1>;

package/dist/types/components/info-button/info-button.d.ts

@@ -5,6 +5,7 @@ export interface InfoButtonToggleEvent {
 }
 export declare class InfoButton {
   active?: boolean;
+  secondary?: boolean;
   label: string;
   toggle: EventEmitter<InfoButtonToggleEvent>;
   private handleToggle;

package/dist/types/components/info-button/info-button.template.d.ts

@@ -1,2 +1,2 @@
 import { InfoButton } from '@dso-toolkit/sources';
-export declare function infoButtonTemplate({ label, active, onClick }: InfoButton): import("lit-html").TemplateResult<1>;
+export declare function infoButtonTemplate({ label, active, secondary, onClick }: InfoButton): import("lit-html").TemplateResult<1>;

package/dist/types/components/label/label.decorator.d.ts

@@ -0,0 +1,3 @@
+import { LabelParameters } from '@dso-toolkit/sources';
+import { TemplateResult } from 'lit-html';
+export declare const decorator: LabelParameters<TemplateResult>['decorator'];

package/dist/types/components/label/label.template.d.ts

@@ -1,2 +1,2 @@
 import { Label } from '@dso-toolkit/sources';
-export declare function labelTemplate({ status, label, button, compact }: Label): import("lit-html").TemplateResult<1>;
+export declare function labelTemplate({ status, label, button, compact, symbol }: Label): import("lit-html").TemplateResult<1>;

package/dist/types/components/toggletip/toggletip.d.ts

@@ -4,6 +4,7 @@ export declare class Toggletip {
   label: string;
   position: "top" | "right" | "bottom" | "left";
   small?: boolean;
+  secondary?: boolean;
   infoButton: HTMLDsoInfoButtonElement;
   button: HTMLButtonElement;
   componentDidRender(): void;

package/dist/types/components/toggletip/toggletip.template.d.ts

@@ -1,2 +1,2 @@
 import { Toggletip } from "@dso-toolkit/sources";
-export declare function toggletipTemplate({ children, label, position, small, }: Toggletip): import("lit-html").TemplateResult<1>;
+export declare function toggletipTemplate({ children, label, position, small, secondary, }: Toggletip): import("lit-html").TemplateResult<1>;

package/dist/types/components/tree-view/tree-view.d.ts

@@ -1,5 +1,5 @@
 import { ComponentInterface, Event, EventEmitter } from '../../stencil-public-runtime';
-import { TreeViewItem } from '@dso-toolkit/sources';
+import { TreeViewItem } from './tree-view.interfaces';
 export declare class TreeView implements ComponentInterface {
   /**
   * The collection of TreeViewItems

package/dist/types/components/tree-view/tree-view.interfaces.d.ts

@@ -0,0 +1,24 @@
+export interface TreeViewItem<T> {
+  /** The reference of type T */
+  reference: T;
+  /** The label of the item */
+  label: string;
+  /** The optional href of the item (creates a link) */
+  href?: string;
+  /** Indicates whether the item has children */
+  hasItems: boolean;
+  /** The array of child items */
+  items?: TreeViewItem<T>[];
+  /** Indicates whether the node is open and child items are shown */
+  open?: boolean;
+  /** Indicates the node is loading child items */
+  loading?: boolean;
+  /** An optional array of icons */
+  icons?: TreeViewItemIcon[];
+}
+export interface TreeViewItemIcon {
+  /** The icon type */
+  icon: string;
+  /** The label for the icon */
+  label: string;
+}

package/dist/types/components.d.ts

@@ -6,13 +6,13 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Suggestion } from "./components/autosuggest/autosuggest";
-import { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent } from "./components/date-picker/date-picker";
+import { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker";
 import { InfoButtonToggleEvent } from "./components/info-button/info-button";
 import { BaseLayer } from "./components/map-base-layers/map-base-layers.interfaces";
 import { Overlay } from "./components/map-overlays/map-overlays.interfaces";
 import { ContentAnchor } from "./components/ozon-content/ozon-content.interfaces";
 import { SelectableChangeEvent } from "./components/selectable/selectable";
-import { TreeViewItem } from "@dso-toolkit/sources";
+import { TreeViewItem } from "./components/tree-view/tree-view.interfaces";
 export namespace Components {
     interface DsoAlert {
         /**
@@ -52,6 +52,10 @@ export namespace Components {
           * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
          */
         "disabled": boolean;
+        /**
+          * Should the input be focused on load?
+         */
+        "dsoAutofocus": boolean;
         /**
           * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus returning to the date picker's button. Default is true.
          */
@@ -107,6 +111,10 @@ export namespace Components {
          */
         "open": boolean;
     }
+    interface DsoHelpcenterPanel {
+        "label"?: string;
+        "url": string;
+    }
     interface DsoHighlightBox {
         "border"?: boolean;
         "dropShadow"?: boolean;
@@ -124,6 +132,7 @@ export namespace Components {
     interface DsoInfoButton {
         "active"?: boolean;
         "label": string;
+        "secondary"?: boolean;
     }
     interface DsoLabel {
         "compact"?: boolean;
@@ -171,6 +180,7 @@ export namespace Components {
     interface DsoToggletip {
         "label": string;
         "position": "top" | "right" | "bottom" | "left";
+        "secondary"?: boolean;
         "small"?: boolean;
     }
     interface DsoTooltip {
@@ -257,6 +267,12 @@ declare global {
         prototype: HTMLDsoDropdownMenuElement;
         new (): HTMLDsoDropdownMenuElement;
     };
+    interface HTMLDsoHelpcenterPanelElement extends Components.DsoHelpcenterPanel, HTMLStencilElement {
+    }
+    var HTMLDsoHelpcenterPanelElement: {
+        prototype: HTMLDsoHelpcenterPanelElement;
+        new (): HTMLDsoHelpcenterPanelElement;
+    };
     interface HTMLDsoHighlightBoxElement extends Components.DsoHighlightBox, HTMLStencilElement {
     }
     var HTMLDsoHighlightBoxElement: {
@@ -355,6 +371,7 @@ declare global {
         "dso-banner": HTMLDsoBannerElement;
         "dso-date-picker": HTMLDsoDatePickerElement;
         "dso-dropdown-menu": HTMLDsoDropdownMenuElement;
+        "dso-helpcenter-panel": HTMLDsoHelpcenterPanelElement;
         "dso-highlight-box": HTMLDsoHighlightBoxElement;
         "dso-icon": HTMLDsoIconElement;
         "dso-info": HTMLDsoInfoElement;
@@ -419,6 +436,10 @@ declare namespace LocalJSX {
           * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
          */
         "disabled"?: boolean;
+        /**
+          * Should the input be focused on load?
+         */
+        "dsoAutofocus"?: boolean;
         /**
           * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.
          */
@@ -447,6 +468,14 @@ declare namespace LocalJSX {
           * Event emitted the date picker input is focused.
          */
         "onDsoFocus"?: (event: CustomEvent<DsoDatePickerFocusEvent>) => void;
+        /**
+          * Event emitted on key down in the date picker input.
+         */
+        "onDsoKeyDown"?: (event: CustomEvent<DsoDatePickerKeyboardEvent>) => void;
+        /**
+          * Event emitted on key up in the date picker input.
+         */
+        "onDsoKeyUp"?: (event: CustomEvent<DsoDatePickerKeyboardEvent>) => void;
         /**
           * Should the input be marked as required?
          */
@@ -474,6 +503,10 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    interface DsoHelpcenterPanel {
+        "label"?: string;
+        "url": string;
+    }
     interface DsoHighlightBox {
         "border"?: boolean;
         "dropShadow"?: boolean;
@@ -493,6 +526,7 @@ declare namespace LocalJSX {
         "active"?: boolean;
         "label"?: string;
         "onToggle"?: (event: CustomEvent<InfoButtonToggleEvent>) => void;
+        "secondary"?: boolean;
     }
     interface DsoLabel {
         "compact"?: boolean;
@@ -547,6 +581,7 @@ declare namespace LocalJSX {
     interface DsoToggletip {
         "label"?: string;
         "position"?: "top" | "right" | "bottom" | "left";
+        "secondary"?: boolean;
         "small"?: boolean;
     }
     interface DsoTooltip {
@@ -601,6 +636,7 @@ declare namespace LocalJSX {
         "dso-banner": DsoBanner;
         "dso-date-picker": DsoDatePicker;
         "dso-dropdown-menu": DsoDropdownMenu;
+        "dso-helpcenter-panel": DsoHelpcenterPanel;
         "dso-highlight-box": DsoHighlightBox;
         "dso-icon": DsoIcon;
         "dso-info": DsoInfo;
@@ -629,6 +665,7 @@ declare module "@stencil/core" {
             "dso-banner": LocalJSX.DsoBanner & JSXBase.HTMLAttributes<HTMLDsoBannerElement>;
             "dso-date-picker": LocalJSX.DsoDatePicker & JSXBase.HTMLAttributes<HTMLDsoDatePickerElement>;
             "dso-dropdown-menu": LocalJSX.DsoDropdownMenu & JSXBase.HTMLAttributes<HTMLDsoDropdownMenuElement>;
+            "dso-helpcenter-panel": LocalJSX.DsoHelpcenterPanel & JSXBase.HTMLAttributes<HTMLDsoHelpcenterPanelElement>;
             "dso-highlight-box": LocalJSX.DsoHighlightBox & JSXBase.HTMLAttributes<HTMLDsoHighlightBoxElement>;
             "dso-icon": LocalJSX.DsoIcon & JSXBase.HTMLAttributes<HTMLDsoIconElement>;
             "dso-info": LocalJSX.DsoInfo & JSXBase.HTMLAttributes<HTMLDsoInfoElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "31.0.0",
+  "version": "32.1.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",

package/dist/dso-toolkit/p-187782ee.entry.js

@@ -1 +0,0 @@
-import{h as e,r as t,c as i,H as s,g as a}from"./p-a40eeb32.js";import{c as o}from"./p-7b37bd52.js";var d;function n(e){if(!e)return;const t=e.split("-");return 3===t.length&&4===t[2].length?function(e,t,i){var s=parseInt(i,10),a=parseInt(t,10),o=parseInt(e,10);if(Number.isInteger(o)&&Number.isInteger(a)&&Number.isInteger(s)&&a>0&&a<=12&&s>0&&s<=31&&o>0)return new Date(o,a-1,s)}(t[2],t[1],t[0]):void 0}function r(e){return e?`${e.getDate().toString(10).padStart(2,"0")}-${(e.getMonth()+1).toString(10).padStart(2,"0")}-${e.getFullYear().toString(10).padStart(2,"0")}`:""}function l(e,t){return!(!e||!t)&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function h(e,t){var i=new Date(e);return i.setDate(i.getDate()+t),i}function c(e,t=d.Monday){var i=new Date(e),s=i.getDay(),a=(s<t?7:0)+s-t;return i.setDate(i.getDate()-a),i}function p(e,t=d.Monday){var i=new Date(e),s=i.getDay(),a=6+(s<t?-7:0)-(s-t);return i.setDate(i.getDate()+a),i}function u(e){return new Date(e.getFullYear(),e.getMonth(),1)}function _(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function b(e,t){const i=new Date(e);return i.setMonth(t),i}function f(e,t){const i=new Date(e);return i.setFullYear(t),i}function g(e,t,i){return m(e,t,i)===e}function m(e,t,i){const s=e.getTime();return t&&t instanceof Date&&s<t.getTime()?t:i&&i instanceof Date&&s>i.getTime()?i:e}!function(e){e[e.Sunday=0]="Sunday",e[e.Monday=1]="Monday",e[e.Tuesday=2]="Tuesday",e[e.Wednesday=3]="Wednesday",e[e.Thursday=4]="Thursday",e[e.Friday=5]="Friday",e[e.Saturday=6]="Saturday"}(d||(d={}));const x=({focusedDay:t,today:i,day:s,onDaySelect:a,onKeyboardNavigation:o,focusedDayRef:d,inRange:n})=>{const h=l(s,i),c=l(s,t),p=s.getMonth()!==t.getMonth(),u=!n;return e("button",{class:{"dso-date__day":!0,"is-outside":u,"is-disabled":p,"is-today":h},tabIndex:c?0:-1,onClick:function(e){a(e,s)},onKeyDown:o,disabled:u||p,type:"button",ref:e=>{c&&e&&d&&d(e)}},e("span",{"aria-hidden":"true"},s.getDate()),e("span",{class:"dso-date__vhidden"},r(s)))},v=({selectedDate:t,focusedDate:i,labelledById:s,localization:a,firstDayOfWeek:o,min:n,max:r,onDateSelect:b,onKeyboardNavigation:f,focusedDayRef:m,onMouseDown:v,onFocusIn:y})=>{const w=new Date,k=function(e,t=d.Monday){return function(e,t){const i=[];let s=e;for(;!l(s,t);)i.push(s),s=h(s,1);return i.push(s),i}(c(u(e),t),p(_(e),t))}(i,o);return e("table",{class:"dso-date__table",role:"grid","aria-labelledby":s,onFocusin:y,onMouseDown:v},e("thead",null,e("tr",null,(z=o,M=t=>e("th",{class:"dso-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"dso-date__vhidden"},t)),(D=a.dayNames).map(((e,t)=>M(D[(t+z)%D.length])))))),e("tbody",null,function(e){const t=[];for(let i=0;i<e.length;i+=7)t.push(e.slice(i,i+7));return t}(k).map((s=>e("tr",{class:"dso-date__row"},s.map((s=>e("td",{class:"dso-date__cell",role:"gridcell","aria-selected":l(s,t)?"true":void 0,"aria-current":l(s,w)?"date":void 0},e(x,{day:s,today:w,focusedDay:i,inRange:g(s,n,r),onDaySelect:b,onKeyboardNavigation:f,focusedDayRef:m})))))))));var D,z,M},y={buttonLabel:"Kies datum",placeholder:"dd-mm-jjjj",selectedDateMessage:"Geselecteerde datum is",prevMonthLabel:"Vorige maand",nextMonthLabel:"Volgende maand",monthSelectLabel:"Maand",yearSelectLabel:"Jaar",closeLabel:"Sluit window",keyboardInstruction:"Gebruik de pijltjestoetsen om een dag te kiezen",calendarHeading:"Kies een datum",dayNames:["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"],monthNames:["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"],monthNamesShort:["Jan","Feb","Mrt","Apr","Mei","Jun","Jul","Aug","Sep","Okt","Nov","Dec"]},w=/[^0-9\.\/\-]+/g;let k=class{constructor(e){t(this,e),this.dateChange=i(this,"dateChange",7),this.dsoBlur=i(this,"dsoBlur",7),this.dsoFocus=i(this,"dsoFocus",7),this.monthSelectId=o("DsoDateMonth"),this.yearSelectId=o("DsoDateYear"),this.dialogLabelId=o("DsoDateLabel"),this.localization=y,this.firstDayOfWeek=d.Monday,this.activeFocus=!1,this.focusedDay=new Date,this.open=!1,this.name="date",this.disabled=!1,this.direction="right",this.required=!1,this.value="",this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=()=>{this.activeFocus=!1},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleEscKey=e=>{27===e.keyCode&&this.hide()},this.handleBlur=e=>{e.stopPropagation(),this.dsoBlur.emit({component:"dso-date-picker"})},this.handleFocus=e=>{e.stopPropagation(),this.dsoFocus.emit({component:"dso-date-picker"})},this.handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX,this.initialTouchY=t.pageY},this.handleTouchMove=e=>{e.preventDefault()},this.handleTouchEnd=e=>{const t=e.changedTouches[0],i=t.pageX-this.initialTouchX,s=t.pageY-this.initialTouchY,a=Math.abs(i)>=70&&Math.abs(s)<=70,o=Math.abs(s)>=70&&Math.abs(i)<=70&&s>0;a?this.addMonths(i<0?1:-1):o&&(this.hide(!1),e.preventDefault()),this.initialTouchY=void 0,this.initialTouchX=void 0},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.handleFirstFocusableKeydown=e=>{var t;9===e.keyCode&&e.shiftKey&&(null===(t=this.focusedDayNode)||void 0===t||t.focus(),e.preventDefault())},this.handleKeyboardNavigation=e=>{var t;if(9===e.keyCode&&!e.shiftKey)return e.preventDefault(),void(null===(t=this.firstFocusableElement)||void 0===t||t.focus());var i=!0;switch(e.keyCode){case 39:this.addDays(1);break;case 37:this.addDays(-1);break;case 40:this.addDays(7);break;case 38:this.addDays(-7);break;case 33:e.shiftKey?this.addYears(-1):this.addMonths(-1);break;case 34:e.shiftKey?this.addYears(1):this.addMonths(1);break;case 36:this.startOfWeek();break;case 35:this.endOfWeek();break;default:i=!1}i&&(e.preventDefault(),this.enableActiveFocus())},this.handleDaySelect=(e,t)=>{g(t,n(this.min),n(this.max))&&(t.getMonth()===this.focusedDay.getMonth()?(this.setValue(t),this.hide()):this.setFocusedDay(t))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleInputChange=e=>{const t=e.target;t.value=t.value.replace(w,"");const i=n(t.value);(i||""===t.value)&&this.setValue(i)},this.processFocusedDayNode=e=>{this.focusedDayNode=e,this.activeFocus&&this.open&&setTimeout((()=>e.focus()),0)}}handleDocumentClick(e){var t;if(!this.open)return;const i=e.composedPath();for(const e of i)if(e instanceof Node&&(null===(t=this.element.shadowRoot)||void 0===t?void 0:t.contains(e)))return;this.hide(!1)}async setFocus(){var e;return null===(e=this.datePickerInput)||void 0===e?void 0:e.focus()}async show(){this.open=!0,this.setFocusedDay(n(this.value)||new Date),void 0!==this.focusTimeoutId&&clearTimeout(this.focusTimeoutId),this.focusTimeoutId=setTimeout((()=>{var e;return null===(e=this.monthSelectNode)||void 0===e?void 0:e.focus()}),300)}async hide(e=!0){this.open=!1,void 0!==this.focusTimeoutId&&clearTimeout(this.focusTimeoutId),e&&setTimeout((()=>{var e;return null===(e=this.datePickerButton)||void 0===e?void 0:e.focus()}),500)}addDays(e){this.setFocusedDay(h(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(c(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(p(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=b(u(this.focusedDay),e),i=_(t),s=b(this.focusedDay,e);this.setFocusedDay(m(s,t,i))}setYear(e){const t=f(u(this.focusedDay),e),i=_(t),s=f(this.focusedDay,e);this.setFocusedDay(m(s,t,i))}setFocusedDay(e){this.focusedDay=m(e,n(this.min),n(this.max))}setValue(e){this.value=r(e),this.dateChange.emit({component:"dso-date-picker",value:this.value,valueAsDate:e})}render(){const t=n(this.value),i=t&&r(t),a=(t||this.focusedDay).getFullYear(),o=this.focusedDay.getMonth(),d=this.focusedDay.getFullYear(),l=n(this.min),h=n(this.max),c=null!=l&&l.getMonth()===o&&l.getFullYear()===d,p=null!=h&&h.getMonth()===o&&h.getFullYear()===d;let u=a-10,_=a+10;return l&&(u=Math.max(u,l.getFullYear())),h&&(_=Math.min(_,h.getFullYear())),e(s,null,e("div",{class:"dso-date"},e("div",{class:"dso-date__input-wrapper"},e("input",{class:"dso-date__input",value:i,placeholder:this.localization.placeholder,id:this.identifier,disabled:this.disabled,role:this.role,required:!!this.required||void 0,"aria-autocomplete":"none",onInput:this.handleInputChange,onFocus:this.handleFocus,onBlur:this.handleBlur,autoComplete:"off",ref:e=>this.datePickerInput=e}),e("button",{type:"button",class:"dso-date__toggle",onClick:this.toggleOpen,disabled:this.disabled,ref:e=>this.datePickerButton=e},e("span",{class:"dso-date__toggle-icon"},e("dso-icon",{icon:"calendar"})),e("span",{class:"dso-date__vhidden"},this.localization.buttonLabel,i&&e("span",null,", ",this.localization.selectedDateMessage," ",i)))),e("div",{class:{"dso-date__dialog":!0,"is-left":"left"===this.direction,"is-active":this.open},role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{class:"dso-date__dialog-content",onKeyDown:this.handleEscKey},e("div",{class:"dso-date__vhidden dso-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{class:"dso-date__mobile",onFocusin:this.disableActiveFocus},e("label",{class:"dso-date__mobile-heading"},this.localization.calendarHeading),e("button",{class:"dso-date__close",ref:e=>this.firstFocusableElement=e,onKeyDown:this.handleFirstFocusableKeydown,onClick:()=>this.hide(),type:"button"},e("dso-icon",{icon:"times"}),e("span",{class:"dso-date__vhidden"},this.localization.closeLabel))),e("div",{class:"dso-date__header",onFocusin:this.disableActiveFocus},e("div",null,e("h2",{id:this.dialogLabelId,class:"dso-date__vhidden","aria-live":"polite"},this.localization.monthNames[o]," ",this.focusedDay.getFullYear()),e("label",{htmlFor:this.monthSelectId,class:"dso-date__vhidden"},this.localization.monthSelectLabel),e("div",{class:"dso-date__select"},e("select",{id:this.monthSelectId,class:"dso-date__select--month",ref:e=>this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((t,i)=>e("option",{key:t,value:i,selected:i===o},t)))),e("div",{class:"dso-date__select-label","aria-hidden":"true"},e("span",null,this.localization.monthNamesShort[o]),e("dso-icon",{icon:"chevron-down"}))),e("label",{htmlFor:this.yearSelectId,class:"dso-date__vhidden"},this.localization.yearSelectLabel),e("div",{class:"dso-date__select"},e("select",{id:this.yearSelectId,class:"dso-date__select--year",onChange:this.handleYearSelect},function(e,t){for(var i=[],s=e;s<=t;s++)i.push(s);return i}(u,_).map((t=>e("option",{key:t,selected:t===d},t)))),e("div",{class:"dso-date__select-label","aria-hidden":"true"},e("span",null,this.focusedDay.getFullYear()),e("dso-icon",{icon:"chevron-down"})))),e("div",{class:"dso-date__nav"},e("button",{class:"dso-date__prev",onClick:this.handlePreviousMonthClick,disabled:c,type:"button"},e("dso-icon",{icon:"chevron-left"}),e("span",{class:"dso-date__vhidden"},this.localization.prevMonthLabel)),e("button",{class:"dso-date__next",onClick:this.handleNextMonthClick,disabled:p,type:"button"},e("dso-icon",{icon:"chevron-right"}),e("span",{class:"dso-date__vhidden"},this.localization.nextMonthLabel)))),e(v,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:l,max:h})))))}get element(){return a(this)}};k.style=':host{display:block}.dso-date *,.dso-date *::before,.dso-date *::after{box-sizing:border-box}.dso-date{box-sizing:border-box;color:#191919;display:block;font-family:"Asap", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date__input{display:block;width:100%;height:40px;padding:6px 14px;font-size:16px;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input::-moz-placeholder{color:#666;opacity:1}.dso-date__input:-ms-input-placeholder{color:#666}.dso-date__input::-webkit-input-placeholder{color:#666}.dso-date__input::-ms-expand{background-color:transparent;border:0}.dso-date__input:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled],.dso-date__input[readonly],fieldset[disabled] .dso-date__input{background-color:#fff;opacity:1}.dso-date__input[disabled],fieldset[disabled] .dso-date__input{cursor:default}.dso-date__input[disabled]{border-color:#e5e5e5;color:#999}.dso-date__input[readonly]{border-width:1px}.dso-date__input[type=text]{line-height:40px}.dso-date__input[type=text]::placeholder{overflow:visible !important}.dso-date__input[size]{width:auto}.dso-date__toggle{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:2}.dso-date__toggle:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog{display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left{left:auto;right:0;width:auto}.dso-date__dialog.is-active{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog-content{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active .dso-date__dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:"Asap", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:1}.dso-date__day.is-today{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day:hover,.dso-date__day:active{background:#39870c;color:#fff}.dso-date__day:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true] .dso-date__day{background:#39870c;color:#fff}[aria-selected=true] .dso-date__day:focus{background:transparent}[aria-selected=true] .dso-date__day:focus span[aria-hidden=true]{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled{background:#fff;cursor:default}.dso-date__day.is-disabled:hover{color:#666}.dso-date__day span[aria-hidden=true]{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header span{font-size:0.875rem}.dso-date__nav{white-space:nowrap}.dso-date__prev,.dso-date__next{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev,.dso-date__next{height:40px;width:40px}}.dso-date__prev:hover,.dso-date__prev:active,.dso-date__next:hover,.dso-date__next:active{background-color:#39870c;color:#fff}.dso-date__prev:focus,.dso-date__next:focus{background:transparent;color:#39870c}.dso-date__prev:disabled,.dso-date__prev:disabled:hover,.dso-date__next:disabled,.dso-date__next:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev svg,.dso-date__next svg{margin:0 auto}.dso-date__select{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select span{margin-right:4px}.dso-date__select select{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.dso-date__select select:focus+.dso-date__select-label{box-shadow:0 0 0 2px #275937}.dso-date__select select:disabled{color:#afcf9d}.dso-date__select-label{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.dso-date__select-label span{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label svg{width:16px;height:16px}.dso-date__mobile{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading{display:none}}.dso-date__close{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close{margin-right:0;opacity:0}}.dso-date__close:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close:focus{opacity:1}}.dso-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}';export{k as dso_date_picker}

package/dist/dso-toolkit/p-2c6e9460.entry.js

@@ -1 +0,0 @@
-import{r as o,c as l,h as s}from"./p-a40eeb32.js";import{c as r}from"./p-4070c1e5.js";let e=class{constructor(s){o(this,s),this.removeClick=l(this,"removeClick",7)}render(){const o=this.status&&e.statusMap.get(this.status);return s("span",{class:r("dso-label",{[`dso-label-${this.status}`]:this.status,"dso-compact":this.compact&&!this.removable,"dso-hover":this.hover})},o&&s("span",{class:"sr-only"},o,": "),s("slot",null),this.removable&&s("button",{type:"button",onClick:o=>this.removeClick.emit(o),title:"Verwijder",onMouseEnter:()=>this.hover=!0,onMouseLeave:()=>this.hover=!1},s("dso-icon",{icon:"times"})))}};e.statusMap=new Map([["info","Opmerking"],["success","Gelukt"],["warning","Waarschuwing"],["danger","Fout"]]),e.style=":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:16px;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}";export{e as dso_label}

package/dist/dso-toolkit/p-378fb428.entry.js

@@ -1 +0,0 @@
-import{h as e,r as t,c as o}from"./p-a40eeb32.js";import{c as n}from"./p-4070c1e5.js";const i=({owner:t,ancestors:o,item:r,index:s,level:a,setSize:l})=>{var c,d;return e("li",{key:r.reference,class:n("tree-item",{"has-child":r.hasItems}),role:"treeitem","aria-expanded":r.hasItems?""+!!r.open:void 0,"aria-level":a,"aria-setsize":l,"aria-posinset":s+1},e("div",{class:"tree-branch-control"},r.hasItems?e("div",{onClick:e=>t.itemClick(e,o,r)},e("dso-icon",{icon:r.open?"chevron-down":"chevron-right"})):e("dso-icon",null)),e("p",{class:"tree-content",tabindex:1===a&&0===s?0:-1,onClick:e=>t.itemClick(e,o,r)},r.href?e("a",{href:r.href},r.label):e("span",null,r.label),null===(c=r.icons)||void 0===c?void 0:c.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),e("ul",{role:"group","aria-busy":r.loading?"true":void 0},r.hasItems&&!r.items&&r.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):void 0,r.open&&(null===(d=r.items)||void 0===d?void 0:d.map(((n,s,l)=>e(i,{owner:t,ancestors:[...o,r],item:n,index:s,level:a+1,setSize:l.length}))))))};let r=class{constructor(e){t(this,e),this.openItem=o(this,"openItem",7),this.closeItem=o(this,"closeItem",7),this.clickItem=o(this,"clickItem",7),this.keyDownListener=e=>{if(e.defaultPrevented)return;const t=e.composedPath().find((e=>e instanceof HTMLElement&&"dso-tree"===e.className));if(e.target instanceof HTMLParagraphElement&&t instanceof HTMLElement){switch(e.key){case"ArrowDown":r.moveFocus(t,e.target,"next");break;case"ArrowUp":r.moveFocus(t,e.target,"previous");break;case"ArrowRight":r.expandItemOrFocusChild(t,e.target);break;case"ArrowLeft":r.collapseItemOrFocusParent(t,e.target);break;case"End":r.moveFocus(t,e.target,"last");break;case"Home":r.moveFocus(t,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(1===(o=e.key).length&&o.match(/\S/)&&r.setFocusByFirstCharacter(t,e.target,e.key,e.shiftKey))break;return}var o;e.preventDefault()}},this.itemClick=(e,t,o)=>{var n;e.target instanceof HTMLElement&&(e.target.classList.contains("tree-content")||(null===(n=e.target.parentElement)||void 0===n?void 0:n.classList.contains("tree-content"))?this.clickItem.emit([...t,o]):o.open?this.closeItem.emit([...t,o]):this.openItem.emit([...t,o]))}}static setFocus(e,t){t&&(Array.from(e.querySelectorAll("p")).filter((e=>0===e.tabIndex)).forEach((e=>e.tabIndex=-1)),t.tabIndex=0,t.focus())}static moveFocus(e,t,o){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let i=0;switch(o){case"first":i=0;break;case"previous":i=n.indexOf(t)-1;break;case"next":i=n.indexOf(t)+1;break;case"last":i=n.length-1}r.setFocus(e,n[i])}static expandItemOrFocusChild(e,t){var o,n;if("true"===(null===(o=null==t?void 0:t.parentElement)||void 0===o?void 0:o.getAttribute("aria-expanded")))r.moveFocus(e,t,"next");else{const e=null===(n=t.previousElementSibling)||void 0===n?void 0:n.firstElementChild;e instanceof HTMLElement&&e.click()}}static collapseItemOrFocusParent(e,t){var o,n,i,s;if("true"===(null===(o=null==t?void 0:t.parentElement)||void 0===o?void 0:o.getAttribute("aria-expanded"))){const e=null===(n=t.previousElementSibling)||void 0===n?void 0:n.firstElementChild;e instanceof HTMLElement&&e.click()}else{const o=null===(s=null===(i=null==t?void 0:t.parentElement)||void 0===i?void 0:i.parentElement)||void 0===s?void 0:s.previousElementSibling;o instanceof HTMLElement&&r.setFocus(e,o)}}static setFocusByFirstCharacter(e,t,o,n){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));n&&i.reverse();const s=i.indexOf(t);o=o.toLowerCase();let a=i.find(((e,t)=>{var n;return t>s&&(null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase().startsWith(o))}));return a||(a=i.find(((e,t)=>{var n;return t<s&&(null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase().startsWith(o))}))),!!a&&(r.setFocus(e,a),!0)}render(){var t;return e("div",{id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e)},e("ul",{role:"tree","aria-label":"Objectenboom"},null===(t=this.collection)||void 0===t?void 0:t.map(((t,o)=>e(i,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}};r.style=":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content a,:host .tree-content a:visited{color:#39870c;text-decoration:none}:host .tree-content a:hover,:host .tree-content a:focus{color:#676cb0;text-decoration:underline}:host .tree-content a:active{text-decoration:none}:host .tree-content dso-icon{vertical-align:text-bottom;font-size:0.75em;margin-left:0.5em}*,*::after,*::before{box-sizing:border-box}";export{r as dso_tree_view}

package/dist/dso-toolkit/p-453e2c6f.entry.js

@@ -1 +0,0 @@
-import{r as c,c as o,h as t}from"./p-a40eeb32.js";import{c as i}from"./p-4070c1e5.js";let e=class{constructor(t){c(this,t),this.toggle=o(this,"toggle",7),this.label="Toelichting bij optie"}handleToggle(c){this.active=!this.active,this.toggle.emit({originalEvent:c,active:this.active})}render(){return t("button",{type:"button",class:i("btn",{"dso-open":!!this.active}),"aria-expanded":"boolean"==typeof this.active?this.active.toString():void 0,onClick:c=>this.handleToggle(c)},t("span",{class:"sr-only"},this.label))}};e.style=":host{display:inline-block;--di-info:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-active:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\")}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{background:var(--dso-icon, var(--di-info)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;border:1px solid transparent;margin-left:8px;padding:0}button.dso-open,button:hover,button:active{--dso-icon:var(--di-info-active)}";export{e as dso_info_button}