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

package/dist/types/components.d.ts

@@ -25,6 +25,7 @@ import { FileUploadBlurDetail, FileUploadChangeDetail, FileUploadFilesAddedDetai
 import { FooterContainer, FooterLanguageChangeDetail } from "./components/footer/footer.interfaces";
 import { PopupDismissDetail, PopupPlacement, PopupPresentDetail, PopupRole } from "./components/popup/popup.interfaces";
 import { IconColor, IconShape, IconSize, IconTileColor } from "./components/icon/icon.interfaces";
+import { InputSliderBlurDetail, InputSliderBrandColor, InputSliderChangeDetail, InputSliderClickDetail, InputSliderFocusDetail, InputSliderInputDetail } from "./components/input-slider/input-slider.interfaces";
 import { ItemActionIcon, ItemLabelLevel, ItemLabelSize, ItemVariant } from "./components/list/item/item.interfaces";
 import { LabelSize } from "./components/label/label.interfaces";
 import { LogoBrand, LogoColor, LogoSize } from "./components/logo/logo.interfaces";
@@ -68,6 +69,7 @@ export { FileUploadBlurDetail, FileUploadChangeDetail, FileUploadFilesAddedDetai
 export { FooterContainer, FooterLanguageChangeDetail } from "./components/footer/footer.interfaces";
 export { PopupDismissDetail, PopupPlacement, PopupPresentDetail, PopupRole } from "./components/popup/popup.interfaces";
 export { IconColor, IconShape, IconSize, IconTileColor } from "./components/icon/icon.interfaces";
+export { InputSliderBlurDetail, InputSliderBrandColor, InputSliderChangeDetail, InputSliderClickDetail, InputSliderFocusDetail, InputSliderInputDetail } from "./components/input-slider/input-slider.interfaces";
 export { ItemActionIcon, ItemLabelLevel, ItemLabelSize, ItemVariant } from "./components/list/item/item.interfaces";
 export { LabelSize } from "./components/label/label.interfaces";
 export { LogoBrand, LogoColor, LogoSize } from "./components/logo/logo.interfaces";
@@ -461,9 +463,9 @@ export namespace Components {
         "fullheight": boolean;
         /**
           * If `true` the card image is displayed as a teaser, which means it is displayed with a large image.
-          * @default ''
+          * @default undefined
          */
-        "imageTeaser": CardImageTeaser;
+        "imageTeaser"?: CardImageTeaser;
         /**
           * If `true` the card background color becomes blue.
           * @default false
@@ -663,6 +665,11 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * If `true` and `tile` is set, the checkbox box is visually hidden. The tile remains fully clickable and keyboard-accessible.
+          * @default false
+         */
+        "hideTrigger": boolean;
         /**
           * If `true` the component gets a invalid style.
           * @default false
@@ -749,6 +756,11 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group.
+          * @default false
+         */
+        "hideTrigger": boolean;
         /**
           * If `true` the component gets a invalid style.
           * @default false
@@ -1613,6 +1625,104 @@ export namespace Components {
          */
         "value": string | null;
     }
+    /**
+     * Input slider renders a noUiSlider-backed slider with validation and label/description messaging.
+     */
+    interface DsInputSlider {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+          * @default false
+         */
+        "autoInvalidOff": boolean;
+        /**
+          * 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.
+          * @default ''
+         */
+        "brandColor": InputSliderBrandColor;
+        /**
+          * Defines the color of the slider. The default value is `primary`.
+          * @default 'primary'
+         */
+        "color": InputColor;
+        "configChanged": (state: DsConfigState) => Promise<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`.
+          * @default 0
+         */
+        "debounce": number;
+        /**
+          * The description of the slider, which is displayed below the control.
+          * @default ''
+         */
+        "description": string;
+        /**
+          * 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.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Returns the noUiSlider handle element used under the hood.
+         */
+        "getInputElement": () => Promise<HTMLElement | undefined>;
+        /**
+          * If `true` the component gets an invalid style.
+          * @default false
+         */
+        "invalid": boolean;
+        /**
+          * The text to display when the slider is in an invalid state.
+          * @default ''
+         */
+        "invalidText": string;
+        /**
+          * The label of the slider, which is displayed above the control.
+          * @default ''
+         */
+        "label": string;
+        /**
+          * The maximum value of the slider.
+          * @default 100
+         */
+        "max": number;
+        /**
+          * The minimum value of the slider.
+          * @default 0
+         */
+        "min": number;
+        /**
+          * The name of the control, which is submitted with the form data.
+          * @default this.inputSliderId
+         */
+        "name": string;
+        /**
+          * If `true` the element can not be mutated. noUiSlider has no native concept of `readonly`, so this is treated as equivalent to `disabled`.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+          * @default true
+         */
+        "required": boolean;
+        /**
+          * Sets blur on `ds-input-slider`'s slider handle. Use this method instead of the global `element.blur()`.
+         */
+        "setBlur": () => Promise<void>;
+        /**
+          * Sets focus on `ds-input-slider`'s slider handle. Use this method instead of the global `element.focus()`.
+         */
+        "setFocus": () => Promise<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.
+          * @default '1'
+         */
+        "step": string;
+        /**
+          * 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.
+          * @default NaN
+         */
+        "value": number;
+    }
     /**
      * Item displays a list entry that supports plain content, accordion, link, and button variants with optional icon, label, and description slots.
      */
@@ -2227,6 +2337,11 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible.
+          * @default false
+         */
+        "hideTrigger": boolean;
         /**
           * If `true` the component gets a invalid style.
           * @default false
@@ -2322,6 +2437,11 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group.
+          * @default false
+         */
+        "hideTrigger": boolean;
         /**
           * If `true` the component gets a invalid style.
           * @default false
@@ -3510,6 +3630,10 @@ export interface DsInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsInputElement;
 }
+export interface DsInputSliderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsInputSliderElement;
+}
 export interface DsItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsItemElement;
@@ -4070,6 +4194,30 @@ declare global {
         prototype: HTMLDsInputElement;
         new (): HTMLDsInputElement;
     };
+    interface HTMLDsInputSliderElementEventMap {
+        "dsInput": InputSliderInputDetail;
+        "dsFocus": InputSliderFocusDetail;
+        "dsBlur": InputSliderBlurDetail;
+        "dsClick": InputSliderClickDetail;
+        "dsChange": InputSliderChangeDetail;
+    }
+    /**
+     * Input slider renders a noUiSlider-backed slider with validation and label/description messaging.
+     */
+    interface HTMLDsInputSliderElement extends Components.DsInputSlider, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsInputSliderElementEventMap>(type: K, listener: (this: HTMLDsInputSliderElement, ev: DsInputSliderCustomEvent<HTMLDsInputSliderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsInputSliderElementEventMap>(type: K, listener: (this: HTMLDsInputSliderElement, ev: DsInputSliderCustomEvent<HTMLDsInputSliderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsInputSliderElement: {
+        prototype: HTMLDsInputSliderElement;
+        new (): HTMLDsInputSliderElement;
+    };
     interface HTMLDsItemElementEventMap {
         "dsClick": ButtonClickDetail;
         "dsAccordionToggle": AccordionToggleDetail;
@@ -4735,6 +4883,7 @@ declare global {
         "ds-hint-title": HTMLDsHintTitleElement;
         "ds-icon": HTMLDsIconElement;
         "ds-input": HTMLDsInputElement;
+        "ds-input-slider": HTMLDsInputSliderElement;
         "ds-item": HTMLDsItemElement;
         "ds-label": HTMLDsLabelElement;
         "ds-list": HTMLDsListElement;
@@ -5164,7 +5313,7 @@ declare namespace LocalJSX {
         "fullheight"?: boolean;
         /**
           * If `true` the card image is displayed as a teaser, which means it is displayed with a large image.
-          * @default ''
+          * @default undefined
          */
         "imageTeaser"?: CardImageTeaser;
         /**
@@ -5355,6 +5504,11 @@ declare namespace LocalJSX {
           * The `id` of a `<form>` element to associate this element with.
          */
         "form"?: string;
+        /**
+          * If `true` and `tile` is set, the checkbox box is visually hidden. The tile remains fully clickable and keyboard-accessible.
+          * @default false
+         */
+        "hideTrigger"?: boolean;
         /**
           * If `true` the component gets a invalid style.
           * @default false
@@ -5456,6 +5610,11 @@ declare namespace LocalJSX {
           * The `id` of a `<form>` element to associate this element with.
          */
         "form"?: string;
+        /**
+          * If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group.
+          * @default false
+         */
+        "hideTrigger"?: boolean;
         /**
           * If `true` the component gets a invalid style.
           * @default false
@@ -6371,6 +6530,115 @@ declare namespace LocalJSX {
          */
         "value"?: string | null;
     }
+    /**
+     * Input slider renders a noUiSlider-backed slider with validation and label/description messaging.
+     */
+    interface DsInputSlider {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+          * @default false
+         */
+        "autoInvalidOff"?: boolean;
+        /**
+          * 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.
+          * @default ''
+         */
+        "brandColor"?: InputSliderBrandColor;
+        /**
+          * Defines the color of the slider. The default value is `primary`.
+          * @default 'primary'
+         */
+        "color"?: InputColor;
+        /**
+          * 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`.
+          * @default 0
+         */
+        "debounce"?: number;
+        /**
+          * The description of the slider, which is displayed below the control.
+          * @default ''
+         */
+        "description"?: string;
+        /**
+          * 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.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * If `true` the component gets an invalid style.
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * The text to display when the slider is in an invalid state.
+          * @default ''
+         */
+        "invalidText"?: string;
+        /**
+          * The label of the slider, which is displayed above the control.
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * The maximum value of the slider.
+          * @default 100
+         */
+        "max"?: number;
+        /**
+          * The minimum value of the slider.
+          * @default 0
+         */
+        "min"?: number;
+        /**
+          * The name of the control, which is submitted with the form data.
+          * @default this.inputSliderId
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onDsBlur"?: (event: DsInputSliderCustomEvent<InputSliderBlurDetail>) => void;
+        /**
+          * Emitted when the value is committed (noUiSlider `change`, not `blur` — see ADR-0006/ADR-0007). Fires once per discrete drag/step, independent of focus.
+         */
+        "onDsChange"?: (event: DsInputSliderCustomEvent<InputSliderChangeDetail>) => void;
+        /**
+          * Emitted when the input is clicked.
+         */
+        "onDsClick"?: (event: DsInputSliderCustomEvent<InputSliderClickDetail>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onDsFocus"?: (event: DsInputSliderCustomEvent<InputSliderFocusDetail>) => void;
+        /**
+          * Emitted on each keyboard/pointer movement, before the value is committed.
+         */
+        "onDsInput"?: (event: DsInputSliderCustomEvent<InputSliderInputDetail>) => void;
+        /**
+          * If `true` the element can not be mutated. noUiSlider has no native concept of `readonly`, so this is treated as equivalent to `disabled`.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+          * @default true
+         */
+        "required"?: boolean;
+        /**
+          * 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.
+          * @default '1'
+         */
+        "step"?: string;
+        /**
+          * 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.
+          * @default NaN
+         */
+        "value"?: number;
+    }
     /**
      * Item displays a list entry that supports plain content, accordion, link, and button variants with optional icon, label, and description slots.
      */
@@ -7004,6 +7272,11 @@ declare namespace LocalJSX {
           * The `id` of a `<form>` element to associate this element with.
          */
         "form"?: string;
+        /**
+          * If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible.
+          * @default false
+         */
+        "hideTrigger"?: boolean;
         /**
           * If `true` the component gets a invalid style.
           * @default false
@@ -7104,6 +7377,11 @@ declare namespace LocalJSX {
           * The `id` of a `<form>` element to associate this element with.
          */
         "form"?: string;
+        /**
+          * If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group.
+          * @default false
+         */
+        "hideTrigger"?: boolean;
         /**
           * If `true` the component gets a invalid style.
           * @default false
@@ -8361,6 +8639,7 @@ declare namespace LocalJSX {
         "invalid": boolean;
         "tileColor": CheckboxTileColor;
         "tile": boolean;
+        "hideTrigger": boolean;
     }
     interface DsCheckboxGroupAttributes {
         "color": InputColor;
@@ -8379,6 +8658,7 @@ declare namespace LocalJSX {
         "readonly": boolean;
         "required": boolean;
         "tile": boolean;
+        "hideTrigger": boolean;
         "tileColor": CheckboxTileColor;
         "vertical": boolean;
     }
@@ -8538,6 +8818,24 @@ declare namespace LocalJSX {
         "mask": InputMask;
         "autoInvalidOff": boolean;
     }
+    interface DsInputSliderAttributes {
+        "value": number;
+        "name": string;
+        "label": string;
+        "description": string;
+        "color": InputColor;
+        "brandColor": InputSliderBrandColor;
+        "invalid": boolean;
+        "invalidText": string;
+        "min": number;
+        "max": number;
+        "step": string;
+        "debounce": number;
+        "disabled": boolean;
+        "readonly": boolean;
+        "required": boolean;
+        "autoInvalidOff": boolean;
+    }
     interface DsItemAttributes {
         "accordionGroup": string;
         "accordionMarker": AccordionMarker;
@@ -8657,6 +8955,7 @@ declare namespace LocalJSX {
         "readonly": boolean;
         "required": boolean;
         "tile": boolean;
+        "hideTrigger": boolean;
         "tileColor": RadioTileColor;
         "value": string;
     }
@@ -8677,6 +8976,7 @@ declare namespace LocalJSX {
         "readonly": boolean;
         "required": boolean;
         "tile": boolean;
+        "hideTrigger": boolean;
         "tileColor": RadioTileColor;
         "value": string;
         "vertical": boolean;
@@ -8920,6 +9220,7 @@ declare namespace LocalJSX {
         "ds-hint-title": DsHintTitle;
         "ds-icon": Omit<DsIcon, keyof DsIconAttributes> & { [K in keyof DsIcon & keyof DsIconAttributes]?: DsIcon[K] } & { [K in keyof DsIcon & keyof DsIconAttributes as `attr:${K}`]?: DsIconAttributes[K] } & { [K in keyof DsIcon & keyof DsIconAttributes as `prop:${K}`]?: DsIcon[K] };
         "ds-input": Omit<DsInput, keyof DsInputAttributes> & { [K in keyof DsInput & keyof DsInputAttributes]?: DsInput[K] } & { [K in keyof DsInput & keyof DsInputAttributes as `attr:${K}`]?: DsInputAttributes[K] } & { [K in keyof DsInput & keyof DsInputAttributes as `prop:${K}`]?: DsInput[K] };
+        "ds-input-slider": Omit<DsInputSlider, keyof DsInputSliderAttributes> & { [K in keyof DsInputSlider & keyof DsInputSliderAttributes]?: DsInputSlider[K] } & { [K in keyof DsInputSlider & keyof DsInputSliderAttributes as `attr:${K}`]?: DsInputSliderAttributes[K] } & { [K in keyof DsInputSlider & keyof DsInputSliderAttributes as `prop:${K}`]?: DsInputSlider[K] };
         "ds-item": Omit<DsItem, keyof DsItemAttributes> & { [K in keyof DsItem & keyof DsItemAttributes]?: DsItem[K] } & { [K in keyof DsItem & keyof DsItemAttributes as `attr:${K}`]?: DsItemAttributes[K] } & { [K in keyof DsItem & keyof DsItemAttributes as `prop:${K}`]?: DsItem[K] };
         "ds-label": Omit<DsLabel, keyof DsLabelAttributes> & { [K in keyof DsLabel & keyof DsLabelAttributes]?: DsLabel[K] } & { [K in keyof DsLabel & keyof DsLabelAttributes as `attr:${K}`]?: DsLabelAttributes[K] } & { [K in keyof DsLabel & keyof DsLabelAttributes as `prop:${K}`]?: DsLabel[K] };
         "ds-list": Omit<DsList, keyof DsListAttributes> & { [K in keyof DsList & keyof DsListAttributes]?: DsList[K] } & { [K in keyof DsList & keyof DsListAttributes as `attr:${K}`]?: DsListAttributes[K] } & { [K in keyof DsList & keyof DsListAttributes as `prop:${K}`]?: DsList[K] };
@@ -9108,6 +9409,10 @@ declare module "@stencil/core" {
              * Input renders a text input field with validation, masking, autocomplete, and optional help/error messaging.
              */
             "ds-input": LocalJSX.IntrinsicElements["ds-input"] & JSXBase.HTMLAttributes<HTMLDsInputElement>;
+            /**
+             * Input slider renders a noUiSlider-backed slider with validation and label/description messaging.
+             */
+            "ds-input-slider": LocalJSX.IntrinsicElements["ds-input-slider"] & JSXBase.HTMLAttributes<HTMLDsInputSliderElement>;
             /**
              * Item displays a list entry that supports plain content, accordion, link, and button variants with optional icon, label, and description slots.
              */

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './drawer.po';
 export * from './hint.po';
 export * from './popup.po';
 export * from './input.po';
+export * from './input-slider.po';
 export * from './app.po';
 export * from './badge.po';
 export * from './button.po';

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/components/input-slider.po.d.ts

@@ -0,0 +1,18 @@
+import { Locator } from '@playwright/test';
+import { E2ELocator } from '../page/utils';
+import { PageObject } from './page-object';
+export declare class DsInputSlider extends PageObject {
+    readonly slider: Locator;
+    readonly handle: Locator;
+    constructor(el: E2ELocator);
+    /**
+     * Sets the value the way a "one-shot" user commit would: drives noUiSlider's own .set() API
+     * directly, which fires a single update + set (see input-slider.picker.ts). Waits out a
+     * macrotask tick in-browser so `dsChange`'s debounced (setTimeout(0)) emit has actually run
+     * before this resolves — a raw evaluate() round-trip can otherwise return before it fires.
+     */
+    fill(value: string): Promise<void>;
+    blur(): Promise<void>;
+    assertValue(value: string): Promise<void>;
+    assertToBeDisabled(): Promise<void>;
+}