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

package/components/data/form/bundles/index.umd.js

@@ -0,0 +1,3345 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@wm/components/basic/anchor'), require('@wm/components/input/button'), require('@angular/core'), require('@angular/forms'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/prefab'), require('@wm/components/data/list'), require('lodash-es'), require('@wm/components/data/table'), require('rxjs/operators'), require('@wm/components/data/live-table')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@wm/components/basic/anchor', '@wm/components/input/button', '@angular/core', '@angular/forms', '@wm/core', '@wm/components/base', '@wm/components/prefab', '@wm/components/data/list', 'lodash-es', '@wm/components/data/table', 'rxjs/operators', '@wm/components/data/live-table'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.data = global.wm.components.data || {}, global.wm.components.data.form = {}), global.ng.common, global.wm.components.basic.anchor, global.wm.components.input.button, global.ng.core, global.ng.forms, global.wm.core, global.wm.components.base, global.wm.components.prefab, global.wm.components.data.list, global._, global.wm.components.data.table, global.rxjs.operators, global.wm.components.data.livetable));
+})(this, (function (exports, i6, anchor, button, i0, i1, i1$1, i5, i4, i3, lodashEs, table, operators, i1$2) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i6__namespace = /*#__PURE__*/_interopNamespaceDefault(i6);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i1$2__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$2);
+
+    const propsMap = new Map([
+        ['autocomplete', { value: false, ...i5.PROP_BOOLEAN }],
+        ['captionalign', { value: 'left', ...i5.PROP_STRING }],
+        ['captionposition', { value: 'left', ...i5.PROP_STRING }],
+        ['captionsize', i5.PROP_STRING],
+        ['captionwidth', { value: 'xs-12 sm-3 md-3 lg-3', ...i5.PROP_STRING }],
+        ['class', i5.PROP_STRING],
+        ['collapsible', i5.PROP_BOOLEAN],
+        ['dataset', i5.PROP_ANY],
+        ['datasource', i5.PROP_STRING],
+        ['expanded', { value: true, ...i5.PROP_BOOLEAN }],
+        ['formdatasource', i5.PROP_STRING],
+        ['name', i5.PROP_STRING],
+        ['numberOfFields', i5.PROP_NUMBER],
+        ['show', { value: true, ...i5.PROP_BOOLEAN }],
+        ['showindevice', { displayType: 'inline-block', value: 'all', ...i5.PROP_STRING }],
+        ['subheading', i5.PROP_STRING],
+        ['tabindex', { value: 0, ...i5.PROP_NUMBER }],
+        ['title', i5.PROP_STRING],
+        ['itemsperrow', i5.PROP_STRING],
+    ]);
+    const registerFormProps = () => {
+        const formMap = new Map(propsMap);
+        formMap.set('action', i5.PROP_STRING);
+        formMap.set('defaultmode', { value: 'Edit', ...i5.PROP_STRING });
+        formMap.set('metadata', i5.PROP_STRING);
+        formMap.set('method', i5.PROP_STRING);
+        formMap.set('postmessage', { value: 'Data posted successfully', ...i5.PROP_STRING });
+        formMap.set('target', i5.PROP_STRING);
+        formMap.set('enctype', i5.PROP_STRING);
+        formMap.set('errormessage', { value: 'An error occured. Please try again!', ...i5.PROP_STRING });
+        formMap.set('messagelayout', { value: 'Inline', ...i5.PROP_STRING });
+        formMap.set('formdata', i5.PROP_STRING);
+        formMap.set('novalidate', i5.PROP_BOOLEAN);
+        formMap.set('validationtype', { value: 'default', ...i5.PROP_STRING });
+        formMap.set('iconclass', i5.PROP_STRING);
+        formMap.set('iconurl', i5.PROP_STRING);
+        formMap.set('readonly', { value: false, ...i5.PROP_BOOLEAN });
+        i5.register('wm-form', formMap);
+    };
+    const registerLiveFormProps = () => {
+        const liveFormMap = new Map(propsMap);
+        liveFormMap.set('defaultmode', { value: 'View', ...i5.PROP_STRING });
+        liveFormMap.set('formlayout', { value: 'inline', ...i5.PROP_STRING });
+        liveFormMap.set('insertmessage', { value: 'Record added successfully', ...i5.PROP_STRING });
+        liveFormMap.set('updatemessage', { value: 'Record updated successfully', ...i5.PROP_STRING });
+        liveFormMap.set('deletemessage', { value: 'Record deleted successfully', ...i5.PROP_STRING });
+        liveFormMap.set('errormessage', { value: 'An error occured. Please try again!', ...i5.PROP_STRING });
+        liveFormMap.set('messagelayout', { value: 'Toaster', ...i5.PROP_STRING });
+        liveFormMap.set('formdata', i5.PROP_STRING);
+        liveFormMap.set('novalidate', i5.PROP_BOOLEAN);
+        liveFormMap.set('validationtype', { value: 'default', ...i5.PROP_STRING });
+        liveFormMap.set('iconclass', i5.PROP_STRING);
+        liveFormMap.set('iconurl', i5.PROP_STRING);
+        i5.register('wm-liveform', liveFormMap);
+    };
+    const registerLiveFilterProps = () => {
+        const liveFilterMap = new Map(propsMap);
+        liveFilterMap.set('autoupdate', i5.PROP_BOOLEAN);
+        liveFilterMap.set('enableemptyfilter', { value: ' ', ...i5.PROP_STRING });
+        liveFilterMap.set('pagesize', { value: 20, ...i5.PROP_NUMBER });
+        liveFilterMap.set('iconclass', { value: 'wi wi-filter-list', ...i5.PROP_STRING });
+        liveFilterMap.set('iconurl', i5.PROP_STRING);
+        i5.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 = '';
+        lodashEs.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');
+            case 'textarea':
+                return element.querySelector('textarea');
+            default:
+                return element.querySelector('input');
+        }
+    };
+    const setTouchedState = (self, ngForm, fieldName) => {
+        if (ngForm.valid) {
+            return;
+        }
+        if (ngForm.controls) {
+            lodashEs.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 i5.StylableComponent {
+        static { this.initializeProps = registerFormProps(); }
+        set isLayoutDialog(nv) {
+            if (nv) {
+                i1$1.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 && !i1$1.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 i1$1.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 = lodashEs.debounce(this.updateFieldSource, 350);
+            this.validationMessages = [];
+            this._debouncedSubmitForm = i1$1.debounce(($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);
+            i5.styler(this.nativeElement, this);
+            // remove title property as attribute as it is causing unnecessary tooltip
+            i1$1.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 (!lodashEs.get(this.parentForm.ngform.controls, this.parentList.name)) {
+                    this.parentForm.ngform.setControl(this.parentList.name, new i1.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 (lodashEs.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 = lodashEs.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');
+            lodashEs.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 = lodashEs.get(formInstance, 'formGroupName') || formInstance.name;
+                if (i1$1.isDefined(formInstance.formArrayIndex)) {
+                    formName = formName + '[' + formInstance.formArrayIndex + ']';
+                }
+                let current = formInstance;
+                while (lodashEs.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;
+            }
+            lodashEs.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: lodashEs.keys(v.errors),
+                        message: field.validationmessage || '',
+                        getElement: () => {
+                            return field.$element.find('[focus-target]');
+                        },
+                        formName: lodashEs.last(prefix.split('.')),
+                        fullyQualifiedFormName: prefix
+                    });
+                }
+                else {
+                    this.validationMessages[index].value = field.value;
+                    this.validationMessages[index].errorType = lodashEs.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 && lodashEs.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(i1$1.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();
+                        }
+                        i1$1.$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 (lodashEs.isEqual(nv, ov)) {
+                        break;
+                    }
+                    lodashEs.isArray(nv) ? this.setFormData(lodashEs.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 && lodashEs.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':
+                    i1$1.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 (!i1$1.isElementInViewport(this.$element[0])) {
+                        i1$1.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 = lodashEs.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 = i5.getFieldLayoutConfig(this.captionwidth, this.captionposition, lodashEs.get(this.app.selectedViewPort, 'os'));
+            this._widgetClass = layoutConfig.widgetCls;
+            this._captionClass = layoutConfig.captionCls;
+            i1$1.$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 && !lodashEs.isEmpty(this.formdata)) {
+                this.onDataSourceChange();
+                lodashEs.isArray(this.formdata) ? this.setFormData(lodashEs.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
+            lodashEs.forEach(this.ngform.value, (val, key) => {
+                if (!lodashEs.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 = i1$1.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 = lodashEs.get(formData, field.form.formGroupName, {});
+                    fd[fieldName] = fieldValue;
+                    lodashEs.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 = lodashEs.get(formData, field.form.parentList.name, []);
+                    fd[field.form.formArrayIndex] = fd[field.form.formArrayIndex] || {};
+                    fd[field.form.formArrayIndex][fieldName] = fieldValue;
+                    lodashEs.set(formData, field.form.parentList.name, fd);
+                }
+                else {
+                    // In case of update the field will be already present in form data
+                    lodashEs.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 lodashEs.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 && lodashEs.isEmpty(innerFormdata)) {
+                    field.value = field.defaultvalue;
+                }
+                else if (fd.hasOwnProperty(key)) {
+                    field.value = lodashEs.get(fd, key);
+                }
+                else if (lodashEs.includes(key, '.')) {
+                    // key contains '.' when mapping the fields to child reference i.e. childCol is having key as "parent.childCol"
+                    if (fd.hasOwnProperty(lodashEs.split(key, '.')[0])) {
+                        field.value = lodashEs.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 && lodashEs.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 (lodashEs.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 === i1$1.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 = i1$1.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 (i1$1.isDefined(field)) {
+                    if (field.type === i1$1.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 = i5.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 = i5.Live_Operations.UPDATE;
+            if (this.isSelected) {
+                this.savePrevformFields();
+                this.savePrevDataValues();
+            }
+            this.prevDataObject = i1$1.getClonedObject(this.formdata || {});
+            this.setReadonlyFields();
+            this.isUpdateMode = true;
+            i1$1.$appDigest();
+        }
+        triggerWMEvent(eventName) {
+            const tableId = this.nativeElement.getAttribute('dependsontable');
+            if (!tableId) {
+                return;
+            }
+            i1$1.$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 = i1$1.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';
+                    i5.performDataOperation(dataSource, formData, { operationType: operationType })
+                        .then((data) => {
+                        if (dataSource.category === 'wm.CrudVariable') {
+                            this.triggerWMEvent('resetEditMode');
+                            this.datasource.execute(i1$1.DataSource.Operation.LIST_RECORDS, {
+                                'skipToggleState': true,
+                                'operation': 'list',
+                                'page': currentPageNum,
+                                'preventMissingOpMsg': true
+                            });
+                            if (this.dialogId) {
+                                this.closeDialog();
+                            }
+                        }
+                        if (i1$1.isDefined(data.body)) {
+                            result = i1$1.getValidJSON(data.body);
+                            result = i1$1.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;
+                        i1$1.$appDigest();
+                        return {
+                            'result': lodashEs.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 lodashEs.some(this.buttonArray, btn => {
+                return lodashEs.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 = i1$1.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 && lodashEs.get(form.parentForm, 'formdata') && !lodashEs.isEmpty(form.parentForm.formdata)) {
+                return form.parentForm.formdata;
+            }
+            return this.getNearestParentFormData(form.parentForm);
+        }
+        setFormDataFromParentFormData(formdata) {
+            if (lodashEs.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 = lodashEs.get(formdata, this.parentList.name);
+                    if (childFormArrayData) {
+                        if (!lodashEs.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 = lodashEs.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 (lodashEs.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 = i5.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 (lodashEs.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 (lodashEs.isEmpty(fields)) {
+                return;
+            }
+            if (this.onBeforeRenderEvt) {
+                userFields = this.invokeEventCallback('beforerender', { $metadata: fields });
+                if (userFields) {
+                    fields = userFields;
+                }
+            }
+            if (!lodashEs.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
+                i1$1.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 = i1$1.$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 && lodashEs.get(this.parentForm, 'ngform.controls');
+            if (controls) {
+                // when current form is inside the list (i.e. incase of formArray).
+                if (lodashEs.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 = lodashEs.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.EnvironmentInjector }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.DynamicComponentRefProvider }, { token: i0__namespace.NgZone }, { token: i3__namespace.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4__namespace.PrefabDirective, optional: true, skipSelf: true }, { token: i5__namespace.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__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵ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: [
+                i5.provideAsWidgetRef(FormComponent)
+            ], queries: [{ propertyName: "componentRefs", predicate: i5.WidgetRef, descendants: true }], viewQueries: [{ propertyName: "dynamicFormRef", first: true, predicate: ["dynamicForm"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "messageRef", first: true, predicate: i5.MessageComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, 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: i6.CommonModule }, { kind: "directive", type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: anchor.AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: button.ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "component", type: i5.MessageComponent, selector: "[wmMessage]", exportAs: ["wmMessage"] }, { kind: "component", type: i5.WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }, { kind: "pipe", type: i5.FilterPipe, name: "filter" }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i6.CommonModule, i5.FilterPipe, anchor.AnchorComponent, button.ButtonComponent, i5.MessageComponent, i5.WmAppIconComponent], selector: 'form[wmForm]', providers: [
+                            i5.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__namespace.Injector }, { type: i0__namespace.EnvironmentInjector }, { type: i1__namespace.FormBuilder }, { type: i1$1__namespace.App }, { type: i1$1__namespace.AbstractDialogService }, { type: i1$1__namespace.DynamicComponentRefProvider }, { type: i0__namespace.NgZone }, { type: i3__namespace.ListComponent, decorators: [{
+                        type: i0.Optional
+                    }] }, { type: FormComponent, decorators: [{
+                        type: i0.SkipSelf
+                    }, {
+                        type: i0.Optional
+                    }] }, { type: i4__namespace.PrefabDirective, decorators: [{
+                        type: i0.SkipSelf
+                    }, {
+                        type: i0.Optional
+                    }] }, { type: i5__namespace.PartialDirective, decorators: [{
+                        type: i0.SkipSelf
+                    }, {
+                        type: i0.Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['beforesubmit.event']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['submit.event']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['beforerender.event']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['dataset.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['formdata.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['wmLiveForm']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['wmLiveFilter']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['data-role']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['key']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['name']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { dynamicFormRef: [{
+                    type: i0.ViewChild,
+                    args: ['dynamicForm', { static: true, read: i0.ViewContainerRef }]
+                }], messageRef: [{
+                    type: i0.ViewChild,
+                    args: [i5.MessageComponent]
+                }], componentRefs: [{
+                    type: i0.ContentChildren,
+                    args: [i5.WidgetRef, { descendants: true }]
+                }], action: [{
+                    type: i0.HostBinding,
+                    args: ['action']
+                }], submit: [{
+                    type: i0.HostListener,
+                    args: ['submit', ['$event']]
+                }], onReset: [{
+                    type: i0.HostListener,
+                    args: ['reset']
+                }], onKeydownHandler: [{
+                    type: i0.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: table.TableComponent, optional: true }, { token: i5.WidgetRef, self: true }, { token: i1__namespace.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormWidgetDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmFormWidget]'
+                    }]
+            }], ctorParameters: () => [{ type: undefined, decorators: [{
+                        type: i0.Optional
+                    }, {
+                        type: i0.Inject,
+                        args: [FormComponent]
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Optional
+                    }, {
+                        type: i0.Inject,
+                        args: [table.TableComponent]
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Self
+                    }, {
+                        type: i0.Inject,
+                        args: [i5.WidgetRef]
+                    }] }, { type: i1__namespace.FormBuilder }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['name']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['key']
+                    }] }] });
+
+    const registerProps$1 = () => {
+        i5.register('wm-form-action', new Map([
+            ['accessroles', i5.PROP_STRING],
+            ['action', i5.PROP_STRING],
+            ['class', i5.PROP_STRING],
+            ['binding', i5.PROP_STRING],
+            ['disabled', i5.PROP_BOOLEAN],
+            ['display-name', i5.PROP_STRING],
+            ['hyperlink', i5.PROP_STRING],
+            ['iconclass', i5.PROP_STRING],
+            ['iconname', i5.PROP_STRING],
+            ['key', i5.PROP_STRING],
+            ['position', { value: 'footer', ...i5.PROP_STRING }],
+            ['shortcutkey', i5.PROP_STRING],
+            ['show', { value: true, ...i5.PROP_BOOLEAN }],
+            ['tabindex', { value: 0, ...i5.PROP_NUMBER }],
+            ['target', i5.PROP_STRING],
+            ['title', i5.PROP_STRING],
+            ['type', { value: 'button', ...i5.PROP_STRING }],
+            ['update-mode', { value: true, ...i5.PROP_BOOLEAN }],
+            ['widget-type', { value: 'button', ...i5.PROP_STRING }]
+        ]));
+    };
+
+    const WIDGET_CONFIG = { widgetType: 'wm-form-action', hostClass: '' };
+    class FormActionDirective extends i5.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: lodashEs.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormActionDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
+                i5.provideAsWidgetRef(FormActionDirective)
+            ], usesInheritance: true, ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormActionDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmFormAction]',
+                        providers: [
+                            i5.provideAsWidgetRef(FormActionDirective)
+                        ]
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: FormComponent, decorators: [{
+                        type: i0.Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }] });
+
+    const registerProps = () => {
+        const formFieldMap = new Map([
+            ['dataentrymode', { value: 'default', ...i5.PROP_STRING }],
+            ['debouncetime', { value: 250, ...i5.PROP_NUMBER }],
+            ['defaultvalue', i5.PROP_STRING],
+            ['displayname', i5.PROP_STRING],
+            ['display-name', i5.PROP_STRING],
+            ['field', i5.PROP_STRING],
+            ['filterexpressions', i5.PROP_STRING],
+            ['filter-on', i5.PROP_STRING],
+            ['generator', i5.PROP_STRING],
+            ['hint', i5.PROP_STRING],
+            ['inputtype', i5.PROP_STRING],
+            ['is-primary-key', i5.PROP_BOOLEAN],
+            ['is-range', i5.PROP_BOOLEAN],
+            ['is-related', i5.PROP_BOOLEAN],
+            ['isformfield', { value: true }],
+            ['key', i5.PROP_STRING],
+            ['limit', i5.PROP_NUMBER],
+            ['lookup-type', i5.PROP_STRING],
+            ['lookup-field', i5.PROP_STRING],
+            ['name', i5.PROP_STRING],
+            ['matchmode', i5.PROP_STRING],
+            ['maxdefaultvalue', i5.PROP_STRING],
+            ['maxplaceholder', i5.PROP_STRING],
+            ['mobile-display', { value: true, ...i5.PROP_BOOLEAN }],
+            ['period', i5.PROP_BOOLEAN],
+            ['pc-display', { value: true, ...i5.PROP_BOOLEAN }],
+            ['placeholder', i5.PROP_STRING],
+            ['primary-key', i5.PROP_BOOLEAN],
+            ['related-entity-name', i5.PROP_STRING],
+            ['required', i5.PROP_BOOLEAN],
+            ['show', { value: true, ...i5.PROP_BOOLEAN }],
+            ['tablet-display', { value: true, ...i5.PROP_BOOLEAN }],
+            ['type', i5.PROP_STRING],
+            ['validationmessage', i5.PROP_STRING],
+            ['viewmodewidget', i5.PROP_STRING],
+            ['widgettype', i5.PROP_STRING]
+        ]);
+        for (const key in i1$1.FormWidgetType) {
+            const widgetName = 'wm-form-field-' + i1$1.FormWidgetType[key];
+            const widgetProps = i5.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 i5.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 || i1$1.FormWidgetType.TEXT).trim()
+            };
+            let resolveFn = i1$1.noop;
+            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 = i1$1.debounce(() => 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');
+            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 i5.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 (lodashEs.isObject(value)) {
+                if (lodashEs.isArray(value)) {
+                    lodashEs.forEach(value, obj => {
+                        if (lodashEs.isObject(obj)) {
+                            caption.push(this.evaluateExpr(obj, displayField, displayExpr));
+                        }
+                    });
+                }
+                else {
+                    caption.push(this.evaluateExpr(value, displayField, displayExpr));
+                }
+                return lodashEs.join(caption, ',');
+            }
+            return (value === undefined || value === null) ? '' : this.value;
+        }
+        getCaption() {
+            return (this.value === undefined || this.value === null) ? (lodashEs.get(this.form.dataoutput, this._fieldName) || '') : this.value;
+        }
+        // Notifies changes to observing validation fields
+        notifyChanges() {
+            lodashEs.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 === i1$1.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 === i1$1.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 !== i1$1.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 = ((i1$1.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 || (i1$1.isMobile() && this._clicktriggeredByUser && i1$1.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 ((!i1$1.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(operators.debounceTime(200))
+                .subscribe(this.onValueChange.bind(this));
+            this.registerDestroyListener(() => onValueChangeSubscription.unsubscribe());
+            const onStatusChangeSubscription = this._control.statusChanges
+                .pipe(operators.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(operators.debounceTime(200))
+                    .subscribe(this.onValueChange.bind(this));
+                this.registerDestroyListener(() => onMaxValueChangeSubscription.unsubscribe());
+            }
+            this.value = lodashEs.get(this.form.formdata, this._fieldName);
+        }
+        ngOnInit() {
+            this.ngform = this.form.ngform;
+            this.registerFormField();
+            // Instantiate custom validators class for form field
+            this.fieldValidations = new i5.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 || i5.getDefaultViewModeWidget(this.widgettype);
+                // For upload widget, generate the permitted field
+                if (this.widgettype === i1$1.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 (i1$1.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);
+                i1$1.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormFieldDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.Viewport }, { token: i1$1__namespace.App }, { token: i3__namespace.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: i5.Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
+                i5.provideAsWidgetRef(FormFieldDirective),
+                i5.provideAs(FormFieldDirective, i1.NG_VALUE_ACCESSOR, true),
+                { provide: i5.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__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormFieldDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmFormField]',
+                        exportAs: 'wmFormField',
+                        providers: [
+                            i5.provideAsWidgetRef(FormFieldDirective),
+                            i5.provideAs(FormFieldDirective, i1.NG_VALUE_ACCESSOR, true),
+                            { provide: i5.Context, useFactory: () => { return {}; }, multi: true }
+                        ]
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: FormComponent }, { type: i1__namespace.FormBuilder }, { type: i1$1__namespace.Viewport }, { type: i1$1__namespace.App }, { type: i3__namespace.ListComponent, decorators: [{
+                        type: i0.Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['chipclass.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['dataset.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['displayexpression.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['displaylabel.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['widgettype']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['name']
+                    }] }, { type: String, decorators: [{
+                        type: i0.Attribute,
+                        args: ['displayimagesrc.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['key']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['is-range']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['pc-display']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['mobile-display']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['tablet-display']
+                    }] }, { type: Array, decorators: [{
+                        type: i0.Self
+                    }, {
+                        type: i0.Inject,
+                        args: [i5.Context]
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { formWidget: [{
+                    type: i0.ContentChild,
+                    args: ['formWidget', { static: true }]
+                }], formWidgetMax: [{
+                    type: i0.ContentChild,
+                    args: ['formWidgetMax']
+                }], onKeydownHandler: [{
+                    type: i0.HostListener,
+                    args: ['keydown', ['$event']]
+                }], handleClick: [{
+                    type: i0.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: i5.Live_Operations.INSERT, widgetName: this.subscribedWidget.name, row: this.subscribedWidget.selecteditem });
+        }
+        updateRow() {
+            this.app.notify('wm-event', { eventName: i5.Live_Operations.UPDATE, widgetName: this.subscribedWidget.name, row: this.subscribedWidget.selecteditem });
+        }
+        deleteRow() {
+            this.app.notify('wm-event', { eventName: i5.Live_Operations.DELETE, widgetName: this.subscribedWidget.name, row: this.subscribedWidget.selecteditem });
+        }
+        successHandler(options, response) {
+            i1$1.triggerFn(options.success, response);
+        }
+        errorHandler(options, error) {
+            this.app.notifyApp(error, 'error', 'ERROR');
+            i1$1.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 === i5.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 === i5.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(i1$1.DataSource.Operation.LIST_RECORDS, {
+                    'skipToggleState': true
+                }).then(response => {
+                    this.successHandler(options, response);
+                }, err => {
+                    this.errorHandler(options, err);
+                });
+            }
+        }
+        performCUDOperation(requestData, operation, options) {
+            i5.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(i1$1.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: () => {
+                    i1$1.triggerFn(options.cancelDeleteCallback);
+                    this.dialogService.closeAppConfirmDialog();
+                }
+            });
+        }
+        performOperation(operation, options) {
+            const requestData = {
+                row: options.row,
+                prevData: {},
+                rowData: {},
+                transform: true,
+                skipNotification: true
+            };
+            if (operation === i5.Live_Operations.UPDATE) {
+                requestData.rowData = options.rowData;
+                requestData.prevData = options.prevData;
+            }
+            /* decide routine based on CRUD operation to be performed */
+            switch (operation) {
+                case i5.Live_Operations.INSERT:
+                    this.insertRecord(requestData, operation, options);
+                    break;
+                case i5.Live_Operations.UPDATE:
+                    this.updateRecord(requestData, operation, options);
+                    break;
+                case i5.Live_Operations.DELETE:
+                    this.deleteRecord(requestData, operation, options);
+                    break;
+                case i5.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveActionsDirective, deps: [{ token: i3.ListComponent, self: true }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveActionsDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmLiveActions]'
+                    }]
+            }], ctorParameters: () => [{ type: undefined, decorators: [{
+                        type: i0.Self
+                    }, {
+                        type: i0.Inject,
+                        args: [i3.ListComponent]
+                    }] }, { type: i1$1__namespace.App }, { type: i1$1__namespace.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 = i5.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 = i5.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 i5.Live_Operations.UPDATE:
+                    this.currentFormData = options.row;
+                    if (this.isLayoutDialog) {
+                        this.openFormDialog();
+                    }
+                    else {
+                        this.onUpdate(undefined, undefined, true);
+                    }
+                    break;
+                case i5.Live_Operations.INSERT:
+                    if (this.isLayoutDialog) {
+                        this.openFormDialog();
+                    }
+                    else {
+                        this.onInsert();
+                    }
+                    break;
+                case i5.Live_Operations.DELETE:
+                    this.app.Widgets[this.dependson].call('delete', { row: options.row });
+                    break;
+                case i5.Live_Operations.READ:
+                    if (!this.isLayoutDialog) {
+                        this.form.isUpdateMode = false;
+                    }
+                    break;
+                case 'rerender':
+                    if (options.dataSource) {
+                        options.dataSource.execute(i1$1.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 === i5.Live_Operations.UPDATE) {
+                        this.onUpdate(undefined, undefined, true);
+                    }
+                    else if (this.currentOp === i5.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.App }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: DependsonDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[dependson]'
+                    }]
+            }], ctorParameters: () => [{ type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['dialogid']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['dependson']
+                    }] }, { type: i1$1__namespace.AbstractDialogService }, { type: i1$1__namespace.App }], propDecorators: { formChildren: [{
+                    type: i0.ContentChildren,
+                    args: [FormComponent, { descendants: true }]
+                }] } });
+
+    const FILTER_CONSTANTS = {
+        'EMPTY_KEY': 'EMPTY_NULL_FILTER'
+    };
+    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 = i1$1.debounce(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 === i1$1.DataSource.Operation.LIST_RECORDS || operation === i1$1.DataSource.Operation.DOWNLOAD) {
+                return this.applyFilter(options);
+            }
+            if (operation === i1$1.DataSource.Operation.GET_OPTIONS) {
+                return this._options || {};
+            }
+            if (operation === i1$1.DataSource.Operation.GET_PAGING_OPTIONS) {
+                return this.form.pagination;
+            }
+            if (!this.form.datasource) {
+                return {};
+            }
+            if (operation === i1$1.DataSource.Operation.FETCH_DISTINCT_VALUES) {
+                return i5.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) {
+            i5.applyFilterOnField(this.form.datasource, field.widget, this.form.formFields, nv, {
+                EMPTY_VALUE: this.form.appLocale.LABEL_NO_VALUE
+            });
+            if (this.form.autoupdate && i1$1.isDefined(nv)) {
+                this._filter();
+            }
+        }
+        onMaxDefaultValueChange() {
+            setTimeout(() => {
+                this.filterOnDefault();
+            });
+        }
+        onDataSourceChange() {
+            const dataSource = this.form.datasource;
+            if (!dataSource) {
+                return;
+            }
+            this.form.formFields.forEach(field => {
+                if (i5.isDataSetWidget(field.widgettype)) {
+                    i5.getDistinctValuesForField(dataSource, field.widget, {
+                        widget: 'widgettype',
+                        enableemptyfilter: this.form.enableemptyfilter,
+                        EMPTY_VALUE: this.form.appLocale.LABEL_NO_VALUE
+                    });
+                    i5.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 === i1$1.FormWidgetType.AUTOCOMPLETE || filterField.widgettype === i1$1.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 = i1$1.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 = i1$1.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 === i1$1.FormWidgetType.AUTOCOMPLETE || field.widgettype === i1$1.FormWidgetType.TYPEAHEAD) && $el) {
+                    fieldEle = $el.find(fieldSelector);
+                    if (!field['is-range']) {
+                        dataModel[field.field] = {
+                            'value': i1$1.isDefined(field.value) ? field.value : fieldEle.val() // For autocomplete, set the datavalue. If not present, set query value
+                        };
+                    }
+                    else {
+                        dataModel[field.field] = {
+                            'minValue': i1$1.isDefined(field.minValue) ? field.minValue : fieldEle.first().val(),
+                            'maxValue': i1$1.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 = i5.getRangeFieldValue(minValue, maxvalue);
+                    matchMode = i5.getRangeMatchMode(minValue, maxvalue);
+                    if (i1$1.isDefined(fieldValue)) {
+                        filterFields[colName] = {
+                            'value': fieldValue,
+                            'matchMode': matchMode,
+                            'logicalOp': 'AND'
+                        };
+                    }
+                }
+                else {
+                    switch (filterField.widgettype) {
+                        case i1$1.FormWidgetType.SELECT:
+                        case i1$1.FormWidgetType.RADIOSET:
+                            if (i5.getEnableEmptyFilter(this.form.enableemptyfilter) && filterField._value === FILTER_CONSTANTS.EMPTY_KEY) {
+                                matchMode = i5.getEmptyMatchMode(this.form.enableemptyfilter);
+                                fieldValue = filterField._value;
+                            }
+                            else {
+                                if (filterField.type === i1$1.DataType.BOOLEAN) {
+                                    if (i1$1.isDefined(filterField._value) && filterField._value !== '') {
+                                        fieldValue = JSON.parse(filterField._value);
+                                    }
+                                }
+                                else {
+                                    fieldValue = filterField._value;
+                                }
+                            }
+                            break;
+                        case i1$1.FormWidgetType.CHECKBOXSET:
+                        case i1$1.FormWidgetType.CHIPS:
+                            if (filterField._value && filterField._value.length) {
+                                fieldValue = filterField._value;
+                            }
+                            break;
+                        case i1$1.FormWidgetType.CHECKBOX:
+                        case i1$1.FormWidgetType.TOGGLE:
+                        case i1$1.FormWidgetType.ICONBUTTONTOGGLE:
+                            if (i1$1.isDefined(filterField._value) && filterField._value !== '') {
+                                fieldValue = filterField.type === i1$1.DataType.BOOLEAN ? JSON.parse(filterField._value) : filterField._value;
+                            }
+                            break;
+                        default:
+                            fieldValue = filterField._value;
+                            break;
+                    }
+                    if (i1$1.isDefined(fieldValue) && fieldValue !== '' && fieldValue !== null) {
+                        filterFields[colName] = {};
+                        if (matchMode) {
+                            filterFields[colName].matchMode = matchMode;
+                            fieldValue = undefined;
+                        }
+                        else if (filterField.type === i1$1.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(i1$1.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(i1$1.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(i1$1.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 = i1$1.getClonedObject(data);
+                    this.form.onResultCb(data, true);
+                }
+                i1$1.$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 = lodashEs.find(this.form.formFields, obj => {
+                return i1$1.isDefined(obj.value) || i1$1.isDefined(obj.minValue) || i1$1.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveFilterDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmLiveFilter]'
+                    }]
+            }], ctorParameters: () => [{ type: undefined, decorators: [{
+                        type: i0.Self
+                    }, {
+                        type: i0.Inject,
+                        args: [FormComponent]
+                    }] }] });
+
+    const isTimeType = field => field.widgettype === i1$1.DataType.TIME || (field.type === i1$1.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 = i1$1.debounce(() => {
+                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 && i5.isDataSetWidget(field.widgettype)) {
+                if (field['is-related']) {
+                    field.isDataSetBound = true;
+                    i5.fetchRelatedFieldData(this.form.datasource, field.widget, {
+                        relatedField: field.key,
+                        datafield: i5.ALLFIELDS,
+                        widget: 'widgettype',
+                    });
+                }
+                else {
+                    i5.getDistinctValuesForField(this.form.datasource, field.widget, {
+                        widget: 'widgettype',
+                        enableemptyfilter: this.form.enableemptyfilter
+                    });
+                    i5.applyFilterOnField(this.form.datasource, field.widget, formFields, field.value, { isFirst: true });
+                }
+            }
+        }
+        onDataSourceChange() {
+            if (lodashEs.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 (i1$1.isDefined(nv) && nv !== null && nv !== '' && nv !== 'null') {
+                field.value = i5.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) {
+            i5.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(i1$1.DataSource.Operation.GET_PRIMARY_KEY) || [];
+            primaryKey = dataObj[primaryKeys[0]];
+            href += this.form.datasource.execute(i1$1.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 = lodashEs.get(dataObj, field.key || field.name);
+                if (isTimeType(field)) {
+                    field.value = getValidTime(value);
+                }
+                else if (field.type === i1$1.DataType.BLOB) {
+                    this.form.resetFileUploadWidget(field, true);
+                    field.href = this.getBlobURL(dataObj, field.key, value);
+                    field.value = lodashEs.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 = i1$1.isDefined(updateMode) ? updateMode : true;
+        }
+        savePrevformFields() {
+            this.form.prevformFields = i1$1.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 === i5.Live_Operations.INSERT) {
+                return {};
+            }
+            if (i1$1.isDefined(this.form.prevDataObject) && !i1$1.isEmptyObject(this.form.prevDataObject)) {
+                return i1$1.getClonedObject(this.form.prevDataObject);
+            }
+            return i1$1.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 = lodashEs.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 && i1$1.isDateTimeType(field.widgettype)) || i1$1.isDateTimeType(field.type)) {
+                    if (field.value) {
+                        dateTime = i1$1.getValidDateObject(field.value);
+                        if (field.outputformat === i1$1.DataType.TIMESTAMP || field.type === i1$1.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 === i1$1.DataType.BLOB) {
+                    fieldValue = i1$1.getFiles(formName, fieldName + '_formWidget', field.multiple);
+                }
+                else if (field.type === i1$1.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(i1$1.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 && !lodashEs.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 = i5.Live_Operations.UPDATE;
+                    }
+                    /*If only no column is primary key*/
+                }
+                else if (this.form.primaryKey.length === 0) {
+                    lodashEs.forEach(this.form.formdata, (value) => {
+                        if (value) {
+                            isPrimary = true;
+                        }
+                    });
+                    if (isPrimary) {
+                        operation = i5.Live_Operations.UPDATE;
+                    }
+                    /*If multiple columns are primary key*/
+                }
+                else {
+                    isPrimary = lodashEs.some(this.form.primaryKey, (primaryKey) => {
+                        if (this.form.formdata[primaryKey]) {
+                            return true;
+                        }
+                    });
+                    if (isPrimary) {
+                        operation = i5.Live_Operations.UPDATE;
+                    }
+                }
+            }
+            return operation || i5.Live_Operations.INSERT;
+        }
+        getPrevDataValues() {
+            const prevDataValues = lodashEs.fromPairs(lodashEs.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 === i1$1.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();
+            }
+            i1$1.$appDigest();
+        }
+        delete(callBackFn) {
+            this.form.resetFormState();
+            this.form.operationType = i5.Live_Operations.DELETE;
+            this.form.prevDataObject = i1$1.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 = i1$1.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 === i5.Live_Operations.UPDATE && this.form.ngform && this.form.ngform.pristine &&
+                (this.form.isSelected && lodashEs.isEqual(data, prevData))) {
+                this.form.toggleMessage(true, this.form.appLocale.MESSAGE_NO_CHANGES, 'info', '');
+                i1$1.$appDigest();
+                return;
+            }
+            requestData.row = data;
+            requestData.transform = true;
+            requestData.skipNotification = true;
+            if (operationType === i5.Live_Operations.UPDATE) {
+                requestData.rowData = this.form.formdata;
+                requestData.prevData = prevData;
+            }
+            i5.performDataOperation(this.form.datasource, requestData, {
+                operationType: operationType
+            }).then((response) => {
+                const msg = operationType === i5.Live_Operations.INSERT ? this.form.insertmessage : (operationType === i5.Live_Operations.UPDATE ?
+                    this.form.updatemessage : this.form.deletemessage);
+                let result;
+                if (operationType === i5.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(i1$1.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');
+                }
+                i1$1.$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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2__namespace.LiveTableComponent, optional: true }, { token: i5__namespace.ToDatePipe }, { token: i1$1__namespace.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveFormDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmLiveForm]'
+                    }]
+            }], ctorParameters: () => [{ type: undefined, decorators: [{
+                        type: i0.Self
+                    }, {
+                        type: i0.Inject,
+                        args: [FormComponent]
+                    }] }, { type: i1$2__namespace.LiveTableComponent, decorators: [{
+                        type: i0.Optional
+                    }] }, { type: i5__namespace.ToDatePipe }, { type: i1$1__namespace.AbstractDialogService }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['formlayout']
+                    }] }], propDecorators: { onKeydownHandler: [{
+                    type: i0.HostListener,
+                    args: ['keydown', ['$event']]
+                }] } });
+
+    exports.DependsonDirective = DependsonDirective;
+    exports.FormActionDirective = FormActionDirective;
+    exports.FormComponent = FormComponent;
+    exports.FormFieldDirective = FormFieldDirective;
+    exports.FormWidgetDirective = FormWidgetDirective;
+    exports.LiveActionsDirective = LiveActionsDirective;
+    exports.LiveFilterDirective = LiveFilterDirective;
+    exports.LiveFormDirective = LiveFormDirective;
+
+}));