@shival99/z-ui 2.0.2 → 2.0.4

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

@@ -1,12 +1,13 @@
+import * as _shival99_z_ui_utils from '@shival99/z-ui/utils';
+import { ZEvent, ZEmojiCategory } from '@shival99/z-ui/utils';
 import * as _angular_core from '@angular/core';
 import { Signal, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { ZIcon } from '@shival99/z-ui/components/z-icon';
 import { ZInputValidator } from '@shival99/z-ui/components/z-input';
-import { ZEvent } from '@shival99/z-ui/utils';
+import { ZPopoverControl } from '@shival99/z-ui/components/z-popover';
 import { Content, Editor, Extension } from '@tiptap/core';
 import { ClassValue } from 'clsx';
-import { ZIcon } from '@shival99/z-ui/components/z-icon';
-import { ImageOptions } from '@tiptap/extension-image';
 import { LinkOptions } from '@tiptap/extension-link';
 import { MentionOptions } from '@tiptap/extension-mention';
 import { PlaceholderOptions } from '@tiptap/extension-placeholder';
@@ -16,12 +17,24 @@ import { VariantProps } from 'class-variance-authority';
 
 type ZEditorSize = 'sm' | 'default' | 'lg';
 type ZEditorContentType = 'html' | 'json' | 'markdown';
-type ZEditorToolbarCommand = 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'heading1' | 'heading2' | 'paragraph' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'horizontalRule' | 'link' | 'image' | 'undo' | 'redo' | 'clearFormatting';
+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';
 interface ZEditorToolbarItem {
     id: ZEditorToolbarCommand;
     icon: ZIcon;
     label: string;
 }
+interface ZEditorSlashCommandItem {
+    id: string;
+    command: ZEditorToolbarCommand;
+    icon: ZIcon;
+    label: string;
+    description: string;
+    group: string;
+    aliases: readonly string[];
+}
+interface ZEditorSlashCommandViewItem extends ZEditorSlashCommandItem {
+    showGroupLabel: boolean;
+}
 interface ZEditorResolvedToolbarItem extends ZEditorToolbarItem {
     active: boolean;
     disabled: boolean;
@@ -82,7 +95,7 @@ interface ZEditorPlaceholderOptions extends Partial<PlaceholderOptions> {
 interface ZEditorTipTapOptions {
     starterKit?: Partial<StarterKitOptions>;
     placeholder?: string | ZEditorPlaceholderOptions;
-    image?: boolean | Partial<ImageOptions>;
+    image?: boolean | Record<string, unknown>;
     link?: Partial<LinkOptions>;
     mention?: boolean | Partial<Omit<MentionOptions, 'suggestion' | 'suggestions'>>;
     extensions?: Extension[];
@@ -93,6 +106,8 @@ declare class ZEditorComponent implements OnInit, ControlValueAccessor {
     private readonly _destroyRef;
     private readonly _zTranslate;
     private readonly _editorHost;
+    private readonly _floatingToolbar;
+    private readonly _slashMenuScrollHost;
     readonly zOnChange: _angular_core.OutputEmitterRef<Content>;
     readonly zOnFocus: _angular_core.OutputEmitterRef<FocusEvent>;
     readonly zOnBlur: _angular_core.OutputEmitterRef<FocusEvent>;
@@ -119,10 +134,39 @@ declare class ZEditorComponent implements OnInit, ControlValueAccessor {
     private readonly _isNgModel;
     private readonly _selectionVersion;
     private readonly _plainText;
-    protected readonly linkModalVisible: _angular_core.WritableSignal<boolean>;
+    protected readonly slashMenuState: _angular_core.WritableSignal<{
+        visible: boolean;
+        query: string;
+        from: number;
+        to: number;
+        left: number;
+        top: number;
+    }>;
+    protected readonly slashMenuActiveIndex: _angular_core.WritableSignal<number>;
+    protected readonly linkPopoverState: _angular_core.WritableSignal<{
+        visible: boolean;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }>;
     protected readonly linkUrl: _angular_core.WritableSignal<string>;
     protected readonly activeLinkHref: _angular_core.WritableSignal<string>;
     protected readonly linkValidators: ZInputValidator[];
+    protected readonly textColorSwatches: readonly string[];
+    protected readonly backgroundColorSwatches: readonly string[];
+    protected readonly slashCommands: readonly ZEditorSlashCommandItem[];
+    protected readonly blockStyleOptions: readonly {
+        command: Extract<ZEditorToolbarCommand, 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'heading4'>;
+        icon: ZEditorToolbarItem['icon'];
+        label: string;
+    }[];
+    protected readonly alignOptions: readonly {
+        command: Extract<ZEditorToolbarCommand, 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify'>;
+        icon: ZEditorToolbarItem['icon'];
+        label: string;
+    }[];
+    private readonly _toolbarShortcutLabels;
     protected readonly uiState: _angular_core.WritableSignal<{
         touched: boolean;
         dirty: boolean;
@@ -134,12 +178,48 @@ declare class ZEditorComponent implements OnInit, ControlValueAccessor {
     private _editor;
     private _pendingValue;
     private _linkSelection;
+    private _linkAnchorElement;
+    private _emojiPopoverControl;
+    private _blockStylePopoverControl;
+    private _alignPopoverControl;
+    private _textColorPopoverControl;
+    private _backgroundColorPopoverControl;
+    private _slashMenuPopoverControl;
+    private _dismissedSlashMenu;
+    private _linkPopoverControl;
+    private _resizeObserver;
+    private _resizeListenerCleanup;
+    private _bubbleMenuPositionFrame;
+    protected readonly emojiCategories: readonly (Omit<ZEmojiCategory, "icon"> & {
+        icon: ZIcon;
+    })[];
+    protected readonly activeEmojiCategoryId: _angular_core.WritableSignal<string>;
+    protected readonly emojiSearch: _angular_core.WritableSignal<string>;
+    protected readonly activeEmojiCategory: _angular_core.Signal<Omit<ZEmojiCategory, "icon"> & {
+        icon: ZIcon;
+    }>;
+    protected readonly activeEmojiCategoryLabel: _angular_core.Signal<string>;
+    protected readonly emojiSearchQuery: _angular_core.Signal<string>;
+    protected readonly activeEmojis: _angular_core.Signal<readonly (string | _shival99_z_ui_utils.ZEmojiEntry)[]>;
+    protected readonly hasEmojiResults: _angular_core.Signal<boolean>;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly showToolbar: _angular_core.Signal<boolean>;
     protected readonly normalizedLinkUrl: _angular_core.Signal<string>;
+    protected readonly activeTextColor: _angular_core.Signal<string>;
+    protected readonly activeBackgroundColor: _angular_core.Signal<string>;
+    protected readonly activeBlockStyle: _angular_core.Signal<"heading1" | "heading2" | "heading3" | "heading4" | "paragraph">;
+    protected readonly activeBlockStyleLabel: _angular_core.Signal<string>;
+    protected readonly activeAlign: _angular_core.Signal<"alignLeft" | "alignCenter" | "alignRight" | "alignJustify">;
+    protected readonly activeAlignLabel: _angular_core.Signal<string>;
+    protected readonly activeAlignIcon: _angular_core.Signal<ZIcon>;
+    protected readonly filteredSlashCommands: _angular_core.Signal<ZEditorSlashCommandViewItem[]>;
     protected readonly canApplyLink: _angular_core.Signal<boolean>;
     protected readonly effectivePlaceholder: _angular_core.Signal<string>;
     protected readonly toolbarItems: _angular_core.Signal<ZEditorResolvedToolbarItem[]>;
+    protected readonly floatingToolbarItems: _angular_core.Signal<(ZEditorResolvedToolbarItem & {
+        shortcut: string;
+        tooltip: string;
+    })[]>;
     private readonly _shouldShowValidation;
     private _getValidationErrors;
     protected readonly hasError: _angular_core.Signal<boolean>;
@@ -165,17 +245,71 @@ declare class ZEditorComponent implements OnInit, ControlValueAccessor {
     private _getMarkdown;
     private _serializeValueAsText;
     private _refreshEditorState;
+    private _searchEmojis;
+    private _setupBubbleMenuPositionUpdates;
+    private _listenWindowResize;
+    private _teardownBubbleMenuPositionUpdates;
+    private _requestBubbleMenuPositionUpdate;
+    private _isAnyBubbleMenuPopoverOpen;
+    private _syncLinkPopoverPosition;
+    private _getSelectionFloatingElement;
     private _isEditorEmpty;
     private _isCurrentEditorContent;
     private _isToolbarCommandActive;
     private _isToolbarCommandDisabled;
+    protected onFloatingToolbarClick(command: ZEditorToolbarCommand): void;
+    private _getToolbarTooltip;
+    protected applySlashCommand(item: ZEditorSlashCommandItem): void;
+    protected applyBlockStyle(command: Extract<ZEditorToolbarCommand, 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'heading4'>): void;
+    protected applyAlign(command: Extract<ZEditorToolbarCommand, 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify'>): void;
+    protected insertEmoji(emoji: string): void;
+    protected setEmojiCategory(categoryId: string): void;
+    protected onEmojiPopoverControl(control: ZPopoverControl): void;
+    protected onEmojiPopoverShow(): void;
+    protected onBlockStylePopoverControl(control: ZPopoverControl): void;
+    protected onAlignPopoverControl(control: ZPopoverControl): void;
+    protected onTextColorPopoverControl(control: ZPopoverControl): void;
+    protected onBackgroundColorPopoverControl(control: ZPopoverControl): void;
+    protected onSlashMenuPopoverControl(control: ZPopoverControl): void;
+    protected onSlashMenuPopoverHide(): void;
+    protected onLinkPopoverControl(control: ZPopoverControl): void;
+    protected onLinkPopoverHide(): void;
+    protected setTextColor(color: string): void;
+    protected setTextColorFromEvent(event: Event): void;
+    protected unsetTextColor(): void;
+    protected setBackgroundColor(color: string): void;
+    protected setBackgroundColorFromEvent(event: Event): void;
+    protected unsetBackgroundColor(): void;
+    private _handleSlashMenuKeyDown;
+    private _handleEditorShortcutKeyDown;
+    private _getShortcutCommand;
+    private _isPrimaryShortcut;
+    private _syncSlashMenu;
+    private _scrollActiveSlashMenuItemIntoView;
+    private _hideSlashMenu;
+    private _dismissCurrentSlashMenu;
+    private _getCurrentSlashMenuMatch;
+    private _isDismissedSlashStillPresent;
     private _toggleLink;
-    protected closeLinkModal(): void;
+    protected closeLinkPopover(): void;
     protected onLinkUrlChange(value: string | number | null): void;
     protected applyLink(): void;
     private _normalizeUrl;
     protected removeLink(): void;
+    protected openActiveLink(): void;
+    private _handleEditorClick;
+    private _showLinkPopover;
+    private _getLinkPopoverReferenceRect;
+    private _getLinkAnchorRect;
     private _insertImage;
+    private _setTextAlign;
+    private _collapseSelectionToAnchor;
+    private _getTextStyleAttribute;
+    private _getActiveBlockStyle;
+    private _getActiveAlign;
+    private _getActiveAlignFromEditor;
+    private _createImageExtension;
+    private static _getImageAlignStyle;
     private _placeholderConfig;
     private _placeholderMode;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZEditorComponent, never>;

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

@@ -3,6 +3,8 @@ import { ColorInput, BlossomColorPickerValue, SliderPosition, BlossomColorPicker
 import * as _angular_core from '@angular/core';
 import { Signal, OnInit, ElementRef, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { ZPopoverControl } from '@shival99/z-ui/components/z-popover';
+import { ZSelectOption } from '@shival99/z-ui/components/z-select';
 import { ZEvent } from '@shival99/z-ui/utils';
 import { ClassValue } from 'clsx';
 import { Observable } from 'rxjs';
@@ -54,6 +56,7 @@ type ZInputSize = 'sm' | 'default' | 'lg';
 type ZInputAlign = 'left' | 'center' | 'right';
 type ZAsyncValidateOn = 'change' | 'blur';
 type ZInputStatus = 'default' | 'disabled' | 'readonly' | 'error';
+type ZInputColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
 interface ZInputTypeConfig {
     isPassword: boolean;
     isColor: boolean;
@@ -72,8 +75,11 @@ interface ZInputMaskConfig {
     effectiveDecimalMarker: '.' | ',' | ['.', ','];
 }
 interface ZInputColorConfig {
+    mode?: 'blossom' | 'picker';
+    cacheKey?: string;
     count?: number | null;
     colors?: ColorInput[];
+    savedColors?: string[];
     defaultValue?: BlossomColorPickerValue;
     openOnHover?: boolean;
     initialExpanded?: boolean;
@@ -92,6 +98,7 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
     private readonly _toastService;
     private readonly _zTranslate;
     protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected readonly nativeColorInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     readonly zOnSearch: _angular_core.OutputEmitterRef<string | number | null>;
     readonly zOnChange: _angular_core.OutputEmitterRef<string | number | null>;
     readonly zOnBlur: _angular_core.OutputEmitterRef<FocusEvent>;
@@ -146,6 +153,12 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
     private readonly _asyncErrors;
     private readonly _customError;
     private readonly _blossomColor;
+    private readonly _colorPickerHsv;
+    private readonly _colorPickerRgb;
+    private readonly _colorPickerHsl;
+    private readonly _colorPickerAlpha;
+    private readonly _colorPickerFormat;
+    private readonly _colorPickerSavedColors;
     protected readonly inputId: string;
     protected readonly suggestHistory: _angular_core.WritableSignal<string[]>;
     protected readonly suggestActiveIndex: _angular_core.WritableSignal<number>;
@@ -163,8 +176,42 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
     protected readonly maskConfig: _angular_core.Signal<ZInputMaskConfig>;
     protected readonly displayValue: _angular_core.Signal<string>;
     protected readonly normalizedColorValue: _angular_core.Signal<string>;
+    protected readonly colorMode: _angular_core.Signal<"blossom" | "picker">;
+    protected readonly isBlossomColorMode: _angular_core.Signal<boolean>;
     protected readonly blossomCoreBorderColor: _angular_core.Signal<string>;
     protected readonly blossomColor: _angular_core.Signal<BlossomColorPickerValue>;
+    protected readonly colorPickerHsv: _angular_core.Signal<{
+        hue: number;
+        saturation: number;
+        value: number;
+    }>;
+    protected readonly colorPickerRgbValue: _angular_core.Signal<{
+        red: number;
+        green: number;
+        blue: number;
+    }>;
+    protected readonly colorPickerHslValue: _angular_core.Signal<{
+        hue: number;
+        saturation: number;
+        lightness: number;
+    }>;
+    protected readonly colorPickerAlpha: _angular_core.Signal<number>;
+    protected readonly colorPickerFormat: _angular_core.Signal<ZInputColorFormat>;
+    protected readonly colorPickerFormatOptions: ZSelectOption<ZInputColorFormat>[];
+    protected readonly colorPickerHueColor: _angular_core.Signal<string>;
+    protected readonly colorPickerSvStyle: _angular_core.Signal<{
+        background: string;
+    }>;
+    protected readonly colorPickerCursorStyle: _angular_core.Signal<{
+        left: string;
+        top: string;
+    }>;
+    protected readonly defaultColorPickerSavedColors: _angular_core.Signal<string[]>;
+    protected readonly colorPickerSavedColors: _angular_core.Signal<string[]>;
+    protected readonly colorPickerSavedSwatches: _angular_core.Signal<{
+        color: string;
+        isLight: boolean;
+    }[]>;
     protected readonly blossomCoreSize: _angular_core.Signal<22 | 30 | 26>;
     protected readonly blossomOptions: _angular_core.Signal<{
         defaultValue: BlossomColorPickerValue | undefined;
@@ -201,6 +248,7 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
     private _onChange;
     private _onTouched;
     private _ngControl;
+    private _colorPickerPopoverControl;
     ngOnInit(): void;
     writeValue(value: string | number | null): void;
     registerOnChange(fn: (value: string | number | null) => void): void;
@@ -230,20 +278,55 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
     protected copyColorToClipboard(): void;
     protected onBlossomColorChange(color: BlossomColorPickerColor): void;
     protected onBlossomColorCollapse(color: BlossomColorPickerColor): void;
+    protected onColorPickerControl(control: ZPopoverControl): void;
+    protected onColorPickerOpen(): void;
+    protected onColorPickerFormatChange(value: ZInputColorFormat | ZInputColorFormat[] | null): void;
+    protected onColorPickerHexChange(value: string | number | null): void;
+    protected onColorPickerAlphaValueChange(value: string | number | null): void;
+    protected onColorPickerRgbChange(channel: 'red' | 'green' | 'blue', value: string | number | null): void;
+    protected onColorPickerHslChange(channel: 'hue' | 'saturation' | 'lightness', value: string | number | null): void;
+    protected onColorPickerHsvValueChange(channel: 'hue' | 'saturation' | 'value', value: string | number | null): void;
+    protected onColorPickerHueInput(event: Event): void;
+    protected onColorPickerAlphaInput(event: Event): void;
+    protected onColorPickerSvPointerDown(event: PointerEvent): void;
+    protected onColorPickerSvPointerMove(event: PointerEvent): void;
+    protected selectSavedColor(color: string): void;
+    protected addCurrentColorToSaved(): void;
+    protected openNativeColorPicker(): Promise<void>;
+    protected closeColorPicker(): void;
     private _emitControl;
     private _runAsyncValidation;
     private _cancelAsyncValidation;
     private _showSuggestPopover;
     private _hideSuggestPopover;
     private _loadSuggestHistory;
+    private _colorPickerCacheKey;
+    private _loadColorPickerSavedColors;
     private _incrementValue;
     private _cleanNumberValue;
+    private _parseNumberValue;
     private _getEffectiveMask;
     private _getEffectiveType;
     private _getEffectiveDecimalMarker;
     private _getValidationErrors;
     private _normalizeHexColor;
+    private _tryNormalizeHexColor;
     private _syncBlossomColorFromHex;
+    private _syncColorStateFromHex;
+    private _syncColorPickerFromHex;
+    private _commitColor;
+    private _setColorPickerAlpha;
+    private _parseBoundedNumber;
+    private _normalizeColorList;
+    private _isLightHexColor;
+    private _getEyeDropper;
+    private _updateColorPickerSv;
+    private _hexToHsv;
+    private _hsvToRgb;
+    private _rgbToHex;
+    private _rgbToHsl;
+    private _hslToHex;
+    private _hsvToHex;
     private _generateColorPalette;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZInputComponent, never>;
     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>;

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, OnInit, OnDestroy } from '@angular/core';
+import { TemplateRef, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
@@ -81,7 +81,8 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     readonly zHideDelay: _angular_core.InputSignal<number>;
     readonly zDisabled: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zOffset: _angular_core.InputSignal<number>;
-    readonly zPopoverWidth: _angular_core.InputSignal<number | "trigger" | "auto">;
+    readonly zPopoverWidth: _angular_core.InputSignal<number | "auto" | "trigger">;
+    readonly zTriggerRef: _angular_core.InputSignal<HTMLElement | ElementRef<HTMLElement> | null>;
     readonly zManualClose: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zScrollClose: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zShowArrow: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
@@ -119,6 +120,7 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     isOpen(): boolean;
     private _createOverlay;
     private _getWidthConfig;
+    private _getTriggerElement;
     private _disposeOverlay;
     private _setupDelayMechanism;
     private _setupTriggers;
@@ -132,7 +134,7 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     private _clearHideTimeout;
     private _cleanupListeners;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZPopoverDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZPopoverDirective, "[z-popover]", ["zPopover"], { "zContent": { "alias": "zPopoverContent"; "required": false; "isSignal": true; }; "zPosition": { "alias": "zPosition"; "required": false; "isSignal": true; }; "zTrigger": { "alias": "zTrigger"; "required": false; "isSignal": true; }; "zClass": { "alias": "zClass"; "required": false; "isSignal": true; }; "zShowDelay": { "alias": "zShowDelay"; "required": false; "isSignal": true; }; "zHideDelay": { "alias": "zHideDelay"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zOffset": { "alias": "zOffset"; "required": false; "isSignal": true; }; "zPopoverWidth": { "alias": "zPopoverWidth"; "required": false; "isSignal": true; }; "zManualClose": { "alias": "zManualClose"; "required": false; "isSignal": true; }; "zScrollClose": { "alias": "zScrollClose"; "required": false; "isSignal": true; }; "zShowArrow": { "alias": "zShowArrow"; "required": false; "isSignal": true; }; }, { "zShow": "zShow"; "zHide": "zHide"; "zHideStart": "zHideStart"; "zControl": "zControl"; "zPositionChange": "zPositionChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZPopoverDirective, "[z-popover]", ["zPopover"], { "zContent": { "alias": "zPopoverContent"; "required": false; "isSignal": true; }; "zPosition": { "alias": "zPosition"; "required": false; "isSignal": true; }; "zTrigger": { "alias": "zTrigger"; "required": false; "isSignal": true; }; "zClass": { "alias": "zClass"; "required": false; "isSignal": true; }; "zShowDelay": { "alias": "zShowDelay"; "required": false; "isSignal": true; }; "zHideDelay": { "alias": "zHideDelay"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zOffset": { "alias": "zOffset"; "required": false; "isSignal": true; }; "zPopoverWidth": { "alias": "zPopoverWidth"; "required": false; "isSignal": true; }; "zTriggerRef": { "alias": "zTriggerRef"; "required": false; "isSignal": true; }; "zManualClose": { "alias": "zManualClose"; "required": false; "isSignal": true; }; "zScrollClose": { "alias": "zScrollClose"; "required": false; "isSignal": true; }; "zShowArrow": { "alias": "zShowArrow"; "required": false; "isSignal": true; }; }, { "zShow": "zShow"; "zHide": "zHide"; "zHideStart": "zHideStart"; "zControl": "zControl"; "zPositionChange": "zPositionChange"; }, never, never, true, never>;
 }
 
 declare const zPopoverVariants: (props?: ({

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

@@ -61,6 +61,7 @@ declare class ZTooltipDirective implements OnInit, OnDestroy {
     private _positionSubscription;
     private _hideTimeout;
     private readonly _isVisible;
+    constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
     show(): void;

package/types/shival99-z-ui-utils.d.ts

@@ -154,6 +154,22 @@ declare const zValidForm: (form: FormGroup | FormArray) => boolean;
  */
 declare const zDebugFormInvalid: (form: FormGroup, parentKey?: string) => void;
 
+type ZEmojiCategoryIcon = `lucide${string}` | `sax${string}`;
+interface ZEmojiEntry {
+    readonly emoji: string;
+    readonly keywords: readonly string[];
+}
+interface ZEmojiCategory {
+    id: string;
+    labelKey: string;
+    icon: ZEmojiCategoryIcon;
+    emojis: readonly (string | ZEmojiEntry)[];
+}
+
+declare const Z_EMOJI_SHEET: readonly ZEmojiCategory[];
+
+declare const Z_EMOJI_KEYWORDS: ReadonlyMap<string, readonly string[]>;
+
 /**
  * Unified event types for Z-UI form components
  * Allows components to emit native DOM events with type discrimination
@@ -197,5 +213,5 @@ interface ZFormDebugOptions {
     logLevel?: 'error' | 'warn' | 'log';
 }
 
-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 };
-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 };
+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 };
+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 };