ng-zenduit 2.3.6 → 2.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-zenduit",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "peerDependencies": {
     "@angular/common": ">=22.0.0 <23.0.0",
     "@angular/core": ">=22.0.0 <23.0.0",

package/types/ng-zenduit.d.ts

@@ -334,6 +334,16 @@ declare class ZenduSelectComponent implements OnChanges {
      * Label text above the select
      */
     label?: string;
+    /**
+     * Show a help icon next to the label. On hover/keyboard-focus it reveals a
+     * self-contained tooltip with `helpTooltip` (the library does not depend on
+     * Angular Material).
+     */
+    helpIcon: boolean;
+    /**
+     * Tooltip text shown on hover/focus of the label help icon. Translated.
+     */
+    helpTooltip: string;
     /**
      * Supporting text below the select
      */
@@ -476,6 +486,8 @@ declare class ZenduSelectComponent implements OnChanges {
      * State tracking
      */
     isOpen: boolean;
+    helpTooltipAlign: 'center' | 'start' | 'end';
+    helpTooltipPlacement: 'above' | 'below';
     searchText: string;
     searchInputValue: string;
     searchFocused: boolean;
@@ -524,6 +536,15 @@ declare class ZenduSelectComponent implements OnChanges {
     /**
      * Toggle dropdown
      */
+    /**
+     * Position the help tooltip so it never overflows the viewport. Horizontally:
+     * anchored to the icon's right edge near the right border, to its left edge near
+     * the left border, otherwise centered. Vertically: above by default, flipped
+     * below when there isn't room above and there's more room below (the label-row
+     * icon sits high in the layout). Computed from the icon rect synchronously
+     * (before paint) so the tooltip appears in its final spot without a flicker.
+     */
+    updateHelpTooltipPlacement(event: Event): void;
     toggleDropdown(): void;
     /**
      * Handle scroll on the options list — fetch the next page once the user
@@ -681,7 +702,7 @@ declare class ZenduSelectComponent implements OnChanges {
      */
     private updateTreeSelectAllState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ZenduSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ZenduSelectComponent, "zen-select", never, { "selectModel": { "alias": "selectModel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "label": { "alias": "label"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "leadingType": { "alias": "leadingType"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "leadingAvatar": { "alias": "leadingAvatar"; "required": false; }; "leadingDotColor": { "alias": "leadingDotColor"; "required": false; }; "displayProp": { "alias": "displayProp"; "required": false; }; "idProp": { "alias": "idProp"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; "isMultiselect": { "alias": "isMultiselect"; "required": false; }; "multiselect": { "alias": "multiselect"; "required": false; }; "hideSelectAll": { "alias": "hideSelectAll"; "required": false; }; "hideTreeSearch": { "alias": "hideTreeSearch"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "destructive": { "alias": "destructive"; "required": false; }; "size": { "alias": "size"; "required": false; }; "returnOption": { "alias": "returnOption"; "required": false; }; "isTruncate": { "alias": "isTruncate"; "required": false; }; "enableAddNewOption": { "alias": "enableAddNewOption"; "required": false; }; "showDefaultAddOption": { "alias": "showDefaultAddOption"; "required": false; }; "newOptionText": { "alias": "newOptionText"; "required": false; }; "enableRemoveOption": { "alias": "enableRemoveOption"; "required": false; }; "removeOptionText": { "alias": "removeOptionText"; "required": false; }; "isLazyLoading": { "alias": "isLazyLoading"; "required": false; }; "lazyLoader": { "alias": "lazyLoader"; "required": false; }; "preferredOpenDirection": { "alias": "preferredOpenDirection"; "required": false; }; }, { "selectModelChange": "selectModelChange"; "addNewOption": "addNewOption"; "removeOption": "removeOption"; "closed": "closed"; }, ["optionTemplate", "valueTemplate", "buttonTemplate"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ZenduSelectComponent, "zen-select", never, { "selectModel": { "alias": "selectModel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "label": { "alias": "label"; "required": false; }; "helpIcon": { "alias": "helpIcon"; "required": false; }; "helpTooltip": { "alias": "helpTooltip"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "leadingType": { "alias": "leadingType"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "leadingAvatar": { "alias": "leadingAvatar"; "required": false; }; "leadingDotColor": { "alias": "leadingDotColor"; "required": false; }; "displayProp": { "alias": "displayProp"; "required": false; }; "idProp": { "alias": "idProp"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; "isMultiselect": { "alias": "isMultiselect"; "required": false; }; "multiselect": { "alias": "multiselect"; "required": false; }; "hideSelectAll": { "alias": "hideSelectAll"; "required": false; }; "hideTreeSearch": { "alias": "hideTreeSearch"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "destructive": { "alias": "destructive"; "required": false; }; "size": { "alias": "size"; "required": false; }; "returnOption": { "alias": "returnOption"; "required": false; }; "isTruncate": { "alias": "isTruncate"; "required": false; }; "enableAddNewOption": { "alias": "enableAddNewOption"; "required": false; }; "showDefaultAddOption": { "alias": "showDefaultAddOption"; "required": false; }; "newOptionText": { "alias": "newOptionText"; "required": false; }; "enableRemoveOption": { "alias": "enableRemoveOption"; "required": false; }; "removeOptionText": { "alias": "removeOptionText"; "required": false; }; "isLazyLoading": { "alias": "isLazyLoading"; "required": false; }; "lazyLoader": { "alias": "lazyLoader"; "required": false; }; "preferredOpenDirection": { "alias": "preferredOpenDirection"; "required": false; }; }, { "selectModelChange": "selectModelChange"; "addNewOption": "addNewOption"; "removeOption": "removeOption"; "closed": "closed"; }, ["optionTemplate", "valueTemplate", "buttonTemplate"], never, false, never>;
 }
 
 interface DatePickerDay {
@@ -2103,11 +2124,11 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
      */
     leadingIcon: string;
     /**
-     * Show help icon with tooltip
+     * Show help icon. The tooltip is shown on hover / keyboard focus.
      */
     helpIcon: boolean;
     /**
-     * Tooltip text for help icon
+     * Tooltip text for the help icon (shown on hover / focus).
      */
     helpTooltip: string;
     /**
@@ -2279,10 +2300,6 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
      * Trailing dropdown value change event (for two-way binding)
      */
     trailingDropdownValueChange: EventEmitter<string | number>;
-    /**
-     * Help icon click event
-     */
-    helpIconClick: EventEmitter<MouseEvent>;
     /**
      * Phone change event
      */
@@ -2297,7 +2314,8 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
     leadingIconClick: EventEmitter<MouseEvent>;
     value: string | number;
     isFocused: boolean;
-    showHelpTooltip: boolean;
+    helpTooltipAlign: 'center' | 'start' | 'end';
+    helpTooltipPlacement: 'above' | 'below';
     leadingDropdownOpen: boolean;
     trailingDropdownOpen: boolean;
     phoneText: string;
@@ -2339,7 +2357,15 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
     onTrailingDropdownChange(value: string | number): void;
     toggleLeadingDropdown(): void;
     toggleTrailingDropdown(): void;
-    onHelpIconClick(event: MouseEvent): void;
+    /**
+     * Position the help tooltip so it never overflows the viewport. Horizontally:
+     * anchored to the icon's right edge near the right border, to its left edge near
+     * the left border, otherwise centered. Vertically: above by default, flipped
+     * below when there isn't room above and there's more room below (e.g. an icon
+     * near the top of the viewport). Computed from the icon rect synchronously
+     * (before paint) so the tooltip appears in its final spot without a flicker.
+     */
+    updateHelpTooltipPlacement(event: Event): void;
     closeDropdowns(): void;
     get hasValue(): boolean;
     get showLabel(): boolean;
@@ -2364,7 +2390,7 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
     onPhoneInputChange(event: Event): void;
     onLeadingIconClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ZenduInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ZenduInputComponent, "zen-input", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "helpIcon": { "alias": "helpIcon"; "required": false; }; "helpTooltip": { "alias": "helpTooltip"; "required": false; }; "destructive": { "alias": "destructive"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "leadingDropdownOptions": { "alias": "leadingDropdownOptions"; "required": false; }; "leadingDropdownValue": { "alias": "leadingDropdownValue"; "required": false; }; "leadingDropdownPlaceholder": { "alias": "leadingDropdownPlaceholder"; "required": false; }; "trailingDropdownOptions": { "alias": "trailingDropdownOptions"; "required": false; }; "trailingDropdownValue": { "alias": "trailingDropdownValue"; "required": false; }; "trailingDropdownPlaceholder": { "alias": "trailingDropdownPlaceholder"; "required": false; }; "leadingText": { "alias": "leadingText"; "required": false; }; "trailingText": { "alias": "trailingText"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "phoneMaxLength": { "alias": "phoneMaxLength"; "required": false; }; "phone": { "alias": "phone"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "valueChange": "valueChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "inputKeydown": "inputKeydown"; "inputKeyup": "inputKeyup"; "leadingDropdownChange": "leadingDropdownChange"; "leadingDropdownValueChange": "leadingDropdownValueChange"; "trailingDropdownChange": "trailingDropdownChange"; "trailingDropdownValueChange": "trailingDropdownValueChange"; "helpIconClick": "helpIconClick"; "phoneChange": "phoneChange"; "validChange": "validChange"; "leadingIconClick": "leadingIconClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ZenduInputComponent, "zen-input", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "helpIcon": { "alias": "helpIcon"; "required": false; }; "helpTooltip": { "alias": "helpTooltip"; "required": false; }; "destructive": { "alias": "destructive"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "leadingDropdownOptions": { "alias": "leadingDropdownOptions"; "required": false; }; "leadingDropdownValue": { "alias": "leadingDropdownValue"; "required": false; }; "leadingDropdownPlaceholder": { "alias": "leadingDropdownPlaceholder"; "required": false; }; "trailingDropdownOptions": { "alias": "trailingDropdownOptions"; "required": false; }; "trailingDropdownValue": { "alias": "trailingDropdownValue"; "required": false; }; "trailingDropdownPlaceholder": { "alias": "trailingDropdownPlaceholder"; "required": false; }; "leadingText": { "alias": "leadingText"; "required": false; }; "trailingText": { "alias": "trailingText"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "phoneMaxLength": { "alias": "phoneMaxLength"; "required": false; }; "phone": { "alias": "phone"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "valueChange": "valueChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "inputKeydown": "inputKeydown"; "inputKeyup": "inputKeyup"; "leadingDropdownChange": "leadingDropdownChange"; "leadingDropdownValueChange": "leadingDropdownValueChange"; "trailingDropdownChange": "trailingDropdownChange"; "trailingDropdownValueChange": "trailingDropdownValueChange"; "phoneChange": "phoneChange"; "validChange": "validChange"; "leadingIconClick": "leadingIconClick"; }, never, never, false, never>;
     static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_rows: unknown;
     static ngAcceptInputType_resizable: unknown;