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

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

@@ -0,0 +1,128 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DsBreakpointObserver, DsBreakpoints, type LogInstance, type ResizeObserver } from "../../utils/index";
+import { DsComponentInterface, DsConfigObserver, DsConfigState, DsLanguage, DsRegion } from "../../global/index";
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { NavbarContainer } from './navbar.interfaces';
+/**
+ * Navbar provides semantic navigation with responsive sidebar menu and keyboard support.
+ *
+ * @slot brand - Logo or branding element (always visible)
+ * @slot title - Page title or heading (visible on desktop and larger screens)
+ * @slot menu-start - Left navigation links (inline on desktop, in sidebar on mobile)
+ * @slot menu-end - Right navigation links and action buttons (inline on desktop, in sidebar on mobile)
+ * @slot actions - Action buttons (always visible, positioned on the right)
+ * @part nav - The semantic navigation container
+ * @part hamburger - The mobile hamburger button
+ * @part sidebar - The mobile menu sidebar (aside element)
+ */
+export declare class Navbar implements DsComponentInterface, DsBreakpointObserver, DsConfigObserver, ResizeObserver {
+    private navEl;
+    private sidebarEl;
+    private burgerButton;
+    private containerEl;
+    private scrollHandler;
+    private focusHandler;
+    private burgerModeThresholdWidth;
+    language: DsLanguage;
+    region: DsRegion;
+    isTouch: boolean;
+    isSidebarOpen: boolean;
+    isOverflowing: boolean;
+    /**
+     * PUBLIC PROPERTY API
+     * ─────────────────────────────────────────────────────
+     */
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    /**
+     * If `true` the navbar will open the sidebar menu.
+     */
+    readonly open: boolean;
+    openChanged(newValue: boolean): void;
+    /**
+     * If `true` the navbar will use a light color scheme.
+     */
+    readonly light: boolean;
+    /**
+     * Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.
+     * Matches the `ds-container` sizing variants.
+     */
+    readonly container: NavbarContainer;
+    /**
+     * Emitted when the sidebar menu starts opening
+     */
+    dsMenuOpenStart: EventEmitter<void>;
+    /**
+     * Emitted when the sidebar menu finishes opening
+     */
+    dsMenuOpenEnd: EventEmitter<void>;
+    /**
+     * Emitted when the sidebar menu starts closing
+     */
+    dsMenuCloseStart: EventEmitter<void>;
+    /**
+     * Emitted when the sidebar menu finishes closing
+     */
+    dsMenuCloseEnd: EventEmitter<void>;
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToBreakpoint(breakpoints: DsBreakpoints): void;
+    /**
+     * @internal Listens to config changes and updates language/region state
+     */
+    configChanged(state: DsConfigState): Promise<void>;
+    /**
+     * @internal Listens to resize events and checks for content overflow
+     */
+    listenToResize(): Promise<void>;
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Toggles the sidebar menu open/closed state
+     */
+    toggleSidebar(): Promise<void>;
+    /**
+     * Opens the sidebar menu
+     */
+    openSidebar(): Promise<void>;
+    /**
+     * Closes the sidebar menu
+     */
+    closeSidebar(): Promise<void>;
+    /**
+     * EVENT HANDLERS
+     * ─────────────────────────────────────────────────────
+     */
+    private handleHamburgerClick;
+    private handleBackdropClick;
+    private handleDrawerClickBound;
+    private handleDrawerClick;
+    private handleDocumentKeyDown;
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    private attachKeyboardListener;
+    private detachKeyboardListener;
+    private attachSidebarClickListener;
+    private detachSidebarClickListener;
+    private checkNavbarOverflow;
+    private setIsSidebarOpen;
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render(): any;
+}

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

@@ -0,0 +1,9 @@
+import { I18n } from '../../interfaces';
+interface I18nDsNavbar {
+    mainNavigation: string;
+    openMenu: string;
+    closeMenu: string;
+    navigationMenu: string;
+}
+export declare const i18nDsNavbar: I18n<I18nDsNavbar>;
+export {};

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

@@ -0,0 +1,10 @@
+export interface DsNavbarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLElement;
+}
+export type DsNavbarMenuOpenStart = DsNavbarCustomEvent<void>;
+export type DsNavbarMenuOpenEnd = DsNavbarCustomEvent<void>;
+export type DsNavbarMenuCloseStart = DsNavbarCustomEvent<void>;
+export type DsNavbarMenuCloseEnd = DsNavbarCustomEvent<void>;
+export declare const NAVBAR_CONTAINERS: readonly ["default", "fluid", "compact", ""];
+export type NavbarContainer = (typeof NAVBAR_CONTAINERS)[number];

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

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

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/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;