@dso-toolkit/core 54.2.0 → 54.3.0

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

@@ -1,9 +1,18 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { DsoCardClickedEvent, ImageShape } from "./card.interfaces";
 export declare class Card implements ComponentInterface {
-  host: HTMLElement;
+  host: HTMLDsoCardElement;
+  /**
+   * Do not use, this is set programmatically by the component.
+   */
   isSelectable: boolean;
+  /**
+   * Do not use, this is set programmatically by the component.
+   */
   hasImage: boolean;
+  /**
+   * Whether or not the Card is clickable.
+   */
   clickable: boolean;
   /**
    * Presentation of image in header.
@@ -11,6 +20,9 @@ export declare class Card implements ComponentInterface {
    *  - "wide" ("30 x 26")
    */
   imageShape: ImageShape;
+  /**
+   * Emitted when the Card is clickable and the user clicked the Card.
+   */
   dsoCardClicked: EventEmitter<DsoCardClickedEvent>;
   private clickEventHandler;
   componentWillLoad(): void;

package/dist/types/components/card/card.interfaces.d.ts

@@ -3,4 +3,4 @@ export interface DsoCardClickedEvent {
   /** True when user clicked the card while holding Ctrl, Alt or other modifiers, or when the card is right-clicked. Can be used to determine navigation. */
   isModifiedEvent: boolean;
 }
-export declare type ImageShape = "normal" | "wide";
+export type ImageShape = "normal" | "wide";

package/dist/types/components/card-container/card-container.d.ts

@@ -1,6 +1,9 @@
 import { ComponentInterface } from "../../stencil-public-runtime";
 import { CardContainerMode } from "./card-container.interfaces";
 export declare class CardContainer implements ComponentInterface {
+  /**
+   * The mode of the Card Container.
+   */
   mode: CardContainerMode;
   render(): any;
 }

package/dist/types/components/card-container/card-container.interfaces.d.ts

@@ -1 +1 @@
-export declare type CardContainerMode = "list" | "grid";
+export type CardContainerMode = "list" | "grid";

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

@@ -1,6 +1,6 @@
-declare type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string];
-declare type DayNames = [string, string, string, string, string, string, string];
-export declare type DsoLocalizedText = {
+type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string];
+type DayNames = [string, string, string, string, string, string, string];
+export type DsoLocalizedText = {
   buttonLabel: string;
   placeholder: string;
   selectedDateMessage: string;

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

@@ -1,5 +1,5 @@
 import { FunctionalComponent } from "../../stencil-public-runtime";
-export declare type DatePickerDayProps = {
+export type DatePickerDayProps = {
   focusedDay: Date;
   today: Date;
   day: Date;

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

@@ -2,7 +2,7 @@ import { FunctionalComponent } from "../../stencil-public-runtime";
 import { DsoLocalizedText } from "./date-localization";
 import { DatePickerDayProps } from "./date-picker-day";
 import { DaysOfWeek } from "./date-utils";
-declare type DatePickerMonthProps = {
+type DatePickerMonthProps = {
   selectedDate: Date | undefined;
   focusedDate: Date;
   labelledById: string;

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

@@ -22,7 +22,7 @@ export declare class DsoDatePicker implements ComponentInterface {
   /**
    * Reference to host HTML element.
    */
-  element: HTMLElement;
+  element: HTMLDsoDatePickerElement;
   /**
    * State() variables
    */
@@ -64,6 +64,10 @@ export declare class DsoDatePicker implements ComponentInterface {
    * Is input invalid?
    */
   invalid?: boolean;
+  /**
+   * ID of element that describes the input element
+   */
+  describedBy?: string;
   /**
    * Should the input be focused on load?
    */

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

@@ -1,14 +1,14 @@
-export declare type DsoDatePickerChangeEvent = {
+export type DsoDatePickerChangeEvent = {
   component: "dso-date-picker";
   valueAsDate: Date | undefined;
   value: string;
   error?: "invalid" | "required" | "min-range" | "max-range";
 };
-export declare type DsoDatePickerFocusEvent = {
+export type DsoDatePickerFocusEvent = {
   component: "dso-date-picker";
 };
-export declare type DsoDatePickerKeyboardEvent = {
+export type DsoDatePickerKeyboardEvent = {
   component: "dso-date-picker";
   originalEvent: KeyboardEvent;
 };
-export declare type DsoDatePickerDirection = "left" | "right";
+export type DsoDatePickerDirection = "left" | "right";

package/dist/types/components/dropdown-menu/dropdown-menu.d.ts

@@ -17,7 +17,9 @@ export declare class DropdownMenu {
    * Whether the menu is checkable.
    */
   checkable: boolean;
-  /** Selector for the element the dropdown options should not be overflowing.*/
+  /**
+   * Selector for the element the dropdown options should not be overflowing.
+   */
   boundary?: string;
   /**
    * Set position strategy of dropdown options
@@ -26,18 +28,18 @@ export declare class DropdownMenu {
   watchPosition(): void;
   watchOptionsOffset(): void;
   watchStrategy(): void;
-  setStrategy(): void;
-  host: HTMLElement;
+  private setStrategy;
+  host: HTMLDsoDropdownMenuElement;
   private popper;
   get button(): HTMLButtonElement;
   get tabbables(): FocusableElement[];
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
-  focusOutListener: (event: FocusEvent) => void;
-  keyDownListener: (event: KeyboardEvent) => void;
-  getActiveElement(root?: Document | ShadowRoot): Element | null;
-  tabInPopup(direction: number): void;
-  escape: () => void;
+  private focusOutListener;
+  private keyDownListener;
+  private getActiveElement;
+  private tabInPopup;
+  private escape;
   render(): any;
 }

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

@@ -1,25 +1,40 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { AnimeInstance } from "animejs";
-import { ExpandableInterface, ExpandableToggleEvent } from "./expandable.interfaces";
-export declare class Expandable implements ComponentInterface, ExpandableInterface {
+export declare class Expandable implements ComponentInterface {
   private resizeObserver?;
   private bodyHeight?;
   private animeInstance?;
-  host: HTMLElement;
+  host: HTMLDsoExpandableElement;
+  /**
+   * Set to `true` to expand the content.
+   */
   open?: boolean;
+  /**
+   * Set to `true` to show the content animated.
+   */
   enableAnimation: boolean;
-  /** When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to */
+  /**
+   * When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to
+   */
   minimumHeight?: number;
   animationReady: boolean;
-  dsoToggle: EventEmitter<ExpandableToggleEvent>;
-  animationInstantiated: EventEmitter<void>;
+  /**
+   * @internal
+   */
+  _animationInstantiated: EventEmitter<void>;
   toggleOpen(): void;
   toggleEnableAnimation(enableAnimation: boolean): void;
-  getAnimeInstance(): Promise<AnimeInstance | undefined>;
-  getBodyHeight(): Promise<number | undefined>;
+  /**
+   * @internal
+   */
+  _getAnimeInstance(): Promise<AnimeInstance | undefined>;
+  /**
+   * @internal
+   */
+  _getBodyHeight(): Promise<number | undefined>;
   componentWillLoad(): void;
   componentDidLoad(): void;
-  activateObserver(): void;
+  private activateObserver;
   disconnectedCallback(): void;
   render(): any;
   private prepareAnimationResizeObserver;

package/dist/types/components/expandable/expandable.functions.d.ts

@@ -0,0 +1 @@
+export declare function isExpandable(element: Element | null): element is HTMLDsoExpandableElement;

package/dist/types/components/expandable-heading/expandable-heading.d.ts

@@ -1,12 +1,33 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { EditAction, ExpandableHeadingToggleEvent, HeadingTags } from "./expandable-heading.interfaces";
 export declare class ExpandableHeading {
+  /**
+   * To open the Expandable Heading.
+   */
   open?: boolean;
+  /**
+   * Which heading element to use.
+   */
   heading: HeadingTags;
+  /**
+   * The color.
+   */
   color: "default" | "black";
+  /**
+   * Marks this element as unavailable.
+   */
+  suppressed: boolean;
+  /**
+   * Whether this Expandable Heading has an edit action.
+   *
+   * Also known as "wijzigactie" in STOP.
+   */
   editAction?: EditAction;
+  /**
+   * Emitted when the user activates the toggle button.
+   */
   dsoToggle: EventEmitter<ExpandableHeadingToggleEvent>;
-  identifier: string;
-  toggle(e: MouseEvent | KeyboardEvent): void;
+  private identifier;
+  private toggle;
   render(): any;
 }

package/dist/types/components/expandable-heading/expandable-heading.interfaces.d.ts

@@ -1,6 +1,6 @@
-export declare type HeadingTags = "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingTags = "h2" | "h3" | "h4" | "h5" | "h6";
 export interface ExpandableHeadingToggleEvent {
   originalEvent?: MouseEvent | KeyboardEvent;
   open: boolean;
 }
-export declare type EditAction = "delete" | "insert";
+export type EditAction = "delete" | "insert";

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

@@ -3,17 +3,43 @@ import { HeaderMenuItem, HeaderEvent } from "./header.interfaces";
 export declare class Header {
   private clickHandler;
   private dropdownElement?;
-  host: HTMLElement;
+  host: HTMLDsoHeaderElement;
+  /**
+   * The main menu items.
+   */
   mainMenu?: HeaderMenuItem[];
+  /**
+   * Either have the dropdown menu appear automatically or always.
+   */
   useDropDownMenu: "always" | "auto";
-  /** Used to show the login/logout option. 'none' renders nothing. */
+  /**
+   * Used to show the login/logout option. 'none' renders nothing.
+   */
   authStatus: "none" | "loggedIn" | "loggedOut";
-  /** When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor. */
+  /**
+   * When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.
+   */
   loginUrl?: string;
+  /**
+   * The URL to open when the user activates "logout".
+   */
   logoutUrl?: string;
+  /**
+   * The name to show when the user is logged in.
+   */
   userProfileName?: string;
+  /**
+   * The URL to open when the user activates the profile url.
+   */
   userProfileUrl?: string;
+  /**
+   * The URL to open when the user activates "Mijn Omgevingsloket".
+   */
   userHomeUrl?: string;
+  /**
+   * Set this to true when the user is at "Mijn Omgevingsloket".
+   */
+  userHomeActive?: boolean;
   showDropDown?: boolean;
   hasSubLogo: boolean;
   overflowMenuItems: number;
@@ -25,22 +51,18 @@ export declare class Header {
    */
   dsoHeaderClick: EventEmitter<HeaderEvent>;
   setShowDropDown(value: "always" | "auto"): void;
-  wrapper: HTMLDivElement | undefined;
-  nav: HTMLUListElement | undefined;
+  private wrapper;
+  private nav;
   componentWillLoad(): void;
-  shrinkMenuToFit(): void;
+  private shrinkMenuToFit;
   componentDidRender(): void;
   componentDidLoad(): void;
-  setOverflowMenu(): void;
-  setDropDownMenu(): void;
+  private setOverflowMenu;
+  private setDropDownMenu;
   private calculateDropdownOptionsOffset;
-  onWindowResize: (() => void) & {
-    clear(): void;
-  } & {
-    flush(): void;
-  };
+  private onWindowResize;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  MenuItem: (item: HeaderMenuItem) => any;
+  private MenuItem;
   render(): any;
 }

package/dist/types/components/header/header.interfaces.d.ts

@@ -3,7 +3,7 @@ export interface HeaderMenuItem {
   url: string;
   active?: boolean;
 }
-export declare type HeaderNavigationType = "menuItem" | "profile" | "logout" | "login" | "userHome";
+export type HeaderNavigationType = "menuItem" | "profile" | "logout" | "login" | "userHome";
 export interface HeaderClickEvent {
   originalEvent: MouseEvent;
   type: HeaderNavigationType;
@@ -15,4 +15,4 @@ export interface HeaderClickEvent {
 export interface HeaderClickMenuItemEvent extends HeaderClickEvent {
   menuItem: HeaderMenuItem;
 }
-export declare type HeaderEvent = HeaderClickEvent | HeaderClickMenuItemEvent;
+export type HeaderEvent = HeaderClickEvent | HeaderClickMenuItemEvent;

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

@@ -5,7 +5,13 @@ export declare class HelpcenterPanel {
   private openButtonElement?;
   private closeButtonElement?;
   private iframeLoaded;
-  label?: string;
+  /**
+   * The label on the help button that activates the Helpcenter.
+   */
+  label: string;
+  /**
+   * The URL that's loaded when the Helpcenter opens.
+   */
   url: string;
   visibility: "visible" | "hidden";
   isOpen: "open" | "close";
@@ -14,9 +20,9 @@ export declare class HelpcenterPanel {
   watchUrl(url: string): void;
   watchIsOpen(isOpen: "open" | "close"): void;
   keyDownListener(event: KeyboardEvent): void;
-  createTrap(): void;
-  openClick: () => void;
-  closeClick: () => void;
+  private createTrap;
+  private openClick;
+  private closeClick;
   componentDidRender(): void;
   render(): any;
 }

package/dist/types/components/highlight-box/highlight-box.d.ts

@@ -1,8 +1,23 @@
 export declare class HighlightBox {
+  /**
+   * For yellow Highlight Box.
+   */
   yellow?: boolean;
+  /**
+   * For a bordered Highlight Box.
+   */
   border?: boolean;
+  /**
+   * For a while Highlight Box.
+   */
   white?: boolean;
+  /**
+   * For an Highlight Box with a drop shadow.
+   */
   dropShadow?: boolean;
+  /**
+   * To create a step indicator.
+   */
   step?: number;
   private element;
   render(): any;

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

@@ -1,4 +1,7 @@
 export declare class Icon {
+  /**
+   * The alias of the icon.
+   */
   icon?: string;
   render(): any;
 }

package/dist/types/components/image-overlay/image-overlay.d.ts

@@ -1,22 +1,21 @@
 import { ComponentInterface } from "../../stencil-public-runtime";
-import { FocusTrap } from "focus-trap";
 export declare class ImageOverlay implements ComponentInterface {
-  host: HTMLElement;
+  host: HTMLDsoImageOverlayElement;
   active: boolean;
   zoomable: boolean;
-  buttonElement: HTMLButtonElement | undefined;
-  wrapperElement: HTMLDivElement | undefined;
-  trap: FocusTrap | undefined;
-  titelSlot: HTMLElement | null;
-  bijschriftSlot: HTMLElement | null;
+  private buttonElement;
+  private wrapperElement;
+  private trap;
+  private titelSlot;
+  private bijschriftSlot;
   private mutationObserver?;
   private resizeObserver?;
   loadListener(event: Event): void;
   connectedCallback(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  initZoomableImage(): void;
-  setZoomable(imageElement: HTMLImageElement): void;
+  private initZoomableImage;
+  private setZoomable;
   render(): any;
   componentDidRender(): void;
 }

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

@@ -1,7 +1,16 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 export declare class Info {
+  /**
+   * Set to true if the Info should not be toggled and always visible.
+   */
   fixed?: boolean;
+  /**
+   * Whether the Info is active.
+   */
   active?: boolean;
+  /**
+   * Emitted when the user activates the close button.
+   */
   dsoClose: EventEmitter<MouseEvent>;
   render(): any;
 }

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

@@ -2,11 +2,26 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { InfoButtonToggleEvent } from "./info-button.interfaces";
 export declare class InfoButton {
   private button?;
+  /**
+   * Whether the InfoButton is active.
+   */
   active?: boolean;
   hover: boolean;
+  /**
+   * For secondary Info Button.
+   */
   secondary?: boolean;
+  /**
+   * The label.
+   */
   label: string;
+  /**
+   * Emitted when the user activates the Info Button.
+   */
   dsoToggle: EventEmitter<InfoButtonToggleEvent>;
+  /**
+   * To set focus to the toggle button.
+   */
   setFocus(): Promise<void>;
   private handleToggle;
   render(): any;

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

@@ -4,28 +4,45 @@ export declare class Label implements ComponentInterface {
   private keydownListenerActive;
   private mutationObserver?;
   private host;
+  /**
+   * For compact Label
+   */
   compact?: boolean;
+  /**
+   * Shows a button that can be used to remove the Label.
+   */
   removable?: boolean;
+  /**
+   * The status of this Label.
+   */
   status?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright" | "attention";
   removeHover?: boolean;
   removeFocus?: boolean;
+  /**
+   * Whether the Label is allowed to truncate the contents if it does not fit the container element.
+   */
   truncate?: boolean;
   textHover?: boolean;
   textFocus?: boolean;
   isTruncated?: boolean;
   labelText: string | null;
+  /**
+   * Emitted when the user activates the remove button.
+   */
   dsoRemoveClick: EventEmitter<MouseEvent>;
   watchTruncate(truncate: boolean): void;
   watchTooltipActive(): void;
-  truncateLabel(): Promise<void>;
-  /** **[Internal]** Synchronizes the text on the remove button and tooltip. You should never have to use this. */
-  syncLabelText(): Promise<void>;
+  /**
+   * @internal
+   */
+  _truncateLabel(): Promise<void>;
+  private syncLabelText;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
-  startMutationObserver(): void;
-  startTruncate(): void;
-  stopTruncate(): void;
-  keyDownListener: (event: KeyboardEvent) => void;
+  private startMutationObserver;
+  private startTruncate;
+  private stopTruncate;
+  private keyDownListener;
   render(): any;
 }

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

@@ -5,13 +5,33 @@ export declare class ListButton implements ComponentInterface {
   private manualInputWrapperElement?;
   private manualInputButtonElement?;
   manualCount?: number;
+  /**
+   * The label of the List Button.
+   */
   label?: string;
+  /**
+   * The sublabel of the List Button.
+   */
   sublabel?: string;
-  /** When defined the count can show on the list-button. */
+  /**
+   * When defined the count can show on the List Button.
+   */
   count?: number;
+  /**
+   * The minimum value.
+   */
   min?: string | number;
+  /**
+   * The maximum value.
+   */
   max?: string | number;
+  /**
+   * Whether the List Button is checked.
+   */
   checked: boolean;
+  /**
+   * Whether the List Button is disabled.
+   */
   disabled: boolean;
   /**
    * Allow user to directly input a value.
@@ -19,7 +39,15 @@ export declare class ListButton implements ComponentInterface {
    * Set to `false` to force users to use plus/minus buttons.
    */
   manual: boolean;
+  /**
+   * Emitted when the user changes the count.
+   */
   dsoCountChange: EventEmitter<ListButtonChangeEvent>;
+  /**
+   * Emitted when the user activates the List Button itself.
+   *
+   * Does not fire when the user activates the count controls.
+   */
   dsoSelectedChange: EventEmitter<ListButtonSelectedEvent>;
   watchManualCallback(): void;
   componentDidRender(): void;

package/dist/types/components/map-base-layers/map-base-layers.d.ts

@@ -1,14 +1,21 @@
 import { EventEmitter, ComponentInterface } from "../../stencil-public-runtime";
 import { BaseLayer, BaseLayerChangeEvent } from "./map-base-layers.interfaces";
 export declare class MapBaseLayers implements ComponentInterface {
-  previousBaselayers: BaseLayer[] | undefined;
-  selectableRefs: {
-    [id: number]: HTMLDsoSelectableElement;
-  };
+  private previousBaselayers;
+  private selectableRefs;
+  /**
+   * Emitted when the user checks or unchecks a base layer.
+   */
   dsoBaseLayerChange: EventEmitter<BaseLayerChangeEvent>;
+  /**
+   * To group the overlays together. Generally the default value suffices.
+   */
   group: string;
+  /**
+   * The base layers.
+   */
   baseLayers: BaseLayer[];
-  baseLayerChangeHandler(baseLayer: BaseLayer): void;
+  private baseLayerChangeHandler;
   componentDidRender(): void;
   render(): any;
 }

package/dist/types/components/map-controls/map-controls.d.ts

@@ -3,9 +3,25 @@ import { MapControlsToggleEvent } from "./map-controls.interfaces";
 export declare class MapControls {
   #private;
   private panelTitle;
+  /**
+   * To show and hide the Map Controls.
+   */
   open: boolean;
+  /**
+   * To disable the zoom controls:
+   *
+   * * `in`: Disable zoom in button.
+   * * `out`: Disable zoom out button.
+   * * `both`: Disable zoom in and zoom out.
+   */
   disableZoom?: "in" | "out" | "both";
+  /**
+   * Emitted when the user activates the zoom in button.
+   */
   dsoZoomIn: EventEmitter<MouseEvent>;
+  /**
+   * Emitted when the user activates the zoom out button.
+   */
   dsoZoomOut: EventEmitter<MouseEvent>;
   /**
    * emits when the panel opens or closes.
@@ -16,6 +32,12 @@ export declare class MapControls {
   dsoToggle: EventEmitter<MapControlsToggleEvent>;
   hideContent: boolean;
   watchOpen(open: boolean): void;
+  /**
+   * Emitted when the visibility is toggled.
+   *
+   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.
+   * @param e
+   */
   toggleVisibility(e: MouseEvent | KeyboardEvent): Promise<void>;
   render(): any;
 }

package/dist/types/components/map-controls/map-controls.interfaces.d.ts

@@ -1,4 +1,3 @@
-export declare const transitionDuration = 300;
 export interface MapControlsToggleEvent {
   originalEvent?: MouseEvent | KeyboardEvent;
   open: boolean;