@shival99/z-ui 2.4.3 → 2.4.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/assets/css/base.css +2 -1
- package/assets/css/global.css +23 -2
- package/assets/css/tailwind.css +7 -4
- package/fesm2022/shival99-z-ui-components-z-accordion.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-accordion.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-audio-player.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-audio-player.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs +27 -12
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-avatar.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-avatar.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-breadcrumb.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-breadcrumb.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-button-group.mjs +11 -11
- package/fesm2022/shival99-z-ui-components-z-button-group.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-button.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-button.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs +40 -40
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-card.mjs +7 -7
- package/fesm2022/shival99-z-ui-components-z-card.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-chat.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-chat.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-checkbox.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-checkbox.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-code.mjs +58 -19
- package/fesm2022/shival99-z-ui-components-z-code.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-command.mjs +6 -5
- package/fesm2022/shival99-z-ui-components-z-command.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs +17 -17
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs +12 -4
- package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-editor.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-editor.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-empty.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-empty.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-filter.mjs +27 -27
- package/fesm2022/shival99-z-ui-components-z-filter.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs +42 -34
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-hover-glide.mjs +221 -0
- package/fesm2022/shival99-z-ui-components-z-hover-glide.mjs.map +1 -0
- package/fesm2022/shival99-z-ui-components-z-icon.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-icon.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-input.mjs +5 -5
- package/fesm2022/shival99-z-ui-components-z-input.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-kanban.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-kanban.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-loading.mjs +18 -4
- package/fesm2022/shival99-z-ui-components-z-loading.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-marquee.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-marquee.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-media-player.mjs +346 -956
- package/fesm2022/shival99-z-ui-components-z-media-player.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-menu.mjs +8 -8
- package/fesm2022/shival99-z-ui-components-z-menu.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-metric-card.mjs +5 -5
- package/fesm2022/shival99-z-ui-components-z-metric-card.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-modal.mjs +17 -17
- package/fesm2022/shival99-z-ui-components-z-modal.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-number-ticker.mjs +352 -0
- package/fesm2022/shival99-z-ui-components-z-number-ticker.mjs.map +1 -0
- package/fesm2022/shival99-z-ui-components-z-overlay.mjs +9 -9
- package/fesm2022/shival99-z-ui-components-z-overlay.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-popover.mjs +14 -14
- package/fesm2022/shival99-z-ui-components-z-popover.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-qrcode.mjs +32 -8
- package/fesm2022/shival99-z-ui-components-z-qrcode.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-radio.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-radio.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-select.mjs +181 -26
- package/fesm2022/shival99-z-ui-components-z-select.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-show-more.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-show-more.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-skeleton.mjs +5 -5
- package/fesm2022/shival99-z-ui-components-z-skeleton.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-steps.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-steps.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-switch.mjs +5 -5
- package/fesm2022/shival99-z-ui-components-z-switch.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-table.mjs +107 -105
- package/fesm2022/shival99-z-ui-components-z-table.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs +327 -31
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-tags.mjs +15 -15
- package/fesm2022/shival99-z-ui-components-z-tags.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-timeline.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-timeline.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-toast.mjs +10 -9
- package/fesm2022/shival99-z-ui-components-z-toast.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-tooltip.mjs +11 -11
- package/fesm2022/shival99-z-ui-components-z-tooltip.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-upload.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-upload.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-i18n.mjs +6 -26
- package/fesm2022/shival99-z-ui-i18n.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-pipes.mjs +18 -18
- package/fesm2022/shival99-z-ui-pipes.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-services.mjs +31 -31
- package/fesm2022/shival99-z-ui-services.mjs.map +1 -1
- package/package.json +21 -1
- package/types/shival99-z-ui-components-z-autocomplete.d.ts +6 -2
- package/types/shival99-z-ui-components-z-calendar.d.ts +4 -4
- package/types/shival99-z-ui-components-z-card.d.ts +21 -21
- package/types/shival99-z-ui-components-z-code.d.ts +16 -3
- package/types/shival99-z-ui-components-z-drawer.d.ts +1 -1
- package/types/shival99-z-ui-components-z-editor.d.ts +8 -8
- package/types/shival99-z-ui-components-z-gallery.d.ts +4 -1
- package/types/shival99-z-ui-components-z-hover-glide.d.ts +48 -0
- package/types/shival99-z-ui-components-z-icon.d.ts +1 -1
- package/types/shival99-z-ui-components-z-loading.d.ts +9 -2
- package/types/shival99-z-ui-components-z-media-player.d.ts +102 -172
- package/types/shival99-z-ui-components-z-metric-card.d.ts +19 -19
- package/types/shival99-z-ui-components-z-modal.d.ts +1 -1
- package/types/shival99-z-ui-components-z-number-ticker.d.ts +110 -0
- package/types/shival99-z-ui-components-z-overlay.d.ts +3 -3
- package/types/shival99-z-ui-components-z-popover.d.ts +11 -8
- package/types/shival99-z-ui-components-z-qrcode.d.ts +5 -2
- package/types/shival99-z-ui-components-z-select.d.ts +45 -7
- package/types/shival99-z-ui-components-z-switch.d.ts +22 -21
- package/types/shival99-z-ui-components-z-table.d.ts +1 -1
- package/types/shival99-z-ui-components-z-tabs.d.ts +59 -7
- package/types/shival99-z-ui-components-z-toast.d.ts +1 -1
- package/types/shival99-z-ui-components-z-tooltip.d.ts +2 -2
- package/types/shival99-z-ui-components-z-upload.d.ts +3 -3
- package/types/shival99-z-ui-services.d.ts +10 -10
|
@@ -2,8 +2,9 @@ import * as _tanstack_angular_virtual from '@tanstack/angular-virtual';
|
|
|
2
2
|
import * as _angular_core from '@angular/core';
|
|
3
3
|
import { TemplateRef, Signal, OnInit, ElementRef, PipeTransform } from '@angular/core';
|
|
4
4
|
import { ControlValueAccessor } from '@angular/forms';
|
|
5
|
+
import { ZBreadcrumbItem } from '@shival99/z-ui/components/z-breadcrumb';
|
|
5
6
|
import { ZIcon } from '@shival99/z-ui/components/z-icon';
|
|
6
|
-
import { ZPopoverPosition, ZPopoverControl } from '@shival99/z-ui/components/z-popover';
|
|
7
|
+
import { ZPopoverWidth, ZPopoverPosition, ZPopoverControl } from '@shival99/z-ui/components/z-popover';
|
|
7
8
|
import { ZAsyncOptionsConfig, ZEvent } from '@shival99/z-ui/utils';
|
|
8
9
|
import { ClassValue } from 'clsx';
|
|
9
10
|
import { Observable } from 'rxjs';
|
|
@@ -52,6 +53,7 @@ interface ZSelectControl<T = unknown> {
|
|
|
52
53
|
}
|
|
53
54
|
type ZSelectMode = 'single' | 'multiple' | 'tags';
|
|
54
55
|
type ZSelectSize = 'sm' | 'default' | 'lg';
|
|
56
|
+
type ZSelectVariant = 'default' | 'ghost';
|
|
55
57
|
type ZSelectAsyncValidateOn = 'change' | 'blur';
|
|
56
58
|
interface ZSelectOption<T = unknown> {
|
|
57
59
|
label: string;
|
|
@@ -59,6 +61,13 @@ interface ZSelectOption<T = unknown> {
|
|
|
59
61
|
disabled?: boolean;
|
|
60
62
|
group?: string;
|
|
61
63
|
icon?: string;
|
|
64
|
+
/** Nested options. When present, clicking this option drills into them (zTree mode) instead of selecting it. */
|
|
65
|
+
children?: ZSelectOption<T>[];
|
|
66
|
+
}
|
|
67
|
+
/** One level of a zTree navigation stack: the options shown, and the label of the option drilled into to reach it. */
|
|
68
|
+
interface ZSelectTreeLevel<T = unknown> {
|
|
69
|
+
label: string;
|
|
70
|
+
options: ZSelectOption<T>[];
|
|
62
71
|
}
|
|
63
72
|
interface ZSelectConfig<T = unknown> {
|
|
64
73
|
/** Số ký tự tối thiểu trước khi gọi async.load khi người dùng search. */
|
|
@@ -68,7 +77,6 @@ interface ZSelectConfig<T = unknown> {
|
|
|
68
77
|
/** Config để component tự search, load-more, loading và append options. */
|
|
69
78
|
async?: ZAsyncOptionsConfig<ZSelectOption<T>>;
|
|
70
79
|
}
|
|
71
|
-
declare const Z_SELECT_DEFAULT_CONFIG: Omit<ZSelectConfig, 'async'>;
|
|
72
80
|
interface ZSelectAsyncValidator<T = unknown> {
|
|
73
81
|
error: string;
|
|
74
82
|
message: string;
|
|
@@ -99,7 +107,6 @@ interface ZSelectTagColor {
|
|
|
99
107
|
text: string;
|
|
100
108
|
border: string;
|
|
101
109
|
}
|
|
102
|
-
declare const TAG_COLORS: ZSelectTagColor[];
|
|
103
110
|
|
|
104
111
|
declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAccessor {
|
|
105
112
|
private readonly _injector;
|
|
@@ -124,6 +131,7 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
|
|
|
124
131
|
readonly zClassSelect: _angular_core.InputSignal<ClassValue>;
|
|
125
132
|
readonly zMode: _angular_core.InputSignal<ZSelectMode>;
|
|
126
133
|
readonly zSize: _angular_core.InputSignal<ZSelectSize>;
|
|
134
|
+
readonly zVariant: _angular_core.InputSignal<ZSelectVariant>;
|
|
127
135
|
readonly zLabel: _angular_core.InputSignal<string>;
|
|
128
136
|
readonly zLabelClass: _angular_core.InputSignal<string>;
|
|
129
137
|
readonly zPlaceholder: _angular_core.InputSignal<string>;
|
|
@@ -144,6 +152,8 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
|
|
|
144
152
|
readonly zEmptyIcon: _angular_core.InputSignal<ZIcon>;
|
|
145
153
|
readonly zMaxTagCount: _angular_core.InputSignal<number>;
|
|
146
154
|
readonly zDropdownMaxHeight: _angular_core.InputSignal<number>;
|
|
155
|
+
/** Match the trigger by default; use `auto` or a number for an independent dropdown width. */
|
|
156
|
+
readonly zDropdownWidth: _angular_core.InputSignal<ZPopoverWidth>;
|
|
147
157
|
readonly zOptionHeight: _angular_core.InputSignal<number>;
|
|
148
158
|
readonly zVirtualScroll: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
|
|
149
159
|
readonly zDynamicSize: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
|
|
@@ -160,6 +170,8 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
|
|
|
160
170
|
readonly zScrollClose: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
|
|
161
171
|
readonly zSticky: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
|
|
162
172
|
readonly zPosition: _angular_core.InputSignal<ZPopoverPosition>;
|
|
173
|
+
readonly zTree: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
|
|
174
|
+
readonly zTreeRootLabel: _angular_core.InputSignal<string>;
|
|
163
175
|
readonly zSelectedTemplate: _angular_core.InputSignal<ZSelectLabelTemplate<T> | null>;
|
|
164
176
|
readonly zOptionTemplate: _angular_core.InputSignal<ZSelectOptionTemplate<T> | null>;
|
|
165
177
|
readonly zActionTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
@@ -193,7 +205,12 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
|
|
|
193
205
|
protected readonly dropdownId: string;
|
|
194
206
|
protected readonly searchText: _angular_core.WritableSignal<string>;
|
|
195
207
|
protected readonly dropdownWidth: _angular_core.WritableSignal<number>;
|
|
208
|
+
protected readonly dropdownWidthStyle: _angular_core.Signal<string | null>;
|
|
196
209
|
protected readonly currentValue: _angular_core.Signal<T | T[] | null>;
|
|
210
|
+
protected readonly treeStack: _angular_core.WritableSignal<ZSelectTreeLevel<T>[]>;
|
|
211
|
+
protected readonly treeActiveIndex: _angular_core.WritableSignal<number>;
|
|
212
|
+
protected readonly treeSearchText: _angular_core.WritableSignal<string>;
|
|
213
|
+
protected readonly treeDirection: _angular_core.WritableSignal<"none" | "forward" | "back">;
|
|
197
214
|
protected readonly config: _angular_core.Signal<ZSelectConfig<T>>;
|
|
198
215
|
protected readonly hasAsyncOptions: _angular_core.Signal<boolean>;
|
|
199
216
|
protected readonly sourceOptions: _angular_core.Signal<ZSelectOption<T>[]>;
|
|
@@ -211,6 +228,10 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
|
|
|
211
228
|
protected readonly effectivePlaceholderSearch: _angular_core.Signal<string>;
|
|
212
229
|
protected readonly effectiveNotFoundText: _angular_core.Signal<string>;
|
|
213
230
|
protected readonly effectiveEmptyText: _angular_core.Signal<string>;
|
|
231
|
+
protected readonly effectiveTreeRootLabel: _angular_core.Signal<string>;
|
|
232
|
+
protected readonly treeCurrentLevel: _angular_core.Signal<ZSelectTreeLevel<T>>;
|
|
233
|
+
protected readonly treeBreadcrumbItems: _angular_core.Signal<ZBreadcrumbItem[]>;
|
|
234
|
+
protected readonly treeFilteredOptions: _angular_core.Signal<ZSelectOption<T>[]>;
|
|
214
235
|
protected readonly effectiveSelectAllText: _angular_core.Signal<string>;
|
|
215
236
|
protected readonly effectiveClearAllText: _angular_core.Signal<string>;
|
|
216
237
|
protected readonly effectiveRequiredErrorText: _angular_core.Signal<string>;
|
|
@@ -237,7 +258,7 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
|
|
|
237
258
|
protected readonly isEmptyData: _angular_core.Signal<boolean>;
|
|
238
259
|
protected readonly isNoSearchResults: _angular_core.Signal<boolean>;
|
|
239
260
|
protected readonly optionsMaxHeight: _angular_core.Signal<number>;
|
|
240
|
-
protected readonly currentStatus: _angular_core.Signal<"default" | "
|
|
261
|
+
protected readonly currentStatus: _angular_core.Signal<"default" | "open" | "error" | "disabled" | "readonly">;
|
|
241
262
|
private readonly _shouldShowValidation;
|
|
242
263
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
243
264
|
protected readonly errorMessage: _angular_core.Signal<string>;
|
|
@@ -280,6 +301,17 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
|
|
|
280
301
|
protected onSearchChange(value: string): void;
|
|
281
302
|
protected checkScrollShadow(): void;
|
|
282
303
|
protected selectOption(option: ZSelectOption<T>, closeFn?: () => void): void;
|
|
304
|
+
/** Selects a leaf option, or drills into its children when present (zTree mode). */
|
|
305
|
+
protected onTreeOptionClick(option: ZSelectOption<T>, closeFn?: () => void): void;
|
|
306
|
+
/** Jumps back to an ancestor level via the tree breadcrumb. */
|
|
307
|
+
protected treeNavigateTo(index: number): void;
|
|
308
|
+
/** Goes up exactly one tree level. */
|
|
309
|
+
protected treeGoBack(): void;
|
|
310
|
+
/** Resolves a z-breadcrumb click back to its stack level (matched by label, unique within one drill path). */
|
|
311
|
+
protected onTreeBreadcrumbClick(item: ZBreadcrumbItem): void;
|
|
312
|
+
private _drillIntoTree;
|
|
313
|
+
private _resetTreeStack;
|
|
314
|
+
private _translateOptionLabel;
|
|
283
315
|
protected removeOption(event: MouseEvent, option: ZSelectOption<T>): void;
|
|
284
316
|
protected clearAll(event: MouseEvent): void;
|
|
285
317
|
protected selectAll(): void;
|
|
@@ -287,6 +319,8 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
|
|
|
287
319
|
protected toggleSelectAllAction(): void;
|
|
288
320
|
protected trackByValue: (_index: number, option: ZSelectOption<T>) => unknown;
|
|
289
321
|
private _findOptionByValue;
|
|
322
|
+
/** Returns the chain of ancestors (ending with the matching option itself) leading to `value`. */
|
|
323
|
+
private _findTreePath;
|
|
290
324
|
private _getOptionKey;
|
|
291
325
|
private _isValueEqual;
|
|
292
326
|
private _emitControl;
|
|
@@ -308,7 +342,7 @@ declare class ZSelectComponent<T = unknown> implements OnInit, ControlValueAcces
|
|
|
308
342
|
private _cancelAsyncValidation;
|
|
309
343
|
private _triggerAsyncValidation;
|
|
310
344
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZSelectComponent<any>, never>;
|
|
311
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZSelectComponent<any>, "z-select", ["zSelect"], { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zClassSelect": { "alias": "zClassSelect"; "required": false; "isSignal": true; }; "zMode": { "alias": "zMode"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zLabel": { "alias": "zLabel"; "required": false; "isSignal": true; }; "zLabelClass": { "alias": "zLabelClass"; "required": false; "isSignal": true; }; "zPlaceholder": { "alias": "zPlaceholder"; "required": false; "isSignal": true; }; "zRequired": { "alias": "zRequired"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zReadonly": { "alias": "zReadonly"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; "zLoadingOutline": { "alias": "zLoadingOutline"; "required": false; "isSignal": true; }; "zPrefix": { "alias": "zPrefix"; "required": false; "isSignal": true; }; "zAllowClear": { "alias": "zAllowClear"; "required": false; "isSignal": true; }; "zShowCheck": { "alias": "zShowCheck"; "required": false; "isSignal": true; }; "zWrap": { "alias": "zWrap"; "required": false; "isSignal": true; }; "zShowSearch": { "alias": "zShowSearch"; "required": false; "isSignal": true; }; "zPlaceholderSearch": { "alias": "zPlaceholderSearch"; "required": false; "isSignal": true; }; "zDebounce": { "alias": "zDebounce"; "required": false; "isSignal": true; }; "zNotFoundText": { "alias": "zNotFoundText"; "required": false; "isSignal": true; }; "zEmptyText": { "alias": "zEmptyText"; "required": false; "isSignal": true; }; "zEmptyIcon": { "alias": "zEmptyIcon"; "required": false; "isSignal": true; }; "zMaxTagCount": { "alias": "zMaxTagCount"; "required": false; "isSignal": true; }; "zDropdownMaxHeight": { "alias": "zDropdownMaxHeight"; "required": false; "isSignal": true; }; "zOptionHeight": { "alias": "zOptionHeight"; "required": false; "isSignal": true; }; "zVirtualScroll": { "alias": "zVirtualScroll"; "required": false; "isSignal": true; }; "zDynamicSize": { "alias": "zDynamicSize"; "required": false; "isSignal": true; }; "zShowAction": { "alias": "zShowAction"; "required": false; "isSignal": true; }; "zOptions": { "alias": "zOptions"; "required": false; "isSignal": true; }; "zConfig": { "alias": "zConfig"; "required": false; "isSignal": true; }; "zTranslateLabels": { "alias": "zTranslateLabels"; "required": false; "isSignal": true; }; "zKey": { "alias": "zKey"; "required": false; "isSignal": true; }; "zSearchServer": { "alias": "zSearchServer"; "required": false; "isSignal": true; }; "zLoadingMore": { "alias": "zLoadingMore"; "required": false; "isSignal": true; }; "zEnableLoadMore": { "alias": "zEnableLoadMore"; "required": false; "isSignal": true; }; "zScrollDistance": { "alias": "zScrollDistance"; "required": false; "isSignal": true; }; "zMaxVisible": { "alias": "zMaxVisible"; "required": false; "isSignal": true; }; "zScrollClose": { "alias": "zScrollClose"; "required": false; "isSignal": true; }; "zSticky": { "alias": "zSticky"; "required": false; "isSignal": true; }; "zPosition": { "alias": "zPosition"; "required": false; "isSignal": true; }; "zSelectedTemplate": { "alias": "zSelectedTemplate"; "required": false; "isSignal": true; }; "zOptionTemplate": { "alias": "zOptionTemplate"; "required": false; "isSignal": true; }; "zActionTemplate": { "alias": "zActionTemplate"; "required": false; "isSignal": true; }; "zAsyncValidators": { "alias": "zAsyncValidators"; "required": false; "isSignal": true; }; "zAsyncDebounce": { "alias": "zAsyncDebounce"; "required": false; "isSignal": true; }; "zAsyncValidateOn": { "alias": "zAsyncValidateOn"; "required": false; "isSignal": true; }; "zValidators": { "alias": "zValidators"; "required": false; "isSignal": true; }; }, { "zOnSearch": "zOnSearch"; "zOnLoadMore": "zOnLoadMore"; "zOnBlur": "zOnBlur"; "zOnFocus": "zOnFocus"; "zControl": "zControl"; "zEvent": "zEvent"; }, ["customSelectedDirective", "customOptionDirective"], never, true, never>;
|
|
345
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZSelectComponent<any>, "z-select", ["zSelect"], { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zClassSelect": { "alias": "zClassSelect"; "required": false; "isSignal": true; }; "zMode": { "alias": "zMode"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zVariant": { "alias": "zVariant"; "required": false; "isSignal": true; }; "zLabel": { "alias": "zLabel"; "required": false; "isSignal": true; }; "zLabelClass": { "alias": "zLabelClass"; "required": false; "isSignal": true; }; "zPlaceholder": { "alias": "zPlaceholder"; "required": false; "isSignal": true; }; "zRequired": { "alias": "zRequired"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zReadonly": { "alias": "zReadonly"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; "zLoadingOutline": { "alias": "zLoadingOutline"; "required": false; "isSignal": true; }; "zPrefix": { "alias": "zPrefix"; "required": false; "isSignal": true; }; "zAllowClear": { "alias": "zAllowClear"; "required": false; "isSignal": true; }; "zShowCheck": { "alias": "zShowCheck"; "required": false; "isSignal": true; }; "zWrap": { "alias": "zWrap"; "required": false; "isSignal": true; }; "zShowSearch": { "alias": "zShowSearch"; "required": false; "isSignal": true; }; "zPlaceholderSearch": { "alias": "zPlaceholderSearch"; "required": false; "isSignal": true; }; "zDebounce": { "alias": "zDebounce"; "required": false; "isSignal": true; }; "zNotFoundText": { "alias": "zNotFoundText"; "required": false; "isSignal": true; }; "zEmptyText": { "alias": "zEmptyText"; "required": false; "isSignal": true; }; "zEmptyIcon": { "alias": "zEmptyIcon"; "required": false; "isSignal": true; }; "zMaxTagCount": { "alias": "zMaxTagCount"; "required": false; "isSignal": true; }; "zDropdownMaxHeight": { "alias": "zDropdownMaxHeight"; "required": false; "isSignal": true; }; "zDropdownWidth": { "alias": "zDropdownWidth"; "required": false; "isSignal": true; }; "zOptionHeight": { "alias": "zOptionHeight"; "required": false; "isSignal": true; }; "zVirtualScroll": { "alias": "zVirtualScroll"; "required": false; "isSignal": true; }; "zDynamicSize": { "alias": "zDynamicSize"; "required": false; "isSignal": true; }; "zShowAction": { "alias": "zShowAction"; "required": false; "isSignal": true; }; "zOptions": { "alias": "zOptions"; "required": false; "isSignal": true; }; "zConfig": { "alias": "zConfig"; "required": false; "isSignal": true; }; "zTranslateLabels": { "alias": "zTranslateLabels"; "required": false; "isSignal": true; }; "zKey": { "alias": "zKey"; "required": false; "isSignal": true; }; "zSearchServer": { "alias": "zSearchServer"; "required": false; "isSignal": true; }; "zLoadingMore": { "alias": "zLoadingMore"; "required": false; "isSignal": true; }; "zEnableLoadMore": { "alias": "zEnableLoadMore"; "required": false; "isSignal": true; }; "zScrollDistance": { "alias": "zScrollDistance"; "required": false; "isSignal": true; }; "zMaxVisible": { "alias": "zMaxVisible"; "required": false; "isSignal": true; }; "zScrollClose": { "alias": "zScrollClose"; "required": false; "isSignal": true; }; "zSticky": { "alias": "zSticky"; "required": false; "isSignal": true; }; "zPosition": { "alias": "zPosition"; "required": false; "isSignal": true; }; "zTree": { "alias": "zTree"; "required": false; "isSignal": true; }; "zTreeRootLabel": { "alias": "zTreeRootLabel"; "required": false; "isSignal": true; }; "zSelectedTemplate": { "alias": "zSelectedTemplate"; "required": false; "isSignal": true; }; "zOptionTemplate": { "alias": "zOptionTemplate"; "required": false; "isSignal": true; }; "zActionTemplate": { "alias": "zActionTemplate"; "required": false; "isSignal": true; }; "zAsyncValidators": { "alias": "zAsyncValidators"; "required": false; "isSignal": true; }; "zAsyncDebounce": { "alias": "zAsyncDebounce"; "required": false; "isSignal": true; }; "zAsyncValidateOn": { "alias": "zAsyncValidateOn"; "required": false; "isSignal": true; }; "zValidators": { "alias": "zValidators"; "required": false; "isSignal": true; }; }, { "zOnSearch": "zOnSearch"; "zOnLoadMore": "zOnLoadMore"; "zOnBlur": "zOnBlur"; "zOnFocus": "zOnFocus"; "zControl": "zControl"; "zEvent": "zEvent"; }, ["customSelectedDirective", "customOptionDirective"], never, true, never>;
|
|
312
346
|
}
|
|
313
347
|
|
|
314
348
|
declare class ZIsSelectedPipe implements PipeTransform {
|
|
@@ -329,9 +363,13 @@ declare class ZTagClassesPipe implements PipeTransform {
|
|
|
329
363
|
static ɵpipe: _angular_core.ɵɵPipeDeclaration<ZTagClassesPipe, "zTagClasses", true>;
|
|
330
364
|
}
|
|
331
365
|
|
|
366
|
+
declare const Z_SELECT_DEFAULT_CONFIG: Omit<ZSelectConfig, 'async'>;
|
|
367
|
+
declare const TAG_COLORS: ZSelectTagColor[];
|
|
368
|
+
|
|
332
369
|
declare const zSelectVariants: (props?: ({
|
|
370
|
+
zVariant?: "default" | "ghost" | null | undefined;
|
|
333
371
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
334
|
-
zStatus?: "default" | "
|
|
372
|
+
zStatus?: "default" | "open" | "error" | "disabled" | "readonly" | null | undefined;
|
|
335
373
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
336
374
|
declare const zSelectTagVariants: (props?: ({
|
|
337
375
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
@@ -354,4 +392,4 @@ declare function filterOptions<T>(options: {
|
|
|
354
392
|
}[];
|
|
355
393
|
|
|
356
394
|
export { TAG_COLORS, ZIsSelectedPipe, ZOptionClassesPipe, ZSelectComponent, ZSelectOptionDirective, ZSelectSelectedDirective, ZTagClassesPipe, Z_SELECT_DEFAULT_CONFIG, filterOptions, getTagColor, zSelectOptionVariants, zSelectTagVariants, zSelectVariants };
|
|
357
|
-
export type { ZSelectAsyncValidateOn, ZSelectAsyncValidator, ZSelectConfig, ZSelectControl, ZSelectLabelTemplate, ZSelectLoadMoreEvent, ZSelectMode, ZSelectOption, ZSelectOptionGroup, ZSelectOptionTemplate, ZSelectSize, ZSelectTagColor, ZSelectValidator };
|
|
395
|
+
export type { ZSelectAsyncValidateOn, ZSelectAsyncValidator, ZSelectConfig, ZSelectControl, ZSelectLabelTemplate, ZSelectLoadMoreEvent, ZSelectMode, ZSelectOption, ZSelectOptionGroup, ZSelectOptionTemplate, ZSelectSize, ZSelectTagColor, ZSelectValidator, ZSelectVariant };
|
|
@@ -3,13 +3,30 @@ import { ControlValueAccessor } from '@angular/forms';
|
|
|
3
3
|
import { ZIcon } from '@shival99/z-ui/components/z-icon';
|
|
4
4
|
import { ZEvent } from '@shival99/z-ui/utils';
|
|
5
5
|
import { ClassValue } from 'clsx';
|
|
6
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
7
6
|
import { VariantProps } from 'class-variance-authority';
|
|
7
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
8
|
+
|
|
9
|
+
declare const zSwitchVariants: (props?: ({
|
|
10
|
+
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
11
|
+
zMode?: "default" | "inner" | null | undefined;
|
|
12
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
|
+
declare const zSwitchThumbVariants: (props?: ({
|
|
14
|
+
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
15
|
+
zMode?: "default" | "inner" | null | undefined;
|
|
16
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
17
|
+
declare const zSwitchLabelVariants: (props?: ({
|
|
18
|
+
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
19
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
20
|
+
declare const zSwitchInnerLeftVariants: (props?: ({
|
|
21
|
+
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
22
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
23
|
+
declare const zSwitchInnerRightVariants: (props?: ({
|
|
24
|
+
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
25
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
8
26
|
|
|
9
27
|
type ZSwitchSize = 'sm' | 'default' | 'lg';
|
|
10
28
|
type ZSwitchMode = 'default' | 'inner';
|
|
11
|
-
|
|
12
|
-
declare const Z_SWITCH_INNER_TEXT_MAX_LENGTH = 8;
|
|
29
|
+
type ZSwitchVariants = VariantProps<typeof zSwitchVariants>;
|
|
13
30
|
|
|
14
31
|
declare class ZSwitchComponent implements ControlValueAccessor {
|
|
15
32
|
readonly zChange: _angular_core.OutputEmitterRef<boolean>;
|
|
@@ -60,24 +77,8 @@ declare class ZSwitchComponent implements ControlValueAccessor {
|
|
|
60
77
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZSwitchComponent, "z-switch", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zSwitchClass": { "alias": "zSwitchClass"; "required": false; "isSignal": true; }; "zThumbClass": { "alias": "zThumbClass"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zMode": { "alias": "zMode"; "required": false; "isSignal": true; }; "zLabel": { "alias": "zLabel"; "required": false; "isSignal": true; }; "zText": { "alias": "zText"; "required": false; "isSignal": true; }; "zCheckedText": { "alias": "zCheckedText"; "required": false; "isSignal": true; }; "zUncheckedText": { "alias": "zUncheckedText"; "required": false; "isSignal": true; }; "zCheckedIcon": { "alias": "zCheckedIcon"; "required": false; "isSignal": true; }; "zUncheckedIcon": { "alias": "zUncheckedIcon"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; "zTextPosition": { "alias": "zTextPosition"; "required": false; "isSignal": true; }; "zWave": { "alias": "zWave"; "required": false; "isSignal": true; }; "zChecked": { "alias": "zChecked"; "required": false; "isSignal": true; }; }, { "zChange": "zChange"; "zOnBlur": "zOnBlur"; "zOnFocus": "zOnFocus"; "zEvent": "zEvent"; "zChecked": "zCheckedChange"; }, never, never, true, never>;
|
|
61
78
|
}
|
|
62
79
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
zMode?: "default" | "inner" | null | undefined;
|
|
66
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
67
|
-
declare const zSwitchThumbVariants: (props?: ({
|
|
68
|
-
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
69
|
-
zMode?: "default" | "inner" | null | undefined;
|
|
70
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
71
|
-
declare const zSwitchLabelVariants: (props?: ({
|
|
72
|
-
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
73
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
74
|
-
declare const zSwitchInnerLeftVariants: (props?: ({
|
|
75
|
-
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
76
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
77
|
-
declare const zSwitchInnerRightVariants: (props?: ({
|
|
78
|
-
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
79
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
80
|
-
type ZSwitchVariants = VariantProps<typeof zSwitchVariants>;
|
|
80
|
+
/** Maximum character length for inner text */
|
|
81
|
+
declare const Z_SWITCH_INNER_TEXT_MAX_LENGTH = 8;
|
|
81
82
|
|
|
82
83
|
export { ZSwitchComponent, Z_SWITCH_INNER_TEXT_MAX_LENGTH, zSwitchInnerLeftVariants, zSwitchInnerRightVariants, zSwitchLabelVariants, zSwitchThumbVariants, zSwitchVariants };
|
|
83
84
|
export type { ZSwitchMode, ZSwitchSize, ZSwitchVariants };
|
|
@@ -2167,7 +2167,7 @@ declare class ZTableFilterComponent<T> {
|
|
|
2167
2167
|
protected readonly filterBadgeCount: _angular_core.Signal<number>;
|
|
2168
2168
|
protected readonly hasFilterValue: _angular_core.Signal<boolean>;
|
|
2169
2169
|
protected readonly isActive: _angular_core.Signal<boolean>;
|
|
2170
|
-
protected readonly draftSortValue: _angular_core.Signal<"
|
|
2170
|
+
protected readonly draftSortValue: _angular_core.Signal<"none" | "asc" | "desc">;
|
|
2171
2171
|
protected readonly rangeMinValue: _angular_core.Signal<any>;
|
|
2172
2172
|
protected readonly rangeMaxValue: _angular_core.Signal<any>;
|
|
2173
2173
|
protected readonly dateValue: _angular_core.Signal<Date | null>;
|
|
@@ -13,11 +13,11 @@ declare class ZTabPanelDirective {
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
declare const zTabsVariants: (props?: ({
|
|
16
|
-
zType?: "line" | "soft" | "segment" | "segment-solid" | "pill-solid" | "pill-blur" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "square" | "vertical-sharp" | "code-line" | null | undefined;
|
|
16
|
+
zType?: "line" | "soft" | "segment" | "segment-solid" | "pill-solid" | "pill-blur" | "pill-float" | "pill-primary" | "assistant" | "underline-hover" | "bar" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "square" | "vertical-sharp" | "code-line" | null | undefined;
|
|
17
17
|
zOrientation?: "horizontal" | "vertical" | null | undefined;
|
|
18
18
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
19
19
|
declare const zTabItemVariants: (props?: ({
|
|
20
|
-
zType?: "line" | "soft" | "segment" | "segment-solid" | "pill-solid" | "pill-blur" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "square" | "vertical-sharp" | "code-line" | null | undefined;
|
|
20
|
+
zType?: "line" | "soft" | "segment" | "segment-solid" | "pill-solid" | "pill-blur" | "pill-float" | "pill-primary" | "assistant" | "underline-hover" | "bar" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "square" | "vertical-sharp" | "code-line" | null | undefined;
|
|
21
21
|
zSize?: "xs" | "sm" | "default" | "lg" | null | undefined;
|
|
22
22
|
zOrientation?: "horizontal" | "vertical" | null | undefined;
|
|
23
23
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -26,14 +26,22 @@ interface ZTab {
|
|
|
26
26
|
label: string;
|
|
27
27
|
value: string;
|
|
28
28
|
icon?: ZIcon;
|
|
29
|
+
/**
|
|
30
|
+
* Renders the tab's leading mark from a template instead of `icon`, for marks `z-icon` cannot draw —
|
|
31
|
+
* a multi-colour brand SVG, a flag, an avatar. Receives the `ZTab` as its implicit context, so one
|
|
32
|
+
* template can serve a whole strip. Takes precedence over `icon`.
|
|
33
|
+
*/
|
|
34
|
+
iconTemplate?: TemplateRef<unknown>;
|
|
29
35
|
disabled?: boolean;
|
|
30
36
|
badge?: string | number;
|
|
31
37
|
template?: TemplateRef<unknown>;
|
|
32
38
|
}
|
|
33
|
-
type ZTabsType = 'line' | 'soft' | 'segment' | 'segment-solid' | 'pill-solid' | 'pill-blur' | 'folder' | 'folder-soft' | 'folder-solid' | 'underline' | 'underlined' | 'badge' | 'sharp' | 'sharp-line' | 'sharp-line-filled' | 'square' | 'vertical-sharp' | 'code-line';
|
|
39
|
+
type ZTabsType = 'line' | 'soft' | 'segment' | 'segment-solid' | 'pill-solid' | 'pill-blur' | 'pill-float' | 'pill-primary' | 'assistant' | 'underline-hover' | 'bar' | 'folder' | 'folder-soft' | 'folder-solid' | 'underline' | 'underlined' | 'badge' | 'sharp' | 'sharp-line' | 'sharp-line-filled' | 'square' | 'vertical-sharp' | 'code-line';
|
|
34
40
|
type ZTabsSize = 'xs' | 'sm' | 'default' | 'lg';
|
|
35
41
|
type ZTabsOrientation = 'horizontal' | 'vertical';
|
|
36
42
|
type ZTabsContentFit = 'none' | 'screen';
|
|
43
|
+
/** How the entering panel animates in. `slide` and `blur` also read the tab's travel direction. */
|
|
44
|
+
type ZTabsContentAnimation = 'none' | 'fade' | 'slide' | 'blur' | 'scale';
|
|
37
45
|
type ZTabsVariants = VariantProps<typeof zTabsVariants>;
|
|
38
46
|
type ZTabItemVariants = VariantProps<typeof zTabItemVariants>;
|
|
39
47
|
|
|
@@ -42,6 +50,9 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
42
50
|
readonly tabsListContainer: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
|
|
43
51
|
readonly tabButtons: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
|
|
44
52
|
readonly glideIndicator: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
|
|
53
|
+
readonly hoverIndicator: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
|
|
54
|
+
readonly tabsList: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
|
|
55
|
+
readonly panelsHost: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
|
|
45
56
|
readonly panelHost: _angular_core.Signal<ViewContainerRef | undefined>;
|
|
46
57
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
47
58
|
readonly zTabs: _angular_core.InputSignal<ZTab[]>;
|
|
@@ -49,6 +60,7 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
49
60
|
readonly zSize: _angular_core.InputSignal<ZTabsSize>;
|
|
50
61
|
readonly zOrientation: _angular_core.InputSignal<ZTabsOrientation>;
|
|
51
62
|
readonly zContentFit: _angular_core.InputSignal<ZTabsContentFit>;
|
|
63
|
+
readonly zContentAnimation: _angular_core.InputSignal<ZTabsContentAnimation>;
|
|
52
64
|
readonly zLazy: _angular_core.InputSignal<boolean>;
|
|
53
65
|
readonly zTabsOnly: _angular_core.InputSignal<boolean>;
|
|
54
66
|
readonly zShowNavWrapper: _angular_core.InputSignal<boolean>;
|
|
@@ -65,7 +77,15 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
65
77
|
protected readonly canScrollLeft: _angular_core.WritableSignal<boolean>;
|
|
66
78
|
protected readonly canScrollRight: _angular_core.WritableSignal<boolean>;
|
|
67
79
|
protected readonly bouncingTab: _angular_core.WritableSignal<string | null>;
|
|
80
|
+
protected readonly hoveredTab: _angular_core.WritableSignal<string | null>;
|
|
68
81
|
protected readonly isGlideType: _angular_core.Signal<boolean>;
|
|
82
|
+
protected readonly isHoverGlideType: _angular_core.Signal<boolean>;
|
|
83
|
+
private readonly _hasCollapsingLabel;
|
|
84
|
+
/**
|
|
85
|
+
* A vertical rail truncates long labels, so it gets a tooltip. `assistant` never does: it collapses
|
|
86
|
+
* inactive labels by design, and a tooltip on every icon turns browsing the strip into a popup storm.
|
|
87
|
+
*/
|
|
88
|
+
protected readonly showsTabTooltip: _angular_core.Signal<boolean>;
|
|
69
89
|
private _resizeObserver?;
|
|
70
90
|
private _scrollFrame?;
|
|
71
91
|
private readonly _zone;
|
|
@@ -74,8 +94,12 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
74
94
|
private _retiredViews;
|
|
75
95
|
private _teardownHandle?;
|
|
76
96
|
private _glideBox?;
|
|
97
|
+
private _hoverBox?;
|
|
77
98
|
private _glidePending;
|
|
78
99
|
private _glideAnimations;
|
|
100
|
+
private _contentAnimation?;
|
|
101
|
+
private _lastActiveIndex;
|
|
102
|
+
private _contentDirection;
|
|
79
103
|
private _viewReady;
|
|
80
104
|
private readonly _cacheInstanceId;
|
|
81
105
|
constructor();
|
|
@@ -95,6 +119,12 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
95
119
|
private readonly _tabItemClasses;
|
|
96
120
|
protected selectTab(tab: ZTab, scrollToView?: boolean): void;
|
|
97
121
|
protected onTabKeydown(event: KeyboardEvent, currentIndex: number): void;
|
|
122
|
+
/**
|
|
123
|
+
* Keyboard focus moves the highlight too, so tabbing through the strip reads the same as hovering.
|
|
124
|
+
* Every type pays the listener, but only the hover-glide types get past the guard into a signal write.
|
|
125
|
+
*/
|
|
126
|
+
protected onTabHover(tab: ZTab): void;
|
|
127
|
+
protected onTabHoverEnd(): void;
|
|
98
128
|
protected checkScroll(): void;
|
|
99
129
|
protected scrollLeft(): void;
|
|
100
130
|
protected scrollRight(): void;
|
|
@@ -121,8 +151,30 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
121
151
|
*/
|
|
122
152
|
private _swapPanelView;
|
|
123
153
|
private _scheduleTeardown;
|
|
124
|
-
/**
|
|
125
|
-
|
|
154
|
+
/**
|
|
155
|
+
* Records which way the strip travelled so `slide`/`blur` can enter from the side the user clicked
|
|
156
|
+
* towards. Effects run after the active-panel binding has updated, so the eager path can animate
|
|
157
|
+
* immediately and avoid painting one unanimated frame before the enter state is applied.
|
|
158
|
+
*/
|
|
159
|
+
private _trackContentDirection;
|
|
160
|
+
/**
|
|
161
|
+
* Animates the entering panel. Everything but `blur` is transform/opacity only, so the animation
|
|
162
|
+
* ticks on the compositor and a heavy panel mounting in the same frame cannot stall it.
|
|
163
|
+
*/
|
|
164
|
+
private _animateContent;
|
|
165
|
+
/**
|
|
166
|
+
* `width: auto` cannot be interpolated, so the label's own content width is measured and written as
|
|
167
|
+
* an explicit pixel width for the stylesheet to transition from zero. `scrollWidth` reports that
|
|
168
|
+
* content width even while the element is clamped to zero and hidden, so no reflow-forcing dance is
|
|
169
|
+
* needed. The active surface lives on the tab itself for these types, which is what lets the pill
|
|
170
|
+
* grow in step with the label rather than chase a box that is still resizing.
|
|
171
|
+
*/
|
|
172
|
+
private _updateCollapsingLabels;
|
|
173
|
+
/**
|
|
174
|
+
* Moves the muted highlight onto the hovered tab. The first placement jumps into position and only
|
|
175
|
+
* fades in — gliding it in from a stale box would read as a stray rectangle crossing the strip.
|
|
176
|
+
*/
|
|
177
|
+
private _updateHoverIndicator;
|
|
126
178
|
/**
|
|
127
179
|
* Measurement and imperative DOM work never needs a change-detection tick of its own. With zone.js a
|
|
128
180
|
* plain `requestAnimationFrame` schedules one per callback — wasteful during a smooth scroll, which
|
|
@@ -136,8 +188,8 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
136
188
|
private _getCacheKey;
|
|
137
189
|
protected scrollToActiveDropdownItem(): void;
|
|
138
190
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZTabsComponent, never>;
|
|
139
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZTabsComponent, "z-tabs", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTabs": { "alias": "zTabs"; "required": true; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zContentFit": { "alias": "zContentFit"; "required": false; "isSignal": true; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "zShowNavWrapper": { "alias": "zShowNavWrapper"; "required": false; "isSignal": true; }; "zNavFullWidth": { "alias": "zNavFullWidth"; "required": false; "isSignal": true; }; "zClassContent": { "alias": "zClassContent"; "required": false; "isSignal": true; }; "zShowContentWrapper": { "alias": "zShowContentWrapper"; "required": false; "isSignal": true; }; "zReloadable": { "alias": "zReloadable"; "required": false; "isSignal": true; }; "zEmitOnActiveClick": { "alias": "zEmitOnActiveClick"; "required": false; "isSignal": true; }; "zCache": { "alias": "zCache"; "required": false; "isSignal": true; }; "zCacheKey": { "alias": "zCacheKey"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
|
|
191
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZTabsComponent, "z-tabs", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTabs": { "alias": "zTabs"; "required": true; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zContentFit": { "alias": "zContentFit"; "required": false; "isSignal": true; }; "zContentAnimation": { "alias": "zContentAnimation"; "required": false; "isSignal": true; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "zShowNavWrapper": { "alias": "zShowNavWrapper"; "required": false; "isSignal": true; }; "zNavFullWidth": { "alias": "zNavFullWidth"; "required": false; "isSignal": true; }; "zClassContent": { "alias": "zClassContent"; "required": false; "isSignal": true; }; "zShowContentWrapper": { "alias": "zShowContentWrapper"; "required": false; "isSignal": true; }; "zReloadable": { "alias": "zReloadable"; "required": false; "isSignal": true; }; "zEmitOnActiveClick": { "alias": "zEmitOnActiveClick"; "required": false; "isSignal": true; }; "zCache": { "alias": "zCache"; "required": false; "isSignal": true; }; "zCacheKey": { "alias": "zCacheKey"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
|
|
140
192
|
}
|
|
141
193
|
|
|
142
194
|
export { ZTabPanelDirective, ZTabsComponent, zTabItemVariants, zTabsVariants };
|
|
143
|
-
export type { ZTab, ZTabItemVariants, ZTabsContentFit, ZTabsOrientation, ZTabsSize, ZTabsType, ZTabsVariants };
|
|
195
|
+
export type { ZTab, ZTabItemVariants, ZTabsContentAnimation, ZTabsContentFit, ZTabsOrientation, ZTabsSize, ZTabsType, ZTabsVariants };
|
|
@@ -155,7 +155,7 @@ declare class ZToastService implements OnDestroy {
|
|
|
155
155
|
private _createOverlay;
|
|
156
156
|
private _translate;
|
|
157
157
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZToastService, never>;
|
|
158
|
-
static ɵprov: _angular_core.ɵɵInjectableDeclaration<
|
|
158
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
declare const zToastVariants: (props?: ({
|
|
@@ -2,8 +2,8 @@ import * as _shival99_z_ui_components_z_overlay from '@shival99/z-ui/components/
|
|
|
2
2
|
import { ZOverlayPlacement } from '@shival99/z-ui/components/z-overlay';
|
|
3
3
|
import * as _angular_core from '@angular/core';
|
|
4
4
|
import { TemplateRef, OnInit, OnDestroy } from '@angular/core';
|
|
5
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
6
5
|
import { VariantProps } from 'class-variance-authority';
|
|
6
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
7
7
|
|
|
8
8
|
type ZTooltipPosition = ZOverlayPlacement;
|
|
9
9
|
|
|
@@ -12,10 +12,10 @@ declare const zTooltipVariants: (props?: ({
|
|
|
12
12
|
zSize?: "default" | "sm" | "lg" | null | undefined;
|
|
13
13
|
zPosition?: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | null | undefined;
|
|
14
14
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
15
|
-
type ZTooltipVariants = VariantProps<typeof zTooltipVariants>;
|
|
16
15
|
|
|
17
16
|
type ZTooltipTrigger = 'hover' | 'click';
|
|
18
17
|
type ZTooltipContent = string | TemplateRef<unknown>;
|
|
18
|
+
type ZTooltipVariants = VariantProps<typeof zTooltipVariants>;
|
|
19
19
|
interface ZTooltipConfig {
|
|
20
20
|
content?: ZTooltipContent;
|
|
21
21
|
position?: ZTooltipPosition;
|
|
@@ -100,7 +100,7 @@ declare class ZUploadComponent implements OnInit, ControlValueAccessor {
|
|
|
100
100
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
101
101
|
protected readonly showError: _angular_core.Signal<boolean>;
|
|
102
102
|
protected readonly errorMessage: _angular_core.Signal<string>;
|
|
103
|
-
protected readonly currentStatus: _angular_core.Signal<"default" | "
|
|
103
|
+
protected readonly currentStatus: _angular_core.Signal<"default" | "error" | "disabled" | "readonly" | "active">;
|
|
104
104
|
protected readonly dropzoneClasses: _angular_core.Signal<string>;
|
|
105
105
|
protected readonly acceptTypes: _angular_core.Signal<string>;
|
|
106
106
|
protected readonly formatFileSize: (bytes: number) => string;
|
|
@@ -141,11 +141,11 @@ declare class ZUploadComponent implements OnInit, ControlValueAccessor {
|
|
|
141
141
|
|
|
142
142
|
declare const zUploadDropzoneVariants: (props?: ({
|
|
143
143
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
144
|
-
zStatus?: "default" | "
|
|
144
|
+
zStatus?: "default" | "error" | "active" | "disabled" | "readonly" | null | undefined;
|
|
145
145
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
146
146
|
type ZUploadDropzoneVariants = VariantProps<typeof zUploadDropzoneVariants>;
|
|
147
147
|
declare const zUploadFileItemVariants: (props?: ({
|
|
148
|
-
zStatus?: "
|
|
148
|
+
zStatus?: "pending" | "uploading" | "success" | "error" | null | undefined;
|
|
149
149
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
150
150
|
type ZUploadFileItemVariants = VariantProps<typeof zUploadFileItemVariants>;
|
|
151
151
|
|
|
@@ -42,7 +42,7 @@ declare class ZCacheService {
|
|
|
42
42
|
static clear(): boolean;
|
|
43
43
|
static has(key: string, encrypt?: boolean): boolean;
|
|
44
44
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZCacheService, never>;
|
|
45
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
45
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
/** Content accepted by the dynamic overlay service. */
|
|
@@ -152,7 +152,7 @@ declare class ZDynamicService {
|
|
|
152
152
|
private _createOverlay;
|
|
153
153
|
private _isTemplate;
|
|
154
154
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZDynamicService, never>;
|
|
155
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
155
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
type ZExcelAlign = 'left' | 'center' | 'right';
|
|
@@ -329,7 +329,7 @@ declare class ZExcelService {
|
|
|
329
329
|
private static _getExcelVerticalAlignment;
|
|
330
330
|
private static _formatTimestamp;
|
|
331
331
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZExcelService, never>;
|
|
332
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
332
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
333
333
|
}
|
|
334
334
|
|
|
335
335
|
interface ZGalleryOfficeRenderResult {
|
|
@@ -344,7 +344,7 @@ declare class ZGalleryOfficeRenderService {
|
|
|
344
344
|
private _toUniverCellData;
|
|
345
345
|
private _observeDocxZoom;
|
|
346
346
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZGalleryOfficeRenderService, never>;
|
|
347
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
347
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
348
348
|
}
|
|
349
349
|
|
|
350
350
|
type ZHttpParamsType<T> = {
|
|
@@ -528,7 +528,7 @@ declare class ZTranslateService {
|
|
|
528
528
|
setTranslation(lang: string, translations: TranslationObject, shouldMerge?: boolean): void;
|
|
529
529
|
getNgxTranslate(): TranslateService;
|
|
530
530
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZTranslateService, never>;
|
|
531
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
531
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
532
532
|
}
|
|
533
533
|
|
|
534
534
|
declare const Z_HTTP_DEFAULT_CONFIG: Required<ZHttpConfig>;
|
|
@@ -579,7 +579,7 @@ declare abstract class ZHttpAbstractService<TApiType extends string = string> {
|
|
|
579
579
|
private _handleStatusCode;
|
|
580
580
|
private _redirectToLogin;
|
|
581
581
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZHttpAbstractService<any>, never>;
|
|
582
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
582
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
583
583
|
}
|
|
584
584
|
|
|
585
585
|
/**
|
|
@@ -603,7 +603,7 @@ declare class ZOverlayContainerService {
|
|
|
603
603
|
*/
|
|
604
604
|
notifyClosing(): void;
|
|
605
605
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZOverlayContainerService, never>;
|
|
606
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
606
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
607
607
|
}
|
|
608
608
|
|
|
609
609
|
/**
|
|
@@ -644,7 +644,7 @@ declare class ZOverlayZIndexService {
|
|
|
644
644
|
/** @deprecated Xem ghi chú tại {@link deferMoveToTop}. */
|
|
645
645
|
moveToTop(overlayRef: ZOverlayZIndexTarget): void;
|
|
646
646
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZOverlayZIndexService, never>;
|
|
647
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
647
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
648
648
|
}
|
|
649
649
|
|
|
650
650
|
type ZSubjectType = 'subject' | 'behavior';
|
|
@@ -688,7 +688,7 @@ declare class ZSubjectService {
|
|
|
688
688
|
*/
|
|
689
689
|
has(key: string, type: ZSubjectType): boolean;
|
|
690
690
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZSubjectService, never>;
|
|
691
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
691
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
692
692
|
}
|
|
693
693
|
|
|
694
694
|
type ZThemeName = 'green' | 'orange' | 'violet' | 'neutral' | 'stone' | 'zinc' | 'gray' | 'slate' | 'hospital';
|
|
@@ -730,7 +730,7 @@ declare class ZThemeService {
|
|
|
730
730
|
private _savePreferences;
|
|
731
731
|
private _isValidTheme;
|
|
732
732
|
static ɵfac: i0.ɵɵFactoryDeclaration<ZThemeService, never>;
|
|
733
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
733
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
734
734
|
}
|
|
735
735
|
|
|
736
736
|
declare const Z_CACHE_SCOPE_SEPARATOR = "-";
|