@wavemaker-ai/app-ng-runtime 1.0.0-next.27766

package/components/data/form/fesm2022/index.mjs

@@ -0,0 +1,3333 @@
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { AnchorComponent } from '@wm/components/basic/anchor';
+import { ButtonComponent } from '@wm/components/input/button';
+import * as i0 from '@angular/core';
+import { ViewContainerRef, HostListener, HostBinding, ContentChildren, ViewChild, Optional, SkipSelf, Attribute, Inject, Component, Self, Directive, ContentChild } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormArray, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1$1 from '@wm/core';
+import { removeClass, isDefined, debounce as debounce$1, removeAttr, DataSource, $appDigest, setListClass, isElementInViewport, scrollToElement, getFiles, DataType, getClonedObject, $invokeWatchers, getValidJSON, extendProto, $parseEvent, FormWidgetType, noop as noop$1, isMobile, isDateTimeType, addForIdAttributes, triggerFn, isEmptyObject, getValidDateObject } from '@wm/core';
+import * as i5 from '@wm/components/base';
+import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, StylableComponent, styler, getFieldLayoutConfig, Live_Operations, performDataOperation, parseValueByType, MessageComponent, WmAppIconComponent, FilterPipe, WidgetRef, provideAsWidgetRef, BaseComponent, getWidgetPropsByType, getEvaluatedData, BaseFieldValidations, getDefaultViewModeWidget, Context, provideAs, fetchDistinctValues, applyFilterOnField, isDataSetWidget, getDistinctValuesForField, getRangeFieldValue, getRangeMatchMode, getEnableEmptyFilter, getEmptyMatchMode, fetchRelatedFieldData, ALLFIELDS } from '@wm/components/base';
+import * as i4 from '@wm/components/prefab';
+import * as i3 from '@wm/components/data/list';
+import { ListComponent } from '@wm/components/data/list';
+import { forEach, debounce, get, last, keys, isEmpty, isEqual, isArray, find, set, filter, includes, split, some, isUndefined, findIndex, isObject, join, isString, fromPairs, map } from 'lodash-es';
+import { TableComponent } from '@wm/components/data/table';
+import { debounceTime } from 'rxjs/operators';
+import * as i1$2 from '@wm/components/data/live-table';
+
+const propsMap = new Map([
+    ['autocomplete', { value: false, ...PROP_BOOLEAN }],
+    ['captionalign', { value: 'left', ...PROP_STRING }],
+    ['captionposition', { value: 'left', ...PROP_STRING }],
+    ['captionsize', PROP_STRING],
+    ['captionwidth', { value: 'xs-12 sm-3 md-3 lg-3', ...PROP_STRING }],
+    ['class', PROP_STRING],
+    ['collapsible', PROP_BOOLEAN],
+    ['dataset', PROP_ANY],
+    ['datasource', PROP_STRING],
+    ['expanded', { value: true, ...PROP_BOOLEAN }],
+    ['formdatasource', PROP_STRING],
+    ['name', PROP_STRING],
+    ['numberOfFields', PROP_NUMBER],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['showindevice', { displayType: 'inline-block', value: 'all', ...PROP_STRING }],
+    ['subheading', PROP_STRING],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['title', PROP_STRING],
+    ['itemsperrow', PROP_STRING],
+]);
+const registerFormProps = () => {
+    const formMap = new Map(propsMap);
+    formMap.set('action', PROP_STRING);
+    formMap.set('defaultmode', { value: 'Edit', ...PROP_STRING });
+    formMap.set('metadata', PROP_STRING);
+    formMap.set('method', PROP_STRING);
+    formMap.set('postmessage', { value: 'Data posted successfully', ...PROP_STRING });
+    formMap.set('target', PROP_STRING);
+    formMap.set('enctype', PROP_STRING);
+    formMap.set('errormessage', { value: 'An error occured. Please try again!', ...PROP_STRING });
+    formMap.set('messagelayout', { value: 'Inline', ...PROP_STRING });
+    formMap.set('formdata', PROP_STRING);
+    formMap.set('novalidate', PROP_BOOLEAN);
+    formMap.set('validationtype', { value: 'default', ...PROP_STRING });
+    formMap.set('iconclass', PROP_STRING);
+    formMap.set('iconurl', PROP_STRING);
+    formMap.set('readonly', { value: false, ...PROP_BOOLEAN });
+    register('wm-form', formMap);
+};
+const registerLiveFormProps = () => {
+    const liveFormMap = new Map(propsMap);
+    liveFormMap.set('defaultmode', { value: 'View', ...PROP_STRING });
+    liveFormMap.set('formlayout', { value: 'inline', ...PROP_STRING });
+    liveFormMap.set('insertmessage', { value: 'Record added successfully', ...PROP_STRING });
+    liveFormMap.set('updatemessage', { value: 'Record updated successfully', ...PROP_STRING });
+    liveFormMap.set('deletemessage', { value: 'Record deleted successfully', ...PROP_STRING });
+    liveFormMap.set('errormessage', { value: 'An error occured. Please try again!', ...PROP_STRING });
+    liveFormMap.set('messagelayout', { value: 'Toaster', ...PROP_STRING });
+    liveFormMap.set('formdata', PROP_STRING);
+    liveFormMap.set('novalidate', PROP_BOOLEAN);
+    liveFormMap.set('validationtype', { value: 'default', ...PROP_STRING });
+    liveFormMap.set('iconclass', PROP_STRING);
+    liveFormMap.set('iconurl', PROP_STRING);
+    register('wm-liveform', liveFormMap);
+};
+const registerLiveFilterProps = () => {
+    const liveFilterMap = new Map(propsMap);
+    liveFilterMap.set('autoupdate', PROP_BOOLEAN);
+    liveFilterMap.set('enableemptyfilter', { value: ' ', ...PROP_STRING });
+    liveFilterMap.set('pagesize', { value: 20, ...PROP_NUMBER });
+    liveFilterMap.set('iconclass', { value: 'wi wi-filter-list', ...PROP_STRING });
+    liveFilterMap.set('iconurl', PROP_STRING);
+    register('wm-livefilter', liveFilterMap);
+};
+
+const WIDGET_CONFIG$1 = { widgetType: 'wm-form', hostClass: 'panel app-panel app-form' };
+const LOGIN_FORM_CONFIG = { widgetType: 'wm-form', hostClass: 'app-form app-login-form' };
+const LIVE_FORM_CONFIG = { widgetType: 'wm-liveform', hostClass: 'panel app-panel app-liveform liveform-inline' };
+const LIVE_FILTER_CONFIG = { widgetType: 'wm-livefilter', hostClass: 'panel app-panel app-livefilter clearfix liveform-inline' };
+const getWidgetConfig = (isLiveForm, isLiveFilter, role) => {
+    let config = WIDGET_CONFIG$1;
+    if (isLiveForm !== null) {
+        config = LIVE_FORM_CONFIG;
+    }
+    else if (isLiveFilter !== null) {
+        config = LIVE_FILTER_CONFIG;
+    }
+    else if (role === 'app-login') {
+        config = LOGIN_FORM_CONFIG;
+    }
+    return config;
+};
+// Generate the form field with given field definition. Add a grid column wrapper around the form field.
+const setMarkupForFormField = (field, columnWidth) => {
+    let propsTmpl = '';
+    forEach(field, (value, key) => {
+        propsTmpl = `${propsTmpl} ${key}="${value}"`;
+    });
+    return `<wm-gridcolumn columnwidth="${columnWidth}">
+                  <wm-form-field ${propsTmpl}></wm-form-field>
+            </wm-gridcolumn>`;
+};
+// Function to find out the first invalid element in form
+const findInvalidElement = ($formEle, ngForm) => {
+    const $ele = $formEle.find('form.ng-invalid:visible, [formControlName].ng-invalid:visible').first();
+    let formObj = ngForm;
+    // If element is form, find out the first invalid element in this form
+    if ($ele.is('form')) {
+        formObj = ngForm && ngForm.controls[$ele.attr('formControlName') || $ele.attr('name')];
+        if (formObj) {
+            return findInvalidElement($ele, formObj);
+        }
+    }
+    return {
+        ngForm: formObj,
+        $ele: $ele
+    };
+};
+// Function to get the active element markup based on widget type
+const getActiveElement = (element) => {
+    const widgetType = element.getAttribute('widgettype');
+    switch (widgetType) {
+        case 'select':
+            return element.querySelector('select');
+            break;
+        case 'textarea':
+            return element.querySelector('textarea');
+            break;
+        default:
+            return element.querySelector('input');
+    }
+};
+const setTouchedState = (self, ngForm, fieldName) => {
+    if (ngForm.valid) {
+        return;
+    }
+    if (ngForm.controls) {
+        forEach(ngForm.controls, (ctrl, fieldName) => {
+            setTouchedState(self, ctrl, fieldName);
+        });
+    }
+    else {
+        let element = self.$element.find(`[wmformfield][key="${fieldName}"]`);
+        if (!element.length) {
+            element = self.$element.find(`[wmformfield][name="${fieldName}"]`);
+        }
+        element[0].setAttribute('__errormsg', element[0].getAttribute('__validationId'));
+        const activeElement = getActiveElement(element[0]);
+        activeElement?.setAttribute('aria-invalid', ngForm.invalid);
+        activeElement?.setAttribute('aria-describedby', element[0].getAttribute('__validationId'));
+        ngForm.markAsTouched();
+    }
+};
+class FormComponent extends StylableComponent {
+    static { this.initializeProps = registerFormProps(); }
+    set isLayoutDialog(nv) {
+        if (nv) {
+            removeClass(this.nativeElement, 'panel app-panel liveform-inline');
+        }
+        this._isLayoutDialog = nv;
+    }
+    get isLayoutDialog() {
+        return this._isLayoutDialog;
+    }
+    set isUpdateMode(nv) {
+        this._isUpdateMode = nv;
+        this.formFields.forEach(field => {
+            field.setReadOnlyState(nv);
+        });
+    }
+    get isUpdateMode() {
+        return this._isUpdateMode;
+    }
+    submit($event) {
+        this._debouncedSubmitForm($event);
+    }
+    onReset() {
+        this.reset();
+    }
+    onKeydownHandler(event) {
+        this._triggeredByUser = true;
+    }
+    // returns the formArray control on the parentForm.
+    get parentFormArray() {
+        return this.parentForm && this.isParentList && this.parentForm.ngform.get(this.parentList.name);
+    }
+    // returns true only when closest livelist is the immediate parent of the form.
+    // checks for livelist having any form elements with parentForm name.
+    // If livelist is not containing any parentForm elements then it returns true.
+    get isParentList() {
+        if (this.parentList && this.parentForm && !isDefined(this._formIsInList)) {
+            const formEle = this.$element;
+            const listEle = formEle.closest('.app-livelist[name="' + this.parentList.name + '"]');
+            if (listEle.length) {
+                this._formIsInList = !(listEle.find('form[widget-id="' + this.parentForm.widgetId + '"]')).length;
+            }
+        }
+        return isDefined(this._formIsInList) ? this._formIsInList : this.parentList;
+    }
+    constructor(inj, envInjector, fb, app, dialogService, dynamicComponentProvider, ngZone, parentList, parentForm, parentPrefab, parentPartial, onBeforeSubmitEvt, onSubmitEvt, onBeforeRenderEvt, binddataset, bindformdata, isLiveForm, isLiveFilter, role, key, name, explicitContext) {
+        super(inj, getWidgetConfig(isLiveForm, isLiveFilter, role), explicitContext);
+        this.envInjector = envInjector;
+        this.fb = fb;
+        this.app = app;
+        this.dialogService = dialogService;
+        this.dynamicComponentProvider = dynamicComponentProvider;
+        this.ngZone = ngZone;
+        this.parentList = parentList;
+        this.parentForm = parentForm;
+        this.parentPrefab = parentPrefab;
+        this.parentPartial = parentPartial;
+        this.onBeforeSubmitEvt = onBeforeSubmitEvt;
+        this.onSubmitEvt = onSubmitEvt;
+        this.onBeforeRenderEvt = onBeforeRenderEvt;
+        this.binddataset = binddataset;
+        this.bindformdata = bindformdata;
+        this._widgetClass = '';
+        this._captionClass = '';
+        this.formFields = [];
+        this.formfields = {};
+        this.formWidgets = {};
+        this.filterWidgets = {};
+        this.buttonArray = [];
+        this.dataoutput = {};
+        this.formdata = {};
+        this.statusMessage = {
+            caption: '',
+            type: ''
+        };
+        this.primaryKey = [];
+        this._debouncedUpdateFieldSource = debounce(this.updateFieldSource, 350);
+        this.validationMessages = [];
+        this._debouncedSubmitForm = debounce$1(($event) => {
+            // calling submit event in ngZone as change detection is not triggered post the submit callback and actions like notification are not shown
+            this.ngZone.run(() => {
+                this.submitForm($event);
+            });
+        }, 250);
+        styler(this.nativeElement, this);
+        // remove title property as attribute as it is causing unnecessary tooltip
+        removeAttr(this.nativeElement, 'title');
+        this.isUpdateMode = true;
+        this.dialogId = this.nativeElement.getAttribute('dialogId');
+        this.ngform = fb.group({});
+        this.bindingValue = key || name;
+        // On value change in form, update the dataoutput
+        const onValueChangeSubscription = this.ngform.valueChanges
+            .subscribe(this.updateDataOutput.bind(this));
+        this.registerDestroyListener(() => onValueChangeSubscription.unsubscribe());
+        this.elScope = this;
+        this.addEventsToContext(this.context);
+    }
+    ngAfterContentInit() {
+        setTimeout(() => {
+            this.componentRefs.forEach(componentRef => {
+                if (componentRef.name) {
+                    // Register widgets inside form with formWidgets
+                    this.formWidgets[componentRef.name] = componentRef;
+                }
+            });
+        }, 250);
+    }
+    ngAfterViewInit() {
+        if (this.parentForm && this.parentForm.ngform && this.isParentList) {
+            // setting formArray control on ngform.
+            if (!get(this.parentForm.ngform.controls, this.parentList.name)) {
+                this.parentForm.ngform.setControl(this.parentList.name, new FormArray([]));
+            }
+            // pushing the ngform to formArray.
+            this.parentFormArray.push(this.ngform);
+            this.formArrayIndex = this.parentFormArray.length - 1;
+        }
+        this.addInnerNgFormToForm(this.bindingValue);
+        setTimeout(() => {
+            $(this.nativeElement).find('div[data-role="form-field"], div[data-role="filter-field"]').addClass(this.itemsPerRowClass);
+        });
+    }
+    findOperationType() { }
+    addInnerNgFormToForm(binding) {
+        if (this.parentForm && this.parentForm.ngform) {
+            // handling as formArray when parent is list. Hence returning here from adding to parentForm again.
+            if (this.isParentList) {
+                return;
+            }
+            // assigning the control name of the form inside the prefab with the prefab name.
+            // This will happen only when there is only one form inside prefab.
+            // We do not support changing this when multiple forms are inside prefab.
+            // This scenario has to be handled by end user by changing form names in prefab according to the datamodel binding.
+            const parentContainer = this.parentPrefab || this.parentPartial;
+            if (parentContainer) {
+                let parentContentEl;
+                if (this.parentPrefab) {
+                    parentContentEl = parentContainer.$element.find('[wmprefabcontainer]');
+                }
+                else {
+                    parentContentEl = parentContainer.$element;
+                }
+                /**
+                 * assigning the form name to the parentContainer name i.e. partial name or perfab name by following
+                 * 1. retrieving all the forms in the parentContainer
+                 * 2. consider the first form
+                 * 3. if this form is inside list i.e. also find if this list is also inside the parentContainer (prefab / partial)
+                 * 4. then do not change the form name when form is inside list and also when there are siblings to the form
+                 * 5. this means form name change applies only when there is single form (immediate child) inside the parentContainer.
+                 */
+                const prefabInnerForm = parentContentEl.find('form').first();
+                if (get(prefabInnerForm[0], 'widget.widgetId') === this.widgetId) {
+                    // check whether form inside prefab container is inside the list. If true, do not change the name.
+                    if (!prefabInnerForm.isParentList && !prefabInnerForm.siblings('form').length) {
+                        binding = get(parentContainer, 'name');
+                    }
+                }
+            }
+            let counter = 1;
+            let innerBinding = binding;
+            // Inner forms may have same names. If same name is present, append unqiue identifier
+            while (this.parentForm.ngform.controls.hasOwnProperty(innerBinding)) {
+                innerBinding = `${binding}_${counter}`;
+                counter++;
+            }
+            this.formGroupName = innerBinding;
+            // If parent form is present, add the current form as as formGroup for parent form
+            this.parentForm.ngform.addControl(innerBinding, this.ngform);
+        }
+    }
+    // Expose the events on context so that they can be accessed by form actions
+    addEventsToContext(context) {
+        context.cancel = () => this.cancel();
+        context.reset = () => this.reset();
+        context.save = evt => this.save(evt);
+        context.saveAndNew = () => this.saveAndNew();
+        context.saveAndView = () => this.saveAndView();
+        context.delete = () => this.delete();
+        context.new = () => this.new();
+        context.edit = () => this.edit();
+        context.highlightInvalidFields = () => this.highlightInvalidFields();
+        context.filter = () => this.filter();
+        context.clearFilter = () => this.clearFilter();
+        context.submit = evt => this.submit(evt);
+    }
+    // This method gets all the inner forms and validates each form.
+    setValidationOnInnerForms(validateTouch) {
+        const formEle = this.getNativeElement();
+        const formObjs = formEle.querySelectorAll('.app-form');
+        const validationMsgs = [];
+        forEach(formObjs, e => {
+            const formInstance = e.widget;
+            // differentiating the validationMessages prefix based on the formGroupName
+            // as the formName's are same when forms are in list
+            let formName = get(formInstance, 'formGroupName') || formInstance.name;
+            if (isDefined(formInstance.formArrayIndex)) {
+                formName = formName + '[' + formInstance.formArrayIndex + ']';
+            }
+            let current = formInstance;
+            while (get(current, 'parentForm')) {
+                let parentName = current.parentForm.formGroupName || current.parentForm.name;
+                if (current.parentForm.parentFormArray) {
+                    parentName = parentName + '[' + current.parentForm.formArrayIndex + ']';
+                }
+                formName = parentName + '.' + formName;
+                current = current.parentForm;
+            }
+            this.setValidationOnFields(formInstance, formName, validateTouch);
+        });
+    }
+    /**
+     * This method sets validation on formFields.
+     * Applies to innerform and also sets innerform validation on parent form.
+     * @param prefix contains the form name, which also includes its parents form name
+     * @param {boolean} validateTouch
+     */
+    setValidationOnFields(form, prefix, validateTouch) {
+        const controls = form.ngform.controls;
+        const formFields = form.formFields;
+        if (!formFields) {
+            return;
+        }
+        forEach(controls, (v, k) => {
+            const field = formFields.find(e => e.key === k);
+            if (!field || (validateTouch && !v.touched)) {
+                return;
+            }
+            field.nativeElement.querySelector('input')?.setAttribute('aria-invalid', v.invalid);
+            // invoking the prepareValidation on both parent form and current form.
+            this.prepareValidationObj(v, k, field, prefix);
+            this.prepareValidationObj.call(form, v, k, field, prefix);
+        });
+    }
+    // Assigns / updates validationMessages based on angular errors on field
+    prepareValidationObj(v, k, field, prefix) {
+        const index = this.validationMessages.findIndex(e => (e.field === k && e.fullyQualifiedFormName === prefix));
+        if (v.invalid) {
+            if (index === -1) {
+                /**
+                 * field contains the fieldName
+                 * value contains the field value
+                 * errorType contains the list of errors
+                 * message contains the validation message
+                 * getElement returns the element having focus-target
+                 * formName returns the name of the form
+                 */
+                this.validationMessages.push({
+                    field: k,
+                    value: field.value,
+                    errorType: keys(v.errors),
+                    message: field.validationmessage || '',
+                    getElement: () => {
+                        return field.$element.find('[focus-target]');
+                    },
+                    formName: last(prefix.split('.')),
+                    fullyQualifiedFormName: prefix
+                });
+            }
+            else {
+                this.validationMessages[index].value = field.value;
+                this.validationMessages[index].errorType = keys(v.errors);
+            }
+        }
+        else if (v.valid && index > -1) {
+            this.validationMessages.splice(index, 1);
+        }
+    }
+    // This will return a object containing the error details from the list of formFields that are invalid
+    setValidationMsgs(validateTouch) {
+        if (!this.formFields.length && isEmpty(this.ngform.controls)) {
+            return;
+        }
+        this.setValidationOnFields(this, this.name, validateTouch);
+        this.setValidationOnInnerForms(validateTouch);
+    }
+    // change and blur events are added from the template
+    handleEvent(node, eventName, callback, locals) {
+        if (eventName !== 'submit') {
+            super.handleEvent(this.nativeElement, eventName, callback, locals);
+        }
+    }
+    updateFieldSource() {
+        if (this.formdatasource && this.formdatasource.execute(DataSource.Operation.IS_API_AWARE)) {
+            return;
+        }
+        else if (this.formdatasource && !this.formdatasource.twoWayBinding) {
+            return;
+        }
+        this.formFields.forEach(formField => {
+            formField.setFormWidget('datavaluesource', this.formdatasource);
+            formField.setFormWidget('binddatavalue', `${this.bindformdata}.${formField.key}`);
+        });
+    }
+    // This method loops through the form fields and highlights the invalid fields by setting state to touched
+    highlightInvalidFields() {
+        setTouchedState(this, this.ngform, '');
+    }
+    // Disable the form submit if form is in invalid state. Highlight all the invalid fields if validation type is default
+    validateFieldsOnSubmit() {
+        this.setValidationMsgs();
+        // Disable the form submit if form is in invalid state. For delete operation, do not check the validation.
+        if (this.operationType !== 'delete' && (this.validationtype === 'html' || this.validationtype === 'default')
+            && this.ngform && this.ngform.invalid) {
+            if (this.ngform.invalid) {
+                if (this.validationtype === 'default') {
+                    this.highlightInvalidFields();
+                }
+                // Find the first invalid untoched element and set it to touched.
+                // Safari does not form validations. this will ensure that error is shown for user
+                const eleForm = findInvalidElement(this.$element, this.ngform);
+                const $invalidForm = eleForm.ngForm;
+                let $invalidEle = eleForm.$ele;
+                $invalidEle = $invalidEle.parent().find('[focus-target]');
+                const $target = eleForm?.$ele?.parent()?.find('input[type=checkbox], input[type=radio], input[type=file]')?.first();
+                if ($invalidEle.length) {
+                    // on save click in page layout liveform, focus of autocomplete widget opens full-screen search.
+                    if (!$invalidEle.hasClass('app-search-input')) {
+                        $invalidEle.focus();
+                    }
+                    const ngEle = $invalidForm && $invalidForm.controls[$invalidEle.attr('formControlName') || $invalidEle.attr('name')];
+                    if (ngEle && ngEle.markAsTouched) {
+                        ngEle.markAsTouched();
+                    }
+                    $appDigest();
+                    return true;
+                }
+                else if ($target && $target.length) {
+                    $target.focus();
+                }
+                return true;
+            }
+            return false;
+        }
+        return false;
+    }
+    onPropertyChange(key, nv, ov) {
+        switch (key) {
+            case 'captionalign':
+                this.captionAlignClass = 'align-' + nv;
+                break;
+            case 'captionposition':
+                this.setLayoutConfig();
+                break;
+            case 'captionwidth':
+                this.setLayoutConfig();
+                break;
+            case 'captionsize':
+                this.captionsize = nv;
+                break;
+            case 'novalidate':
+                //  Set validation type based on the novalidate property
+                this.widget.validationtype = (nv === true || nv === 'true') ? 'none' : 'default';
+                break;
+            case 'formdata':
+                // For livelist when multiselect is enabled, formdata will be array of objects. In this case consider the last object as formdata.
+                if (isEqual(nv, ov)) {
+                    break;
+                }
+                isArray(nv) ? this.setFormData(last(nv)) : this.setFormData(nv);
+                // if dataset on the formFields are not set as the datasourceChange is triggered before the formFields are registered.
+                if (!this.isDataSourceUpdated && this.datasource) {
+                    this.onDataSourceChange();
+                }
+                break;
+            case 'defaultmode':
+                if (!this.isLayoutDialog) {
+                    if (nv && nv === 'Edit') {
+                        this.updateMode = true;
+                    }
+                    else {
+                        this.updateMode = false;
+                    }
+                    this.isUpdateMode = this.updateMode;
+                }
+                break;
+            case 'datasource':
+                this.onDataSourceChange();
+                break;
+            case 'formdatasource':
+                this.onFormDataSourceChange();
+                break;
+            case 'metadata':
+                this.generateFormFields();
+                break;
+            case 'dataset':
+                const formFields = this.getFormFields();
+                formFields.forEach(field => {
+                    // notifying the dataset change to the form-field widget.
+                    if (!field.isDataSetBound && get(field.formWidget, 'dataset$')) {
+                        field.formWidget.dataset$.next();
+                    }
+                });
+                break;
+            case 'readonly':
+                this.setReadonlyFields();
+                if (nv) {
+                    this?.buttonArray?.forEach((button) => button.disabled = true);
+                }
+                else if (this.formWidgets) {
+                    Object.values(this.formWidgets).forEach(widget => {
+                        const w = widget;
+                        if (w.widgetType === 'wm-form-action' && w.buttonDef) {
+                            w.buttonDef.disabled = w.disabled ?? false;
+                        }
+                    });
+                }
+                break;
+            case 'itemsperrow':
+                setListClass(this);
+                break;
+            default:
+                super.onPropertyChange(key, nv, ov);
+        }
+    }
+    // Event callbacks on success/error
+    onResultCb(data, status, event) {
+        const params = { $event: event, $data: data, $operation: this.operationType };
+        // whether service call success or failure call this method
+        this.invokeEventCallback('result', params);
+        if (status) {
+            // if service call is success call this method
+            this.invokeEventCallback('success', params);
+        }
+        else {
+            // if service call fails call this method
+            this.invokeEventCallback('error', params);
+        }
+    }
+    // Display or hide the inline message/ toaster
+    toggleMessage(show, msg, type, header) {
+        let template;
+        if (show && msg) {
+            template = (type === 'error' && this.errormessage) ? this.errormessage : msg;
+            if (this.messagelayout === 'Inline') {
+                template = this.checkAppServiceErrorMsg(type) || template;
+                this.statusMessage = { 'caption': template || '', type: type };
+                if (this.messageRef) {
+                    this.messageRef.showMessage(this.statusMessage.caption, this.statusMessage.type);
+                }
+                // when message layout is inline on save, scroll the view to top of the form to see the status of the operation
+                if (!isElementInViewport(this.$element[0])) {
+                    scrollToElement(this.$element[0]);
+                }
+            }
+            else {
+                this.app.notifyApp(template, type, header);
+            }
+        }
+        else {
+            this.statusMessage.caption = '';
+        }
+    }
+    // if there is an App.onServiceError handler for the app, that message should be used instead of server returned error message
+    checkAppServiceErrorMsg(type) {
+        const notificationAction = get(this.app, 'Actions.appNotification');
+        if (notificationAction && type === 'error') {
+            return notificationAction.getMessage();
+        }
+        return;
+    }
+    // Hide the inline message/ toaster
+    clearMessage() {
+        this.toggleMessage(false);
+    }
+    // Set the classes on the form based on the captionposition and captionwidth properties
+    setLayoutConfig() {
+        let layoutConfig;
+        layoutConfig = getFieldLayoutConfig(this.captionwidth, this.captionposition, get(this.app.selectedViewPort, 'os'));
+        this._widgetClass = layoutConfig.widgetCls;
+        this._captionClass = layoutConfig.captionCls;
+        $appDigest();
+    }
+    registerFormWidget(widget) {
+        const name = widget.name || widget.key;
+        this.formWidgets[name] = widget;
+    }
+    registerFormFields(formField) {
+        const fieldCount = this.formFields.push(formField);
+        this.formfields[formField.key] = formField;
+        this.registerFormWidget(formField);
+        this._debouncedUpdateFieldSource();
+        if (this.parentForm) {
+            this.parentForm.formFields.push(formField);
+            this.parentForm.formfields[formField.key] = formField;
+            // inner formfields are pushed to parentForm, passing current innerForm's formdata to set innerFormdata to these innerFormFields
+            this.parentForm.setFormData(this.parentForm.formdata, this.formFields, this.formdata || {});
+        }
+        // WMS-18967: Applying formadata after formfields are ready
+        if (fieldCount === this.numberOfFields && !isEmpty(this.formdata)) {
+            this.onDataSourceChange();
+            isArray(this.formdata) ? this.setFormData(last(this.formdata)) : this.setFormData(this.formdata);
+        }
+    }
+    registerActions(formAction) {
+        this.buttonArray.push(formAction);
+    }
+    // Update the dataoutput whenever there is a change in inside form widget value
+    updateFormDataOutput(dataObject) {
+        // Set the values of the widgets inside the live form (other than form fields) in form data
+        forEach(this.ngform.value, (val, key) => {
+            if (!find(this.formFields, { key })) {
+                dataObject[key] = val;
+            }
+        });
+        this.dataoutput = dataObject;
+    }
+    // Construct the data object merging the form fields and custom widgets data
+    constructDataObject() {
+        const formData = {};
+        const formFields = this.getFormFields();
+        // Get all form fields and prepare form data as key value pairs
+        formFields.forEach(field => {
+            let fieldName, fieldValue;
+            fieldValue = field.datavalue || field._control.value;
+            fieldValue = (fieldValue === null || fieldValue === '') ? undefined : fieldValue;
+            if (field.type === 'file') {
+                fieldValue = getFiles(this.name, field.key + '_formWidget', field.multiple);
+            }
+            fieldName = field.key || field.target || field.name;
+            // on current Form, when field is innerForm field then we group these fields under new object using formGroupName as key
+            // For suppose, applicantName, applicantID are formfields in currentForm
+            // This form is having innerform i.e. address, these fields are listed as
+            // {"applicantName": "", "applicantID": "", "address": {"street": ""}}
+            if (field.form.widgetId !== this.widgetId && field.form.formGroupName) {
+                const fd = get(formData, field.form.formGroupName, {});
+                fd[fieldName] = fieldValue;
+                set(formData, field.form.formGroupName, fd);
+            }
+            else if ((typeof field.form.formArrayIndex === 'number') && field.form.isParentList && !this.parentForm) { // Fix for [WMS-25806]: use formArrayIndex only if form has a parent form
+                // setting formdata based on formArrayIndex
+                const fd = get(formData, field.form.parentList.name, []);
+                fd[field.form.formArrayIndex] = fd[field.form.formArrayIndex] || {};
+                fd[field.form.formArrayIndex][fieldName] = fieldValue;
+                set(formData, field.form.parentList.name, fd);
+            }
+            else {
+                // In case of update the field will be already present in form data
+                set(formData, fieldName, fieldValue);
+            }
+        });
+        this.updateFormDataOutput(formData);
+        return this.dataoutput;
+    }
+    updateDataOutput() {
+        this.constructDataObject();
+        if (this.ngform.touched) {
+            this.setValidationMsgs(true);
+        }
+    }
+    // FormFields will contain all the fields in parent and inner form also.
+    // This returns the formFields in the form based on the form name.
+    getFormFields() {
+        return filter(this.formFields, formField => {
+            return formField.form.name === this.name;
+        });
+    }
+    setFieldValue(field, data, innerFormdata) {
+        const key = field.key || field.name;
+        // if customfield param value is not in the formdata then do not assign field value
+        // as it can contain default value which will again be overridden by undefined.
+        const fd = innerFormdata ? innerFormdata : data;
+        if (fd) {
+            // Fix for [WMS-31245]: when child form has no formdata and if its field has default value,
+            // then use default value instead of parent data
+            const isInnerFormField = field.form.parentForm?.name == this.name;
+            if (isInnerFormField && isEmpty(innerFormdata)) {
+                field.value = field.defaultvalue;
+            }
+            else if (fd.hasOwnProperty(key)) {
+                field.value = get(fd, key);
+            }
+            else if (includes(key, '.')) {
+                // key contains '.' when mapping the fields to child reference i.e. childCol is having key as "parent.childCol"
+                if (fd.hasOwnProperty(split(key, '.')[0])) {
+                    field.value = get(fd, key);
+                }
+            }
+            // WMS-18906: For default value, do not mark the form as dirty.
+            if (this.dirty && !this._triggeredByUser) {
+                this.markAsPristine();
+            }
+        }
+        const formGroupName = field.form.formGroupName;
+        /**
+         * if formGroupName is defined which means field is inside the inner form
+         * then set the formdata on the field's form using formGroupName
+         */
+        if (formGroupName && get(data, formGroupName)) {
+            this.setFormData.call(field.form, data[formGroupName]);
+        }
+        // if formdata is assigned later then on propertyChangeHandler, even inner forms data also needs to be updated.
+        if (get(field.form, 'parentFormArray')) {
+            this.setFormDataFromParentFormData.call(field.form, data);
+        }
+    }
+    setFormData(data, innerFormFields, innerFormdata) {
+        // whereas formFields explicitly passed can contain innerform fields also.
+        const formFields = innerFormFields || this.formFields;
+        formFields.forEach(field => {
+            this.setFieldValue(field, data, innerFormdata);
+            if (field.fieldValidations) {
+                field.fieldValidations.setCustomValidationMessage();
+            }
+        });
+        this.constructDataObject();
+    }
+    resetFormState() {
+        // clearing the validationMessages on reset.
+        if (this.validationMessages.length) {
+            this.validationMessages = [];
+        }
+        if (!this.ngform) {
+            return;
+        }
+        this.ngform.markAsUntouched();
+        this.ngform.markAsPristine();
+    }
+    reset() {
+        this.resetFormState();
+        this.formFields.forEach(field => {
+            field.value = '';
+            if (field.widgettype === 'upload' || field.type === DataType.BLOB) {
+                this.resetFileUploadWidget(field, true);
+            }
+            else if (field.widgettype === 'slider') {
+                this.resetSliderWidget(field);
+            }
+            field.nativeElement.querySelector('input')?.removeAttribute('aria-invalid');
+        });
+        this.constructDataObject();
+        this.clearMessage();
+    }
+    resetSliderWidget(field) {
+        const $formEle = this.$element;
+        const slider = $formEle.find('[name="' + field.key + '_formWidget"]').closest('.slider-control');
+        if (slider.length) {
+            slider.css('--end', `50%`);
+        }
+    }
+    savePrevformFields() {
+        this.prevformFields = getClonedObject(this.formFields.map(field => {
+            return {
+                'key': field.key,
+                'type': field.type,
+                'widgettype': field.widgettype,
+                'outputformat': field.outputformat,
+                'value': field.value
+            };
+        }));
+    }
+    savePrevDataValues() {
+        this.prevDataValues = this.formFields.map((obj) => {
+            return { 'key': obj.key, 'value': obj.value };
+        });
+    }
+    setReadonlyFields() {
+        this.formFields.forEach(field => {
+            field.setReadOnlyState();
+        });
+    }
+    resetFileUploadWidget(field, skipValueSet) {
+        const $formEle = this.$element;
+        $formEle.find('[name="' + field.key + '_formWidget"]').val('');
+        field._control.reset();
+        if (!skipValueSet) {
+            field.href = '';
+            field.value = null;
+        }
+    }
+    emptyDataModel() {
+        this.formFields.forEach(field => {
+            if (isDefined(field)) {
+                if (field.type === DataType.BLOB) {
+                    this.resetFileUploadWidget(field);
+                }
+                else {
+                    field.datavalue = '';
+                }
+            }
+        });
+    }
+    setDefaultValues() {
+        this.formFields.forEach(field => {
+            this.onFieldDefaultValueChange(field, field.defaultvalue);
+        });
+    }
+    setOperationType(mode) {
+        this.operationType = mode || 'insert';
+    }
+    new() {
+        this.resetFormState();
+        this.operationType = Live_Operations.INSERT;
+        this.clearMessage();
+        if (this.isSelected) {
+            this.savePrevformFields();
+        }
+        this.emptyDataModel();
+        setTimeout(() => {
+            this.setDefaultValues();
+            this.savePrevDataValues();
+            this.constructDataObject();
+        });
+        this.isUpdateMode = true;
+    }
+    edit() {
+        this.resetFormState();
+        this.clearMessage();
+        this.operationType = Live_Operations.UPDATE;
+        if (this.isSelected) {
+            this.savePrevformFields();
+            this.savePrevDataValues();
+        }
+        this.prevDataObject = getClonedObject(this.formdata || {});
+        this.setReadonlyFields();
+        this.isUpdateMode = true;
+        $appDigest();
+    }
+    triggerWMEvent(eventName) {
+        const tableId = this.nativeElement.getAttribute('dependsontable');
+        if (!tableId) {
+            return;
+        }
+        $invokeWatchers(true);
+        this.app.notify('wm-event', { eventName, widgetName: tableId });
+    }
+    submitForm($event) {
+        let template, formData, result;
+        const dataSource = this.datasource;
+        // Disable the form submit if form is in invalid state.
+        if (this.validateFieldsOnSubmit()) {
+            return;
+        }
+        formData = getClonedObject(this.constructDataObject());
+        const getParams = () => {
+            return { $event, $formData: formData, $data: formData };
+        };
+        if (this.onBeforeSubmitEvt) {
+            if (this.invokeEventCallback('beforesubmit', getParams()) === false) {
+                return;
+            }
+            else {
+                this.resetFormState();
+            }
+        }
+        else {
+            this.resetFormState();
+        }
+        if (this.onSubmitEvt || dataSource) {
+            // If on submit is there execute it and if it returns true do service variable invoke else return
+            // If its a service variable call setInput and assign form data and invoke the service
+            if (dataSource) {
+                const currentPageNum = dataSource.pagination && dataSource.pagination.number + 1;
+                const operationType = this.operationType ? this.operationType : 'insert';
+                performDataOperation(dataSource, formData, { operationType: operationType })
+                    .then((data) => {
+                    if (dataSource.category === 'wm.CrudVariable') {
+                        this.triggerWMEvent('resetEditMode');
+                        this.datasource.execute(DataSource.Operation.LIST_RECORDS, {
+                            'skipToggleState': true,
+                            'operation': 'list',
+                            'page': currentPageNum,
+                            'preventMissingOpMsg': true
+                        });
+                        if (this.dialogId) {
+                            this.closeDialog();
+                        }
+                    }
+                    if (isDefined(data.body)) {
+                        result = getValidJSON(data.body);
+                        result = isDefined(result) ? result : data.body;
+                    }
+                    else {
+                        result = data;
+                    }
+                    return {
+                        'result': result,
+                        'status': true,
+                        'message': this.postmessage,
+                        'type': 'success'
+                    };
+                }, (error) => {
+                    template = this.errormessage || error.error || error;
+                    $appDigest();
+                    return {
+                        'result': get(error, 'error') || error,
+                        'status': false,
+                        'message': template,
+                        'type': 'error'
+                    };
+                }).then(response => {
+                    if ((response.type === 'error' && !this.onError) || (response.type === 'success' && !this.onSuccess)) {
+                        this.toggleMessage(true, response.message, response.type);
+                    }
+                    this.invokeEventCallback('submit', getParams());
+                    this.onResultCb(response.result, response.status, $event);
+                });
+            }
+            else {
+                this.invokeEventCallback('submit', getParams());
+                this.onResultCb({}, true, $event);
+            }
+        }
+        else {
+            this.onResultCb({}, true, $event);
+        }
+    }
+    closeDialog() {
+        this.dialogService.close(this.dialogId);
+    }
+    // Method to show/hide the panel header or footer based on the buttons
+    showButtons(position) {
+        return some(this.buttonArray, btn => {
+            return includes(btn.position, position) && btn.updateMode === this.isUpdateMode;
+        });
+    }
+    // Expand or collapse the panel
+    expandCollapsePanel() {
+        if (this.collapsible) {
+            // flip the active flag
+            this.expanded = !this.expanded;
+        }
+    }
+    onDataSourceUpdate(response, newForm, updateMode) {
+        if (newForm) {
+            this.new();
+        }
+        else {
+            this.setFormData(response);
+            this.closeDialog();
+        }
+        this.isUpdateMode = isDefined(updateMode) ? updateMode : true;
+    }
+    /**
+     * This method tranverses through the parent containing formdata and returns the parent formdata.
+     * @param form, represents the current form instance
+     * @returns {any}
+     */
+    getNearestParentFormData(form) {
+        if (!form.parentForm) {
+            return {};
+        }
+        if (!form.bindformdata && get(form.parentForm, 'formdata') && !isEmpty(form.parentForm.formdata)) {
+            return form.parentForm.formdata;
+        }
+        return this.getNearestParentFormData(form.parentForm);
+    }
+    setFormDataFromParentFormData(formdata) {
+        if (isEmpty(this.formdata) && this.parentForm && formdata) {
+            /**
+             * If form is inside list,
+             * 1. directly applying the formdata to the formArray to update the formdata on list of forms using patchValue.
+             * 2. and also setting individual formdata to the form inside each item based on formArrayIndex, when form is not bound to formdata.
+             * 3. explicitly invoking formdata as formFields will contain all the formfields including innerForm's fields
+             * (if we do not invoke explicitly then formFields will just contain the fields inside current form and not inner form fields)
+             * 4. if childFormArrayData is not available we will check for inner form data using "formGroupName" and will set the innerform data
+             * If not inside list, just set the formdata on all the formfields including innerForm fields
+             */
+            if (this.parentFormArray) {
+                let childFormArrayData = get(formdata, this.parentList.name);
+                if (childFormArrayData) {
+                    if (!isArray(childFormArrayData)) {
+                        childFormArrayData = [childFormArrayData];
+                    }
+                    this.parentFormArray.patchValue(childFormArrayData);
+                    if (!this.bindformdata) {
+                        this.formdata = childFormArrayData[this.formArrayIndex];
+                    }
+                    this.setFormData(this.formdata);
+                }
+                else if (this.isParentList && this.parentForm.formGroupName) {
+                    const parentFormData = get(formdata, this.parentForm.formGroupName);
+                    this.setFormDataFromParentFormData(parentFormData);
+                }
+            }
+            else {
+                this.setFormData(formdata);
+            }
+        }
+    }
+    // On form data source change. This method is overridden by live form and live filter
+    onDataSourceChange() {
+        if (get(this.formFields, 'length') && !this.bindformdata) {
+            this.isDataSourceUpdated = true;
+            /**
+             * formdata on the parent form will be set before the inner forms are rendered.
+             * Hence handling formdata on the innerForms, which might be rendered slowly (suppose prefab with form)
+             * setting inner form's formdata obtained from parent formdata
+             * this applies only when formdata is not given on the inner form.
+             */
+            const formdata = this.getNearestParentFormData(this);
+            this.setFormDataFromParentFormData(formdata);
+        }
+    }
+    // On form data source change. This method is overridden by live form and live filter
+    onFormDataSourceChange() {
+        this.updateFieldSource();
+    }
+    // On form field default value change. This method is overridden by live form and live filter
+    onFieldDefaultValueChange(field, nv) {
+        field.value = parseValueByType(nv, undefined, field.widgettype, field.trailingzero);
+        // WMS-22434: For default value set on individual form fields, do not mark the form as dirty.
+        if (this.dirty && !this._triggeredByUser) {
+            this.markAsPristine();
+        }
+    }
+    // On form field value change. This method is overridden by live form and live filter
+    onFieldValueChange() {
+    }
+    // Function to generate and compile the form fields from the metadata
+    async generateFormFields() {
+        let noOfColumns;
+        let $gridLayout;
+        // Check if grid layout is present or not for first time
+        if (isUndefined(this._isGridLayoutPresent)) {
+            this._isGridLayoutPresent = this.$element.find('.panel-body [wmlayoutgrid]').length > 0;
+        }
+        if (this._isGridLayoutPresent) {
+            $gridLayout = this.$element.find('.form-elements [wmlayoutgrid]').first();
+            noOfColumns = Number($gridLayout.attr('columns')) || 1;
+        }
+        else {
+            $gridLayout = this.$element.find('.form-elements .dynamic-form-container');
+            if (!$gridLayout.length) {
+                this.$element.find('.form-elements').prepend('<div class="dynamic-form-container"></div>');
+                $gridLayout = this.$element.find('.form-elements .dynamic-form-container');
+            }
+            noOfColumns = 1;
+        }
+        const columnWidth = 12 / noOfColumns;
+        let fieldTemplate = '';
+        let colCount = 0;
+        let index;
+        let userFields;
+        let fields = this.metadata ? this.metadata.data || this.metadata : [];
+        this.formFields = []; // empty the form fields
+        if (isEmpty(fields)) {
+            return;
+        }
+        if (this.onBeforeRenderEvt) {
+            userFields = this.invokeEventCallback('beforerender', { $metadata: fields });
+            if (userFields) {
+                fields = userFields;
+            }
+        }
+        if (!isArray(fields)) {
+            return;
+        }
+        while (fields[colCount]) {
+            let colTmpl = '';
+            for (index = 0; index < noOfColumns; index++) {
+                if (fields[colCount]) {
+                    colTmpl += setMarkupForFormField(fields[colCount], columnWidth);
+                }
+                colCount++;
+            }
+            fieldTemplate += `<wm-gridrow>${colTmpl}</wm-gridrow>`;
+        }
+        if (!this._isGridLayoutPresent) {
+            fieldTemplate = `<wm-layoutgrid>${fieldTemplate}</wm-layoutgrid>`;
+        }
+        this.dynamicFormRef.clear();
+        // Setup dynamic context for the form component
+        if (!this._dynamicContext) {
+            this._dynamicContext = Object.create(this.viewParent);
+            this._dynamicContext.form = this;
+        }
+        try {
+            // Generate unique component selector for this dynamic form instance
+            const componentSelector = `app-form-dynamic-${this.widgetId}`;
+            // Get the dynamically compiled form component class
+            const DynamicFormComponentClass = await this.dynamicComponentProvider.getComponentFactoryRef(componentSelector, fieldTemplate, {
+                noCache: true,
+                transpile: true
+            });
+            if (!DynamicFormComponentClass) {
+                console.error(`Failed to create dynamic form component: ${componentSelector}`);
+                return;
+            }
+            // Create component with both environmentInjector (for standalone imports/providers)
+            // and injector (for element-level dependencies)
+            const componentRef = this.dynamicFormRef.createComponent(DynamicFormComponentClass, {
+                index: 0,
+                environmentInjector: this.envInjector,
+                injector: this.inj
+            });
+            // Extend component instance with dynamic context
+            extendProto(componentRef.instance, this._dynamicContext);
+            // Append to DOM
+            if ($gridLayout[0]) {
+                $gridLayout[0].appendChild(componentRef.location.nativeElement);
+            }
+            else {
+                console.error('Form grid layout element not found');
+            }
+            // Set form data after component creation
+            this.setFormData(this.formdata);
+        }
+        catch (error) {
+            console.error('Error creating dynamic form component:', error);
+        }
+    }
+    get mode() {
+        return this.operationType || this.findOperationType();
+    }
+    get dirty() {
+        return this.ngform && this.ngform.dirty;
+    }
+    /**
+     * This method sets the form state to pristine by internally calling angular markAsPristine method on the form
+     * @param value, When true, mark only this control. When false or not supplied, marks all direct ancestors. Default is false
+     * @returns {void}
+     */
+    markAsPristine(value = false) {
+        this.ngform.markAsPristine({ onlySelf: value });
+    }
+    /**
+     * This method sets the form state to dirty by internally calling angular markAsDirty method on the form
+     * @param value, When true, mark only this control. When false or not supplied, marks all direct ancestors. Default is false
+     * @returns {void}
+     */
+    markAsDirty(value = false) {
+        this.ngform.markAsDirty({ onlySelf: value });
+    }
+    get invalid() {
+        return this.ngform && this.ngform.invalid;
+    }
+    get touched() {
+        return this.ngform && this.ngform.touched;
+    }
+    get valid() {
+        return this.ngform && this.ngform.valid;
+    }
+    get pristine() {
+        return this.ngform && this.ngform.pristine;
+    }
+    /**
+     * This method sets the form state to touched by internally calling angular markAsTouched method on the form
+     * @param value, When true, mark only this control. When false or not supplied, marks all direct ancestors. Default is false
+     * @returns {void}
+     */
+    markAsTouched(value = false) {
+        this.ngform.markAsTouched({ onlySelf: value });
+    }
+    /**
+     * This method sets the form state to untouched by internally calling angular markAsUntouched method on the form
+     * @param value, When true, mark only this control. When false or not supplied, marks all direct ancestors. Default is false
+     * @returns {void}
+     */
+    markAsUntouched(value = false) {
+        this.ngform.markAsUntouched({ onlySelf: value });
+    }
+    invokeActionEvent($event, expression) {
+        const fn = $parseEvent(expression);
+        fn(this.viewParent, Object.assign(this.context, { $event }));
+    }
+    ngOnDestroy() {
+        // on form destroy, removing this form from the parentForm too.
+        const controls = this.parentForm && get(this.parentForm, 'ngform.controls');
+        if (controls) {
+            // when current form is inside the list (i.e. incase of formArray).
+            if (get(this.parentList, 'name') && controls.hasOwnProperty(this.parentList.name)) {
+                //get the index of current form in the list and remove the FormControl from FormArray
+                const index = findIndex(this.parentList.getWidgets(this.name), { widgetId: this.widgetId });
+                this.parentForm.ngform.controls[this.parentList.name].removeAt(index);
+            }
+            // when we have formGroupName set i.e. multiple formInstance with counter appended to formName
+            if (this.formGroupName && controls.hasOwnProperty(this.formGroupName)) {
+                this.parentForm.ngform.removeControl(this.formGroupName);
+            }
+            else {
+                this.parentForm.ngform.removeControl(this.name);
+            }
+        }
+        // MEMORY LEAK FIX: Clear ViewContainerRef for dynamically generated form fields
+        if (this.dynamicFormRef) {
+            this.dynamicFormRef.clear();
+        }
+        // MEMORY LEAK FIX: Clear dynamic context object
+        if (this._dynamicContext) {
+            Object.keys(this._dynamicContext).forEach(key => {
+                delete this._dynamicContext[key];
+            });
+            this._dynamicContext = null;
+        }
+        // MEMORY LEAK FIX: Clear all data arrays and objects
+        this.formFields = [];
+        this.formWidgets = {};
+        this.filterWidgets = {};
+        this.buttonArray = [];
+        this.validationMessages = [];
+        this.formdata = {};
+        this.dataoutput = {};
+        this.formfields = {};
+        this.prevDataValues = null;
+        this.prevDataObject = null;
+        this.prevformFields = null;
+        // MEMORY LEAK FIX: Nullify debounced function closures
+        this._debouncedUpdateFieldSource = null;
+        this._debouncedSubmitForm = null;
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormComponent, deps: [{ token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: i1.FormBuilder }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }, { token: i1$1.DynamicComponentRefProvider }, { token: i0.NgZone }, { token: i3.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4.PrefabDirective, optional: true, skipSelf: true }, { token: i5.PartialDirective, optional: true, skipSelf: true }, { token: 'beforesubmit.event', attribute: true }, { token: 'submit.event', attribute: true }, { token: 'beforerender.event', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'formdata.bind', attribute: true }, { token: 'wmLiveForm', attribute: true }, { token: 'wmLiveFilter', attribute: true }, { token: 'data-role', attribute: true }, { token: 'key', attribute: true }, { token: 'name', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormComponent, isStandalone: true, selector: "form[wmForm]", host: { listeners: { "submit": "submit($event)", "reset": "onReset()", "keydown": "onKeydownHandler($event)" }, properties: { "action": "this.action" } }, providers: [
+            provideAsWidgetRef(FormComponent)
+        ], queries: [{ propertyName: "componentRefs", predicate: WidgetRef, descendants: true }], viewQueries: [{ propertyName: "dynamicFormRef", first: true, predicate: ["dynamicForm"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "messageRef", first: true, predicate: MessageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content><ng-content></ng-content></ng-template>\n\n@if (formlayout === 'page') {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  @if (!isLayoutDialog && (title || subheading || iconclass || iconurl || showButtons('header'))) {\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n          @if (iconclass || iconurl) {\n            <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [iconClasses]=\"iconurl ? 'panel-image-icon' : 'panel-icon'\" alt=\"Form icon\"></wm-app-icon>\n          }\n        </div>\n        <div class=\"pull-left\">\n          <div class=\"heading\" [innerHTML]=\"title\"></div>\n          <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n        <div class=\"form-action panel-actions basic-btn-grp\">\n          @for (btn of buttonArray | filter : 'position' : 'header'; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('action_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (collapsible) {\n            <button type=\"button\" class=\"app-icon wi panel-action\" [title]=\"expanded? (appLocale?.LABEL_COLLAPSE||'Collapse'):(appLocale?.LABEL_EXPAND||'Expand')\"\n            [ngClass]=\"expanded ? 'wi-minus': 'wi-plus'\" (click)=\"expandCollapsePanel();\"></button>\n          }\n        </div>\n      </h3>\n    </div>\n  }\n  <div class=\"panel-body\" [ngClass]=\"{'form-elements': isLayoutDialog, 'form-body': !isLayoutDialog}\" [class.hidden]=\"!expanded\">\n    @if (!!statusMessage.caption) {\n      <p wmMessage [attr.aria-hidden]=\"!statusMessage.caption\" [attr.aria-label]=\"statusMessage.caption\" caption.bind=\"statusMessage.caption\" type.bind=\"statusMessage.type\"></p>\n    }\n    <div [ngClass]=\"{'form-elements': !isLayoutDialog, 'form-content': isLayoutDialog}\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div class=\"basic-btn-grp form-action panel-footer clearfix\" [ngClass]=\"{'modal-footer': isLayoutDialog}\" [class.hidden]=\"!expanded || !showButtons('footer')\">\n      @for (btn of buttonArray | filter : 'position' : 'footer'; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('action_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  </div>\n}\n\n\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button  wmButton name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n    (click)=\"invokeActionEvent($event, btn.action)\" type.bind=\"btn.type\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\" disabled.bind=\"ngform.status === 'PENDING' || btn.disabled\"\n  tabindex.bind=\"btn.tabindex\" [attr.aria-label]=\"btn.displayName\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n    (click)=\"invokeActionEvent($event, btn.action)\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\"\n    hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\"\n  tabindex.bind=\"btn.tabindex\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></a>\n</ng-template>\n\n<ng-container #dynamicForm></ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "component", type: MessageComponent, selector: "[wmMessage]", exportAs: ["wmMessage"] }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FilterPipe, AnchorComponent, ButtonComponent, MessageComponent, WmAppIconComponent], selector: 'form[wmForm]', providers: [
+                        provideAsWidgetRef(FormComponent)
+                    ], template: "<ng-template #content><ng-content></ng-content></ng-template>\n\n@if (formlayout === 'page') {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  @if (!isLayoutDialog && (title || subheading || iconclass || iconurl || showButtons('header'))) {\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n          @if (iconclass || iconurl) {\n            <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [iconClasses]=\"iconurl ? 'panel-image-icon' : 'panel-icon'\" alt=\"Form icon\"></wm-app-icon>\n          }\n        </div>\n        <div class=\"pull-left\">\n          <div class=\"heading\" [innerHTML]=\"title\"></div>\n          <div class=\"description\" [innerHTML]=\"subheading\"></div>\n        </div>\n        <div class=\"form-action panel-actions basic-btn-grp\">\n          @for (btn of buttonArray | filter : 'position' : 'header'; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('action_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (collapsible) {\n            <button type=\"button\" class=\"app-icon wi panel-action\" [title]=\"expanded? (appLocale?.LABEL_COLLAPSE||'Collapse'):(appLocale?.LABEL_EXPAND||'Expand')\"\n            [ngClass]=\"expanded ? 'wi-minus': 'wi-plus'\" (click)=\"expandCollapsePanel();\"></button>\n          }\n        </div>\n      </h3>\n    </div>\n  }\n  <div class=\"panel-body\" [ngClass]=\"{'form-elements': isLayoutDialog, 'form-body': !isLayoutDialog}\" [class.hidden]=\"!expanded\">\n    @if (!!statusMessage.caption) {\n      <p wmMessage [attr.aria-hidden]=\"!statusMessage.caption\" [attr.aria-label]=\"statusMessage.caption\" caption.bind=\"statusMessage.caption\" type.bind=\"statusMessage.type\"></p>\n    }\n    <div [ngClass]=\"{'form-elements': !isLayoutDialog, 'form-content': isLayoutDialog}\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div class=\"basic-btn-grp form-action panel-footer clearfix\" [ngClass]=\"{'modal-footer': isLayoutDialog}\" [class.hidden]=\"!expanded || !showButtons('footer')\">\n      @for (btn of buttonArray | filter : 'position' : 'footer'; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('action_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  </div>\n}\n\n\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button  wmButton name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n    (click)=\"invokeActionEvent($event, btn.action)\" type.bind=\"btn.type\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\" disabled.bind=\"ngform.status === 'PENDING' || btn.disabled\"\n  tabindex.bind=\"btn.tabindex\" [attr.aria-label]=\"btn.displayName\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n    (click)=\"invokeActionEvent($event, btn.action)\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\"\n    hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\"\n  tabindex.bind=\"btn.tabindex\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></a>\n</ng-template>\n\n<ng-container #dynamicForm></ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.EnvironmentInjector }, { type: i1.FormBuilder }, { type: i1$1.App }, { type: i1$1.AbstractDialogService }, { type: i1$1.DynamicComponentRefProvider }, { type: i0.NgZone }, { type: i3.ListComponent, decorators: [{
+                    type: Optional
+                }] }, { type: FormComponent, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Optional
+                }] }, { type: i4.PrefabDirective, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Optional
+                }] }, { type: i5.PartialDirective, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['beforesubmit.event']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['submit.event']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['beforerender.event']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['dataset.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['formdata.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['wmLiveForm']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['wmLiveFilter']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['data-role']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['key']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['name']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { dynamicFormRef: [{
+                type: ViewChild,
+                args: ['dynamicForm', { static: true, read: ViewContainerRef }]
+            }], messageRef: [{
+                type: ViewChild,
+                args: [MessageComponent]
+            }], componentRefs: [{
+                type: ContentChildren,
+                args: [WidgetRef, { descendants: true }]
+            }], action: [{
+                type: HostBinding,
+                args: ['action']
+            }], submit: [{
+                type: HostListener,
+                args: ['submit', ['$event']]
+            }], onReset: [{
+                type: HostListener,
+                args: ['reset']
+            }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class FormWidgetDirective {
+    constructor(form, table, componentInstance, fb, name, key) {
+        this.componentInstance = componentInstance;
+        this.name = name;
+        this.key = key;
+        this.fb = fb;
+        this.parent = form || table;
+        this.ngform = this.parent.ngform;
+        this.componentInstance.registerPropertyChangeListener((k, nv) => {
+            if (k === 'datavalue' && this._control) {
+                this._control.setValue(nv);
+            }
+            else if (k === 'name' && !this._control) {
+                this.addControl(this.key || nv);
+            }
+        });
+    }
+    get _control() {
+        const fieldName = this.key || this.name;
+        if (!fieldName) {
+            return undefined;
+        }
+        return this.ngform && this.ngform.controls[fieldName];
+    }
+    addControl(fieldName) {
+        this.ngform.addControl(fieldName, this.createControl());
+    }
+    createControl() {
+        return this.fb.control(this.componentInstance.datavalue);
+    }
+    ngOnInit() {
+        const fieldName = this.key || this.name;
+        if (fieldName && !this._control) {
+            this.addControl(fieldName);
+            this.parent.registerFormWidget(this.componentInstance);
+        }
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear all references
+        this.ngform = null;
+        this.fb = null;
+        this.parent = null;
+        this.componentInstance = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: TableComponent, optional: true }, { token: WidgetRef, self: true }, { token: i1.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormWidgetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wmFormWidget]'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FormComponent]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TableComponent]
+                }] }, { type: undefined, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [WidgetRef]
+                }] }, { type: i1.FormBuilder }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['name']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['key']
+                }] }] });
+
+const registerProps$1 = () => {
+    register('wm-form-action', new Map([
+        ['accessroles', PROP_STRING],
+        ['action', PROP_STRING],
+        ['class', PROP_STRING],
+        ['binding', PROP_STRING],
+        ['disabled', PROP_BOOLEAN],
+        ['display-name', PROP_STRING],
+        ['hyperlink', PROP_STRING],
+        ['iconclass', PROP_STRING],
+        ['iconname', PROP_STRING],
+        ['key', PROP_STRING],
+        ['position', { value: 'footer', ...PROP_STRING }],
+        ['shortcutkey', PROP_STRING],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['tabindex', { value: 0, ...PROP_NUMBER }],
+        ['target', PROP_STRING],
+        ['title', PROP_STRING],
+        ['type', { value: 'button', ...PROP_STRING }],
+        ['update-mode', { value: true, ...PROP_BOOLEAN }],
+        ['widget-type', { value: 'button', ...PROP_STRING }]
+    ]));
+};
+
+const WIDGET_CONFIG = { widgetType: 'wm-form-action', hostClass: '' };
+class FormActionDirective extends BaseComponent {
+    static { this.initializeProps = registerProps$1(); }
+    constructor(inj, form, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.form = form;
+    }
+    populateAction() {
+        this.buttonDef = {
+            key: this.key || this.binding,
+            displayName: this['display-name'],
+            show: this.show,
+            class: this.class ? this.class : (this['widget-type'] === 'button' ? 'btn-secondary' : ''),
+            iconclass: this.iconclass || '',
+            title: isUndefined(this.title) ? (this['display-name'] || '') : this.title,
+            action: this.action,
+            accessroles: this.accessroles,
+            shortcutkey: this.shortcutkey,
+            disabled: this.disabled || this.form.readonly,
+            tabindex: this.tabindex,
+            iconname: this.iconname,
+            type: this.type,
+            updateMode: this['update-mode'],
+            position: this.position,
+            widgetType: this['widget-type'],
+            hyperlink: this.hyperlink,
+            target: this.target
+        };
+        this._propsInitialized = true;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.populateAction();
+        this.form.registerActions(this.buttonDef);
+    }
+    onPropertyChange(key, nv, ov) {
+        if (!this._propsInitialized) {
+            return;
+        }
+        switch (key) {
+            case 'disabled':
+                this.buttonDef[key] = nv || this.form.readonly;
+                break;
+            case 'display-name':
+                this.buttonDef.displayName = nv;
+            default:
+                this.buttonDef[key] = nv;
+                break;
+        }
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear references
+        this.form = null;
+        this.buttonDef = null;
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormActionDirective, deps: [{ token: i0.Injector }, { token: FormComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
+            provideAsWidgetRef(FormActionDirective)
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wmFormAction]',
+                    providers: [
+                        provideAsWidgetRef(FormActionDirective)
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: FormComponent, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }] });
+
+const registerProps = () => {
+    const formFieldMap = new Map([
+        ['dataentrymode', { value: 'default', ...PROP_STRING }],
+        ['debouncetime', { value: 250, ...PROP_NUMBER }],
+        ['defaultvalue', PROP_STRING],
+        ['displayname', PROP_STRING],
+        ['display-name', PROP_STRING],
+        ['field', PROP_STRING],
+        ['filterexpressions', PROP_STRING],
+        ['filter-on', PROP_STRING],
+        ['generator', PROP_STRING],
+        ['hint', PROP_STRING],
+        ['inputtype', PROP_STRING],
+        ['is-primary-key', PROP_BOOLEAN],
+        ['is-range', PROP_BOOLEAN],
+        ['is-related', PROP_BOOLEAN],
+        ['isformfield', { value: true }],
+        ['key', PROP_STRING],
+        ['limit', PROP_NUMBER],
+        ['lookup-type', PROP_STRING],
+        ['lookup-field', PROP_STRING],
+        ['name', PROP_STRING],
+        ['matchmode', PROP_STRING],
+        ['maxdefaultvalue', PROP_STRING],
+        ['maxplaceholder', PROP_STRING],
+        ['mobile-display', { value: true, ...PROP_BOOLEAN }],
+        ['period', PROP_BOOLEAN],
+        ['pc-display', { value: true, ...PROP_BOOLEAN }],
+        ['placeholder', PROP_STRING],
+        ['primary-key', PROP_BOOLEAN],
+        ['related-entity-name', PROP_STRING],
+        ['required', PROP_BOOLEAN],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['tablet-display', { value: true, ...PROP_BOOLEAN }],
+        ['type', PROP_STRING],
+        ['validationmessage', PROP_STRING],
+        ['viewmodewidget', PROP_STRING],
+        ['widgettype', PROP_STRING]
+    ]);
+    for (const key in FormWidgetType) {
+        const widgetName = 'wm-form-field-' + FormWidgetType[key];
+        const widgetProps = getWidgetPropsByType(widgetName);
+        formFieldMap.forEach((v, k) => {
+            if (widgetProps.get(k) == undefined) {
+                widgetProps.set(k, v);
+            }
+        });
+    }
+};
+
+// Custom validator to show validation error, if setValidationMessage method is used
+const customValidatorFn = () => {
+    return { custom: true };
+};
+const FILE_TYPES = {
+    'image': 'image/*',
+    'video': 'video/*',
+    'audio': 'audio/*'
+};
+class FormFieldDirective extends StylableComponent {
+    static { this.initializeProps = registerProps(); }
+    onKeydownHandler(event) {
+        this._triggeredByUser = true;
+    }
+    handleClick(event) {
+        this._clicktriggeredByUser = true;
+    }
+    constructor(inj, form, fb, viewport, app, parentList, bindChipclass, binddataset, binddisplayexpression, binddisplaylabel, _widgetType, name, binddisplayimagesrc, key, isRange, pcDisplay, mobileDisplay, tabletDisplay, contexts, explicitContext) {
+        const WIDGET_CONFIG = {
+            widgetType: 'wm-form-field',
+            hostClass: '',
+            widgetSubType: 'wm-form-field-' + (_widgetType || FormWidgetType.TEXT).trim()
+        };
+        let resolveFn = noop$1;
+        super(inj, WIDGET_CONFIG, explicitContext, new Promise(res => resolveFn = res));
+        this._initPropsRes = resolveFn;
+        this.app = app;
+        this.fieldDefConfig = {};
+        this.class = '';
+        this.binddataset = binddataset;
+        this.binddisplayimagesrc = binddisplayimagesrc;
+        this.binddisplayexpression = binddisplayexpression;
+        this.bindChipclass = bindChipclass;
+        this.binddisplaylabel = binddisplaylabel;
+        this.form = form;
+        this.fb = fb;
+        this.viewport = viewport;
+        this._fieldName = key || name;
+        this.isRange = isRange;
+        this.excludeProps = new Set(['type', 'name']);
+        this.widgettype = _widgetType;
+        this.parentList = parentList;
+        this.notifyForFields = [];
+        if (this.binddataset || this.$element.attr('dataset')) {
+            this.isDataSetBound = true;
+        }
+        contexts[0]._onFocusField = this._onFocusField.bind(this);
+        contexts[0]._onBlurField = this._onBlurField.bind(this);
+        this._debounceSetUpValidators = debounce$1(() => this.setUpValidators(), 500);
+    }
+    _onFocusField($evt) {
+        this._activeField = true;
+        $($evt.target).closest('.live-field').addClass('active');
+    }
+    // Function to get the active element markup based on widget type
+    getActiveElement() {
+        const widgetType = this.nativeElement.getAttribute('widgettype');
+        switch (widgetType) {
+            case 'select':
+                return this.nativeElement.querySelector('select');
+            case 'textarea':
+                return this.nativeElement.querySelector('textarea');
+            default:
+                return this.nativeElement.querySelector('input');
+        }
+    }
+    setAriaAttributes() {
+        const element = this.getActiveElement();
+        if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
+            this.nativeElement.setAttribute('__errormsg', `${this.nativeElement.getAttribute('__validationId')}`);
+            element?.setAttribute('aria-invalid', `${this.ngform.controls[this._fieldName].invalid}`);
+            element?.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__validationId')}`);
+        }
+        else {
+            this.nativeElement.removeAttribute('__errormsg');
+            element?.removeAttribute('aria-invalid');
+            element?.removeAttribute('aria-describedby');
+        }
+    }
+    _onBlurField($evt) {
+        $($evt.target).closest('.live-field').removeClass('active');
+        const ele = this.nativeElement.querySelector('p.text-danger');
+        // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
+        this.setAriaAttributes();
+        this._activeField = false;
+        this._triggeredByUser = false;
+        this._clicktriggeredByUser = false;
+    }
+    // Expression to be evaluated in view mode of form field
+    evaluateExpr(object, displayField, displayExpr) {
+        if (!displayExpr || !displayField) {
+            displayField = Object.keys(object)[0];
+            // If dataset is not ready, display expression will not be defined
+            if (!displayField) {
+                return;
+            }
+        }
+        return getEvaluatedData(object, {
+            field: displayField,
+            expression: displayExpr
+        }, this.viewParent);
+    }
+    // Expression to be evaluated in view mode of form field
+    getDisplayExpr() {
+        const caption = [];
+        const value = this.value;
+        const displayField = this.displayfield || this.displaylabel;
+        const displayExpr = this.displayexpression;
+        if (isObject(value)) {
+            if (isArray(value)) {
+                forEach(value, obj => {
+                    if (isObject(obj)) {
+                        caption.push(this.evaluateExpr(obj, displayField, displayExpr));
+                    }
+                });
+            }
+            else {
+                caption.push(this.evaluateExpr(value, displayField, displayExpr));
+            }
+            return join(caption, ',');
+        }
+        return (value === undefined || value === null) ? '' : this.value;
+    }
+    getCaption() {
+        return (this.value === undefined || this.value === null) ? (get(this.form.dataoutput, this._fieldName) || '') : this.value;
+    }
+    // Notifies changes to observing validation fields
+    notifyChanges() {
+        forEach(this.notifyForFields, field => {
+            field.fieldValidations.validate();
+        });
+    }
+    // Registers observer of validation fields
+    observeOn(fields) {
+        this.fieldValidations.observeOn(fields, 'formfields');
+    }
+    // Method to setup validators for reactive form control
+    setUpValidators(customValidator) {
+        this.fieldValidations.setUpValidators(customValidator);
+    }
+    // sets the custom async validation on the form field
+    setAsyncValidators(validators) {
+        this.fieldValidations.setAsyncValidators(validators);
+    }
+    // sets the default and custom sync validation on the form field
+    setValidators(validators) {
+        this.fieldValidations.setValidators(validators);
+    }
+    // Method to set the properties on inner form widget
+    setFormWidget(key, val) {
+        if (this.formWidget && this.formWidget.widget) {
+            if (key === 'inputtype' && this.widgettype === FormWidgetType.TEXT) {
+                key = 'type';
+            }
+            this.formWidget.widget[key] = val;
+        }
+    }
+    boundFn(fn) {
+        return fn();
+    }
+    // Method to set the properties on inner max form widget (when range is selected)
+    setMaxFormWidget(key, val) {
+        if (this.formWidgetMax) {
+            this.formWidgetMax.widget[key] = val;
+        }
+    }
+    onPropertyChange(key, nv, ov) {
+        const isFormDirty = this.form.dirty;
+        if (key !== 'tabindex') {
+            super.onPropertyChange(key, nv, ov);
+        }
+        if (this.excludeProps.has(key)) {
+            return;
+        }
+        // As upload widget is an HTML widget, only required property is setup
+        if (this.widgettype === FormWidgetType.UPLOAD) {
+            if (key === 'required') {
+                this._debounceSetUpValidators();
+            }
+            super.onPropertyChange(key, nv, ov);
+            return;
+        }
+        this.setFormWidget(key, nv);
+        // Placeholder should not be setup on max widget
+        if (key !== 'placeholder') {
+            this.setMaxFormWidget(key, nv);
+        }
+        switch (key) {
+            case 'defaultvalue':
+                this.form.onFieldDefaultValueChange(this, nv);
+                break;
+            case 'maxdefaultvalue':
+                this.maxValue = nv;
+                this.setMaxFormWidget('datavalue', nv);
+                this.form.onMaxDefaultValueChange();
+                break;
+            case 'maxplaceholder':
+                this.setMaxFormWidget('placeholder', nv);
+                break;
+            case 'required':
+                // WMS-18906 : Do not make form as dirty during required prop initialization
+                if (isFormDirty !== this.form.dirty) {
+                    this.form.markAsPristine();
+                }
+            case 'maxchars':
+            case 'minvalue':
+            case 'maxvalue':
+            case 'regexp':
+            case 'show':
+                this._debounceSetUpValidators();
+                break;
+            case 'primary-key':
+                if (nv) {
+                    this.form.setPrimaryKey(this._fieldName);
+                }
+                break;
+            case 'display-name':
+                this.displayname = nv;
+                break;
+            case 'readonly':
+                this.setReadOnlyState();
+                break;
+        }
+    }
+    onStyleChange(key, nv, ov) {
+        if (key === "width") {
+            this.$element.css("width", nv);
+        }
+        this.setFormWidget(key, nv);
+        this.setMaxFormWidget(key, nv);
+        super.onStyleChange(key, nv, ov);
+    }
+    get datavalue() {
+        return this.formWidget && this.formWidget.datavalue;
+    }
+    set datavalue(val) {
+        if (this._control && this.widgettype !== FormWidgetType.UPLOAD) {
+            this._control.setValue(val);
+        }
+    }
+    get value() {
+        return this.datavalue;
+    }
+    set value(val) {
+        this.datavalue = val;
+    }
+    get maxValue() {
+        return this.formWidgetMax && this.formWidgetMax.datavalue;
+    }
+    set maxValue(val) {
+        if (this._maxControl) {
+            this._maxControl.setValue(val);
+        }
+    }
+    get minValue() {
+        return this.value;
+    }
+    set minValue(val) {
+        this.value = val;
+    }
+    // Get the reactive form control
+    get _control() {
+        return this.ngform && this.ngform.controls[this._fieldName];
+    }
+    // Get the reactive max form control
+    get _maxControl() {
+        return this.ngform && this.ngform.controls[this._fieldName + '_max'];
+    }
+    // Get the displayValue
+    get displayValue() {
+        return this.formWidget && this.formWidget.displayValue;
+    }
+    //Get the timestamp
+    get timestamp() {
+        return this.formWidget && this.formWidget.timestamp;
+    }
+    //Get the charlength
+    get charlength() {
+        return this.formWidget && this.formWidget.charlength;
+    }
+    // Create the reactive form control
+    createControl() {
+        return this.fb.control(undefined, {
+            validators: this._validators
+        });
+    }
+    // On field value change, propagate event to parent form
+    onValueChange(val) {
+        if (!this.isDestroyed) {
+            const captionEl = $(this.nativeElement).find('.caption-floating');
+            if (captionEl.length > 0) {
+                // hasValue check whether form-field has a value from passed val attribute
+                // Added sanity check on val to support values liked 0, false etc as input val - WMS-20084
+                // explicitly checking for input value or -webkit-autofill to see whether there are any autofilled fields - WMS-20141
+                const hasValue = ((isDefined(val) && val !== '' && val !== null) || captionEl.find('input').val()) || captionEl.find('input:-webkit-autofill').length;
+                this.app.notify('captionPositionAnimate', {
+                    displayVal: hasValue,
+                    nativeEl: captionEl,
+                    isSelectMultiple: this.formWidget && this.formWidget.multiple,
+                    isFocused: this._activeField
+                });
+            }
+            // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
+            this.setAriaAttributes();
+            this.form.onFieldValueChange(this, val);
+            this.notifyChanges();
+            // Do mark as touched, only incase when user has entered an input but not through the script. Hence added mousedown event check
+            // active class checks whether user is on the current field, if so marking the field as touched. And form field validation happens once a field is touched
+            // _triggeredByUser checks whether the field is touched by the user or triggered from external script
+            // WMS-22456: _clicktriggeredByUser checks when user selects datetimetype from picker, mark the field as touched to show validation errors in mobile
+            if (this.$element.find('.active').length > 0 || this.form.touched) {
+                if (this._triggeredByUser || (isMobile() && this._clicktriggeredByUser && isDateTimeType(this.widgettype))) {
+                    this.ngform.controls[this._fieldName].markAsTouched();
+                }
+                this.fieldValidations.setCustomValidationMessage();
+            }
+        }
+    }
+    onStatusChange(status) {
+        if (!this.isDestroyed) {
+            this.showPendingSpinner = (status === 'PENDING');
+            // while running validation, widget is disabled and spinner is shown
+            // otherwise formWidget disabled state is reset to the state of the formField.
+            if (status === 'PENDING') {
+                this.formWidget.disabled = true;
+            }
+            else if (this.formWidget.disabled !== this.disabled) {
+                this.formWidget.disabled = this.disabled;
+            }
+        }
+    }
+    // Method to expose validation message and set control to invalid
+    setValidationMessage(val) {
+        setTimeout(() => {
+            this.validationmessage = val;
+            this.setUpValidators(customValidatorFn);
+        });
+    }
+    setReadOnlyState() {
+        let readOnly;
+        if (this.form.isUpdateMode) {
+            if (this['primary-key'] && !this['is-related'] && !this.period) {
+                /*If the field is primary but is assigned set readonly false.
+                   Assigned is where the user inputs the value while a new entry.
+                   This is not editable(in update mode) once entry is successful*/
+                readOnly = !(this.generator === 'assigned' && this.form.operationType !== 'update');
+            }
+            else {
+                readOnly = this.readonly;
+            }
+        }
+        else {
+            // In view mode, set widget state to readonly always
+            readOnly = true;
+        }
+        readOnly = readOnly || this.form.readonly;
+        this.setFormWidget('readonly', readOnly);
+    }
+    resetDisplayInput() {
+        if ((!isDefined(this.value) || this.value === '')) {
+            this.formWidget && this.formWidget.resetDisplayInput && this.formWidget.resetDisplayInput();
+        }
+    }
+    reset() {
+        if (this._control)
+            this._control.reset();
+    }
+    triggerUploadEvent($event, eventName) {
+        const params = { $event };
+        if (eventName === 'change') {
+            params.newVal = $event.target.files;
+            params.oldVal = this._oldUploadVal;
+            this._oldUploadVal = params.newVal;
+        }
+        this.invokeEventCallback(eventName, params);
+    }
+    registerFormField() {
+        const fieldName = this._fieldName;
+        if (this.parentList && !(this.form.parentList === this.parentList)) {
+            let counter = 1;
+            let _fieldName = fieldName;
+            while (this.ngform.controls.hasOwnProperty(_fieldName)) {
+                _fieldName = `${fieldName}_${counter}`;
+                counter++;
+            }
+            this.ngform.addControl(_fieldName, this.createControl());
+            this._fieldName = _fieldName;
+        }
+        else {
+            this.ngform.addControl(fieldName, this.createControl());
+        }
+        const onValueChangeSubscription = this._control.valueChanges
+            .pipe(debounceTime(200))
+            .subscribe(this.onValueChange.bind(this));
+        this.registerDestroyListener(() => onValueChangeSubscription.unsubscribe());
+        const onStatusChangeSubscription = this._control.statusChanges
+            .pipe(debounceTime(100))
+            .subscribe(this.onStatusChange.bind(this));
+        this.registerDestroyListener(() => onStatusChangeSubscription.unsubscribe());
+        if (this.isRange === 'true') {
+            this.ngform.addControl(fieldName + '_max', this.createControl());
+            // registering for valueChanges on MaxformWidget
+            const onMaxValueChangeSubscription = this._maxControl.valueChanges
+                .pipe(debounceTime(200))
+                .subscribe(this.onValueChange.bind(this));
+            this.registerDestroyListener(() => onMaxValueChangeSubscription.unsubscribe());
+        }
+        this.value = get(this.form.formdata, this._fieldName);
+    }
+    ngOnInit() {
+        this.ngform = this.form.ngform;
+        this.registerFormField();
+        // Instantiate custom validators class for form field
+        this.fieldValidations = new BaseFieldValidations(this, this.formWidget, this.widgettype, this._control, this.form);
+        super.ngOnInit();
+    }
+    prepareFormWidget() {
+        this._initPropsRes();
+        // setting displayExpressions on the formwidget explicitly as expr was evaluated to "".
+        this.setFormWidget('binddisplaylabel', this.binddisplaylabel);
+        this.setFormWidget('binddisplayexpression', this.binddisplayexpression);
+        this.setFormWidget('binddisplayimagesrc', this.binddisplayimagesrc);
+        this.setFormWidget('bindChipclass', this.bindChipclass);
+        this.setFormWidget('binddataset', this.binddataset);
+        this.registerReadyStateListener(() => {
+            this.key = this._fieldName || this.target || this.binding;
+            this.viewmodewidget = this.viewmodewidget || getDefaultViewModeWidget(this.widgettype);
+            // For upload widget, generate the permitted field
+            if (this.widgettype === FormWidgetType.UPLOAD) {
+                let fileType;
+                // Create the accepts string from file type and extensions
+                fileType = this.filetype ? FILE_TYPES[this.filetype] : '';
+                this.permitted = fileType + (this.extensions ? (fileType ? ',' : '') + this.extensions : '');
+            }
+            if (isMobile() && this.viewport.isMobileType) {
+                if (!this['mobile-display']) {
+                    this.widget.show = false;
+                }
+            }
+            else if (this.viewport.isTabletType) {
+                if (!this['tablet-display']) {
+                    this.widget.show = false;
+                }
+            }
+            else {
+                if (!this['pc-display']) {
+                    this.widget.show = false;
+                }
+            }
+            this.fieldDefConfig.displaname = this.displayname;
+            this.fieldDefConfig.show = this.show;
+            this.fieldDefConfig.isRelated = this['is-related'];
+            this.fieldDefConfig.inputtype = this.inputtype;
+            this.fieldDefConfig.generator = this.generator;
+            this.fieldDefConfig.placeholder = this.placeholder;
+            this.fieldDefConfig.primaryKey = this['primary-key'];
+            this.fieldDefConfig.required = this.required;
+            this.fieldDefConfig._readonly = this.readonly;
+            this.fieldDefConfig.regexp = this.regexp;
+            this.fieldDefConfig.type = this.type;
+            this.fieldDefConfig.key = this.key;
+            this.fieldDefConfig.mobileDisplay = this['mobile-display'];
+            this.fieldDefConfig.name = this.name;
+            this.fieldDefConfig.pcDisplay = this['pc-display'];
+            this.fieldDefConfig.tabletDisplay = this['tablet-display'];
+            this.fieldDefConfig.validationmessage = this.validationmessage;
+            this.fieldDefConfig.viewmodewidget = this.viewmodewidget;
+            this.fieldDefConfig.widget = this.widgettype;
+            // Register the form field with parent form
+            this.form.registerFormFields(this.widget);
+            addForIdAttributes(this.nativeElement);
+            this.setReadOnlyState();
+        });
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        if (this.widgetSubType === "wm-form-field-custom-widget" && this.formWidget.nativeElement)
+            this.formWidget = this.formWidget.nativeElement.widget;
+        if (this.formWidget) {
+            if (this.widgetSubType === "wm-form-field-custom-widget") {
+                this.formWidget.configSubject.asObservable().subscribe(() => {
+                    this.prepareFormWidget();
+                });
+            }
+            else {
+                this.prepareFormWidget();
+            }
+        }
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Destroy BaseFieldValidations instance
+        if (this.fieldValidations) {
+            try {
+                this.fieldValidations.destroy();
+            }
+            catch (e) {
+                // Silently handle cleanup errors
+            }
+            this.fieldValidations = null;
+        }
+        // MEMORY LEAK FIX: Clear notifyForFields array
+        if (this.notifyForFields) {
+            this.notifyForFields = [];
+        }
+        // MEMORY LEAK FIX: Nullify debounced function closure
+        this._debounceSetUpValidators = null;
+        // MEMORY LEAK FIX: Clear form widget references
+        this.formWidget = null;
+        this.formWidgetMax = null;
+        // MEMORY LEAK FIX: Clear field definition config
+        if (this.fieldDefConfig) {
+            this.fieldDefConfig = {};
+        }
+        // Call parent ngOnDestroy (StylableComponent extends BaseComponent which has cleanup)
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.Injector }, { token: FormComponent }, { token: i1.FormBuilder }, { token: i1$1.Viewport }, { token: i1$1.App }, { token: i3.ListComponent, optional: true }, { token: 'chipclass.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'displayexpression.bind', attribute: true }, { token: 'displaylabel.bind', attribute: true }, { token: 'widgettype', attribute: true }, { token: 'name', attribute: true }, { token: 'displayimagesrc.bind', attribute: true }, { token: 'key', attribute: true }, { token: 'is-range', attribute: true }, { token: 'pc-display', attribute: true }, { token: 'mobile-display', attribute: true }, { token: 'tablet-display', attribute: true }, { token: Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
+            provideAsWidgetRef(FormFieldDirective),
+            provideAs(FormFieldDirective, NG_VALUE_ACCESSOR, true),
+            { provide: Context, useFactory: () => { return {}; }, multi: true }
+        ], queries: [{ propertyName: "formWidget", first: true, predicate: ["formWidget"], descendants: true, static: true }, { propertyName: "formWidgetMax", first: true, predicate: ["formWidgetMax"], descendants: true }], exportAs: ["wmFormField"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wmFormField]',
+                    exportAs: 'wmFormField',
+                    providers: [
+                        provideAsWidgetRef(FormFieldDirective),
+                        provideAs(FormFieldDirective, NG_VALUE_ACCESSOR, true),
+                        { provide: Context, useFactory: () => { return {}; }, multi: true }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: FormComponent }, { type: i1.FormBuilder }, { type: i1$1.Viewport }, { type: i1$1.App }, { type: i3.ListComponent, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['chipclass.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['dataset.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['displayexpression.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['displaylabel.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['widgettype']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['name']
+                }] }, { type: String, decorators: [{
+                    type: Attribute,
+                    args: ['displayimagesrc.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['key']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['is-range']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['pc-display']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['mobile-display']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['tablet-display']
+                }] }, { type: Array, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [Context]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { formWidget: [{
+                type: ContentChild,
+                args: ['formWidget', { static: true }]
+            }], formWidgetMax: [{
+                type: ContentChild,
+                args: ['formWidgetMax']
+            }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], handleClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class LiveActionsDirective {
+    constructor(subscribedWidget, app, dialogService) {
+        this.subscribedWidget = subscribedWidget;
+        this.app = app;
+        this.dialogService = dialogService;
+        subscribedWidget.addRow = this.addRow.bind(this);
+        subscribedWidget.updateRow = this.updateRow.bind(this);
+        subscribedWidget.deleteRow = this.deleteRow.bind(this);
+        subscribedWidget.call = this.call.bind(this);
+    }
+    addRow() {
+        this.app.notify('wm-event', { eventName: Live_Operations.INSERT, widgetName: this.subscribedWidget.name, row: this.subscribedWidget.selecteditem });
+    }
+    updateRow() {
+        this.app.notify('wm-event', { eventName: Live_Operations.UPDATE, widgetName: this.subscribedWidget.name, row: this.subscribedWidget.selecteditem });
+    }
+    deleteRow() {
+        this.app.notify('wm-event', { eventName: Live_Operations.DELETE, widgetName: this.subscribedWidget.name, row: this.subscribedWidget.selecteditem });
+    }
+    successHandler(options, response) {
+        triggerFn(options.success, response);
+    }
+    errorHandler(options, error) {
+        this.app.notifyApp(error, 'error', 'ERROR');
+        triggerFn(options.error, error);
+    }
+    getRecords(options, operation) {
+        let index;
+        let dataNavigator;
+        if (this.subscribedWidget.navigation !== 'None' && this.subscribedWidget.dataNavigator) {
+            dataNavigator = this.subscribedWidget.dataNavigator;
+            // If operation is delete, decrease the data size and check if navigation to previous page is required
+            if (operation === Live_Operations.DELETE) {
+                dataNavigator.dataSize -= 1;
+                dataNavigator.calculatePagingValues();
+                index = dataNavigator.pageCount < dataNavigator.dn.currentPage ? 'prev' : undefined;
+            }
+            else {
+                // If operation is insert, go to last page. If update operation, stay on current page
+                index = operation === Live_Operations.INSERT ? 'last' : 'current';
+                if (index === 'last') {
+                    dataNavigator.dataSize += 1;
+                }
+                dataNavigator.calculatePagingValues();
+            }
+            dataNavigator.navigatePage(index, null, true, response => {
+                this.successHandler(options, response);
+            });
+        }
+        else {
+            this.subscribedWidget.datasource.execute(DataSource.Operation.LIST_RECORDS, {
+                'skipToggleState': true
+            }).then(response => {
+                this.successHandler(options, response);
+            }, err => {
+                this.errorHandler(options, err);
+            });
+        }
+    }
+    performCUDOperation(requestData, operation, options) {
+        performDataOperation(this.subscribedWidget.datasource, requestData, {
+            operationType: operation
+        }).then(response => {
+            if (response.error) {
+                this.errorHandler(options, response.error);
+                return;
+            }
+            if (this.subscribedWidget.datasource.category === 'wm.CrudVariable' && operation === 'delete') {
+                this.subscribedWidget.datasource.execute(DataSource.Operation.LIST_RECORDS, {
+                    'skipToggleState': true
+                }).then(response => {
+                    this.successHandler(options, response);
+                }, err => {
+                    this.errorHandler(options, err);
+                });
+            }
+            else {
+                this.getRecords(options, operation);
+            }
+            // show delete success toaster
+            if (operation === 'delete') {
+                this.app.notifyApp(this.app.appLocale.MESSAGE_DELETE_RECORD_SUCCESS, 'success');
+            }
+        }, (error) => {
+            this.errorHandler(options, error);
+        });
+    }
+    insertRecord(requestData, operation, options) {
+        this.performCUDOperation(requestData, operation, options);
+    }
+    updateRecord(requestData, operation, options) {
+        this.performCUDOperation(requestData, operation, options);
+    }
+    deleteRecord(requestData, operation, options) {
+        // Show the delete confirmation dialog. On Ok, delete the record.
+        this.dialogService.showAppConfirmDialog({
+            title: this.app.appLocale.MESSAGE_DELETE_RECORD || 'Delete Record',
+            iconclass: 'wi wi-delete fa-lg',
+            message: this.subscribedWidget.confirmdelete || 'Are you sure you want to delete this?',
+            oktext: this.subscribedWidget.deleteoktext || 'Ok',
+            canceltext: this.subscribedWidget.deletecanceltext || 'Cancel',
+            onOk: () => {
+                this.performCUDOperation(requestData, operation, options);
+                this.dialogService.closeAppConfirmDialog();
+            },
+            onCancel: () => {
+                triggerFn(options.cancelDeleteCallback);
+                this.dialogService.closeAppConfirmDialog();
+            }
+        });
+    }
+    performOperation(operation, options) {
+        const requestData = {
+            row: options.row,
+            prevData: {},
+            rowData: {},
+            transform: true,
+            skipNotification: true
+        };
+        if (operation === Live_Operations.UPDATE) {
+            requestData.rowData = options.rowData;
+            requestData.prevData = options.prevData;
+        }
+        /* decide routine based on CRUD operation to be performed */
+        switch (operation) {
+            case Live_Operations.INSERT:
+                this.insertRecord(requestData, operation, options);
+                break;
+            case Live_Operations.UPDATE:
+                this.updateRecord(requestData, operation, options);
+                break;
+            case Live_Operations.DELETE:
+                this.deleteRecord(requestData, operation, options);
+                break;
+            case Live_Operations.READ:
+                this.getRecords(options, operation);
+                break;
+        }
+    }
+    // API exposed to make CRUD operations
+    call(operation, options, success, error) {
+        options.success = success;
+        options.error = error;
+        this.performOperation(operation, options);
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear references
+        this.subscribedWidget = null;
+        this.app = null;
+        this.dialogService = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveActionsDirective, deps: [{ token: ListComponent, self: true }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wmLiveActions]'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [ListComponent]
+                }] }, { type: i1$1.App }, { type: i1$1.AbstractDialogService }] });
+
+class DependsonDirective {
+    constructor(dialogId, dependson, dialogService, app) {
+        this.dialogService = dialogService;
+        this.app = app;
+        // If dialogId is present, form is in dialog mode
+        if (dialogId) {
+            this.isLayoutDialog = true;
+            this.dialogId = dialogId;
+        }
+        this.dependson = dependson;
+        // Listen to the wm-event called from subscribed widgets
+        this.eventSubscription = this.app.subscribe('wm-event', this.handleEvent.bind(this));
+    }
+    openFormDialog() {
+        this.dialogService.open(this.dialogId);
+    }
+    onUpdate(newValue, table, editClicked) {
+        this.editMode = editClicked || this.editMode;
+        this.form.operationType = Live_Operations.UPDATE;
+        this.form.isSelected = true;
+        let rowData = this.currentFormData;
+        if (newValue && table) {
+            if (table.multiselect) {
+                rowData = newValue[0];
+            }
+            else {
+                rowData = newValue[newValue.length - 1];
+            }
+        }
+        this.form.setFormData(rowData);
+        this.form.edit();
+        if (!this.editMode) {
+            this.form.isUpdateMode = false;
+        }
+    }
+    onInsert() {
+        this.form.operationType = Live_Operations.INSERT;
+        this.form.isSelected = true;
+        this.form.setFormData({});
+        this.form.new();
+    }
+    handleEvent(options) {
+        if (this.dependson !== options.widgetName) {
+            return;
+        }
+        this.currentOp = options.eventName;
+        switch (options.eventName) {
+            case Live_Operations.UPDATE:
+                this.currentFormData = options.row;
+                if (this.isLayoutDialog) {
+                    this.openFormDialog();
+                }
+                else {
+                    this.onUpdate(undefined, undefined, true);
+                }
+                break;
+            case Live_Operations.INSERT:
+                if (this.isLayoutDialog) {
+                    this.openFormDialog();
+                }
+                else {
+                    this.onInsert();
+                }
+                break;
+            case Live_Operations.DELETE:
+                this.app.Widgets[this.dependson].call('delete', { row: options.row });
+                break;
+            case Live_Operations.READ:
+                if (!this.isLayoutDialog) {
+                    this.form.isUpdateMode = false;
+                }
+                break;
+            case 'rerender':
+                if (options.dataSource) {
+                    options.dataSource.execute(DataSource.Operation.LIST_RECORDS, {
+                        'skipToggleState': true,
+                        'operation': 'list'
+                    });
+                }
+                break;
+            case 'selectedItemChange':
+                if (options.table) {
+                    this.onUpdate(options.row, options.table);
+                }
+                break;
+            case 'resetEditMode':
+                this.editMode = false;
+        }
+    }
+    onFormRender() {
+        // On opening the form in dialog mode, complete the pending operations
+        if (this.form && this.isLayoutDialog) {
+            this.form.isLayoutDialog = true;
+            setTimeout(() => {
+                if (this.currentOp === Live_Operations.UPDATE) {
+                    this.onUpdate(undefined, undefined, true);
+                }
+                else if (this.currentOp === Live_Operations.INSERT) {
+                    this.onInsert();
+                }
+            }, 250);
+        }
+    }
+    ngAfterContentInit() {
+        // If form instance is present, form is in inline mode. Else, it is in dialog mode and listen to form instance changes
+        if (this.formChildren.first) {
+            this.form = this.formChildren.first;
+        }
+        else {
+            this.formSubscription = this.formChildren.changes.subscribe((val) => {
+                this.form = val.first;
+                this.onFormRender();
+            });
+        }
+        // find the dependent widget (table/list)
+        this.app.notify('setup-cud-listener', this.dependson);
+    }
+    ngOnDestroy() {
+        if (this.formSubscription) {
+            this.formSubscription.unsubscribe();
+        }
+        if (this.eventSubscription) {
+            this.eventSubscription();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1.AbstractDialogService }, { token: i1$1.App }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DependsonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[dependson]'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['dialogid']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['dependson']
+                }] }, { type: i1$1.AbstractDialogService }, { type: i1$1.App }], propDecorators: { formChildren: [{
+                type: ContentChildren,
+                args: [FormComponent, { descendants: true }]
+            }] } });
+
+const FILTER_CONSTANTS = {
+    'EMPTY_KEY': 'EMPTY_NULL_FILTER'
+};
+const noop = () => { };
+class LiveFilterDirective {
+    static { this.initializeProps = registerLiveFilterProps(); }
+    constructor(form) {
+        this.form = form;
+        // debounce the filter function. If multiple filter calls are made at same time, calls will be delayed and last call is fired
+        this._filter = debounce$1(options => {
+            this.filter(options);
+        }, 250);
+        form.clearFilter = this.clearFilter.bind(this);
+        form.applyFilter = this.applyFilter.bind(this);
+        form.filter = this.filter.bind(this);
+        form.filterOnDefault = this.filterOnDefault.bind(this);
+        form.execute = this.execute.bind(this);
+        form.onFieldDefaultValueChange = this.onFieldDefaultValueChange.bind(this);
+        form.onMaxDefaultValueChange = this.onMaxDefaultValueChange.bind(this);
+        form.onDataSourceChange = this.onDataSourceChange.bind(this);
+        form.onFieldValueChange = this.onFieldValueChange.bind(this);
+        form.submitForm = this.submitForm.bind(this);
+        form.registerFormWidget = this.registerFormWidget.bind(this);
+    }
+    execute(operation, options) {
+        if (operation === DataSource.Operation.LIST_RECORDS || operation === DataSource.Operation.DOWNLOAD) {
+            return this.applyFilter(options);
+        }
+        if (operation === DataSource.Operation.GET_OPTIONS) {
+            return this._options || {};
+        }
+        if (operation === DataSource.Operation.GET_PAGING_OPTIONS) {
+            return this.form.pagination;
+        }
+        if (!this.form.datasource) {
+            return {};
+        }
+        if (operation === DataSource.Operation.FETCH_DISTINCT_VALUES) {
+            return fetchDistinctValues(this.form.datasource, this.form.formFields, {
+                widget: 'widgettype',
+                enableemptyfilter: this.form.enableemptyfilter,
+                EMPTY_VALUE: this.form.appLocale.LABEL_NO_VALUE
+            });
+        }
+        return this.form.datasource.execute(operation, options);
+    }
+    onFieldDefaultValueChange(field, nv) {
+        field.minValue = nv;
+        field.value = nv;
+        this.filterOnDefault();
+    }
+    onFieldValueChange(field, nv) {
+        applyFilterOnField(this.form.datasource, field.widget, this.form.formFields, nv, {
+            EMPTY_VALUE: this.form.appLocale.LABEL_NO_VALUE
+        });
+        if (this.form.autoupdate && isDefined(nv)) {
+            this._filter();
+        }
+    }
+    onMaxDefaultValueChange() {
+        setTimeout(() => {
+            this.filterOnDefault();
+        });
+    }
+    onDataSourceChange() {
+        const dataSource = this.form.datasource;
+        if (!dataSource) {
+            return;
+        }
+        this.form.formFields.forEach(field => {
+            if (isDataSetWidget(field.widgettype)) {
+                getDistinctValuesForField(dataSource, field.widget, {
+                    widget: 'widgettype',
+                    enableemptyfilter: this.form.enableemptyfilter,
+                    EMPTY_VALUE: this.form.appLocale.LABEL_NO_VALUE
+                });
+                applyFilterOnField(dataSource, field.widget, this.form.formFields, field.value, {
+                    isFirst: true,
+                    EMPTY_VALUE: this.form.appLocale.LABEL_NO_VALUE
+                });
+            }
+        });
+        // On load check if default value exists and apply filter, Call the filter with the result options
+        this._filter(this._options);
+    }
+    clearFilter() {
+        this.form.resetFormState();
+        this.form.formFields.forEach(filterField => {
+            // Added check for range field
+            if (!filterField.readonly && filterField.show) {
+                if (filterField.widgettype === FormWidgetType.AUTOCOMPLETE || filterField.widgettype === FormWidgetType.TYPEAHEAD) {
+                    this.form.$element.find('div[name=' + filterField.name + '] input').val('');
+                }
+                if (filterField['is-range']) {
+                    filterField.minValue = '';
+                    filterField.maxValue = '';
+                }
+                else {
+                    filterField.value = '';
+                    filterField.resetDisplayInput();
+                }
+            }
+        });
+        // If variable has any bindings, wait for the bindings to be updated
+        setTimeout(() => {
+            // Setting result to the default data
+            this._filter();
+        });
+    }
+    submitForm() {
+        this.filter();
+    }
+    applyFilter(options) {
+        options = options ? (options.data || options) : {};
+        options.page = options.page || 1;
+        options.orderBy = isDefined(options.orderBy) ? options.orderBy : this.orderBy;
+        return this.filter(options);
+    }
+    filter(options) {
+        if (!this.form.datasource) {
+            return;
+        }
+        const filterFields = {};
+        const dataModel = {};
+        let page = 1, orderBy, isValid;
+        options = options || {};
+        page = options.page || page;
+        orderBy = isDefined(options.orderBy) ? options.orderBy : (this.orderBy || '');
+        this.orderBy = orderBy; // Store the order by in scope. This can be used to retain the sort after filtering
+        // Copy the values to be sent to the user as '$data' before servicecall
+        this.form.formFields.forEach(field => {
+            const fieldSelector = 'div[name=' + field.name + '] input';
+            const $el = this.form.$element;
+            let fieldEle;
+            if ((field.widgettype === FormWidgetType.AUTOCOMPLETE || field.widgettype === FormWidgetType.TYPEAHEAD) && $el) {
+                fieldEle = $el.find(fieldSelector);
+                if (!field['is-range']) {
+                    dataModel[field.field] = {
+                        'value': isDefined(field.value) ? field.value : fieldEle.val() // For autocomplete, set the datavalue. If not present, set query value
+                    };
+                }
+                else {
+                    dataModel[field.field] = {
+                        'minValue': isDefined(field.minValue) ? field.minValue : fieldEle.first().val(),
+                        'maxValue': isDefined(field.maxValue) ? field.maxValue : fieldEle.last().val()
+                    };
+                }
+                return;
+            }
+            if (!field['is-range']) {
+                dataModel[field.field] = {
+                    'value': field.value
+                };
+            }
+            else {
+                dataModel[field.field] = {
+                    'minValue': field.minValue,
+                    'maxValue': field.maxValue
+                };
+            }
+        });
+        /*Perform this function for the event onBeforeservicecall*/
+        try {
+            isValid = this.form.invokeEventCallback('beforeservicecall', { $data: dataModel });
+            if (isValid === false) {
+                return;
+            }
+            if (isValid && isValid.error) {
+                this.form.toggleMessage(true, isValid.error, 'error', 'ERROR');
+                return;
+            }
+            /*Update these values in the formFields with new reference, inorder to maintain the UI values*/
+            this.form.formFields.forEach(filterField => {
+                if (!filterField['is-range']) {
+                    filterField._value = dataModel[filterField.field].value;
+                }
+                else {
+                    filterField._minValue = dataModel[filterField.field].minValue;
+                    filterField._maxValue = dataModel[filterField.field].maxValue;
+                }
+            });
+        }
+        catch (err) {
+            if (err.message === 'Abort') {
+                return;
+            }
+        }
+        /* Construct the formFields Variable to send it to the queryBuilder */
+        this.form.formFields.forEach(filterField => {
+            let fieldValue;
+            let matchMode;
+            let colName = filterField.field;
+            const minValue = filterField._minValue;
+            const maxvalue = filterField._maxValue;
+            /* if field is part of a related entity, column name will be 'entity.fieldName' */
+            if (filterField['is-related']) {
+                colName += '.' + filterField['lookup-field'];
+            }
+            if (filterField['is-range']) {
+                /*Based on the min and max values, decide the matchmode condition*/
+                fieldValue = getRangeFieldValue(minValue, maxvalue);
+                matchMode = getRangeMatchMode(minValue, maxvalue);
+                if (isDefined(fieldValue)) {
+                    filterFields[colName] = {
+                        'value': fieldValue,
+                        'matchMode': matchMode,
+                        'logicalOp': 'AND'
+                    };
+                }
+            }
+            else {
+                switch (filterField.widgettype) {
+                    case FormWidgetType.SELECT:
+                    case FormWidgetType.RADIOSET:
+                        if (getEnableEmptyFilter(this.form.enableemptyfilter) && filterField._value === FILTER_CONSTANTS.EMPTY_KEY) {
+                            matchMode = getEmptyMatchMode(this.form.enableemptyfilter);
+                            fieldValue = filterField._value;
+                        }
+                        else {
+                            if (filterField.type === DataType.BOOLEAN) {
+                                if (isDefined(filterField._value) && filterField._value !== '') {
+                                    fieldValue = JSON.parse(filterField._value);
+                                }
+                            }
+                            else {
+                                fieldValue = filterField._value;
+                            }
+                        }
+                        break;
+                    case FormWidgetType.CHECKBOXSET:
+                    case FormWidgetType.CHIPS:
+                        if (filterField._value && filterField._value.length) {
+                            fieldValue = filterField._value;
+                        }
+                        break;
+                    case FormWidgetType.CHECKBOX:
+                    case FormWidgetType.TOGGLE:
+                    case FormWidgetType.ICONBUTTONTOGGLE:
+                        if (isDefined(filterField._value) && filterField._value !== '') {
+                            fieldValue = filterField.type === DataType.BOOLEAN ? JSON.parse(filterField._value) : filterField._value;
+                        }
+                        break;
+                    default:
+                        fieldValue = filterField._value;
+                        break;
+                }
+                if (isDefined(fieldValue) && fieldValue !== '' && fieldValue !== null) {
+                    filterFields[colName] = {};
+                    if (matchMode) {
+                        filterFields[colName].matchMode = matchMode;
+                        fieldValue = undefined;
+                    }
+                    else if (filterField.type === DataType.STRING || filterField.isRelated) { // Only for string types and related fields, custom match modes are enabled.
+                        filterFields[colName].matchMode = matchMode || filterField.matchmode ||
+                            this.form.datasource.execute(DataSource.Operation.GET_MATCH_MODE);
+                    }
+                    filterFields[colName].value = fieldValue;
+                    filterFields[colName].logicalOp = 'AND';
+                    filterFields[colName].type = filterField.type;
+                }
+            }
+        });
+        if (options.exportType) {
+            return this.form.datasource.execute(DataSource.Operation.DOWNLOAD, {
+                data: {
+                    matchMode: 'anywhereignorecase',
+                    filterFields: filterFields,
+                    orderBy: orderBy,
+                    exportType: options.exportType,
+                    logicalOp: 'AND',
+                    exportSize: options.exportSize,
+                    fields: options.fields,
+                    fileName: options.fileName
+                }
+            });
+        }
+        return this.form.datasource.execute(DataSource.Operation.LIST_RECORDS, {
+            filterFields: filterFields,
+            orderBy: orderBy,
+            page: page,
+            pagesize: this.form.pagesize || 20,
+            skipDataSetUpdate: true, // dont update the actual variable dataset,
+            inFlightBehavior: 'executeAll'
+        }).then(response => {
+            const data = response.data;
+            this.form.pagination = response.pagination;
+            if (data.error) {
+                // disable readonly and show the appropriate error
+                this.form.toggleMessage(true, data.error, 'error', 'ERROR');
+                this.form.onResultCb(data, false);
+            }
+            else {
+                this._options = {
+                    'page': page,
+                    'orderBy': orderBy
+                };
+                this.form.result = getClonedObject(data);
+                this.form.onResultCb(data, true);
+            }
+            $appDigest();
+            return this.form.result;
+        }, error => {
+            this.form.toggleMessage(true, error, 'error', 'ERROR');
+            this.form.onResultCb(error, false);
+            return error;
+        });
+    }
+    // Calls the filter function if default values are present
+    filterOnDefault() {
+        /*Check if default value is present for any filter field*/
+        const defaultObj = find(this.form.formFields, obj => {
+            return isDefined(obj.value) || isDefined(obj.minValue) || isDefined(obj.maxValue);
+        });
+        /*If default value exists and data is loaded, apply the filter*/
+        if (defaultObj) {
+            this._filter(this._options);
+        }
+    }
+    registerFormWidget(widget) {
+        const name = widget.key || widget.name;
+        this.form.filterWidgets[name] = widget;
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Cancel debounced function
+        if (this._filter && this._filter.cancel) {
+            this._filter.cancel();
+            this._filter = null;
+        }
+        // MEMORY LEAK FIX: Clear form reference
+        this.form = null;
+        this._options = null;
+        this.orderBy = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wmLiveFilter]'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [FormComponent]
+                }] }] });
+
+const isTimeType = field => field.widgettype === DataType.TIME || (field.type === DataType.TIME && !field.widgettype);
+const getValidTime = val => {
+    if (val) {
+        const date = (new Date()).toDateString();
+        return (new Date(`${date} ${val}`)).getTime();
+    }
+    return undefined;
+};
+class LiveFormDirective {
+    static { this.initializeProps = registerLiveFormProps(); }
+    onKeydownHandler(event) {
+        this._triggeredByUser = true;
+    }
+    constructor(form, liveTable, datePipe, dialogService, formlayout) {
+        this.form = form;
+        this.datePipe = datePipe;
+        this.dialogService = dialogService;
+        this._debouncedSavePrevDataValues = debounce$1(() => {
+            this.savePrevDataValues();
+        }, 250);
+        // If parent live table is present and this form is first child of live table, set this form instance on livetable
+        if (liveTable) {
+            if (!this.form.parentForm) {
+                this.form._liveTableParent = liveTable;
+            }
+            this.form.isLayoutDialog = liveTable.isLayoutDialog;
+            liveTable.onFormReady(this.form);
+        }
+        else {
+            this.form.isLayoutDialog = formlayout === 'dialog';
+        }
+        // CUD operations
+        form.cancel = this.cancel.bind(this);
+        form.reset = this.reset.bind(this);
+        form.delete = this.delete.bind(this);
+        form.save = this.save.bind(this);
+        form.saveAndNew = this.saveAndNew.bind(this);
+        form.saveAndView = this.saveAndView.bind(this);
+        form.setPrimaryKey = this.setPrimaryKey.bind(this);
+        form.constructDataObject = this.constructDataObject.bind(this);
+        form.changeDataObject = this.setFormData.bind(this);
+        form.setFormData = this.setFormData.bind(this);
+        form.findOperationType = this.findOperationType.bind(this);
+        form.clearData = this.clearData.bind(this);
+        form.onFieldDefaultValueChange = this.onFieldDefaultValueChange.bind(this);
+        form.onDataSourceChange = this.onDataSourceChange.bind(this);
+        form.onFieldValueChange = this.onFieldValueChange.bind(this);
+        form.submitForm = this.submitForm.bind(this);
+        form.form_registerFormFields = form.registerFormFields;
+        form.registerFormFields = this.registerFormFields.bind(this);
+    }
+    /*
+    WMS:18583
+    Overriding 'registerFormFields' for liveForms,
+    On Each field added, check if the dataSource is updated or not
+    if the field is added after the dataSource is updated at LiveForm, retrigger
+    */
+    registerFormFields(formField) {
+        const formFields = this.form.getFormFields();
+        this.form.form_registerFormFields(formField);
+        if (this.form.isDataSourceUpdated) {
+            this._updateFieldOnDataSourceChange(formField, formFields);
+        }
+    }
+    _updateFieldOnDataSourceChange(field, formFields) {
+        if (!field.isDataSetBound && isDataSetWidget(field.widgettype)) {
+            if (field['is-related']) {
+                field.isDataSetBound = true;
+                fetchRelatedFieldData(this.form.datasource, field.widget, {
+                    relatedField: field.key,
+                    datafield: ALLFIELDS,
+                    widget: 'widgettype',
+                });
+            }
+            else {
+                getDistinctValuesForField(this.form.datasource, field.widget, {
+                    widget: 'widgettype',
+                    enableemptyfilter: this.form.enableemptyfilter
+                });
+                applyFilterOnField(this.form.datasource, field.widget, formFields, field.value, { isFirst: true });
+            }
+        }
+    }
+    onDataSourceChange() {
+        if (get(this.form.formFields, 'length')) {
+            this.form.isDataSourceUpdated = true;
+        }
+        const formFields = this.form.getFormFields();
+        formFields.forEach(field => {
+            this._updateFieldOnDataSourceChange(field, formFields);
+        });
+    }
+    onFieldDefaultValueChange(field, nv) {
+        // In Edit, do  not set default values
+        if (this.form.operationType === 'update') {
+            return;
+        }
+        // Set the default value only if it exists.
+        if (isDefined(nv) && nv !== null && nv !== '' && nv !== 'null') {
+            field.value = parseValueByType(nv, field.type, field.widgettype, field.trailingzero);
+        }
+        else {
+            field.value = undefined;
+        }
+        // WMS-22434: For default value set on individual form fields, do not mark the form as dirty.
+        if (this.form.dirty && !this._triggeredByUser) {
+            this.form.markAsPristine();
+        }
+        this._debouncedSavePrevDataValues();
+    }
+    onFieldValueChange(field, nv) {
+        applyFilterOnField(this.form.datasource, field.widget, this.form.formFields, nv);
+    }
+    getBlobURL(dataObj, key, value) {
+        let href = '';
+        let primaryKeys;
+        let primaryKey;
+        if (value === null || value === undefined || !this.form.datasource) {
+            return href;
+        }
+        primaryKeys = this.form.datasource.execute(DataSource.Operation.GET_PRIMARY_KEY) || [];
+        primaryKey = dataObj[primaryKeys[0]];
+        href += this.form.datasource.execute(DataSource.Operation.GET_BLOB_URL, {
+            primaryValue: primaryKey,
+            columnName: key
+        });
+        href += '?' + Math.random();
+        return href;
+    }
+    setFormData(dataObj, formFields, formData) {
+        if (!dataObj) {
+            return;
+        }
+        formFields = formFields || this.form.formFields;
+        formFields.forEach(field => {
+            const value = get(dataObj, field.key || field.name);
+            if (isTimeType(field)) {
+                field.value = getValidTime(value);
+            }
+            else if (field.type === DataType.BLOB) {
+                this.form.resetFileUploadWidget(field, true);
+                field.href = this.getBlobURL(dataObj, field.key, value);
+                field.value = isString(value) ? '' : value;
+            }
+            else {
+                this.form.setFieldValue(field, dataObj, formData);
+            }
+        });
+        this.savePrevDataValues();
+        this.form.constructDataObject();
+    }
+    onDataSourceUpdate(response, newForm, updateMode) {
+        if (newForm) {
+            this.form.new();
+        }
+        else {
+            this.form.setFormData(response);
+            this.closeDialog();
+        }
+        this.form.isUpdateMode = isDefined(updateMode) ? updateMode : true;
+    }
+    savePrevformFields() {
+        this.form.prevformFields = getClonedObject(this.form.formFields.map(field => {
+            return {
+                'key': field.key,
+                'type': field.type,
+                'widgettype': field.widgettype,
+                'outputformat': field.outputformat,
+                'value': field.value
+            };
+        }));
+    }
+    getPrevformFields() {
+        this.form.formFields.map(field => {
+            const prevField = this.form.prevformFields.find(pField => pField.key === field.key);
+            field.value = prevField.value;
+        });
+    }
+    getDataObject() {
+        if (this.form.operationType === Live_Operations.INSERT) {
+            return {};
+        }
+        if (isDefined(this.form.prevDataObject) && !isEmptyObject(this.form.prevDataObject)) {
+            return getClonedObject(this.form.prevDataObject);
+        }
+        return getClonedObject(this.form.formdata || {});
+    }
+    constructDataObject(isPreviousData) {
+        const dataObject = this.getDataObject();
+        const formName = this.form.name;
+        let formFields;
+        formFields = isPreviousData ? this.form.prevformFields : this.form.getFormFields();
+        formFields.forEach(field => {
+            let dateTime, fieldValue;
+            const fieldTarget = split(field.key, '.');
+            const fieldName = fieldTarget[0] || field.key;
+            /*collect the values from the fields and construct the object*/
+            /*Format the output of date time widgets to the given output format*/
+            if ((field.widgettype && isDateTimeType(field.widgettype)) || isDateTimeType(field.type)) {
+                if (field.value) {
+                    dateTime = getValidDateObject(field.value);
+                    if (field.outputformat === DataType.TIMESTAMP || field.type === DataType.TIMESTAMP) {
+                        fieldValue = field.value ? dateTime : null;
+                    }
+                    else if (field.outputformat) {
+                        fieldValue = this.datePipe.transform(dateTime, field.outputformat);
+                    }
+                    else {
+                        fieldValue = field.value;
+                    }
+                }
+                else {
+                    fieldValue = undefined;
+                }
+            }
+            else if (field.type === DataType.BLOB) {
+                fieldValue = getFiles(formName, fieldName + '_formWidget', field.multiple);
+            }
+            else if (field.type === DataType.LIST) {
+                fieldValue = field.value || undefined;
+            }
+            else {
+                fieldValue = (field.value === null || field.value === '') ? undefined : field.value;
+            }
+            if (fieldTarget.length === 1) {
+                dataObject[fieldName] = fieldValue;
+            }
+            else {
+                dataObject[fieldName] = dataObject[fieldName] || {};
+                dataObject[fieldName][fieldTarget[1]] = fieldValue;
+            }
+        });
+        if (!isPreviousData) {
+            this.form.updateFormDataOutput(dataObject);
+            return this.form.dataoutput;
+        }
+        return dataObject;
+    }
+    setPrimaryKey(fieldName) {
+        /*Store the primary key of data*/
+        this.form.primaryKey = this.form.primaryKey || [];
+        if (this.form.primaryKey.indexOf(fieldName) === -1) {
+            this.form.primaryKey.push(fieldName);
+        }
+    }
+    findOperationType() {
+        let operation;
+        let isPrimary = false;
+        const sourceOperation = this.form.datasource && this.form.datasource.execute(DataSource.Operation.GET_OPERATION_TYPE);
+        if (sourceOperation && sourceOperation !== 'read') {
+            return sourceOperation;
+        }
+        /*If OperationType is not set then based on the formdata object return the operation type,
+            this case occurs only if the form is outside a livegrid*/
+        /*If the formdata object has primary key value then return update else insert*/
+        if (this.form.primaryKey && !isEmpty(this.form.formdata)) {
+            /*If only one column is primary key*/
+            if (this.form.primaryKey.length === 1) {
+                if (this.form.formdata[this.form.primaryKey[0]]) {
+                    operation = Live_Operations.UPDATE;
+                }
+                /*If only no column is primary key*/
+            }
+            else if (this.form.primaryKey.length === 0) {
+                forEach(this.form.formdata, (value) => {
+                    if (value) {
+                        isPrimary = true;
+                    }
+                });
+                if (isPrimary) {
+                    operation = Live_Operations.UPDATE;
+                }
+                /*If multiple columns are primary key*/
+            }
+            else {
+                isPrimary = some(this.form.primaryKey, (primaryKey) => {
+                    if (this.form.formdata[primaryKey]) {
+                        return true;
+                    }
+                });
+                if (isPrimary) {
+                    operation = Live_Operations.UPDATE;
+                }
+            }
+        }
+        return operation || Live_Operations.INSERT;
+    }
+    getPrevDataValues() {
+        const prevDataValues = fromPairs(map(this.form.prevDataValues, (item) => {
+            return [item.key, item.value];
+        })); // Convert of array of values to an object
+        this.form.formFields.forEach(field => {
+            field.value = prevDataValues[field.key] || '';
+            field.resetDisplayInput();
+        });
+        return prevDataValues;
+    }
+    savePrevDataValues() {
+        this.form.prevDataValues = this.form.formFields.map((obj) => {
+            return { 'key': obj.key, 'value': obj.value };
+        });
+    }
+    clearData() {
+        this.form.toggleMessage(false);
+        this.form.emptyDataModel();
+    }
+    setReadonlyFields() {
+        this.form.formFields.forEach(field => {
+            field.setReadOnlyState();
+        });
+    }
+    reset() {
+        let prevDataValues;
+        this.form.resetFormState();
+        prevDataValues = this.getPrevDataValues();
+        this.form.formFields.forEach(field => {
+            if (field.type === DataType.BLOB || field.widgettype === 'upload') {
+                this.form.resetFileUploadWidget(field, true);
+                field.href = this.getBlobURL(prevDataValues, field.key, field.value);
+            }
+            field.nativeElement.querySelector('input')?.removeAttribute('aria-invalid');
+        });
+        this.form.constructDataObject();
+    }
+    closeDialog() {
+        if (this.form.isLayoutDialog) {
+            this.dialogService.close(this.form.dialogId);
+        }
+    }
+    cancel() {
+        this.form.clearMessage();
+        this.form.isUpdateMode = false;
+        this.form.reset();
+        /*Show the previous selected data*/
+        if (this.form.isSelected) {
+            this.getPrevformFields();
+        }
+        this.form.isUpdateMode = false;
+        if (this.form._liveTableParent) {
+            this.form._liveTableParent.onCancel();
+        }
+        else {
+            /*
+              WMS-18759: dialog close is calling twice and dialog onHidden subscription is calling once from the library
+              due to this if we have another dialog inside liveform and if we click on cancel of second dialog the library
+              subscription is calling for both the dialogs.
+             */
+            this.closeDialog();
+        }
+        $appDigest();
+    }
+    delete(callBackFn) {
+        this.form.resetFormState();
+        this.form.operationType = Live_Operations.DELETE;
+        this.form.prevDataObject = getClonedObject(this.form.formdata || {});
+        this.form.save(undefined, undefined, undefined, callBackFn);
+    }
+    // Function use to save the form and open new form after save
+    saveAndNew() {
+        this.save(undefined, true, true);
+    }
+    // Function use to save the form and open new form after save
+    saveAndView() {
+        this.save(undefined, false);
+    }
+    submitForm($event) {
+        this.save($event);
+    }
+    save(event, updateMode, newForm) {
+        if (!this.form.datasource) {
+            return;
+        }
+        let data, prevData, operationType, isValid;
+        const requestData = {};
+        operationType = this.form.operationType = this.form.operationType || this.findOperationType();
+        // Disable the form submit if form is in invalid state.
+        if (this.form.validateFieldsOnSubmit()) {
+            return;
+        }
+        data = getClonedObject(this.form.constructDataObject());
+        prevData = this.form.prevformFields ? this.form.constructDataObject(true) : data;
+        try {
+            isValid = this.form.invokeEventCallback('beforeservicecall', { $event: event, $operation: this.form.operationType, $data: data, options: requestData });
+            if (isValid === false) {
+                return;
+            }
+            if (isValid && isValid.error) {
+                this.form.toggleMessage(true, isValid.error, 'error');
+                return;
+            }
+        }
+        catch (err) {
+            if (err.message === 'Abort') {
+                return;
+            }
+        }
+        // If operation is update, form is not touched and current data and previous data is same, Show no changes detected message
+        if (this.form.operationType === Live_Operations.UPDATE && this.form.ngform && this.form.ngform.pristine &&
+            (this.form.isSelected && isEqual(data, prevData))) {
+            this.form.toggleMessage(true, this.form.appLocale.MESSAGE_NO_CHANGES, 'info', '');
+            $appDigest();
+            return;
+        }
+        requestData.row = data;
+        requestData.transform = true;
+        requestData.skipNotification = true;
+        if (operationType === Live_Operations.UPDATE) {
+            requestData.rowData = this.form.formdata;
+            requestData.prevData = prevData;
+        }
+        performDataOperation(this.form.datasource, requestData, {
+            operationType: operationType
+        }).then((response) => {
+            const msg = operationType === Live_Operations.INSERT ? this.form.insertmessage : (operationType === Live_Operations.UPDATE ?
+                this.form.updatemessage : this.form.deletemessage);
+            let result;
+            if (operationType === Live_Operations.DELETE) {
+                result = requestData.row;
+                this.form.emptyDataModel();
+                this.form.prevDataValues = [];
+                this.form.isSelected = false;
+            }
+            else {
+                result = response;
+            }
+            if (!this.form.onSuccess) {
+                this.form.toggleMessage(true, msg, 'success');
+            }
+            if (this.form._liveTableParent) {
+                // highlight the current updated row
+                this.form._liveTableParent.onResult(operationType, response, newForm, updateMode);
+            }
+            else {
+                /*get updated data without refreshing page*/
+                this.form.datasource.execute(DataSource.Operation.LIST_RECORDS, {
+                    'skipToggleState': true
+                });
+                this.onDataSourceUpdate(response, newForm, updateMode);
+            }
+            return {
+                'result': result,
+                'status': true
+            };
+        }, (error) => {
+            if (!this.form.onError) {
+                this.form.toggleMessage(true, error, 'error');
+            }
+            $appDigest();
+            return {
+                'result': error,
+                'status': false
+            };
+        }).then(response => {
+            // reset the form to pristine state
+            this.form.resetFormState();
+            this.form.onResultCb(response.result, response.status, event);
+        });
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Cancel debounced function
+        if (this._debouncedSavePrevDataValues && this._debouncedSavePrevDataValues.cancel) {
+            this._debouncedSavePrevDataValues.cancel();
+            this._debouncedSavePrevDataValues = null;
+        }
+        // MEMORY LEAK FIX: Clear form reference
+        this.form = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2.LiveTableComponent, optional: true }, { token: i5.ToDatePipe }, { token: i1$1.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wmLiveForm]'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [FormComponent]
+                }] }, { type: i1$2.LiveTableComponent, decorators: [{
+                    type: Optional
+                }] }, { type: i5.ToDatePipe }, { type: i1$1.AbstractDialogService }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['formlayout']
+                }] }], propDecorators: { onKeydownHandler: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DependsonDirective, FormActionDirective, FormComponent, FormFieldDirective, FormWidgetDirective, LiveActionsDirective, LiveFilterDirective, LiveFormDirective };
+//# sourceMappingURL=index.mjs.map