@wavemaker/app-ng-runtime 12.0.0-next.45002 → 12.0.0-next.45005

app-ng-runtime/components/input/chips/esm2022/chips.module.mjs

@@ -14,7 +14,7 @@ export class ChipsModule {
             SearchModule,
             WmComponentsModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChipsModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChipsModule, [{
         type: NgModule,
         args: [{
                 imports: [
@@ -29,4 +29,4 @@ export class ChipsModule {
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ChipsModule, { declarations: [ChipsComponent], imports: [CommonModule,
         SearchModule,
         WmComponentsModule], exports: [ChipsComponent] }); })();
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hpcHMubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy93aWRnZXRzL2lucHV0L2NoaXBzL3NyYy9jaGlwcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDekQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTNELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7QUFFbkQsTUFBTSxVQUFVLEdBQUc7SUFDZixjQUFjO0NBQ2pCLENBQUM7QUFXRixNQUFNLE9BQU8sV0FBVzs0RUFBWCxXQUFXO21FQUFYLFdBQVc7dUVBUGhCLFlBQVk7WUFDWixZQUFZO1lBQ1osa0JBQWtCOzt1RkFLYixXQUFXO2NBVHZCLFFBQVE7ZUFBQztnQkFDTixPQUFPLEVBQUU7b0JBQ0wsWUFBWTtvQkFDWixZQUFZO29CQUNaLGtCQUFrQjtpQkFDckI7Z0JBQ0QsWUFBWSxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUM7Z0JBQzdCLE9BQU8sRUFBRSxDQUFDLEdBQUcsVUFBVSxDQUFDO2FBQzNCOzt3RkFDWSxXQUFXLG1CQVpwQixjQUFjLGFBS1YsWUFBWTtRQUNaLFlBQVk7UUFDWixrQkFBa0IsYUFQdEIsY0FBYyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5pbXBvcnQgeyBXbUNvbXBvbmVudHNNb2R1bGUgfSBmcm9tICdAd20vY29tcG9uZW50cy9iYXNlJztcbmltcG9ydCB7IFNlYXJjaE1vZHVsZSB9IGZyb20gJ0B3bS9jb21wb25lbnRzL2Jhc2ljL3NlYXJjaCc7XG5cbmltcG9ydCB7IENoaXBzQ29tcG9uZW50IH0gZnJvbSAnLi9jaGlwcy5jb21wb25lbnQnO1xuXG5jb25zdCBjb21wb25lbnRzID0gW1xuICAgIENoaXBzQ29tcG9uZW50XG5dO1xuXG5ATmdNb2R1bGUoe1xuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQ29tbW9uTW9kdWxlLFxuICAgICAgICBTZWFyY2hNb2R1bGUsXG4gICAgICAgIFdtQ29tcG9uZW50c01vZHVsZVxuICAgIF0sXG4gICAgZGVjbGFyYXRpb25zOiBbLi4uY29tcG9uZW50c10sXG4gICAgZXhwb3J0czogWy4uLmNvbXBvbmVudHNdXG59KVxuZXhwb3J0IGNsYXNzIENoaXBzTW9kdWxlIHtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hpcHMubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy93aWRnZXRzL2lucHV0L2NoaXBzL3NyYy9jaGlwcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDekQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTNELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7QUFFbkQsTUFBTSxVQUFVLEdBQUc7SUFDZixjQUFjO0NBQ2pCLENBQUM7QUFXRixNQUFNLE9BQU8sV0FBVzs0RUFBWCxXQUFXO21FQUFYLFdBQVc7dUVBUGhCLFlBQVk7WUFDWixZQUFZO1lBQ1osa0JBQWtCOztpRkFLYixXQUFXO2NBVHZCLFFBQVE7ZUFBQztnQkFDTixPQUFPLEVBQUU7b0JBQ0wsWUFBWTtvQkFDWixZQUFZO29CQUNaLGtCQUFrQjtpQkFDckI7Z0JBQ0QsWUFBWSxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUM7Z0JBQzdCLE9BQU8sRUFBRSxDQUFDLEdBQUcsVUFBVSxDQUFDO2FBQzNCOzt3RkFDWSxXQUFXLG1CQVpwQixjQUFjLGFBS1YsWUFBWTtRQUNaLFlBQVk7UUFDWixrQkFBa0IsYUFQdEIsY0FBYyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5pbXBvcnQgeyBXbUNvbXBvbmVudHNNb2R1bGUgfSBmcm9tICdAd20vY29tcG9uZW50cy9iYXNlJztcbmltcG9ydCB7IFNlYXJjaE1vZHVsZSB9IGZyb20gJ0B3bS9jb21wb25lbnRzL2Jhc2ljL3NlYXJjaCc7XG5cbmltcG9ydCB7IENoaXBzQ29tcG9uZW50IH0gZnJvbSAnLi9jaGlwcy5jb21wb25lbnQnO1xuXG5jb25zdCBjb21wb25lbnRzID0gW1xuICAgIENoaXBzQ29tcG9uZW50XG5dO1xuXG5ATmdNb2R1bGUoe1xuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQ29tbW9uTW9kdWxlLFxuICAgICAgICBTZWFyY2hNb2R1bGUsXG4gICAgICAgIFdtQ29tcG9uZW50c01vZHVsZVxuICAgIF0sXG4gICAgZGVjbGFyYXRpb25zOiBbLi4uY29tcG9uZW50c10sXG4gICAgZXhwb3J0czogWy4uLmNvbXBvbmVudHNdXG59KVxuZXhwb3J0IGNsYXNzIENoaXBzTW9kdWxlIHtcbn1cbiJdfQ==

app-ng-runtime/components/input/chips/fesm2022/index.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Attribute, ViewChild, NgModule } from '@angular/core';
+import { Component, Attribute, Inject, Optional, ViewChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@wm/components/base';
@@ -9,6 +9,7 @@ import { SearchComponent, SearchModule } from '@wm/components/basic/search';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FormWidgetType, isDefined, debounce, $unwatch, $watch, $appDigest, toBoolean, isAppleProduct } from '@wm/core';
 import { DatasetAwareFormComponent } from '@wm/components/input';
+import { forEach, clone, slice, isObject, isEqual, toString, find, trim, findIndex, filter, isArray, max, reduce, pullAt } from 'lodash-es';
 
 const chipsProps = new Map([
     ['allowonlyselect', PROP_BOOLEAN],
@@ -57,44 +58,44 @@ const registerProps = () => {
 };
 
 const _c0 = ["wmChips", ""];
+const _c1 = a0 => ({ "full-width": a0 });
+const _c2 = (a0, a1) => ({ "active": a0, "disabled": a1 });
+const _c3 = (a0, a1) => ({ "chip-duplicate bg-danger": a0, "chip-picture": a1 });
 function ChipsComponent_li_0_img_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 9);
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("src", item_r2.imgSrc, i0.ɵɵsanitizeUrl);
+    const item_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", item_r3.imgSrc, i0.ɵɵsanitizeUrl);
 } }
 function ChipsComponent_li_0_button_4_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 10);
-    i0.ɵɵlistener("click", function ChipsComponent_li_0_button_4_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); const item_r2 = ctx_r8.$implicit; const $index_r3 = ctx_r8.index; const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.removeItem($event, item_r2, $index_r3)); });
+    i0.ɵɵlistener("click", function ChipsComponent_li_0_button_4_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r10 = i0.ɵɵnextContext(); const item_r3 = ctx_r10.$implicit; const $index_r6 = ctx_r10.index; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.removeItem($event, item_r3, $index_r6)); });
     i0.ɵɵelement(1, "i", 11);
     i0.ɵɵelementEnd();
 } }
-const _c1 = function (a0, a1) { return { "active": a0, "disabled": a1 }; };
-const _c2 = function (a0, a1) { return { "chip-duplicate bg-danger": a0, "chip-picture": a1 }; };
 function ChipsComponent_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
+    const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 4)(1, "a", 5);
-    i0.ɵɵlistener("click", function ChipsComponent_li_0_Template_a_click_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r11); const item_r2 = restoredCtx.$implicit; const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.handleChipClick($event, item_r2)); })("keydown.delete", function ChipsComponent_li_0_Template_a_keydown_delete_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r11); const item_r2 = restoredCtx.$implicit; const $index_r3 = restoredCtx.index; const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onDelete($event, item_r2, $index_r3)); })("keydown.backspace", function ChipsComponent_li_0_Template_a_keydown_backspace_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r11); const item_r2 = restoredCtx.$implicit; const $index_r3 = restoredCtx.index; const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onBackspace($event, item_r2, $index_r3)); })("keydown.arrowleft", function ChipsComponent_li_0_Template_a_keydown_arrowleft_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r11); const item_r2 = restoredCtx.$implicit; const $index_r3 = restoredCtx.index; const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.onArrowLeft(item_r2, $index_r3)); })("keydown.arrowright", function ChipsComponent_li_0_Template_a_keydown_arrowright_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r11); const item_r2 = restoredCtx.$implicit; const $index_r3 = restoredCtx.index; const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.onArrowRight(item_r2, $index_r3)); })("focus", function ChipsComponent_li_0_Template_a_focus_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r11); const item_r2 = restoredCtx.$implicit; const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.handleChipFocus($event, item_r2)); })("blur", function ChipsComponent_li_0_Template_a_blur_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r11); const item_r2 = restoredCtx.$implicit; const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.readonly ? 0 : item_r2.active = false); });
+    i0.ɵɵlistener("click", function ChipsComponent_li_0_Template_a_click_1_listener($event) { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.handleChipClick($event, item_r3)); })("keydown.delete", function ChipsComponent_li_0_Template_a_keydown_delete_1_listener($event) { const ctx_r4 = i0.ɵɵrestoreView(_r2); const item_r3 = ctx_r4.$implicit; const $index_r6 = ctx_r4.index; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onDelete($event, item_r3, $index_r6)); })("keydown.backspace", function ChipsComponent_li_0_Template_a_keydown_backspace_1_listener($event) { const ctx_r6 = i0.ɵɵrestoreView(_r2); const item_r3 = ctx_r6.$implicit; const $index_r6 = ctx_r6.index; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onBackspace($event, item_r3, $index_r6)); })("keydown.arrowleft", function ChipsComponent_li_0_Template_a_keydown_arrowleft_1_listener() { const ctx_r7 = i0.ɵɵrestoreView(_r2); const item_r3 = ctx_r7.$implicit; const $index_r6 = ctx_r7.index; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onArrowLeft(item_r3, $index_r6)); })("keydown.arrowright", function ChipsComponent_li_0_Template_a_keydown_arrowright_1_listener() { const ctx_r8 = i0.ɵɵrestoreView(_r2); const item_r3 = ctx_r8.$implicit; const $index_r6 = ctx_r8.index; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onArrowRight(item_r3, $index_r6)); })("focus", function ChipsComponent_li_0_Template_a_focus_1_listener($event) { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.handleChipFocus($event, item_r3)); })("blur", function ChipsComponent_li_0_Template_a_blur_1_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.readonly ? 0 : item_r3.active = false); });
     i0.ɵɵtemplate(2, ChipsComponent_li_0_img_2_Template, 1, 1, "img", 6);
     i0.ɵɵelement(3, "span", 7);
     i0.ɵɵtemplate(4, ChipsComponent_li_0_button_4_Template, 2, 0, "button", 8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassMapInterpolate1("chip-item ", ctx_r0.chipclass && !ctx_r0.bindChipclass ? ctx_r0.chipclass : "", "");
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(9, _c1, item_r2.active, ctx_r0.disabled));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(12, _c2, item_r2.isDuplicate, item_r2.imgSrc));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", item_r2.imgSrc);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("textContent", item_r2.label)("title", item_r2.label);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !ctx_r0.readonly);
+    const item_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassMapInterpolate1("chip-item ", ctx_r3.chipclass && !ctx_r3.bindChipclass ? ctx_r3.chipclass : "", "");
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(9, _c2, item_r3.active, ctx_r3.disabled));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(12, _c3, item_r3.isDuplicate, item_r3.imgSrc));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", item_r3.imgSrc);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("textContent", item_r3.label)("title", item_r3.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r3.readonly);
 } }
-const _c3 = function (a0) { return { "full-width": a0 }; };
 const WIDGET_CONFIG = {
     widgetType: 'wm-chips',
     hostClass: 'app-chips nav nav-pills list-inline'
@@ -110,8 +111,8 @@ class ChipsComponent extends DatasetAwareFormComponent {
         this.searchComponent.datasource = nv;
         this._debounceUpdateQueryModel(this.datavalue || this.toBeProcessedDatavalue);
     }
-    constructor(inj, bindDisplayField, bindDisplayExpr, bindDisplayImgSrc, bindDataField, bindDataSet, bindChipclass) {
-        super(inj, WIDGET_CONFIG);
+    constructor(inj, bindDisplayField, bindDisplayExpr, bindDisplayImgSrc, bindDataField, bindDataSet, bindChipclass, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
         this.bindDisplayField = bindDisplayField;
         this.bindDisplayExpr = bindDisplayExpr;
         this.bindDisplayImgSrc = bindDisplayImgSrc;
@@ -131,7 +132,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
         this._debounceUpdateQueryModel = debounce((val) => {
             this.updateQueryModel(val).then(() => {
                 if (this.bindChipclass) {
-                    _.forEach(this.chipsList, (item, index) => {
+                    forEach(this.chipsList, (item, index) => {
                         this.registerChipItemClass(item, index);
                     });
                 }
@@ -212,12 +213,12 @@ class ChipsComponent extends DatasetAwareFormComponent {
             return Promise.resolve();
         }
         // clone the data as the updations on data will change the datavalue.
-        let dataValue = _.clone(data);
+        let dataValue = clone(data);
         const prevChipsList = this.chipsList;
         this.chipsList = [];
         // update the model when model has items more than maxsize
         if (this.maxsize && dataValue.length > this.maxsize) {
-            this._modelByValue = dataValue = _.slice(dataValue, 0, this.maxsize);
+            this._modelByValue = dataValue = slice(dataValue, 0, this.maxsize);
             data = dataValue;
         }
         const searchQuery = [];
@@ -231,8 +232,8 @@ class ChipsComponent extends DatasetAwareFormComponent {
          * 6. If value is not object and allowonlyselect is false, then create a customModel and replace this value with customModel and prepare datasetItem from this value
          */
         dataValue.forEach((val, i) => {
-            const itemFound = _.find(this.datasetItems, item => {
-                return _.isObject(item.value) ? _.isEqual(item.value, val) : _.toString(item.value) === _.toString(val);
+            const itemFound = find(this.datasetItems, item => {
+                return isObject(item.value) ? isEqual(item.value, val) : toString(item.value) === toString(val);
             });
             if (itemFound) {
                 this.chipsList.push(itemFound);
@@ -242,7 +243,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
             }
             else if (this.datafield === ALLFIELDS) {
                 let dataObj, isCustom = false;
-                if (!_.isObject(val)) {
+                if (!isObject(val)) {
                     dataObj = this.createCustomDataModel(val);
                     isCustom = true;
                     if (dataObj) {
@@ -253,7 +254,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
                     // if custom chips is already generated, val will be object as {'dataField_val': 'entered_val'}
                     // Hence check this val in previous chipList and assign the iscustom flag
                     const prevChipObj = prevChipsList.find(obj => {
-                        return _.isEqual(obj.value, val);
+                        return isEqual(obj.value, val);
                     });
                     if (prevChipObj) {
                         isCustom = prevChipObj.iscustom;
@@ -274,7 +275,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
                 .then(response => {
                 this.chipsList = this.chipsList.concat(response || []);
                 dataValue.forEach((val, i) => {
-                    const isExists = _.find(this.chipsList, (obj) => {
+                    const isExists = find(this.chipsList, (obj) => {
                         return obj.value.toString() === val.toString();
                     });
                     if (!isExists) {
@@ -315,7 +316,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
         let allowAdd;
         let chipObj;
         if (searchComponent && isDefined(searchComponent.datavalue) && searchComponent.queryModel !== '') {
-            if (!searchComponent.query || !_.trim(searchComponent.query)) {
+            if (!searchComponent.query || !trim(searchComponent.query)) {
                 return;
             }
             chipObj = searchComponent.queryModel;
@@ -326,7 +327,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
             }
             let dataObj;
             if (this.datafield === ALLFIELDS) {
-                if (!_.isObject(this.searchComponent.query) && _.trim(this.searchComponent.query)) {
+                if (!isObject(this.searchComponent.query) && trim(this.searchComponent.query)) {
                     dataObj = this.createCustomDataModel(this.searchComponent.query);
                     // return if the custom chip is empty
                     if (!dataObj) {
@@ -335,7 +336,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
                     }
                 }
             }
-            const data = dataObj || _.trim(this.searchComponent.query);
+            const data = dataObj || trim(this.searchComponent.query);
             if (data) {
                 const transformedData = this.getTransformedData(data, true);
                 chipObj = transformedData[0];
@@ -385,9 +386,9 @@ class ChipsComponent extends DatasetAwareFormComponent {
     // Check if newItem already exists
     isDuplicate(item) {
         if (this.datafield === ALLFIELDS) {
-            return _.findIndex(this.chipsList, { value: item.value }) > -1;
+            return findIndex(this.chipsList, { value: item.value }) > -1;
         }
-        return _.findIndex(this.chipsList, { key: item.key }) > -1;
+        return findIndex(this.chipsList, { key: item.key }) > -1;
     }
     // Check if max size is reached
     updateMaxSize() {
@@ -398,8 +399,9 @@ class ChipsComponent extends DatasetAwareFormComponent {
         this.nextItemIndex++;
         return this.searchComponent.getDataSource(query, true, index)
             .then((response) => {
-            return _.filter(query, queryVal => {
-                _.find(response, { value: queryVal });
+            // @ts-ignore
+            return filter(query, queryVal => {
+                find(response, { value: queryVal });
             });
         });
     }
@@ -485,9 +487,9 @@ class ChipsComponent extends DatasetAwareFormComponent {
     // Remove the item from list
     removeItem($event, item, index, canFocus) {
         $event.stopPropagation();
-        const indexes = _.isArray(index) ? index : [index];
-        const focusIndex = _.max(indexes);
-        const items = _.reduce(indexes, (result, i) => {
+        const indexes = isArray(index) ? index : [index];
+        const focusIndex = max(indexes);
+        const items = reduce(indexes, (result, i) => {
             result.push(this.chipsList[i]);
             return result;
         }, []);
@@ -496,7 +498,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
         if (isDefined(allowRemove) && !toBoolean(allowRemove)) {
             return;
         }
-        const prevDatavalue = _.clone(this.datavalue);
+        const prevDatavalue = clone(this.datavalue);
         // focus next chip after deletion.
         // if there are no chips in the list focus search box
         setTimeout(() => {
@@ -515,10 +517,10 @@ class ChipsComponent extends DatasetAwareFormComponent {
                 $chipsList.get(focusIndex).focus();
             }
         });
-        const pulledItems = _.pullAt(this.chipsList, indexes);
+        const pulledItems = pullAt(this.chipsList, indexes);
         pulledItems.forEach(datasetItem => {
-            this._modelByValue = _.filter(this._modelByValue, val => {
-                return !(_.isObject(val) ? _.isEqual(val, datasetItem.value) : _.toString(val) === _.toString(datasetItem.value));
+            this._modelByValue = filter(this._modelByValue, val => {
+                return !(isObject(val) ? isEqual(val, datasetItem.value) : toString(val) === toString(datasetItem.value));
             });
         });
         this._unsubscribeDv = false;
@@ -534,7 +536,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
      * @param currentIndex :- the current index of the element.
      */
     swapElementsInArray(data, newIndex, currentIndex) {
-        const draggedItem = _.pullAt(data, currentIndex)[0];
+        const draggedItem = pullAt(data, currentIndex)[0];
         data.splice(newIndex, 0, draggedItem);
     }
     /**
@@ -662,7 +664,7 @@ class ChipsComponent extends DatasetAwareFormComponent {
         }
         super.onPropertyChange(key, nv, ov);
     }
-    static { this.ɵfac = function ChipsComponent_Factory(t) { return new (t || ChipsComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵinjectAttribute('displayfield.bind'), i0.ɵɵinjectAttribute('displayexpression.bind'), i0.ɵɵinjectAttribute('displayimagesrc.bind'), i0.ɵɵinjectAttribute('datafield.bind'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('chipclass.bind')); }; }
+    static { this.ɵfac = function ChipsComponent_Factory(t) { return new (t || ChipsComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵinjectAttribute('displayfield.bind'), i0.ɵɵinjectAttribute('displayexpression.bind'), i0.ɵɵinjectAttribute('displayimagesrc.bind'), i0.ɵɵinjectAttribute('datafield.bind'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('chipclass.bind'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChipsComponent, selectors: [["", "wmChips", ""]], viewQuery: function ChipsComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(SearchComponent, 7);
         } if (rf & 2) {
@@ -671,24 +673,25 @@ class ChipsComponent extends DatasetAwareFormComponent {
         } }, features: [i0.ɵɵProvidersFeature([
                 provideAs(ChipsComponent, NG_VALUE_ACCESSOR, true),
                 provideAsWidgetRef(ChipsComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 4, vars: 4, consts: [["role", "option", 3, "class", "ngClass", 4, "ngFor", "ngForOf"], [1, "app-chip-search", 3, "ngClass"], ["wmSearch", "", "name", "app-chip-search", "submit.event", "addItem($event, widget)", "beforeservicecall.event", "invokeOnBeforeServiceCall(inputData)", "disabled.bind", "disabled || readonly || saturate", "datafield.bind", "datafield", "allowonlyselect.bind", "allowonlyselect", "searchkey.bind", "searchkey", "orderby.bind", "orderby", "placeholder.bind", "saturate ? maxSizeReached : placeholder", "showsearchicon.bind", "showsearchicon", "tabindex.bind", "tabindex", "minchars.bind", "minchars", "debouncetime.bind", "debouncetime", "matchmode.bind", "matchmode", "groupby.bind", "groupby", "match.bind", "match", "dateformat.bind", "dateformat", 1, "app-chip-input", 3, "keydown.enter", "keydown.delete", "keydown.backspace", "keydown.arrowleft", "keydown.arrowright"], ["search", ""], ["role", "option", 3, "ngClass"], ["href", "javascript:void(0);", "tabindex", "-1", 1, "app-chip", 3, "ngClass", "click", "keydown.delete", "keydown.backspace", "keydown.arrowleft", "keydown.arrowright", "focus", "blur"], ["data-identifier", "img", "alt", "Chip Image", "class", "button-image-icon", 3, "src", 4, "ngIf"], [1, "app-chip-title", 3, "textContent", "title"], ["type", "button", "tabindex", "-1", "aria-label", "Clear Button", "class", "btn btn-transparent", 3, "click", 4, "ngIf"], ["data-identifier", "img", "alt", "Chip Image", 1, "button-image-icon", 3, "src"], ["type", "button", "tabindex", "-1", "aria-label", "Clear Button", 1, "btn", "btn-transparent", 3, "click"], [1, "app-icon", "wi", "wi-close"]], template: function ChipsComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, ChipsComponent_li_0_Template, 5, 15, "li", 0);
-            i0.ɵɵelementStart(1, "li", 1)(2, "div", 2, 3);
-            i0.ɵɵlistener("keydown.enter", function ChipsComponent_Template_div_keydown_enter_2_listener($event) { return ctx.stopEvent($event); })("keydown.delete", function ChipsComponent_Template_div_keydown_delete_2_listener($event) { return ctx.onTextDelete($event); })("keydown.backspace", function ChipsComponent_Template_div_keydown_backspace_2_listener($event) { return ctx.onInputClear($event); })("keydown.arrowleft", function ChipsComponent_Template_div_keydown_arrowleft_2_listener() { return ctx.onArrowLeft(); })("keydown.arrowright", function ChipsComponent_Template_div_keydown_arrowright_2_listener() { return ctx.onArrowRight(); });
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 4, vars: 4, consts: [["search", ""], ["role", "option", 3, "class", "ngClass", 4, "ngFor", "ngForOf"], [1, "app-chip-search", 3, "ngClass"], ["wmSearch", "", "name", "app-chip-search", "submit.event", "addItem($event, widget)", "beforeservicecall.event", "invokeOnBeforeServiceCall(inputData)", "disabled.bind", "disabled || readonly || saturate", "datafield.bind", "datafield", "allowonlyselect.bind", "allowonlyselect", "searchkey.bind", "searchkey", "orderby.bind", "orderby", "placeholder.bind", "saturate ? maxSizeReached : placeholder", "showsearchicon.bind", "showsearchicon", "tabindex.bind", "tabindex", "minchars.bind", "minchars", "debouncetime.bind", "debouncetime", "matchmode.bind", "matchmode", "groupby.bind", "groupby", "match.bind", "match", "dateformat.bind", "dateformat", 1, "app-chip-input", 3, "keydown.enter", "keydown.delete", "keydown.backspace", "keydown.arrowleft", "keydown.arrowright"], ["role", "option", 3, "ngClass"], ["href", "javascript:void(0);", "tabindex", "-1", 1, "app-chip", 3, "click", "keydown.delete", "keydown.backspace", "keydown.arrowleft", "keydown.arrowright", "focus", "blur", "ngClass"], ["data-identifier", "img", "alt", "Chip Image", "class", "button-image-icon", 3, "src", 4, "ngIf"], [1, "app-chip-title", 3, "textContent", "title"], ["type", "button", "tabindex", "-1", "aria-label", "Clear Button", "class", "btn btn-transparent", 3, "click", 4, "ngIf"], ["data-identifier", "img", "alt", "Chip Image", 1, "button-image-icon", 3, "src"], ["type", "button", "tabindex", "-1", "aria-label", "Clear Button", 1, "btn", "btn-transparent", 3, "click"], [1, "app-icon", "wi", "wi-close"]], template: function ChipsComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵtemplate(0, ChipsComponent_li_0_Template, 5, 15, "li", 1);
+            i0.ɵɵelementStart(1, "li", 2)(2, "div", 3, 0);
+            i0.ɵɵlistener("keydown.enter", function ChipsComponent_Template_div_keydown_enter_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.stopEvent($event)); })("keydown.delete", function ChipsComponent_Template_div_keydown_delete_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTextDelete($event)); })("keydown.backspace", function ChipsComponent_Template_div_keydown_backspace_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputClear($event)); })("keydown.arrowleft", function ChipsComponent_Template_div_keydown_arrowleft_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowLeft()); })("keydown.arrowright", function ChipsComponent_Template_div_keydown_arrowright_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowRight()); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngForOf", ctx.chipsList);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c3, ctx.inputwidth === "full"));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c1, ctx.inputwidth === "full"));
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.SearchComponent, i3.TextContentDirective], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChipsComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChipsComponent, [{
         type: Component,
         args: [{ selector: '[wmChips]', providers: [
                     provideAs(ChipsComponent, NG_VALUE_ACCESSOR, true),
                     provideAsWidgetRef(ChipsComponent)
                 ], template: "<li class=\"chip-item {{chipclass && !bindChipclass ? chipclass : ''}}\" role=\"option\" *ngFor=\"let item of chipsList; let $index = index;\"\n    [ngClass]=\"{'active': item.active, 'disabled': disabled}\">\n    <a class=\"app-chip\" href=\"javascript:void(0);\" tabindex=\"-1\"\n       (click)=\"handleChipClick($event, item)\"\n       (keydown.delete)=\"onDelete($event, item, $index)\"\n       (keydown.backspace)=\"onBackspace($event, item, $index)\"\n       (keydown.arrowleft)=\"onArrowLeft(item, $index)\"\n       (keydown.arrowright)=\"onArrowRight(item, $index)\"\n       (focus)=\"handleChipFocus($event, item)\"\n       (blur)=\"readonly ? 0 : item.active = false\"\n       [ngClass]=\"{'chip-duplicate bg-danger': item.isDuplicate, 'chip-picture': item.imgSrc}\">\n        <img data-identifier=\"img\" alt=\"Chip Image\" class=\"button-image-icon\" [src]=\"item.imgSrc\" *ngIf=\"item.imgSrc\"/>\n        <span class=\"app-chip-title\" [textContent]=\"item.label\" [title]=\"item.label\"></span>\n        <button type=\"button\" tabindex=\"-1\" aria-label=\"Clear Button\" class=\"btn btn-transparent\" (click)=\"removeItem($event, item, $index);\" *ngIf=\"!readonly\">\n            <i class=\"app-icon wi wi-close\"></i>\n        </button>\n    </a>\n</li>\n<li class=\"app-chip-search\" [ngClass]=\"{'full-width': inputwidth === 'full'}\">\n    <div #search wmSearch class=\"app-chip-input\"\n         name=\"app-chip-search\"\n         submit.event=\"addItem($event, widget)\"\n         beforeservicecall.event=\"invokeOnBeforeServiceCall(inputData)\"\n         disabled.bind=\"disabled || readonly || saturate\"\n         datafield.bind=\"datafield\"\n         allowonlyselect.bind=\"allowonlyselect\"\n         searchkey.bind=\"searchkey\"\n         orderby.bind=\"orderby\"\n         placeholder.bind=\"saturate ? maxSizeReached : placeholder\"\n         showsearchicon.bind=\"showsearchicon\"\n         tabindex.bind=\"tabindex\"\n         minchars.bind=\"minchars\"\n         debouncetime.bind=\"debouncetime\"\n         matchmode.bind=\"matchmode\"\n         groupby.bind=\"groupby\"\n         match.bind=\"match\"\n         dateformat.bind=\"dateformat\"\n         (keydown.enter)=\"stopEvent($event)\"\n         (keydown.delete)=\"onTextDelete($event)\"\n         (keydown.backspace)=\"onInputClear($event)\"\n         (keydown.arrowleft)=\"onArrowLeft()\"\n         (keydown.arrowright)=\"onArrowRight()\">\n    </div>\n</li>\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['displayfield.bind']
             }] }, { type: undefined, decorators: [{
@@ -706,10 +709,16 @@ class ChipsComponent extends DatasetAwareFormComponent {
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['chipclass.bind']
-            }] }]; }, { searchComponent: [{
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { searchComponent: [{
             type: ViewChild,
             args: [SearchComponent, /* TODO: add static flag */ { static: true }]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChipsComponent, { className: "ChipsComponent", filePath: "chips.component.ts", lineNumber: 54 }); })();
 
 const components = [
     ChipsComponent
@@ -721,7 +730,7 @@ class ChipsModule {
             SearchModule,
             WmComponentsModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChipsModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChipsModule, [{
         type: NgModule,
         args: [{
                 imports: [