@design-factory/angular 21.1.0-next.1 → 22.0.0-next.0

package/types/design-factory-angular-slider.d.ts

@@ -0,0 +1,239 @@
+import * as _angular_core from '@angular/core';
+import { AgnosWidgetDirective } from '@design-factory/angular/internals';
+import { SliderWidget, SliderProps } from '@design-factory/core/components/slider';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * Available slider sizes.
+ *
+ * @experimental 22.0.0
+ */
+type DfSliderSize = 'sm' | 'md' | 'lg';
+/**
+ * Slider component for selecting a single value or a range of values.
+ *
+ * Supports one or more handles, ticks, value and min/max labels, RTL/flip directions and vertical orientation.
+ *
+ * @experimental 22.0.0
+ */
+declare class DfSlider extends AgnosWidgetDirective<SliderWidget> implements ControlValueAccessor {
+    private updateTimeout?;
+    /**
+     * Size of the slider.
+     *
+     * @defaultValue `'md'`
+     */
+    readonly size: _angular_core.InputSignal<DfSliderSize>;
+    /**
+     * Minimum value that can be assigned to the slider.
+     *
+     * @defaultValue `0`
+     */
+    readonly min: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Maximum value that can be assigned to the slider.
+     *
+     * @defaultValue `100`
+     */
+    readonly max: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Unit value between slider steps.
+     *
+     * @defaultValue `1`
+     */
+    readonly stepSize: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Current slider values.
+     *
+     * @defaultValue `[0]`
+     */
+    readonly values: _angular_core.InputSignal<number[] | undefined>;
+    /**
+     * If `true`, slider value cannot be changed but the slider is still focusable.
+     *
+     * @defaultValue `false`
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, slider value cannot be changed and the slider cannot be focused.
+     *
+     * @defaultValue `false`
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, the slider is vertically positioned; otherwise it is horizontal.
+     *
+     * @defaultValue `false`
+     */
+    readonly vertical: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If set, overrides the auto-detected RTL direction.
+     * When not set, RTL is auto-detected from the element's computed CSS direction.
+     *
+     * @defaultValue `false`
+     */
+    readonly rtl: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, visually flips the slider direction (both horizontal and vertical).
+     *
+     * @defaultValue `false`
+     */
+    readonly flip: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, the value labels are displayed on the slider.
+     *
+     * @defaultValue `true`
+     */
+    readonly showValueLabels: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, the min and max labels are displayed on the slider.
+     *
+     * @defaultValue `true`
+     */
+    readonly showMinMaxLabels: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, the ticks are displayed on the slider.
+     *
+     * @defaultValue `false`
+     */
+    readonly showTicks: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Unit value between the ticks.
+     * If set to `0`, the {@link stepSize} is used to space the ticks.
+     *
+     * @defaultValue `0`
+     */
+    readonly tickInterval: _angular_core.InputSignal<number | undefined>;
+    /**
+     * If `true`, the tick values are displayed on the slider.
+     *
+     * @defaultValue `true`
+     */
+    readonly showTickValues: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Minimum distance between two handle values.
+     * When set to `0`, no minimum distance constraint is applied.
+     *
+     * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+     * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+     *
+     * @defaultValue `0`
+     */
+    readonly minRange: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Maximum distance between two handle values.
+     * When set to `0`, no maximum distance constraint is applied.
+     *
+     * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+     * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+     *
+     * @defaultValue `0`
+     */
+    readonly maxRange: _angular_core.InputSignal<number | undefined>;
+    /**
+     * When `true`, if moving a handle would break the {@link minRange} or {@link maxRange} constraint,
+     * it will push or pull the neighboring handles to maintain the allowed range.
+     *
+     * @defaultValue `false`
+     */
+    readonly pushRange: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Returns the value for the `aria-label` attribute of each slider handle.
+     *
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue `() => 'Value'`
+     */
+    readonly ariaLabel: _angular_core.InputSignal<((sortedIndex: number) => string) | undefined>;
+    /**
+     * Returns the value for the `aria-labelledby` attribute of each slider handle.
+     *
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue `() => ''`
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<((sortedIndex: number) => string) | undefined>;
+    /**
+     * Returns the value for the `aria-valuetext` attribute of each slider handle.
+     *
+     * @param value - current value of the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue `() => ''`
+     */
+    readonly ariaValueText: _angular_core.InputSignal<((value: number, sortedIndex: number) => string) | undefined>;
+    /**
+     * Emitted when slider values are changed.
+     *
+     * Event payload equals the updated slider values.
+     */
+    readonly valuesChange: _angular_core.OutputEmitterRef<number[]>;
+    constructor();
+    /**
+     * Key handler that sets the refocus element only on the keystrokes that move
+     * the element up the DOM
+     * @param event object containing keystroke and the target element
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Control value accessor methods
+     */
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    registerOnChange(fn: (value: any) => any): void;
+    registerOnTouched(fn: () => any): void;
+    writeValue(value: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSlider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSlider, "df-slider", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "stepSize": { "alias": "stepSize"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "rtl": { "alias": "rtl"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "showValueLabels": { "alias": "showValueLabels"; "required": false; "isSignal": true; }; "showMinMaxLabels": { "alias": "showMinMaxLabels"; "required": false; "isSignal": true; }; "showTicks": { "alias": "showTicks"; "required": false; "isSignal": true; }; "tickInterval": { "alias": "tickInterval"; "required": false; "isSignal": true; }; "showTickValues": { "alias": "showTickValues"; "required": false; "isSignal": true; }; "minRange": { "alias": "minRange"; "required": false; "isSignal": true; }; "maxRange": { "alias": "maxRange"; "required": false; "isSignal": true; }; "pushRange": { "alias": "pushRange"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaValueText": { "alias": "ariaValueText"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
+}
+
+/**
+ * Configuration options supported by `provideDfSliderConfig`.
+ *
+ * These defaults apply to every `DfSlider` instance within the providing injector, unless explicitly overridden on
+ * the component itself.
+ */
+type DfSliderConfig = Pick<SliderProps, 'ariaLabel' | 'ariaValueText'>;
+/**
+ * Slider config key in the global DF component config.
+ */
+declare const SLIDER_CONFIG_KEY: "slider";
+/**
+ * Provides the configuration for the slider component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfSliderConfig({ ariaLabel: () => 'Custom label' })]
+ * })
+ * export class MyHomeComponent {}
+ * ```
+ *
+ * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.
+ *
+ * @since 22.0.0
+ */
+declare const provideDfSliderConfig: (config?: Partial<DfSliderConfig> | ((prevConfig: Partial<DfSliderConfig>) => Partial<DfSliderConfig>) | undefined) => _angular_core.FactoryProvider;
+/**
+ * Injects the configuration for the slider component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfSliderConfig()]
+ * })
+ * export class MySliderComponent {
+ *   readonly sliderConfig = injectDfSliderConfig();
+ * }
+ * ```
+ *
+ * @returns A writable signal containing the slider configuration.
+ *
+ * @since 22.0.0
+ */
+declare const injectDfSliderConfig: () => _angular_core.WritableSignal<Partial<DfSliderConfig>>;
+
+export { DfSlider, SLIDER_CONFIG_KEY, injectDfSliderConfig, provideDfSliderConfig };
+export type { DfSliderConfig, DfSliderSize };

package/types/design-factory-angular-toggle.d.ts

@@ -0,0 +1,93 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * Design Factory toggle switch.
+ *
+ * Renders a native `<input type="checkbox" role="switch">` underneath with a custom visual.
+ * Any projected content is rendered inline-end of the switch (typically the on/off state text,
+ * e.g. `{{ checked() ? 'On' : 'Off' }}`).
+ *
+ * Form integration is handled through `ControlValueAccessor`; `disabled`, `readonly`, and
+ * `required` states flow from the bound Angular form control.
+ *
+ * @experimental 22.0
+ */
+declare class DfToggle implements ControlValueAccessor {
+    /**
+     * ID of the internal `<input>` element.
+     *
+     * Defaults to a generated `dfId-[counter]` so the internal input always has a stable id that
+     * surrounding labels or form-field markup can target.
+     *
+     * @defaultValue `'dfId-[number]'`
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Checked state of the toggle.
+     *
+     * @defaultValue `false`
+     */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /**
+     * Size of the toggle.
+     *
+     * @defaultValue `'md'`
+     */
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /**
+     * Accessible name for the internal `<input>`. Use when the toggle has no visible label
+     * (e.g. when projected content describes state, not purpose).
+     *
+     * Forwarded to the internal `<input>` as `aria-label`. Prefer {@link ariaLabelledby} when a
+     * visible label element exists.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * IDs of one or more elements that label the internal `<input>`.
+     *
+     * Forwarded to the internal `<input>` as `aria-labelledby`. Used by the surrounding form-field
+     * markup to wire its label element to the toggle.
+     */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | null>;
+    /**
+     * Disabled state of the toggle.
+     *
+     * Combines additively with the disabled state driven by `ControlValueAccessor.setDisabledState`
+     * (typically `formControl.disable()`): the toggle is disabled if **either** source asks for it.
+     *
+     * Concrete behavior:
+     * - `[disabled]="true"` disables the toggle regardless of the form control state.
+     * - `formControl.disable()` disables the toggle regardless of the `[disabled]` value.
+     * - To re-enable, **both** sources must agree: clear `[disabled]` (or set it to `false`) **and**
+     *   call `formControl.enable()`.
+     * - There is no precedence/last-write-wins: the order in which the two sources change does not
+     *   matter. The combined state is recomputed reactively whenever either source changes.
+     *
+     * Use the input for ad-hoc disabling that does not need a form control (e.g. gating on a sibling
+     * signal); use the form control when the toggle is part of an Angular form.
+     *
+     * @defaultValue `false`
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disabled state driven by `ControlValueAccessor.setDisabledState` (form-driven channel). */
+    private readonly cvaDisabled;
+    /** Effective disabled state forwarded to the internal `<input>`: input OR form-driven. */
+    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    protected handleChange(event: Event): void;
+    protected handleBlur(): void;
+    /** @internal */
+    writeValue(value: boolean): void;
+    /** @internal */
+    registerOnChange(fn: (value: boolean) => void): void;
+    /** @internal */
+    registerOnTouched(fn: () => void): void;
+    /** @internal */
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfToggle, "df-toggle", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, never>;
+}
+
+export { DfToggle };

package/types/design-factory-angular-tooltip.d.ts

@@ -0,0 +1,113 @@
+import * as _angular_core from '@angular/core';
+import { AgnosWidgetDirective } from '@design-factory/angular/internals';
+import { TooltipWidget, TooltipSize, TooltipPlacement, TooltipProps } from '@design-factory/core/components/tooltip';
+
+/**
+ * Valid placement values for the tooltip.
+ * Includes all individual placement values plus `'auto'`, `'vertical'` and `'horizontal'` shortcuts.
+ *
+ * - `'auto'` expands to `'vertical horizontal'`
+ * - `'vertical'` expands to `'top top-start top-end bottom bottom-start bottom-end'`
+ * - `'horizontal'` expands to `'end end-end end-start start start-end start-start'`
+ *
+ * @since 22.0
+ */
+type DfTooltipPlacement = TooltipPlacement;
+/**
+ * Accepted value for the tooltip `placement` input.
+ *
+ * Either an array of placements or a space-separated string of placements, in order of preference.
+ * The first placement that fits the viewport will be used.
+ *
+ * @since 22.0
+ */
+type DfTooltipPlacementArray = DfTooltipPlacement[] | `${DfTooltipPlacement}${string}`;
+/**
+ * Available tooltip sizes.
+ * @since 22.0
+ */
+type DfTooltipSize = TooltipSize;
+/**
+ * A directive that attaches a tooltip to its host element.
+ *
+ * The tooltip is shown when the host element is hovered, receives keyboard focus or long press, and hidden when the mouse leaves,
+ * the element loses keyboard focus, or the user presses `Escape`. The tooltip window is rendered in `document.body` and
+ * positioned next to the host using the configured placement preference.
+ *
+ * @since 22.0
+ */
+declare class DfTooltip extends AgnosWidgetDirective<TooltipWidget> {
+    /**
+     * Text content to be displayed inside the tooltip.
+     */
+    readonly content: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * Size of the tooltip.
+     */
+    readonly size: _angular_core.InputSignal<TooltipSize | undefined>;
+    /**
+     * List of placements, in order of preference. The first valid placement will be used.
+     */
+    readonly placement: _angular_core.InputSignal<DfTooltipPlacementArray | undefined>;
+    /**
+     * Whether the tooltip is disabled. When `true`, the tooltip will not be displayed, even if the reference element is focused, hovered or long-pressed.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Whether showing or hiding the tooltip should be animated.
+     */
+    readonly animated: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTooltip, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfTooltip, "[dfTooltip]", never, { "content": { "alias": "dfTooltip"; "required": false; "isSignal": true; }; "size": { "alias": "dfTooltipSize"; "required": false; "isSignal": true; }; "placement": { "alias": "dfTooltipPlacement"; "required": false; "isSignal": true; }; "disabled": { "alias": "dfTooltipDisabled"; "required": false; "isSignal": true; }; "animated": { "alias": "dfTooltipAnimated"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Configuration options supported by `provideDfTooltipConfig`.
+ *
+ * These defaults apply to every `DfTooltip` instance within the providing injector, unless explicitly overridden on
+ * the directive itself.
+ *
+ * @since 22.0
+ */
+type DfTooltipConfig = Pick<TooltipProps, 'animated'>;
+/**
+ * Tooltip config key in the global DF component config.
+ * @since 22.0
+ */
+declare const TOOLTIP_CONFIG_KEY: "tooltip";
+/**
+ * Provides the configuration for the tooltip component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfTooltipConfig({ animated: false })]
+ * })
+ * export class MyHomeComponent {}
+ * ```
+ *
+ * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.
+ * @since 22.0
+ */
+declare const provideDfTooltipConfig: (config?: Partial<DfTooltipConfig> | ((prevConfig: Partial<DfTooltipConfig>) => Partial<DfTooltipConfig>) | undefined) => _angular_core.FactoryProvider;
+/**
+ * Injects the configuration for the tooltip component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfTooltipConfig()]
+ * })
+ * export class MyTooltipComponent {
+ *   readonly tooltipConfig = injectDfTooltipConfig();
+ * }
+ * ```
+ *
+ * @returns A writable signal containing the tooltip configuration.
+ * @since 22.0
+ */
+declare const injectDfTooltipConfig: () => _angular_core.WritableSignal<Partial<DfTooltipConfig>>;
+
+export { DfTooltip, TOOLTIP_CONFIG_KEY, injectDfTooltipConfig, provideDfTooltipConfig };
+export type { DfTooltipConfig, DfTooltipPlacement, DfTooltipPlacementArray, DfTooltipSize };