@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

package/dist/types/components/forms/select/select.picker.d.ts

@@ -0,0 +1,63 @@
+import type { Option, Optgroup } from 'slim-select/dist/store';
+import type { DsLanguage } from "../../../global/index";
+import { SelectOption, SelectOptionGroup } from './select.interfaces';
+export declare function buildSlimData(options: SelectOption[], optionGroups: SelectOptionGroup[], placeholder: string, value: string | string[] | null): (Partial<Option> | Partial<Optgroup>)[];
+export interface SelectPickerConfig {
+    selectEl: HTMLSelectElement;
+    popupEl: HTMLDivElement;
+    shadowRoot: ShadowRoot;
+    triggerId: string;
+    language: DsLanguage;
+    placeholder: string;
+    searchable: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    multiple: boolean;
+    clearable: boolean;
+    data: (Partial<Option> | Partial<Optgroup>)[];
+    onChange: (selected: Option[]) => void;
+    onOpen: () => void;
+    onClose: () => void;
+}
+export declare class SelectPickerController {
+    private slimSelect;
+    private config;
+    private typeAheadBuffer;
+    private typeAheadLastTime;
+    private lastPointerX;
+    private lastPointerY;
+    constructor(config: SelectPickerConfig);
+    /**
+     * PUBLIC API
+     * ------------------------------------------------------
+     */
+    open(): void;
+    close(): void;
+    focus(): void;
+    blur(): void;
+    setData(data: (Partial<Option> | Partial<Optgroup>)[]): void;
+    setSelected(value: string | string[]): void;
+    setDisabled(disabled: boolean): void;
+    updateSearchPlaceholder(language: DsLanguage): void;
+    destroy(): void;
+    /**
+     * PRIVATE
+     * ------------------------------------------------------
+     */
+    private get trigger();
+    private init;
+    private highlightFirstOption;
+    private highlightOnOpen;
+    private fixHoverHighlight;
+    private handlePointerEnter;
+    private fixSearchListener;
+    private fixKeyboardOpen;
+    private fixValueDeleteFocus;
+    private fixOptionFocus;
+    private fixTypeAhead;
+    private handleTypeAhead;
+    private findNextTypeAheadMatch;
+    private optionText;
+    private setHighlightedOption;
+    private connectLabelToTrigger;
+}

package/dist/types/components/forms/slider/slider.d.ts

@@ -0,0 +1,191 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { type LogInstance } from "../../../utils/index";
+import { DsComponentInterface, DsConfigState, DsLanguage, DsRegion } from "../../../global/index";
+import { FieldInterface } from '../input/field.util';
+import { InputColor } from '../input/input.interfaces';
+import { SliderBrandColor, SliderInputDetail, SliderChangeDetail, SliderBlurDetail, SliderFocusDetail, SliderClickDetail } from './slider.interfaces';
+/**
+ * Slider renders a noUiSlider-backed slider with validation and label/description messaging.
+ *
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
+ * @part slider - The noUiSlider target element.
+ */
+export declare class Slider implements DsComponentInterface, FieldInterface {
+    private inheritedAttributes;
+    private sliderEl;
+    private picker;
+    private initialValue;
+    sliderId: string;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    internals: ElementInternals;
+    focused: boolean;
+    language: DsLanguage;
+    region: DsRegion;
+    hasInvalidTextSlotContent: boolean;
+    private disconnectInvalidTextSlotWatcher?;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * The value of the slider. Unlike a text input, a slider can never be
+     * empty; when unset it defaults to `min`. Internally starts as `NaN` (this
+     * codebase's established "empty number" sentinel, see `isValueEmpty`) until
+     * `connectedCallback` resolves it — never actually rendered or emitted.
+     */
+    value: number;
+    protected valueChanged(newVal: number): void;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    readonly name: string;
+    /**
+     * The label of the slider, which is displayed above the control.
+     */
+    readonly label: string;
+    /**
+     * The description of the slider, which is displayed below the control.
+     */
+    readonly description: string;
+    /**
+     * Defines the color of the slider. The default value is `primary`.
+     */
+    readonly color: InputColor;
+    /**
+     * Recolors the connect (the filled progress track) with a brand color instead of the default
+     * grey/primary style. Left of the handle uses the darker `-4` shade, right of it the lighter
+     * `-2` shade. Empty (default) keeps the current grey/primary look.
+     */
+    readonly brandColor?: SliderBrandColor;
+    /**
+     * If `true` the component gets an invalid style.
+     */
+    readonly invalid: boolean;
+    protected invalidChanged(): void;
+    /**
+     * The text to display when the slider is in an invalid state.
+     */
+    readonly invalidText: string;
+    /**
+     * The minimum value of the slider.
+     */
+    readonly min: number;
+    /**
+     * The maximum value of the slider.
+     */
+    readonly max: number;
+    protected minChanged(): void;
+    /**
+     * The granularity the value must adhere to, as a string so `"any"` (free,
+     * continuous dragging with no step snapping) can be expressed alongside
+     * numeric step sizes.
+     */
+    readonly step: string;
+    protected stepChanged(): void;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+     */
+    readonly debounce: number;
+    protected debounceChanged(): void;
+    /**
+     * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+     */
+    readonly disabled: boolean;
+    protected disabledChanged(): void;
+    /**
+     * If `true` the element can not be mutated. noUiSlider has no native concept of
+     * `readonly`, so this is treated as equivalent to `disabled`.
+     */
+    readonly readonly: boolean;
+    protected readonlyChanged(): void;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    readonly required: boolean;
+    /**
+     * If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration
+     * applies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op
+     * in other framework integrations.
+     */
+    readonly autoInvalidOff: boolean;
+    /**
+     * Emitted on each keyboard/pointer movement, before the value is committed.
+     */
+    dsInput: EventEmitter<SliderInputDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    dsFocus: EventEmitter<SliderFocusDetail>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    dsBlur: EventEmitter<SliderBlurDetail>;
+    /**
+     * Emitted when the input is clicked.
+     */
+    dsClick: EventEmitter<SliderClickDetail>;
+    /**
+     * Emitted when the value is committed (noUiSlider `change`, not `blur` — see
+     * ADR-0010/ADR-0007). Fires once per discrete drag/step, independent of focus.
+     */
+    dsChange: EventEmitter<SliderChangeDetail>;
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToClick(ev: UIEvent): void;
+    listenToReset(ev: UIEvent): void;
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Sets focus on `ds-slider`'s slider handle. Use this method instead of the global
+     * `element.focus()`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Sets blur on `ds-slider`'s slider handle. Use this method instead of the global
+     * `element.blur()`.
+     * @internal
+     */
+    setBlur(): Promise<void>;
+    /**
+     * Returns the noUiSlider handle element used under the hood.
+     */
+    getInputElement(): Promise<HTMLElement | undefined>;
+    /**
+     * EVENT HANDLERS
+     * ─────────────────────────────────────────────────────
+     */
+    private handleFocus;
+    private handleBlur;
+    private handleClick;
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    private setValue;
+    private syncFormValue;
+    private syncDisabledState;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}

package/dist/types/components/forms/textarea/textarea.d.ts

@@ -0,0 +1,195 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { FormControlInterface, type LogInstance } from "../../../utils/index";
+import { DsComponentInterface, DsConfigState, DsLanguage, DsRegion } from "../../../global/index";
+import { FieldInterface } from '../input/field.util';
+import { InputColor, InputAutocomplete } from '../input/input.interfaces';
+import { TextareaWrap, TextareaInputMode, TextareaBlurDetail, TextareaKeyPressDetail, TextareaFocusDetail, TextareaClickDetail, TextareaInputDetail, TextareaChangeDetail } from './textarea.interfaces';
+/**
+ * Textarea renders a multi-line text input field with validation, resizing, and optional help/error messaging.
+ *
+ * @slot - The textarea field content and surrounding elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
+ * @part textarea - The native HTML textarea element.
+ * @part prefix - The prefix wrapper (if used).
+ * @part suffix - The suffix wrapper (if used).
+ */
+export declare class Textarea implements DsComponentInterface, FieldInterface, FormControlInterface<string | null> {
+    inputId: string;
+    private inheritedAttributes;
+    private control;
+    private disconnectInvalidTextSlotWatcher?;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    internals: ElementInternals;
+    focused: boolean;
+    hasInvalidTextSlotContent: boolean;
+    language: DsLanguage;
+    region: DsRegion;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Indicates whether and how the text value should be automatically capitalized.
+     */
+    readonly autocapitalize: string;
+    /**
+     * Indicates whether the value of the control can be automatically completed by the browser.
+     */
+    readonly autocomplete: InputAutocomplete;
+    /**
+     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     */
+    readonly autofocus: boolean;
+    /**
+     * If `true`, in Angular reactive forms the control will not be set invalid.
+     */
+    readonly autoInvalidOff: boolean;
+    /**
+     * Defines the color state of the textarea.
+     */
+    readonly color: InputColor;
+    /**
+     * The visible width of the text control, in average character widths.
+     */
+    readonly cols?: number;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke.
+     */
+    readonly debounce: number;
+    debounceChanged(): void;
+    /**
+     * The description displayed below the textarea field.
+     */
+    readonly description: string;
+    /**
+     * If `true`, the element is not mutable, focusable, or even submitted with the form.
+     */
+    readonly disabled: boolean;
+    /**
+     * A hint to the browser for which keyboard to display.
+     */
+    readonly inputmode?: TextareaInputMode;
+    /**
+     * If `true` the component gets an invalid style.
+     */
+    readonly invalid: boolean;
+    /**
+     * Text shown in the description area when `invalid` is true.
+     */
+    readonly invalidText: string;
+    /**
+     * The label displayed above the textarea field.
+     */
+    readonly label: string;
+    /**
+     * Specifies the maximum number of characters that the user can enter.
+     */
+    readonly maxLength?: number;
+    /**
+     * Specifies the minimum number of characters that the user can enter.
+     */
+    readonly minLength?: number;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    readonly name: string;
+    /**
+     * Instructional text that shows before the textarea has a value.
+     */
+    readonly placeholder: string;
+    /**
+     * If `true` the element can not be mutated, meaning the user can not edit the control.
+     */
+    readonly readonly: boolean;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    readonly required: boolean;
+    /**
+     * The number of visible text lines for the control.
+     */
+    readonly rows?: number;
+    /**
+     * The value of the textarea.
+     */
+    value: string | null;
+    /**
+     * Indicates how the control wraps text.
+     */
+    readonly wrap?: TextareaWrap;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    dsBlur: EventEmitter<TextareaBlurDetail>;
+    /**
+     * Emitted when the textarea value has changed.
+     */
+    dsChange: EventEmitter<TextareaChangeDetail>;
+    /**
+     * Emitted when the textarea has been clicked.
+     */
+    dsClick: EventEmitter<TextareaClickDetail>;
+    /**
+     * Emitted when the textarea has focus.
+     */
+    dsFocus: EventEmitter<TextareaFocusDetail>;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    dsInput: EventEmitter<TextareaInputDetail>;
+    /**
+     * Emitted when a keyboard key has been pressed.
+     */
+    dsKeyPress: EventEmitter<TextareaKeyPressDetail>;
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToClick(ev: UIEvent): void;
+    listenToReset(ev: UIEvent): void;
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Sets focus on the native `textarea` element.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Sets blur on the native `textarea` element.
+     * @internal
+     */
+    setBlur(): Promise<void>;
+    /**
+     * Returns the native `<textarea>` element used under the hood.
+     */
+    getInputElement(): Promise<HTMLTextAreaElement>;
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * EVENT HANDLERS
+     * ─────────────────────────────────────────────────────
+     */
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    private handleInput;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}

package/dist/types/components/forms/toggle/toggle.d.ts

@@ -0,0 +1,110 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { type LogInstance } from "../../../utils/index";
+import { DsComponentInterface } from "../../../global/index";
+import { ToggleLabelPosition, ToggleFocusDetail, ToggleBlurDetail, ToggleChangeDetail } from './toggle.interfaces';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+/**
+ * Toggle renders a switch-like form control for toggling between on/off states with optional label and help text.
+ *
+ * @slot - The toggle label content.
+ * @slot helper - The helper or hint text below the toggle.
+ * @part label - The label element wrapping the toggle.
+ * @part input - The native HTML checkbox input element.
+ * @part slot - The content slot wrapper.
+ */
+export declare class Toggle implements DsComponentInterface {
+    inputId: string;
+    private inheritAttributes;
+    private nativeInput?;
+    private initialValue;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    internals: ElementInternals;
+    focused: boolean;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * If `true`, in Angular reactive forms the control will not be set invalid
+     */
+    readonly autoInvalidOff: boolean;
+    /**
+     * If `true`, the toggle is selected.
+     */
+    checked: boolean;
+    /**
+     * If `true`, the toggle is dense and has less size.
+     */
+    readonly dense: boolean;
+    /**
+     * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+     */
+    readonly disabled: boolean;
+    /**
+     * If `true` the component gets a invalid style.
+     */
+    readonly invalid: boolean;
+    /**
+     * Label of the toggle item.
+     */
+    readonly label: string;
+    /**
+     * Defines the position of the label, either before or after the toggle input. Default is after.
+     */
+    readonly labelPosition: ToggleLabelPosition;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    readonly name: string;
+    /**
+     * If `true` the element can not mutated, meaning the user can not edit the control.
+     */
+    readonly readonly: boolean;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    readonly required: boolean;
+    /**
+     * A DOMString representing the value of the toggle. This is not displayed on the
+     * client-side, but on the server this is the value given to the data
+     * submitted with the toggle's name.
+     */
+    readonly value: string | number;
+    /**
+     * Emitted when the toggle loses focus.
+     */
+    dsBlur: EventEmitter<ToggleBlurDetail>;
+    /**
+     * Emitted when the value property has changed.
+     */
+    dsChange: EventEmitter<ToggleChangeDetail>;
+    /**
+     * Emitted when the toggle has focus.
+     */
+    dsFocus: EventEmitter<ToggleFocusDetail>;
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToReset(ev: UIEvent): void;
+    /**
+     * EVENT HANDLERS
+     * ─────────────────────────────────────────────────────
+     */
+    private handleBlur;
+    private handleChange;
+    private handleFocus;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}

package/dist/types/components/indicators/badge/badge.d.ts

@@ -0,0 +1,45 @@
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { DsComponentInterface } from "../../../global/index";
+import { type LogInstance } from "../../../utils/index";
+import { type BadgeSize, type BadgeColor, type BadgePosition } from './badge.interfaces';
+/**
+ * Badge displays a small indicator or counter on a child component to highlight notifications, counts, or status information.
+ *
+ * @slot - The badge content, which can be text or an icon.
+ * @part badge - The badge element itself.
+ * @part icon - The icon element, if an icon is used.
+ */
+export declare class Badge implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Name of the icon to show. If an icon is present, text should be hidden.
+     */
+    readonly icon: string;
+    /**
+     * Define the size of badge. Small is recommended for tabs.
+     */
+    readonly size?: BadgeSize;
+    /**
+     * Define the color for the badge.
+     */
+    readonly color?: BadgeColor;
+    /**
+     * Defines where the badge is positioned relative to its host, e.g. the top right corner of a card.
+     */
+    readonly position?: BadgePosition;
+    /**
+     * If `true` the badge is added to the top right corner of the card.
+     */
+    readonly pulse: boolean;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+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
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}

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

@@ -0,0 +1,20 @@
+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
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}