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

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

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

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

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

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

@@ -49,8 +49,7 @@ export declare class Notification implements DsComponentInterface {
     /**
      * Defines the size of the notification, small, medium or large.
      */
-    size?: NotificationSize;
-    sizeChanged(newValue: NotificationSize): void;
+    readonly size?: NotificationSize;
     /**
      * Emitted when the close button got clicked.
      */
@@ -63,7 +62,6 @@ export declare class Notification implements DsComponentInterface {
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback(): void;
     componentDidLoad(): void;
     /**
      * PUBLIC METHODS

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

@@ -73,11 +73,6 @@ export declare class Pagination implements DsComponentInterface, DsBreakpointObs
      * Triggers when a page change happens
      */
     dsChangeEventEmitter: EventEmitter<PaginationChangeDetail>;
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback(): void;
     componentWillLoad(): void;
     /**
      * PUBLIC LISTENERS

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

@@ -0,0 +1,152 @@
+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 { type PopupPlacement, type PopupRole, type PopupPresentDetail, type PopupDismissDetail } from './popup.interfaces';
+/**
+ * Popup displays anchored overlay content positioned relative to a trigger element.
+ * Serves as a primitive for dropdowns, hints, menus, datepickers, and autocompletes.
+ *
+ * Trigger wiring:
+ *   Programmatic — set the `trigger` property to an HTMLElement; call `present()` / `dismiss()`.
+ *   Declarative  — add `data-popup="<id>"` to any trigger element and set matching `id` on popup.
+ *
+ * @slot - The popup content.
+ * @part panel    - The floating panel container.
+ * @part backdrop - The optional full-screen backdrop overlay.
+ * @part close    - The optional close button (visible when closable).
+ */
+export declare class Popup implements DsComponentInterface, DsConfigObserver {
+    private arrowEl;
+    private cleanupPositioner?;
+    private currentTrigger;
+    private focusHandler;
+    private transitionQueue;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    animated: boolean;
+    isOpen: boolean;
+    panelEl: HTMLDivElement | undefined;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * If `true` the popup is open.
+     */
+    open: boolean;
+    openChanged(newValue: boolean): void;
+    /**
+     * The trigger element. Setting this wires up aria-haspopup and aria-expanded automatically.
+     */
+    readonly trigger: HTMLElement | undefined;
+    triggerChanged(newTrigger: HTMLElement | undefined, oldTrigger: HTMLElement | undefined): void;
+    /**
+     * Preferred placement of the popup relative to the trigger.
+     */
+    readonly placement: PopupPlacement;
+    /**
+     * Offset in pixels between the trigger element and the popup panel.
+     */
+    readonly offset: number;
+    /**
+     * ARIA role applied to the panel.
+     * Controls focus-trap behaviour and the aria-haspopup value set on the trigger.
+     * Use "dialog" for rich content, "listbox" or "menu" for interactive option lists.
+     */
+    readonly role: PopupRole;
+    /**
+     * If `true`, the popup can be dismissed via the Escape key and shows a close button.
+     */
+    readonly closable: boolean;
+    /**
+     * If `true`, clicking outside the popup panel dismisses it.
+     */
+    readonly backdropDismiss: boolean;
+    /**
+     * If `true`, a full-screen backdrop overlay is rendered behind the popup panel.
+     */
+    readonly backdrop: boolean;
+    /**
+     * Group name for mutual-exclusion. Only one popup within the same group is open at a time.
+     */
+    readonly group: string | undefined;
+    /**
+     * Accessible label for the popup panel (sets aria-label on the panel element).
+     */
+    readonly label: string;
+    /**
+     * If `true`, renders a small arrow indicator pointing from the panel toward the trigger.
+     */
+    readonly arrow: boolean;
+    /**
+     * Override the automatic focus-trap behaviour.
+     * When undefined, trapping is enabled when `backdrop` is `true` and disabled otherwise.
+     */
+    readonly trapFocus: boolean | undefined;
+    /**
+     * EVENTS
+     * ------------------------------------------------------
+     */
+    /** Emitted before the popup opens. */
+    dsWillPresent: EventEmitter<PopupPresentDetail>;
+    /** Emitted after the popup is fully open. */
+    dsDidPresent: EventEmitter<PopupPresentDetail>;
+    /** Emitted before the popup closes. */
+    dsWillDismiss: EventEmitter<PopupDismissDetail>;
+    /** Emitted after the popup is fully closed. */
+    dsDidDismiss: EventEmitter<PopupDismissDetail>;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the popup. */
+    present(): Promise<void>;
+    /** Closes the popup. */
+    dismiss(): Promise<void>;
+    /** Toggles the popup open or closed. */
+    toggle(): Promise<void>;
+    /**
+     * @internal
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToClick(ev: MouseEvent): Promise<void>;
+    listenToKeyDown(ev: KeyboardEvent): void;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private get shouldTrapFocus();
+    private runPresent;
+    private runDismiss;
+    private doPresent;
+    private doDismiss;
+    private startPositioner;
+    private updatePosition;
+    private focusPanel;
+    private registerGroup;
+    private unregisterGroup;
+    private dismissGroupSiblings;
+    /**
+     * EVENT BINDING
+     * ------------------------------------------------------
+     */
+    private handleCloseClick;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+export declare const POPUP_PLACEMENTS: readonly ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"];
+export type PopupPlacement = (typeof POPUP_PLACEMENTS)[number];
+export declare const POPUP_ROLES: readonly ["dialog", "listbox", "menu", "tree", "grid"];
+export type PopupRole = (typeof POPUP_ROLES)[number];
+export interface PopupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsPopupElement;
+}
+export type PopupPresentDetail = {
+    trigger: HTMLElement | undefined;
+};
+export type PopupDismissDetail = {
+    trigger: HTMLElement | undefined;
+};

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

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

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

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

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

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

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -32,11 +32,6 @@ export declare class ProgressBar implements DsComponentInterface, DsConfigObserv
      * The value of the bar in percentage. So min is 0 and 100 would be the max value.
      */
     readonly value: number;
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback(): void;
     componentDidRender(): void;
     /**
      * PUBLIC LISTENERS

package/dist/types/components/radio/radio-group/radio-group.d.ts

@@ -87,6 +87,10 @@ export declare class RadioGroup implements DsComponentInterface, FieldInterface
      * Defines the layout of the input
      */
     readonly tile: boolean;
+    /**
+     * If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group.
+     */
+    readonly hideTrigger: boolean;
     /**
      * Defines the color of the tile checkbox.
      */
@@ -119,6 +123,7 @@ export declare class RadioGroup implements DsComponentInterface, FieldInterface
     connectedCallback(): void;
     componentWillLoad(): void;
     componentWillUpdate(): void;
+    componentDidLoad(): void;
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -143,6 +148,7 @@ export declare class RadioGroup implements DsComponentInterface, FieldInterface
      * ------------------------------------------------------
      */
     private handleValueChange;
+    private handleSlotChange;
     private handleClick;
     /**
      * PRIVATE METHODS

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

@@ -81,6 +81,10 @@ export declare class Radio implements DsComponentInterface {
      * Defines the layout of the input
      */
     readonly tile: boolean;
+    /**
+     * If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible.
+     */
+    readonly hideTrigger: boolean;
     /**
      * Defines the color of the tile radio.
      */

package/dist/types/components/select/select-optgroup.d.ts

@@ -0,0 +1,28 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DsComponentInterface } from "../../global/index";
+import { type LogInstance } from "../../utils/index";
+/**
+ * Select optgroup groups `ds-select-option` elements under a label, as HTML markup — the
+ * grouped counterpart to `ds-select-option`. The element itself renders nothing visible;
+ * `ds-select` reads its `label` and its `ds-select-option` children.
+ *
+ * @slot - One or more ds-select-option elements.
+ */
+export declare class DsSelectOptgroup implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * The label displayed above this group of options.
+     */
+    readonly label: string;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

package/dist/types/components/select/select-option.d.ts

@@ -0,0 +1,34 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DsComponentInterface } from "../../global/index";
+import { type LogInstance } from "../../utils/index";
+/**
+ * Select option declares a single selectable option as HTML markup, as an alternative to the
+ * `options` / `optionGroups` props on `ds-select` — useful for backend-only apps and easier
+ * migration, where the consumer would rather render option markup than write JavaScript.
+ * The element itself renders nothing visible; `ds-select` reads its `value`, `disabled`, and
+ * text content and renders the actual dropdown option itself.
+ *
+ * @slot - The option's label text.
+ */
+export declare class DsSelectOption implements DsComponentInterface {
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * The value submitted when this option is selected.
+     */
+    readonly value: string;
+    /**
+     * If `true`, the option cannot be selected.
+     */
+    readonly disabled: boolean;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,193 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DsComponentInterface } from "../../global/index";
+import { 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 { InputColor } from '../input/input.interfaces';
+import { SelectOption, SelectOptionGroup, SelectChangeDetail, SelectFocusDetail, SelectBlurDetail, SelectClickDetail } from './select.interfaces';
+/**
+ * Select renders an accessible single- or multi-select dropdown backed by Slim Select,
+ * with full form association and the standard DS field wrapper (label, description, validation).
+ *
+ * @slot - Optional ds-select-option / ds-select-optgroup elements, as an HTML-only alternative
+ * to the options / optionGroups props. Ignored whenever options or optionGroups is non-empty.
+ * @part inner - The inner wrapper element containing label, control, and description.
+ * @part label - The label element.
+ * @part control - The control container wrapping the slim-select trigger.
+ * @part description - The description / validation message element.
+ */
+export declare class DsSelect implements DsComponentInterface, FieldInterface {
+    private inheritedAttributes;
+    private selectEl;
+    private popupEl;
+    private picker;
+    private initialValue;
+    selectId: string;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    focused: boolean;
+    language: DsLanguage;
+    region: DsRegion;
+    slottedOptions: SelectOption[];
+    slottedOptionGroups: SelectOptionGroup[];
+    internals: ElementInternals;
+    /**
+     * PUBLIC PROPERTY API
+     * ------------------------------------------------------
+     */
+    /**
+     * The current value of the select.
+     * In single mode: `string | null`.
+     * In multiple mode: `string[]` (array of selected values). As an HTML attribute, multiple
+     * values can also be passed as a comma-separated string, e.g. `value="it,ch"`.
+     */
+    value: string | string[] | null;
+    protected valueChanged(newVal: string | string[] | null): void;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    readonly name: string;
+    /**
+     * The label displayed above the select field.
+     */
+    readonly label: string;
+    /**
+     * The description displayed below the select field.
+     */
+    readonly description: string;
+    /**
+     * Defines the color state of the select field.
+     */
+    readonly color: InputColor;
+    /**
+     * If `true`, the component renders in an invalid state.
+     */
+    readonly invalid: boolean;
+    /**
+     * Validation message shown when `invalid` is true.
+     */
+    readonly invalidText: string;
+    /**
+     * If `true`, the user must select a value before submitting the form.
+     */
+    readonly required: boolean;
+    /**
+     * If `true`, the select is non-interactive and excluded from form submission.
+     */
+    readonly disabled: boolean;
+    protected disabledChanged(): void;
+    /**
+     * If `true`, the value cannot be changed by the user.
+     */
+    readonly readonly: boolean;
+    protected readonlyChanged(): void;
+    /**
+     * If `true`, the user can select multiple options.
+     * The `value` prop and `dsChange` event will carry a `string[]` instead of `string | null`.
+     */
+    readonly multiple: boolean;
+    /**
+     * If `true`, a search input is shown inside the dropdown to filter options.
+     */
+    readonly searchable: boolean;
+    /**
+     * If `true`, a clear button is shown inside the trigger that resets the value to `null` (single mode only).
+     */
+    readonly clearable: boolean;
+    /**
+     * Placeholder text shown when no option is selected.
+     */
+    readonly placeholder: string;
+    /**
+     * The list of selectable options (flat).
+     * Use `optionGroups` when options should be grouped under a label.
+     * If both are set, `optionGroups` takes precedence.
+     */
+    readonly options: SelectOption[];
+    protected optionsChanged(): void;
+    /**
+     * The list of option groups. Each group has a `label` and an `options` array.
+     * When set, `options` is ignored.
+     */
+    readonly optionGroups: SelectOptionGroup[];
+    protected optionGroupsChanged(): void;
+    /**
+     * If `true`, in Angular reactive forms the control will not be set invalid automatically.
+     */
+    readonly autoInvalidOff: boolean;
+    /**
+     * Emitted when the selected value changes.
+     * Single mode: `string | null`. Multiple mode: `string[]`.
+     */
+    dsChange: EventEmitter<SelectChangeDetail>;
+    /**
+     * Emitted when the control receives focus.
+     */
+    dsFocus: EventEmitter<SelectFocusDetail>;
+    /**
+     * Emitted when the control loses focus.
+     */
+    dsBlur: EventEmitter<SelectBlurDetail>;
+    /**
+     * Emitted when the host element is clicked.
+     */
+    dsClick: EventEmitter<SelectClickDetail>;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToClick(ev: MouseEvent): void;
+    listenToReset(ev: UIEvent): void;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * Opens the select dropdown.
+     */
+    open(): Promise<void>;
+    /**
+     * Closes the select dropdown.
+     */
+    close(): Promise<void>;
+    /**
+     * Sets focus on the select trigger.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Removes focus from the select trigger.
+     */
+    setBlur(): Promise<void>;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private normalizeValue;
+    private refreshSlimData;
+    private buildSlimData;
+    private handleSlotChange;
+    private readOptionsFromSlot;
+    private mapSelectOptionElements;
+    private handleAfterChange;
+    private syncFormValue;
+    private syncDisabledState;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

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

@@ -0,0 +1,7 @@
+import { I18n } from '../../interfaces';
+interface I18nDsSelect {
+    searchPlaceholder: string;
+    noResults: string;
+}
+export declare const i18nDsSelect: I18n<I18nDsSelect>;
+export {};

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

@@ -0,0 +1,16 @@
+export declare const SELECT_COLORS: readonly ["primary", "danger", "success", "warning", ""];
+export type SelectColor = (typeof SELECT_COLORS)[number];
+export interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface SelectOptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+/** Single-select emits `string | null`; multi-select emits `string[]`. */
+export type SelectChangeDetail = string | string[] | null;
+export type SelectFocusDetail = FocusEvent;
+export type SelectBlurDetail = FocusEvent;
+export type SelectClickDetail = MouseEvent;

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

@@ -0,0 +1,57 @@
+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;
+    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 fixSearchListener;
+    private fixKeyboardOpen;
+    private fixOptionFocus;
+    private fixTypeAhead;
+    private handleTypeAhead;
+    private findNextTypeAheadMatch;
+    private optionText;
+    private setHighlightedOption;
+    private connectLabelToTrigger;
+}

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

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

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

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

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

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

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

@@ -14,7 +14,7 @@ export declare class Shape implements DsComponentInterface {
     el: HTMLStencilElement;
     /**
      * PUBLIC PROPERTY API
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * The shape color
@@ -28,14 +28,9 @@ export declare class Shape implements DsComponentInterface {
      * The shape variation
      */
     readonly variation: ShapeVariation;
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback(): void;
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render(): any;
 }

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

@@ -43,7 +43,6 @@ export declare class Spinner implements DsComponentInterface, DsConfigObserver {
      * **Deprecated:** Use size="sm" instead.
      */
     readonly small: boolean;
-    smallChanged(newValue: boolean, oldValue: boolean): void;
     /**
      * Visible label rendered next to the spinner. When omitted a translated aria-label is applied automatically.
      */
@@ -61,7 +60,6 @@ export declare class Spinner implements DsComponentInterface, DsConfigObserver {
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     /**