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

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;
+}

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

@@ -0,0 +1,8 @@
+import { I18n } from '../../interfaces';
+interface I18nDsFileUpload {
+    dropZoneLabel: string;
+    selectedFilesLabel: string;
+    removeFileLabel: string;
+}
+export declare const i18nDsFileUpload: I18n<I18nDsFileUpload>;
+export {};

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

@@ -0,0 +1,24 @@
+export declare const FILE_UPLOAD_REJECTION_REASONS: readonly ["BAD_EXTENSION", "FILE_TOO_BIG", "FILE_SIZE_SUM_TOO_BIG", "TOO_MANY_FILES", "DUPLICATED_FILE"];
+export type FileUploadRejectionReason = (typeof FILE_UPLOAD_REJECTION_REASONS)[number];
+export interface FileUploadRejectedFile {
+    reasons: FileUploadRejectionReason[];
+    file: File;
+}
+export interface FileUploadCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: any;
+}
+export type FileUploadChangeDetail = File[];
+export type FileUploadChange = FileUploadCustomEvent<FileUploadChangeDetail>;
+export type FileUploadFilesAddedDetail = File[];
+export type FileUploadFilesAdded = FileUploadCustomEvent<FileUploadFilesAddedDetail>;
+export type FileUploadFilesRemovedDetail = File[];
+export type FileUploadFilesRemoved = FileUploadCustomEvent<FileUploadFilesRemovedDetail>;
+export type FileUploadRejectedFileDetail = FileUploadRejectedFile;
+export type FileUploadRejectedFileEvent = FileUploadCustomEvent<FileUploadRejectedFileDetail>;
+export type FileUploadInputClickDetail = MouseEvent;
+export type FileUploadInputClick = FileUploadCustomEvent<FileUploadInputClickDetail>;
+export type FileUploadBlurDetail = FocusEvent;
+export type FileUploadBlur = FileUploadCustomEvent<FileUploadBlurDetail>;
+export type FileUploadFocusDetail = FocusEvent;
+export type FileUploadFocus = FileUploadCustomEvent<FileUploadFocusDetail>;

package/dist/types/components/file-upload/test/file-upload.a11y.play.d.ts

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

package/dist/types/components/file-upload/test/file-upload.component.play.d.ts

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

package/dist/types/components/file-upload/test/file-upload.visual.play.d.ts

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

package/dist/types/components/file-upload/utils/file-list.util.d.ts

@@ -0,0 +1,2 @@
+export declare const toFileArray: (list?: FileList) => File[];
+export declare const toFileList: (files?: File[]) => FileList;

package/dist/types/components/file-upload/utils/file-size.util.d.ts

@@ -0,0 +1 @@
+export declare const formatFileSize: (bytes: number) => string;

package/dist/types/components/file-upload/utils/file-validation.util.d.ts

@@ -0,0 +1,13 @@
+import { FileUploadRejectedFile } from '../file-upload.interfaces';
+type FileOptions = {
+    accept?: string;
+    maxFileSize?: number | undefined;
+    maxBundleSize?: number | undefined;
+    maxFiles?: number | undefined;
+};
+type ValidateFileArrayReturn = {
+    validFiles: File[];
+    invalidFiles: FileUploadRejectedFile[];
+};
+export declare const validateFileArray: (state: File[], files: File[], fileOptions: FileOptions) => ValidateFileArrayReturn;
+export {};

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

@@ -0,0 +1,68 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { type LogInstance } from "../../utils/index";
+import { DsComponentInterface, DsConfigObserver, DsConfigState, DsLanguage, DsRegion, DsBrand } from "../../global/index";
+import { FooterContainer, FooterLanguageChangeDetail, FooterLink, FooterSocialLink } from './footer.interfaces';
+/**
+ * Footer renders application level legal links, language selection, and social links.
+ * Link content is slot first to keep links crawlable and SEO friendly.
+ * Links and social media are shown by default unless disabled.
+ *
+ * @slot - Main content area above the divider.
+ * @slot logo - Optional custom logo markup.
+ * @slot social-links - Optional social link anchors (shows if provided or config available).
+ * @slot links - Optional legal or app links (shows if provided or config available).
+ */
+export declare class Footer implements DsComponentInterface, DsConfigObserver {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    brand: DsBrand;
+    language: DsLanguage;
+    region: DsRegion;
+    allowedLanguages: DsLanguage[];
+    legalLinksConfig: {
+        [key in DsLanguage]?: FooterLink[];
+    } | undefined;
+    legalTextConfig: string | undefined;
+    socialLinksConfig: FooterSocialLink[] | undefined;
+    /**
+     * Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.
+     * Matches the `ds-container` sizing variants.
+     */
+    readonly container: FooterContainer;
+    /**
+     * If `true` the language selection will be hidden.
+     */
+    readonly hideLanguageSelection: boolean;
+    /**
+     * If `true` the default legal links from config will not be rendered.
+     * User must provide links via the `links` slot.
+     */
+    readonly disableDefaultLinks: boolean;
+    /**
+     * If `true` the default social links from config will not be rendered.
+     * User must provide social links via the `social-links` slot.
+     */
+    readonly disableDefaultSocialLinks: boolean;
+    /**
+     * Copyright and address text below the divider.
+     * If not provided, uses the text from config based on region and language.
+     */
+    readonly legalText: string | undefined;
+    /**
+     * Emitted when the language select value changes.
+     */
+    dsLanguageChange: EventEmitter<FooterLanguageChangeDetail>;
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    private hasNamedSlot;
+    private getLanguageLabel;
+    private handleLanguageChange;
+    private renderLogo;
+    private renderLinkList;
+    private renderSocialList;
+    render(): any;
+}

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

@@ -0,0 +1,7 @@
+import { I18n } from '../../interfaces';
+interface I18nDsFooter {
+    languageSelector: string;
+    languageLabels: Record<string, string>;
+}
+export declare const i18nDsFooter: I18n<I18nDsFooter>;
+export {};

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

@@ -0,0 +1,19 @@
+export declare const FOOTER_CONTAINERS: readonly ["default", "fluid", "compact", ""];
+export type FooterContainer = (typeof FOOTER_CONTAINERS)[number];
+export interface FooterLink {
+    label: string;
+    href: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    rel?: string;
+}
+export interface FooterSocialLink extends FooterLink {
+    icon: string;
+    ariaLabel?: string;
+}
+export interface FooterLanguageChangeDetail {
+    language: string;
+}
+export interface FooterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsFooterElement;
+}

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

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

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

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

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

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

package/dist/types/components/hint/hint-text/hint-text.d.ts

@@ -0,0 +1,15 @@
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { type LogInstance } from "../../../utils/index";
+import { DsComponentInterface } from "../../../global/index";
+/**
+ * Hint Text renders the body content inside a ds-hint panel. Place it as a direct child of ds-hint.
+ * Projects into the default slot of ds-hint.
+ *
+ * @slot - The hint body text.
+ */
+export declare class HintText implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    render(): any;
+}

package/dist/types/components/hint/hint-title/hint-title.d.ts

@@ -0,0 +1,16 @@
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { type LogInstance } from "../../../utils/index";
+import { DsComponentInterface } from "../../../global/index";
+/**
+ * Hint Title renders the heading inside a ds-hint panel. Place it as a direct child of ds-hint.
+ * Uses light DOM (no shadow) so ds-hint's named slot projects the content correctly.
+ *
+ * @slot - The hint title text.
+ */
+export declare class HintTitle implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    connectedCallback(): void;
+    render(): any;
+}

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

@@ -0,0 +1,87 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DsBreakpointObserver, DsBreakpoints, type LogInstance } from "../../utils/index";
+import { DsComponentInterface, DsConfigObserver, DsConfigState, type DsLanguage, type DsRegion } from "../../global/index";
+import { type PopupPlacement } from '../popup/popup.interfaces';
+/**
+ * Hint displays contextual help via an info-circle trigger button.
+ * On touch viewports (< 1024 px) it opens a ds-drawer (bottom sheet);
+ * on desktop it opens a ds-popup (floating panel).
+ *
+ * @slot title - The hint panel heading.
+ * @slot       - The hint body content.
+ * @part trigger - The info-circle trigger button.
+ */
+export declare class Hint implements DsComponentInterface, DsConfigObserver, DsBreakpointObserver {
+    private popupEl;
+    private drawerEl;
+    private triggerButtonEl;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    isOpen: boolean;
+    isTouch: boolean;
+    animated: boolean;
+    innerCloseLabel: string;
+    language: DsLanguage;
+    region: DsRegion;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * Preferred placement of the popup panel on desktop viewports.
+     */
+    readonly placement: PopupPlacement;
+    /**
+     * Title text displayed in the hint panel.
+     * When provided, renders in the title section without needing a named slot.
+     */
+    readonly label: string | undefined;
+    /**
+     * Label for the close button shown in the drawer on touch viewports.
+     * When omitted the label is localised from the language config.
+     */
+    readonly closeLabel: string | undefined;
+    /**
+     * Accessible label for the trigger button.
+     * When omitted the label is localised from the language config.
+     */
+    readonly triggerLabel: string | undefined;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the hint panel. */
+    present(): Promise<void>;
+    /** Closes the hint panel. */
+    dismiss(): Promise<void>;
+    /** Toggles the hint panel open or closed. */
+    toggle(): Promise<void>;
+    /**
+     * @internal
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    listenToBreakpoint(breakpoints: DsBreakpoints): void;
+    private wirePopupTrigger;
+    private hasTitle;
+    /**
+     * EVENT BINDING
+     * ------------------------------------------------------
+     */
+    listenToKeyDown(ev: KeyboardEvent): void;
+    private handleTriggerClick;
+    private handleWillPresent;
+    private handleWillDismiss;
+    private handleCloseClick;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,6 @@
+import { I18n } from '../../interfaces';
+interface I18nDsHint {
+    triggerLabel: string;
+}
+export declare const i18nDsHint: I18n<I18nDsHint>;
+export {};

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

@@ -0,0 +1,4 @@
+export interface HintCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsHintElement;
+}

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

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

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

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

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

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

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

@@ -12,6 +12,7 @@ export declare class Icon implements DsComponentInterface, DsConfigObserver {
     log: LogInstance;
     createLogger(log: LogInstance): void;
     el: HTMLStencilElement;
+    private _fetchedSrc;
     icons: DsIcons;
     svgContent: string;
     /**
@@ -26,11 +27,14 @@ export declare class Icon implements DsComponentInterface, DsConfigObserver {
      * Svg content.
      */
     readonly svg: string;
+    /**
+     * URL of an SVG file to fetch and display.
+     */
+    readonly src: string;
     /**
      * Defines the size of the icon.
      */
-    size: IconSize;
-    sizeChanged(newValue: IconSize): void;
+    readonly size: IconSize;
     /**
      * The theme type of the button.
      */
@@ -76,7 +80,7 @@ export declare class Icon implements DsComponentInterface, DsConfigObserver {
      * ------------------------------------------------------
      */
     connectedCallback(): void;
-    componentWillRender(): Promise<void> | void;
+    componentWillRender(): Promise<void>;
     /**
      * LISTENERS
      * ------------------------------------------------------

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

@@ -1,7 +1,7 @@
 export declare const ICON_SHAPES: readonly ["", "triangle", "circle"];
 export declare const ICON_COLORS: readonly ["auto", "blue", "light-blue", "success", "success-dark", "success-darker", "danger", "danger-dark", "danger-darker", "info", "warning", "warning-dark", "warning-darker", "white", "grey", "grey-light", "grey-dark", "primary", "primary-light", "primary-dark", ""];
 export declare const ICON_TILE_COLORS: readonly ["purple", "red", "yellow", "green"];
-export declare const ICON_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "", "xsmall", "x-small", "small", "medium", "large", "x-large", "xx-large"];
+export declare const ICON_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "", "xsmall", "x-small", "small", "medium", "large", "x-large", "xx-large"];
 export type IconShape = (typeof ICON_SHAPES)[number];
 export type IconColor = (typeof ICON_COLORS)[number] | string | undefined;
 export type IconTileColor = (typeof ICON_TILE_COLORS)[number];

package/dist/types/components/input/clear-button.i18n.d.ts

@@ -0,0 +1,6 @@
+import { I18n } from '../../interfaces';
+interface I18nDsClearButton {
+    clear: string;
+}
+export declare const i18nDsClearButton: I18n<I18nDsClearButton>;
+export {};

package/dist/types/components/input/clear-button.util.d.ts

@@ -0,0 +1,10 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import { DsLanguage } from "../../global/index";
+export type ClearButtonProps = {
+    value: unknown;
+    disabled?: boolean;
+    readonly?: boolean;
+    language: DsLanguage;
+    onClick: () => void;
+};
+export declare const ClearButton: FunctionalComponent<ClearButtonProps>;

package/dist/types/components/input/trigger-button.i18n.d.ts

@@ -0,0 +1,7 @@
+import { I18n } from '../../interfaces';
+interface I18nDsTriggerButton {
+    openCalendar: string;
+    chooseDate: string;
+}
+export declare const i18nDsTriggerButton: I18n<I18nDsTriggerButton>;
+export {};