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

package/dist/types/components/input-slider/input-slider.d.ts

@@ -0,0 +1,186 @@
+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 { InputSliderBrandColor, InputSliderInputDetail, InputSliderChangeDetail, InputSliderBlurDetail, InputSliderFocusDetail, InputSliderClickDetail } from './input-slider.interfaces';
+/**
+ * Input slider renders a noUiSlider-backed slider with validation and label/description messaging.
+ *
+ * @part slider - The noUiSlider target element.
+ */
+export declare class InputSlider implements DsComponentInterface, FieldInterface {
+    private inheritedAttributes;
+    private sliderEl;
+    private picker;
+    private initialValue;
+    inputSliderId: string;
+    log: LogInstance;
+    createLogger(log: LogInstance): void;
+    el: HTMLStencilElement;
+    internals: ElementInternals;
+    focused: boolean;
+    language: DsLanguage;
+    region: DsRegion;
+    /**
+     * 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: InputSliderBrandColor;
+    /**
+     * 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`, in Angular reactive forms the control will not be set invalid
+     */
+    readonly autoInvalidOff: boolean;
+    /**
+     * Emitted on each keyboard/pointer movement, before the value is committed.
+     */
+    dsInput: EventEmitter<InputSliderInputDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    dsFocus: EventEmitter<InputSliderFocusDetail>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    dsBlur: EventEmitter<InputSliderBlurDetail>;
+    /**
+     * Emitted when the input is clicked.
+     */
+    dsClick: EventEmitter<InputSliderClickDetail>;
+    /**
+     * Emitted when the value is committed (noUiSlider `change`, not `blur` — see
+     * ADR-0006/ADR-0007). Fires once per discrete drag/step, independent of focus.
+     */
+    dsChange: EventEmitter<InputSliderChangeDetail>;
+    /**
+     * 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-input-slider`'s slider handle. Use this method instead of the global
+     * `element.focus()`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Sets blur on `ds-input-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>;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private setValue;
+    private syncFormValue;
+    private syncDisabledState;
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    private handleFocus;
+    private handleBlur;
+    private handleClick;
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render(): any;
+}

package/dist/types/components/input-slider/input-slider.interfaces.d.ts

@@ -0,0 +1,18 @@
+import { InputColor } from '../input/input.interfaces';
+export type { InputColor };
+export declare const INPUT_SLIDER_BRAND_COLORS: readonly ["yellow", "purple", "red", "green", ""];
+export type InputSliderBrandColor = (typeof INPUT_SLIDER_BRAND_COLORS)[number];
+export interface InputSliderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsInputSliderElement;
+}
+export type InputSliderChangeDetail = number;
+export type InputSliderChange = InputSliderCustomEvent<InputSliderChangeDetail>;
+export type InputSliderInputDetail = number;
+export type InputSliderInput = InputSliderCustomEvent<InputSliderInputDetail>;
+export type InputSliderBlurDetail = FocusEvent;
+export type InputSliderBlur = InputSliderCustomEvent<InputSliderBlurDetail>;
+export type InputSliderFocusDetail = FocusEvent;
+export type InputSliderFocus = InputSliderCustomEvent<InputSliderFocusDetail>;
+export type InputSliderClickDetail = MouseEvent;
+export type InputSliderClick = InputSliderCustomEvent<InputSliderClickDetail>;

package/dist/types/components/input-slider/input-slider.picker.d.ts

@@ -0,0 +1,37 @@
+import { type target as TargetElement } from 'nouislider';
+export interface InputSliderPickerConfig {
+    targetEl: TargetElement;
+    labelId: string;
+    min: number;
+    max: number;
+    step: string;
+    value: number;
+    disabled: boolean;
+    invalid: boolean;
+    onInput: (value: number) => void;
+    onChange: (value: number) => void;
+}
+export declare class InputSliderPickerController {
+    private slider;
+    private config;
+    private suppressEvents;
+    constructor(config: InputSliderPickerConfig);
+    /**
+     * PUBLIC API
+     * ------------------------------------------------------
+     */
+    setValue(value: number): void;
+    setDisabled(disabled: boolean): void;
+    setInvalid(invalid: boolean): void;
+    updateRange(min: number, max: number, step: string): void;
+    focus(): void;
+    blur(): void;
+    get handleEl(): HTMLElement | undefined;
+    destroy(): void;
+    /**
+     * PRIVATE
+     * ------------------------------------------------------
+     */
+    private init;
+    private connectLabelToHandle;
+}

package/dist/types/components/input-slider/input-slider.utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Clamps `value` into `[min, max]`. Degrades sanely when `min > max` by
+ * treating the effective range as `[min(min, max), max(min, max)]`.
+ */
+export declare function clampValue(value: number, min: number, max: number): number;
+/**
+ * Resolves the initial value: a range input can never be empty, so an unset
+ * (`NaN`, this codebase's "empty number" sentinel — see `isValueEmpty`) value
+ * defaults to `min`.
+ */
+export declare function resolveInitialValue(value: number, min: number): number;
+/**
+ * Derives the decimal precision implied by a `step` value, so noUiSlider's
+ * `format.to` can round away the floating-point noise its internal
+ * percentage-based math otherwise produces. `"any"` (continuous mode) falls
+ * back to a small fixed precision rather than pretending to be exact.
+ */
+export declare function decimalsFromStep(step: string): number;

package/dist/types/components/input-slider/test/input-slider.a11y.play.d.ts

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

package/dist/types/components/input-slider/test/input-slider.component.play.d.ts

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

package/dist/types/components/input-slider/test/input-slider.visual.play.d.ts

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

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.
      */