@dso-toolkit/core 62.2.2 → 62.3.0-ghi-2431.1

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

@@ -0,0 +1,172 @@
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { DsoDatePickerLegacyDirection, DsoDatePickerLegacyChangeEvent, DsoDatePickerLegacyFocusEvent, DsoDatePickerLegacyKeyboardEvent } from "./date-picker-legacy.interfaces";
+export declare class DsoDatePickerLegacy implements ComponentInterface {
+  /**
+   * Own Properties
+   */
+  private monthSelectId;
+  private yearSelectId;
+  private dialogLabelId;
+  private datePickerLegacyButton;
+  private datePickerLegacyInput;
+  private firstFocusableElement;
+  private monthSelectNode;
+  private focusedDayNode;
+  private focusTimeoutId;
+  private hideTimeoutId;
+  private initialTouchX;
+  private initialTouchY;
+  private localization;
+  private firstDayOfWeek;
+  private previousValue;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLDsoDatePickerLegacyElement;
+  /**
+   * State() variables
+   */
+  activeFocus: boolean;
+  focusedDay: Date;
+  open: boolean;
+  visible: boolean;
+  /**
+   * Public Property API
+   */
+  /**
+   * Name of the date picker input.
+   */
+  name: string;
+  /**
+   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.
+   */
+  identifier: string | undefined;
+  /**
+   * 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;
+  /**
+   * Defines a specific role attribute for the date picker input.
+   */
+  role: string | null;
+  /**
+   * 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: DsoDatePickerLegacyDirection;
+  /**
+   * Should the input be marked as required?
+   */
+  required: boolean;
+  /**
+   * Is input invalid?
+   */
+  invalid?: boolean;
+  /**
+   * ID of element that describes the input element
+   */
+  describedBy?: string;
+  /**
+   * Should the input be focused on load?
+   */
+  dsoAutofocus: boolean;
+  /**
+   * Date value. Must be in Dutch date format: DD-MM-YYYY.
+   */
+  value: string;
+  /**
+   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.
+   * This setting can be used alone or together with the max property.
+   */
+  min: string | undefined;
+  /**
+   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.
+   * This setting can be used alone or together with the min property.
+   */
+  max: string | undefined;
+  /**
+   * Events section.
+   */
+  /**
+   * Event emitted when a date is selected.
+   */
+  dsoDateChange: EventEmitter<DsoDatePickerLegacyChangeEvent>;
+  /**
+   * Event emitted the date picker input is blurred.
+   */
+  dsoBlur: EventEmitter<DsoDatePickerLegacyFocusEvent>;
+  /**
+   * Event emitted on key up in the date picker input.
+   */
+  dsoKeyUp: EventEmitter<DsoDatePickerLegacyKeyboardEvent>;
+  /**
+   * Event emitted on key down in the date picker input.
+   */
+  dsoKeyDown: EventEmitter<DsoDatePickerLegacyKeyboardEvent>;
+  /**
+   * Event emitted the date picker input is focused.
+   */
+  dsoFocus: EventEmitter<DsoDatePickerLegacyFocusEvent>;
+  /**
+   * Component event handling.
+   */
+  handleDocumentClick(e: MouseEvent): void;
+  /**
+   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+   */
+  setFocus(): Promise<void | undefined>;
+  /**
+   * Public methods API
+   */
+  /**
+   * Show the calendar modal, moving focus to the calendar inside.
+   */
+  show(): Promise<void>;
+  /**
+   * 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>;
+  /**
+   * Local methods.
+   */
+  private enableActiveFocus;
+  private disableActiveFocus;
+  private addDays;
+  private addMonths;
+  private addYears;
+  private startOfWeek;
+  private endOfWeek;
+  private setMonth;
+  private setYear;
+  private setFocusedDay;
+  private toggleOpen;
+  private handleEscKey;
+  private handleBlur;
+  private handleKeyUp;
+  private handleKeyDown;
+  private handleFocus;
+  private handleTouchStart;
+  private handleTouchMove;
+  private handleTouchEnd;
+  private handleNextMonthClick;
+  private handlePreviousMonthClick;
+  private handleFirstFocusableKeydown;
+  private handleKeyboardNavigation;
+  private handleDaySelect;
+  private handleMonthSelect;
+  private handleYearSelect;
+  private handleInputChange;
+  private setValue;
+  private prepareEvent;
+  private processFocusedDayNode;
+  componentWillLoad(): void | Promise<void>;
+  componentDidLoad(): void;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

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

@@ -0,0 +1,14 @@
+export type DsoDatePickerLegacyChangeEvent = {
+  component: "dso-date-picker-legacy";
+  valueAsDate: Date | undefined;
+  value: string;
+  error?: "invalid" | "required" | "min-range" | "max-range";
+};
+export type DsoDatePickerLegacyFocusEvent = {
+  component: "dso-date-picker-legacy";
+};
+export type DsoDatePickerLegacyKeyboardEvent = {
+  component: "dso-date-picker-legacy";
+  originalEvent: KeyboardEvent;
+};
+export type DsoDatePickerLegacyDirection = "left" | "right";

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

@@ -0,0 +1,20 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { DsoLocalizedText } from "./date-localization";
+import { DatePickerLegacyDayProps } from "./date-picker-day";
+import { DaysOfWeek } from "./date-utils";
+type DatePickerLegacyMonthProps = {
+  selectedDate: Date | undefined;
+  focusedDate: Date;
+  labelledById: string;
+  localization: DsoLocalizedText;
+  firstDayOfWeek: DaysOfWeek;
+  min?: Date;
+  max?: Date;
+  onDateSelect: DatePickerLegacyDayProps["onDaySelect"];
+  onKeyboardNavigation: DatePickerLegacyDayProps["onKeyboardNavigation"];
+  focusedDayRef: (element: HTMLButtonElement) => void;
+  onFocusIn?: (e: FocusEvent) => void;
+  onMouseDown?: (e: MouseEvent) => void;
+};
+export declare const DatePickerLegacyMonth: FunctionalComponent<DatePickerLegacyMonthProps>;
+export {};

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

@@ -0,0 +1,46 @@
+export declare enum DaysOfWeek {
+  Sunday = 0,
+  Monday = 1,
+  Tuesday = 2,
+  Wednesday = 3,
+  Thursday = 4,
+  Friday = 5,
+  Saturday = 6
+}
+export declare function createDate(year: string, month: string, day: string): Date | undefined;
+/**
+ * @param value date string in Dutch format D-M-YYYY
+ */
+export declare function parseDutchDate(value: string | undefined): Date | undefined;
+/**
+ * print date in format DD-MM-YYYY
+ * @param date
+ */
+export declare function printDutchDate(date: Date | undefined): string;
+/**
+ * Compare if two dates are equal in terms of day, month, and year
+ */
+export declare function isEqual(a: Date | undefined, b: Date | undefined): boolean;
+export declare function addDays(date: Date, days: number): Date;
+export declare function addMonths(date: Date, months: number): Date;
+export declare function addYears(date: Date, years: number): Date;
+export declare function startOfWeek(date: Date, firstDayOfWeek?: DaysOfWeek): Date;
+export declare function endOfWeek(date: Date, firstDayOfWeek?: DaysOfWeek): Date;
+export declare function startOfMonth(date: Date): Date;
+export declare function endOfMonth(date: Date): Date;
+export declare function setMonth(date: Date, month: number): Date;
+export declare function setYear(date: Date, year: number): Date;
+/**
+ * Check if date is within a min and max
+ */
+export declare function inRange(date: Date, min?: Date, max?: Date): boolean;
+/**
+ * Ensures date is within range, returns min or max if out of bounds
+ */
+export declare function clamp(date: Date, min?: Date, max?: Date): Date;
+/**
+ * given a date, return an array of dates from a calendar perspective
+ * @param date
+ * @param firstDayOfWeek
+ */
+export declare function getViewOfMonth(date: Date, firstDayOfWeek?: DaysOfWeek): Date[];

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

@@ -0,0 +1,2 @@
+import { DsoLocalizedText } from "../date-localization";
+export declare function monthRange(localization: DsoLocalizedText, selectedYear: number, minDate?: Date, maxDate?: Date): string[];

package/dist/types/components/date-picker-legacy/utils/range.d.ts

@@ -0,0 +1 @@
+export declare function range(from: number, to: number): number[];

package/dist/types/components/document-component/document-component.d.ts

@@ -1,5 +1,5 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
-import { DocumentComponentOpenToggleEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentWijzigactie, DocumentComponentInputType } from "./document-component.models";
+import { DocumentComponentOpenToggleEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent } from "./document-component.models";
 export declare class DocumentComponent implements ComponentInterface {
   /**
    * The heading element to use.
@@ -69,6 +69,10 @@ export declare class DocumentComponent implements ComponentInterface {
    * The wijzigactie as in STOP.
    */
   wijzigactie?: DocumentComponentWijzigactie;
+  /**
+   * Voor het markeren in content.
+   */
+  mark?: DocumentComponentMarkFunction;
   /**
    * Emitted when the user activates the toggle.
    */
@@ -81,6 +85,10 @@ export declare class DocumentComponent implements ComponentInterface {
    * Emitted when the user activates the annotation button.
    */
   dsoAnnotationToggle: EventEmitter<DocumentComponentToggleAnnotationEvent>;
+  /**
+   * Emitted each time a marked item gets highlighted.
+   */
+  dsoMarkItemHighlight: EventEmitter<DocumentComponentMarkItemHighlightEvent>;
   private get wijzigactieLabel();
   private handleHeadingClick;
   private suffix;

package/dist/types/components/document-component/document-component.models.d.ts

@@ -1,5 +1,5 @@
 import { DsoOzonContentCustomEvent } from "../../components";
-import { OzonContentAnchorClickEvent } from "../ozon-content/ozon-content.interfaces";
+import { OzonContentAnchorClickEvent, OzonContentText } from "../ozon-content/ozon-content.interfaces";
 export interface DocumentComponentOpenToggleEvent {
   originalEvent: Event;
   open: boolean;
@@ -13,3 +13,10 @@ export interface DocumentComponentOzonContentAnchorClickEvent {
   ozonContentAnchorClick: OzonContentAnchorClickEvent;
 }
 export type DocumentComponentInputType = XMLDocument | string;
+export type DocumentComponentSource = "label" | "nummer" | "opschrift" | "inhoud";
+export type DocumentComponentMarkFunction = (text: string, source: DocumentComponentSource) => OzonContentText[];
+export interface DocumentComponentMarkItemHighlightEvent {
+  source: DocumentComponentSource;
+  text: string;
+  elementRef: HTMLElement;
+}

package/dist/types/components/ozon-content/nodes/text.node.d.ts

@@ -1,5 +1,6 @@
 import { OzonContentNode } from "../ozon-content-node.interface";
+import { OzonContentNodeContext } from "../ozon-content-node-context.interface";
 export declare class OzonContentTextNode implements OzonContentNode {
   name: string;
-  render(node: Node): any;
+  render({ textContent }: Node, { mark, emitMarkItemHighlight }: OzonContentNodeContext): any;
 }

package/dist/types/components/ozon-content/ozon-content-context.interface.d.ts

@@ -1,9 +1,11 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { OzonContentNodeState } from "./ozon-content-node-state.interface";
-import { OzonContentAnchorClickEvent } from "./ozon-content.interfaces";
+import { OzonContentAnchorClickEvent, OzonContentMarkFunction } from "./ozon-content.interfaces";
 export interface OzonContentContext {
   state: OzonContentNodeState;
   inline: boolean;
+  mark: OzonContentMarkFunction | undefined;
   setState(state: OzonContentNodeState): void;
   emitAnchorClick: EventEmitter<OzonContentAnchorClickEvent>["emit"];
+  emitMarkItemHighlight(text: string, ref: HTMLElement): void;
 }

package/dist/types/components/ozon-content/ozon-content-node-context.interface.d.ts

@@ -1,10 +1,12 @@
 import { JSX } from "../../stencil-public-runtime";
-import { OzonContentAnchorClickEvent } from "./ozon-content.interfaces";
+import { OzonContentAnchorClickEvent, OzonContentMarkFunction } from "./ozon-content.interfaces";
 export interface OzonContentNodeContext<T = unknown> {
   inline: boolean;
   path: Node[];
+  mark: OzonContentMarkFunction | undefined;
   mapNodeToJsx(node: Node | Node[] | NodeList): JSX.Element;
   emitAnchorClick(event: OzonContentAnchorClickEvent): void;
   state?: T;
   setState?(state: T): void;
+  emitMarkItemHighlight(text: string, elementRef: HTMLElement): void;
 }

package/dist/types/components/ozon-content/ozon-content.d.ts

@@ -1,5 +1,5 @@
 import { ComponentInterface, EventEmitter, JSX } from "../../stencil-public-runtime";
-import { OzonContentAnchorClickEvent, OzonContentInputType } from "./ozon-content.interfaces";
+import { OzonContentAnchorClickEvent, OzonContentInputType, OzonContentMarkFunction, OzonContentMarkItemHighlightEvent } from "./ozon-content.interfaces";
 import { OzonContentNodeState } from "./ozon-content-node-state.interface";
 export declare class OzonContent implements ComponentInterface {
   /**
@@ -10,11 +10,20 @@ export declare class OzonContent implements ComponentInterface {
    * Setting this property creates dso-ozon-content as inline element instead of a block element.
    */
   inline: boolean;
+  /**
+   * To mark text.
+   */
+  mark?: OzonContentMarkFunction;
   /**
    * Emitted when `<a>` is clicked.
    */
   dsoAnchorClick: EventEmitter<OzonContentAnchorClickEvent>;
+  /**
+   * Emitted when a marked item is highlighted.
+   */
+  dsoOzonContentMarkItemHighlight: EventEmitter<OzonContentMarkItemHighlightEvent>;
   contentWatcher(): void;
   state: OzonContentNodeState;
+  private handleMarkItemHighlight;
   render(): JSX.Element;
 }

package/dist/types/components/ozon-content/ozon-content.interfaces.d.ts

@@ -6,3 +6,13 @@ export interface OzonContentAnchorClickEvent {
   originalEvent: MouseEvent;
 }
 export type OzonContentInputType = XMLDocument | string;
+export type OzonContentMarkFunction = (text: string) => OzonContentText[] | undefined;
+export type OzonContentText = OzonContentMarkItem | string;
+export interface OzonContentMarkItem {
+  text: string;
+  highlight?: boolean;
+}
+export interface OzonContentMarkItemHighlightEvent {
+  text: string;
+  elementRef: HTMLElement;
+}