@shival99/z-ui 2.6.8 → 2.6.10

package/types/shival99-z-ui-components-z-filter.d.ts

@@ -0,0 +1,285 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, ElementRef, PipeTransform } from '@angular/core';
+import { ZCalendarSize, ZDateRange } from '@shival99/z-ui/components/z-calendar';
+import { ZIcon } from '@shival99/z-ui/components/z-icon';
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+type ZFilterSize = 'sm' | 'md' | 'lg';
+type ZFilterFieldType = 'select' | 'multiselect' | 'date' | 'daterange' | 'text' | 'number' | 'numberrange' | 'boolean' | 'email' | 'url' | 'tel' | 'time' | 'datetime' | 'custom' | 'separator';
+interface ZFilterOption<T = unknown> {
+    value: T;
+    label: string;
+    icon?: ZIcon;
+    metadata?: Record<string, unknown>;
+}
+interface ZFilterOperator {
+    value: string;
+    label: string;
+    supportsMultiple?: boolean;
+}
+interface ZFilterCustomRendererContext<T = unknown> {
+    field: ZFilterFieldConfig<T>;
+    values: T[];
+    operator: string;
+    onChange: (values: T[]) => void;
+}
+interface ZFilterFieldConfig<T = unknown> {
+    key?: string;
+    label?: string;
+    icon?: ZIcon;
+    type?: ZFilterFieldType;
+    group?: string;
+    fields?: ZFilterFieldConfig<T>[];
+    options?: ZFilterOption<T>[];
+    operators?: ZFilterOperator[];
+    customRenderer?: TemplateRef<ZFilterCustomRendererContext<T>>;
+    customValueRenderer?: TemplateRef<{
+        values: T[];
+        options: ZFilterOption<T>[];
+    }>;
+    placeholder?: string;
+    searchable?: boolean;
+    maxSelections?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    prefix?: string;
+    suffix?: string;
+    pattern?: string;
+    validation?: (value: unknown) => boolean;
+    allowCustomValues?: boolean;
+    className?: string;
+    popoverContentClassName?: string;
+    selectedOptionsClassName?: string;
+    onLabel?: string;
+    offLabel?: string;
+    defaultOperator?: string;
+}
+interface ZFilterFieldGroup<T = unknown> {
+    group?: string;
+    fields: ZFilterFieldConfig<T>[];
+}
+type ZFilterFieldsConfig<T = unknown> = ZFilterFieldConfig<T>[] | ZFilterFieldGroup<T>[];
+interface ZFilter<T = unknown> {
+    id: string;
+    field: string;
+    operator: string;
+    values: T[];
+}
+interface ZFilterI18nConfig {
+    addFilter: string;
+    searchFields: string;
+    noFieldsFound: string;
+    noResultsFound: string;
+    select: string;
+    true: string;
+    false: string;
+    min: string;
+    max: string;
+    to: string;
+    selected: string;
+    selectedCount: string;
+    addFilterTitle: string;
+    operators: {
+        is: string;
+        isNot: string;
+        isAnyOf: string;
+        isNotAnyOf: string;
+        includesAll: string;
+        excludesAll: string;
+        before: string;
+        after: string;
+        between: string;
+        notBetween: string;
+        contains: string;
+        notContains: string;
+        startsWith: string;
+        endsWith: string;
+        isExactly: string;
+        equals: string;
+        notEquals: string;
+        greaterThan: string;
+        lessThan: string;
+        overlaps: string;
+        includes: string;
+        excludes: string;
+        includesAllOf: string;
+        includesAnyOf: string;
+        empty: string;
+        notEmpty: string;
+    };
+    placeholders: {
+        enterField: string;
+        selectField: string;
+        searchField: string;
+        enterKey: string;
+        enterValue: string;
+    };
+    validation: {
+        invalidEmail: string;
+        invalidUrl: string;
+        invalidTel: string;
+        invalid: string;
+    };
+}
+declare const DEFAULT_FILTER_I18N: ZFilterI18nConfig;
+
+declare class ZFilterComponent<T = unknown> {
+    readonly addButtonTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    readonly zFiltersChange: _angular_core.OutputEmitterRef<ZFilter<T>[]>;
+    readonly zFilterAdd: _angular_core.OutputEmitterRef<ZFilter<T>>;
+    readonly zFilterRemove: _angular_core.OutputEmitterRef<ZFilter<T>>;
+    readonly zFilterUpdate: _angular_core.OutputEmitterRef<{
+        filter: ZFilter<T>;
+        updates: Partial<ZFilter<T>>;
+    }>;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    readonly zFilters: _angular_core.InputSignal<ZFilter<T>[]>;
+    readonly zFields: _angular_core.InputSignal<ZFilterFieldsConfig<T>>;
+    readonly zSize: _angular_core.InputSignal<ZFilterSize>;
+    readonly zI18n: _angular_core.InputSignal<Partial<ZFilterI18nConfig>>;
+    readonly zShowAddButton: _angular_core.InputSignal<boolean>;
+    readonly zAllowMultiple: _angular_core.InputSignal<boolean>;
+    readonly zAddButtonIcon: _angular_core.InputSignal<ZIcon>;
+    readonly zAddButtonText: _angular_core.InputSignal<string | undefined>;
+    protected readonly addFilterOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly searchQuery: _angular_core.WritableSignal<string>;
+    protected readonly operatorPopoverOpen: _angular_core.WritableSignal<string | null>;
+    protected readonly valuePopoverOpen: _angular_core.WritableSignal<string | null>;
+    protected readonly addFilterSearchInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected focusSearchInput(): void;
+    protected focusSelectSearch(filterId: string): void;
+    protected readonly i18n: _angular_core.Signal<ZFilterI18nConfig>;
+    protected readonly fieldsMap: _angular_core.Signal<Record<string, ZFilterFieldConfig<T>>>;
+    protected readonly selectableFields: _angular_core.Signal<ZFilterFieldConfig<T>[]>;
+    protected readonly filteredFields: _angular_core.Signal<ZFilterFieldConfig<T>[]>;
+    protected readonly groupedFields: _angular_core.Signal<{
+        group: string;
+        fields: ZFilterFieldConfig<T>[];
+    }[]>;
+    protected readonly buttonSize: _angular_core.Signal<"sm" | "lg" | "default">;
+    protected readonly calendarSize: _angular_core.Signal<ZCalendarSize>;
+    protected readonly dateValueMap: _angular_core.Signal<Record<string, Date | null>>;
+    protected readonly dateRangeValueMap: _angular_core.Signal<Record<string, ZDateRange | null>>;
+    protected readonly timeValueMap: _angular_core.Signal<Record<string, Date | null>>;
+    protected readonly dateTimeValueMap: _angular_core.Signal<Record<string, Date | null>>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected getItemClasses(): string;
+    protected getLabelClasses(): string;
+    protected getInputClasses(): string;
+    protected getRemoveButtonClasses(): string;
+    protected getBetweenClasses(): string;
+    protected getFieldForFilter(filter: ZFilter<T>): ZFilterFieldConfig<T> | undefined;
+    protected getOperatorsForFilter(filter: ZFilter<T>): ZFilterOperator[];
+    protected getOperatorLabel(filter: ZFilter<T>): string;
+    protected getSelectedOptions(filter: ZFilter<T>): ZFilterOption<T>[];
+    protected getUnselectedOptions(filter: ZFilter<T>): ZFilterOption<T>[];
+    protected isValueHidden(filter: ZFilter<T>): boolean;
+    protected isBetweenOperator(filter: ZFilter<T>): boolean;
+    protected getInputPattern(field: ZFilterFieldConfig<T>): string | undefined;
+    protected onFieldSelect(field: ZFilterFieldConfig<T>): void;
+    protected updateFilterOperator(filter: ZFilter<T>, operator: string): void;
+    protected onSelectValueChange(filter: ZFilter<T>, option: ZFilterOption<T>): void;
+    protected onDateValueChange(filter: ZFilter<T>, value: Date | null): void;
+    protected onDateRangeValueChange(filter: ZFilter<T>, value: ZDateRange | null): void;
+    protected onTimeValueChange(filter: ZFilter<T>, value: Date | null): void;
+    protected onDateTimeValueChange(filter: ZFilter<T>, value: Date | null): void;
+    protected removeFilter(filter: ZFilter<T>): void;
+    protected onInputChange(filter: ZFilter<T>, event: Event, index?: number): void;
+    protected onBooleanChange(filter: ZFilter<T>, checked: boolean): void;
+    protected onSearchInput(event: Event): void;
+    protected trackByFilterId(index: number, filter: ZFilter<T>): string;
+    protected trackByOptionValue(index: number, option: ZFilterOption<T>): unknown;
+    protected trackByFieldKey(index: number, field: ZFilterFieldConfig<T>): string;
+    private _updateFilterValues;
+    private _parseDateValue;
+    private _formatDateValue;
+    private _parseTimeValue;
+    private _parseDateTimeValue;
+    private _formatTimeValue;
+    private _formatDateTimeValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZFilterComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZFilterComponent<any>, "z-filter", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zFilters": { "alias": "zFilters"; "required": true; "isSignal": true; }; "zFields": { "alias": "zFields"; "required": true; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zI18n": { "alias": "zI18n"; "required": false; "isSignal": true; }; "zShowAddButton": { "alias": "zShowAddButton"; "required": false; "isSignal": true; }; "zAllowMultiple": { "alias": "zAllowMultiple"; "required": false; "isSignal": true; }; "zAddButtonIcon": { "alias": "zAddButtonIcon"; "required": false; "isSignal": true; }; "zAddButtonText": { "alias": "zAddButtonText"; "required": false; "isSignal": true; }; }, { "zFiltersChange": "zFiltersChange"; "zFilterAdd": "zFilterAdd"; "zFilterRemove": "zFilterRemove"; "zFilterUpdate": "zFilterUpdate"; }, ["addButtonTemplate"], never, true, never>;
+}
+
+declare class ZFilterFieldPipe implements PipeTransform {
+    transform(filter: ZFilter, fields: ZFilterFieldsConfig): ZFilterFieldConfig | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZFilterFieldPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZFilterFieldPipe, "zFilterField", true>;
+}
+
+declare class ZFilterOperatorLabelPipe implements PipeTransform {
+    transform(filter: ZFilter, fields: ZFilterFieldsConfig, i18n: ZFilterI18nConfig): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZFilterOperatorLabelPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZFilterOperatorLabelPipe, "zFilterOperatorLabel", true>;
+}
+
+declare class ZFilterOperatorsPipe implements PipeTransform {
+    transform(filter: ZFilter, fields: ZFilterFieldsConfig, i18n: ZFilterI18nConfig): ZFilterOperator[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZFilterOperatorsPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZFilterOperatorsPipe, "zFilterOperators", true>;
+}
+
+declare class ZFilterSelectedOptionsPipe implements PipeTransform {
+    transform(filter: ZFilter, fields: ZFilterFieldsConfig): ZFilterOption[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZFilterSelectedOptionsPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZFilterSelectedOptionsPipe, "zFilterSelectedOptions", true>;
+}
+
+declare class ZFilterUnselectedOptionsPipe implements PipeTransform {
+    transform(filter: ZFilter, fields: ZFilterFieldsConfig): ZFilterOption[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZFilterUnselectedOptionsPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZFilterUnselectedOptionsPipe, "zFilterUnselectedOptions", true>;
+}
+
+declare class ZFilterInputPatternPipe implements PipeTransform {
+    transform(field: ZFilterFieldConfig): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZFilterInputPatternPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZFilterInputPatternPipe, "zFilterInputPattern", true>;
+}
+
+declare class ZFilterIsValueHiddenPipe implements PipeTransform {
+    transform(filter: ZFilter): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZFilterIsValueHiddenPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZFilterIsValueHiddenPipe, "zFilterIsValueHidden", true>;
+}
+
+declare class ZFilterIsBetweenOperatorPipe implements PipeTransform {
+    transform(filter: ZFilter): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZFilterIsBetweenOperatorPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZFilterIsBetweenOperatorPipe, "zFilterIsBetweenOperator", true>;
+}
+
+declare const Z_FILTER_PIPES: readonly [typeof ZFilterFieldPipe, typeof ZFilterOperatorLabelPipe, typeof ZFilterOperatorsPipe, typeof ZFilterSelectedOptionsPipe, typeof ZFilterUnselectedOptionsPipe, typeof ZFilterInputPatternPipe, typeof ZFilterIsValueHiddenPipe, typeof ZFilterIsBetweenOperatorPipe];
+
+declare function createFilter<T = unknown>(field: string, operator?: string, values?: T[]): ZFilter<T>;
+declare function flattenFields<T = unknown>(fields: ZFilterFieldsConfig<T>): ZFilterFieldConfig<T>[];
+declare function getFieldsMap<T = unknown>(fields: ZFilterFieldsConfig<T>): Record<string, ZFilterFieldConfig<T>>;
+declare function getOperatorsForField<T = unknown>(field: ZFilterFieldConfig<T>, values: T[], i18n: ZFilterI18nConfig): ZFilterOperator[];
+declare function formatOperator(operator: string): string;
+declare function getDefaultOperator(fieldType: string): string;
+declare function getDefaultValues<T = unknown>(fieldType: string, field: ZFilterFieldConfig<T>): unknown[];
+declare function getInputPattern(fieldType: string): string | undefined;
+
+declare const zFilterContainerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zFilterItemVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zFilterFieldLabelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zFilterInputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zFilterRemoveButtonVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zFilterBetweenVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+export { DEFAULT_FILTER_I18N, ZFilterComponent, ZFilterFieldPipe, ZFilterInputPatternPipe, ZFilterIsBetweenOperatorPipe, ZFilterIsValueHiddenPipe, ZFilterOperatorLabelPipe, ZFilterOperatorsPipe, ZFilterSelectedOptionsPipe, ZFilterUnselectedOptionsPipe, Z_FILTER_PIPES, createFilter, flattenFields, formatOperator, getDefaultOperator, getDefaultValues, getFieldsMap, getInputPattern, getOperatorsForField, zFilterBetweenVariants, zFilterContainerVariants, zFilterFieldLabelVariants, zFilterInputVariants, zFilterItemVariants, zFilterRemoveButtonVariants };
+export type { ZFilter, ZFilterCustomRendererContext, ZFilterFieldConfig, ZFilterFieldGroup, ZFilterFieldType, ZFilterFieldsConfig, ZFilterI18nConfig, ZFilterOperator, ZFilterOption, ZFilterSize };

package/types/shival99-z-ui-components-z-modal.d.ts

@@ -252,7 +252,7 @@ declare class ZModalComponent<T, U> implements OnDestroy, AfterViewChecked {
     protected readonly effectiveOkText: _angular_core.Signal<string | null | undefined>;
     protected readonly effectiveCancelText: _angular_core.Signal<string | null | undefined>;
     protected readonly effectiveOkDestructive: _angular_core.Signal<boolean | undefined>;
-    protected readonly effectiveTypeOk: _angular_core.Signal<"info" | "warning" | "error" | "default" | "primary" | "secondary" | "destructive" | "destructive-heartbeat" | "success" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-info" | "outline-warning" | "outline-error" | "outline-destructive" | "outline-shimmer" | "outline-success-secondary" | "outline-info-secondary" | "outline-warning-secondary" | "outline-error-secondary" | "outline-destructive-secondary" | "outline-primary-secondary" | "outline-primary-soft" | "outline-success-soft" | "outline-info-soft" | "outline-warning-soft" | "outline-error-soft" | "outline-destructive-soft" | "outline-primary-soft-border" | "outline-success-soft-border" | "outline-info-soft-border" | "outline-warning-soft-border" | "outline-error-soft-border" | "outline-destructive-soft-border" | "ghost" | "ghost-primary" | "ghost-success" | "ghost-info" | "ghost-warning" | "ghost-error" | "ghost-destructive" | "subtle" | "subtle-primary" | "subtle-success" | "subtle-info" | "subtle-warning" | "subtle-destructive" | "subtle-outline" | "subtle-primary-outline" | "subtle-success-outline" | "subtle-info-outline" | "subtle-warning-outline" | "subtle-destructive-outline" | "link" | null | undefined>;
+    protected readonly effectiveTypeOk: _angular_core.Signal<"info" | "warning" | "error" | "link" | "default" | "primary" | "secondary" | "destructive" | "destructive-heartbeat" | "success" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-info" | "outline-warning" | "outline-error" | "outline-destructive" | "outline-shimmer" | "outline-success-secondary" | "outline-info-secondary" | "outline-warning-secondary" | "outline-error-secondary" | "outline-destructive-secondary" | "outline-primary-secondary" | "outline-primary-soft" | "outline-success-soft" | "outline-info-soft" | "outline-warning-soft" | "outline-error-soft" | "outline-destructive-soft" | "outline-primary-soft-border" | "outline-success-soft-border" | "outline-info-soft-border" | "outline-warning-soft-border" | "outline-error-soft-border" | "outline-destructive-soft-border" | "ghost" | "ghost-primary" | "ghost-success" | "ghost-info" | "ghost-warning" | "ghost-error" | "ghost-destructive" | "subtle" | "subtle-primary" | "subtle-success" | "subtle-info" | "subtle-warning" | "subtle-destructive" | "subtle-outline" | "subtle-primary-outline" | "subtle-success-outline" | "subtle-info-outline" | "subtle-warning-outline" | "subtle-destructive-outline" | null | undefined>;
     protected readonly effectiveOkDisabled: _angular_core.Signal<boolean | undefined>;
     protected readonly effectiveLoading: _angular_core.Signal<boolean>;
     protected readonly effectiveContentLoading: _angular_core.Signal<boolean>;

package/types/shival99-z-ui-components-z-number-ticker.d.ts

@@ -0,0 +1,110 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import { ClassValue } from 'clsx';
+
+/**
+ * How the tweened value is rendered. Each maps onto `Intl.NumberFormat`, so grouping separators and
+ * decimal marks follow the locale rather than being assembled by hand.
+ *
+ * `percent` follows `Intl` semantics and multiplies by 100 — pass `0.42` to render `42%`.
+ */
+type ZNumberTickerFormat = 'decimal' | 'currency' | 'percent' | 'compact';
+/**
+ * Shape of the roll. `smooth` is an ease-out cubic; `spring` and `bounce` overshoot the target digit
+ * and settle back onto it, which a mechanical odometer does when it snaps into place.
+ */
+type ZNumberTickerEasing = 'linear' | 'smooth' | 'spring' | 'bounce';
+/** One rendered cell: either a rolling digit wheel at a decimal place, or fixed text between wheels. */
+interface ZNumberTickerCell {
+    /** Power of ten this wheel shows — `0` is the units digit, `-1` the first decimal. `null` for text. */
+    place: number | null;
+    /** A sign cell crossfades between `+` and `-` instead of holding one glyph. */
+    isSign: boolean;
+    text: string;
+}
+
+declare class ZNumberTickerComponent implements OnDestroy {
+    private readonly _zone;
+    private readonly _isServer;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    /** The value to count towards. Changing it re-runs the count from wherever the ticker currently is. */
+    readonly zValue: _angular_core.InputSignal<number>;
+    /** Where the first count starts. Later changes count from the displayed value, not from here. */
+    readonly zStart: _angular_core.InputSignal<number>;
+    /** How long the roll takes, in milliseconds. */
+    readonly zDuration: _angular_core.InputSignal<number>;
+    readonly zEasing: _angular_core.InputSignal<ZNumberTickerEasing>;
+    readonly zFormat: _angular_core.InputSignal<ZNumberTickerFormat>;
+    /** Locale for grouping separators and decimal marks; defaults to the browser's. */
+    readonly zLocale: _angular_core.InputSignal<string | undefined>;
+    /** Only read when `zFormat` is `'currency'`. */
+    readonly zCurrency: _angular_core.InputSignal<string>;
+    /** Zero-pads the integer part, e.g. `2` renders `07` — what a clock segment needs. */
+    readonly zMinimumIntegerDigits: _angular_core.InputSignal<number | undefined>;
+    /** Passed to `Intl`; `'always'` keeps a `+` on positive values, as a delta figure wants. */
+    readonly zSignDisplay: _angular_core.InputSignal<keyof Intl.NumberFormatOptionsSignDisplayRegistry | undefined>;
+    readonly zMinimumFractionDigits: _angular_core.InputSignal<number | undefined>;
+    readonly zMaximumFractionDigits: _angular_core.InputSignal<number | undefined>;
+    /** Digits to roll through, plus a repeated `0` so a 9→0 wrap rolls on rather than snapping back. */
+    protected readonly wheelDigits: number[];
+    private readonly _progress;
+    private readonly _from;
+    private readonly _to;
+    private readonly _rolling;
+    private _frame?;
+    private _started;
+    /**
+     * Only what the roll needs structurally: an inline box, and tabular figures so a digit swap cannot
+     * change the width. Type scale, weight and colour are the consumer's — a ticker has no business
+     * deciding how big a number on someone's page should be.
+     */
+    protected readonly tickerClasses: _angular_core.Signal<string>;
+    /** Decimal places in the target value, which is what the count should render to. */
+    private readonly _targetDecimals;
+    /**
+     * Kept as one memoised formatter rather than calling `toLocaleString` per frame: constructing an
+     * `Intl.NumberFormat` is the expensive part, and the ticker formats on every animation frame.
+     */
+    private readonly _formatter;
+    /**
+     * The wheels stay mounted for the whole life of the component. Swapping to plain text between rolls
+     * changed the box width every time one finished, which read as the number twitching on the page.
+     * Static text is only for the cases where there is no roll at all: the server, and reduced motion.
+     */
+    protected readonly isRolling: _angular_core.Signal<boolean>;
+    protected readonly usesWheels: _angular_core.Signal<boolean>;
+    /** Layout is pinned to the endpoints, so wheels are neither added nor removed mid-count. */
+    protected readonly cells: _angular_core.Signal<ZNumberTickerCell[]>;
+    private readonly _magnitudes;
+    protected readonly wheelOffsets: _angular_core.Signal<number[]>;
+    /** A sign cell holds both glyphs and crossfades between them across the roll. */
+    protected readonly signFrom: _angular_core.Signal<string>;
+    protected readonly signTo: _angular_core.Signal<string>;
+    protected readonly signProgress: _angular_core.Signal<number>;
+    /**
+     * The outgoing glyph leaves to the left and the incoming one arrives from the right, both riding the
+     * roll's own easing. Distance is a custom property so a consumer can dial the travel down to a pure
+     * crossfade (`0`) or open it up.
+     */
+    protected signTransform(direction: 1 | -1): string;
+    /** The plain formatted number, used before the first roll and whenever motion is off. */
+    protected readonly formattedValue: _angular_core.Signal<string>;
+    constructor();
+    /** Where the count has actually reached, so a new target continues from there. */
+    private _currentValue;
+    protected wheelTransform(index: number): string;
+    ngOnDestroy(): void;
+    /**
+     * Runs the tween outside Angular: a per-frame `requestAnimationFrame` inside the zone would schedule
+     * a change-detection pass of its own on every frame. The signal write still schedules one, so the
+     * text updates — this only drops the duplicate.
+     */
+    private _animate;
+    private _cancel;
+    private _prefersReducedMotion;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZNumberTickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZNumberTickerComponent, "z-number-ticker", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zValue": { "alias": "zValue"; "required": false; "isSignal": true; }; "zStart": { "alias": "zStart"; "required": false; "isSignal": true; }; "zDuration": { "alias": "zDuration"; "required": false; "isSignal": true; }; "zEasing": { "alias": "zEasing"; "required": false; "isSignal": true; }; "zFormat": { "alias": "zFormat"; "required": false; "isSignal": true; }; "zLocale": { "alias": "zLocale"; "required": false; "isSignal": true; }; "zCurrency": { "alias": "zCurrency"; "required": false; "isSignal": true; }; "zMinimumIntegerDigits": { "alias": "zMinimumIntegerDigits"; "required": false; "isSignal": true; }; "zSignDisplay": { "alias": "zSignDisplay"; "required": false; "isSignal": true; }; "zMinimumFractionDigits": { "alias": "zMinimumFractionDigits"; "required": false; "isSignal": true; }; "zMaximumFractionDigits": { "alias": "zMaximumFractionDigits"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ZNumberTickerComponent };
+export type { ZNumberTickerEasing, ZNumberTickerFormat };

package/types/shival99-z-ui-components-z-pagination.d.ts

@@ -0,0 +1,55 @@
+import * as _angular_core from '@angular/core';
+
+type ZPaginationSize = 'sm' | 'default' | 'lg';
+interface ZPaginationConfig {
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    showSizeChanger?: boolean;
+    showQuickJumper?: boolean;
+    showTotal?: boolean;
+    simple?: boolean;
+}
+interface ZPageChangeEvent {
+    pageIndex: number;
+    pageSize: number;
+}
+
+declare class ZPaginationComponent {
+    private readonly _zTranslate;
+    readonly zOnPageChange: _angular_core.OutputEmitterRef<ZPageChangeEvent>;
+    readonly zPageIndex: _angular_core.ModelSignal<number>;
+    readonly zPageSize: _angular_core.ModelSignal<number>;
+    readonly zTotal: _angular_core.InputSignal<number>;
+    readonly zPageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly zShowSizeChanger: _angular_core.InputSignal<boolean>;
+    readonly zShowQuickJumper: _angular_core.InputSignal<boolean>;
+    readonly zShowTotal: _angular_core.InputSignal<boolean>;
+    readonly zSimple: _angular_core.InputSignal<boolean>;
+    readonly zSize: _angular_core.InputSignal<ZPaginationSize>;
+    readonly zDisabled: _angular_core.InputSignal<boolean>;
+    readonly zTotalLabel: _angular_core.InputSignal<string | null>;
+    readonly zPerPageLabel: _angular_core.InputSignal<string | null>;
+    readonly zGoToLabel: _angular_core.InputSignal<string | null>;
+    protected readonly totalLabelText: _angular_core.Signal<string>;
+    protected readonly perPageLabelText: _angular_core.Signal<string>;
+    protected readonly goToLabelText: _angular_core.Signal<string>;
+    protected readonly totalPages: _angular_core.Signal<number>;
+    protected readonly pageSizeOptions: _angular_core.Signal<{
+        label: string;
+        value: number;
+    }[]>;
+    protected readonly visiblePages: _angular_core.Signal<(number | "ellipsis")[]>;
+    protected readonly canGoPrev: _angular_core.Signal<boolean>;
+    protected readonly canGoNext: _angular_core.Signal<boolean>;
+    protected goToPage(page: number): void;
+    protected goToPrev(): void;
+    protected goToNext(): void;
+    protected onPageSizeChange(size: unknown): void;
+    protected onQuickJump(event: Event): void;
+    private _emitChange;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZPaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZPaginationComponent, "z-pagination", never, { "zPageIndex": { "alias": "zPageIndex"; "required": false; "isSignal": true; }; "zPageSize": { "alias": "zPageSize"; "required": false; "isSignal": true; }; "zTotal": { "alias": "zTotal"; "required": true; "isSignal": true; }; "zPageSizeOptions": { "alias": "zPageSizeOptions"; "required": false; "isSignal": true; }; "zShowSizeChanger": { "alias": "zShowSizeChanger"; "required": false; "isSignal": true; }; "zShowQuickJumper": { "alias": "zShowQuickJumper"; "required": false; "isSignal": true; }; "zShowTotal": { "alias": "zShowTotal"; "required": false; "isSignal": true; }; "zSimple": { "alias": "zSimple"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zTotalLabel": { "alias": "zTotalLabel"; "required": false; "isSignal": true; }; "zPerPageLabel": { "alias": "zPerPageLabel"; "required": false; "isSignal": true; }; "zGoToLabel": { "alias": "zGoToLabel"; "required": false; "isSignal": true; }; }, { "zOnPageChange": "zOnPageChange"; "zPageIndex": "zPageIndexChange"; "zPageSize": "zPageSizeChange"; }, never, never, true, never>;
+}
+
+export { ZPaginationComponent };
+export type { ZPageChangeEvent, ZPaginationConfig, ZPaginationSize };

package/types/shival99-z-ui-components-z-qrcode.d.ts

@@ -0,0 +1,79 @@
+import * as _angular_core from '@angular/core';
+
+type ZQrCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+type ZQrCodeDotStyle = 'square' | 'dots' | 'rounded';
+type ZQrCodeEyeStyle = 'square' | 'circle' | 'rounded';
+type ZQrCodeFrame = 'none' | 'border' | 'text-bottom' | 'text-top';
+interface ZQrCodeGradient {
+    type: 'linear' | 'radial';
+    colors: string[];
+    angle?: number;
+}
+
+declare class ZQrCodeComponent {
+    readonly zValue: _angular_core.InputSignal<string>;
+    readonly zSize: _angular_core.InputSignal<number>;
+    readonly zLevel: _angular_core.InputSignal<ZQrCodeErrorCorrectionLevel>;
+    readonly zLogo: _angular_core.InputSignal<string>;
+    readonly zLogoSize: _angular_core.InputSignal<number>;
+    readonly zLogoBgColor: _angular_core.InputSignal<string>;
+    readonly zLogoBgShape: _angular_core.InputSignal<"square" | "circle" | "none">;
+    readonly zLogoPadding: _angular_core.InputSignal<number>;
+    readonly zFgColor: _angular_core.InputSignal<string>;
+    readonly zBgColor: _angular_core.InputSignal<string>;
+    readonly zDotStyle: _angular_core.InputSignal<ZQrCodeDotStyle>;
+    readonly zEyeStyle: _angular_core.InputSignal<ZQrCodeEyeStyle>;
+    readonly zEyeColor: _angular_core.InputSignal<string>;
+    readonly zMargin: _angular_core.InputSignal<number>;
+    readonly zFgGradient: _angular_core.InputSignal<ZQrCodeGradient | undefined>;
+    readonly zFrame: _angular_core.InputSignal<ZQrCodeFrame>;
+    readonly zFrameText: _angular_core.InputSignal<string>;
+    readonly zFrameColor: _angular_core.InputSignal<string>;
+    readonly zFramePadding: _angular_core.InputSignal<number>;
+    readonly zFrameBorderRadius: _angular_core.InputSignal<number | undefined>;
+    readonly zDownloadable: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly zDownloadButton: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly zShadow: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly zLoading: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    private readonly _canvasRef;
+    private readonly _platformId;
+    protected readonly downloadText: _angular_core.WritableSignal<string>;
+    protected readonly frameBorderRadiusStyle: _angular_core.Signal<string>;
+    /** Resolves the frame radius to a px number for canvas drawing, reading the theme's --radius-lg when unset. */
+    private _resolveFrameBorderRadiusPx;
+    constructor();
+    /**
+     * Renders the stylized QR code onto the canvas element
+     */
+    renderQrCode(): Promise<void>;
+    /**
+     * Helper function to get gradient style fill (no else branches)
+     */
+    private _getGradientStyle;
+    /**
+     * Helper function to draw dynamic dot module style (no else branches)
+     */
+    private _drawDot;
+    /**
+     * Helper path function for rounded corners (no else branches)
+     */
+    private _drawRoundedRectPath;
+    /**
+     * Draw eye pattern (no else branches)
+     */
+    private _drawEye;
+    /**
+     * Load and render the central logo on canvas (no else branches)
+     */
+    private _drawLogo;
+    private _drawFrame;
+    /**
+     * Download the generated canvas QR Code as a PNG image file
+     */
+    protected downloadQr(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZQrCodeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZQrCodeComponent, "z-qrcode", never, { "zValue": { "alias": "zValue"; "required": true; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zLevel": { "alias": "zLevel"; "required": false; "isSignal": true; }; "zLogo": { "alias": "zLogo"; "required": false; "isSignal": true; }; "zLogoSize": { "alias": "zLogoSize"; "required": false; "isSignal": true; }; "zLogoBgColor": { "alias": "zLogoBgColor"; "required": false; "isSignal": true; }; "zLogoBgShape": { "alias": "zLogoBgShape"; "required": false; "isSignal": true; }; "zLogoPadding": { "alias": "zLogoPadding"; "required": false; "isSignal": true; }; "zFgColor": { "alias": "zFgColor"; "required": false; "isSignal": true; }; "zBgColor": { "alias": "zBgColor"; "required": false; "isSignal": true; }; "zDotStyle": { "alias": "zDotStyle"; "required": false; "isSignal": true; }; "zEyeStyle": { "alias": "zEyeStyle"; "required": false; "isSignal": true; }; "zEyeColor": { "alias": "zEyeColor"; "required": false; "isSignal": true; }; "zMargin": { "alias": "zMargin"; "required": false; "isSignal": true; }; "zFgGradient": { "alias": "zFgGradient"; "required": false; "isSignal": true; }; "zFrame": { "alias": "zFrame"; "required": false; "isSignal": true; }; "zFrameText": { "alias": "zFrameText"; "required": false; "isSignal": true; }; "zFrameColor": { "alias": "zFrameColor"; "required": false; "isSignal": true; }; "zFramePadding": { "alias": "zFramePadding"; "required": false; "isSignal": true; }; "zFrameBorderRadius": { "alias": "zFrameBorderRadius"; "required": false; "isSignal": true; }; "zDownloadable": { "alias": "zDownloadable"; "required": false; "isSignal": true; }; "zDownloadButton": { "alias": "zDownloadButton"; "required": false; "isSignal": true; }; "zShadow": { "alias": "zShadow"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ZQrCodeComponent };
+export type { ZQrCodeDotStyle, ZQrCodeErrorCorrectionLevel, ZQrCodeEyeStyle, ZQrCodeFrame, ZQrCodeGradient };

package/types/shival99-z-ui-components-z-radio.d.ts

@@ -0,0 +1,69 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ZEvent } from '@shival99/z-ui/utils';
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+type ZRadioType = 'default' | 'group';
+type ZRadioSize = 'sm' | 'default' | 'lg';
+type ZRadioOrientation = 'vertical' | 'horizontal';
+interface ZRadioOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+
+declare class ZRadioComponent implements ControlValueAccessor {
+    readonly zChange: _angular_core.OutputEmitterRef<string | number | null>;
+    readonly zOnBlur: _angular_core.OutputEmitterRef<FocusEvent>;
+    readonly zOnFocus: _angular_core.OutputEmitterRef<FocusEvent>;
+    readonly zEvent: _angular_core.OutputEmitterRef<ZEvent>;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    readonly zType: _angular_core.InputSignal<ZRadioType>;
+    readonly zSize: _angular_core.InputSignal<ZRadioSize>;
+    readonly zLabel: _angular_core.InputSignal<string>;
+    readonly zText: _angular_core.InputSignal<string>;
+    readonly zDisabled: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly zValue: _angular_core.InputSignal<string | number>;
+    readonly zOptions: _angular_core.InputSignal<ZRadioOption[]>;
+    readonly zOrientation: _angular_core.InputSignal<ZRadioOrientation>;
+    readonly zSelectedValue: _angular_core.ModelSignal<string | number | null>;
+    private readonly _disabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly groupClasses: _angular_core.Signal<string>;
+    protected readonly radioClasses: _angular_core.Signal<string>;
+    protected readonly indicatorClasses: _angular_core.Signal<string>;
+    protected readonly labelClasses: _angular_core.Signal<string>;
+    private _onChange;
+    private _onTouched;
+    writeValue(value: string | number | null): void;
+    registerOnChange(fn: (value: string | number | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    protected onRadioClick(): void;
+    protected onOptionClick(option: ZRadioOption): void;
+    protected isOptionChecked(option: ZRadioOption): boolean;
+    protected isChecked(): boolean;
+    protected getRadioState(): string;
+    protected getOptionState(option: ZRadioOption): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZRadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZRadioComponent, "z-radio", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zLabel": { "alias": "zLabel"; "required": false; "isSignal": true; }; "zText": { "alias": "zText"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zValue": { "alias": "zValue"; "required": false; "isSignal": true; }; "zOptions": { "alias": "zOptions"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zSelectedValue": { "alias": "zSelectedValue"; "required": false; "isSignal": true; }; }, { "zChange": "zChange"; "zOnBlur": "zOnBlur"; "zOnFocus": "zOnFocus"; "zEvent": "zEvent"; "zSelectedValue": "zSelectedValueChange"; }, never, never, true, never>;
+}
+
+declare const zRadioVariants: (props?: ({
+    zSize?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zRadioIndicatorVariants: (props?: ({
+    zSize?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zRadioLabelVariants: (props?: ({
+    zSize?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ZRadioVariants = VariantProps<typeof zRadioVariants>;
+
+export { ZRadioComponent, zRadioIndicatorVariants, zRadioLabelVariants, zRadioVariants };
+export type { ZRadioOption, ZRadioOrientation, ZRadioSize, ZRadioType, ZRadioVariants };