@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

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

@@ -0,0 +1,214 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DsComponentInterface } from "../../global/index";
+import { FormControlInterface, type LogInstance } from "../../utils/index";
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DsConfigState, DsLanguage, DsRegion } from "../../global/index";
+import { FieldInterface } from '../input/field.util';
+import { InputAutocomplete } from '../input/input.interfaces';
+import { DateColor, DateBlurDetail, DateKeyPressDetail, DateFocusDetail, DateClickDetail, DateInputDetail, DateChangeDetail } from './date.interfaces';
+/**
+ * Date renders a masked date input field with an interactive calendar popup for date selection.
+ *
+ * @part input - The native HTML input element.
+ * @part clear - The clear button that removes the selected date.
+ * @part trigger - The calendar icon button that opens the date picker popup.
+ */
+export declare class DsDate implements DsComponentInterface, FieldInterface, FormControlInterface<string | null> {
+    private inheritedAttributes;
+    private control;
+    private focusHandler;
+    private popupHostEl;
+    private triggerEl;
+    private dateMask;
+    private datePicker;
+    private updatingFromMask;
+    dateId: string;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    focused: boolean;
+    language: DsLanguage;
+    region: DsRegion;
+    isOpen: boolean;
+    protected isOpenChanged(open: boolean): void;
+    internals: ElementInternals;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * The value of the date input in ISO format (YYYY-MM-DD).
+     */
+    value: string | null;
+    protected valueChanged(): void;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    readonly name: string;
+    /**
+     * The label of the date input, which is displayed above the field.
+     */
+    readonly label: string;
+    /**
+     * The description of the date input, which is displayed below the field.
+     */
+    readonly description: string;
+    /**
+     * Defines the color of the date input. The default value is `primary`.
+     */
+    readonly color: DateColor;
+    /**
+     * If `true` the component gets an invalid style.
+     */
+    readonly invalid: boolean;
+    /**
+     * The text to display when the input is in an invalid state.
+     */
+    readonly invalidText: string;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    readonly required: boolean;
+    /**
+     * If `true`, the element is not mutable, focusable, or even submitted with the form.
+     */
+    readonly disabled: boolean;
+    /**
+     * If `true` the element can not be mutated, meaning the user can not edit the control.
+     */
+    readonly readonly: boolean;
+    /**
+     * Instructional text that shows before the input has a value.
+     */
+    readonly placeholder: string;
+    /**
+     * This Boolean attribute lets you specify that the control should have input focus when the page loads.
+     */
+    readonly autofocus: boolean;
+    /**
+     * Indicates whether the value of the control can be automatically completed by the browser.
+     */
+    readonly autocomplete: InputAutocomplete;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke.
+     */
+    readonly debounce: number;
+    protected debounceChanged(): void;
+    /**
+     * If `true`, in Angular reactive forms the control will not be set invalid.
+     */
+    readonly autoInvalidOff: boolean;
+    /**
+     * Shows a loading indicator at the end of the input and replaces the trigger button.
+     */
+    readonly loading: boolean;
+    /**
+     * The minimum ISO date string allowed (YYYY-MM-DD). Dates before this are disabled in the calendar and rejected from typed input.
+     */
+    readonly min: string | undefined;
+    /**
+     * The maximum ISO date string allowed (YYYY-MM-DD). Dates after this are disabled in the calendar and rejected from typed input.
+     */
+    readonly max: string | undefined;
+    /**
+     * Earliest year available for selection. Takes precedence over `min` when both are set.
+     */
+    readonly minYearProp: number | undefined;
+    /**
+     * Latest year available for selection. Takes precedence over `max` when both are set.
+     */
+    readonly maxYearProp: number | undefined;
+    /**
+     * The ISO date string (YYYY-MM-DD) where the calendar opens when no value is set.
+     * The date is not selected — only the view navigates to it.
+     */
+    readonly defaultDate: string | undefined;
+    /**
+     * If `true`, the calendar trigger icon and popup are hidden. The component behaves as a plain masked text input with no date picker UX.
+     */
+    readonly freeSolo: boolean;
+    protected freeSoloChanged(isFree: boolean): void;
+    /**
+     * Callback to determine which dates in the calendar are selectable.
+     * Receives an ISO date string (YYYY-MM-DD) and should return `true` to allow the date or `false` to disable it.
+     * Typed input that resolves to a disallowed date is also rejected.
+     */
+    readonly allowedDates: ((dateString: string) => boolean) | undefined;
+    protected minChanged(): void;
+    protected maxChanged(): void;
+    /**
+     * Emitted when the input loses focus.
+     */
+    dsBlur: EventEmitter<DateBlurDetail>;
+    /**
+     * Emitted when a keyboard key has been pressed.
+     */
+    dsKeyPress: EventEmitter<DateKeyPressDetail>;
+    /**
+     * Emitted when the input receives focus.
+     */
+    dsFocus: EventEmitter<DateFocusDetail>;
+    /**
+     * Emitted when the input is clicked.
+     */
+    dsClick: EventEmitter<DateClickDetail>;
+    /**
+     * Emitted when a keyboard input occurred (ISO value or null if incomplete).
+     */
+    dsInput: EventEmitter<DateInputDetail>;
+    /**
+     * Emitted when the date value has changed (ISO value or null).
+     */
+    dsChange: EventEmitter<DateChangeDetail>;
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToClick(ev: MouseEvent): void;
+    listenToKeyDown(ev: KeyboardEvent): void;
+    listenToReset(ev: UIEvent): void;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * Sets focus on the native `input` in `ds-date`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Sets blur on the native `input` in `ds-date`.
+     * @internal
+     */
+    setBlur(): Promise<void>;
+    /**
+     * Returns the native `<input>` element used under the hood.
+     */
+    getInputElement(): Promise<HTMLInputElement>;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private initMask;
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    private handleTriggerClick;
+    private handleClearClick;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

package/dist/types/components/date/date.i18n.d.ts

@@ -0,0 +1,13 @@
+import { I18n } from '../../interfaces';
+interface I18nDsDate {
+    selectDate: string;
+    switchToYearView: string;
+    previousMonth: string;
+    nextMonth: string;
+    previousYear: string;
+    nextYear: string;
+    previousDecade: string;
+    nextDecade: string;
+}
+export declare const i18nDsDate: I18n<I18nDsDate>;
+export {};

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

@@ -0,0 +1,18 @@
+export declare const DATE_COLORS: readonly ["primary", "danger", "success", "warning", ""];
+export type DateColor = (typeof DATE_COLORS)[number];
+export interface DateCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLElement;
+}
+export type DateInputDetail = string | null;
+export type DateInput = DateCustomEvent<DateInputDetail>;
+export type DateChangeDetail = string | null;
+export type DateChange = DateCustomEvent<DateChangeDetail>;
+export type DateBlurDetail = FocusEvent;
+export type DateBlur = DateCustomEvent<DateBlurDetail>;
+export type DateKeyPressDetail = KeyboardEvent;
+export type DateKeyPress = DateCustomEvent<DateKeyPressDetail>;
+export type DateClickDetail = MouseEvent;
+export type DateClick = DateCustomEvent<DateClickDetail>;
+export type DateFocusDetail = FocusEvent;
+export type DateFocus = DateCustomEvent<DateFocusDetail>;

package/dist/types/components/date/date.mask.d.ts

@@ -0,0 +1,29 @@
+import type { DsRegion } from "../../global/index";
+export type DateDisplayFormat = 'dd.MM.yyyy' | 'dd/MM/yyyy';
+export declare function getDisplayFormat(region: DsRegion): DateDisplayFormat;
+export declare function isoToDisplay(isoValue: string | null, format: DateDisplayFormat): string;
+export interface DateMaskConfig {
+    inputEl: HTMLInputElement;
+    format: DateDisplayFormat;
+    initialValue: string | null;
+    onAccept: (iso: string | null) => void;
+    onComplete: (iso: string) => void;
+}
+export declare function createDateMask(config: DateMaskConfig): DateMask;
+export declare class DateMask {
+    private inputEl;
+    private onAccept;
+    private onComplete;
+    private mask;
+    private format;
+    constructor(inputEl: HTMLInputElement, format: DateDisplayFormat, onAccept: (isoValue: string | null) => void, onComplete: (isoValue: string) => void);
+    private onDividerKey;
+    private create;
+    private getISO;
+    setLazy(lazy: boolean): void;
+    syncFromISO(isoValue: string | null): void;
+    expandShortInput(): boolean;
+    clearIfIncomplete(): void;
+    updateFormat(format: DateDisplayFormat): void;
+    destroy(): void;
+}

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

@@ -0,0 +1,67 @@
+import type { DsLanguage, DsRegion } from "../../global/index";
+export interface DatePickerConfig {
+    popupHostEl: HTMLDivElement;
+    shadowRoot: ShadowRoot;
+    language: DsLanguage;
+    region: DsRegion;
+    min: string | undefined;
+    max: string | undefined;
+    minYear: number | undefined;
+    maxYear: number | undefined;
+    defaultDate: string | undefined;
+    allowedDates: ((iso: string) => boolean) | undefined;
+    initialValue: string | null;
+    onSelect: (iso: string | null) => void;
+    onClose: () => void;
+}
+export declare function checkIsWithinRange(iso: string, min: string | undefined, max: string | undefined, minYear: number | undefined, maxYear: number | undefined, allowedDates: ((iso: string) => boolean) | undefined): boolean;
+export declare class DatePickerController {
+    private airDatepicker;
+    private currentViewMonth;
+    private currentViewYear;
+    private currentViewType;
+    private readonly today;
+    private startDate;
+    private skipFocusOnNextRender;
+    private gridObserver;
+    private navObserver;
+    private config;
+    constructor(config: DatePickerConfig);
+    /**
+     * PUBLIC API
+     * ------------------------------------------------------
+     */
+    open(): void;
+    close(): void;
+    syncFromValue(value: string | null): void;
+    updateLocale(language: DsLanguage, region: DsRegion): void;
+    updateMin(min: string | undefined, minYear: number | undefined): void;
+    updateMax(max: string | undefined, maxYear: number | undefined): void;
+    clear(opts?: {
+        silent: boolean;
+    }): void;
+    destroy(): void;
+    /**
+     * PRIVATE
+     * ------------------------------------------------------
+     */
+    private init;
+    private enhanceAccessibility;
+    private updateNavigationButtonLabels;
+    private getCells;
+    private get prevBtn();
+    private get nextBtn();
+    private get titleBtn();
+    private setActiveCell;
+    private handleGridKeydown;
+    private handleTab;
+    private handlePrevNextClick;
+    private reorderNavigation;
+    private forceTitleClickToYear;
+    private attachTitleBtnListener;
+    private setupGridObserver;
+    private setupNavObserver;
+    private getLocale;
+    private getMinDate;
+    private getMaxDate;
+}

package/dist/types/components/date/test/date.a11y.play.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/date/test/date.component.play.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/date/test/date.visual.play.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -23,8 +23,7 @@ export declare class Divider implements DsComponentInterface {
     /**
      * Defines the space between the child elements. Default is xx-small.
      */
-    space: DividerSpace;
-    spaceChanged(newValue: DividerSpace): void;
+    readonly space: DividerSpace;
     /**
      * Defines the color of the separator line.
      */
@@ -33,7 +32,6 @@ export declare class Divider implements DsComponentInterface {
      * Defines if the separator line is dashed or solid. Default is solid.
      */
     readonly dashed: boolean;
-    connectedCallback(): void;
     /**
      * RENDER
      * ------------------------------------------------------

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

@@ -0,0 +1,102 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DsComponentInterface, DsConfigObserver, DsConfigState } from "../../global/index";
+import { type LogInstance } from "../../utils/index";
+import { DrawerPresentDetail, DrawerDismissDetail, DrawerContainer } from './drawer.interfaces';
+/**
+ * Drawer displays a panel that slides up from the bottom of the screen.
+ * Uses the native dialog element for accessible top-layer rendering, built-in focus management,
+ * and Escape-key handling.
+ *
+ * @slot - The drawer content.
+ * @part dialog - The native dialog element.
+ * @part close  - The optional close button (visible when closable).
+ */
+export declare class Drawer implements DsComponentInterface, DsConfigObserver {
+    private dialogEl;
+    private scrollHandler;
+    private transitionQueue;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    animated: boolean;
+    isOpen: boolean;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * If `true` the drawer is open.
+     */
+    open: boolean;
+    openChanged(newValue: boolean): void;
+    /**
+     * If `true`, the drawer can be dismissed via the Escape key and shows a close button.
+     */
+    readonly closable: boolean;
+    /**
+     * If `true`, clicking the backdrop (outside the panel) dismisses the drawer.
+     */
+    readonly backdropDismiss: boolean;
+    /**
+     * Accessible label for the drawer dialog (sets aria-label on the dialog element).
+     */
+    readonly label: string;
+    /**
+     * Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.
+     * Matches the `ds-container` sizing variants.
+     */
+    readonly container: DrawerContainer;
+    /**
+     * EVENTS
+     * ------------------------------------------------------
+     */
+    /** Emitted before the drawer opens. */
+    dsWillPresent: EventEmitter<DrawerPresentDetail>;
+    /** Emitted after the drawer is fully open. */
+    dsDidPresent: EventEmitter<DrawerPresentDetail>;
+    /** Emitted before the drawer closes. */
+    dsWillDismiss: EventEmitter<DrawerDismissDetail>;
+    /** Emitted after the drawer is fully closed. */
+    dsDidDismiss: EventEmitter<DrawerDismissDetail>;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the drawer. */
+    present(): Promise<void>;
+    /** Closes the drawer. */
+    dismiss(): Promise<void>;
+    /**
+     * @internal
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private runOpen;
+    private runClose;
+    private doOpen;
+    private doClose;
+    private handleCancel;
+    private handleNativeClose;
+    /**
+     * EVENT BINDING
+     * ------------------------------------------------------
+     */
+    private handleBackdropClick;
+    private handleCloseClick;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+export interface DrawerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsDrawerElement;
+}
+export declare const DRAWER_CONTAINERS: readonly ["default", "fluid", "compact"];
+export type DrawerContainer = (typeof DRAWER_CONTAINERS)[number];
+export type DrawerPresentDetail = void;
+export type DrawerDismissDetail = void;

package/dist/types/components/drawer/test/drawer.a11y.play.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/drawer/test/drawer.component.play.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/drawer/test/drawer.visual.play.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/file-upload/file-upload.d.ts

@@ -0,0 +1,192 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DsComponentInterface } from "../../global/index";
+import { type LogInstance } from "../../utils/index";
+import { DsLanguage, DsRegion } from "../../global/index";
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { FieldInterface } from '../input/field.util';
+import { InputColor } from '../input/input.interfaces';
+import { type FileUploadChangeDetail, type FileUploadFilesAddedDetail, type FileUploadFilesRemovedDetail, type FileUploadRejectedFileDetail, type FileUploadInputClickDetail, type FileUploadBlurDetail, type FileUploadFocusDetail } from './file-upload.interfaces';
+/**
+ * FileUpload renders a drag-drop file upload area with optional file list, validation, and form field integration.
+ *
+ * @part drop-zone - The main drop area where users drag files or click to select.
+ * @part file-list - The list of selected files below the drop zone.
+ */
+export declare class FileUpload implements DsComponentInterface, FieldInterface {
+    private fileUploadId;
+    private initialValue;
+    private nativeInput?;
+    private dropZoneEl?;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    files: File[];
+    focused: boolean;
+    isDragOver: boolean;
+    language: DsLanguage;
+    region: DsRegion;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * The value of the file upload (array of selected files).
+     */
+    value: File[];
+    valueChanged(): void;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    readonly name: string;
+    /**
+     * The label of the file upload, displayed in the drop zone area.
+     */
+    readonly label: string;
+    /**
+     * The text displayed inside the drop zone. Defaults to localized "Drag and drop or choose file(s) to upload".
+     */
+    readonly dropZoneLabel: string;
+    /**
+     * The description of the file upload, displayed below the drop zone.
+     */
+    readonly description: string;
+    /**
+     * The text to display when the file upload is in an invalid state.
+     */
+    readonly invalidText: string;
+    /**
+     * Defines the color of the file upload. The default value is `primary`.
+     */
+    readonly color: InputColor;
+    /**
+     * If `true` the component gets an invalid style.
+     */
+    readonly invalid: boolean;
+    /**
+     * If `true` multiple file upload is possible.
+     */
+    readonly multiple: boolean;
+    /**
+     * If `true`, the element is not mutable, focusable, or even submitted with the form.
+     */
+    readonly disabled: boolean;
+    /**
+     * If `true` the element can not be mutated, meaning the user can not edit the control.
+     */
+    readonly readonly: boolean;
+    /**
+     * If `true` the file upload is disabled and shows a spinner.
+     */
+    readonly loading: boolean;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    readonly required: boolean;
+    /**
+     * Accepted MIME-Types like `image/png,image/jpeg`.
+     */
+    readonly accept: string;
+    /**
+     * Allowed number of files in the bundle.
+     */
+    readonly maxFiles?: number;
+    /**
+     * Allowed max file size in bytes.
+     */
+    readonly maxFileSize?: number;
+    /**
+     * Allowed max bundle size in bytes.
+     */
+    readonly maxBundleSize?: number;
+    /**
+     * If `true` below the drop-zone area it generates a file list.
+     */
+    readonly hasFileList: boolean;
+    /**
+     * If `true`, in Angular reactive forms the control will not be set invalid.
+     */
+    readonly autoInvalidOff: boolean;
+    /**
+     * Triggers when a file is added or removed.
+     */
+    dsChange: EventEmitter<FileUploadChangeDetail>;
+    /**
+     * Triggers when a file is added.
+     */
+    dsFilesAdded: EventEmitter<FileUploadFilesAddedDetail>;
+    /**
+     * Triggers when a file is removed.
+     */
+    dsFilesRemoved: EventEmitter<FileUploadFilesRemovedDetail>;
+    /**
+     * Triggers when a file is rejected due to validation rules.
+     */
+    dsRejectedFile: EventEmitter<FileUploadRejectedFileDetail>;
+    /**
+     * Emitted when the input has clicked.
+     */
+    dsInputClick: EventEmitter<FileUploadInputClickDetail>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    dsBlur: EventEmitter<FileUploadBlurDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    dsFocus: EventEmitter<FileUploadFocusDetail>;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToReset(ev: UIEvent): void;
+    configChanged(state: {
+        language: DsLanguage;
+        region: DsRegion;
+    }): Promise<void>;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Sets the file list to an empty list.
+     */
+    clear(): Promise<void>;
+    /**
+     * Sets focus on the native `input`. Use this method instead of the global `input.focus()`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private addDragListeners;
+    private removeDragListeners;
+    private handleFiles;
+    private updateFileInput;
+    /**
+     * HANDLERS
+     * ------------------------------------------------------
+     */
+    private handleDragenter;
+    private handleDragover;
+    private handleDragleave;
+    private handleDrop;
+    private handleInputChange;
+    private handleInputClick;
+    private handleInputFocus;
+    private handleInputBlur;
+    private handleRemoveFile;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}