@cdevhub/ngx-tw 0.2.0

package/types/cdevhub-ngx-tw-progress-bar.d.ts

@@ -0,0 +1,100 @@
+import * as _angular_core from '@angular/core';
+import { TwColor } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the progress bar. */
+type ProgressBarVariant = 'linear' | 'segmented';
+/** Size scale specific to progress bars (bar thickness). */
+type ProgressBarSize = 'sm' | 'md' | 'lg';
+/** Function signature for formatting the visible / announced progress value. */
+type ProgressBarValueFormatter = (value: number, max: number, min: number) => string;
+/**
+ * Non-visual configuration bundled into a single input to keep the component's public
+ * surface small. Every field is optional and falls back to a sensible default.
+ */
+interface ProgressBarOptions {
+    /** Lower bound of the value range. Defaults to `0`. */
+    min?: number;
+    /** Upper bound of the value range. Defaults to `100`. */
+    max?: number;
+    /** Number of equal cells when `variant` is `'segmented'`. Ignored for `'linear'`. Defaults to `5`. */
+    segments?: number;
+    /** When true, renders the formatted progress value next to the label. Defaults to `false`. */
+    showValue?: boolean;
+    /** Custom formatter for the displayed and announced value. Defaults to an integer percentage, e.g. `'42%'`. */
+    formatter?: ProgressBarValueFormatter;
+    /** Accessible name when no visible `label` is provided. Mirrored to `aria-label` on the progressbar element. */
+    ariaLabel?: string;
+    /** ID of an external element that labels the progress bar. Mirrored to `aria-labelledby`. */
+    ariaLabelledby?: string;
+}
+/**
+ * Indicates progress toward the completion of a task.
+ *
+ * @example
+ * ```html
+ * <tw-progress-bar [value]="40" />
+ * <tw-progress-bar label="Fetching records" />
+ * <tw-progress-bar
+ *   variant="segmented"
+ *   [value]="step() * 25"
+ *   [options]="{ segments: 4 }"
+ * />
+ * ```
+ */
+declare class ProgressBarComponent {
+    /** Current progress value. When null or undefined, the bar renders indeterminate. Values outside `[options.min, options.max]` are clamped. */
+    readonly value: _angular_core.InputSignal<number | null | undefined>;
+    /** Visual style of the bar. `'linear'` renders a single fill; `'segmented'` splits the rail into discrete steps. Defaults to `'linear'`. */
+    readonly variant: _angular_core.InputSignal<ProgressBarVariant>;
+    /** Semantic color of the filled portion. Defaults to `'primary'`. Use status colors (`success`/`warning`/`error`) to reflect task outcome. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Bar thickness. `'sm'` = h-1, `'md'` = h-2, `'lg'` = h-3. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<ProgressBarSize>;
+    /** Visible label rendered above the bar. When set, the bar is wired to the label via `aria-labelledby`. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Bundles non-visual configuration: value range (`min`/`max`/`segments`), value readout (`showValue`/`formatter`), and accessibility fallbacks (`ariaLabel`/`ariaLabelledby`). Every field is optional. */
+    readonly options: _angular_core.InputSignal<ProgressBarOptions | undefined>;
+    /** @internal */
+    readonly labelId: string;
+    /** @internal */
+    readonly resolvedMin: _angular_core.Signal<number>;
+    /** @internal */
+    readonly resolvedMax: _angular_core.Signal<number>;
+    /** @internal */
+    readonly resolvedSegments: _angular_core.Signal<number>;
+    /** @internal */
+    readonly resolvedShowValue: _angular_core.Signal<boolean>;
+    /** @internal */
+    readonly isIndeterminate: _angular_core.Signal<boolean>;
+    /** @internal */
+    readonly clampedValue: _angular_core.Signal<number>;
+    /** @internal */
+    readonly progressRatio: _angular_core.Signal<number>;
+    /** @internal */
+    readonly formattedValue: _angular_core.Signal<string>;
+    /** @internal */
+    readonly hasHeader: _angular_core.Signal<boolean>;
+    /** @internal */
+    readonly segmentIndices: _angular_core.Signal<number[]>;
+    /** @internal */
+    readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
+    /** @internal */
+    readonly resolvedAriaLabelledby: _angular_core.Signal<string | null>;
+    private readonly variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly headerClasses: _angular_core.Signal<string>;
+    readonly labelClasses: _angular_core.Signal<string>;
+    readonly valueTextClasses: _angular_core.Signal<string>;
+    readonly railClasses: _angular_core.Signal<string>;
+    readonly fillClasses: _angular_core.Signal<string>;
+    readonly segmentListClasses: _angular_core.Signal<string>;
+    private readonly segmentBaseClasses;
+    /** @internal */
+    segmentClassFor(index: number): string;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "tw-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ProgressBarComponent };
+export type { ProgressBarOptions, ProgressBarSize, ProgressBarValueFormatter, ProgressBarVariant };

package/types/cdevhub-ngx-tw-radio.d.ts

@@ -0,0 +1,174 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, ElementRef, Signal } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TwColor, TwSize, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the selected radio indicator. */
+type RadioVariant = 'solid' | 'outline';
+/** Layout direction of a radio group. */
+type RadioOrientation = 'horizontal' | 'vertical';
+/** Position of the label relative to the radio control. */
+type RadioLabelPosition = 'before' | 'after';
+declare class RadioComponent implements ControlValueAccessor, OnInit {
+    /** The value this radio contributes when selected inside a `tw-radio-group`. Required when nested in a group; ignored when used standalone. */
+    readonly value: _angular_core.InputSignal<unknown>;
+    /** Overrides the parent group's color for this radio. When undefined, inherits from the group (or defaults to `'primary'` standalone). */
+    readonly color: _angular_core.InputSignal<TwColor | undefined>;
+    /** Overrides the parent group's size for this radio. When undefined, inherits from the group (or defaults to `'md'` standalone). */
+    readonly size: _angular_core.InputSignal<TwSize | undefined>;
+    /** Overrides the parent group's variant for this radio. When undefined, inherits from the group (or defaults to `'solid'` standalone). */
+    readonly variant: _angular_core.InputSignal<RadioVariant | undefined>;
+    /** When true, disables this radio regardless of the group's state. Group-disabled always wins as an OR. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Optional inline label rendered next to the radio. Use default content projection for rich label content instead. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Optional secondary description rendered under the label. Use `[slot="description"]` content projection for rich content instead. */
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /** Position of the label/description relative to the radio. Defaults to `'after'`. */
+    readonly labelPosition: _angular_core.InputSignal<RadioLabelPosition>;
+    /** Optional name attribute for standalone use. Ignored when the parent group provides a name. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name when no visible label is provided. Mirrored to `aria-label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that labels the radio. Mirrored to `aria-labelledby`. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that describes the radio. Mirrored to `aria-describedby`. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | undefined>;
+    /** Two-way bound checked state. Authoritative only in standalone mode; when inside a `tw-radio-group`, this model reflects group selection but does NOT drive it. */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the radio uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Fires after the checked state changes from a user interaction on this radio. In grouped mode only fires when this radio becomes the selected one. Does not fire when selection is updated programmatically. */
+    readonly change: _angular_core.OutputEmitterRef<boolean>;
+    private readonly focusMonitor;
+    readonly elementRef: ElementRef<any>;
+    private readonly destroyRef;
+    private readonly parent;
+    private readonly ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    private onChange;
+    private onTouched;
+    private readonly cvaDisabled;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    private readonly uid;
+    readonly hostId: string;
+    readonly labelId: string;
+    readonly descriptionId: string;
+    private readonly internalChecked;
+    /** Resolved color — radio's own color wins, then group's, then `'primary'`. */
+    readonly effectiveColor: Signal<TwColor>;
+    /** Resolved size — radio's own size wins, then group's, then `'md'`. */
+    readonly effectiveSize: Signal<TwSize>;
+    /** Resolved variant — radio's own variant wins, then group's, then `'solid'`. */
+    readonly effectiveVariant: Signal<RadioVariant>;
+    /** Resolved name attribute — parent group's name wins for HTML form semantics. */
+    readonly effectiveName: Signal<any>;
+    /** Whether this radio is currently selected (grouped: parent.value === this.value; standalone: internal checked). */
+    readonly isSelected: Signal<boolean>;
+    /** Whether this radio is disabled (own disabled OR parent's disabled OR CVA-disabled). */
+    readonly isDisabled: Signal<any>;
+    /** Whether the radio is in an error state per the configured `ErrorStateMatcher`. Inherits from the parent group when wrapped; falls back to its own NgControl when standalone. */
+    readonly errorState: Signal<boolean>;
+    /** Roving tabindex: in a group, only the selected (or first enabled if none selected) radio is focusable. Standalone radios are always focusable unless disabled. */
+    readonly isFocusable: Signal<boolean>;
+    readonly effectiveAriaLabelledby: Signal<string | undefined>;
+    readonly effectiveAriaDescribedby: Signal<string>;
+    private readonly variantResult;
+    readonly rootClasses: Signal<string>;
+    readonly circleWrapClasses: Signal<string>;
+    readonly labelWrapClasses: Signal<string>;
+    readonly labelClasses: Signal<string>;
+    readonly descriptionClasses: Signal<string>;
+    readonly dotWrapClasses: Signal<string>;
+    readonly circleClasses: Signal<string>;
+    readonly dotClasses: Signal<string>;
+    constructor();
+    /** Called by user click or group keyboard handler. Selects this radio. */
+    onActivate(): void;
+    /** Handles keyboard activation. Space selects; Enter does NOT — matches native `<input type="radio">` semantics. */
+    onKeydown(event: KeyboardEvent): void;
+    /** @internal Host blur. In a group, notifies the group's CVA touched callback; standalone, notifies the local CVA. */
+    onBlur(): void;
+    /** Focuses the host element. Required for keyboard navigation from the group. */
+    focus(): void;
+    writeValue(value: boolean | null | undefined): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    ngOnInit(): void;
+    private hasAccessibleNameHint;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "tw-radio", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "change": "change"; }, never, ["[slot='dot']", "*", "[slot='description']"], true, never>;
+}
+declare class RadioGroupComponent<T = unknown> implements ControlValueAccessor, OnInit {
+    /** Sets the semantic color applied to the selected radio's dot/ring. Propagated to children unless a child overrides it. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls the overall scale of radios inside the group. Propagated to children unless a child overrides it. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Visual style of the selected indicator. `'solid'` fills the dot with the color against a colored ring; `'outline'` keeps a transparent fill with a colored ring and colored dot. Propagated to children unless a child overrides it. Defaults to `'solid'`. */
+    readonly variant: _angular_core.InputSignal<RadioVariant>;
+    /** Layout direction of the group. Drives `aria-orientation` and the arrow-key model. Defaults to `'vertical'`. */
+    readonly orientation: _angular_core.InputSignal<RadioOrientation>;
+    /** When true, disables every radio in the group and blocks keyboard interaction. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** When true, sets `aria-required="true"` on the group for assistive tech. Defaults to `false`. */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /** Optional form-association name. Propagated to each child radio's host `name` attribute so standard HTML form semantics still apply. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name for the group when no visible label is provided. Mirrored to `aria-label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that labels the group. Mirrored to `aria-labelledby`. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that describes the group. Mirrored to `aria-describedby`. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | undefined>;
+    /** Two-way bound selected value. Updates when the user picks a radio; fires `valueChange`. `null` means no selection. */
+    readonly value: _angular_core.ModelSignal<T | null>;
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the group uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Fires after the selected value changes from a user interaction. Does not fire when the value is updated programmatically via `writeValue`. */
+    readonly change: _angular_core.OutputEmitterRef<T | null>;
+    /** @internal Child radios discovered via content projection. */
+    readonly radios: Signal<readonly RadioComponent[]>;
+    private readonly focusMonitor;
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    readonly hostId: string;
+    private onChange;
+    private onTouched;
+    private readonly cvaDisabled;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    /** Effective disabled state — input OR CVA disabled. */
+    readonly isDisabled: Signal<boolean>;
+    /** Group-level error state per the configured `ErrorStateMatcher`. Reads the bound `NgControl.invalid` through the matcher; child radios inherit from this when wrapped in the group. */
+    readonly errorState: Signal<boolean>;
+    readonly activeValue: _angular_core.WritableSignal<T | null>;
+    private readonly variantResult;
+    readonly rootClasses: Signal<string>;
+    constructor();
+    /** Selects the given value from a user interaction. Updates the model and notifies forms. */
+    selectValue(next: unknown): void;
+    /** @internal Called by child radios on blur — propagates to CVA onTouched and bumps the errorState revision so a blur on a child radio refreshes the group's `aria-invalid`. */
+    notifyTouched(): void;
+    onKeydown(event: KeyboardEvent): void;
+    private findNextEnabledIndex;
+    private firstEnabledIndex;
+    private lastEnabledIndex;
+    writeValue(value: T | null): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioGroupComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioGroupComponent<any>, "tw-radio-group", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "change": "change"; }, ["radios"], ["*"], true, never>;
+}
+
+export { RadioComponent, RadioGroupComponent };
+export type { RadioLabelPosition, RadioOrientation, RadioVariant };

package/types/cdevhub-ngx-tw-segmented-control.d.ts

@@ -0,0 +1,66 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TwColor, TwSize, TwOrientation } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the active indicator. */
+type SegmentedControlVariant = 'surface' | 'filled' | 'outline';
+/** Border-radius shape of the container and options. */
+type SegmentedControlRounded = 'pill' | 'md';
+declare class SegmentedControlOptionComponent {
+    /** Unique value identifying this option. Required. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** When true, this option cannot be selected and is skipped by keyboard navigation. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly elementRef: ElementRef<any>;
+    private readonly parent;
+    readonly id: string;
+    constructor();
+    readonly isActive: _angular_core.Signal<boolean>;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly isFocusable: _angular_core.Signal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    select(): void;
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedControlOptionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedControlOptionComponent, "tw-segmented-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class SegmentedControlComponent implements ControlValueAccessor {
+    /** Controls the active indicator style. `'surface'` shows a raised white pill; `'filled'` shows a solid colored background; `'outline'` shows a colored ring border. Defaults to `'surface'`. */
+    readonly variant: _angular_core.InputSignal<SegmentedControlVariant>;
+    /** Sets the semantic color for the active option indicator. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls padding, font size, and gap of options. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Layout direction of the control. Defaults to `'horizontal'`. */
+    readonly orientation: _angular_core.InputSignal<TwOrientation>;
+    /** Controls the border-radius shape of the container and options. `'pill'` uses fully rounded corners; `'md'` uses standard radius. Vertical orientation forces `'md'`. Defaults to `'pill'`. */
+    readonly rounded: _angular_core.InputSignal<SegmentedControlRounded>;
+    /** When true, prevents all interaction and applies muted styling. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** The value of the currently selected option. Two-way bound. Updates on user selection. */
+    readonly value: _angular_core.ModelSignal<string | null>;
+    /** @internal */
+    readonly options: _angular_core.Signal<readonly SegmentedControlOptionComponent[]>;
+    private onChange;
+    private onTouched;
+    private readonly cvaDisabled;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly activeValue: _angular_core.WritableSignal<string | null>;
+    /** @internal Read by `SegmentedControlOptionComponent.classes` to resolve the option's tv() bucket. Vertical orientation forces `'md'` regardless of input. */
+    readonly effectiveRounded: _angular_core.Signal<SegmentedControlRounded>;
+    private readonly variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    selectOption(val: string): void;
+    onKeydown(event: KeyboardEvent): void;
+    private findNextEnabledIndex;
+    writeValue(val: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedControlComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedControlComponent, "tw-segmented-control", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["options"], ["*"], true, never>;
+}
+
+export { SegmentedControlComponent, SegmentedControlOptionComponent };
+export type { SegmentedControlRounded, SegmentedControlVariant };