@ngstarter-ui/components 21.0.38 → 21.0.40

package/types/ngstarter-ui-components-form-builder.d.ts

@@ -0,0 +1,317 @@
+import * as _angular_forms from '@angular/forms';
+import { ValidatorFn, FormControl, FormGroup } from '@angular/forms';
+import * as _angular_core from '@angular/core';
+import { Type, InjectionToken, EnvironmentProviders, TemplateRef } from '@angular/core';
+import { CdkDrag, CdkDragDrop } from '@angular/cdk/drag-drop';
+import { TreeNodeDropPosition, Tree, TreeNodeDrop } from '@ngstarter-ui/components/tree';
+
+type FormBuilderFieldWidth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+interface FormBuilderOption {
+    label: string;
+    value: any;
+}
+interface FormBuilderValidationRule {
+    type: 'required' | 'email' | 'minLength' | 'maxLength' | 'min' | 'max' | string;
+    value?: any;
+    message?: string;
+}
+interface FormBuilderVisibility {
+    form?: boolean;
+    email?: boolean;
+    pdf?: boolean;
+    condition?: string;
+}
+interface FormBuilderField {
+    id: string;
+    name: string;
+    type: string;
+    label: string;
+    placeholder?: string;
+    hint?: string;
+    defaultValue?: any;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    width?: FormBuilderFieldWidth;
+    options?: FormBuilderOption[];
+    validation?: FormBuilderValidationRule[];
+    visibility?: FormBuilderVisibility;
+    settings?: Record<string, any>;
+    children?: FormBuilderField[];
+}
+interface FormBuilderSection {
+    id: string;
+    title: string;
+    description?: string;
+    collapsed?: boolean;
+    fields: FormBuilderField[];
+}
+interface FormBuilderLayoutItem {
+    kind: 'field' | 'section';
+    id: string;
+}
+interface FormBuilderSchema {
+    title?: string;
+    fields?: FormBuilderField[];
+    layout?: FormBuilderLayoutItem[];
+    sections: FormBuilderSection[];
+}
+interface FormBuilderFieldRenderContext {
+    field: FormBuilderField;
+    control: FormControl;
+    readonly: boolean;
+}
+interface FormBuilderSettingsContext {
+    field: FormBuilderField;
+    schema: FormBuilderSchema;
+    update: (changes: Partial<FormBuilderField>) => void;
+}
+type FormBuilderComponentImporter<T = any> = () => Promise<Type<T>>;
+interface FormBuilderFieldDefinition {
+    type: string;
+    label: string;
+    group?: string;
+    icon?: string;
+    description?: string;
+    defaults?: Partial<FormBuilderField>;
+    renderer?: FormBuilderComponentImporter;
+    settings?: FormBuilderComponentImporter;
+    validators?: (field: FormBuilderField) => ValidatorFn[];
+}
+interface FormBuilderSettingsDefinition {
+    fieldType: string;
+    component: FormBuilderComponentImporter;
+}
+interface FormBuilderFieldChange {
+    field: FormBuilderField;
+    section?: FormBuilderSection;
+}
+
+declare const FORM_BUILDER_FIELDS: InjectionToken<FormBuilderFieldDefinition[]>;
+declare const FORM_BUILDER_SETTINGS: InjectionToken<FormBuilderSettingsDefinition[]>;
+declare function formBuilderField(definition: FormBuilderFieldDefinition): FormBuilderFieldDefinition;
+declare function formBuilderSettings(definition: FormBuilderSettingsDefinition): FormBuilderSettingsDefinition;
+declare function provideFormBuilder(config?: {
+    fields?: FormBuilderFieldDefinition[];
+    settings?: FormBuilderSettingsDefinition[];
+}): EnvironmentProviders;
+declare const DEFAULT_FORM_BUILDER_FIELDS: FormBuilderFieldDefinition[];
+declare function validatorsFromRules(rules?: FormBuilderValidationRule[], field?: FormBuilderField): _angular_forms.ValidatorFn[];
+
+interface FormBuilderPaletteGroup {
+    name: string;
+    fields: FormBuilderFieldDefinition[];
+}
+interface FormBuilderFieldTreeNode {
+    id: string;
+    label: string;
+    name?: string;
+    type: string;
+    icon: string;
+    kind: 'section' | 'field';
+    field?: FormBuilderField;
+    section?: FormBuilderSection;
+    children?: FormBuilderFieldTreeNode[];
+}
+interface FormBuilderCanvasItem extends FormBuilderLayoutItem {
+    field?: FormBuilderField;
+    section?: FormBuilderSection;
+}
+type FormBuilderNativeDragItem = {
+    kind: 'field';
+    definition: FormBuilderFieldDefinition;
+} | {
+    kind: 'section';
+};
+declare class FormBuilder {
+    private readonly dialog;
+    private readonly confirmManager;
+    private readonly elementRef;
+    private readonly providedFields;
+    private readonly providedSettings;
+    private readonly previewControls;
+    private readonly actualFieldsTree;
+    private suppressPaletteClick;
+    readonly schema: _angular_core.ModelSignal<FormBuilderSchema>;
+    readonly paletteTitle: _angular_core.InputSignal<string>;
+    readonly inspectorTitle: _angular_core.InputSignal<string>;
+    readonly fieldSelected: _angular_core.OutputEmitterRef<FormBuilderFieldChange>;
+    readonly fieldAdded: _angular_core.OutputEmitterRef<FormBuilderFieldChange>;
+    readonly fieldRemoved: _angular_core.OutputEmitterRef<FormBuilderFieldChange>;
+    protected readonly search: _angular_core.WritableSignal<string>;
+    protected readonly selectedFieldId: _angular_core.WritableSignal<string | null>;
+    protected readonly nativeDragItem: _angular_core.WritableSignal<FormBuilderNativeDragItem | null>;
+    protected readonly nativeDragFieldDefinition: _angular_core.Signal<FormBuilderFieldDefinition | null>;
+    protected readonly nativeDragSection: _angular_core.Signal<boolean>;
+    protected readonly nativeDropTarget: _angular_core.WritableSignal<{
+        containerId: string;
+        index: number;
+    } | null>;
+    protected readonly dragCollapsedSectionIds: _angular_core.WritableSignal<ReadonlySet<string>>;
+    protected readonly expandedFieldTreeNodeIds: _angular_core.WritableSignal<ReadonlySet<string>>;
+    protected readonly definitions: _angular_core.Signal<FormBuilderFieldDefinition[]>;
+    protected readonly settingsDefinitions: _angular_core.Signal<FormBuilderSettingsDefinition[]>;
+    protected readonly fieldContainerDropListIds: _angular_core.Signal<string[]>;
+    protected readonly canvasItems: _angular_core.Signal<FormBuilderCanvasItem[]>;
+    protected readonly layoutDefinitions: _angular_core.Signal<FormBuilderFieldDefinition[]>;
+    protected readonly paletteGroups: _angular_core.Signal<FormBuilderPaletteGroup[]>;
+    protected readonly selectedField: _angular_core.Signal<FormBuilderField | null>;
+    protected readonly selectedSection: _angular_core.Signal<FormBuilderSection | null>;
+    protected readonly fieldTree: _angular_core.Signal<FormBuilderFieldTreeNode[]>;
+    protected readonly fieldTreeChildrenAccessor: (node: FormBuilderFieldTreeNode) => FormBuilderFieldTreeNode[];
+    protected readonly hasFieldTreeChildren: (_: number, node: FormBuilderFieldTreeNode) => boolean;
+    protected readonly trackFieldTreeNode: (_: number, node: FormBuilderFieldTreeNode) => string;
+    protected readonly fieldTreeDraggablePredicate: (_node: FormBuilderFieldTreeNode) => boolean;
+    protected readonly fieldTreeDropPredicate: (source: FormBuilderFieldTreeNode, target: FormBuilderFieldTreeNode, position: TreeNodeDropPosition) => boolean;
+    protected readonly updateSelectedField: (changes: Partial<FormBuilderField>) => void;
+    protected readonly fieldDropListEnterPredicate: (drag: CdkDrag<unknown>) => boolean;
+    protected paletteDragStarted(event: DragEvent, definition: FormBuilderFieldDefinition): void;
+    protected sectionPaletteDragStarted(event: DragEvent): void;
+    protected paletteDragEnded(): void;
+    protected paletteClicked(definition: FormBuilderFieldDefinition): void;
+    protected nativeCanvasDragOver(event: DragEvent): void;
+    protected nativeFieldDragOver(event: DragEvent, containerId: string): void;
+    protected nativeSectionDragOver(event: DragEvent, section: FormBuilderSection): void;
+    protected nativeSectionDrop(event: DragEvent, section: FormBuilderSection): void;
+    protected nativeContainerFieldDragOver(event: DragEvent, field: FormBuilderField): void;
+    protected nativeContainerFieldDragLeave(event: DragEvent, field: FormBuilderField): void;
+    protected nativeContainerFieldDrop(event: DragEvent, field: FormBuilderField): void;
+    protected nativeDragLeave(event: DragEvent, containerId: string): void;
+    protected nativeFieldDrop(event: DragEvent, containerId: string): void;
+    protected isNativeDropTarget(containerId: string, index: number): boolean;
+    protected addField(definition: FormBuilderFieldDefinition, sectionId?: string): void;
+    protected addSection(): void;
+    protected openPreview(template: TemplateRef<unknown>): void;
+    protected removeSection(section: FormBuilderSection): void;
+    protected updateSection(section: FormBuilderSection, changes: Partial<FormBuilderSection>): void;
+    protected sectionDragStarted(section: FormBuilderSection): void;
+    protected sectionDragEnded(section: FormBuilderSection): void;
+    protected isSectionCollapsed(section: FormBuilderSection): boolean;
+    protected dropField(event: CdkDragDrop<FormBuilderField[], any, any>): void;
+    protected dropCanvasItem(event: CdkDragDrop<FormBuilderCanvasItem[], any, any>): void;
+    protected selectField(field: FormBuilderField, section?: FormBuilderSection | null): void;
+    protected selectFieldTreeNode(node: FormBuilderFieldTreeNode): void;
+    protected toggleFieldTreeNode(tree: Tree<FormBuilderFieldTreeNode>, node: FormBuilderFieldTreeNode, event: MouseEvent): void;
+    protected isFieldTreeNodeExpanded(tree: Tree<FormBuilderFieldTreeNode>, node: FormBuilderFieldTreeNode): boolean;
+    protected fieldTreePlaceholderIcon(source: FormBuilderFieldTreeNode): string;
+    protected fieldTreeNodeDropped(event: TreeNodeDrop<FormBuilderFieldTreeNode>): void;
+    protected confirmRemoveField(field: FormBuilderField): void;
+    private removeField;
+    protected sectionDropListId(section: FormBuilderSection): string;
+    protected fieldDropListId(field: FormBuilderField): string;
+    protected rootDropListId(): string;
+    protected previewControl(field: FormBuilderField): FormControl;
+    protected patchSelectedField(changes: Partial<FormBuilderField>): void;
+    protected isContainerField(field: FormBuilderField): boolean;
+    protected fieldIcon(field: FormBuilderField): string;
+    protected definitionWidth(definition: FormBuilderFieldDefinition): FormBuilderFieldWidth;
+    private matchesPaletteQuery;
+    private nativeDragOver;
+    private nativeDragOverAtIndex;
+    private insertNativeField;
+    private insertNativeSection;
+    private resolveNativeDragItem;
+    private resolveNativeDropIndex;
+    private setPaletteDragImage;
+    private createField;
+    private defaultWidth;
+    private resolveCanvasItems;
+    private normalizedLayout;
+    private collectFieldContainerDropListIds;
+    private collectFieldDropListIds;
+    private resolveCanvasDragItem;
+    private detachFieldFromLocation;
+    private insertFieldIntoTreeSection;
+    private insertFieldAroundTreeSection;
+    private resolveTreeFieldInsertTarget;
+    private insertRootFieldIntoLayout;
+    private clearSectionDragCollapse;
+    private resetFieldTreeAfterRejectedDrop;
+    private canDropFieldTreeNode;
+    private dropFieldTreeSection;
+    private isRootFieldTreeNode;
+    private restoreFieldTreeExpansion;
+    private flattenFieldTree;
+    private scrollCanvasFieldIntoView;
+    private findCanvasFieldElement;
+    private scrollElementFullyIntoView;
+    private afterNextPaint;
+    private createFieldTreeNode;
+    private findContainerLocation;
+    private findFieldContainerLocation;
+    private findFieldLocation;
+    private deletePreviewControls;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormBuilder, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilder, "ngs-form-builder", ["ngsFormBuilder"], { "schema": { "alias": "schema"; "required": false; "isSignal": true; }; "paletteTitle": { "alias": "paletteTitle"; "required": false; "isSignal": true; }; "inspectorTitle": { "alias": "inspectorTitle"; "required": false; "isSignal": true; }; }, { "schema": "schemaChange"; "fieldSelected": "fieldSelected"; "fieldAdded": "fieldAdded"; "fieldRemoved": "fieldRemoved"; }, never, never, true, never>;
+}
+declare function createDefaultFormBuilderSchema(): FormBuilderSchema;
+
+interface FormBuilderRendererCanvasItem extends FormBuilderLayoutItem {
+    field?: FormBuilderField;
+    section?: FormBuilderSection;
+}
+declare class FormBuilderRenderer {
+    private readonly providedFields;
+    readonly schema: _angular_core.InputSignal<FormBuilderSchema>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly showSubmit: _angular_core.InputSignal<boolean>;
+    readonly submitLabel: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.ModelSignal<Record<string, any>>;
+    readonly formSubmit: _angular_core.OutputEmitterRef<Record<string, any>>;
+    readonly formReady: _angular_core.OutputEmitterRef<FormGroup<any>>;
+    protected readonly definitions: _angular_core.Signal<FormBuilderFieldDefinition[]>;
+    protected readonly visibleCanvasItems: _angular_core.Signal<FormBuilderRendererCanvasItem[]>;
+    protected readonly formGroup: _angular_core.Signal<FormGroup<any>>;
+    constructor();
+    protected getControl(field: FormBuilderField): FormControl;
+    protected isContainerField(field: FormBuilderField): boolean;
+    protected visibleChildren(field: FormBuilderField): FormBuilderField[];
+    protected submit(): void;
+    private createFormGroup;
+    private visibleFields;
+    private resolveCanvasItems;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormBuilderRenderer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilderRenderer, "ngs-form-builder-renderer", ["ngsFormBuilderRenderer"], { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "showSubmit": { "alias": "showSubmit"; "required": false; "isSignal": true; }; "submitLabel": { "alias": "submitLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "formSubmit": "formSubmit"; "formReady": "formReady"; }, never, never, true, never>;
+}
+
+declare class FormBuilderFieldHost {
+    readonly field: _angular_core.InputSignal<FormBuilderField>;
+    readonly control: _angular_core.InputSignal<FormControl<any>>;
+    readonly definitions: _angular_core.InputSignal<FormBuilderFieldDefinition[]>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly editableCanvas: _angular_core.InputSignal<boolean>;
+    protected readonly customLoaded: _angular_core.WritableSignal<boolean>;
+    protected readonly textInputType: _angular_core.Signal<"email" | "text" | "number">;
+    private readonly anchor;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormBuilderFieldHost, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilderFieldHost, "ngs-form-builder-field-host", ["ngsFormBuilderFieldHost"], { "field": { "alias": "field"; "required": true; "isSignal": true; }; "control": { "alias": "control"; "required": true; "isSignal": true; }; "definitions": { "alias": "definitions"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "editableCanvas": { "alias": "editableCanvas"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class FormBuilderSettingsHost {
+    readonly field: _angular_core.InputSignal<FormBuilderField>;
+    readonly schema: _angular_core.InputSignal<FormBuilderSchema>;
+    readonly definitions: _angular_core.InputSignal<FormBuilderFieldDefinition[]>;
+    readonly settingsDefinitions: _angular_core.InputSignal<FormBuilderSettingsDefinition[]>;
+    readonly update: _angular_core.InputSignal<(changes: Partial<FormBuilderField>) => void>;
+    protected readonly customLoaded: _angular_core.WritableSignal<boolean>;
+    private readonly anchor;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormBuilderSettingsHost, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilderSettingsHost, "ngs-form-builder-settings-host", ["ngsFormBuilderSettingsHost"], { "field": { "alias": "field"; "required": true; "isSignal": true; }; "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "definitions": { "alias": "definitions"; "required": false; "isSignal": true; }; "settingsDefinitions": { "alias": "settingsDefinitions"; "required": false; "isSignal": true; }; "update": { "alias": "update"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class BasicFormBuilderFieldSettings {
+    readonly field: _angular_core.InputSignal<FormBuilderField>;
+    readonly update: _angular_core.InputSignal<(changes: Partial<FormBuilderField>) => void>;
+    protected readonly fieldWidthOptions: FormBuilderFieldWidth[];
+    protected readonly hasOptions: _angular_core.Signal<boolean>;
+    protected readonly optionsText: _angular_core.Signal<string>;
+    protected patch(changes: Partial<FormBuilderField>): void;
+    protected patchOptions(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BasicFormBuilderFieldSettings, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BasicFormBuilderFieldSettings, "ngs-basic-form-builder-field-settings", ["ngsBasicFormBuilderFieldSettings"], { "field": { "alias": "field"; "required": true; "isSignal": true; }; "update": { "alias": "update"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { BasicFormBuilderFieldSettings, DEFAULT_FORM_BUILDER_FIELDS, FORM_BUILDER_FIELDS, FORM_BUILDER_SETTINGS, FormBuilder, FormBuilderFieldHost, FormBuilderRenderer, FormBuilderSettingsHost, FormBuilderRenderer as FormRenderer, createDefaultFormBuilderSchema, formBuilderField, formBuilderSettings, provideFormBuilder, validatorsFromRules };
+export type { FormBuilderComponentImporter, FormBuilderField, FormBuilderFieldChange, FormBuilderFieldDefinition, FormBuilderFieldRenderContext, FormBuilderFieldWidth, FormBuilderLayoutItem, FormBuilderOption, FormBuilderSchema, FormBuilderSection, FormBuilderSettingsContext, FormBuilderSettingsDefinition, FormBuilderValidationRule, FormBuilderVisibility };

package/types/ngstarter-ui-components-sidebar.d.ts

@@ -86,9 +86,9 @@ declare class SidebarFooter {
     static ɵcmp: i0.ɵɵComponentDeclaration<SidebarFooter, "ngs-sidebar-footer", ["ngsSidebarFooter"], { "block": { "alias": "block"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class SidebarNavHeading {
-    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarNavHeading, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarNavHeading, "ngs-sidebar-nav-heading", ["ngsSidebarNavHeading"], {}, {}, never, ["*"], true, never>;
+declare class SidebarHeading {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarHeading, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarHeading, "ngs-sidebar-heading", ["ngsSidebarHeading"], {}, {}, never, ["*"], true, never>;
 }
 
 declare class SidebarNavGroupToggle {
@@ -120,9 +120,14 @@ declare class SidebarNavGroupMenu implements AfterContentInit, OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<SidebarNavGroupMenu, "ngs-sidebar-nav-group-menu", ["ngsSidebarNavGroupMenu"], { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "itemTypeProperty": { "alias": "itemTypeProperty"; "required": false; "isSignal": true; }; }, {}, ["_items", "_defs"], ["*"], true, never>;
 }
 
+declare class SidebarSpacer {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarSpacer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarSpacer, "ngs-sidebar-spacer", ["ngsSidebarSpacer"], {}, {}, never, never, true, never>;
+}
+
 declare class SidebarDivider {
     static ɵfac: i0.ɵɵFactoryDeclaration<SidebarDivider, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarDivider, "ngs-sidebar-divider", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarDivider, "ngs-sidebar-divider", ["ngsSidebarDivider"], {}, {}, never, never, true, never>;
 }
 
 declare class SidebarNavItemIconDirective {
@@ -145,4 +150,4 @@ declare class SidebarNavGroupToggleIconDirective {
 declare const SIDEBAR_NAVIGATION: InjectionToken<unknown>;
 declare const SIDEBAR_NAVIGATION_GROUP: InjectionToken<unknown>;
 
-export { SIDEBAR_NAVIGATION, SIDEBAR_NAVIGATION_GROUP, Sidebar, SidebarBody, SidebarDivider, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavGroupMenu, SidebarNavGroupToggle, SidebarNavGroupToggleIconDirective, SidebarNavHeading, SidebarNavItem, SidebarNavItemBadgeDirective, SidebarNavItemDefDirective, SidebarNavItemIconDirective, SidebarNavItemInterface };
+export { SIDEBAR_NAVIGATION, SIDEBAR_NAVIGATION_GROUP, Sidebar, SidebarBody, SidebarDivider, SidebarFooter, SidebarHeader, SidebarHeading, SidebarNav, SidebarNavGroup, SidebarNavGroupMenu, SidebarNavGroupToggle, SidebarNavGroupToggleIconDirective, SidebarNavItem, SidebarNavItemBadgeDirective, SidebarNavItemDefDirective, SidebarNavItemIconDirective, SidebarNavItemInterface, SidebarSpacer };

package/types/ngstarter-ui-components-tree.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ViewContainerRef, OnInit, OnDestroy } from '@angular/core';
+import { ViewContainerRef, TemplateRef, OnInit, OnDestroy } from '@angular/core';
 import { DataSource } from '@angular/cdk/collections';
 import { CdkTree, CdkTreeNodeOutlet, CdkNestedTreeNode, CdkTreeNode, CdkTreeNodePadding, CdkTreeNodeToggle, CdkTreeNodeDef } from '@angular/cdk/tree';
 import { Observable } from 'rxjs';
@@ -18,15 +18,39 @@ interface TreeNodeDrop<T> {
     targetValue: unknown;
     dataSource: T[];
 }
+interface TreeNodeDropContext<T> {
+    source: T;
+    target: T;
+    position: TreeNodeDropPosition;
+}
+interface TreeNodeDragPlaceholderContext<T> {
+    $implicit: T;
+    source: T;
+    target?: T;
+    position?: TreeNodeDropPosition;
+}
 type TreeNodeDropPosition = 'before' | 'inside' | 'after';
+type TreeNodeDragPredicate<T> = (node: T) => boolean;
+type TreeNodeDropPredicate<T> = (source: T, target: T, position: TreeNodeDropPosition) => boolean;
+type TreeDragPreview = 'node' | 'none';
 type TreeFilterMode = 'includeAncestors' | 'includeDescendants';
 type TreeFilterPredicate<T> = (node: T, filterValue: string) => boolean;
+declare class TreeDragPlaceholder<T> {
+    readonly templateRef: TemplateRef<TreeNodeDragPlaceholderContext<T>>;
+    static ngTemplateContextGuard<T>(_directive: TreeDragPlaceholder<T>, _context: unknown): _context is TreeNodeDragPlaceholderContext<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeDragPlaceholder<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TreeDragPlaceholder<any>, "ng-template[ngsTreeDragPlaceholder]", never, {}, {}, never, never, true, never>;
+}
 declare class Tree<T, K = T> extends CdkTree<T, K> {
     get dataSource(): DataSource<T> | Observable<T[]> | T[];
     set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);
     checkable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     draggable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    draggablePredicate: _angular_core.InputSignal<TreeNodeDragPredicate<T>>;
+    dropPredicate: _angular_core.InputSignal<TreeNodeDropPredicate<T>>;
+    reorderOnDrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    dragPreview: _angular_core.InputSignal<TreeDragPreview>;
     childrenKey: _angular_core.InputSignal<string>;
     filterValue: _angular_core.InputSignalWithTransform<string, unknown>;
     filterPredicate: _angular_core.InputSignal<TreeFilterPredicate<T>>;
@@ -38,6 +62,7 @@ declare class Tree<T, K = T> extends CdkTree<T, K> {
     readonly _selectedKey: _angular_core.WritableSignal<unknown>;
     readonly _dropTargetKey: _angular_core.WritableSignal<unknown>;
     readonly _dropTargetPosition: _angular_core.WritableSignal<TreeNodeDropPosition | undefined>;
+    readonly _draggedNodeKey: _angular_core.WritableSignal<unknown>;
     private _checkedKeys;
     private _nodeValueByDataKey;
     private _disabledDataKeys;
@@ -45,6 +70,7 @@ declare class Tree<T, K = T> extends CdkTree<T, K> {
     private _draggedNode?;
     private _sourceDataSource?;
     private _filteredNodeOriginals;
+    private _dragPlaceholder?;
     _nodeOutlet: TreeNodeOutlet;
     constructor();
     _toggleNodeChecked(node: T, checked: boolean): void;
@@ -55,11 +81,15 @@ declare class Tree<T, K = T> extends CdkTree<T, K> {
     _canDragNode(node: T): boolean;
     _isNodeDropTarget(node: T): boolean;
     _isNodeDropTargetPosition(node: T, position: TreeNodeDropPosition): boolean;
+    _isNodeDraggingSource(node: T): boolean;
     _startNodeDrag(node: T, event: DragEvent): void;
     _dragNodeOver(node: T, event: DragEvent): void;
     _dragNodeLeave(node: T, event: DragEvent): void;
     _dropNodeInto(node: T, event: DragEvent): void;
     _endNodeDrag(): void;
+    _getDragPreview(): TreeDragPreview;
+    _hasDragPlaceholder(): boolean;
+    _setDragPlaceholderImage(node: T, event: DragEvent, host: HTMLElement): boolean;
     _registerNodeValue(node: T, value: unknown): void;
     _unregisterNodeValueByDataKey(key: unknown): void;
     _registerNodeDisabled(node: T, disabled: boolean): void;
@@ -95,7 +125,7 @@ declare class Tree<T, K = T> extends CdkTree<T, K> {
     private _getTreeNodeKey;
     private _getOriginalFilterNode;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tree<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tree<any, any>, "ngs-tree", ["ngsTree"], { "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "filterValue": { "alias": "filterValue"; "required": false; "isSignal": true; }; "filterPredicate": { "alias": "filterPredicate"; "required": false; "isSignal": true; }; "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; "selectedChange": "selectedChange"; "nodeDrop": "nodeDrop"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tree<any, any>, "ngs-tree", ["ngsTree"], { "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "draggablePredicate": { "alias": "draggablePredicate"; "required": false; "isSignal": true; }; "dropPredicate": { "alias": "dropPredicate"; "required": false; "isSignal": true; }; "reorderOnDrop": { "alias": "reorderOnDrop"; "required": false; "isSignal": true; }; "dragPreview": { "alias": "dragPreview"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "filterValue": { "alias": "filterValue"; "required": false; "isSignal": true; }; "filterPredicate": { "alias": "filterPredicate"; "required": false; "isSignal": true; }; "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; "selectedChange": "selectedChange"; "nodeDrop": "nodeDrop"; }, ["_dragPlaceholder"], never, true, never>;
 }
 
 declare class TreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit, OnDestroy {
@@ -121,6 +151,7 @@ declare class TreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit, On
     _isDraggable(): boolean;
     _isDropTarget(): boolean;
     _isDropTargetPosition(position: 'before' | 'inside' | 'after'): boolean;
+    _isDraggingSource(): boolean;
     _getDraggableAttribute(): true | null;
     _getAriaGrabbed(): boolean | null;
     _handleDragStart(event: DragEvent): void;
@@ -128,6 +159,7 @@ declare class TreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit, On
     _handleDragLeave(event: DragEvent): void;
     _handleDrop(event: DragEvent): void;
     _handleDragEnd(): void;
+    private _setDragImage;
     private _selectNodeFromEvent;
     private _isTreeControlClick;
     private _syncNodeState;
@@ -161,6 +193,7 @@ declare class NestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> implement
     _isDraggable(): boolean;
     _isDropTarget(): boolean;
     _isDropTargetPosition(position: 'before' | 'inside' | 'after'): boolean;
+    _isDraggingSource(): boolean;
     _getDraggableAttribute(): true | null;
     _getAriaGrabbed(): boolean | null;
     _handleDragStart(event: DragEvent): void;
@@ -168,6 +201,7 @@ declare class NestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> implement
     _handleDragLeave(event: DragEvent): void;
     _handleDrop(event: DragEvent): void;
     _handleDragEnd(): void;
+    private _setDragImage;
     private _selectNodeFromEvent;
     private _isTreeControlClick;
     private _syncNodeState;
@@ -199,5 +233,5 @@ declare class TreeNodeDef<T> extends CdkTreeNodeDef<T> {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TreeNodeDef<any>, "[ngsTreeNodeDef]", never, { "when": { "alias": "ngsTreeNodeDefWhen"; "required": false; }; "data": { "alias": "ngsTreeNode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { NestedTreeNode, Tree, TreeNode, TreeNodeDef, TreeNodeOutlet, TreeNodePadding, TreeNodeToggle };
-export type { TreeFilterMode, TreeFilterPredicate, TreeNodeDrop, TreeNodeDropPosition };
+export { NestedTreeNode, Tree, TreeDragPlaceholder, TreeNode, TreeNodeDef, TreeNodeOutlet, TreeNodePadding, TreeNodeToggle };
+export type { TreeDragPreview, TreeFilterMode, TreeFilterPredicate, TreeNodeDragPlaceholderContext, TreeNodeDragPredicate, TreeNodeDrop, TreeNodeDropContext, TreeNodeDropPosition, TreeNodeDropPredicate };