@shival99/z-ui 2.0.2 → 2.0.3
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/shival99-z-ui-components-z-editor.mjs +988 -204
- package/fesm2022/shival99-z-ui-components-z-editor.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-input.mjs +456 -16
- package/fesm2022/shival99-z-ui-components-z-input.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-tooltip.mjs +22 -7
- package/fesm2022/shival99-z-ui-components-z-tooltip.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-i18n.mjs +34 -0
- package/fesm2022/shival99-z-ui-i18n.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-utils.mjs +752 -1
- package/fesm2022/shival99-z-ui-utils.mjs.map +1 -1
- package/package.json +1 -1
- package/types/shival99-z-ui-components-z-autocomplete.d.ts +1 -1
- package/types/shival99-z-ui-components-z-calendar.d.ts +4 -4
- package/types/shival99-z-ui-components-z-editor.d.ts +142 -8
- package/types/shival99-z-ui-components-z-input.d.ts +83 -0
- package/types/shival99-z-ui-components-z-select.d.ts +1 -1
- package/types/shival99-z-ui-components-z-table.d.ts +1 -1
- package/types/shival99-z-ui-components-z-tooltip.d.ts +1 -0
- package/types/shival99-z-ui-utils.d.ts +18 -2
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import * as _shival99_z_ui_utils from '@shival99/z-ui/utils';
|
|
2
|
+
import { ZEvent, ZEmojiCategory } from '@shival99/z-ui/utils';
|
|
1
3
|
import * as _angular_core from '@angular/core';
|
|
2
4
|
import { Signal, OnInit } from '@angular/core';
|
|
3
5
|
import { ControlValueAccessor } from '@angular/forms';
|
|
6
|
+
import { ZIcon } from '@shival99/z-ui/components/z-icon';
|
|
4
7
|
import { ZInputValidator } from '@shival99/z-ui/components/z-input';
|
|
5
|
-
import {
|
|
8
|
+
import { ZPopoverControl } from '@shival99/z-ui/components/z-popover';
|
|
6
9
|
import { Content, Editor, Extension } from '@tiptap/core';
|
|
7
10
|
import { ClassValue } from 'clsx';
|
|
8
|
-
import { ZIcon } from '@shival99/z-ui/components/z-icon';
|
|
9
|
-
import { ImageOptions } from '@tiptap/extension-image';
|
|
10
11
|
import { LinkOptions } from '@tiptap/extension-link';
|
|
11
12
|
import { MentionOptions } from '@tiptap/extension-mention';
|
|
12
13
|
import { PlaceholderOptions } from '@tiptap/extension-placeholder';
|
|
@@ -16,12 +17,24 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
16
17
|
|
|
17
18
|
type ZEditorSize = 'sm' | 'default' | 'lg';
|
|
18
19
|
type ZEditorContentType = 'html' | 'json' | 'markdown';
|
|
19
|
-
type ZEditorToolbarCommand = 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'heading1' | 'heading2' | 'paragraph' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'horizontalRule' | 'link' | 'image' | 'undo' | 'redo' | 'clearFormatting';
|
|
20
|
+
type ZEditorToolbarCommand = 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'blockStyle' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'small' | 'paragraph' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'horizontalRule' | 'link' | 'image' | 'emoji' | 'textColor' | 'backgroundColor' | 'align' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'undo' | 'redo' | 'clearFormatting';
|
|
20
21
|
interface ZEditorToolbarItem {
|
|
21
22
|
id: ZEditorToolbarCommand;
|
|
22
23
|
icon: ZIcon;
|
|
23
24
|
label: string;
|
|
24
25
|
}
|
|
26
|
+
interface ZEditorSlashCommandItem {
|
|
27
|
+
id: string;
|
|
28
|
+
command: ZEditorToolbarCommand;
|
|
29
|
+
icon: ZIcon;
|
|
30
|
+
label: string;
|
|
31
|
+
description: string;
|
|
32
|
+
group: string;
|
|
33
|
+
aliases: readonly string[];
|
|
34
|
+
}
|
|
35
|
+
interface ZEditorSlashCommandViewItem extends ZEditorSlashCommandItem {
|
|
36
|
+
showGroupLabel: boolean;
|
|
37
|
+
}
|
|
25
38
|
interface ZEditorResolvedToolbarItem extends ZEditorToolbarItem {
|
|
26
39
|
active: boolean;
|
|
27
40
|
disabled: boolean;
|
|
@@ -82,7 +95,7 @@ interface ZEditorPlaceholderOptions extends Partial<PlaceholderOptions> {
|
|
|
82
95
|
interface ZEditorTipTapOptions {
|
|
83
96
|
starterKit?: Partial<StarterKitOptions>;
|
|
84
97
|
placeholder?: string | ZEditorPlaceholderOptions;
|
|
85
|
-
image?: boolean |
|
|
98
|
+
image?: boolean | Record<string, unknown>;
|
|
86
99
|
link?: Partial<LinkOptions>;
|
|
87
100
|
mention?: boolean | Partial<Omit<MentionOptions, 'suggestion' | 'suggestions'>>;
|
|
88
101
|
extensions?: Extension[];
|
|
@@ -93,6 +106,8 @@ declare class ZEditorComponent implements OnInit, ControlValueAccessor {
|
|
|
93
106
|
private readonly _destroyRef;
|
|
94
107
|
private readonly _zTranslate;
|
|
95
108
|
private readonly _editorHost;
|
|
109
|
+
private readonly _floatingToolbar;
|
|
110
|
+
private readonly _slashMenuScrollHost;
|
|
96
111
|
readonly zOnChange: _angular_core.OutputEmitterRef<Content>;
|
|
97
112
|
readonly zOnFocus: _angular_core.OutputEmitterRef<FocusEvent>;
|
|
98
113
|
readonly zOnBlur: _angular_core.OutputEmitterRef<FocusEvent>;
|
|
@@ -119,10 +134,39 @@ declare class ZEditorComponent implements OnInit, ControlValueAccessor {
|
|
|
119
134
|
private readonly _isNgModel;
|
|
120
135
|
private readonly _selectionVersion;
|
|
121
136
|
private readonly _plainText;
|
|
122
|
-
protected readonly
|
|
137
|
+
protected readonly slashMenuState: _angular_core.WritableSignal<{
|
|
138
|
+
visible: boolean;
|
|
139
|
+
query: string;
|
|
140
|
+
from: number;
|
|
141
|
+
to: number;
|
|
142
|
+
left: number;
|
|
143
|
+
top: number;
|
|
144
|
+
}>;
|
|
145
|
+
protected readonly slashMenuActiveIndex: _angular_core.WritableSignal<number>;
|
|
146
|
+
protected readonly linkPopoverState: _angular_core.WritableSignal<{
|
|
147
|
+
visible: boolean;
|
|
148
|
+
left: number;
|
|
149
|
+
top: number;
|
|
150
|
+
width: number;
|
|
151
|
+
height: number;
|
|
152
|
+
}>;
|
|
123
153
|
protected readonly linkUrl: _angular_core.WritableSignal<string>;
|
|
124
154
|
protected readonly activeLinkHref: _angular_core.WritableSignal<string>;
|
|
125
155
|
protected readonly linkValidators: ZInputValidator[];
|
|
156
|
+
protected readonly textColorSwatches: readonly string[];
|
|
157
|
+
protected readonly backgroundColorSwatches: readonly string[];
|
|
158
|
+
protected readonly slashCommands: readonly ZEditorSlashCommandItem[];
|
|
159
|
+
protected readonly blockStyleOptions: readonly {
|
|
160
|
+
command: Extract<ZEditorToolbarCommand, 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'heading4'>;
|
|
161
|
+
icon: ZEditorToolbarItem['icon'];
|
|
162
|
+
label: string;
|
|
163
|
+
}[];
|
|
164
|
+
protected readonly alignOptions: readonly {
|
|
165
|
+
command: Extract<ZEditorToolbarCommand, 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify'>;
|
|
166
|
+
icon: ZEditorToolbarItem['icon'];
|
|
167
|
+
label: string;
|
|
168
|
+
}[];
|
|
169
|
+
private readonly _toolbarShortcutLabels;
|
|
126
170
|
protected readonly uiState: _angular_core.WritableSignal<{
|
|
127
171
|
touched: boolean;
|
|
128
172
|
dirty: boolean;
|
|
@@ -134,12 +178,48 @@ declare class ZEditorComponent implements OnInit, ControlValueAccessor {
|
|
|
134
178
|
private _editor;
|
|
135
179
|
private _pendingValue;
|
|
136
180
|
private _linkSelection;
|
|
181
|
+
private _linkAnchorElement;
|
|
182
|
+
private _emojiPopoverControl;
|
|
183
|
+
private _blockStylePopoverControl;
|
|
184
|
+
private _alignPopoverControl;
|
|
185
|
+
private _textColorPopoverControl;
|
|
186
|
+
private _backgroundColorPopoverControl;
|
|
187
|
+
private _slashMenuPopoverControl;
|
|
188
|
+
private _dismissedSlashMenu;
|
|
189
|
+
private _linkPopoverControl;
|
|
190
|
+
private _resizeObserver;
|
|
191
|
+
private _resizeListenerCleanup;
|
|
192
|
+
private _bubbleMenuPositionFrame;
|
|
193
|
+
protected readonly emojiCategories: readonly (Omit<ZEmojiCategory, "icon"> & {
|
|
194
|
+
icon: ZIcon;
|
|
195
|
+
})[];
|
|
196
|
+
protected readonly activeEmojiCategoryId: _angular_core.WritableSignal<string>;
|
|
197
|
+
protected readonly emojiSearch: _angular_core.WritableSignal<string>;
|
|
198
|
+
protected readonly activeEmojiCategory: _angular_core.Signal<Omit<ZEmojiCategory, "icon"> & {
|
|
199
|
+
icon: ZIcon;
|
|
200
|
+
}>;
|
|
201
|
+
protected readonly activeEmojiCategoryLabel: _angular_core.Signal<string>;
|
|
202
|
+
protected readonly emojiSearchQuery: _angular_core.Signal<string>;
|
|
203
|
+
protected readonly activeEmojis: _angular_core.Signal<readonly (string | _shival99_z_ui_utils.ZEmojiEntry)[]>;
|
|
204
|
+
protected readonly hasEmojiResults: _angular_core.Signal<boolean>;
|
|
137
205
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
138
206
|
protected readonly showToolbar: _angular_core.Signal<boolean>;
|
|
139
207
|
protected readonly normalizedLinkUrl: _angular_core.Signal<string>;
|
|
208
|
+
protected readonly activeTextColor: _angular_core.Signal<string>;
|
|
209
|
+
protected readonly activeBackgroundColor: _angular_core.Signal<string>;
|
|
210
|
+
protected readonly activeBlockStyle: _angular_core.Signal<"heading1" | "heading2" | "heading3" | "heading4" | "paragraph">;
|
|
211
|
+
protected readonly activeBlockStyleLabel: _angular_core.Signal<string>;
|
|
212
|
+
protected readonly activeAlign: _angular_core.Signal<"alignLeft" | "alignCenter" | "alignRight" | "alignJustify">;
|
|
213
|
+
protected readonly activeAlignLabel: _angular_core.Signal<string>;
|
|
214
|
+
protected readonly activeAlignIcon: _angular_core.Signal<ZIcon>;
|
|
215
|
+
protected readonly filteredSlashCommands: _angular_core.Signal<ZEditorSlashCommandViewItem[]>;
|
|
140
216
|
protected readonly canApplyLink: _angular_core.Signal<boolean>;
|
|
141
217
|
protected readonly effectivePlaceholder: _angular_core.Signal<string>;
|
|
142
218
|
protected readonly toolbarItems: _angular_core.Signal<ZEditorResolvedToolbarItem[]>;
|
|
219
|
+
protected readonly floatingToolbarItems: _angular_core.Signal<(ZEditorResolvedToolbarItem & {
|
|
220
|
+
shortcut: string;
|
|
221
|
+
tooltip: string;
|
|
222
|
+
})[]>;
|
|
143
223
|
private readonly _shouldShowValidation;
|
|
144
224
|
private _getValidationErrors;
|
|
145
225
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
@@ -165,17 +245,71 @@ declare class ZEditorComponent implements OnInit, ControlValueAccessor {
|
|
|
165
245
|
private _getMarkdown;
|
|
166
246
|
private _serializeValueAsText;
|
|
167
247
|
private _refreshEditorState;
|
|
248
|
+
private _searchEmojis;
|
|
249
|
+
private _setupBubbleMenuPositionUpdates;
|
|
250
|
+
private _listenWindowResize;
|
|
251
|
+
private _teardownBubbleMenuPositionUpdates;
|
|
252
|
+
private _requestBubbleMenuPositionUpdate;
|
|
253
|
+
private _isAnyBubbleMenuPopoverOpen;
|
|
254
|
+
private _syncLinkPopoverPosition;
|
|
255
|
+
private _getSelectionFloatingElement;
|
|
168
256
|
private _isEditorEmpty;
|
|
169
257
|
private _isCurrentEditorContent;
|
|
170
258
|
private _isToolbarCommandActive;
|
|
171
259
|
private _isToolbarCommandDisabled;
|
|
260
|
+
protected onFloatingToolbarClick(command: ZEditorToolbarCommand): void;
|
|
261
|
+
private _getToolbarTooltip;
|
|
262
|
+
protected applySlashCommand(item: ZEditorSlashCommandItem): void;
|
|
263
|
+
protected applyBlockStyle(command: Extract<ZEditorToolbarCommand, 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'heading4'>): void;
|
|
264
|
+
protected applyAlign(command: Extract<ZEditorToolbarCommand, 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify'>): void;
|
|
265
|
+
protected insertEmoji(emoji: string): void;
|
|
266
|
+
protected setEmojiCategory(categoryId: string): void;
|
|
267
|
+
protected onEmojiPopoverControl(control: ZPopoverControl): void;
|
|
268
|
+
protected onEmojiPopoverShow(): void;
|
|
269
|
+
protected onBlockStylePopoverControl(control: ZPopoverControl): void;
|
|
270
|
+
protected onAlignPopoverControl(control: ZPopoverControl): void;
|
|
271
|
+
protected onTextColorPopoverControl(control: ZPopoverControl): void;
|
|
272
|
+
protected onBackgroundColorPopoverControl(control: ZPopoverControl): void;
|
|
273
|
+
protected onSlashMenuPopoverControl(control: ZPopoverControl): void;
|
|
274
|
+
protected onSlashMenuPopoverHide(): void;
|
|
275
|
+
protected onLinkPopoverControl(control: ZPopoverControl): void;
|
|
276
|
+
protected onLinkPopoverHide(): void;
|
|
277
|
+
protected setTextColor(color: string): void;
|
|
278
|
+
protected setTextColorFromEvent(event: Event): void;
|
|
279
|
+
protected unsetTextColor(): void;
|
|
280
|
+
protected setBackgroundColor(color: string): void;
|
|
281
|
+
protected setBackgroundColorFromEvent(event: Event): void;
|
|
282
|
+
protected unsetBackgroundColor(): void;
|
|
283
|
+
private _handleSlashMenuKeyDown;
|
|
284
|
+
private _handleEditorShortcutKeyDown;
|
|
285
|
+
private _getShortcutCommand;
|
|
286
|
+
private _isPrimaryShortcut;
|
|
287
|
+
private _syncSlashMenu;
|
|
288
|
+
private _scrollActiveSlashMenuItemIntoView;
|
|
289
|
+
private _hideSlashMenu;
|
|
290
|
+
private _dismissCurrentSlashMenu;
|
|
291
|
+
private _getCurrentSlashMenuMatch;
|
|
292
|
+
private _isDismissedSlashStillPresent;
|
|
172
293
|
private _toggleLink;
|
|
173
|
-
protected
|
|
294
|
+
protected closeLinkPopover(): void;
|
|
174
295
|
protected onLinkUrlChange(value: string | number | null): void;
|
|
175
296
|
protected applyLink(): void;
|
|
176
297
|
private _normalizeUrl;
|
|
177
298
|
protected removeLink(): void;
|
|
299
|
+
protected openActiveLink(): void;
|
|
300
|
+
private _handleEditorClick;
|
|
301
|
+
private _showLinkPopover;
|
|
302
|
+
private _getLinkPopoverReferenceRect;
|
|
303
|
+
private _getLinkAnchorRect;
|
|
178
304
|
private _insertImage;
|
|
305
|
+
private _setTextAlign;
|
|
306
|
+
private _collapseSelectionToAnchor;
|
|
307
|
+
private _getTextStyleAttribute;
|
|
308
|
+
private _getActiveBlockStyle;
|
|
309
|
+
private _getActiveAlign;
|
|
310
|
+
private _getActiveAlignFromEditor;
|
|
311
|
+
private _createImageExtension;
|
|
312
|
+
private static _getImageAlignStyle;
|
|
179
313
|
private _placeholderConfig;
|
|
180
314
|
private _placeholderMode;
|
|
181
315
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZEditorComponent, never>;
|
|
@@ -186,7 +320,7 @@ declare const Z_EDITOR_DEFAULT_TOOLBAR: readonly ZEditorToolbarItem[];
|
|
|
186
320
|
|
|
187
321
|
declare const zEditorVariants: (props?: ({
|
|
188
322
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
189
|
-
zStatus?: "default" | "
|
|
323
|
+
zStatus?: "default" | "error" | "disabled" | "readonly" | null | undefined;
|
|
190
324
|
zPlaceholderMode?: "firstLine" | "everyLine" | null | undefined;
|
|
191
325
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
192
326
|
type ZEditorVariants = VariantProps<typeof zEditorVariants>;
|
|
@@ -3,6 +3,8 @@ import { ColorInput, BlossomColorPickerValue, SliderPosition, BlossomColorPicker
|
|
|
3
3
|
import * as _angular_core from '@angular/core';
|
|
4
4
|
import { Signal, OnInit, ElementRef, TemplateRef } from '@angular/core';
|
|
5
5
|
import { ControlValueAccessor } from '@angular/forms';
|
|
6
|
+
import { ZPopoverControl } from '@shival99/z-ui/components/z-popover';
|
|
7
|
+
import { ZSelectOption } from '@shival99/z-ui/components/z-select';
|
|
6
8
|
import { ZEvent } from '@shival99/z-ui/utils';
|
|
7
9
|
import { ClassValue } from 'clsx';
|
|
8
10
|
import { Observable } from 'rxjs';
|
|
@@ -54,6 +56,7 @@ type ZInputSize = 'sm' | 'default' | 'lg';
|
|
|
54
56
|
type ZInputAlign = 'left' | 'center' | 'right';
|
|
55
57
|
type ZAsyncValidateOn = 'change' | 'blur';
|
|
56
58
|
type ZInputStatus = 'default' | 'disabled' | 'readonly' | 'error';
|
|
59
|
+
type ZInputColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
|
|
57
60
|
interface ZInputTypeConfig {
|
|
58
61
|
isPassword: boolean;
|
|
59
62
|
isColor: boolean;
|
|
@@ -72,8 +75,11 @@ interface ZInputMaskConfig {
|
|
|
72
75
|
effectiveDecimalMarker: '.' | ',' | ['.', ','];
|
|
73
76
|
}
|
|
74
77
|
interface ZInputColorConfig {
|
|
78
|
+
mode?: 'blossom' | 'picker';
|
|
79
|
+
cacheKey?: string;
|
|
75
80
|
count?: number | null;
|
|
76
81
|
colors?: ColorInput[];
|
|
82
|
+
savedColors?: string[];
|
|
77
83
|
defaultValue?: BlossomColorPickerValue;
|
|
78
84
|
openOnHover?: boolean;
|
|
79
85
|
initialExpanded?: boolean;
|
|
@@ -92,6 +98,7 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
|
|
|
92
98
|
private readonly _toastService;
|
|
93
99
|
private readonly _zTranslate;
|
|
94
100
|
protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
101
|
+
protected readonly nativeColorInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
95
102
|
readonly zOnSearch: _angular_core.OutputEmitterRef<string | number | null>;
|
|
96
103
|
readonly zOnChange: _angular_core.OutputEmitterRef<string | number | null>;
|
|
97
104
|
readonly zOnBlur: _angular_core.OutputEmitterRef<FocusEvent>;
|
|
@@ -146,6 +153,12 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
|
|
|
146
153
|
private readonly _asyncErrors;
|
|
147
154
|
private readonly _customError;
|
|
148
155
|
private readonly _blossomColor;
|
|
156
|
+
private readonly _colorPickerHsv;
|
|
157
|
+
private readonly _colorPickerRgb;
|
|
158
|
+
private readonly _colorPickerHsl;
|
|
159
|
+
private readonly _colorPickerAlpha;
|
|
160
|
+
private readonly _colorPickerFormat;
|
|
161
|
+
private readonly _colorPickerSavedColors;
|
|
149
162
|
protected readonly inputId: string;
|
|
150
163
|
protected readonly suggestHistory: _angular_core.WritableSignal<string[]>;
|
|
151
164
|
protected readonly suggestActiveIndex: _angular_core.WritableSignal<number>;
|
|
@@ -163,8 +176,42 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
|
|
|
163
176
|
protected readonly maskConfig: _angular_core.Signal<ZInputMaskConfig>;
|
|
164
177
|
protected readonly displayValue: _angular_core.Signal<string>;
|
|
165
178
|
protected readonly normalizedColorValue: _angular_core.Signal<string>;
|
|
179
|
+
protected readonly colorMode: _angular_core.Signal<"blossom" | "picker">;
|
|
180
|
+
protected readonly isBlossomColorMode: _angular_core.Signal<boolean>;
|
|
166
181
|
protected readonly blossomCoreBorderColor: _angular_core.Signal<string>;
|
|
167
182
|
protected readonly blossomColor: _angular_core.Signal<BlossomColorPickerValue>;
|
|
183
|
+
protected readonly colorPickerHsv: _angular_core.Signal<{
|
|
184
|
+
hue: number;
|
|
185
|
+
saturation: number;
|
|
186
|
+
value: number;
|
|
187
|
+
}>;
|
|
188
|
+
protected readonly colorPickerRgbValue: _angular_core.Signal<{
|
|
189
|
+
red: number;
|
|
190
|
+
green: number;
|
|
191
|
+
blue: number;
|
|
192
|
+
}>;
|
|
193
|
+
protected readonly colorPickerHslValue: _angular_core.Signal<{
|
|
194
|
+
hue: number;
|
|
195
|
+
saturation: number;
|
|
196
|
+
lightness: number;
|
|
197
|
+
}>;
|
|
198
|
+
protected readonly colorPickerAlpha: _angular_core.Signal<number>;
|
|
199
|
+
protected readonly colorPickerFormat: _angular_core.Signal<ZInputColorFormat>;
|
|
200
|
+
protected readonly colorPickerFormatOptions: ZSelectOption<ZInputColorFormat>[];
|
|
201
|
+
protected readonly colorPickerHueColor: _angular_core.Signal<string>;
|
|
202
|
+
protected readonly colorPickerSvStyle: _angular_core.Signal<{
|
|
203
|
+
background: string;
|
|
204
|
+
}>;
|
|
205
|
+
protected readonly colorPickerCursorStyle: _angular_core.Signal<{
|
|
206
|
+
left: string;
|
|
207
|
+
top: string;
|
|
208
|
+
}>;
|
|
209
|
+
protected readonly defaultColorPickerSavedColors: _angular_core.Signal<string[]>;
|
|
210
|
+
protected readonly colorPickerSavedColors: _angular_core.Signal<string[]>;
|
|
211
|
+
protected readonly colorPickerSavedSwatches: _angular_core.Signal<{
|
|
212
|
+
color: string;
|
|
213
|
+
isLight: boolean;
|
|
214
|
+
}[]>;
|
|
168
215
|
protected readonly blossomCoreSize: _angular_core.Signal<22 | 30 | 26>;
|
|
169
216
|
protected readonly blossomOptions: _angular_core.Signal<{
|
|
170
217
|
defaultValue: BlossomColorPickerValue | undefined;
|
|
@@ -201,6 +248,7 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
|
|
|
201
248
|
private _onChange;
|
|
202
249
|
private _onTouched;
|
|
203
250
|
private _ngControl;
|
|
251
|
+
private _colorPickerPopoverControl;
|
|
204
252
|
ngOnInit(): void;
|
|
205
253
|
writeValue(value: string | number | null): void;
|
|
206
254
|
registerOnChange(fn: (value: string | number | null) => void): void;
|
|
@@ -230,20 +278,55 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
|
|
|
230
278
|
protected copyColorToClipboard(): void;
|
|
231
279
|
protected onBlossomColorChange(color: BlossomColorPickerColor): void;
|
|
232
280
|
protected onBlossomColorCollapse(color: BlossomColorPickerColor): void;
|
|
281
|
+
protected onColorPickerControl(control: ZPopoverControl): void;
|
|
282
|
+
protected onColorPickerOpen(): void;
|
|
283
|
+
protected onColorPickerFormatChange(value: ZInputColorFormat | ZInputColorFormat[] | null): void;
|
|
284
|
+
protected onColorPickerHexChange(value: string | number | null): void;
|
|
285
|
+
protected onColorPickerAlphaValueChange(value: string | number | null): void;
|
|
286
|
+
protected onColorPickerRgbChange(channel: 'red' | 'green' | 'blue', value: string | number | null): void;
|
|
287
|
+
protected onColorPickerHslChange(channel: 'hue' | 'saturation' | 'lightness', value: string | number | null): void;
|
|
288
|
+
protected onColorPickerHsvValueChange(channel: 'hue' | 'saturation' | 'value', value: string | number | null): void;
|
|
289
|
+
protected onColorPickerHueInput(event: Event): void;
|
|
290
|
+
protected onColorPickerAlphaInput(event: Event): void;
|
|
291
|
+
protected onColorPickerSvPointerDown(event: PointerEvent): void;
|
|
292
|
+
protected onColorPickerSvPointerMove(event: PointerEvent): void;
|
|
293
|
+
protected selectSavedColor(color: string): void;
|
|
294
|
+
protected addCurrentColorToSaved(): void;
|
|
295
|
+
protected openNativeColorPicker(): Promise<void>;
|
|
296
|
+
protected closeColorPicker(): void;
|
|
233
297
|
private _emitControl;
|
|
234
298
|
private _runAsyncValidation;
|
|
235
299
|
private _cancelAsyncValidation;
|
|
236
300
|
private _showSuggestPopover;
|
|
237
301
|
private _hideSuggestPopover;
|
|
238
302
|
private _loadSuggestHistory;
|
|
303
|
+
private _colorPickerCacheKey;
|
|
304
|
+
private _loadColorPickerSavedColors;
|
|
239
305
|
private _incrementValue;
|
|
240
306
|
private _cleanNumberValue;
|
|
307
|
+
private _parseNumberValue;
|
|
241
308
|
private _getEffectiveMask;
|
|
242
309
|
private _getEffectiveType;
|
|
243
310
|
private _getEffectiveDecimalMarker;
|
|
244
311
|
private _getValidationErrors;
|
|
245
312
|
private _normalizeHexColor;
|
|
313
|
+
private _tryNormalizeHexColor;
|
|
246
314
|
private _syncBlossomColorFromHex;
|
|
315
|
+
private _syncColorStateFromHex;
|
|
316
|
+
private _syncColorPickerFromHex;
|
|
317
|
+
private _commitColor;
|
|
318
|
+
private _setColorPickerAlpha;
|
|
319
|
+
private _parseBoundedNumber;
|
|
320
|
+
private _normalizeColorList;
|
|
321
|
+
private _isLightHexColor;
|
|
322
|
+
private _getEyeDropper;
|
|
323
|
+
private _updateColorPickerSv;
|
|
324
|
+
private _hexToHsv;
|
|
325
|
+
private _hsvToRgb;
|
|
326
|
+
private _rgbToHex;
|
|
327
|
+
private _rgbToHsl;
|
|
328
|
+
private _hslToHex;
|
|
329
|
+
private _hsvToHex;
|
|
247
330
|
private _generateColorPalette;
|
|
248
331
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZInputComponent, never>;
|
|
249
332
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZInputComponent, "z-input", ["zInput"], { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zAlign": { "alias": "zAlign"; "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; }; "zPrefix": { "alias": "zPrefix"; "required": false; "isSignal": true; }; "zSuffix": { "alias": "zSuffix"; "required": false; "isSignal": true; }; "zMin": { "alias": "zMin"; "required": false; "isSignal": true; }; "zMax": { "alias": "zMax"; "required": false; "isSignal": true; }; "zStep": { "alias": "zStep"; "required": false; "isSignal": true; }; "zShowArrows": { "alias": "zShowArrows"; "required": false; "isSignal": true; }; "zMask": { "alias": "zMask"; "required": false; "isSignal": true; }; "zDecimalPlaces": { "alias": "zDecimalPlaces"; "required": false; "isSignal": true; }; "zAllowNegative": { "alias": "zAllowNegative"; "required": false; "isSignal": true; }; "zThousandSeparator": { "alias": "zThousandSeparator"; "required": false; "isSignal": true; }; "zDecimalMarker": { "alias": "zDecimalMarker"; "required": false; "isSignal": true; }; "zValidators": { "alias": "zValidators"; "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; }; "zShowPasswordToggle": { "alias": "zShowPasswordToggle"; "required": false; "isSignal": true; }; "zSearch": { "alias": "zSearch"; "required": false; "isSignal": true; }; "zDebounce": { "alias": "zDebounce"; "required": false; "isSignal": true; }; "zAutofocus": { "alias": "zAutofocus"; "required": false; "isSignal": true; }; "zAutoComplete": { "alias": "zAutoComplete"; "required": false; "isSignal": true; }; "zAllowClear": { "alias": "zAllowClear"; "required": false; "isSignal": true; }; "zAutoSizeContent": { "alias": "zAutoSizeContent"; "required": false; "isSignal": true; }; "zRows": { "alias": "zRows"; "required": false; "isSignal": true; }; "zResize": { "alias": "zResize"; "required": false; "isSignal": true; }; "zMaxLength": { "alias": "zMaxLength"; "required": false; "isSignal": true; }; "zAutoSuggest": { "alias": "zAutoSuggest"; "required": false; "isSignal": true; }; "zColorConfig": { "alias": "zColorConfig"; "required": false; "isSignal": true; }; }, { "zOnSearch": "zOnSearch"; "zOnChange": "zOnChange"; "zOnBlur": "zOnBlur"; "zOnFocus": "zOnFocus"; "zOnKeydown": "zOnKeydown"; "zOnEnter": "zOnEnter"; "zOnColorCollapse": "zOnColorCollapse"; "zControl": "zControl"; "zEvent": "zEvent"; }, never, never, true, never>;
|
|
@@ -315,7 +315,7 @@ declare class ZTagClassesPipe implements PipeTransform {
|
|
|
315
315
|
|
|
316
316
|
declare const zSelectVariants: (props?: ({
|
|
317
317
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
318
|
-
zStatus?: "default" | "
|
|
318
|
+
zStatus?: "default" | "open" | "error" | "disabled" | "readonly" | null | undefined;
|
|
319
319
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
320
320
|
declare const zSelectTagVariants: (props?: ({
|
|
321
321
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
@@ -1063,7 +1063,7 @@ declare class ZTableActionsComponent<T = unknown> {
|
|
|
1063
1063
|
readonly zConfig: _angular_core.InputSignal<ZTableActionColumnConfig<T>>;
|
|
1064
1064
|
readonly zRow: _angular_core.InputSignal<T>;
|
|
1065
1065
|
readonly zRowId: _angular_core.InputSignal<string>;
|
|
1066
|
-
readonly zDropdownButtonSize: _angular_core.InputSignal<"
|
|
1066
|
+
readonly zDropdownButtonSize: _angular_core.InputSignal<"sm" | "default" | "lg" | "xs" | "xl" | null | undefined>;
|
|
1067
1067
|
readonly zActionClick: _angular_core.OutputEmitterRef<ZTableActionClickEvent<T>>;
|
|
1068
1068
|
protected readonly allActions: _angular_core.Signal<ZTableActionItem<T>[]>;
|
|
1069
1069
|
protected readonly shouldShowAsButtons: _angular_core.Signal<boolean>;
|
|
@@ -154,6 +154,22 @@ declare const zValidForm: (form: FormGroup | FormArray) => boolean;
|
|
|
154
154
|
*/
|
|
155
155
|
declare const zDebugFormInvalid: (form: FormGroup, parentKey?: string) => void;
|
|
156
156
|
|
|
157
|
+
type ZEmojiCategoryIcon = `lucide${string}` | `sax${string}`;
|
|
158
|
+
interface ZEmojiEntry {
|
|
159
|
+
readonly emoji: string;
|
|
160
|
+
readonly keywords: readonly string[];
|
|
161
|
+
}
|
|
162
|
+
interface ZEmojiCategory {
|
|
163
|
+
id: string;
|
|
164
|
+
labelKey: string;
|
|
165
|
+
icon: ZEmojiCategoryIcon;
|
|
166
|
+
emojis: readonly (string | ZEmojiEntry)[];
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
declare const Z_EMOJI_SHEET: readonly ZEmojiCategory[];
|
|
170
|
+
|
|
171
|
+
declare const Z_EMOJI_KEYWORDS: ReadonlyMap<string, readonly string[]>;
|
|
172
|
+
|
|
157
173
|
/**
|
|
158
174
|
* Unified event types for Z-UI form components
|
|
159
175
|
* Allows components to emit native DOM events with type discrimination
|
|
@@ -197,5 +213,5 @@ interface ZFormDebugOptions {
|
|
|
197
213
|
logLevel?: 'error' | 'warn' | 'log';
|
|
198
214
|
}
|
|
199
215
|
|
|
200
|
-
export { VIETNAMESE_MAP, Z_ASYNC_OPTIONS_DEFAULT_PAGE_SIZE, Z_DIVIDE_SCALE, Z_EXCEL_NUMBER_FORMAT_MAP, Z_LOCALE_MAP, zCapitalCase, zCleanObject, zConvertColorToArgb, zCreateEvent, zDebugFormInvalid, zDecodeUnicode, zDetectBrowser, zFormatNum, zFormatNumExcel, zGetAsyncOptionKey, zMergeAsyncOptions, zMergeClasses, zMiniSearch, zMiniSearch$, zNoop, zNormalize, zRandomColor, zRegisterEchartsTheme, zRemoveVietnamese, zResolveAsyncOptionsHasMore, zToAsyncOptionsObservable, zTransform, zTreeBuild, zTreeFlatten, zUuid, zValidForm };
|
|
201
|
-
export type { ZAsyncOptionsConfig, ZAsyncOptionsLoadFn, ZAsyncOptionsLoadResult, ZAsyncOptionsQuery, ZAsyncOptionsResult, ZBlurEventData, ZBrowserInfo, ZBrowserName, ZCapitalizeType, ZChangeEventData, ZClickEventData, ZCopyEventData, ZCutEventData, ZDblclickEventData, ZDeviceType, ZDragenterEventData, ZDragleaveEventData, ZDragoverEventData, ZDropEventData, ZEchartsThemeOptions, ZEmptyCheck, ZEvent, ZEventType, ZFocusEventData, ZFormDebugOptions, ZFormSubmitResult, ZFormatNumExcelOptions, ZFormatNumOptions, ZInputEventData, ZKeydownEventData, ZKeypressEventData, ZKeyupEventData, ZMousedownEventData, ZMouseenterEventData, ZMouseleaveEventData, ZMouseoutEventData, ZMouseoverEventData, ZMouseupEventData, ZNavigatorUABrandVersion, ZNavigatorUAData, ZNumberDivide, ZPasteEventData, ZTouchendEventData, ZTouchmoveEventData, ZTouchstartEventData };
|
|
216
|
+
export { VIETNAMESE_MAP, Z_ASYNC_OPTIONS_DEFAULT_PAGE_SIZE, Z_DIVIDE_SCALE, Z_EMOJI_KEYWORDS, Z_EMOJI_SHEET, Z_EXCEL_NUMBER_FORMAT_MAP, Z_LOCALE_MAP, zCapitalCase, zCleanObject, zConvertColorToArgb, zCreateEvent, zDebugFormInvalid, zDecodeUnicode, zDetectBrowser, zFormatNum, zFormatNumExcel, zGetAsyncOptionKey, zMergeAsyncOptions, zMergeClasses, zMiniSearch, zMiniSearch$, zNoop, zNormalize, zRandomColor, zRegisterEchartsTheme, zRemoveVietnamese, zResolveAsyncOptionsHasMore, zToAsyncOptionsObservable, zTransform, zTreeBuild, zTreeFlatten, zUuid, zValidForm };
|
|
217
|
+
export type { ZAsyncOptionsConfig, ZAsyncOptionsLoadFn, ZAsyncOptionsLoadResult, ZAsyncOptionsQuery, ZAsyncOptionsResult, ZBlurEventData, ZBrowserInfo, ZBrowserName, ZCapitalizeType, ZChangeEventData, ZClickEventData, ZCopyEventData, ZCutEventData, ZDblclickEventData, ZDeviceType, ZDragenterEventData, ZDragleaveEventData, ZDragoverEventData, ZDropEventData, ZEchartsThemeOptions, ZEmojiCategory, ZEmojiEntry, ZEmptyCheck, ZEvent, ZEventType, ZFocusEventData, ZFormDebugOptions, ZFormSubmitResult, ZFormatNumExcelOptions, ZFormatNumOptions, ZInputEventData, ZKeydownEventData, ZKeypressEventData, ZKeyupEventData, ZMousedownEventData, ZMouseenterEventData, ZMouseleaveEventData, ZMouseoutEventData, ZMouseoverEventData, ZMouseupEventData, ZNavigatorUABrandVersion, ZNavigatorUAData, ZNumberDivide, ZPasteEventData, ZTouchendEventData, ZTouchmoveEventData, ZTouchstartEventData };
|