ngx-kit 6.2.0 → 7.0.0

package/time-picker/README.md

@@ -1,95 +1,89 @@
-# ngx-kit/time-picker
-
-An analog clock time picker (MUI-style), usable either inline or as a popup attached to a text input, with 12h/24h format support and a configurable minute step.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Setup (optional)
-
-```ts
-// app.config.ts
-import { provideTimePicker } from 'ngx-kit/time-picker';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideTimePicker({
-      format: '24',
-      minuteStep: 5,
-      confirmButtonText: 'Done',
-    }),
-  ],
-};
-```
-
-`provideTimePicker` only needs the fields you want to override — everything else falls back to the defaults (`confirmButtonText: 'Ok'`, `cancelButtonText: 'Cancel'`, `amText: 'AM'`, `pmText: 'PM'`, `format: '12'`, `minuteStep: 1`, `autoSwitchToMinute: true`).
-
-## Usage — popup attached to an input
-
-```html
-<input
-  type="text"
-  formControlName="time"
-  ngxInputTimePicker
-  #dp="ngxInputTimePicker"
-/>
-<button (click)="dp.toggle()">Open</button>
-```
-
-`[ngxInputTimePicker]` is a full `ControlValueAccessor` + `Validator`, so it works with `ngModel`/`formControl`/`formControlName`. The value is always a string in `HH:MM` (24h) form, e.g. `'14:35'`.
-
-If the typed text isn't a valid time, the control gets a `{ invalid: true }` error (in addition to whatever built-in validators like `Validators.required` you add yourself):
-
-```html
-@if (form.get('time')?.hasError('invalid')) {
-  <div class="text-danger">Invalid time</div>
-}
-@if (form.get('time')?.hasError('required')) {
-  <div class="text-danger">Time is required</div>
-}
-```
-
-## Usage — inline (always visible)
-
-```html
-<ngx-time-picker format="24" [(value)]="time" (change)="onTimeChange($event)"></ngx-time-picker>
-```
-
-## API
-
-### `[ngxInputTimePicker]`
-
-| Input | Type | Default | Description |
-| --- | --- | --- | --- |
-| `openOnCLick` | `boolean` | `true` | Open the popup when the input itself is clicked |
-| `format` | `'12' \| '24'` | from config | |
-
-| Output | Type | Description |
-| --- | --- | --- |
-| `change` | `EventEmitter<string \| null>` | Emitted when the user confirms a time |
-
-| Member | Description |
-| --- | --- |
-| `toggle()` | Opens the popup if closed, closes it if open |
-
-### `<ngx-time-picker>`
-
-| Input | Type | Default | Description |
-| --- | --- | --- | --- |
-| `value` (model, two-way) | `string` | `'12:00'` | Bind with `[(value)]` |
-| `format` | `'12' \| '24'` | from config | |
-| `minuteStep` | `number` | from config | |
-| `disabled` | `boolean` | `false` | |
-| `autoSwitchToMinute` | `boolean` | from config | Switch to minute-selection mode right after picking the hour |
-
-| Output | Type | Description |
-| --- | --- | --- |
-| `change` | `EventEmitter<string \| null>` | Emitted when "OK" is pressed |
-| `cancel` | `EventEmitter<void>` | Emitted when "Cancel" is pressed |
-
-## Dark mode and RTL
-
-Supported automatically.
+# ngx-kit/time-picker
+
+An analog clock time picker (MUI-style), usable either inline or as a popup attached to a text input, with 12h/24h format support and a configurable minute step.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+## Setup (optional)
+
+```ts
+// app.config.ts
+import { provideTimePicker } from 'ngx-kit/time-picker';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTimePicker({
+      format: '24',
+      minuteStep: 5,
+      confirmButtonText: 'Done',
+    }),
+  ],
+};
+```
+
+`provideTimePicker` only needs the fields you want to override — everything else falls back to the defaults (`confirmButtonText: 'Ok'`, `cancelButtonText: 'Cancel'`, `amText: 'AM'`, `pmText: 'PM'`, `format: '12'`, `minuteStep: 1`, `autoSwitchToMinute: true`).
+
+## Usage — popup attached to an input
+
+```html
+<input type="text" formControlName="time" ngxInputTimePicker #dp="ngxInputTimePicker" />
+<button (click)="dp.toggle()">Open</button>
+```
+
+`[ngxInputTimePicker]` is a full `ControlValueAccessor` + `Validator`, so it works with `ngModel`/`formControl`/`formControlName`. The value is always a string in `HH:MM` (24h) form, e.g. `'14:35'`.
+
+If the typed text isn't a valid time, the control gets a `{ invalid: true }` error (in addition to whatever built-in validators like `Validators.required` you add yourself):
+
+```html
+@if (form.get('time')?.hasError('invalid')) {
+<div class="text-danger">Invalid time</div>
+} @if (form.get('time')?.hasError('required')) {
+<div class="text-danger">Time is required</div>
+}
+```
+
+## Usage — inline (always visible)
+
+```html
+<ngx-time-picker format="24" [(value)]="time" (change)="onTimeChange($event)"></ngx-time-picker>
+```
+
+## API
+
+### `[ngxInputTimePicker]`
+
+| Input         | Type           | Default     | Description                                     |
+| ------------- | -------------- | ----------- | ----------------------------------------------- |
+| `openOnCLick` | `boolean`      | `true`      | Open the popup when the input itself is clicked |
+| `format`      | `'12' \| '24'` | from config |                                                 |
+
+| Output   | Type                           | Description                           |
+| -------- | ------------------------------ | ------------------------------------- |
+| `change` | `EventEmitter<string \| null>` | Emitted when the user confirms a time |
+
+| Member     | Description                                  |
+| ---------- | -------------------------------------------- |
+| `toggle()` | Opens the popup if closed, closes it if open |
+
+### `<ngx-time-picker>`
+
+| Input                    | Type           | Default     | Description                                                  |
+| ------------------------ | -------------- | ----------- | ------------------------------------------------------------ |
+| `value` (model, two-way) | `string`       | `'12:00'`   | Bind with `[(value)]`                                        |
+| `format`                 | `'12' \| '24'` | from config |                                                              |
+| `minuteStep`             | `number`       | from config |                                                              |
+| `disabled`               | `boolean`      | `false`     |                                                              |
+| `autoSwitchToMinute`     | `boolean`      | from config | Switch to minute-selection mode right after picking the hour |
+
+| Output   | Type                           | Description                      |
+| -------- | ------------------------------ | -------------------------------- |
+| `change` | `EventEmitter<string \| null>` | Emitted when "OK" is pressed     |
+| `cancel` | `EventEmitter<void>`           | Emitted when "Cancel" is pressed |
+
+## Dark mode and RTL
+
+Supported automatically.

package/types/ngx-kit-color-picker.d.ts

@@ -178,41 +178,97 @@ declare class NgxInputColorComponent implements OnInit, OnDestroy, ControlValueA
 }
 
 declare class NgxInputColor implements AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
-    private el;
-    private renderer;
-    private viewContainerRef;
-    private overlayService;
+    private readonly el;
+    private readonly renderer;
+    private readonly viewContainerRef;
+    private readonly overlayService;
     setInputBackgroundColor: boolean;
     defaultInspector: ColorInspector;
     simpleMode: boolean;
     outputType: OutputType;
     theme: 'light' | 'dark' | 'auto';
     private useAlphaChannel;
-    set setUseAlphaChannel(val: boolean);
-    private boundInputHandler;
-    private _targetInput?;
-    set ngxInputColor(el: HTMLInputElement | ElementRef<HTMLInputElement> | null | undefined | '');
+    set setUseAlphaChannel(value: boolean);
+    /**
+     * Input target.
+     *
+     * Supported:
+     *
+     * <input ngxInputColor>
+     *
+     * or
+     *
+     * <div [ngxInputColor]="inputElement"></div>
+     *
+     * or
+     *
+     * <div [ngxInputColor]="inputRef"></div>
+     */
+    set ngxInputColor(element: HTMLInputElement | ElementRef<HTMLInputElement> | null | undefined | '');
     change: EventEmitter<string>;
     private color?;
     private pickerRef?;
+    private _targetInput?;
+    private explicitTargetInput;
     private isHostInput;
-    inValid: boolean;
+    private removeInputListener?;
+    private disabled;
+    private invalid;
     protected _onChange: (value: string) => void;
     protected _onTouched: () => void;
-    _onValidateChange: () => void;
-    constructor(el: ElementRef, renderer: Renderer2, viewContainerRef: ViewContainerRef, overlayService: OverlayService);
+    private _onValidateChange;
+    constructor(el: ElementRef<HTMLElement>, renderer: Renderer2, viewContainerRef: ViewContainerRef, overlayService: OverlayService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    onClick(ev: Event): void;
-    writeValue(value: any): void;
-    registerOnChange(fn: any): void;
-    registerOnTouched(fn: any): void;
+    /**
+     * Open the custom color picker.
+     */
+    onHostClick(event: Event): void;
+    /**
+     * Called by Angular Forms.
+     *
+     * IMPORTANT:
+     * writeValue must NEVER call _onChange().
+     */
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
     setDisabledState(disabled: boolean): void;
     registerOnValidatorChange(fn: () => void): void;
-    validate(control: AbstractControl): ValidationErrors | null;
+    validate(_control: AbstractControl): ValidationErrors | null;
+    private bindTargetInput;
+    private removeTargetInputListener;
+    /**
+     * Handles native input changes.
+     *
+     * This is deliberately NOT implemented using writeValue(),
+     * because this is a user-originated value and therefore
+     * must propagate through ControlValueAccessor.
+     */
+    private handleInputEvent;
     private toggleColorPicker;
     private destroyColorPicker;
+    /**
+     * User-originated/custom-picker value.
+     *
+     * This is the ONLY place where _onChange is called.
+     */
     private emitChange;
+    /**
+     * Synchronize all visual representations.
+     */
+    private syncView;
+    /**
+     * input[type=color] only accepts a 6-digit RGB hex value.
+     *
+     * Therefore even if the selected color contains alpha,
+     * the native color input receives #RRGGBB.
+     */
+    private getNativeInputColor;
+    private getViewColor;
+    private syncHostBackground;
+    private notifyValidatorChange;
+    private isInputElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxInputColor, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgxInputColor, "[ngxInputColor]", never, { "setInputBackgroundColor": { "alias": "setInputBackgroundColor"; "required": false; }; "defaultInspector": { "alias": "defaultInspector"; "required": false; }; "simpleMode": { "alias": "simpleMode"; "required": false; }; "outputType": { "alias": "outputType"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "setUseAlphaChannel": { "alias": "useAlphaChannel"; "required": false; }; "ngxInputColor": { "alias": "ngxInputColor"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }

package/types/ngx-kit-date-picker.d.ts

@@ -312,6 +312,7 @@ interface EventInteractionState {
 declare class NgxCalendarComponent extends NgxDatePickerBase implements OnInit {
     defaultLocalization: NgxCalendarLocalization;
     localize: i0.InputSignal<NgxCalendarLocalization>;
+    resizeAndMovable: i0.InputSignal<boolean>;
     _config: NgxDatePickerConfig;
     set config(val: NgxDatePickerConfig);
     set locale(val: string);
@@ -399,7 +400,7 @@ declare class NgxCalendarComponent extends NgxDatePickerBase implements OnInit {
     private readonly defaultHeight;
     minHeight: number;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxCalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxCalendarComponent, "ngx-calendar", never, { "localize": { "alias": "localize"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "setMin": { "alias": "min"; "required": false; }; "setMax": { "alias": "max"; "required": false; }; "view": { "alias": "view"; "required": false; }; "events": { "alias": "events"; "required": false; }; }, { "dateChange": "dateChange"; "selectEvent": "selectEvent"; "eventChange": "eventChange"; "eventsChange": "eventsChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxCalendarComponent, "ngx-calendar", never, { "localize": { "alias": "localize"; "required": false; "isSignal": true; }; "resizeAndMovable": { "alias": "resizeAndMovable"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "setMin": { "alias": "min"; "required": false; }; "setMax": { "alias": "max"; "required": false; }; "view": { "alias": "view"; "required": false; }; "events": { "alias": "events"; "required": false; }; }, { "dateChange": "dateChange"; "selectEvent": "selectEvent"; "eventChange": "eventChange"; "eventsChange": "eventsChange"; }, never, never, true, never>;
 }
 
 declare class NgxInputDatePickerComponent extends NgxDatePickerBase implements ControlValueAccessor, Validator, OnInit {