@wavemaker/app-ng-runtime 11.13.0-rc.6255 → 11.14.0-rc.6276

package/components/input/dataset-aware-form/bundles/index.umd.js

@@ -0,0 +1,328 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/input/base-form-custom'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs', '@wm/core', '@wm/components/base', '@wm/components/input/base-form-custom', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.datasetawareform = {}), global.ng.core, global.rxjs, global.wm.core, global.wm.components.base, global.wm.components.input.baseFormCustom, global._));
+})(this, (function (exports, i0, rxjs, core, base, baseFormCustom, lodashEs) { '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 i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+
+    class DatasetAwareFormComponent extends baseFormCustom.BaseFormCustomComponent {
+        get modelByKey() {
+            return this._modelByKey;
+        }
+        // triggers on ngModel change. This function extracts the datavalue value.
+        set modelByKey(val) {
+            this.selectByKey(val);
+            // invoke on datavalue change.
+            this.invokeOnChange(this._modelByValue);
+        }
+        // @ts-ignore
+        get datavalue() {
+            return this._modelByValue;
+        }
+        // triggers on setting the datavalue. This function extracts the model value.
+        // @ts-ignore
+        set datavalue(val) {
+            if (this.multiple) {
+                val = base.extractDataAsArray(val);
+            }
+            this._modelByValue = val;
+            this.selectByValue(val);
+            // changes on the datavalue can be subscribed using listenToDatavalue
+            this.datavalue$.next(val);
+            // invoke on datavalue change.
+            this.invokeOnChange(val, undefined, true);
+        }
+        constructor(inj, config, explicitContext, groupby, initPromise) {
+            super(inj, config, explicitContext, initPromise);
+            this.groupby = groupby;
+            this.datasetItems = [];
+            this.acceptsArray = false; // set to true if proxyModel on widget accepts array type.
+            this.dataset$ = new rxjs.Subject();
+            this.datavalue$ = new rxjs.Subject();
+            this.allowempty = true;
+            this._debounceDatavalueUpdation = lodashEs.debounce((values) => {
+                // if no item is found in datasetItems, wait untill the dataset updates by preserving the datavalue in toBeProcessedDatavalue.
+                if (!core.isDefined(this._modelByKey) || (lodashEs.isArray(this._modelByKey) && !this._modelByKey.length)) {
+                    this.toBeProcessedDatavalue = values;
+                    this._modelByValue = '';
+                }
+                else if (core.isDefined(this.toBeProcessedDatavalue)) {
+                    // obtain the first array value when multiple is set to false.
+                    // set the modelByValue only when undefined.
+                    if (!core.isDefined(this._modelByValue)) {
+                        this._modelByValue = (!this.multiple && lodashEs.isArray(this.toBeProcessedDatavalue)) ? this.toBeProcessedDatavalue[0] : this.toBeProcessedDatavalue;
+                    }
+                    this.toBeProcessedDatavalue = undefined;
+                }
+                this.initDisplayValues();
+            }, 150);
+            this.datePipe = this.inj.get(base.ToDatePipe);
+            this.appDefaults = this.inj.get(core.AppDefaults);
+            this.binddisplayexpression = this.nativeElement.getAttribute('displayexpression.bind');
+            this.binddisplayimagesrc = this.nativeElement.getAttribute('displayimagesrc.bind');
+            this.binddisplaylabel = this.nativeElement.getAttribute('displaylabel.bind');
+            this._debouncedInitDatasetItems = core.debounce(() => {
+                this.initDatasetItems();
+                core.$appDigest();
+            }, 150);
+            this.handleHeaderClick = core.noop;
+            this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", () => {
+                this._debouncedInitDatasetItems();
+            });
+        }
+        /**
+         * This function sets the _datavalue value from the model and sets the selected flag when item is found.
+         * Here model is the value obtained from ngModel.
+         * @param keys represent the model.
+         */
+        selectByKey(keys) {
+            this.resetDatasetItems();
+            if (!this.datasetItems.length) {
+                return;
+            }
+            if (this.multiple && !lodashEs.isArray(keys)) {
+                keys = [keys];
+            }
+            // Set the _modelByKey to the modified keys.
+            this._modelByKey = keys;
+            if (this.multiple) {
+                this._modelByValue = [];
+                keys.forEach(key => {
+                    const itemByKey = lodashEs.find(this.datasetItems, item => {
+                        // not triple equal, as the instance type can be different.
+                        // only value comparison should be done.
+                        return lodashEs.toString(item.key) === lodashEs.toString(key);
+                    });
+                    if (itemByKey) {
+                        itemByKey.selected = true;
+                        this._modelByValue = [...this._modelByValue, itemByKey.value];
+                    }
+                });
+            }
+            else {
+                this._modelByValue = '';
+                const itemByKey = lodashEs.find(this.datasetItems, item => {
+                    // not triple equal, as the instance type can be different.
+                    // only value comparison should be done.
+                    return lodashEs.toString(item.key) === lodashEs.toString(keys);
+                });
+                if (itemByKey) {
+                    itemByKey.selected = true;
+                    this._modelByValue = itemByKey.value;
+                }
+            }
+            this.initDisplayValues();
+        }
+        /**
+         * This function sets the _model value from the datavalue (selectedvalues) and sets the selected flag when item is found.
+         * datavalue is the default value or a value representing the displayField (for suppose: object in case of ALLFIELDS).
+         * If acceptsArray is true, the model always accepts an array.
+         * For example, select always accepts model as array whether multiple select is true or false.
+         * @param values represent the datavalue.
+         */
+        selectByValue(values) {
+            this.resetDatasetItems();
+            // if datavalue is not defined or empty then set the model as undefined.
+            if (!core.isDefined(values) || values === '' || lodashEs.isNull(values) || (values instanceof Array && !values.length)) {
+                this._modelByKey = undefined;
+                // do not return when allowempty is set to true.
+                if (!this.allowempty || !core.isDefined(values)) {
+                    return;
+                }
+            }
+            if (this.acceptsArray && !lodashEs.isArray(values)) {
+                values = this.allowempty ? [values] : base.extractDataAsArray(values);
+            }
+            // preserve the datavalue if datasetItems are empty.
+            if (!this.datasetItems.length && core.isDefined(values)) {
+                this.toBeProcessedDatavalue = values;
+                return;
+            }
+            const filterField = this.datafield === base.ALLFIELDS ? 'dataObject' : 'key';
+            if (lodashEs.isArray(values)) {
+                this._modelByKey = [];
+                values.forEach(val => {
+                    const itemByValue = lodashEs.find(this.datasetItems, item => {
+                        if (filterField === 'dataObject') {
+                            if (this.compareby && this.compareby.length) {
+                                return core.isEqualWithFields(item[filterField], val, this.compareby);
+                            }
+                        }
+                        return (lodashEs.isObject(item.value) ? lodashEs.isEqual(item.value, val) : (lodashEs.toString(item.value)).toLowerCase() === (lodashEs.toString(val)).toLowerCase());
+                    });
+                    if (itemByValue) {
+                        itemByValue.selected = true;
+                        this._modelByKey.push(itemByValue.key);
+                    }
+                });
+            }
+            else {
+                this._modelByKey = undefined;
+                const itemByValue = lodashEs.find(this.datasetItems, item => {
+                    if (filterField === 'dataObject') {
+                        if (this.compareby && this.compareby.length) {
+                            return core.isEqualWithFields(item[filterField], values, this.compareby);
+                        }
+                    }
+                    return (lodashEs.isObject(item.value) ? lodashEs.isEqual(item.value, values) : (lodashEs.toString(item.value)).toLowerCase() === (lodashEs.toString(values)).toLowerCase());
+                });
+                if (itemByValue) {
+                    itemByValue.selected = true;
+                    this._modelByKey = itemByValue.key;
+                }
+            }
+            // delaying the datavalue update as the widgets in liveform are having datavalue as undefined and not the default provided value
+            // because datavalue is updated later when new dataset is available.
+            this._debounceDatavalueUpdation(values);
+        }
+        // Updates the displayValue property.
+        initDisplayValues() {
+            const displayValues = [];
+            this.datasetItems.forEach(item => {
+                if (item.selected) {
+                    displayValues.push(item.label);
+                }
+            });
+            this.displayValue = this.multiple ? displayValues : displayValues[0] || '';
+            if (this.viewParent.containerWidget && this.viewParent.containerWidget._isCustom)
+                this.viewParent.containerWidget.displayValue = this.displayValue.length ? this.displayValue : '';
+        }
+        // This function parses the dataset and extracts the displayOptions from parsed dataset.
+        initDatasetItems() {
+            if (!this.dataset || lodashEs.isEmpty(this.dataset)) {
+                this.datasetItems = [];
+                // notify the dataset listeners
+                this.dataset$.next(this.datasetItems);
+                return;
+            }
+            // convert any dataset to the object format.
+            const orderedDataset = base.getOrderedDataset(base.convertDataToObject(this.dataset), this.orderby);
+            if (this.usekeys) {
+                this.datasetItems = base.transformDataWithKeys(orderedDataset);
+            }
+            else {
+                const displayOptions = base.transformFormData(this.viewParent, orderedDataset, this.datafield, {
+                    displayField: this.displayfield || this.displaylabel,
+                    displayExpr: this.displayexpression,
+                    bindDisplayExpr: this.binddisplayexpression || this.binddisplaylabel,
+                    bindDisplayImgSrc: this.binddisplayimagesrc,
+                    displayImgSrc: this.displayimagesrc
+                });
+                // get the unique objects out of the extracted data. Notify change in datasetItems using [...datasetItems] notation
+                this.datasetItems = [...base.getUniqObjsByDataField(displayOptions, this.datafield, this.displayfield || this.displaylabel, core.toBoolean(this.allowempty))];
+            }
+            this.postDatasetItemsInit();
+        }
+        // Once the datasetItems are ready, set the proxyModel by using datavalue.
+        postDatasetItemsInit() {
+            if (this.datasetItems.length && !this._defaultQueryInvoked) {
+                // use the latest of toBeProcessedDatavalue, datavalue
+                const _datavalue = lodashEs.isEmpty(this.toBeProcessedDatavalue) ? this.datavalue : this.toBeProcessedDatavalue;
+                this.selectByValue(_datavalue);
+            }
+            // notify the dataset listeners
+            this.dataset$.next(this.datasetItems);
+        }
+        // Reset the selected flag on datasetItems to false.
+        resetDatasetItems() {
+            this.datasetItems.forEach(item => item.selected = false);
+        }
+        setTemplate(partialName) {
+            this.content = partialName;
+            if (this.viewParent && this.viewParent.prefabName) {
+                this['prefabName'] = this.viewParent.prefabName;
+            }
+        }
+        getGroupedData() {
+            return this.datasetItems.length ? base.groupData(this, base.convertDataToObject(this.datasetItems), this.groupby, this.match, this.orderby, this.dateformat, this.datePipe, 'dataObject', this.appDefaults) : [];
+        }
+        datasetSubscription() {
+            const datasetSubscription = this.dataset$.subscribe(() => {
+                this.groupedData = this.getGroupedData();
+            });
+            this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+        }
+        setGroupData() {
+            this.datasetSubscription();
+            // If groupby is set, get the groupedData from the datasetItems.
+            this.groupedData = this.getGroupedData();
+        }
+        onPropertyChange(key, nv, ov) {
+            super.onPropertyChange(key, nv, ov);
+            switch (key) {
+                case 'dataset':
+                case 'datafield':
+                case 'displayfield':
+                case 'displaylabel':
+                case 'displayexpression':
+                case 'orderby':
+                case 'usekeys':
+                    this._debouncedInitDatasetItems();
+                    break;
+                case 'required':
+                case 'datavalue':
+                    this._onChange(this.datavalue);
+                    break;
+                case 'groupby':
+                case 'match':
+                    if (this.widgetType !== 'wm-search' && this.widgetType !== 'wm-chips') {
+                        this.setGroupData();
+                    }
+                    break;
+            }
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            if (this.groupby && (this.widgetType !== 'wm-search' && this.widgetType !== 'wm-chips')) {
+                this.setGroupData();
+            }
+            // adding the handler for header click and toggle headers.
+            if (this.groupby && this.collapsible) {
+                this.handleHeaderClick = base.handleHeaderClick;
+                this.toggleAllHeaders = base.toggleAllHeaders.bind(undefined, this);
+            }
+        }
+        ngOnDestroy() {
+            if (this.cancelLocaleChangeSubscription) {
+                this.cancelLocaleChangeSubscription();
+            }
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: DatasetAwareFormComponent, deps: [{ token: i0__namespace.Injector }, { token: base.WidgetConfig }, { token: 'EXPLICIT_CONTEXT', optional: true }, { token: 'groupby', attribute: true }, { token: Promise }], target: i0__namespace.ɵɵFactoryTarget.Injectable }); }
+        static { this.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: DatasetAwareFormComponent }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: DatasetAwareFormComponent, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: [base.WidgetConfig]
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['groupby']
+                    }] }, { type: Promise }] });
+
+    exports.DatasetAwareFormComponent = DatasetAwareFormComponent;
+
+}));

package/components/input/{default → dataset-aware-form}/dataset-aware-form.component.d.ts

@@ -1,7 +1,7 @@
 import { Injector, OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 import { DataSetItem, IWidgetConfig } from '@wm/components/base';
-import { BaseFormCustomComponent } from './base-form-custom.component';
+import { BaseFormCustomComponent } from '@wm/components/input/base-form-custom';
 import * as i0 from "@angular/core";
 export declare abstract class DatasetAwareFormComponent extends BaseFormCustomComponent implements OnInit, OnDestroy {
     groupby?: string;