ng-zenduit 2.3.4 → 2.3.7

package/package.json

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

package/styles/common-form.scss

@@ -60,10 +60,7 @@
     }
 
     &.error {
-      label {
-        color: #d92c21;
-      }
-
+      // Labels are never recoloured by form state — only the field reacts.
       .material-input,
       .zen-input,
       .material-select,
@@ -95,10 +92,8 @@
     }
 
     &:hover {
-      label {
-        color: #333333;
-      }
-
+      // Labels keep their static colour on hover/focus — no state highlight.
+      // (The field border still reacts; only the label is left untouched.)
       .material-input,
       .zen-input,
       .app-select-toggle,
@@ -109,10 +104,6 @@
     }
 
     &:focus-within {
-      label {
-        color: $color-primary;
-      }
-
       .material-input,
       .zen-input,
       .app-select-toggle,

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 {
@@ -1841,6 +1862,15 @@ declare class ZenduDatePickerDropdownComponent implements OnInit, OnChanges, OnD
      * element, so an external control (e.g. a select) can drive it via open().
      */
     hideTrigger: boolean;
+    /** Field label rendered above the trigger. Pass an already-translated
+     *  string (e.g. `[label]="'Select Date' | translate"`) — not translated
+     *  internally. */
+    label: string;
+    /** Adds a red `*` to the label. */
+    required: boolean;
+    /** Trigger height: `md` (40px, default, matches the md button) or `form`
+     *  (46px, to sit flush in a 46px-tall form field row). */
+    size: 'md' | 'form';
     triggerBtn?: ElementRef;
     mobile: boolean;
     isOpen: boolean;
@@ -1870,6 +1900,11 @@ declare class ZenduDatePickerDropdownComponent implements OnInit, OnChanges, OnD
     _period: 'AM' | 'PM';
     _hoursDisplay: string;
     _minutesDisplay: string;
+    _endHours: number;
+    _endMinutes: number;
+    _endPeriod: 'AM' | 'PM';
+    _endHoursDisplay: string;
+    _endMinutesDisplay: string;
     defaultPresets: DatePickerPreset[];
     constructor(_element: ElementRef, _translate: TranslateService, globalPresets: DatePickerPreset[] | null);
     ngOnInit(): void;
@@ -1904,17 +1939,17 @@ declare class ZenduDatePickerDropdownComponent implements OnInit, OnChanges, OnD
     selectPreset(preset: DatePickerPreset): void;
     goToToday(): void;
     private formatNum;
-    incrementHours(): void;
-    decrementHours(): void;
-    incrementMinutes(): void;
-    decrementMinutes(): void;
-    onHoursInput(event: Event): void;
-    onMinutesInput(event: Event): void;
-    clampHours(): void;
-    clampMinutes(): void;
+    incrementHours(target?: 'start' | 'end'): void;
+    decrementHours(target?: 'start' | 'end'): void;
+    incrementMinutes(target?: 'start' | 'end'): void;
+    decrementMinutes(target?: 'start' | 'end'): void;
+    onHoursInput(event: Event, target?: 'start' | 'end'): void;
+    onMinutesInput(event: Event, target?: 'start' | 'end'): void;
+    clampHours(target?: 'start' | 'end'): void;
+    clampMinutes(target?: 'start' | 'end'): void;
     onTimeFocus(event: Event): void;
-    onTimeKeydown(event: KeyboardEvent, type: 'hours' | 'minutes'): void;
-    setPeriod(period: 'AM' | 'PM'): void;
+    onTimeKeydown(event: KeyboardEvent, type: 'hours' | 'minutes', target?: 'start' | 'end'): void;
+    setPeriod(period: 'AM' | 'PM', target?: 'start' | 'end'): void;
     private applyTimeToDate;
     private initTimeFromDate;
     apply(): void;
@@ -1928,7 +1963,7 @@ declare class ZenduDatePickerDropdownComponent implements OnInit, OnChanges, OnD
     isRangeStart(day: DatePickerDay): boolean;
     isRangeEnd(day: DatePickerDay): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ZenduDatePickerDropdownComponent, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ZenduDatePickerDropdownComponent, "zen-date-picker-dropdown", never, { "type": { "alias": "type"; "required": false; }; "date": { "alias": "date"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "presets": { "alias": "presets"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dateMarkers": { "alias": "dateMarkers"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; }; "timePicker": { "alias": "timePicker"; "required": false; }; "autoApply": { "alias": "autoApply"; "required": false; }; "hideTrigger": { "alias": "hideTrigger"; "required": false; }; }, { "dateChange": "dateChange"; "startDateChange": "startDateChange"; "endDateChange": "endDateChange"; "rangeChange": "rangeChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ZenduDatePickerDropdownComponent, "zen-date-picker-dropdown", never, { "type": { "alias": "type"; "required": false; }; "date": { "alias": "date"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "presets": { "alias": "presets"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dateMarkers": { "alias": "dateMarkers"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; }; "timePicker": { "alias": "timePicker"; "required": false; }; "autoApply": { "alias": "autoApply"; "required": false; }; "hideTrigger": { "alias": "hideTrigger"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "dateChange": "dateChange"; "startDateChange": "startDateChange"; "endDateChange": "endDateChange"; "rangeChange": "rangeChange"; }, never, never, false, never>;
 }
 
 interface FileUploadItem {
@@ -2089,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;
     /**
@@ -2124,6 +2159,23 @@ declare class ZenduInputComponent implements ControlValueAccessor, OnInit, OnCha
      * Pattern for validation
      */
     pattern: string;
+    /**
+     * Minimum value for `type="number"` inputs (maps to the native `min`
+     * attribute). Applied to all single-line types but only meaningful for
+     * `number`; the browser ignores it otherwise. Not applied to multiline.
+     */
+    min?: number;
+    /**
+     * Maximum value for `type="number"` inputs (maps to the native `max`
+     * attribute). Applied to all single-line types but only meaningful for
+     * `number`; the browser ignores it otherwise. Not applied to multiline.
+     */
+    max?: number;
+    /**
+     * Step increment for `type="number"` inputs (maps to the native `step`
+     * attribute). Accepts a number or the literal `'any'`.
+     */
+    step?: number | 'any';
     /**
      * Autocomplete attribute
      */
@@ -2248,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
      */
@@ -2266,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;
@@ -2308,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;
@@ -2333,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; }; "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;