ngx-kit 7.1.0 → 7.3.0

package/message/README.md

@@ -1,70 +1,70 @@
-# ngx-kit/message
-
-Alert/confirm dialogs (SweetAlert-style), with a static API callable from anywhere in the app.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Setup
-
-```ts
-// app.config.ts
-import { provideMessage } from 'ngx-kit/message';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideMessage({ confirmButtonText: 'OK' /* global defaults */ })],
-};
-```
-
-## Usage
-
-```ts
-import { MSG } from 'ngx-kit/message';
-
-MSG.success('Saved!', 'Your changes were saved successfully.');
-MSG.error('Error', 'Something went wrong.');
-MSG.warning('Warning', 'Are you sure?');
-MSG.info('Heads up', 'This is an informational message.');
-MSG.question('Question', 'Continue?');
-MSG.loading('Processing…');
-
-// full control over options:
-const result = MSG.show({
-  title: 'Delete this?',
-  text: 'This action cannot be undone.',
-  showCancelButton: true,
-  showDenyButton: true,
-  confirmButtonText: 'Yes, delete it',
-});
-result.afterClose.subscribe((r) => console.log(r));
-```
-
-## API
-
-### `MSG` (and its alias `Modal`)
-
-| Method                                                            | Signature                  | Description      |
-| ----------------------------------------------------------------- | -------------------------- | ---------------- |
-| `show(options?)`                                                  | `IMessageOptions`          | Full control     |
-| `info` / `success` / `warning` / `error` / `question` / `loading` | `(title, text?, options?)` | Common shortcuts |
-
-### `IMessageOptions` (key fields)
-
-| Field                                                       | Type          | Default                      | Description                                                                                           |
-| ----------------------------------------------------------- | ------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `title` / `text` / `html`                                   | `string`      |                              | Content (`html` is not sanitized — escaping is your responsibility)                                   |
-| `icon`                                                      | `MessageIcon` |                              | Icon shown                                                                                            |
-| `showConfirmButton` / `showDenyButton` / `showCancelButton` | `boolean`     | `true` / `false` / `false`   |                                                                                                       |
-| `confirmButtonText` / `denyButtonText` / `cancelButtonText` | `string`      | `'OK'` / `'No'` / `'Cancel'` |                                                                                                       |
-| `allowOutsideClick` / `allowEscapeKey` / `allowEnterKey`    | `boolean`     | `true`                       | How the message can be dismissed                                                                      |
-| `showCloseButton`                                           | `boolean`     | `false`                      | The ✕ button                                                                                          |
-| `useOverlay`                                                | `boolean`     |                              | For when it's used inside another dialog (e.g. Angular Material), raises the display layer to the top |
-
-If several messages are open at once, Escape/Enter only affect the **last (topmost) message**, not all of them.
-
-## Dark mode and RTL
-
-Supported automatically.
+# ngx-kit/message
+
+Alert/confirm dialogs (SweetAlert-style), with a static API callable from anywhere in the app.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+## Setup
+
+```ts
+// app.config.ts
+import { provideMessage } from 'ngx-kit/message';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideMessage({ confirmButtonText: 'OK' /* global defaults */ })],
+};
+```
+
+## Usage
+
+```ts
+import { MSG } from 'ngx-kit/message';
+
+MSG.success('Saved!', 'Your changes were saved successfully.');
+MSG.error('Error', 'Something went wrong.');
+MSG.warning('Warning', 'Are you sure?');
+MSG.info('Heads up', 'This is an informational message.');
+MSG.question('Question', 'Continue?');
+MSG.loading('Processing…');
+
+// full control over options:
+const result = MSG.show({
+  title: 'Delete this?',
+  text: 'This action cannot be undone.',
+  showCancelButton: true,
+  showDenyButton: true,
+  confirmButtonText: 'Yes, delete it',
+});
+result.afterClose.subscribe((r) => console.log(r));
+```
+
+## API
+
+### `MSG` (and its alias `Modal`)
+
+| Method                                                            | Signature                  | Description      |
+| ----------------------------------------------------------------- | -------------------------- | ---------------- |
+| `show(options?)`                                                  | `IMessageOptions`          | Full control     |
+| `info` / `success` / `warning` / `error` / `question` / `loading` | `(title, text?, options?)` | Common shortcuts |
+
+### `IMessageOptions` (key fields)
+
+| Field                                                       | Type          | Default                      | Description                                                                                           |
+| ----------------------------------------------------------- | ------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `title` / `text` / `html`                                   | `string`      |                              | Content (`html` is not sanitized — escaping is your responsibility)                                   |
+| `icon`                                                      | `MessageIcon` |                              | Icon shown                                                                                            |
+| `showConfirmButton` / `showDenyButton` / `showCancelButton` | `boolean`     | `true` / `false` / `false`   |                                                                                                       |
+| `confirmButtonText` / `denyButtonText` / `cancelButtonText` | `string`      | `'OK'` / `'No'` / `'Cancel'` |                                                                                                       |
+| `allowOutsideClick` / `allowEscapeKey` / `allowEnterKey`    | `boolean`     | `true`                       | How the message can be dismissed                                                                      |
+| `showCloseButton`                                           | `boolean`     | `false`                      | The ✕ button                                                                                          |
+| `useOverlay`                                                | `boolean`     |                              | For when it's used inside another dialog (e.g. Angular Material), raises the display layer to the top |
+
+If several messages are open at once, Escape/Enter only affect the **last (topmost) message**, not all of them.
+
+## Dark mode and RTL
+
+Supported automatically.

package/notify/README.md

@@ -1,56 +1,56 @@
-# ngx-kit/notify
-
-Corner toast notifications, with a static API, automatic queueing (once the visible count exceeds the limit), and the timer pausing on hover.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Setup
-
-```ts
-// app.config.ts
-import { provideNotify } from 'ngx-kit/notify';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideNotify({ timeout: 4000, position: 'top-center', dismissible: true })],
-};
-```
-
-## Usage
-
-```ts
-import { Notify } from 'ngx-kit/notify';
-
-Notify.success('Saved');
-Notify.error("We couldn't send your message", 'Try again');
-Notify.warning('Weak connection');
-Notify.info('A new version is available', undefined, { timeout: 8000 });
-```
-
-## API
-
-### `Notify`
-
-| Method                                        | Signature                                           |
-| --------------------------------------------- | --------------------------------------------------- |
-| `show(type, message, description?, options?)` | `type: 'info' \| 'success' \| 'warning' \| 'error'` |
-| `info` / `success` / `warning` / `error`      | `(message, description?, options?)`                 |
-
-### `NgxNotifyOptions`
-
-| Field          | Type                    | Default        | Description                                                   |
-| -------------- | ----------------------- | -------------- | ------------------------------------------------------------- |
-| `timeout`      | `number` (ms)           | `3000`         | How long it's shown before auto-dismissing                    |
-| `position`     | `NgxNotifyPositionType` | `'top-center'` | Corner/center to display in                                   |
-| `maxVisible`   | `number`                | `10`           | Beyond this count, notifications queue instead of overlapping |
-| `allowHtml`    | `boolean`               | `false`        | If `true`, the message is rendered as HTML (not sanitized)    |
-| `pauseOnHover` | `boolean`               | `true`         | The timer pauses while the mouse hovers                       |
-| `dismissible`  | `boolean`               | `true`         | Show a close button                                           |
-| `closeOnTap`   | `boolean`               | `true`         | Clicking the notification itself closes it                    |
-
-## Dark mode and RTL
-
-Supported automatically.
+# ngx-kit/notify
+
+Corner toast notifications, with a static API, automatic queueing (once the visible count exceeds the limit), and the timer pausing on hover.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+## Setup
+
+```ts
+// app.config.ts
+import { provideNotify } from 'ngx-kit/notify';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideNotify({ timeout: 4000, position: 'top-center', dismissible: true })],
+};
+```
+
+## Usage
+
+```ts
+import { Notify } from 'ngx-kit/notify';
+
+Notify.success('Saved');
+Notify.error("We couldn't send your message", 'Try again');
+Notify.warning('Weak connection');
+Notify.info('A new version is available', undefined, { timeout: 8000 });
+```
+
+## API
+
+### `Notify`
+
+| Method                                        | Signature                                           |
+| --------------------------------------------- | --------------------------------------------------- |
+| `show(type, message, description?, options?)` | `type: 'info' \| 'success' \| 'warning' \| 'error'` |
+| `info` / `success` / `warning` / `error`      | `(message, description?, options?)`                 |
+
+### `NgxNotifyOptions`
+
+| Field          | Type                    | Default        | Description                                                   |
+| -------------- | ----------------------- | -------------- | ------------------------------------------------------------- |
+| `timeout`      | `number` (ms)           | `3000`         | How long it's shown before auto-dismissing                    |
+| `position`     | `NgxNotifyPositionType` | `'top-center'` | Corner/center to display in                                   |
+| `maxVisible`   | `number`                | `10`           | Beyond this count, notifications queue instead of overlapping |
+| `allowHtml`    | `boolean`               | `false`        | If `true`, the message is rendered as HTML (not sanitized)    |
+| `pauseOnHover` | `boolean`               | `true`         | The timer pauses while the mouse hovers                       |
+| `dismissible`  | `boolean`               | `true`         | Show a close button                                           |
+| `closeOnTap`   | `boolean`               | `true`         | Clicking the notification itself closes it                    |
+
+## Dark mode and RTL
+
+Supported automatically.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-kit",
-  "version": "7.1.0",
+  "version": "7.3.0",
   "description": "Angular input components",
   "author": "Mohammadreza Samani <mr.samani1368@gmail.com>",
   "license": "MIT",
@@ -45,6 +45,10 @@
       "types": "./types/ngx-kit-color-picker.d.ts",
       "default": "./fesm2022/ngx-kit-color-picker.mjs"
     },
+    "./core": {
+      "types": "./types/ngx-kit-core.d.ts",
+      "default": "./fesm2022/ngx-kit-core.mjs"
+    },
     "./data-table": {
       "types": "./types/ngx-kit-data-table.d.ts",
       "default": "./fesm2022/ngx-kit-data-table.mjs"
@@ -105,10 +109,6 @@
       "types": "./types/ngx-kit-notify.d.ts",
       "default": "./fesm2022/ngx-kit-notify.mjs"
     },
-    "./shared": {
-      "types": "./types/ngx-kit-shared.d.ts",
-      "default": "./fesm2022/ngx-kit-shared.mjs"
-    },
     "./time-picker": {
       "types": "./types/ngx-kit-time-picker.d.ts",
       "default": "./fesm2022/ngx-kit-time-picker.mjs"
@@ -116,10 +116,6 @@
     "./virtual-scroll": {
       "types": "./types/ngx-kit-virtual-scroll.d.ts",
       "default": "./fesm2022/ngx-kit-virtual-scroll.mjs"
-    },
-    "./webflow": {
-      "types": "./types/ngx-kit-webflow.d.ts",
-      "default": "./fesm2022/ngx-kit-webflow.mjs"
     }
   },
   "type": "module"

package/time-picker/README.md

@@ -1,89 +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-angle-selector.d.ts

@@ -1,22 +1,20 @@
-import * as i0 from '@angular/core';
-import { OnInit, AfterViewInit, WritableSignal, EventEmitter, ElementRef, ChangeDetectorRef, OnDestroy, Renderer2, ViewContainerRef } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { OnInit, AfterViewInit, EventEmitter, ElementRef, ChangeDetectorRef, OnDestroy, Renderer2, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
-import { BrowserService, OverlayService } from 'ngx-kit/shared';
+import { BrowserService, OverlayService } from 'ngx-kit/core';
 
 declare class NgxAngleSelectorComponent implements OnInit, AfterViewInit, ControlValueAccessor {
     browserService: BrowserService;
-    theme: 'light' | 'dark';
-    set setTheme(val: 'light' | 'dark' | 'auto');
-    size: i0.InputSignal<number>;
+    size: _angular_core.InputSignal<number>;
     private minAngle;
     private maxAngle;
-    isDisabled: WritableSignal<boolean>;
+    isDisabled: _angular_core.WritableSignal<boolean>;
     change: EventEmitter<number>;
     private onChange;
     private onTouched;
     selectorContainer: ElementRef<HTMLDivElement>;
-    currentAngle: WritableSignal<number>;
-    isDragging: WritableSignal<boolean>;
+    currentAngle: _angular_core.WritableSignal<number>;
+    isDragging: _angular_core.WritableSignal<boolean>;
     selectorRect: DOMRect | null;
     centerX: number;
     centerY: number;
@@ -38,8 +36,8 @@ declare class NgxAngleSelectorComponent implements OnInit, AfterViewInit, Contro
     private drawTicks;
     private calculateAngle;
     private setupPointerEvents;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxAngleSelectorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxAngleSelectorComponent, "ngx-input-angle", never, { "setTheme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "change": "change"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxAngleSelectorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxAngleSelectorComponent, "ngx-input-angle", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "change": "change"; }, never, never, true, never>;
 }
 
 declare class NgxInputAngle implements OnDestroy, ControlValueAccessor, Validator {
@@ -47,9 +45,8 @@ declare class NgxInputAngle implements OnDestroy, ControlValueAccessor, Validato
     private renderer;
     private viewContainerRef;
     private overlayService;
-    theme: 'light' | 'dark' | 'auto';
-    size: i0.InputSignal<number>;
-    openOnCLick: i0.InputSignal<boolean>;
+    size: _angular_core.InputSignal<number>;
+    openOnCLick: _angular_core.InputSignal<boolean>;
     change: EventEmitter<number>;
     private value?;
     private pickerRef?;
@@ -73,8 +70,8 @@ declare class NgxInputAngle implements OnDestroy, ControlValueAccessor, Validato
     toggle(): void;
     private destroyAnglePicker;
     private emitChange;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxInputAngle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxInputAngle, "[ngxInputAngle]", ["ngxInputAngle"], { "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "openOnCLick": { "alias": "openOnCLick"; "required": false; "isSignal": true; }; }, { "change": "change"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxInputAngle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxInputAngle, "[ngxInputAngle]", ["ngxInputAngle"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "openOnCLick": { "alias": "openOnCLick"; "required": false; "isSignal": true; }; }, { "change": "change"; }, never, never, true, never>;
 }
 
 export { NgxAngleSelectorComponent, NgxInputAngle };