@dso-toolkit/core 59.0.1 → 61.0.0

package/dist/types/components/viewer-grid/viewer-grid.d.ts

@@ -1,9 +1,20 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { MainSize, Tabs, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./viewer-grid.interfaces";
+import { ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridActiveTabSwitchEvent, ViewerGridMode } from "./viewer-grid.interfaces";
+/**
+ * @slot main
+ * @slot map
+ * @slot filterpanel
+ * @slot overlay
+ * @slot document-panel - VDK only
+ * @slot main-expanded - VDK only
+ */
 export declare class ViewerGrid {
   private mediaCondition;
-  private tabLabelMap;
-  private mainPanel?;
+  private mapElement?;
+  /**
+   * VRK or VDK implementation.
+   */
+  mode: ViewerGridMode;
   /**
    * Set to true when filterpanel should show.
    */
@@ -13,14 +24,33 @@ export declare class ViewerGrid {
    */
   overlayOpen: boolean;
   /**
-   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
+   * **VDK only.** Set to true when document panel should show.
+   */
+  documentPanelOpen: boolean;
+  /**
+   * Size of the panel when component loads.
    *
    * Default size is `large`.
    */
-  initialMainSize?: MainSize;
-  mainSize: MainSize;
-  tabView: boolean;
-  activeTab: Tabs;
+  mainSize: ViewerGridPanelSize;
+  /**
+   * Set active tab in tab view.
+   */
+  activeTab?: ViewerGridVdkTab | ViewerGridVrkTab;
+  /**
+   * **VDK only.** Size of the panel when component loads.
+   *
+   * Default size is `large`.
+   */
+  documentPanelSize: ViewerGridPanelSize;
+  /**
+   * **VDK only.** Set to show main panel expanded.
+   */
+  mainPanelExpanded: boolean;
+  /**
+   * **VDK only.** Set to hide the main panel.
+   */
+  mainPanelHidden: boolean;
   /**
    * Emitted when user wants to close the overlay.
    */
@@ -34,25 +64,60 @@ export declare class ViewerGrid {
    */
   dsoFilterpanelApply: EventEmitter<ViewerGridFilterpanelApplyEvent>;
   /**
-   * Emitted before and after main size animation. Inspect `detail` property for more information.
+   * Emitted when user applies filterpanel options.
+   */
+  dsoActiveTabSwitch: EventEmitter<ViewerGridActiveTabSwitchEvent>;
+  /**
+   * Emitted on interaction with sizing buttons.
    */
   dsoMainSizeChange: EventEmitter<ViewerGridChangeSizeEvent>;
+  /**
+   * Emitted after main size animation.
+   */
+  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;
+  /**
+   * **VDK only.** Emitted on interaction with sizing buttons.
+   */
+  dsoDocumentPanelSizeChange: EventEmitter<ViewerGridChangeSizeEvent>;
+  /**
+   * **VDK only.** Emitted after main size animation.
+   */
+  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;
+  /**
+   * **VDK only.** Emitted when the user wants to expand the main panel.
+   */
+  dsoMainPanelExpand: EventEmitter<ViewerGridMainExpandEvent>;
+  /**
+   * **VDK only.** Emitted when the user toggles the visibility of the main panel.
+   *
+   * Also emitted by scripting when the panels do not fit anymore.
+   */
+  dsoMainPanelToggle: EventEmitter<ViewerGridMainToggleEvent>;
   host: HTMLDsoViewerGridElement;
+  tabView: boolean;
   private filterpanel;
-  private filterpanelSlot;
+  private get filterpanelSlot();
+  private get overlaySlot();
   private overlay;
-  private overlaySlot;
-  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize): void;
+  documentPanelOpenWatcher(open: boolean): void;
   filterpanelOpenWatcher(open: boolean): void;
   overlayOpenWatcher(open: boolean): void;
-  private shrinkMain;
-  private expandMain;
+  /**
+   * @internal
+   */
+  _checkMainPanelVisibility(): Promise<void>;
+  private switchActiveTab;
+  private emitShrinkMain;
+  private emitExpandMain;
+  private shrinkDocumentPanel;
+  private expandDocumentPanel;
+  private expandContent;
+  private toggleMainPanel;
   private changeListener;
+  private handleFilterpanelApply;
+  private handleFilterpanelCancel;
   connectedCallback(): void;
   componentDidLoad(): void;
-  componentWillLoad(): void;
   disconnectedCallback(): void;
-  private handleFilterpanelApply;
-  private handleFilterpanelCancel;
   render(): any;
 }

package/dist/types/components/viewer-grid/viewer-grid.interfaces.d.ts

@@ -1,10 +1,9 @@
 export interface ViewerGridChangeSizeEvent {
-  /**
-   * Indicates whether it's before or after the animation
-   */
-  stage: "start" | "end";
-  previousSize: MainSize;
-  currentSize: MainSize;
+  currentSize: ViewerGridPanelSize;
+  nextSize: ViewerGridPanelSize;
+}
+export interface ViewerGridChangeSizeAnimationEndEvent {
+  currentSize: ViewerGridPanelSize;
 }
 export interface ViewerGridCloseOverlayEvent {
   originalEvent: MouseEvent | Event;
@@ -15,12 +14,27 @@ export interface ViewerGridFilterpanelCancelEvent {
 export interface ViewerGridFilterpanelApplyEvent {
   originalEvent: MouseEvent | Event;
 }
-export type MainSize = "small" | "medium" | "large";
-export type LabelSizeMap = {
-  [key in MainSize]: string;
+export interface ViewerGridActiveTabSwitchEvent {
+  tab: ViewerGridTab;
+}
+export interface ViewerGridMainExpandEvent {
+  expand: boolean;
+}
+export interface ViewerGridMainToggleEvent {
+  hide: boolean;
+}
+export type ViewerGridMode = "vdk" | "vrk";
+export type ViewerGridPanelSize = "small" | "medium" | "large";
+export type ViewerGridLabelSizeMap = {
+  [key in ViewerGridPanelSize]: string;
 };
-export declare const tabs: readonly ["main", "map"];
-export type Tabs = (typeof tabs)[number];
-export type TabLabelMap = {
-  [key in Tabs]: string;
+export declare const viewerGridVrkTabs: readonly ["main", "map"];
+export type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];
+export declare const viewerGridVdkTabs: readonly ["search", "map", "document"];
+export type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];
+export type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;
+export type ViewerGridTabLabelMap = {
+  [key in ViewerGridTab]: string;
 };
+export declare const viewerGridTabLabelMap: ViewerGridTabLabelMap;
+export declare const viewerGridSizeLabelMap: ViewerGridLabelSizeMap;

package/dist/types/components.d.ts

@@ -12,7 +12,7 @@ import { AnnotationOutputCloseEvent } from "./components/annotation-output/annot
 import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
 import { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfaces";
 import { CardContainerMode } from "./components/card-container/card-container.interfaces";
-import { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
+import { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
 import { DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
 import { Placement } from "@popperjs/core";
 import { ExpandableAnimationEndEvent } from "./components/expandable/expandable";
@@ -30,7 +30,7 @@ import { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces
 import { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
 import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
-import { MainSize, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./components/viewer-grid/viewer-grid.interfaces";
+import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
 export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
 export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
 export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
@@ -38,7 +38,7 @@ export { AnnotationOutputCloseEvent } from "./components/annotation-output/annot
 export { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
 export { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfaces";
 export { CardContainerMode } from "./components/card-container/card-container.interfaces";
-export { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
+export { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
 export { DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
 export { Placement } from "@popperjs/core";
 export { ExpandableAnimationEndEvent } from "./components/expandable/expandable";
@@ -56,7 +56,7 @@ export { DsoScrollEndEvent } from "./components/scrollable/scrollable.interfaces
 export { SelectableChangeEvent } from "./components/selectable/selectable.interfaces";
 export { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 export { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
-export { MainSize, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./components/viewer-grid/viewer-grid.interfaces";
+export { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
 export namespace Components {
     interface DsoAccordion {
         "_getState": () => Promise<AccordionInternalState>;
@@ -246,10 +246,6 @@ export namespace Components {
           * ID of element that describes the input element
          */
         "describedBy"?: string;
-        /**
-          * Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.
-         */
-        "direction": DsoDatePickerDirection;
         /**
           * 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.
          */
@@ -258,10 +254,6 @@ export namespace Components {
           * 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.
-         */
-        "hide": (moveFocusToButton?: boolean) => Promise<void>;
         /**
           * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.
          */
@@ -286,18 +278,6 @@ export namespace Components {
           * Should the input be marked as required?
          */
         "required": boolean;
-        /**
-          * Defines a specific role attribute for the date picker input.
-         */
-        "role": string | null;
-        /**
-          * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
-         */
-        "setFocus": () => Promise<void | undefined>;
-        /**
-          * Show the calendar modal, moving focus to the calendar inside.
-         */
-        "show": () => Promise<void>;
         /**
           * Date value. Must be in Dutch date format: DD-MM-YYYY.
          */
@@ -576,6 +556,16 @@ export namespace Components {
          */
         "sublabel"?: string;
     }
+    interface DsoLogo {
+        /**
+          * The label clarifies the service within the Omgevingsloket, shown as a subtitle (and on smaller screens as the main wordmark itself).
+         */
+        "label"?: string;
+        /**
+          * The ribbon contains the text for a possible 'sticker' on top of the logo. Used to clarify status of the page, like 'beta'.
+         */
+        "ribbon"?: string;
+    }
     interface DsoMapBaseLayers {
         /**
           * The base layers.
@@ -846,14 +836,39 @@ export namespace Components {
         "focusItem": (path: TreeViewItem[]) => Promise<boolean>;
     }
     interface DsoViewerGrid {
+        "_checkMainPanelVisibility": () => Promise<void>;
+        /**
+          * Set active tab in tab view.
+         */
+        "activeTab"?: ViewerGridVdkTab | ViewerGridVrkTab;
+        /**
+          * **VDK only.** Set to true when document panel should show.
+         */
+        "documentPanelOpen": boolean;
+        /**
+          * **VDK only.** Size of the panel when component loads.  Default size is `large`.
+         */
+        "documentPanelSize": ViewerGridPanelSize;
         /**
           * Set to true when filterpanel should show.
          */
         "filterpanelOpen": boolean;
         /**
-          * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.  Default size is `large`.
+          * **VDK only.** Set to show main panel expanded.
+         */
+        "mainPanelExpanded": boolean;
+        /**
+          * **VDK only.** Set to hide the main panel.
          */
-        "initialMainSize"?: MainSize;
+        "mainPanelHidden": boolean;
+        /**
+          * Size of the panel when component loads.  Default size is `large`.
+         */
+        "mainSize": ViewerGridPanelSize;
+        /**
+          * VRK or VDK implementation.
+         */
+        "mode": ViewerGridMode;
         /**
           * Set to true when overlay should show.
          */
@@ -1135,6 +1150,12 @@ declare global {
         prototype: HTMLDsoListButtonElement;
         new (): HTMLDsoListButtonElement;
     };
+    interface HTMLDsoLogoElement extends Components.DsoLogo, HTMLStencilElement {
+    }
+    var HTMLDsoLogoElement: {
+        prototype: HTMLDsoLogoElement;
+        new (): HTMLDsoLogoElement;
+    };
     interface HTMLDsoMapBaseLayersElement extends Components.DsoMapBaseLayers, HTMLStencilElement {
     }
     var HTMLDsoMapBaseLayersElement: {
@@ -1270,6 +1291,7 @@ declare global {
         "dso-info-button": HTMLDsoInfoButtonElement;
         "dso-label": HTMLDsoLabelElement;
         "dso-list-button": HTMLDsoListButtonElement;
+        "dso-logo": HTMLDsoLogoElement;
         "dso-map-base-layers": HTMLDsoMapBaseLayersElement;
         "dso-map-controls": HTMLDsoMapControlsElement;
         "dso-map-overlays": HTMLDsoMapOverlaysElement;
@@ -1510,10 +1532,6 @@ declare namespace LocalJSX {
           * ID of element that describes the input element
          */
         "describedBy"?: string;
-        /**
-          * Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.
-         */
-        "direction"?: DsoDatePickerDirection;
         /**
           * 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.
          */
@@ -1545,31 +1563,27 @@ declare namespace LocalJSX {
         /**
           * Event emitted the date picker input is blurred.
          */
-        "onDsoBlur"?: (event: DsoDatePickerCustomEvent<DsoDatePickerFocusEvent>) => void;
+        "onDsoBlur"?: (event: DsoDatePickerCustomEvent<DatePickerFocusEvent>) => void;
         /**
           * Event emitted when a date is selected.
          */
-        "onDsoDateChange"?: (event: DsoDatePickerCustomEvent<DsoDatePickerChangeEvent>) => void;
+        "onDsoDateChange"?: (event: DsoDatePickerCustomEvent<DatePickerChangeEvent>) => void;
         /**
           * Event emitted the date picker input is focused.
          */
-        "onDsoFocus"?: (event: DsoDatePickerCustomEvent<DsoDatePickerFocusEvent>) => void;
+        "onDsoFocus"?: (event: DsoDatePickerCustomEvent<DatePickerFocusEvent>) => void;
         /**
           * Event emitted on key down in the date picker input.
          */
-        "onDsoKeyDown"?: (event: DsoDatePickerCustomEvent<DsoDatePickerKeyboardEvent>) => void;
+        "onDsoKeyDown"?: (event: DsoDatePickerCustomEvent<DatePickerKeyboardEvent>) => void;
         /**
           * Event emitted on key up in the date picker input.
          */
-        "onDsoKeyUp"?: (event: DsoDatePickerCustomEvent<DsoDatePickerKeyboardEvent>) => void;
+        "onDsoKeyUp"?: (event: DsoDatePickerCustomEvent<DatePickerKeyboardEvent>) => void;
         /**
           * Should the input be marked as required?
          */
         "required"?: boolean;
-        /**
-          * Defines a specific role attribute for the date picker input.
-         */
-        "role"?: string | null;
         /**
           * Date value. Must be in Dutch date format: DD-MM-YYYY.
          */
@@ -1883,6 +1897,16 @@ declare namespace LocalJSX {
          */
         "sublabel"?: string;
     }
+    interface DsoLogo {
+        /**
+          * The label clarifies the service within the Omgevingsloket, shown as a subtitle (and on smaller screens as the main wordmark itself).
+         */
+        "label"?: string;
+        /**
+          * The ribbon contains the text for a possible 'sticker' on top of the logo. Used to clarify status of the page, like 'beta'.
+         */
+        "ribbon"?: string;
+    }
     interface DsoMapBaseLayers {
         /**
           * The base layers.
@@ -2184,18 +2208,54 @@ declare namespace LocalJSX {
         "onDsoOpenItem"?: (event: DsoTreeViewCustomEvent<TreeViewItem[]>) => void;
     }
     interface DsoViewerGrid {
+        /**
+          * Set active tab in tab view.
+         */
+        "activeTab"?: ViewerGridVdkTab | ViewerGridVrkTab;
+        /**
+          * **VDK only.** Set to true when document panel should show.
+         */
+        "documentPanelOpen"?: boolean;
+        /**
+          * **VDK only.** Size of the panel when component loads.  Default size is `large`.
+         */
+        "documentPanelSize"?: ViewerGridPanelSize;
         /**
           * Set to true when filterpanel should show.
          */
         "filterpanelOpen"?: boolean;
         /**
-          * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.  Default size is `large`.
+          * **VDK only.** Set to show main panel expanded.
+         */
+        "mainPanelExpanded"?: boolean;
+        /**
+          * **VDK only.** Set to hide the main panel.
          */
-        "initialMainSize"?: MainSize;
+        "mainPanelHidden"?: boolean;
+        /**
+          * Size of the panel when component loads.  Default size is `large`.
+         */
+        "mainSize"?: ViewerGridPanelSize;
+        /**
+          * VRK or VDK implementation.
+         */
+        "mode"?: ViewerGridMode;
+        /**
+          * Emitted when user applies filterpanel options.
+         */
+        "onDsoActiveTabSwitch"?: (event: DsoViewerGridCustomEvent<ViewerGridActiveTabSwitchEvent>) => void;
         /**
           * Emitted when user wants to close the overlay.
          */
         "onDsoCloseOverlay"?: (event: DsoViewerGridCustomEvent<ViewerGridCloseOverlayEvent>) => void;
+        /**
+          * **VDK only.** Emitted on interaction with sizing buttons.
+         */
+        "onDsoDocumentPanelSizeChange"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeEvent>) => void;
+        /**
+          * **VDK only.** Emitted after main size animation.
+         */
+        "onDsoDocumentPanelSizeChangeAnimationEnd"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeAnimationEndEvent>) => void;
         /**
           * Emitted when user applies filterpanel options.
          */
@@ -2205,9 +2265,21 @@ declare namespace LocalJSX {
          */
         "onDsoFilterpanelCancel"?: (event: DsoViewerGridCustomEvent<ViewerGridFilterpanelCancelEvent>) => void;
         /**
-          * Emitted before and after main size animation. Inspect `detail` property for more information.
+          * **VDK only.** Emitted when the user wants to expand the main panel.
+         */
+        "onDsoMainPanelExpand"?: (event: DsoViewerGridCustomEvent<ViewerGridMainExpandEvent>) => void;
+        /**
+          * **VDK only.** Emitted when the user toggles the visibility of the main panel.  Also emitted by scripting when the panels do not fit anymore.
+         */
+        "onDsoMainPanelToggle"?: (event: DsoViewerGridCustomEvent<ViewerGridMainToggleEvent>) => void;
+        /**
+          * Emitted on interaction with sizing buttons.
          */
         "onDsoMainSizeChange"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeEvent>) => void;
+        /**
+          * Emitted after main size animation.
+         */
+        "onDsoMainSizeChangeAnimationEnd"?: (event: DsoViewerGridCustomEvent<ViewerGridChangeSizeAnimationEndEvent>) => void;
         /**
           * Set to true when overlay should show.
          */
@@ -2258,6 +2330,7 @@ declare namespace LocalJSX {
         "dso-info-button": DsoInfoButton;
         "dso-label": DsoLabel;
         "dso-list-button": DsoListButton;
+        "dso-logo": DsoLogo;
         "dso-map-base-layers": DsoMapBaseLayers;
         "dso-map-controls": DsoMapControls;
         "dso-map-overlays": DsoMapOverlays;
@@ -2308,6 +2381,7 @@ declare module "@stencil/core" {
             "dso-info-button": LocalJSX.DsoInfoButton & JSXBase.HTMLAttributes<HTMLDsoInfoButtonElement>;
             "dso-label": LocalJSX.DsoLabel & JSXBase.HTMLAttributes<HTMLDsoLabelElement>;
             "dso-list-button": LocalJSX.DsoListButton & JSXBase.HTMLAttributes<HTMLDsoListButtonElement>;
+            "dso-logo": LocalJSX.DsoLogo & JSXBase.HTMLAttributes<HTMLDsoLogoElement>;
             "dso-map-base-layers": LocalJSX.DsoMapBaseLayers & JSXBase.HTMLAttributes<HTMLDsoMapBaseLayersElement>;
             "dso-map-controls": LocalJSX.DsoMapControls & JSXBase.HTMLAttributes<HTMLDsoMapControlsElement>;
             "dso-map-overlays": LocalJSX.DsoMapOverlays & JSXBase.HTMLAttributes<HTMLDsoMapOverlaysElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "59.0.1",
+  "version": "61.0.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -25,7 +25,7 @@
     "@types/animejs": "^3.1.7",
     "animejs": "3.2.1",
     "clsx": "^2.0.0",
-    "dso-toolkit": "^59.0.1",
+    "dso-toolkit": "^61.0.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.5.2",
     "popper-max-size-modifier": "^0.2.0",

package/dist/cjs/create-identifier-5900c27b.js

@@ -1,19 +0,0 @@
-'use strict';
-
-/**
- * Form random hash
- */
-function chr4() {
-  return Math.random().toString(16).slice(-4);
-}
-/**
- * Create random identifier with a prefix
- * @param prefix
- */
-function createIdentifier(prefix) {
-  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
-}
-
-exports.createIdentifier = createIdentifier;
-
-//# sourceMappingURL=create-identifier-5900c27b.js.map

package/dist/cjs/create-identifier-5900c27b.js.map

@@ -1 +0,0 @@
-{"file":"create-identifier-5900c27b.js","mappings":";;AAAA;;;SAGgB,IAAI;EAClB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED;;;;SAIgB,gBAAgB,CAAC,MAAc;EAC7C,OAAO,GAAG,MAAM,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC;AAClG;;;;","names":[],"sources":["src/utils/create-identifier.ts"],"sourcesContent":["/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n  return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n"],"version":3}

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

@@ -1,30 +0,0 @@
-const localization = {
-  buttonLabel: "Kies datum",
-  placeholder: "dd-mm-jjjj",
-  selectedDateMessage: "Geselecteerde datum is",
-  prevMonthLabel: "Vorige maand",
-  nextMonthLabel: "Volgende maand",
-  monthSelectLabel: "Maand",
-  yearSelectLabel: "Jaar",
-  closeLabel: "Sluiten",
-  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"],
-};
-export default localization;
-//# sourceMappingURL=date-localization.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"date-localization.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-localization.ts"],"names":[],"mappings":"AAmBA,MAAM,YAAY,GAAqB;EACrC,WAAW,EAAE,YAAY;EACzB,WAAW,EAAE,YAAY;EACzB,mBAAmB,EAAE,wBAAwB;EAC7C,cAAc,EAAE,cAAc;EAC9B,cAAc,EAAE,gBAAgB;EAChC,gBAAgB,EAAE,OAAO;EACzB,eAAe,EAAE,MAAM;EACvB,UAAU,EAAE,SAAS;EACrB,mBAAmB,EAAE,iDAAiD;EACtE,eAAe,EAAE,gBAAgB;EACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC;EAC1F,UAAU,EAAE;IACV,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,UAAU;IACV,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;GACX;EACD,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;CACtG,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string];\r\ntype DayNames = [string, string, string, string, string, string, string];\r\n\r\nexport type DsoLocalizedText = {\r\n  buttonLabel: string;\r\n  placeholder: string;\r\n  selectedDateMessage: string;\r\n  prevMonthLabel: string;\r\n  nextMonthLabel: string;\r\n  monthSelectLabel: string;\r\n  yearSelectLabel: string;\r\n  closeLabel: string;\r\n  keyboardInstruction: string;\r\n  calendarHeading: string;\r\n  dayNames: DayNames;\r\n  monthNames: MonthsNames;\r\n  monthNamesShort: MonthsNames;\r\n};\r\n\r\nconst localization: DsoLocalizedText = {\r\n  buttonLabel: \"Kies datum\",\r\n  placeholder: \"dd-mm-jjjj\",\r\n  selectedDateMessage: \"Geselecteerde datum is\",\r\n  prevMonthLabel: \"Vorige maand\",\r\n  nextMonthLabel: \"Volgende maand\",\r\n  monthSelectLabel: \"Maand\",\r\n  yearSelectLabel: \"Jaar\",\r\n  closeLabel: \"Sluiten\",\r\n  keyboardInstruction: \"Gebruik de pijltjestoetsen om een dag te kiezen\",\r\n  calendarHeading: \"Kies een datum\",\r\n  dayNames: [\"Zondag\", \"Maandag\", \"Dinsdag\", \"Woensdag\", \"Donderdag\", \"Vrijdag\", \"Zaterdag\"],\r\n  monthNames: [\r\n    \"Januari\",\r\n    \"Februari\",\r\n    \"Maart\",\r\n    \"April\",\r\n    \"Mei\",\r\n    \"Juni\",\r\n    \"Juli\",\r\n    \"Augustus\",\r\n    \"September\",\r\n    \"Oktober\",\r\n    \"November\",\r\n    \"December\",\r\n  ],\r\n  monthNamesShort: [\"Jan\", \"Feb\", \"Mrt\", \"Apr\", \"Mei\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Okt\", \"Nov\", \"Dec\"],\r\n};\r\n\r\nexport default localization;\r\n"]}

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

@@ -1,20 +0,0 @@
-import { h } from "@stencil/core";
-import { isEqual, printDutchDate } from "./date-utils";
-export const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, }) => {
-  const isToday = isEqual(day, today);
-  const isFocused = isEqual(day, focusedDay);
-  const notCurrentMonth = day.getMonth() !== focusedDay.getMonth();
-  const isOutsideRange = !inRange;
-  function handleClick(e) {
-    onDaySelect(e, day);
-  }
-  return (h("button", { class: {
-      "dso-date__day": true,
-      "is-today": isToday,
-    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange || notCurrentMonth, type: "button", ref: (el) => {
-      if (isFocused && el && focusedDayRef) {
-        focusedDayRef(el);
-      }
-    } }, h("span", { "aria-hidden": "true" }, day.getDate()), h("span", { class: "dso-date__vhidden" }, printDutchDate(day))));
-};
-//# sourceMappingURL=date-picker-day.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"date-picker-day.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker-day.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAYvD,MAAM,CAAC,MAAM,aAAa,GAA4C,CAAC,EACrE,UAAU,EACV,KAAK,EACL,GAAG,EACH,WAAW,EACX,oBAAoB,EACpB,aAAa,EACb,OAAO,GACR,EAAE,EAAE;EACH,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;EACpC,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;EAC3C,MAAM,eAAe,GAAG,GAAG,CAAC,QAAQ,EAAE,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC;EACjE,MAAM,cAAc,GAAG,CAAC,OAAO,CAAC;EAEhC,SAAS,WAAW,CAAC,CAAa;IAChC,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;EACtB,CAAC;EAED,OAAO,CACL,cACE,KAAK,EAAE;MACL,eAAe,EAAE,IAAI;MACrB,UAAU,EAAE,OAAO;KACpB,EACD,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC5B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,oBAAoB,EAC/B,QAAQ,EAAE,cAAc,IAAI,eAAe,EAC3C,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;MACV,IAAI,SAAS,IAAI,EAAE,IAAI,aAAa,EAAE;QACpC,aAAa,CAAC,EAAE,CAAC,CAAC;OACnB;IACH,CAAC;IAED,2BAAkB,MAAM,IAAE,GAAG,CAAC,OAAO,EAAE,CAAQ;IAC/C,YAAM,KAAK,EAAC,mBAAmB,IAAE,cAAc,CAAC,GAAG,CAAC,CAAQ,CACrD,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { isEqual, printDutchDate } from \"./date-utils\";\r\n\r\nexport type DatePickerDayProps = {\r\n  focusedDay: Date;\r\n  today: Date;\r\n  day: Date;\r\n  inRange: boolean;\r\n  onDaySelect: (event: MouseEvent, day: Date) => void;\r\n  onKeyboardNavigation: (event: KeyboardEvent) => void;\r\n  focusedDayRef?: (element: HTMLButtonElement) => void;\r\n};\r\n\r\nexport const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({\r\n  focusedDay,\r\n  today,\r\n  day,\r\n  onDaySelect,\r\n  onKeyboardNavigation,\r\n  focusedDayRef,\r\n  inRange,\r\n}) => {\r\n  const isToday = isEqual(day, today);\r\n  const isFocused = isEqual(day, focusedDay);\r\n  const notCurrentMonth = day.getMonth() !== focusedDay.getMonth();\r\n  const isOutsideRange = !inRange;\r\n\r\n  function handleClick(e: MouseEvent) {\r\n    onDaySelect(e, day);\r\n  }\r\n\r\n  return (\r\n    <button\r\n      class={{\r\n        \"dso-date__day\": true,\r\n        \"is-today\": isToday,\r\n      }}\r\n      tabIndex={isFocused ? 0 : -1}\r\n      onClick={handleClick}\r\n      onKeyDown={onKeyboardNavigation}\r\n      disabled={isOutsideRange || notCurrentMonth}\r\n      type=\"button\"\r\n      ref={(el) => {\r\n        if (isFocused && el && focusedDayRef) {\r\n          focusedDayRef(el);\r\n        }\r\n      }}\r\n    >\r\n      <span aria-hidden=\"true\">{day.getDate()}</span>\r\n      <span class=\"dso-date__vhidden\">{printDutchDate(day)}</span>\r\n    </button>\r\n  );\r\n};\r\n"]}

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

@@ -1,26 +0,0 @@
-import { h } from "@stencil/core";
-import { DatePickerDay } from "./date-picker-day";
-import { getViewOfMonth, inRange, isEqual } from "./date-utils";
-function chunk(array, chunkSize) {
-  const result = [];
-  for (let i = 0; i < array.length; i += chunkSize) {
-    result.push(array.slice(i, i + chunkSize));
-  }
-  return result;
-}
-function mapWithOffset(array, startingOffset, mapFn) {
-  return array.map((_, i) => {
-    const adjustedIndex = (i + startingOffset) % array.length;
-    const item = array[adjustedIndex];
-    if (!item) {
-      throw new Error("No item found");
-    }
-    return mapFn(item);
-  });
-}
-export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, }) => {
-  const today = new Date();
-  const days = getViewOfMonth(focusedDate, firstDayOfWeek);
-  return (h("table", { class: "dso-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown }, h("thead", null, h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "dso-date__table-header", scope: "col" }, h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)), h("span", { class: "dso-date__vhidden" }, dayName)))))), h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "dso-date__row" }, week.map((day) => (h("td", { class: "dso-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? "true" : undefined, "aria-current": isEqual(day, today) ? "date" : undefined }, h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
-};
-//# sourceMappingURL=date-picker-month.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"date-picker-month.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker-month.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { DsoLocalizedText } from \"./date-localization\";\r\nimport { DatePickerDay, DatePickerDayProps } from \"./date-picker-day\";\r\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from \"./date-utils\";\r\n\r\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\r\n  const result = [];\r\n\r\n  for (let i = 0; i < array.length; i += chunkSize) {\r\n    result.push(array.slice(i, i + chunkSize));\r\n  }\r\n\r\n  return result;\r\n}\r\n\r\nfunction mapWithOffset<T, U>(array: T[], startingOffset: number, mapFn: (item: T) => U): U[] {\r\n  return array.map((_, i) => {\r\n    const adjustedIndex = (i + startingOffset) % array.length;\r\n    const item = array[adjustedIndex];\r\n    if (!item) {\r\n      throw new Error(\"No item found\");\r\n    }\r\n\r\n    return mapFn(item);\r\n  });\r\n}\r\n\r\ntype DatePickerMonthProps = {\r\n  selectedDate: Date | undefined;\r\n  focusedDate: Date;\r\n  labelledById: string;\r\n  localization: DsoLocalizedText;\r\n  firstDayOfWeek: DaysOfWeek;\r\n  min?: Date;\r\n  max?: Date;\r\n  onDateSelect: DatePickerDayProps[\"onDaySelect\"];\r\n  onKeyboardNavigation: DatePickerDayProps[\"onKeyboardNavigation\"];\r\n  focusedDayRef: (element: HTMLButtonElement) => void;\r\n  onFocusIn?: (e: FocusEvent) => void;\r\n  onMouseDown?: (e: MouseEvent) => void;\r\n};\r\n\r\nexport const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({\r\n  selectedDate,\r\n  focusedDate,\r\n  labelledById,\r\n  localization,\r\n  firstDayOfWeek,\r\n  min,\r\n  max,\r\n  onDateSelect,\r\n  onKeyboardNavigation,\r\n  focusedDayRef,\r\n  onMouseDown,\r\n  onFocusIn,\r\n}) => {\r\n  const today = new Date();\r\n  const days = getViewOfMonth(focusedDate, firstDayOfWeek);\r\n\r\n  return (\r\n    <table\r\n      class=\"dso-date__table\"\r\n      role=\"grid\"\r\n      aria-labelledby={labelledById}\r\n      onFocusin={onFocusIn}\r\n      onMouseDown={onMouseDown}\r\n    >\r\n      <thead>\r\n        <tr>\r\n          {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\r\n            <th class=\"dso-date__table-header\" scope=\"col\">\r\n              <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\r\n              <span class=\"dso-date__vhidden\">{dayName}</span>\r\n            </th>\r\n          ))}\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        {chunk(days, 7).map((week) => (\r\n          <tr class=\"dso-date__row\">\r\n            {week.map((day) => (\r\n              <td\r\n                class=\"dso-date__cell\"\r\n                role=\"gridcell\"\r\n                aria-selected={isEqual(day, selectedDate) ? \"true\" : undefined}\r\n                aria-current={isEqual(day, today) ? \"date\" : undefined}\r\n              >\r\n                <DatePickerDay\r\n                  day={day}\r\n                  today={today}\r\n                  focusedDay={focusedDate}\r\n                  inRange={inRange(day, min, max)}\r\n                  onDaySelect={onDateSelect}\r\n                  onKeyboardNavigation={onKeyboardNavigation}\r\n                  focusedDayRef={focusedDayRef}\r\n                />\r\n              </td>\r\n            ))}\r\n          </tr>\r\n        ))}\r\n      </tbody>\r\n    </table>\r\n  );\r\n};\r\n"]}