ngx-com 0.0.1 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-com-components-avatar.mjs +772 -0
- package/fesm2022/ngx-com-components-avatar.mjs.map +1 -0
- package/fesm2022/ngx-com-components-badge.mjs +138 -0
- package/fesm2022/ngx-com-components-badge.mjs.map +1 -0
- package/fesm2022/ngx-com-components-button.mjs +146 -0
- package/fesm2022/ngx-com-components-button.mjs.map +1 -0
- package/fesm2022/ngx-com-components-calendar.mjs +5046 -0
- package/fesm2022/ngx-com-components-calendar.mjs.map +1 -0
- package/fesm2022/ngx-com-components-card.mjs +590 -0
- package/fesm2022/ngx-com-components-card.mjs.map +1 -0
- package/fesm2022/ngx-com-components-checkbox.mjs +344 -0
- package/fesm2022/ngx-com-components-checkbox.mjs.map +1 -0
- package/fesm2022/ngx-com-components-collapsible.mjs +612 -0
- package/fesm2022/ngx-com-components-collapsible.mjs.map +1 -0
- package/fesm2022/ngx-com-components-confirm.mjs +562 -0
- package/fesm2022/ngx-com-components-confirm.mjs.map +1 -0
- package/fesm2022/ngx-com-components-dropdown-testing.mjs +255 -0
- package/fesm2022/ngx-com-components-dropdown-testing.mjs.map +1 -0
- package/fesm2022/ngx-com-components-dropdown.mjs +2692 -0
- package/fesm2022/ngx-com-components-dropdown.mjs.map +1 -0
- package/fesm2022/ngx-com-components-empty-state.mjs +382 -0
- package/fesm2022/ngx-com-components-empty-state.mjs.map +1 -0
- package/fesm2022/ngx-com-components-form-field.mjs +924 -0
- package/fesm2022/ngx-com-components-form-field.mjs.map +1 -0
- package/fesm2022/ngx-com-components-icon.mjs +183 -0
- package/fesm2022/ngx-com-components-icon.mjs.map +1 -0
- package/fesm2022/ngx-com-components-item.mjs +578 -0
- package/fesm2022/ngx-com-components-item.mjs.map +1 -0
- package/fesm2022/ngx-com-components-menu.mjs +1200 -0
- package/fesm2022/ngx-com-components-menu.mjs.map +1 -0
- package/fesm2022/ngx-com-components-paginator.mjs +823 -0
- package/fesm2022/ngx-com-components-paginator.mjs.map +1 -0
- package/fesm2022/ngx-com-components-popover.mjs +901 -0
- package/fesm2022/ngx-com-components-popover.mjs.map +1 -0
- package/fesm2022/ngx-com-components-radio.mjs +621 -0
- package/fesm2022/ngx-com-components-radio.mjs.map +1 -0
- package/fesm2022/ngx-com-components-segmented-control.mjs +538 -0
- package/fesm2022/ngx-com-components-segmented-control.mjs.map +1 -0
- package/fesm2022/ngx-com-components-sort.mjs +368 -0
- package/fesm2022/ngx-com-components-sort.mjs.map +1 -0
- package/fesm2022/ngx-com-components-spinner.mjs +189 -0
- package/fesm2022/ngx-com-components-spinner.mjs.map +1 -0
- package/fesm2022/ngx-com-components-tabs.mjs +1522 -0
- package/fesm2022/ngx-com-components-tabs.mjs.map +1 -0
- package/fesm2022/ngx-com-components-tooltip.mjs +625 -0
- package/fesm2022/ngx-com-components-tooltip.mjs.map +1 -0
- package/fesm2022/ngx-com-components.mjs +17 -0
- package/fesm2022/ngx-com-components.mjs.map +1 -0
- package/fesm2022/ngx-com-tokens.mjs +12 -0
- package/fesm2022/ngx-com-tokens.mjs.map +1 -0
- package/fesm2022/ngx-com-utils.mjs +601 -0
- package/fesm2022/ngx-com-utils.mjs.map +1 -0
- package/fesm2022/ngx-com.mjs +9 -23
- package/fesm2022/ngx-com.mjs.map +1 -1
- package/package.json +105 -1
- package/types/ngx-com-components-avatar.d.ts +409 -0
- package/types/ngx-com-components-badge.d.ts +97 -0
- package/types/ngx-com-components-button.d.ts +69 -0
- package/types/ngx-com-components-calendar.d.ts +1665 -0
- package/types/ngx-com-components-card.d.ts +373 -0
- package/types/ngx-com-components-checkbox.d.ts +116 -0
- package/types/ngx-com-components-collapsible.d.ts +379 -0
- package/types/ngx-com-components-confirm.d.ts +160 -0
- package/types/ngx-com-components-dropdown-testing.d.ts +116 -0
- package/types/ngx-com-components-dropdown.d.ts +938 -0
- package/types/ngx-com-components-empty-state.d.ts +269 -0
- package/types/ngx-com-components-form-field.d.ts +531 -0
- package/types/ngx-com-components-icon.d.ts +94 -0
- package/types/ngx-com-components-item.d.ts +336 -0
- package/types/ngx-com-components-menu.d.ts +479 -0
- package/types/ngx-com-components-paginator.d.ts +265 -0
- package/types/ngx-com-components-popover.d.ts +309 -0
- package/types/ngx-com-components-radio.d.ts +258 -0
- package/types/ngx-com-components-segmented-control.d.ts +274 -0
- package/types/ngx-com-components-sort.d.ts +133 -0
- package/types/ngx-com-components-spinner.d.ts +120 -0
- package/types/ngx-com-components-tabs.d.ts +396 -0
- package/types/ngx-com-components-tooltip.d.ts +200 -0
- package/types/ngx-com-components.d.ts +12 -0
- package/types/ngx-com-tokens.d.ts +7 -0
- package/types/ngx-com-utils.d.ts +424 -0
- package/types/ngx-com.d.ts +10 -7
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InputSignal, TemplateRef, InputSignalWithTransform, OutputEmitterRef } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Position direction for tooltip placement relative to the trigger.
|
|
6
|
+
*/
|
|
7
|
+
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
8
|
+
/**
|
|
9
|
+
* Color variant for tooltip styling.
|
|
10
|
+
*/
|
|
11
|
+
type TooltipColor = 'default' | 'primary' | 'accent' | 'warn' | 'invert';
|
|
12
|
+
/**
|
|
13
|
+
* Size variant for tooltip dimensions.
|
|
14
|
+
*/
|
|
15
|
+
type TooltipSize = 'sm' | 'md' | 'lg';
|
|
16
|
+
/**
|
|
17
|
+
* Touch gesture handling mode.
|
|
18
|
+
* - 'auto': Long-press to show, tap elsewhere to hide
|
|
19
|
+
* - 'on': Same as auto
|
|
20
|
+
* - 'off': Touch does not trigger tooltip
|
|
21
|
+
*/
|
|
22
|
+
type TooltipTouchGestures = 'auto' | 'on' | 'off';
|
|
23
|
+
/**
|
|
24
|
+
* Context provided to custom tooltip templates.
|
|
25
|
+
*/
|
|
26
|
+
interface TooltipTemplateContext {
|
|
27
|
+
/** The text content passed to comTooltip input. */
|
|
28
|
+
$implicit: string;
|
|
29
|
+
/** Function to programmatically close the tooltip from inside the template. */
|
|
30
|
+
hide: () => void;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Which side of the trigger the tooltip is positioned on.
|
|
34
|
+
* Used internally for arrow orientation.
|
|
35
|
+
*/
|
|
36
|
+
type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Tooltip directive — displays supplementary information on hover/focus.
|
|
40
|
+
*
|
|
41
|
+
* Applied as an attribute directive to any trigger element. The tooltip panel
|
|
42
|
+
* is rendered via CDK Overlay when triggered by mouse hover, keyboard focus,
|
|
43
|
+
* or programmatically.
|
|
44
|
+
*
|
|
45
|
+
* @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,
|
|
46
|
+
* `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,
|
|
47
|
+
* `--color-popover`, `--color-popover-foreground`, `--color-border`
|
|
48
|
+
*
|
|
49
|
+
* @example Simple text tooltip
|
|
50
|
+
* ```html
|
|
51
|
+
* <button comTooltip="Save your changes">
|
|
52
|
+
* <com-icon name="save" />
|
|
53
|
+
* </button>
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* @example Positioned
|
|
57
|
+
* ```html
|
|
58
|
+
* <button comTooltip="Settings" comTooltipPosition="right">
|
|
59
|
+
* <com-icon name="settings" />
|
|
60
|
+
* </button>
|
|
61
|
+
* ```
|
|
62
|
+
*
|
|
63
|
+
* @example Color variants
|
|
64
|
+
* ```html
|
|
65
|
+
* <com-icon name="alert-triangle" comTooltip="3 warnings found" comTooltipColor="warn" />
|
|
66
|
+
* ```
|
|
67
|
+
*
|
|
68
|
+
* @example Custom template
|
|
69
|
+
* ```html
|
|
70
|
+
* <button
|
|
71
|
+
* comTooltip="Keyboard shortcuts"
|
|
72
|
+
* [comTooltipTpl]="shortcutsTpl"
|
|
73
|
+
* comTooltipSize="lg"
|
|
74
|
+
* >
|
|
75
|
+
* <com-icon name="keyboard" />
|
|
76
|
+
* </button>
|
|
77
|
+
*
|
|
78
|
+
* <ng-template #shortcutsTpl let-hide="hide">
|
|
79
|
+
* <div class="flex flex-col gap-1">
|
|
80
|
+
* <span>Press Ctrl+S to save</span>
|
|
81
|
+
* <button (click)="hide()">Got it</button>
|
|
82
|
+
* </div>
|
|
83
|
+
* </ng-template>
|
|
84
|
+
* ```
|
|
85
|
+
*
|
|
86
|
+
* @example Programmatic control
|
|
87
|
+
* ```html
|
|
88
|
+
* <input
|
|
89
|
+
* #tooltipRef="comTooltip"
|
|
90
|
+
* comTooltip="Invalid email"
|
|
91
|
+
* comTooltipColor="warn"
|
|
92
|
+
* [comTooltipDisabled]="true"
|
|
93
|
+
* />
|
|
94
|
+
* ```
|
|
95
|
+
*
|
|
96
|
+
* ```ts
|
|
97
|
+
* // Show tooltip on validation error
|
|
98
|
+
* if (emailInvalid) {
|
|
99
|
+
* this.tooltipRef.show();
|
|
100
|
+
* }
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
declare class ComTooltip {
|
|
104
|
+
private readonly overlay;
|
|
105
|
+
private readonly elementRef;
|
|
106
|
+
private readonly viewContainerRef;
|
|
107
|
+
private readonly injector;
|
|
108
|
+
private readonly destroyRef;
|
|
109
|
+
private readonly renderer;
|
|
110
|
+
private readonly platformId;
|
|
111
|
+
private readonly document;
|
|
112
|
+
private overlayRef;
|
|
113
|
+
private panelInstance;
|
|
114
|
+
private showTimeoutId;
|
|
115
|
+
private hideTimeoutId;
|
|
116
|
+
private touchTimeoutId;
|
|
117
|
+
private readonly tooltipId;
|
|
118
|
+
/** Current active side (updated from position changes). */
|
|
119
|
+
private readonly activeSide;
|
|
120
|
+
/** Whether the tooltip is currently visible. */
|
|
121
|
+
private readonly isVisible;
|
|
122
|
+
/** Simple text content for the tooltip. Also serves as the directive selector. */
|
|
123
|
+
readonly comTooltip: InputSignal<string>;
|
|
124
|
+
/** Custom template for rich tooltip content. Takes precedence over text when provided. */
|
|
125
|
+
readonly comTooltipTpl: InputSignal<TemplateRef<TooltipTemplateContext> | null>;
|
|
126
|
+
/** Preferred position direction. Default: 'top'. */
|
|
127
|
+
readonly comTooltipPosition: InputSignal<TooltipPosition>;
|
|
128
|
+
/** Delay in ms before showing the tooltip. Default: 200. */
|
|
129
|
+
readonly comTooltipShowDelay: InputSignalWithTransform<number, unknown>;
|
|
130
|
+
/** Delay in ms before hiding the tooltip. Default: 100. */
|
|
131
|
+
readonly comTooltipHideDelay: InputSignalWithTransform<number, unknown>;
|
|
132
|
+
/** Disable the tooltip entirely. Default: false. */
|
|
133
|
+
readonly comTooltipDisabled: InputSignalWithTransform<boolean, unknown>;
|
|
134
|
+
/** Touch device handling. Default: 'auto'. */
|
|
135
|
+
readonly comTooltipTouchGestures: InputSignal<TooltipTouchGestures>;
|
|
136
|
+
/** Color variant. Default: 'default'. */
|
|
137
|
+
readonly comTooltipColor: InputSignal<TooltipColor>;
|
|
138
|
+
/** Size variant. Default: 'md'. */
|
|
139
|
+
readonly comTooltipSize: InputSignal<TooltipSize>;
|
|
140
|
+
/** Whether to show the arrow/caret. Default: true. */
|
|
141
|
+
readonly comTooltipHasArrow: InputSignalWithTransform<boolean, unknown>;
|
|
142
|
+
/** Emitted when the tooltip becomes visible (after delay + animation). */
|
|
143
|
+
readonly comTooltipShown: OutputEmitterRef<void>;
|
|
144
|
+
/** Emitted when the tooltip is fully hidden. */
|
|
145
|
+
readonly comTooltipHidden: OutputEmitterRef<void>;
|
|
146
|
+
constructor();
|
|
147
|
+
/** Programmatically show the tooltip (ignores disabled state for error validation use cases). */
|
|
148
|
+
show(): void;
|
|
149
|
+
/** Programmatically hide the tooltip. */
|
|
150
|
+
hide(): void;
|
|
151
|
+
protected onMouseEnter(): void;
|
|
152
|
+
protected onMouseLeave(): void;
|
|
153
|
+
protected onFocusIn(): void;
|
|
154
|
+
protected onFocusOut(): void;
|
|
155
|
+
protected onEscapeKey(): void;
|
|
156
|
+
protected onTouchStart(event: TouchEvent): void;
|
|
157
|
+
/** Called when mouse enters the tooltip panel. */
|
|
158
|
+
private onPanelMouseEnter;
|
|
159
|
+
/** Called when mouse leaves the tooltip panel. */
|
|
160
|
+
private onPanelMouseLeave;
|
|
161
|
+
private scheduleShow;
|
|
162
|
+
private scheduleHide;
|
|
163
|
+
private clearTimers;
|
|
164
|
+
private clearShowTimeout;
|
|
165
|
+
private clearHideTimeout;
|
|
166
|
+
private clearTouchTimeout;
|
|
167
|
+
private createOverlay;
|
|
168
|
+
private attachPanel;
|
|
169
|
+
private detachPanel;
|
|
170
|
+
private handleDetachment;
|
|
171
|
+
private disposeOverlay;
|
|
172
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ComTooltip, never>;
|
|
173
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ComTooltip, "[comTooltip]", ["comTooltip"], { "comTooltip": { "alias": "comTooltip"; "required": true; "isSignal": true; }; "comTooltipTpl": { "alias": "comTooltipTpl"; "required": false; "isSignal": true; }; "comTooltipPosition": { "alias": "comTooltipPosition"; "required": false; "isSignal": true; }; "comTooltipShowDelay": { "alias": "comTooltipShowDelay"; "required": false; "isSignal": true; }; "comTooltipHideDelay": { "alias": "comTooltipHideDelay"; "required": false; "isSignal": true; }; "comTooltipDisabled": { "alias": "comTooltipDisabled"; "required": false; "isSignal": true; }; "comTooltipTouchGestures": { "alias": "comTooltipTouchGestures"; "required": false; "isSignal": true; }; "comTooltipColor": { "alias": "comTooltipColor"; "required": false; "isSignal": true; }; "comTooltipSize": { "alias": "comTooltipSize"; "required": false; "isSignal": true; }; "comTooltipHasArrow": { "alias": "comTooltipHasArrow"; "required": false; "isSignal": true; }; }, { "comTooltipShown": "comTooltipShown"; "comTooltipHidden": "comTooltipHidden"; }, never, never, true, never>;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/**
|
|
177
|
+
* CVA variants for the tooltip panel wrapper.
|
|
178
|
+
*
|
|
179
|
+
* @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,
|
|
180
|
+
* `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,
|
|
181
|
+
* `--color-popover`, `--color-popover-foreground`, `--color-border`
|
|
182
|
+
*/
|
|
183
|
+
declare const tooltipPanelVariants: (props?: {
|
|
184
|
+
color?: TooltipColor;
|
|
185
|
+
size?: TooltipSize;
|
|
186
|
+
}) => string;
|
|
187
|
+
/**
|
|
188
|
+
* CVA variants for the tooltip arrow element.
|
|
189
|
+
* The arrow points toward the trigger element.
|
|
190
|
+
*
|
|
191
|
+
* @tokens `--color-tooltip`, `--color-primary`, `--color-accent`, `--color-warn`,
|
|
192
|
+
* `--color-popover`, `--color-border`
|
|
193
|
+
*/
|
|
194
|
+
declare const tooltipArrowVariants: (props?: {
|
|
195
|
+
color?: TooltipColor;
|
|
196
|
+
side?: TooltipSide;
|
|
197
|
+
}) => string;
|
|
198
|
+
|
|
199
|
+
export { ComTooltip, tooltipArrowVariants, tooltipPanelVariants };
|
|
200
|
+
export type { TooltipColor, TooltipPosition, TooltipSize, TooltipTemplateContext, TooltipTouchGestures };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ngx-com/components
|
|
3
|
+
* Component exports for ngx-com library
|
|
4
|
+
*
|
|
5
|
+
* Note: Components are exposed as secondary entry points:
|
|
6
|
+
* - ngx-com/components/calendar
|
|
7
|
+
*
|
|
8
|
+
* Import from the specific secondary entry points for tree-shaking.
|
|
9
|
+
*/
|
|
10
|
+
declare const COMPONENTS_PLACEHOLDER = true;
|
|
11
|
+
|
|
12
|
+
export { COMPONENTS_PLACEHOLDER };
|
|
@@ -0,0 +1,424 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Merges and deduplicates CSS class names using clsx and tailwind-merge.
|
|
5
|
+
* Tailwind-merge ensures conflicting utility classes are resolved correctly.
|
|
6
|
+
*
|
|
7
|
+
* @param inputs - Class values to merge (strings, arrays, objects, or falsy values)
|
|
8
|
+
* @returns A single string of merged, deduplicated class names
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```ts
|
|
12
|
+
* mergeClasses('px-2 py-1', 'px-4'); // 'py-1 px-4'
|
|
13
|
+
* mergeClasses('text-sm', condition && 'text-lg'); // 'text-lg' if condition is true
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
declare function mergeClasses(...inputs: ClassValue[]): string;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* A debounced function wrapper with cancel and flush capabilities.
|
|
20
|
+
*
|
|
21
|
+
* @template T - The type of the original function.
|
|
22
|
+
*/
|
|
23
|
+
interface DebouncedFn<T extends (...args: never[]) => void> {
|
|
24
|
+
/**
|
|
25
|
+
* Calls the debounced function. The actual execution is delayed until
|
|
26
|
+
* the specified wait time has passed without another call.
|
|
27
|
+
*/
|
|
28
|
+
(...args: Parameters<T>): void;
|
|
29
|
+
/**
|
|
30
|
+
* Cancels any pending debounced call.
|
|
31
|
+
* Useful for cleanup in component destruction or effect cleanup.
|
|
32
|
+
*/
|
|
33
|
+
cancel(): void;
|
|
34
|
+
/**
|
|
35
|
+
* Immediately executes the pending debounced call if one exists.
|
|
36
|
+
* Does nothing if no call is pending.
|
|
37
|
+
*/
|
|
38
|
+
flush(): void;
|
|
39
|
+
/**
|
|
40
|
+
* Returns whether there is a pending debounced call.
|
|
41
|
+
*/
|
|
42
|
+
pending(): boolean;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Configuration options for the debounce function.
|
|
46
|
+
*/
|
|
47
|
+
interface DebounceOptions {
|
|
48
|
+
/**
|
|
49
|
+
* The number of milliseconds to delay execution.
|
|
50
|
+
* @default 300
|
|
51
|
+
*/
|
|
52
|
+
readonly wait?: number;
|
|
53
|
+
/**
|
|
54
|
+
* If `true`, the function is invoked on the leading edge of the timeout
|
|
55
|
+
* instead of the trailing edge.
|
|
56
|
+
* @default false
|
|
57
|
+
*/
|
|
58
|
+
readonly leading?: boolean;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Creates a debounced version of the provided function that delays invoking
|
|
62
|
+
* until after the specified wait time has elapsed since the last call.
|
|
63
|
+
*
|
|
64
|
+
* The debounced function includes `cancel()` to abort pending calls,
|
|
65
|
+
* `flush()` to immediately execute pending calls, and `pending()` to check status.
|
|
66
|
+
*
|
|
67
|
+
* @template T - The type of the function to debounce.
|
|
68
|
+
* @param fn - The function to debounce.
|
|
69
|
+
* @param optionsOrWait - Wait time in ms or options object.
|
|
70
|
+
* @returns The debounced function with control methods.
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* // Basic usage with default 300ms delay
|
|
74
|
+
* const debouncedSearch = debounce((query: string) => {
|
|
75
|
+
* console.log('Searching for:', query);
|
|
76
|
+
* });
|
|
77
|
+
* debouncedSearch('hello'); // Logs after 300ms if no subsequent calls
|
|
78
|
+
*
|
|
79
|
+
* @example
|
|
80
|
+
* // With custom wait time
|
|
81
|
+
* const debouncedSave = debounce(
|
|
82
|
+
* (data: { id: number; value: string }) => saveToServer(data),
|
|
83
|
+
* 500
|
|
84
|
+
* );
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* // With options object and leading edge execution
|
|
88
|
+
* const debouncedClick = debounce(
|
|
89
|
+
* () => handleClick(),
|
|
90
|
+
* { wait: 200, leading: true }
|
|
91
|
+
* );
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* // Cleanup in Angular component
|
|
95
|
+
* export class SearchComponent {
|
|
96
|
+
* private debouncedSearch = debounce((q: string) => this.search(q), 300);
|
|
97
|
+
*
|
|
98
|
+
* ngOnDestroy(): void {
|
|
99
|
+
* this.debouncedSearch.cancel();
|
|
100
|
+
* }
|
|
101
|
+
* }
|
|
102
|
+
*/
|
|
103
|
+
declare function debounce<T extends (...args: never[]) => void>(fn: T, optionsOrWait?: number | DebounceOptions): DebouncedFn<T>;
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* A throttled function wrapper with cancel capability.
|
|
107
|
+
*
|
|
108
|
+
* @template T - The type of the original function.
|
|
109
|
+
*/
|
|
110
|
+
interface ThrottledFn<T extends (...args: never[]) => void> {
|
|
111
|
+
/**
|
|
112
|
+
* Calls the throttled function. Execution is rate-limited to at most
|
|
113
|
+
* once per the specified wait period.
|
|
114
|
+
*/
|
|
115
|
+
(...args: Parameters<T>): void;
|
|
116
|
+
/**
|
|
117
|
+
* Cancels any pending throttled call.
|
|
118
|
+
* Useful for cleanup in component destruction.
|
|
119
|
+
*/
|
|
120
|
+
cancel(): void;
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* Creates a throttled version of the provided function that only invokes
|
|
124
|
+
* at most once per the specified wait period.
|
|
125
|
+
*
|
|
126
|
+
* The function is invoked on the leading edge (immediately on first call)
|
|
127
|
+
* and then at most once per wait period for subsequent calls.
|
|
128
|
+
*
|
|
129
|
+
* @template T - The type of the function to throttle.
|
|
130
|
+
* @param fn - The function to throttle.
|
|
131
|
+
* @param wait - The minimum time between invocations in milliseconds.
|
|
132
|
+
* @returns The throttled function with a cancel method.
|
|
133
|
+
*
|
|
134
|
+
* @example
|
|
135
|
+
* // Basic usage - scroll handler
|
|
136
|
+
* const throttledScroll = throttle(() => {
|
|
137
|
+
* console.log('Scroll position:', window.scrollY);
|
|
138
|
+
* }, 100);
|
|
139
|
+
* window.addEventListener('scroll', throttledScroll);
|
|
140
|
+
*
|
|
141
|
+
* @example
|
|
142
|
+
* // With cleanup
|
|
143
|
+
* export class ScrollComponent {
|
|
144
|
+
* private throttledHandler = throttle((e: Event) => this.handleScroll(e), 100);
|
|
145
|
+
*
|
|
146
|
+
* ngOnDestroy(): void {
|
|
147
|
+
* this.throttledHandler.cancel();
|
|
148
|
+
* }
|
|
149
|
+
* }
|
|
150
|
+
*/
|
|
151
|
+
declare function throttle<T extends (...args: never[]) => void>(fn: T, wait: number): ThrottledFn<T>;
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Configuration options for the retry function.
|
|
155
|
+
*/
|
|
156
|
+
interface RetryOptions {
|
|
157
|
+
/**
|
|
158
|
+
* Maximum number of retry attempts.
|
|
159
|
+
*/
|
|
160
|
+
readonly attempts: number;
|
|
161
|
+
/**
|
|
162
|
+
* Delay between retries in milliseconds.
|
|
163
|
+
*/
|
|
164
|
+
readonly delay: number;
|
|
165
|
+
/**
|
|
166
|
+
* Multiplier for exponential backoff (optional).
|
|
167
|
+
* Each retry delay is multiplied by this factor.
|
|
168
|
+
* @default 1
|
|
169
|
+
*/
|
|
170
|
+
readonly backoff?: number;
|
|
171
|
+
/**
|
|
172
|
+
* Optional predicate to determine if an error should trigger a retry.
|
|
173
|
+
* @param error - The error that occurred.
|
|
174
|
+
* @returns `true` to retry, `false` to fail immediately.
|
|
175
|
+
*/
|
|
176
|
+
readonly shouldRetry?: (error: unknown) => boolean;
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* Retries an async function with configurable attempts, delay, and backoff.
|
|
180
|
+
*
|
|
181
|
+
* @template T - The return type of the async function.
|
|
182
|
+
* @param fn - The async function to retry.
|
|
183
|
+
* @param options - Retry configuration.
|
|
184
|
+
* @returns The result of the successful call.
|
|
185
|
+
* @throws The last error if all attempts fail.
|
|
186
|
+
*
|
|
187
|
+
* @example
|
|
188
|
+
* // Basic retry with 3 attempts
|
|
189
|
+
* const data = await retry(
|
|
190
|
+
* () => fetch('/api/data').then(r => r.json()),
|
|
191
|
+
* { attempts: 3, delay: 1000 }
|
|
192
|
+
* );
|
|
193
|
+
*
|
|
194
|
+
* @example
|
|
195
|
+
* // With exponential backoff
|
|
196
|
+
* const result = await retry(
|
|
197
|
+
* () => unreliableApiCall(),
|
|
198
|
+
* { attempts: 5, delay: 100, backoff: 2 } // delays: 100, 200, 400, 800, 1600
|
|
199
|
+
* );
|
|
200
|
+
*
|
|
201
|
+
* @example
|
|
202
|
+
* // With conditional retry
|
|
203
|
+
* const result = await retry(
|
|
204
|
+
* () => apiCall(),
|
|
205
|
+
* {
|
|
206
|
+
* attempts: 3,
|
|
207
|
+
* delay: 500,
|
|
208
|
+
* shouldRetry: (err) => err instanceof NetworkError
|
|
209
|
+
* }
|
|
210
|
+
* );
|
|
211
|
+
*/
|
|
212
|
+
declare function retry<T>(fn: () => Promise<T>, options: RetryOptions): Promise<T>;
|
|
213
|
+
|
|
214
|
+
/**
|
|
215
|
+
* Creates a new object with only the specified keys from the source object.
|
|
216
|
+
*
|
|
217
|
+
* @template T - The type of the source object.
|
|
218
|
+
* @template K - The keys to pick.
|
|
219
|
+
* @param obj - The source object.
|
|
220
|
+
* @param keys - The keys to pick from the object.
|
|
221
|
+
* @returns A new object containing only the specified keys.
|
|
222
|
+
*
|
|
223
|
+
* @example
|
|
224
|
+
* const user = { id: 1, name: 'John', email: 'john@example.com', age: 30 };
|
|
225
|
+
* pick(user, ['id', 'name']); // { id: 1, name: 'John' }
|
|
226
|
+
*
|
|
227
|
+
* @example
|
|
228
|
+
* const config = { host: 'localhost', port: 3000, debug: true };
|
|
229
|
+
* pick(config, ['host', 'port']); // { host: 'localhost', port: 3000 }
|
|
230
|
+
*/
|
|
231
|
+
declare function pick<T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K>;
|
|
232
|
+
|
|
233
|
+
/**
|
|
234
|
+
* Creates a new object with the specified keys omitted from the source object.
|
|
235
|
+
*
|
|
236
|
+
* @template T - The type of the source object.
|
|
237
|
+
* @template K - The keys to omit.
|
|
238
|
+
* @param obj - The source object.
|
|
239
|
+
* @param keys - The keys to omit from the object.
|
|
240
|
+
* @returns A new object without the specified keys.
|
|
241
|
+
*
|
|
242
|
+
* @example
|
|
243
|
+
* const user = { id: 1, name: 'John', password: 'secret', email: 'john@example.com' };
|
|
244
|
+
* omit(user, ['password']); // { id: 1, name: 'John', email: 'john@example.com' }
|
|
245
|
+
*
|
|
246
|
+
* @example
|
|
247
|
+
* const config = { host: 'localhost', port: 3000, debug: true };
|
|
248
|
+
* omit(config, ['debug']); // { host: 'localhost', port: 3000 }
|
|
249
|
+
*/
|
|
250
|
+
declare function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K>;
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Creates a deep clone of a value, handling objects, arrays, Date, and RegExp.
|
|
254
|
+
* Note: Does not handle circular references, functions, or special objects like Map, Set.
|
|
255
|
+
* For complex cloning needs, consider using `structuredClone()`.
|
|
256
|
+
*
|
|
257
|
+
* @template T - The type of the value to clone.
|
|
258
|
+
* @param value - The value to deep clone.
|
|
259
|
+
* @returns A deep clone of the value.
|
|
260
|
+
*
|
|
261
|
+
* @example
|
|
262
|
+
* const original = { a: 1, b: { c: 2, d: [3, 4] } };
|
|
263
|
+
* const cloned = deepClone(original);
|
|
264
|
+
* cloned.b.c = 5;
|
|
265
|
+
* console.log(original.b.c); // 2 (unchanged)
|
|
266
|
+
*
|
|
267
|
+
* @example
|
|
268
|
+
* const arr = [{ id: 1 }, { id: 2 }];
|
|
269
|
+
* const clonedArr = deepClone(arr);
|
|
270
|
+
* clonedArr[0].id = 99;
|
|
271
|
+
* console.log(arr[0].id); // 1 (unchanged)
|
|
272
|
+
*/
|
|
273
|
+
declare function deepClone<T>(value: T): T;
|
|
274
|
+
|
|
275
|
+
/**
|
|
276
|
+
* Deep merges multiple source objects into a new object.
|
|
277
|
+
* Later sources override earlier ones. Arrays are replaced, not merged.
|
|
278
|
+
*
|
|
279
|
+
* @template T - The type of the resulting object.
|
|
280
|
+
* @param sources - The source objects to merge.
|
|
281
|
+
* @returns A new deeply merged object.
|
|
282
|
+
*
|
|
283
|
+
* @example
|
|
284
|
+
* const defaults = { theme: { color: 'blue', size: 'md' }, debug: false };
|
|
285
|
+
* const userConfig = { theme: { color: 'red' }, debug: true };
|
|
286
|
+
* deepMerge(defaults, userConfig);
|
|
287
|
+
* // { theme: { color: 'red', size: 'md' }, debug: true }
|
|
288
|
+
*
|
|
289
|
+
* @example
|
|
290
|
+
* const a = { arr: [1, 2], nested: { x: 1 } };
|
|
291
|
+
* const b = { arr: [3, 4], nested: { y: 2 } };
|
|
292
|
+
* deepMerge(a, b);
|
|
293
|
+
* // { arr: [3, 4], nested: { x: 1, y: 2 } } - arrays are replaced
|
|
294
|
+
*/
|
|
295
|
+
declare function deepMerge<T extends object>(...sources: Partial<T>[]): T;
|
|
296
|
+
|
|
297
|
+
/**
|
|
298
|
+
* Performs a deep equality comparison between two values.
|
|
299
|
+
* Handles primitives, objects, arrays, Date, and RegExp.
|
|
300
|
+
*
|
|
301
|
+
* @template T - The type of values to compare.
|
|
302
|
+
* @param a - The first value.
|
|
303
|
+
* @param b - The second value.
|
|
304
|
+
* @returns `true` if values are deeply equal; otherwise, `false`.
|
|
305
|
+
*
|
|
306
|
+
* @example
|
|
307
|
+
* deepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }); // true
|
|
308
|
+
* deepEqual({ a: 1 }, { a: 2 }); // false
|
|
309
|
+
* deepEqual([1, [2, 3]], [1, [2, 3]]); // true
|
|
310
|
+
* deepEqual([1, 2], [1, 2, 3]); // false
|
|
311
|
+
* deepEqual(new Date('2024-01-01'), new Date('2024-01-01')); // true
|
|
312
|
+
*/
|
|
313
|
+
declare function deepEqual<T>(a: T, b: T): boolean;
|
|
314
|
+
|
|
315
|
+
/**
|
|
316
|
+
* Checks if a value is a plain object (not null, not an array).
|
|
317
|
+
*
|
|
318
|
+
* @param value - The value to check.
|
|
319
|
+
* @returns `true` if value is a plain object; otherwise, `false`.
|
|
320
|
+
*
|
|
321
|
+
* @example
|
|
322
|
+
* isPlainObject({ a: 1 }); // true
|
|
323
|
+
* isPlainObject([1, 2]); // false
|
|
324
|
+
* isPlainObject(null); // false
|
|
325
|
+
*/
|
|
326
|
+
declare function isPlainObject(value: unknown): value is Record<string, unknown>;
|
|
327
|
+
|
|
328
|
+
/**
|
|
329
|
+
* Utility type that recursively maps the object type to the type of the resolved path.
|
|
330
|
+
*
|
|
331
|
+
* @example
|
|
332
|
+
* type A = { user: { profile: { name: string } } };
|
|
333
|
+
* type Result = ResolvePath<A, 'user.profile.name'>; // Result is string
|
|
334
|
+
*/
|
|
335
|
+
type ResolvePath<T, P extends string> = P extends `${infer Head}.${infer Tail}` ? Head extends keyof T ? ResolvePath<T[Head], Tail> : never : P extends keyof T ? T[P] : never;
|
|
336
|
+
/**
|
|
337
|
+
* Resolves a nested path in an object, returning the value at the specified path.
|
|
338
|
+
*
|
|
339
|
+
* This function splits the provided `path` into keys and iterates through the object to access the
|
|
340
|
+
* corresponding value at each key. If any part of the path is undefined or if the path leads to a non-object,
|
|
341
|
+
* it returns `undefined`.
|
|
342
|
+
*
|
|
343
|
+
* @template T - The type of the object.
|
|
344
|
+
* @template P - The dot-separated string path type.
|
|
345
|
+
* @param obj - The object to resolve the path within.
|
|
346
|
+
* @param path - The dot-separated string representing the path to the value.
|
|
347
|
+
* @returns The value at the resolved path, or `undefined` if any part of the path is invalid.
|
|
348
|
+
*
|
|
349
|
+
* @example
|
|
350
|
+
* const obj = { user: { profile: { name: 'John Doe' } } };
|
|
351
|
+
* const result = resolvePath(obj, 'user.profile.name');
|
|
352
|
+
* console.log(result); // 'John Doe'
|
|
353
|
+
*
|
|
354
|
+
* @example
|
|
355
|
+
* const result2 = resolvePath(obj, 'user.address.city');
|
|
356
|
+
* console.log(result2); // undefined
|
|
357
|
+
*/
|
|
358
|
+
declare function resolvePath<T extends object, P extends string>(obj: T, path: P): ResolvePath<T, P> | undefined;
|
|
359
|
+
|
|
360
|
+
/**
|
|
361
|
+
* Splits an array into chunks of the specified size.
|
|
362
|
+
*
|
|
363
|
+
* @template T - The type of array elements.
|
|
364
|
+
* @param array - The array to split.
|
|
365
|
+
* @param size - The size of each chunk (must be positive).
|
|
366
|
+
* @returns An array of chunks.
|
|
367
|
+
*
|
|
368
|
+
* @example
|
|
369
|
+
* chunk([1, 2, 3, 4, 5], 2); // [[1, 2], [3, 4], [5]]
|
|
370
|
+
* chunk([1, 2, 3, 4], 2); // [[1, 2], [3, 4]]
|
|
371
|
+
* chunk([1, 2, 3], 5); // [[1, 2, 3]]
|
|
372
|
+
* chunk([], 2); // []
|
|
373
|
+
*/
|
|
374
|
+
declare function chunk<T>(array: T[], size: number): T[][];
|
|
375
|
+
|
|
376
|
+
/**
|
|
377
|
+
* Splits an array into two groups based on a predicate function.
|
|
378
|
+
* The first array contains elements that satisfy the predicate,
|
|
379
|
+
* the second contains elements that don't.
|
|
380
|
+
*
|
|
381
|
+
* @template T - The type of array elements.
|
|
382
|
+
* @param array - The array to partition.
|
|
383
|
+
* @param predicate - The function to test each element.
|
|
384
|
+
* @returns A tuple of [truthy, falsy] arrays.
|
|
385
|
+
*
|
|
386
|
+
* @example
|
|
387
|
+
* const numbers = [1, 2, 3, 4, 5, 6];
|
|
388
|
+
* partition(numbers, n => n % 2 === 0); // [[2, 4, 6], [1, 3, 5]]
|
|
389
|
+
*
|
|
390
|
+
* @example
|
|
391
|
+
* const users = [
|
|
392
|
+
* { name: 'Alice', active: true },
|
|
393
|
+
* { name: 'Bob', active: false },
|
|
394
|
+
* { name: 'Charlie', active: true }
|
|
395
|
+
* ];
|
|
396
|
+
* partition(users, u => u.active);
|
|
397
|
+
* // [[{ name: 'Alice', active: true }, { name: 'Charlie', active: true }], [{ name: 'Bob', active: false }]]
|
|
398
|
+
*/
|
|
399
|
+
declare function partition<T>(array: T[], predicate: (item: T) => boolean): [T[], T[]];
|
|
400
|
+
|
|
401
|
+
/**
|
|
402
|
+
* Groups an array of items based on a provided predicate function.
|
|
403
|
+
*
|
|
404
|
+
* @template K - The type of keys produced by the predicate, typically a string, number, or symbol.
|
|
405
|
+
* @template V - The type of items in the collection.
|
|
406
|
+
* @param collection - The array of items to be grouped.
|
|
407
|
+
* @param predicate - A function that takes an item and returns a key by which to group the item.
|
|
408
|
+
* @returns An object where each key is a group identifier produced by the predicate,
|
|
409
|
+
* and the value is an array of items belonging to that group.
|
|
410
|
+
*
|
|
411
|
+
* @example
|
|
412
|
+
* // Group an array of people by their age
|
|
413
|
+
* const people = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 25 }, { name: 'Charlie', age: 30 }];
|
|
414
|
+
* const groupedByAge = groupBy(people, person => person.age);
|
|
415
|
+
* // Output:
|
|
416
|
+
* // {
|
|
417
|
+
* // 25: [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 25 }],
|
|
418
|
+
* // 30: [{ name: 'Charlie', age: 30 }]
|
|
419
|
+
* // }
|
|
420
|
+
*/
|
|
421
|
+
declare function groupBy<K extends string | number | symbol, V>(collection: V[], predicate: (item: V) => K): Record<K, V[]>;
|
|
422
|
+
|
|
423
|
+
export { chunk, debounce, deepClone, deepEqual, deepMerge, groupBy, isPlainObject, mergeClasses, omit, partition, pick, resolvePath, retry, throttle };
|
|
424
|
+
export type { DebounceOptions, DebouncedFn, ResolvePath, RetryOptions, ThrottledFn };
|
package/types/ngx-com.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Public API Surface of ngx-com
|
|
3
|
+
*
|
|
4
|
+
* For specific imports, use subpaths:
|
|
5
|
+
* - ngx-com/components
|
|
6
|
+
* - ngx-com/utils
|
|
7
|
+
* - ngx-com/tokens
|
|
8
|
+
*/
|
|
9
|
+
declare const VERSION = "0.0.1";
|
|
2
10
|
|
|
3
|
-
|
|
4
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<Com, never>;
|
|
5
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<Com, "com-com", never, {}, {}, never, never, true, never>;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export { Com };
|
|
11
|
+
export { VERSION };
|