@ngstarter-ui/components 21.0.40 → 21.0.41

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

@@ -2,10 +2,11 @@ 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';
+import * as _ngstarter_ui_components_form_builder from '@ngstarter-ui/components/form-builder';
 
 type FormBuilderFieldWidth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type FormBuilderItemKind = 'field' | 'layout' | 'static';
 interface FormBuilderOption {
     label: string;
     value: any;
@@ -25,6 +26,7 @@ interface FormBuilderField {
     id: string;
     name: string;
     type: string;
+    kind?: FormBuilderItemKind;
     label: string;
     placeholder?: string;
     hint?: string;
@@ -67,19 +69,43 @@ interface FormBuilderSettingsContext {
     update: (changes: Partial<FormBuilderField>) => void;
 }
 type FormBuilderComponentImporter<T = any> = () => Promise<Type<T>>;
-interface FormBuilderFieldDefinition {
+interface FormBuilderFieldSettingsContext {
+    item: FormBuilderField;
+    field: FormBuilderField;
+    schema: FormBuilderSchema;
+    definition?: FormBuilderFieldDefinition;
+    update: (changes: Partial<FormBuilderField>) => void;
+    updateField: (changes: Partial<FormBuilderField>) => void;
+}
+interface FormBuilderSectionSettingsContext {
+    item: FormBuilderSection;
+    section: FormBuilderSection;
+    schema: FormBuilderSchema;
+    definition?: FormBuilderItemDefinition;
+    update: (changes: Partial<FormBuilderSection>) => void;
+    updateSection: (changes: Partial<FormBuilderSection>) => void;
+}
+interface FormBuilderItemDefinition {
     type: string;
     label: string;
+    kind?: FormBuilderItemKind;
     group?: string;
     icon?: string;
     description?: string;
     defaults?: Partial<FormBuilderField>;
     renderer?: FormBuilderComponentImporter;
     settings?: FormBuilderComponentImporter;
+    acceptsChildren?: boolean;
+}
+interface FormBuilderFieldDefinition extends FormBuilderItemDefinition {
+    kind?: FormBuilderItemKind;
     validators?: (field: FormBuilderField) => ValidatorFn[];
 }
 interface FormBuilderSettingsDefinition {
-    fieldType: string;
+    fieldType?: string;
+    itemType?: string;
+    type?: string;
+    kind?: FormBuilderItemKind;
     component: FormBuilderComponentImporter;
 }
 interface FormBuilderFieldChange {
@@ -87,15 +113,19 @@ interface FormBuilderFieldChange {
     section?: FormBuilderSection;
 }
 
+declare const FORM_BUILDER_ITEMS: InjectionToken<FormBuilderItemDefinition[]>;
 declare const FORM_BUILDER_FIELDS: InjectionToken<FormBuilderFieldDefinition[]>;
 declare const FORM_BUILDER_SETTINGS: InjectionToken<FormBuilderSettingsDefinition[]>;
 declare function formBuilderField(definition: FormBuilderFieldDefinition): FormBuilderFieldDefinition;
+declare function formBuilderItem(definition: FormBuilderItemDefinition): FormBuilderItemDefinition;
 declare function formBuilderSettings(definition: FormBuilderSettingsDefinition): FormBuilderSettingsDefinition;
 declare function provideFormBuilder(config?: {
+    items?: FormBuilderItemDefinition[];
     fields?: FormBuilderFieldDefinition[];
     settings?: FormBuilderSettingsDefinition[];
 }): EnvironmentProviders;
 declare const DEFAULT_FORM_BUILDER_FIELDS: FormBuilderFieldDefinition[];
+declare const DEFAULT_FORM_BUILDER_ITEMS: FormBuilderItemDefinition[];
 declare function validatorsFromRules(rules?: FormBuilderValidationRule[], field?: FormBuilderField): _angular_forms.ValidatorFn[];
 
 interface FormBuilderPaletteGroup {
@@ -127,10 +157,15 @@ declare class FormBuilder {
     private readonly dialog;
     private readonly confirmManager;
     private readonly elementRef;
+    private readonly providedItems;
     private readonly providedFields;
     private readonly providedSettings;
     private readonly previewControls;
+    private readonly fieldTreeNodeCache;
+    private readonly canvasAnimationTimers;
     private readonly actualFieldsTree;
+    private fieldTreeRootNodes;
+    private fieldTreeStructureKey;
     private suppressPaletteClick;
     readonly schema: _angular_core.ModelSignal<FormBuilderSchema>;
     readonly paletteTitle: _angular_core.InputSignal<string>;
@@ -139,6 +174,7 @@ declare class FormBuilder {
     readonly fieldAdded: _angular_core.OutputEmitterRef<FormBuilderFieldChange>;
     readonly fieldRemoved: _angular_core.OutputEmitterRef<FormBuilderFieldChange>;
     protected readonly search: _angular_core.WritableSignal<string>;
+    protected readonly fieldsTabIndex: _angular_core.WritableSignal<number>;
     protected readonly selectedFieldId: _angular_core.WritableSignal<string | null>;
     protected readonly nativeDragItem: _angular_core.WritableSignal<FormBuilderNativeDragItem | null>;
     protected readonly nativeDragFieldDefinition: _angular_core.Signal<FormBuilderFieldDefinition | null>;
@@ -147,11 +183,9 @@ declare class FormBuilder {
         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[]>;
@@ -164,7 +198,7 @@ declare class FormBuilder {
     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 readonly updateSelectedSection: (changes: Partial<FormBuilderSection>) => void;
     protected paletteDragStarted(event: DragEvent, definition: FormBuilderFieldDefinition): void;
     protected sectionPaletteDragStarted(event: DragEvent): void;
     protected paletteDragEnded(): void;
@@ -184,12 +218,10 @@ declare class FormBuilder {
     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 selectField(field: FormBuilderField, section?: FormBuilderSection): void;
+    protected selectSection(section: FormBuilderSection): void;
+    protected selectCanvasField(field: FormBuilderField, section?: FormBuilderSection): void;
     protected selectFieldTreeNode(node: FormBuilderFieldTreeNode): void;
     protected toggleFieldTreeNode(tree: Tree<FormBuilderFieldTreeNode>, node: FormBuilderFieldTreeNode, event: MouseEvent): void;
     protected isFieldTreeNodeExpanded(tree: Tree<FormBuilderFieldTreeNode>, node: FormBuilderFieldTreeNode): boolean;
@@ -208,6 +240,11 @@ declare class FormBuilder {
     private matchesPaletteQuery;
     private nativeDragOver;
     private nativeDragOverAtIndex;
+    private setNativeDropTarget;
+    private captureCanvasItemRects;
+    private animateCanvasItemMoves;
+    private getCanvasAnimatedItems;
+    private getCanvasAnimatedItemKey;
     private insertNativeField;
     private insertNativeSection;
     private resolveNativeDragItem;
@@ -217,26 +254,33 @@ declare class FormBuilder {
     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 openActualFieldsTreeForField;
+    private findFieldTreeNodePath;
+    private scrollFieldTreeNodeIntoView;
+    private findFieldTreeNodeElement;
     private scrollCanvasFieldIntoView;
+    private scrollCanvasSectionIntoView;
+    private scrollCanvasItemIntoView;
     private findCanvasFieldElement;
+    private findCanvasSectionElement;
+    private syncPreviewControl;
     private scrollElementFullyIntoView;
     private afterNextPaint;
-    private createFieldTreeNode;
+    private upsertSectionTreeNode;
+    private upsertFieldTreeNode;
+    private getCachedFieldTreeNode;
+    private resolveFieldTreeStructureKey;
     private findContainerLocation;
     private findFieldContainerLocation;
     private findFieldLocation;
@@ -251,7 +295,9 @@ interface FormBuilderRendererCanvasItem extends FormBuilderLayoutItem {
     section?: FormBuilderSection;
 }
 declare class FormBuilderRenderer {
+    private readonly providedItems;
     private readonly providedFields;
+    private readonly orphanControls;
     readonly schema: _angular_core.InputSignal<FormBuilderSchema>;
     readonly readonly: _angular_core.InputSignal<boolean>;
     readonly showSubmit: _angular_core.InputSignal<boolean>;
@@ -289,22 +335,30 @@ declare class FormBuilderFieldHost {
 }
 
 declare class FormBuilderSettingsHost {
-    readonly field: _angular_core.InputSignal<FormBuilderField>;
+    readonly field: _angular_core.InputSignal<FormBuilderField | null>;
+    readonly section: _angular_core.InputSignal<FormBuilderSection | null>;
     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>;
+    readonly update: _angular_core.InputSignal<((changes: Partial<FormBuilderField>) => void) | undefined>;
+    readonly updateSection: _angular_core.InputSignal<((changes: Partial<FormBuilderSection>) => void) | undefined>;
+    protected readonly itemDefinition: _angular_core.Signal<FormBuilderFieldDefinition | undefined>;
+    protected readonly fieldDefinition: _angular_core.Signal<FormBuilderFieldDefinition | undefined>;
+    protected readonly fieldKind: _angular_core.Signal<_ngstarter_ui_components_form_builder.FormBuilderItemKind>;
+    protected readonly isLayoutField: _angular_core.Signal<boolean>;
     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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilderSettingsHost, "ngs-form-builder-settings-host", ["ngsFormBuilderSettingsHost"], { "field": { "alias": "field"; "required": false; "isSignal": true; }; "section": { "alias": "section"; "required": false; "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": false; "isSignal": true; }; "updateSection": { "alias": "updateSection"; "required": false; "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 hasCheckedState: _angular_core.Signal<boolean>;
+    protected readonly hasPlaceholder: _angular_core.Signal<boolean>;
     protected readonly hasOptions: _angular_core.Signal<boolean>;
     protected readonly optionsText: _angular_core.Signal<string>;
     protected patch(changes: Partial<FormBuilderField>): void;
@@ -313,5 +367,22 @@ declare class BasicFormBuilderFieldSettings {
     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 };
+declare class BasicFormBuilderLayoutSettings {
+    readonly field: _angular_core.InputSignal<FormBuilderField>;
+    readonly update: _angular_core.InputSignal<(changes: Partial<FormBuilderField>) => void>;
+    protected readonly fieldWidthOptions: FormBuilderFieldWidth[];
+    protected patch(changes: Partial<FormBuilderField>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BasicFormBuilderLayoutSettings, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BasicFormBuilderLayoutSettings, "ngs-basic-form-builder-layout-settings", ["ngsBasicFormBuilderLayoutSettings"], { "field": { "alias": "field"; "required": true; "isSignal": true; }; "update": { "alias": "update"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class BasicFormBuilderSectionSettings {
+    readonly section: _angular_core.InputSignal<FormBuilderSection>;
+    readonly update: _angular_core.InputSignal<(changes: Partial<FormBuilderSection>) => void>;
+    protected patch(changes: Partial<FormBuilderSection>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BasicFormBuilderSectionSettings, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BasicFormBuilderSectionSettings, "ngs-basic-form-builder-section-settings", ["ngsBasicFormBuilderSectionSettings"], { "section": { "alias": "section"; "required": true; "isSignal": true; }; "update": { "alias": "update"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { BasicFormBuilderFieldSettings, BasicFormBuilderLayoutSettings, BasicFormBuilderSectionSettings, DEFAULT_FORM_BUILDER_FIELDS, DEFAULT_FORM_BUILDER_ITEMS, FORM_BUILDER_FIELDS, FORM_BUILDER_ITEMS, FORM_BUILDER_SETTINGS, FormBuilder, FormBuilderFieldHost, FormBuilderRenderer, FormBuilderSettingsHost, FormBuilderRenderer as FormRenderer, createDefaultFormBuilderSchema, formBuilderField, formBuilderItem, formBuilderSettings, provideFormBuilder, validatorsFromRules };
+export type { FormBuilderComponentImporter, FormBuilderField, FormBuilderFieldChange, FormBuilderFieldDefinition, FormBuilderFieldRenderContext, FormBuilderFieldSettingsContext, FormBuilderFieldWidth, FormBuilderItemDefinition, FormBuilderItemKind, FormBuilderLayoutItem, FormBuilderOption, FormBuilderSchema, FormBuilderSection, FormBuilderSectionSettingsContext, FormBuilderSettingsContext, FormBuilderSettingsDefinition, FormBuilderValidationRule, FormBuilderVisibility };

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

@@ -51,6 +51,7 @@ declare class Tree<T, K = T> extends CdkTree<T, K> {
     dropPredicate: _angular_core.InputSignal<TreeNodeDropPredicate<T>>;
     reorderOnDrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
     dragPreview: _angular_core.InputSignal<TreeDragPreview>;
+    nodePaddingIndent: _angular_core.InputSignal<string | number>;
     childrenKey: _angular_core.InputSignal<string>;
     filterValue: _angular_core.InputSignalWithTransform<string, unknown>;
     filterPredicate: _angular_core.InputSignal<TreeFilterPredicate<T>>;
@@ -125,7 +126,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; }; "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>;
+    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; }; "nodePaddingIndent": { "alias": "nodePaddingIndent"; "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 {
@@ -215,8 +216,9 @@ declare class NestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> implement
 }
 
 declare class TreeNodePadding<T, K = T> extends CdkTreeNodePadding<T, K> {
+    private readonly tree;
     levelInput: _angular_core.InputSignalWithTransform<number, any>;
-    indentInput: _angular_core.InputSignal<string | number>;
+    indentInput: _angular_core.InputSignal<string | number | undefined>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeNodePadding<any, any>, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TreeNodePadding<any, any>, "[ngsTreeNodePadding]", never, { "levelInput": { "alias": "ngsTreeNodePadding"; "required": false; "isSignal": true; }; "indentInput": { "alias": "ngsTreeNodePaddingIndent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;