@wavemaker/app-ng-runtime 11.10.5-rc.6100 → 11.11.0-1.6140

package/components/input/chips/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base'), require('@wm/components/basic/search'), require('@angular/forms'), require('@wm/core'), require('@wm/components/input'), require('lodash-es')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/components/base', '@wm/components/basic/search', '@angular/forms', '@wm/core', '@wm/components/input', '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.chips = {}), global.ng.core, global.ng.common, global.wm.components.base, global.wm.components.basic.search, global.ng.forms, global.wm.core, global.wm.components.input, global._));
-})(this, (function (exports, i0, i1, i3, i2, forms, core, input, lodashEs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@wm/components/base'), require('@angular/core'), require('@angular/forms'), require('@wm/core'), require('@wm/components/input'), require('@wm/components/basic/search'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@wm/components/base', '@angular/core', '@angular/forms', '@wm/core', '@wm/components/input', '@wm/components/basic/search', '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.chips = {}), global.ng.common, global.wm.components.base, global.ng.core, global.ng.forms, global.wm.core, global.wm.components.input, global.wm.components.basic.search, global._));
+})(this, (function (exports, i1, i2, i0, forms, core, input, search, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -21,85 +21,84 @@
         return Object.freeze(n);
     }
 
-    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
-    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
     var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
 
     const chipsProps = new Map([
-        ['allowonlyselect', i3.PROP_BOOLEAN],
-        ['autofocus', i3.PROP_BOOLEAN],
-        ['chipclass', i3.PROP_STRING],
-        ['class', i3.PROP_STRING],
-        ['compareby', i3.PROP_STRING],
-        ['datafield', i3.PROP_STRING],
-        ['dataoptions', i3.PROP_ANY],
-        ['dataset', { value: 'Option 1, Option 2, Option 3', ...i3.PROP_ANY }],
-        ['datasource', i3.PROP_ANY],
-        ['datavalue', i3.PROP_ANY],
-        ['datavaluesource', i3.PROP_ANY],
-        ['dateformat', i3.PROP_STRING],
-        ['disabled', i3.PROP_BOOLEAN],
-        ['displayexpression', i3.PROP_STRING],
-        ['displayfield', i3.PROP_STRING],
-        ['displayimagesrc', i3.PROP_STRING],
-        ['enablereorder', i3.PROP_BOOLEAN],
-        ['groupby', i3.PROP_STRING],
-        ['inputposition', { value: 'last', ...i3.PROP_STRING }],
-        ['inputwidth', { value: 'default', ...i3.PROP_STRING }],
-        ['limit', i3.PROP_NUMBER],
-        ['loadingdatamsg', { value: 'Loading items...', ...i3.PROP_STRING }],
-        ['match', i3.PROP_STRING],
-        ['matchmode', i3.PROP_STRING],
-        ['maxsize', i3.PROP_NUMBER],
-        ['minchars', { value: 1, ...i3.PROP_NUMBER }],
-        ['name', i3.PROP_STRING],
-        ['navsearchbar', { value: false, ...i3.PROP_BOOLEAN }],
-        ['orderby', i3.PROP_STRING],
-        ['placeholder', { value: 'Type here..', ...i3.PROP_STRING }],
-        ['query', i3.PROP_STRING],
-        ['readonly', i3.PROP_BOOLEAN],
-        ['searchkey', i3.PROP_STRING],
-        ['shortcutkey', i3.PROP_STRING],
-        ['show', { value: true, ...i3.PROP_BOOLEAN }],
-        ['showsearchicon', i3.PROP_BOOLEAN],
-        ['tabindex', { value: 0, ...i3.PROP_NUMBER }],
-        ['type', { value: 'search', ...i3.PROP_STRING }],
-        ['debouncetime', { value: 250, ...i3.PROP_NUMBER }],
-        ['datacompletemsg', { value: 'No more data to load', ...i3.PROP_STRING }],
+        ['allowonlyselect', i2.PROP_BOOLEAN],
+        ['autofocus', i2.PROP_BOOLEAN],
+        ['chipclass', i2.PROP_STRING],
+        ['class', i2.PROP_STRING],
+        ['compareby', i2.PROP_STRING],
+        ['datafield', i2.PROP_STRING],
+        ['dataoptions', i2.PROP_ANY],
+        ['dataset', { value: 'Option 1, Option 2, Option 3', ...i2.PROP_ANY }],
+        ['datasource', i2.PROP_ANY],
+        ['datavalue', i2.PROP_ANY],
+        ['datavaluesource', i2.PROP_ANY],
+        ['dateformat', i2.PROP_STRING],
+        ['disabled', i2.PROP_BOOLEAN],
+        ['displayexpression', i2.PROP_STRING],
+        ['displayfield', i2.PROP_STRING],
+        ['displayimagesrc', i2.PROP_STRING],
+        ['enablereorder', i2.PROP_BOOLEAN],
+        ['groupby', i2.PROP_STRING],
+        ['inputposition', { value: 'last', ...i2.PROP_STRING }],
+        ['inputwidth', { value: 'default', ...i2.PROP_STRING }],
+        ['limit', i2.PROP_NUMBER],
+        ['loadingdatamsg', { value: 'Loading items...', ...i2.PROP_STRING }],
+        ['match', i2.PROP_STRING],
+        ['matchmode', i2.PROP_STRING],
+        ['maxsize', i2.PROP_NUMBER],
+        ['minchars', { value: 1, ...i2.PROP_NUMBER }],
+        ['name', i2.PROP_STRING],
+        ['navsearchbar', { value: false, ...i2.PROP_BOOLEAN }],
+        ['orderby', i2.PROP_STRING],
+        ['placeholder', { value: 'Type here..', ...i2.PROP_STRING }],
+        ['query', i2.PROP_STRING],
+        ['readonly', i2.PROP_BOOLEAN],
+        ['searchkey', i2.PROP_STRING],
+        ['shortcutkey', i2.PROP_STRING],
+        ['show', { value: true, ...i2.PROP_BOOLEAN }],
+        ['showsearchicon', i2.PROP_BOOLEAN],
+        ['tabindex', { value: 0, ...i2.PROP_NUMBER }],
+        ['type', { value: 'search', ...i2.PROP_STRING }],
+        ['debouncetime', { value: 250, ...i2.PROP_NUMBER }],
+        ['datacompletemsg', { value: 'No more data to load', ...i2.PROP_STRING }],
     ]);
     const registerProps = () => {
-        i3.register('wm-chips', chipsProps);
-        i3.registerFormWidget(core.FormWidgetType.CHIPS, new Map(chipsProps));
+        i2.register('wm-chips', chipsProps);
+        i2.registerFormWidget(core.FormWidgetType.CHIPS, new Map(chipsProps));
     };
 
     const _c0 = ["wmChips", ""];
     const _c1 = a0 => ({ "full-width": a0 });
     const _c2 = (a0, a1) => ({ "active": a0, "disabled": a1 });
     const _c3 = (a0, a1, a2) => ({ "no-drag": a0, "chip-duplicate bg-danger": a1, "chip-picture": a2 });
-    function ChipsComponent_li_0_img_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "img", 9);
+    function ChipsComponent_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "img", 6);
     } if (rf & 2) {
         const item_r3 = i0__namespace.ɵɵnextContext().$implicit;
         i0__namespace.ɵɵproperty("src", item_r3.imgSrc, i0__namespace.ɵɵsanitizeUrl);
     } }
-    function ChipsComponent_li_0_button_4_Template(rf, ctx) { if (rf & 1) {
+    function ChipsComponent_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
         const _r10 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "button", 10);
-        i0__namespace.ɵɵlistener("click", function ChipsComponent_li_0_button_4_Template_button_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r10); const ctx_r10 = i0__namespace.ɵɵnextContext(); const item_r3 = ctx_r10.$implicit; const $index_r6 = ctx_r10.index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.removeItem($event, item_r3, $index_r6)); });
-        i0__namespace.ɵɵelement(1, "i", 11);
+        i0__namespace.ɵɵelementStart(0, "button", 9);
+        i0__namespace.ɵɵlistener("click", function ChipsComponent_For_1_Conditional_4_Template_button_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r10); const ctx_r10 = i0__namespace.ɵɵnextContext(); const item_r3 = ctx_r10.$implicit; const $index_r6 = ctx_r10.$index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.removeItem($event, item_r3, $index_r6)); });
+        i0__namespace.ɵɵelement(1, "i", 10);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const item_r3 = i0__namespace.ɵɵnextContext().$implicit;
         i0__namespace.ɵɵattribute("aria-label", "Clear " + item_r3.label);
     } }
-    function ChipsComponent_li_0_Template(rf, ctx) { if (rf & 1) {
+    function ChipsComponent_For_1_Template(rf, ctx) { if (rf & 1) {
         const _r2 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "li", 4)(1, "a", 5);
-        i0__namespace.ɵɵlistener("click", function ChipsComponent_li_0_Template_a_click_1_listener($event) { const item_r3 = i0__namespace.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.handleChipClick($event, item_r3)); })("keydown.delete", function ChipsComponent_li_0_Template_a_keydown_delete_1_listener($event) { const ctx_r4 = i0__namespace.ɵɵrestoreView(_r2); const item_r3 = ctx_r4.$implicit; const $index_r6 = ctx_r4.index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r2); const item_r3 = ctx_r6.$implicit; const $index_r6 = ctx_r6.index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r2); const item_r3 = ctx_r7.$implicit; const $index_r6 = ctx_r7.index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.onArrowLeft(item_r3, $index_r6)); })("keydown.arrowright", function ChipsComponent_li_0_Template_a_keydown_arrowright_1_listener() { const ctx_r8 = i0__namespace.ɵɵrestoreView(_r2); const item_r3 = ctx_r8.$implicit; const $index_r6 = ctx_r8.index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.onArrowRight(item_r3, $index_r6)); })("focus", function ChipsComponent_li_0_Template_a_focus_1_listener($event) { const item_r3 = i0__namespace.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.handleChipFocus($event, item_r3)); })("blur", function ChipsComponent_li_0_Template_a_blur_1_listener() { const item_r3 = i0__namespace.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.readonly ? 0 : item_r3.active = false); });
-        i0__namespace.ɵɵtemplate(2, ChipsComponent_li_0_img_2_Template, 1, 1, "img", 6);
+        i0__namespace.ɵɵlistener("click", function ChipsComponent_For_1_Template_a_click_1_listener($event) { const item_r3 = i0__namespace.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.handleChipClick($event, item_r3)); })("keydown.delete", function ChipsComponent_For_1_Template_a_keydown_delete_1_listener($event) { const ctx_r4 = i0__namespace.ɵɵrestoreView(_r2); const item_r3 = ctx_r4.$implicit; const $index_r6 = ctx_r4.$index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.onDelete($event, item_r3, $index_r6)); })("keydown.backspace", function ChipsComponent_For_1_Template_a_keydown_backspace_1_listener($event) { const ctx_r6 = i0__namespace.ɵɵrestoreView(_r2); const item_r3 = ctx_r6.$implicit; const $index_r6 = ctx_r6.$index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.onBackspace($event, item_r3, $index_r6)); })("keydown.arrowleft", function ChipsComponent_For_1_Template_a_keydown_arrowleft_1_listener() { const ctx_r7 = i0__namespace.ɵɵrestoreView(_r2); const item_r3 = ctx_r7.$implicit; const $index_r6 = ctx_r7.$index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.onArrowLeft(item_r3, $index_r6)); })("keydown.arrowright", function ChipsComponent_For_1_Template_a_keydown_arrowright_1_listener() { const ctx_r8 = i0__namespace.ɵɵrestoreView(_r2); const item_r3 = ctx_r8.$implicit; const $index_r6 = ctx_r8.$index; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.onArrowRight(item_r3, $index_r6)); })("focus", function ChipsComponent_For_1_Template_a_focus_1_listener($event) { const item_r3 = i0__namespace.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.handleChipFocus($event, item_r3)); })("blur", function ChipsComponent_For_1_Template_a_blur_1_listener() { const item_r3 = i0__namespace.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.readonly ? 0 : item_r3.active = false); });
+        i0__namespace.ɵɵtemplate(2, ChipsComponent_For_1_Conditional_2_Template, 1, 1, "img", 6);
         i0__namespace.ɵɵelement(3, "span", 7);
-        i0__namespace.ɵɵtemplate(4, ChipsComponent_li_0_button_4_Template, 2, 1, "button", 8);
+        i0__namespace.ɵɵtemplate(4, ChipsComponent_For_1_Conditional_4_Template, 2, 1, "button", 8);
         i0__namespace.ɵɵelementEnd()();
     } if (rf & 2) {
         const item_r3 = ctx.$implicit;
@@ -109,11 +108,11 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction3(12, _c3, !ctx_r3.enablereorder, item_r3.isDuplicate, item_r3.imgSrc));
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", item_r3.imgSrc);
+        i0__namespace.ɵɵconditional(item_r3.imgSrc ? 2 : -1);
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("textContent", item_r3.label)("title", item_r3.label);
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵproperty("ngIf", !ctx_r3.readonly);
+        i0__namespace.ɵɵconditional(!ctx_r3.readonly ? 4 : -1);
     } }
     const WIDGET_CONFIG = {
         widgetType: 'wm-chips',
@@ -141,7 +140,7 @@
             this.chipsList = [];
             this.maxSizeReached = 'Max size reached';
             this._unsubscribeDv = false;
-            i3.styler(this.nativeElement, this);
+            i2.styler(this.nativeElement, this);
             // set the showsearchicon as false by default.
             if (!core.isDefined(this.showsearchicon)) {
                 this.showsearchicon = false;
@@ -212,7 +211,7 @@
                 core.$unwatch(watchName);
                 //[Todo-CSP]: same as list item class
                 this.registerDestroyListener(core.$watch(this.bindChipclass, this.viewParent, { item, $index }, (nv, ov) => {
-                    this.applyItemClass(i3.getConditionalClasses(nv, ov), $index);
+                    this.applyItemClass(i2.getConditionalClasses(nv, ov), $index);
                 }, watchName));
             }
         }
@@ -221,7 +220,7 @@
             $(chipItem).removeClass(val.toRemove).addClass(val.toAdd);
         }
         removeDuplicates() {
-            this.chipsList = i3.getUniqObjsByDataField(this.chipsList, this.datafield, this.displayfield || this.displaylabel);
+            this.chipsList = i2.getUniqObjsByDataField(this.chipsList, this.datafield, this.displayfield || this.displaylabel);
         }
         // This method updates the queryModel.
         // default call to get the default data can be done only when defaultQuery is true.
@@ -257,10 +256,10 @@
                 if (itemFound) {
                     this.chipsList.push(itemFound);
                 }
-                else if (this.datafield !== i3.ALLFIELDS) {
+                else if (this.datafield !== i2.ALLFIELDS) {
                     searchQuery.push(val);
                 }
-                else if (this.datafield === i3.ALLFIELDS) {
+                else if (this.datafield === i2.ALLFIELDS) {
                     let dataObj, isCustom = false;
                     if (!lodashEs.isObject(val)) {
                         dataObj = this.createCustomDataModel(val);
@@ -345,7 +344,7 @@
                     return;
                 }
                 let dataObj;
-                if (this.datafield === i3.ALLFIELDS) {
+                if (this.datafield === i2.ALLFIELDS) {
                     if (!lodashEs.isObject(this.searchComponent.query) && lodashEs.trim(this.searchComponent.query)) {
                         dataObj = this.createCustomDataModel(this.searchComponent.query);
                         // return if the custom chip is empty
@@ -395,7 +394,7 @@
         }
         // Prepare datavalue object from a string(junk) value when datafield is allFields.
         createCustomDataModel(val) {
-            const key = this.displayfield || (this.datafield !== i3.ALLFIELDS ? this.datafield : undefined);
+            const key = this.displayfield || (this.datafield !== i2.ALLFIELDS ? this.datafield : undefined);
             if (key) {
                 const customObj = {};
                 customObj[key] = val;
@@ -404,7 +403,7 @@
         }
         // Check if newItem already exists
         isDuplicate(item) {
-            if (this.datafield === i3.ALLFIELDS) {
+            if (this.datafield === i2.ALLFIELDS) {
                 return lodashEs.findIndex(this.chipsList, { value: item.value }) > -1;
             }
             return lodashEs.findIndex(this.chipsList, { key: item.key }) > -1;
@@ -580,7 +579,7 @@
                 items: '> li:not(.app-chip-search)',
                 placeholder: 'chip-placeholder'
             };
-            i3.configureDnD(this.$element, options, this.onReorderStart.bind(this), this.update.bind(this));
+            i2.configureDnD(this.$element, options, this.onReorderStart.bind(this), this.update.bind(this));
         }
         // Triggered on drag start while reordering.
         onReorderStart(evt, ui) {
@@ -699,31 +698,31 @@
         }
         static { this.ɵfac = function ChipsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ChipsComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵinjectAttribute('displayfield.bind'), i0__namespace.ɵɵinjectAttribute('displayexpression.bind'), i0__namespace.ɵɵinjectAttribute('displayimagesrc.bind'), i0__namespace.ɵɵinjectAttribute('datafield.bind'), i0__namespace.ɵɵinjectAttribute('dataset.bind'), i0__namespace.ɵɵinjectAttribute('chipclass.bind'), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: ChipsComponent, selectors: [["", "wmChips", ""]], viewQuery: function ChipsComponent_Query(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵviewQuery(i2.SearchComponent, 7);
+                i0__namespace.ɵɵviewQuery(search.SearchComponent, 7);
             } if (rf & 2) {
                 let _t;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.searchComponent = _t.first);
-            } }, features: [i0__namespace.ɵɵProvidersFeature([
-                    i3.provideAs(ChipsComponent, forms.NG_VALUE_ACCESSOR, true),
-                    i3.provideAsWidgetRef(ChipsComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 4, vars: 4, consts: [["search", ""], [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", "datacompletemsg.bind", "datacompletemsg", "groupby.bind", "groupby", "match.bind", "match", "dateformat.bind", "dateformat", 1, "app-chip-input", 3, "keydown.enter", "keydown.delete", "keydown.backspace", "keydown.arrowleft", "keydown.arrowright"], [3, "ngClass"], ["href", "javascript:void(0)", 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", "class", "btn btn-transparent", 3, "click", 4, "ngIf"], ["data-identifier", "img", "alt", "Chip Image", 1, "button-image-icon", 3, "src"], ["type", "button", 1, "btn", "btn-transparent", 3, "click"], [1, "app-icon", "wi", "wi-close"]], template: function ChipsComponent_Template(rf, ctx) { if (rf & 1) {
+            } }, standalone: true, features: [i0__namespace.ɵɵProvidersFeature([
+                    i2.provideAs(ChipsComponent, forms.NG_VALUE_ACCESSOR, true),
+                    i2.provideAsWidgetRef(ChipsComponent)
+                ]), i0__namespace.ɵɵInheritDefinitionFeature, i0__namespace.ɵɵStandaloneFeature], attrs: _c0, decls: 5, vars: 3, consts: [["search", ""], [3, "class", "ngClass"], [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", "datacompletemsg.bind", "datacompletemsg", "groupby.bind", "groupby", "match.bind", "match", "dateformat.bind", "dateformat", 1, "app-chip-input", 3, "keydown.enter", "keydown.delete", "keydown.backspace", "keydown.arrowleft", "keydown.arrowright"], [3, "ngClass"], ["href", "javascript:void(0)", 1, "app-chip", 3, "click", "keydown.delete", "keydown.backspace", "keydown.arrowleft", "keydown.arrowright", "focus", "blur", "ngClass"], ["data-identifier", "img", "alt", "Chip Image", 1, "button-image-icon", 3, "src"], [1, "app-chip-title", 3, "textContent", "title"], ["type", "button", 1, "btn", "btn-transparent"], ["type", "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__namespace.ɵɵgetCurrentView();
-                i0__namespace.ɵɵtemplate(0, ChipsComponent_li_0_Template, 5, 16, "li", 1);
-                i0__namespace.ɵɵelementStart(1, "li", 2)(2, "div", 3, 0);
-                i0__namespace.ɵɵlistener("keydown.enter", function ChipsComponent_Template_div_keydown_enter_2_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.stopEvent($event)); })("keydown.delete", function ChipsComponent_Template_div_keydown_delete_2_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onTextDelete($event)); })("keydown.backspace", function ChipsComponent_Template_div_keydown_backspace_2_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputClear($event)); })("keydown.arrowleft", function ChipsComponent_Template_div_keydown_arrowleft_2_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowLeft()); })("keydown.arrowright", function ChipsComponent_Template_div_keydown_arrowright_2_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowRight()); });
+                i0__namespace.ɵɵrepeaterCreate(0, ChipsComponent_For_1_Template, 5, 16, "li", 1, i0__namespace.ɵɵrepeaterTrackByIdentity);
+                i0__namespace.ɵɵelementStart(2, "li", 2)(3, "div", 3, 0);
+                i0__namespace.ɵɵlistener("keydown.enter", function ChipsComponent_Template_div_keydown_enter_3_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.stopEvent($event)); })("keydown.delete", function ChipsComponent_Template_div_keydown_delete_3_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onTextDelete($event)); })("keydown.backspace", function ChipsComponent_Template_div_keydown_backspace_3_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputClear($event)); })("keydown.arrowleft", function ChipsComponent_Template_div_keydown_arrowleft_3_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowLeft()); })("keydown.arrowright", function ChipsComponent_Template_div_keydown_arrowright_3_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowRight()); });
                 i0__namespace.ɵɵelementEnd()();
             } if (rf & 2) {
-                i0__namespace.ɵɵproperty("ngForOf", ctx.chipsList);
-                i0__namespace.ɵɵadvance();
-                i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(2, _c1, ctx.inputwidth === "full"));
-            } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.SearchComponent, i3__namespace.TextContentDirective], encapsulation: 2 }); }
+                i0__namespace.ɵɵrepeater(ctx.chipsList);
+                i0__namespace.ɵɵadvance(2);
+                i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(1, _c1, ctx.inputwidth === "full"));
+            } }, dependencies: [i1.CommonModule, i1__namespace.NgClass, i2.WmComponentsModule, i2__namespace.TextContentDirective, search.SearchComponent], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ChipsComponent, [{
             type: i0.Component,
-            args: [{ selector: '[wmChips]', providers: [
-                        i3.provideAs(ChipsComponent, forms.NG_VALUE_ACCESSOR, true),
-                        i3.provideAsWidgetRef(ChipsComponent)
-                    ], template: "<li class=\"chip-item {{chipclass && !bindChipclass ? chipclass : ''}}\"\n    *ngFor=\"let item of chipsList; let $index = index;\"\n    [ngClass]=\"{'active': item.active, 'disabled': disabled}\">\n    <a href=\"javascript:void(0)\" class=\"app-chip\"\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]=\"{'no-drag': !enablereorder,'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\" [attr.aria-label]=\"'Clear ' + item.label\" class=\"btn btn-transparent\"\n                (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         datacompletemsg.bind = \"datacompletemsg\"\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" }]
+            args: [{ standalone: true, imports: [i1.CommonModule, i2.WmComponentsModule, search.SearchComponent], selector: '[wmChips]', providers: [
+                        i2.provideAs(ChipsComponent, forms.NG_VALUE_ACCESSOR, true),
+                        i2.provideAsWidgetRef(ChipsComponent)
+                    ], template: "@for (item of chipsList; track item) {\n  <li class=\"chip-item {{chipclass && !bindChipclass ? chipclass : ''}}\"\n    [ngClass]=\"{'active': item.active, 'disabled': disabled}\">\n    <a href=\"javascript:void(0)\" class=\"app-chip\"\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]=\"{'no-drag': !enablereorder,'chip-duplicate bg-danger': item.isDuplicate, 'chip-picture': item.imgSrc}\">\n      @if (item.imgSrc) {\n        <img data-identifier=\"img\" alt=\"Chip Image\" class=\"button-image-icon\" [src]=\"item.imgSrc\"/>\n      }\n      <span class=\"app-chip-title\" [textContent]=\"item.label\" [title]=\"item.label\"></span>\n      @if (!readonly) {\n        <button type=\"button\" [attr.aria-label]=\"'Clear ' + item.label\" class=\"btn btn-transparent\"\n          (click)=\"removeItem($event, item, $index);\">\n          <i class=\"app-icon wi wi-close\"></i>\n        </button>\n      }\n    </a>\n  </li>\n}\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    datacompletemsg.bind = \"datacompletemsg\"\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" }]
         }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['displayfield.bind']
@@ -749,37 +748,10 @@
                     type: i0.Optional
                 }] }], { searchComponent: [{
                 type: i0.ViewChild,
-                args: [i2.SearchComponent, /* TODO: add static flag */ { static: true }]
+                args: [search.SearchComponent, /* TODO: add static flag */ { static: true }]
             }] }); })();
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ChipsComponent, { className: "ChipsComponent", filePath: "chips.component.ts", lineNumber: 53 }); })();
-
-    const components = [
-        ChipsComponent
-    ];
-    class ChipsModule {
-        static { this.ɵfac = function ChipsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ChipsModule)(); }; }
-        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: ChipsModule }); }
-        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i1.CommonModule,
-                i2.SearchModule,
-                i3.WmComponentsModule] }); }
-    }
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ChipsModule, [{
-            type: i0.NgModule,
-            args: [{
-                    imports: [
-                        i1.CommonModule,
-                        i2.SearchModule,
-                        i3.WmComponentsModule
-                    ],
-                    declarations: [...components],
-                    exports: [...components]
-                }]
-        }], null, null); })();
-    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(ChipsModule, { declarations: [ChipsComponent], imports: [i1.CommonModule,
-            i2.SearchModule,
-            i3.WmComponentsModule], exports: [ChipsComponent] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ChipsComponent, { className: "ChipsComponent", filePath: "chips.component.ts", lineNumber: 57 }); })();
 
     exports.ChipsComponent = ChipsComponent;
-    exports.ChipsModule = ChipsModule;
 
 }));

package/components/input/chips/chips.component.d.ts

@@ -82,5 +82,5 @@ export declare class ChipsComponent extends DatasetAwareFormComponent implements
     private update;
     onPropertyChange(key: string, nv: any, ov: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipsComponent, [null, { attribute: "displayfield.bind"; }, { attribute: "displayexpression.bind"; }, { attribute: "displayimagesrc.bind"; }, { attribute: "datafield.bind"; }, { attribute: "dataset.bind"; }, { attribute: "chipclass.bind"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChipsComponent, "[wmChips]", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipsComponent, "[wmChips]", never, {}, {}, never, never, true, never>;
 }