@cdevhub/ngx-tw 0.2.0

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

@@ -0,0 +1,127 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, AfterViewInit, Provider } from '@angular/core';
+import * as i1 from '@angular/cdk/stepper';
+import { CdkStep, CdkStepLabel, CdkStepper, StepperOrientation, StepState, StepperOptions } from '@angular/cdk/stepper';
+export { STEPPER_GLOBAL_OPTIONS, STEP_STATE, StepState, StepperOptions, StepperOrientation, StepperSelectionEvent } from '@angular/cdk/stepper';
+import { TwColor, TwSize } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the step indicator strip. */
+type StepperVariant = 'default' | 'dot' | 'simple';
+/** Context passed to custom `*twStepperIcon` templates. */
+interface StepperIconContext {
+    $implicit: {
+        index: number;
+        active: boolean;
+    };
+}
+type StepStyleState = 'pending' | 'active' | 'completed' | 'error' | 'disabled';
+/**
+ * Structural-style directive on an `<ng-template>` that replaces the default
+ * indicator icon for a given step state.
+ */
+declare class StepperIconDirective {
+    /** Step state this template overrides. Matches CDK's `StepState` values (`'number' | 'edit' | 'done' | 'error'`). */
+    readonly state: _angular_core.InputSignal<string | undefined>;
+    /** @internal */
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepperIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StepperIconDirective, "ng-template[twStepperIcon]", never, { "state": { "alias": "state"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Structural-style directive on an `<ng-template>` used as a custom step header
+ * label. Consumers write `<ng-template twStepLabel>…</ng-template>` inside `<tw-step>`.
+ */
+declare class StepLabelDirective extends CdkStepLabel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepLabelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StepLabelDirective, "ng-template[twStepLabel]", never, {}, {}, never, never, true, never>;
+}
+declare class StepComponent extends CdkStep {
+    /** Optional descriptive text shown under the step label in the `'default'` variant. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** @internal Custom indicator icon templates (one per state) projected into this step. */
+    readonly iconTemplates: _angular_core.Signal<readonly StepperIconDirective[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepComponent, "tw-step", ["twStep"], { "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, ["iconTemplates"], ["*"], true, never>;
+}
+declare class StepperComponent extends CdkStepper implements AfterViewInit {
+    /** Visual style of the indicator strip. `'default'` = numbered circles, `'dot'` = compact filled dots, `'simple'` = indicators only (labels hidden visually). Defaults to `'default'`. */
+    readonly variant: _angular_core.InputSignal<StepperVariant>;
+    /** Semantic color for active and completed indicators and connectors. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls indicator size and label typography. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** When true, steps with `hasError` render error styling, icon, and `aria-invalid`. Defaults to `true`. */
+    readonly showError: _angular_core.InputSignal<boolean>;
+    /** When true, clicking a navigable step header selects it. Set to `false` to only allow advancement via `twStepperNext` / `twStepperPrevious`. Defaults to `true`. */
+    readonly headerInteractive: _angular_core.InputSignal<boolean>;
+    private readonly _liveAnnouncer;
+    private readonly _destroyRef;
+    private readonly _globalOptions;
+    /**
+     * CdkStepper exposes its state via class properties (selectedIndex,
+     * previousIndex, orientation), not signals. We mirror those into signals so
+     * templates can react via @if/@for and OnPush change detection works without
+     * manual `markForCheck`. Sync happens in the property setters and lifecycle
+     * hooks below — keep these mirrors in lock-step with the CDK fields.
+     */
+    private readonly _orientationSignal;
+    private readonly _selectedIndexSignal;
+    private readonly _previousIndexSignal;
+    /** @internal Reactive mirror of CDK's `orientation` input. */
+    readonly orientationValue: _angular_core.Signal<StepperOrientation>;
+    /** @internal Reactive mirror of CDK's `selectedIndex`. */
+    readonly selectedIndexValue: _angular_core.Signal<number>;
+    set orientation(value: StepperOrientation);
+    get orientation(): StepperOrientation;
+    private readonly _variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly headerClasses: _angular_core.Signal<string>;
+    readonly stepItemClasses: _angular_core.Signal<string>;
+    readonly stepHeaderClasses: _angular_core.Signal<string>;
+    readonly stepIndicatorBaseClasses: _angular_core.Signal<string>;
+    readonly stepNumberClasses: _angular_core.Signal<string>;
+    readonly stepIconSlotClasses: _angular_core.Signal<string>;
+    readonly stepLabelWrapperClasses: _angular_core.Signal<string>;
+    readonly stepLabelBaseClasses: _angular_core.Signal<string>;
+    readonly stepDescriptionClasses: _angular_core.Signal<string>;
+    readonly stepOptionalHintClasses: _angular_core.Signal<string>;
+    readonly stepConnectorBaseClasses: _angular_core.Signal<string>;
+    readonly stepPanelClasses: _angular_core.Signal<string>;
+    readonly panelAnimationClass: _angular_core.Signal<"step-panel-enter-forward" | "step-panel-enter-backward" | null>;
+    ngAfterViewInit(): void;
+    /** @internal Typed view of projected steps. */
+    get twSteps(): readonly StepComponent[];
+    /** @internal Resolves the visual state of a step for color/theming purposes. */
+    getStepStyleState(step: StepComponent, index: number): StepStyleState;
+    /** @internal */
+    getIndicatorClass(step: StepComponent, index: number): string;
+    /** @internal */
+    getLabelClass(step: StepComponent, index: number): string;
+    /** @internal */
+    getConnectorClass(step: StepComponent, index: number): string;
+    /** @internal Resolves which indicator glyph to render for a step. */
+    getIndicatorType(step: StepComponent): StepState;
+    /** @internal Looks up a consumer-supplied custom template for a given indicator state. */
+    resolveIconTemplate(step: StepComponent, state: StepState): TemplateRef<StepperIconContext> | null;
+    /** @internal Context supplied to custom icon templates. */
+    iconContext(index: number): StepperIconContext;
+    /** @internal Click handler for the step header button. */
+    onHeaderClick(step: StepComponent, index: number): void;
+    /** @internal Whether the stepper should render the error state for a step. */
+    shouldRenderError(step: StepComponent): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepperComponent, "tw-stepper", ["twStepper"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showError": { "alias": "showError"; "required": false; "isSignal": true; }; "headerInteractive": { "alias": "headerInteractive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class StepperNextDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepperNextDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StepperNextDirective, "button[twStepperNext]", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkStepperNext; inputs: { "type": "type"; }; outputs: {}; }]>;
+}
+declare class StepperPreviousDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepperPreviousDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StepperPreviousDirective, "button[twStepperPrevious]", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkStepperPrevious; inputs: { "type": "type"; }; outputs: {}; }]>;
+}
+/** Provides app-wide stepper defaults via `STEPPER_GLOBAL_OPTIONS`. */
+declare function provideTwStepperOptions(options: StepperOptions): Provider[];
+
+export { StepComponent, StepLabelDirective, StepperComponent, StepperIconDirective, StepperNextDirective, StepperPreviousDirective, provideTwStepperOptions };
+export type { StepperIconContext, StepperVariant };

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

@@ -0,0 +1,88 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, Signal } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TwColor, TwSize, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
+
+/** Position of the label relative to the switch control. */
+type SwitchLabelPosition = 'before' | 'after';
+declare class SwitchComponent implements ControlValueAccessor, OnInit {
+    /** Sets the semantic color for the active (checked) track. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls the overall scale of the track, thumb, and label typography. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** When true, prevents interaction and applies muted styling. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** When true, sets `aria-required="true"` so assistive tech announces the control as required. Defaults to `false`. */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /** Optional inline label rendered next to the switch. 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 switch. Defaults to `'after'`. */
+    readonly labelPosition: _angular_core.InputSignal<SwitchLabelPosition>;
+    /** Optional name attribute, mirrored to the host for form association. */
+    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 switch. Mirrored to `aria-labelledby`. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that describes the switch. Mirrored to `aria-describedby`. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | undefined>;
+    /** Two-way bound checked state. Updates when the user toggles via click or Space. */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the switch 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. Does not fire when the value is updated programmatically via `writeValue`. */
+    readonly change: _angular_core.OutputEmitterRef<boolean>;
+    private readonly focusMonitor;
+    private readonly elementRef;
+    private readonly destroyRef;
+    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;
+    constructor();
+    readonly isDisabled: Signal<boolean>;
+    /** Whether the switch is in an error state per the configured `ErrorStateMatcher`. Reads the bound `NgControl.invalid` through the matcher. */
+    readonly errorState: Signal<boolean>;
+    readonly internalChecked: _angular_core.WritableSignal<boolean>;
+    readonly effectiveAriaLabelledby: Signal<string | undefined>;
+    readonly effectiveAriaDescribedby: Signal<string>;
+    private readonly variantResult;
+    readonly rootClasses: Signal<string>;
+    readonly switchClasses: Signal<string>;
+    readonly labelWrapClasses: Signal<string>;
+    readonly labelClasses: Signal<string>;
+    readonly descriptionClasses: Signal<string>;
+    readonly iconWrapClasses: Signal<string>;
+    readonly thumbClasses: Signal<string>;
+    readonly trackClasses: Signal<string>;
+    readonly onIconClasses: Signal<string>;
+    readonly offIconClasses: Signal<string>;
+    /** Toggles the checked state. No-op when disabled. */
+    toggle(): void;
+    /** Handles keyboard activation. Space toggles the switch — matches the ARIA `switch` role pattern (Enter is intentionally NOT handled, mirroring `<tw-checkbox>`). */
+    onKeydown(event: KeyboardEvent): void;
+    /** @internal Called on host blur to notify forms the control has been touched and recompute errorState. */
+    onBlur(): 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<SwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SwitchComponent, "tw-switch", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "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='off-icon']", "[slot='on-icon']", "*", "[slot='description']"], true, never>;
+}
+
+export { SwitchComponent };
+export type { SwitchLabelPosition };

package/types/cdevhub-ngx-tw-tab-nav.d.ts

@@ -0,0 +1,107 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { TabTriggerVariant, TwColor, TwSize } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the tab navigation strip. */
+type TabNavVariant = TabTriggerVariant;
+/** Optional label overrides for screen-reader announcements emitted by `TabNavComponent`. */
+interface TabNavLabels {
+    /** Formatter for the LiveAnnouncer message emitted when the active link changes in the ARIA tabs pattern. Receives the link's visible text, its 1-based index, and the total link count. */
+    activeTabAnnouncement?: (label: string, index: number, total: number) => string;
+}
+declare class TabNavPanel {
+    /** Unique id for this panel. Referenced by the active link's `aria-controls`. Auto-generated when not provided. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** @internal Id of the active link — set by the associated TabNavComponent. */
+    readonly activeTabId: _angular_core.WritableSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabNavPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabNavPanel, "tw-tab-nav-panel", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class TabNavComponent {
+    /** Visual style of the tab strip. Defaults to `'underline'`. */
+    readonly variant: _angular_core.InputSignal<TabTriggerVariant>;
+    /** Semantic color used for the active link indicator and text. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls padding and font size of tab links. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** When true, tab links stretch to fill available width equally. Defaults to `false`. */
+    readonly fitted: _angular_core.InputSignal<boolean>;
+    /** Associated panel element. When provided, the nav follows the ARIA tabs pattern (role=tablist). When omitted, it uses the standard navigation landmark pattern with `aria-current="page"` on the active link. A panel projected as a child of the `<nav>` is auto-discovered. */
+    readonly tabPanel: _angular_core.InputSignal<TabNavPanel | undefined>;
+    /** Additional classes merged onto the `<nav>` host. Useful for layout tweaks or borders that the default tv() config does not cover. */
+    readonly navClass: _angular_core.InputSignal<string>;
+    /** Additional classes merged onto every tab link. Applied after base/active/disabled classes so consumer styles always win the cascade. */
+    readonly linkClass: _angular_core.InputSignal<string>;
+    /** Optional label overrides for screen-reader announcements. Only used in the ARIA tabs pattern (i.e. when a panel is associated). */
+    readonly labels: _angular_core.InputSignal<TabNavLabels>;
+    /** @internal Tab links discovered via content projection. */
+    readonly links: _angular_core.Signal<readonly TabLinkDirective[]>;
+    /** @internal Panel discovered as a content child of the nav. */
+    readonly projectedPanel: _angular_core.Signal<TabNavPanel | undefined>;
+    /** @internal Resolved panel — explicit `tabPanel` input wins, falls back to a projected `<tw-tab-nav-panel>` inside the nav. */
+    readonly resolvedPanel: _angular_core.Signal<TabNavPanel | undefined>;
+    private readonly liveAnnouncer;
+    /** Tracks the previously-announced active link id so we only announce on actual changes. `null` = before the first sync. */
+    private readonly previousActiveLinkId;
+    private readonly layoutResult;
+    private readonly triggerResult;
+    /** @internal Combined classes applied to the `<nav>` host. */
+    readonly navClasses: _angular_core.Signal<string>;
+    /** @internal Base trigger classes (without active/inactive state). `no-underline` is appended because anchors need to override the default browser underline — tabs (which uses `<div role="tab">`) doesn't need it. */
+    readonly linkBaseClasses: _angular_core.Signal<string>;
+    /** @internal ARIA role — `tablist` when a tabPanel is associated, otherwise inherited from `<nav>`. */
+    readonly role: _angular_core.Signal<"tablist" | null>;
+    /** @internal ARIA orientation — only set in the tabs pattern. */
+    readonly ariaOrientation: _angular_core.Signal<"horizontal" | null>;
+    /** @internal Classes applied to the active state of a link, based on current variant and color. tab-nav is horizontal-only, so the orientation argument is hard-coded. */
+    readonly activeLinkClasses: _angular_core.Signal<string>;
+    /** @internal Classes applied to the inactive state of a link, based on current variant. */
+    readonly inactiveLinkClasses: _angular_core.Signal<string>;
+    private keyManager;
+    constructor();
+    /** @internal Handles arrow-key navigation in the ARIA tabs pattern via CDK FocusKeyManager. Manual activation: focus moves, but the link is only activated on Enter/Space (handled by the anchor itself). */
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabNavComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabNavComponent, "nav[twTabNav]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fitted": { "alias": "fitted"; "required": false; "isSignal": true; }; "tabPanel": { "alias": "tabPanel"; "required": false; "isSignal": true; }; "navClass": { "alias": "navClass"; "required": false; "isSignal": true; }; "linkClass": { "alias": "linkClass"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, {}, ["links", "projectedPanel"], ["*"], true, never>;
+}
+declare class TabLinkDirective {
+    /** @internal */
+    readonly elementRef: ElementRef<HTMLAnchorElement>;
+    private readonly parent;
+    /** Whether the link represents the current active page/tab. Typically bound to router state. Defaults to `false`. */
+    readonly active: _angular_core.InputSignal<boolean>;
+    /** When true, the link is visually disabled and cannot be activated by click or keyboard. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Unique id for this link. Referenced by the panel's `aria-labelledby` when the link is active. Auto-generated when not provided. */
+    readonly linkId: _angular_core.InputSignal<string>;
+    /**
+     * @internal ARIA role — `'tab'` when the nav is wired to a panel (APG
+     * tablist pattern requires `role="tab"` on every link); `null` otherwise so
+     * the anchor's native `role="link"` wins. Do NOT collapse to a single
+     * branch — both are meaningful.
+     */
+    readonly linkRole: _angular_core.Signal<"tab" | null>;
+    /** @internal `aria-current="page"` on the active link when no tabPanel is associated. */
+    readonly ariaCurrent: _angular_core.Signal<"page" | null>;
+    /** @internal `aria-selected` applied only in the tabs pattern. */
+    readonly ariaSelected: _angular_core.Signal<"true" | "false" | null>;
+    /** @internal `aria-controls` points to the associated panel id. */
+    readonly ariaControls: _angular_core.Signal<string | null>;
+    /** @internal */
+    readonly ariaDisabled: _angular_core.Signal<"true" | null>;
+    /** @internal Tabindex — roving in the tabs pattern, default for navigation links, always -1 when disabled. */
+    readonly tabIndex: _angular_core.Signal<0 | -1 | null>;
+    /** @internal Combined classes: base + active/inactive state + disabled modifiers + consumer overrides. */
+    readonly classes: _angular_core.Signal<string>;
+    /** Programmatically focus this link. */
+    focus(): void;
+    /** @internal Intercepts clicks on disabled links to prevent navigation. */
+    onClick(event: MouseEvent): void;
+    /** @internal Handles keyboard activation: blocks Enter/Space on disabled links, and activates the link on Space for enabled ones (anchors do not respond to Space by default). */
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabLinkDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabLinkDirective, "a[twTabLink]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "linkId": { "alias": "linkId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { TabLinkDirective, TabNavComponent, TabNavPanel };
+export type { TabNavLabels, TabNavVariant };