ngx-kit 6.3.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-drag-resize.d.ts

@@ -0,0 +1,368 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, EventEmitter, InjectionToken, OnInit, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
+
+interface IPosition {
+    x: number;
+    y: number;
+}
+
+/**
+ * Groups multiple drop lists so items can be dragged between them without
+ * needing an explicit `connectedTo` list on every single one.
+ * Lists register themselves automatically when `NgxDropListGroup` wraps them.
+ */
+declare class DropListGroupRef {
+    readonly lists: Set<DropListRef<any>>;
+    add(list: DropListRef<any>): void;
+    remove(list: DropListRef<any>): void;
+    has(list: DropListRef<any> | null | undefined): boolean;
+}
+
+declare class PlaceHolderRef {
+    tpl?: TemplateRef<unknown>;
+    dropList?: DropListRef;
+    element?: HTMLElement;
+    private _visible;
+    attach(container: HTMLElement, source: HTMLElement, reference?: Node | null): HTMLElement;
+    detach(): void;
+    get visible(): boolean;
+}
+
+/**
+ * DropListRef is intentionally generic, while the positional sorting strategy
+ * works on DragRef<any>. The public DropList/DragRef relationship is invariant
+ * because IDropEvent<T> contains T in a callback position. Keep the strongly
+ * typed Set here, and narrow only at the DOM-local bridge / strategy boundary.
+ */
+declare class DropListRef<T = any> {
+    data?: T;
+    el: HTMLElement;
+    disableSort: boolean;
+    connectedTo: HTMLElement[];
+    dropListGroup?: DropListGroupRef | null;
+    readonly _draggables: Set<DragRef<T>>;
+    readonly onDrop: EventEmitter<IDropEvent<T>>;
+    private strategy;
+    private active;
+    private previousIndex;
+    private placeholder?;
+    addItem(item: DragRef<T>): void;
+    removeItem(item: DragRef<T>): void;
+    isConnectedTo(other: DropListRef<any>): boolean;
+    createPlaceholder(drag: DragRef<T>): PlaceHolderRef;
+    enter(drag: DragRef<T>, x?: number, y?: number): void;
+    sortItem(drag: DragRef<T>, position: IPosition): number | null;
+    finishDrag(drag: DragRef<T>): void;
+    exit(_drag: DragRef<T>): void;
+    resetSortTransforms(): void;
+    getFinalIndex(): number;
+    getItemIndex(item: DragRef<T>): number;
+    private indexOf;
+    private reset;
+    private copyPlaceholderGeometry;
+    /**
+     * The sorting strategy only needs a read-only collection of draggable refs.
+     * Using DragRef<any> at this internal boundary avoids the invariant generic
+     * relationship between DragRef<T> and DragRef<unknown>.
+     */
+    private getStrategyItems;
+    private asStrategyDrag;
+    private publishDragItems;
+}
+
+type DragAxis = 'x' | 'y' | undefined;
+declare class DragRef<T = unknown> {
+    data?: T;
+    el: HTMLElement;
+    boundary?: HTMLElement;
+    lockAxis?: DragAxis;
+    dropList: DropListRef<T> | null;
+    dropListGroup?: DropListGroupRef | null;
+    placeholder?: PlaceHolderRef;
+    originDropList: DropListRef<T> | null;
+    originIndex: number;
+    readonly isDragging: i0.WritableSignal<boolean>;
+    readonly position: i0.WritableSignal<IPosition>;
+    private startPointer;
+    private startRect;
+    private lastPointer;
+    private previousTransform;
+    private previousZIndex;
+    private moveDx;
+    private moveDy;
+    private preview?;
+    private previewOffsetX;
+    private previewOffsetY;
+    private sourceVisibility;
+    private sourceDisplay;
+    private sourcePointerEvents;
+    init(): void;
+    withDropList(list: DropListRef<T> | null): this;
+    clearDropList(): void;
+    pointerDown(pointer: IPosition): void;
+    startDrag(pointer: IPosition): void;
+    dragMove(pointer: IPosition): void;
+    nudge(dx: number, dy: number): void;
+    endDrag(): void;
+    cancelDrag(): void;
+    get x(): number;
+    get y(): number;
+    get pointer(): IPosition;
+    get start(): DOMRect;
+    getPlaceholderElement(): HTMLElement | undefined;
+    private applyTransform;
+    private updatePreview;
+}
+
+interface IDropEvent<T = any> {
+    previousIndex: number;
+    currentIndex: number;
+    item: DragRef<T>;
+    container: DropListRef<T>;
+    previousContainer: DropListRef<T>;
+    isPointerOverContainer?: boolean;
+}
+
+/** Physical (viewport-space) resize directions — always in LTR screen coordinates. */
+type ResizeDirection = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+/**
+ * Logical (writing-direction aware) resize directions.
+ * `start`/`end` resolve to `w`/`e` depending on the host's computed `direction`,
+ * so a single template works unchanged in both LTR and RTL layouts.
+ */
+type LogicalResizeDirection = ResizeDirection | 'n-start' | 'n-end' | 's-start' | 's-end' | 'start' | 'end';
+interface IResizableOutput {
+    width: number;
+    height: number;
+    moveLeft: number;
+    moveTop: number;
+    left: number;
+    top: number;
+    direction: ResizeDirection;
+}
+
+declare class DragDropService {
+    readonly drags: i0.WritableSignal<readonly DragRef<unknown>[]>;
+    readonly dropLists: i0.WritableSignal<readonly DropListRef<any>[]>;
+    readonly activeDrag: i0.WritableSignal<DragRef<unknown> | null>;
+    registerDragItem(ref: DragRef<any>): void;
+    removeDragItem(ref: DragRef<any>): void;
+    registerDropList(ref: DropListRef): void;
+    removeDropList(ref: DropListRef<any>): void;
+    begin(ref: DragRef<any>): void;
+    end(ref: DragRef<any>): void;
+    cancelActive(): void;
+    findDropList(point: {
+        x: number;
+        y: number;
+    }, current?: DropListRef | null): DropListRef | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DragDropService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DragDropService>;
+}
+
+declare const NGX_DRAGGABLE: InjectionToken<NgxDraggable<unknown>>;
+declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy {
+    private readonly host;
+    private readonly renderer;
+    disabled: boolean;
+    /** Element whose rect constrains the drag. Now actually enforced. */
+    boundary?: HTMLElement;
+    dragRootElement: string;
+    /** CSS selector for a drag handle. When set, only pointerdowns inside it start a drag. */
+    dragHandle: string;
+    /** Restrict movement to a single axis. */
+    lockAxis: DragAxis;
+    /** Minimum pointer travel (px) before a drag starts, so clicks still register normally. */
+    dragThreshold: number;
+    /** Pixel step used when dragging via the keyboard (arrow keys, focus required). */
+    keyboardStep: number;
+    /** Auto-scroll the nearest scrollable ancestor while dragging near its edge. */
+    autoScroll: boolean;
+    set data(v: T);
+    readonly dragStart: EventEmitter<IPosition>;
+    readonly dragMove: EventEmitter<IPosition>;
+    readonly dragEnd: EventEmitter<IPosition>;
+    readonly _ref: DragRef<T>;
+    readonly dragging: i0.WritableSignal<boolean>;
+    private readonly doc;
+    private readonly service;
+    private readonly list;
+    private readonly group;
+    private readonly scroller;
+    private down;
+    private start;
+    private pointerId;
+    private removeDown?;
+    private removeMove?;
+    private removeUp?;
+    private removeKeydown?;
+    private removeEscape?;
+    constructor(host: ElementRef<HTMLElement>, renderer: Renderer2);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private pointerDown;
+    private pointerMove;
+    private pointerUp;
+    private cancel;
+    private finish;
+    /** Arrow-key movement for keyboard/assistive-tech users. Shift multiplies the step by 4. */
+    private keyDown;
+    private isOnHandle;
+    private isInteractive;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDraggable<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDraggable<any>, "[NgxDraggable],[ngxDraggable]", never, { "disabled": { "alias": "disabled"; "required": false; }; "boundary": { "alias": "boundary"; "required": false; }; "dragRootElement": { "alias": "dragRootElement"; "required": false; }; "dragHandle": { "alias": "dragHandle"; "required": false; }; "lockAxis": { "alias": "lockAxis"; "required": false; }; "dragThreshold": { "alias": "dragThreshold"; "required": false; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; }; "autoScroll": { "alias": "autoScroll"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "dragStart": "dragStart"; "dragMove": "dragMove"; "dragEnd": "dragEnd"; }, never, never, true, never>;
+}
+
+declare class NgxResizable {
+    private readonly el;
+    disabled: boolean;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    directions: LogicalResizeDirection[];
+    grid?: number | {
+        x: number;
+        y: number;
+    };
+    /** Element whose rect constrains the resize. Previously accepted nowhere on this directive. */
+    boundary?: HTMLElement;
+    /** Pixel step used when resizing via the keyboard (arrow keys, focus required). */
+    keyboardStep: number;
+    readonly resizeStart: EventEmitter<IResizableOutput>;
+    readonly resizeMove: EventEmitter<IResizableOutput>;
+    readonly resizeEnd: EventEmitter<IResizableOutput>;
+    readonly resizing: i0.WritableSignal<boolean>;
+    private direction;
+    private start;
+    private pointer;
+    private beforeTransition;
+    private beforeWidth;
+    private beforeHeight;
+    private beforeTransform;
+    private pointerId;
+    constructor(el: ElementRef<HTMLElement>);
+    onPointerDown(e: PointerEvent): void;
+    onPointerMove(e: PointerEvent): void;
+    onPointerUp(e: PointerEvent): void;
+    onDocumentKeyDown(e: KeyboardEvent): void;
+    onHandleKeyDown(e: KeyboardEvent): void;
+    private calculate;
+    private apply;
+    private clampGrid;
+    private finish;
+    private resolvedDirections;
+    private hitDirection;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxResizable, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxResizable, "[NgxResizable],[ngxResizable]", never, { "disabled": { "alias": "disabled"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "directions": { "alias": "directions"; "required": false; }; "grid": { "alias": "grid"; "required": false; }; "boundary": { "alias": "boundary"; "required": false; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; }; }, { "resizeStart": "resizeStart"; "resizeMove": "resizeMove"; "resizeEnd": "resizeEnd"; }, never, never, true, never>;
+}
+
+declare const NGX_DROPLIST: InjectionToken<NgxDropList<any>>;
+declare class NgxDropList<T = any> implements OnInit, OnDestroy {
+    private readonly el;
+    readonly _ref: DropListRef<T>;
+    set data(value: T);
+    set connectedTo(value: HTMLElement[] | null | undefined);
+    set disableSort(value: boolean);
+    readonly drop: EventEmitter<IDropEvent<T>>;
+    private readonly service;
+    private readonly group;
+    constructor(el: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDropList<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDropList<any>, "[NgxDropList],[ngxDropList]", never, { "data": { "alias": "data"; "required": false; }; "connectedTo": { "alias": "connectedTo"; "required": false; }; "disableSort": { "alias": "disableSort"; "required": false; }; }, { "drop": "drop"; }, never, never, true, never>;
+}
+
+declare const NGX_DROPLIST_GROUP: InjectionToken<NgxDropListGroup>;
+/** Wrap several `ngxDropList`s to let items move freely between them. */
+declare class NgxDropListGroup implements OnDestroy {
+    readonly _ref: DropListGroupRef;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDropListGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDropListGroup, "[NgxDropListGroup],[ngxDropListGroup]", never, {}, {}, never, never, true, never>;
+}
+
+declare const NGX_PLACEHOLDER: InjectionToken<PlaceHolderRef>;
+declare class NgxPlaceholder {
+    readonly tpl: TemplateRef<unknown>;
+    readonly _ref: PlaceHolderRef;
+    private readonly list;
+    constructor(tpl: TemplateRef<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxPlaceholder, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxPlaceholder, "[NgxPlaceholder],[ngxPlaceholder]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * True when `element` sits inside a right-to-left context.
+ *
+ * Reads the *computed* `direction` style instead of `element.dir`, because
+ * `direction` is inherited and is almost never set on the resizable element
+ * itself - it's usually set on `<html>`, `<body>`, or some ancestor wrapper.
+ */
+declare function isRtl(element: HTMLElement): boolean;
+/**
+ * Resolves a logical direction ('start' | 'end' | 'n-start' | 'n-end' | 's-start' | 's-end')
+ * to a physical, viewport-space direction ('n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw')
+ * based on `rtl`.
+ *
+ * Physical directions pass through untouched, so it's always safe to call this
+ * even when `dir` might already be physical (e.g. resolving a direction that was
+ * already resolved once before).
+ */
+declare function resolveLogicalDirection(dir: string, rtl: boolean): ResizeDirection;
+
+/** Clamps a proposed vertical delta so the element's rect stays inside the boundary rect. */
+declare function checkBoundY(selfRect: DOMRect, boundaryRect: DOMRect | undefined, offsetY: number): number;
+/** Clamps a proposed horizontal delta so the element's rect stays inside the boundary rect. */
+declare function checkBoundX(selfRect: DOMRect, boundaryRect: DOMRect | undefined, offsetX: number): number;
+/**
+ * Clamps a resize result (width/height/left/top, all relative CSS px deltas from the
+ * element's start position) so the element never grows/moves outside `boundaryRect`.
+ * `startRect` is the element's `getBoundingClientRect()` captured at resize-start.
+ */
+declare function clampResizeWithinBoundary(boundaryRect: DOMRect | undefined, startRect: DOMRect, width: number, height: number, left: number, top: number): {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+};
+/** Current page zoom level (1 = 100%). Falls back to devicePixelRatio pre visualViewport. */
+declare function getPageZoom(): number;
+/** Adjusts a raw pointer-derived value for the current page zoom level. */
+declare function adjustForZoom(value: number): number;
+
+/**
+ * Auto-scrolls the nearest scrollable ancestor (or window) while the pointer
+ * is dragged near the edge of the scrollable viewport. Direction-agnostic —
+ * works the same in RTL and LTR since it operates on physical scroll deltas.
+ */
+declare class AutoScroller {
+    private raf;
+    private container;
+    private speed;
+    private readonly edge;
+    private readonly maxSpeed;
+    constructor(edge?: number, maxSpeed?: number);
+    start(fromEl: HTMLElement): void;
+    /** Call on every pointermove with the current client coordinates. */
+    update(clientX: number, clientY: number): void;
+    stop(): void;
+    private tick;
+}
+
+declare function moveItemInArray<T>(array: T[], from: number, to: number): void;
+declare function transferArrayItem<T>(src: T[], dst: T[], from: number, to: number): void;
+/**
+ * Copies an item from one array to another, leaving it in its
+ * original position in current array.
+ * @param currentArray Array from which to copy the item.
+ * @param targetArray Array into which is copy the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ *
+ */
+declare function copyArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
+
+export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, getPageZoom, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
+export type { DragAxis, IDropEvent, IPosition, IResizableOutput, LogicalResizeDirection, ResizeDirection };