@olafvv/ngx-dynamic-form 20.1.0 → 20.2.0

package/index.d.ts

@@ -1,7 +1,9 @@
+import * as _olafvv_ngx_dynamic_form from '@olafvv/ngx-dynamic-form';
 import * as i0 from '@angular/core';
 import { WritableSignal, InputSignal, InjectionToken, Type } from '@angular/core';
 import { ValidatorFn, FormGroup, AbstractControl, FormControl, FormBuilder } from '@angular/forms';
 import { Observable } from 'rxjs';
+import { MatButtonAppearance } from '@angular/material/button';
 
 declare enum RelationActionType {
     DISABLED = "DISABLED",
@@ -128,15 +130,13 @@ declare abstract class DynamicFormFieldModel {
     set hidden(hidden: boolean);
 }
 
-type DynamicFormConfig = DynamicFormFieldModel[][];
+type DynamicFormConfig = DynamicFormFieldModel[];
 
 declare class DynamicFormComponent {
     group: i0.InputSignal<FormGroup<any>>;
     formConfig: i0.InputSignal<DynamicFormConfig>;
-    /**
-     * Get the formConfig as flat array.
-     */
-    get flatFormConfig(): DynamicFormFieldModel[];
+    layout: i0.InputSignal<string[]>;
+    layoutRows: i0.Signal<_olafvv_ngx_dynamic_form.DynamicFormFieldModel[][] | null>;
     /**
      * Get the current value of the form.
      * @param includeDisabledFields Include the disabled fields of the form, is enabled by default
@@ -150,7 +150,7 @@ declare class DynamicFormComponent {
      */
     onControlChange(name: string): Observable<unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormComponent, "dynamic-form", never, { "group": { "alias": "group"; "required": true; "isSignal": true; }; "formConfig": { "alias": "formConfig"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormComponent, "dynamic-form", never, { "group": { "alias": "group"; "required": true; "isSignal": true; }; "formConfig": { "alias": "formConfig"; "required": true; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface DynamicFormFieldValueConfig<T> extends DynamicFormFieldConfig {
@@ -249,6 +249,10 @@ type DynamicButtonConfig = Omit<DynamicFormFieldConfig, OmittedProperties> & {
      * Label shown inside the button
      */
     label: string;
+    /**
+     * Variant of the button
+     */
+    variant?: MatButtonAppearance;
     /**
      * Function called when the button is clicked.
      * Provides no parameters.
@@ -258,6 +262,7 @@ type DynamicButtonConfig = Omit<DynamicFormFieldConfig, OmittedProperties> & {
 };
 declare class DynamicButton extends DynamicFormFieldModel {
     label: string | null;
+    variant: MatButtonAppearance;
     clicked: () => any;
     readonly type = "button";
     constructor(config: DynamicButtonConfig);
@@ -275,7 +280,6 @@ declare class DynamicCheckbox extends DynamicFormFieldValueModel<boolean> {
     constructor(config: DynamicCheckboxConfig);
     get checked(): boolean;
     set checked(checked: boolean);
-    toggle(): void;
 }
 
 declare const DYNAMIC_FORM_FIELD_DATEPICKER = "datepicker";
@@ -349,7 +353,7 @@ declare class DynamicRadioGroup extends DynamicFormFieldOptionModel<string | num
 
 declare const DYNAMIC_FORM_FIELD_READONLY = "readonly";
 type DynamicReadonlyValue = string | number | null;
-type DynamicReadonlyConfig = Omit<DynamicFormFieldValueConfig<DynamicReadonlyValue>, 'validators' | 'relations' | 'updateOn'>;
+type DynamicReadonlyConfig = DynamicFormFieldValueConfig<DynamicReadonlyValue>;
 declare class DynamicReadonly extends DynamicFormFieldValueModel<DynamicReadonlyValue> {
     readonly type = "readonly";
     constructor(config: DynamicReadonlyConfig);
@@ -374,50 +378,20 @@ declare class DynamicSelect<T = string> extends DynamicFormFieldOptionModel<T> {
     constructor(config: DynamicSelectConfig<T>);
 }
 
-declare const DYNAMIC_FORM_FIELD_TEXTAREA = "textarea";
-type DynamicTextareaValue = string | null;
-type DynamicTextareaConfig = DynamicFormFieldValueConfig<DynamicTextareaValue> & {
-    /**
-     * Placeholder text inside the textarea.
-     * Only visible when the field is empty and in focus.
-     */
-    placeholder?: string;
-    /**
-     * Minimum amount of characters needed in the textarea
-     */
-    minLength?: number;
-    /**
-     * Maximum amount of characters it is possible to fill in the textarea
-     */
-    maxLength?: number;
-    /**
-     * Enables or disabled the browser natie autocomplete bubble when the control is in focus.
-     * Default value is 'off'
-     */
-    autocomplete?: 'on' | 'off';
+declare const DYNAMIC_FORM_FIELD_SLIDE_TOGGLE = "slide-toggle";
+type DynamicSlideToggleConfig = DynamicFormFieldValueConfig<boolean> & {
     /**
-     * Amount of rows the textarea initializes on
+     * Whether the label appears before or after the slide toggle.
+     * @default 'after'
      */
-    rows?: number;
-    /**
-     * Whether the textare automatically resizes to fit its content
-     */
-    resize?: boolean;
-    /**
-     * Maximum amount of rows the textarea show resize to
-     */
-    resizeMaxRows?: number;
+    labelPosition?: 'before' | 'after';
 };
-declare class DynamicTextarea extends DynamicFormFieldValueModel<DynamicTextareaValue> {
-    placeholder: string;
-    minLength: number | null;
-    maxLength: number | null;
-    autocomplete: 'on' | 'off';
-    rows: number;
-    resize: boolean;
-    resizeMaxRows: number | null;
-    readonly type = "textarea";
-    constructor(config: DynamicTextareaConfig);
+declare class DynamicSlideToggle extends DynamicFormFieldValueModel<boolean> {
+    labelPosition: 'before' | 'after';
+    readonly type: string;
+    constructor(config: DynamicSlideToggleConfig);
+    get checked(): boolean;
+    set checked(checked: boolean);
 }
 
 interface DynamicFormField<M extends DynamicFormFieldModel = DynamicFormFieldModel> {
@@ -488,6 +462,64 @@ declare class DynamicFormValidators {
 
 declare const DYNAMIC_FORM_FIELD_MAP: InjectionToken<Record<string, Type<DynamicFormField<any>>>>;
 
+declare const DYNAMIC_FORM_FIELD_STATIC_TEXT = "static-text";
+type DynamicStaticTextValue = {
+    title?: string;
+    text?: string;
+};
+type DynamicStaticTextConfig = DynamicFormFieldValueConfig<DynamicStaticTextValue>;
+declare class DynamicStaticText extends DynamicFormFieldValueModel<DynamicStaticTextValue> {
+    readonly type = "static-text";
+    constructor(config: DynamicStaticTextConfig);
+}
+
+declare const DYNAMIC_FORM_FIELD_TEXTAREA = "textarea";
+type DynamicTextareaValue = string | null;
+type DynamicTextareaConfig = DynamicFormFieldValueConfig<DynamicTextareaValue> & {
+    /**
+     * Placeholder text inside the textarea.
+     * Only visible when the field is empty and in focus.
+     */
+    placeholder?: string;
+    /**
+     * Minimum amount of characters needed in the textarea
+     */
+    minLength?: number;
+    /**
+     * Maximum amount of characters it is possible to fill in the textarea
+     */
+    maxLength?: number;
+    /**
+     * Enables or disabled the browser natie autocomplete bubble when the control is in focus.
+     * Default value is 'off'
+     */
+    autocomplete?: 'on' | 'off';
+    /**
+     * Amount of rows the textarea initializes on
+     */
+    rows?: number;
+    /**
+     * Whether the textare automatically resizes to fit its content
+     */
+    resize?: boolean;
+    /**
+     * Maximum amount of rows the textarea show resize to
+     */
+    resizeMaxRows?: number;
+};
+declare class DynamicTextarea extends DynamicFormFieldValueModel<DynamicTextareaValue> {
+    placeholder: string;
+    minLength: number | null;
+    maxLength: number | null;
+    autocomplete: 'on' | 'off';
+    rows: number;
+    resize: boolean;
+    resizeMaxRows: number | null;
+    readonly type = "textarea";
+    constructor(config: DynamicTextareaConfig);
+}
+
+/** @ignore */
 declare class DynamicFormValidationsService {
     /**
      * Get all Validator Functions from the validator configuration
@@ -559,5 +591,5 @@ declare function arrToDynamicFormOptions<T, K = string>(arr: T[], labelFn: (item
  */
 declare function obsToDynamicFormOptions<T, K = string>(obs: Observable<T[]>, labelFn: (item: T) => string, valueFn: (item: T) => K): Observable<DynamicFormFieldOption<K>[]>;
 
-export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_BUTTON_TOGGLES, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_DATEPICKER, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP, DYNAMIC_FORM_FIELD_RADIO_GROUP, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicButtonToggles, DynamicCheckbox, DynamicDatepicker, DynamicFormComponent, DynamicFormFieldBase, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicRadioGroup, DynamicReadonly, DynamicSelect, DynamicTextarea, RelationActionType, RelationOperator, arrToDynamicFormOptions, obsToDynamicFormOptions };
-export type { DynamicButtonConfig, DynamicButtonTogglesConfig, DynamicCheckboxConfig, DynamicDatepickerConfig, DynamicDatepickerControlValue, DynamicFormConfig, DynamicFormField, DynamicFormFieldConfig, DynamicFormFieldOption, DynamicFormFieldOptionConfig, DynamicFormFieldOptionGroup, DynamicFormFieldRelation, DynamicFormFieldValueConfig, DynamicFormValidator, DynamicGroupedOptionList, DynamicInputConfig, DynamicInputValue, DynamicOptionList, DynamicRadioGroupConfig, DynamicReadonlyConfig, DynamicReadonlyValue, DynamicSelectConfig, DynamicTextareaConfig, DynamicTextareaValue, HtmlInputType, RelationCondition };
+export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_BUTTON_TOGGLES, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_DATEPICKER, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP, DYNAMIC_FORM_FIELD_RADIO_GROUP, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_SLIDE_TOGGLE, DYNAMIC_FORM_FIELD_STATIC_TEXT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicButtonToggles, DynamicCheckbox, DynamicDatepicker, DynamicFormComponent, DynamicFormFieldBase, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicRadioGroup, DynamicReadonly, DynamicSelect, DynamicSlideToggle, DynamicStaticText, DynamicTextarea, RelationActionType, RelationOperator, arrToDynamicFormOptions, obsToDynamicFormOptions };
+export type { DynamicButtonConfig, DynamicButtonTogglesConfig, DynamicCheckboxConfig, DynamicDatepickerConfig, DynamicDatepickerControlValue, DynamicFormConfig, DynamicFormField, DynamicFormFieldConfig, DynamicFormFieldOption, DynamicFormFieldOptionConfig, DynamicFormFieldOptionGroup, DynamicFormFieldRelation, DynamicFormFieldValueConfig, DynamicFormValidator, DynamicGroupedOptionList, DynamicInputConfig, DynamicInputValue, DynamicOptionList, DynamicRadioGroupConfig, DynamicReadonlyConfig, DynamicReadonlyValue, DynamicSelectConfig, DynamicSlideToggleConfig, DynamicStaticTextConfig, DynamicStaticTextValue, DynamicTextareaConfig, DynamicTextareaValue, HtmlInputType, RelationCondition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olafvv/ngx-dynamic-form",
-  "version": "20.1.0",
+  "version": "20.2.0",
   "peerDependencies": {
     "@angular/common": "^20.3.16",
     "@angular/core": "^20.3.16",