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

package/components/input/checkboxset/fesm2022/index.mjs

@@ -0,0 +1,138 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { HostListener, Inject, Optional, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { FormWidgetType, setListClass } from '@wm/core';
+import { PROP_STRING, PROP_BOOLEAN, PROP_ANY, PROP_NUMBER, register, registerFormWidget, styler, TextContentDirective, ItemTemplateDirective, PartialParamHandlerDirective, PartialContainerDirective, provideAs, provideAsWidgetRef } from '@wm/components/base';
+import { DatasetAwareFormComponent } from '@wm/components/input/dataset-aware-form';
+import { forEach, includes } from 'lodash-es';
+
+const checkboxsetProps = new Map([
+    ['class', PROP_STRING],
+    ['collapsible', PROP_BOOLEAN],
+    ['compareby', PROP_STRING],
+    ['datafield', PROP_STRING],
+    ['dataset', { value: 'Option 1, Option 2, Option 3', ...PROP_ANY }],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['dateformat', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['displayexpression', PROP_STRING],
+    ['displayfield', PROP_STRING],
+    ['displayValue', PROP_STRING],
+    ['groupby', PROP_STRING],
+    ['itemclass', { value: '', ...PROP_STRING }],
+    ['itemsperrow', { value: 'xs-1 sm-1 md-1 lg-1', ...PROP_STRING }],
+    ['listclass', { value: '', ...PROP_STRING }],
+    ['match', PROP_STRING],
+    ['name', PROP_STRING],
+    ['orderby', PROP_STRING],
+    ['readonly', PROP_BOOLEAN],
+    ['required', PROP_BOOLEAN],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['showcount', PROP_BOOLEAN],
+    ['showindevice', { displayType: 'inline-block', value: 'all', ...PROP_STRING }],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['usekeys', PROP_BOOLEAN]
+]);
+const registerProps = () => {
+    register('wm-checkboxset', checkboxsetProps);
+    registerFormWidget(FormWidgetType.CHECKBOXSET, new Map(checkboxsetProps));
+};
+
+const DEFAULT_CLS = 'app-checkboxset list-group inline';
+const WIDGET_CONFIG = { widgetType: 'wm-checkboxset', hostClass: DEFAULT_CLS };
+class CheckboxsetComponent extends DatasetAwareFormComponent {
+    static { this.initializeProps = registerProps(); }
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.layout = '';
+        styler(this.nativeElement, this);
+        this.multiple = true;
+    }
+    triggerInvokeOnChange(keys, $event) {
+        this.modelByKey = keys;
+        if (this.viewParent.containerWidget && this.viewParent.containerWidget.updateDataValue)
+            this.viewParent.containerWidget.updateDataValue(this.datavalue);
+        this.invokeOnTouched();
+        // invoke on datavalue change.
+        this.invokeOnChange(this.datavalue, $event || {}, true);
+    }
+    onCheckboxLabelClick($event, key) {
+        if (!$($event.target).is('input')) {
+            return;
+        }
+        // construct the _model from the checked elements.
+        const inputElements = this.nativeElement.querySelectorAll('input:checked');
+        const keys = [];
+        forEach(inputElements, ($el) => {
+            // @ts-ignore
+            keys.push($el.value);
+        });
+        this.triggerInvokeOnChange(keys, $event);
+    }
+    // change and blur events are added from the template
+    handleEvent(node, eventName, callback, locals) {
+        if (eventName === 'click') {
+            this.eventManager.addEventListener(node, eventName, e => {
+                if (!$(e.target).is('input')) {
+                    return;
+                }
+                locals.$event = e;
+                return callback();
+            });
+        }
+        else if (!includes(['change'], eventName)) {
+            super.handleEvent(node, eventName, callback, locals);
+        }
+    }
+    onKeyDown($event) {
+        $event.preventDefault();
+        $event.target.click();
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'tabindex') {
+            return;
+        }
+        if (key === 'required') {
+            this._onChange(this.datavalue);
+            return;
+        }
+        if (key === 'itemsperrow') {
+            setListClass(this);
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxsetComponent, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CheckboxsetComponent, isStandalone: true, selector: "[wmCheckboxset]", host: { listeners: { "keydown.enter": "onKeyDown($event,\"ENTER\")" } }, providers: [
+            provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
+            provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
+            provideAsWidgetRef(CheckboxsetComponent)
+        ], exportAs: ["wmCheckboxset"], usesInheritance: true, ngImport: i0, template: "@if (!groupby) {\n  @for (item of datasetItems; track item; let i = $index) {\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n      [class.active]=\"item.selected\"\n      [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n      (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n      <!-- Default item template -->\n      @if (!content) {\n        <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n          <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n            type=\"checkbox\"\n            [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n            [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n          <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n      }\n      <!-- Custom partial template -->\n      @if (content) {\n        <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n          <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n            type=\"checkbox\"\n            [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n            [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n          <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n      }\n    </li>\n  }\n} @else {\n  @for (groupObj of groupedData; track groupObj; let groupindex = $index) {\n    <li class=\"app-list-item-group\" role=\"presentation\">\n      <ul class=\"item-group\" [attr.aria-labelledby]=\"'group_' + widgetId + '_' + groupindex\">\n        <li [id]=\"'group_' + widgetId + '_' + groupindex\" aria-hidden=\"true\" class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n          <h4 class=\"group-title\" [attr.aria-label]=\"'Group '+groupObj.key\">{{groupObj.key}}\n            <div class=\"header-action\">\n              @if (collapsible) {\n                <i class=\"app-icon wi action wi-chevron-up\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n              }\n              @if (showcount) {\n                <span class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n              }\n            </div>\n          </h4>\n        </li>\n        @for (item of groupObj.data; track item; let i = $index) {\n          <li\n            [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n            [class.active]=\"item.selected\"\n            [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n            (click)=\"onCheckboxLabelClick($event, item)\">\n            <!-- Default item template -->\n            @if (!content) {\n              <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                  [tabindex]=\"tabindex\"\n                  [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                  [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption\" [textContent]=\"item.label\"></span>\n              </label>\n            }\n            <!-- Custom partial template -->\n            @if (content) {\n              <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                  [tabindex]=\"tabindex\"\n                  [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                  [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption\" partial-container-target></span>\n              </label>\n            }\n          </li>\n        }\n      </ul>\n    </li>\n  }\n}\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n@if (readonly || disabled) {\n  <div class=\"readonly-wrapper\"></div>\n}\n\n<!-- This template will be displayed when groupby is specified. -->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "directive", type: ItemTemplateDirective, selector: "[wmItemTemplate]", inputs: ["userComponentParams", "wmItemTemplate"], exportAs: ["itemTemplateRef"] }, { kind: "directive", type: PartialParamHandlerDirective, selector: "[partialContainer]" }, { kind: "directive", type: PartialContainerDirective, selector: "[partialContainer]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxsetComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, TextContentDirective, ItemTemplateDirective, PartialParamHandlerDirective, PartialContainerDirective], selector: '[wmCheckboxset]', exportAs: 'wmCheckboxset', providers: [
+                        provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
+                        provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
+                        provideAsWidgetRef(CheckboxsetComponent)
+                    ], template: "@if (!groupby) {\n  @for (item of datasetItems; track item; let i = $index) {\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n      [class.active]=\"item.selected\"\n      [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n      (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n      <!-- Default item template -->\n      @if (!content) {\n        <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n          <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n            type=\"checkbox\"\n            [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n            [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n          <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n      }\n      <!-- Custom partial template -->\n      @if (content) {\n        <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n          <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n            type=\"checkbox\"\n            [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n            [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n          <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n      }\n    </li>\n  }\n} @else {\n  @for (groupObj of groupedData; track groupObj; let groupindex = $index) {\n    <li class=\"app-list-item-group\" role=\"presentation\">\n      <ul class=\"item-group\" [attr.aria-labelledby]=\"'group_' + widgetId + '_' + groupindex\">\n        <li [id]=\"'group_' + widgetId + '_' + groupindex\" aria-hidden=\"true\" class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n          <h4 class=\"group-title\" [attr.aria-label]=\"'Group '+groupObj.key\">{{groupObj.key}}\n            <div class=\"header-action\">\n              @if (collapsible) {\n                <i class=\"app-icon wi action wi-chevron-up\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n              }\n              @if (showcount) {\n                <span class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n              }\n            </div>\n          </h4>\n        </li>\n        @for (item of groupObj.data; track item; let i = $index) {\n          <li\n            [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n            [class.active]=\"item.selected\"\n            [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n            (click)=\"onCheckboxLabelClick($event, item)\">\n            <!-- Default item template -->\n            @if (!content) {\n              <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                  [tabindex]=\"tabindex\"\n                  [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                  [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption\" [textContent]=\"item.label\"></span>\n              </label>\n            }\n            <!-- Custom partial template -->\n            @if (content) {\n              <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                  [tabindex]=\"tabindex\"\n                  [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                  [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption\" partial-container-target></span>\n              </label>\n            }\n          </li>\n        }\n      </ul>\n    </li>\n  }\n}\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n@if (readonly || disabled) {\n  <div class=\"readonly-wrapper\"></div>\n}\n\n<!-- This template will be displayed when groupby is specified. -->\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event', '"ENTER"']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxsetComponent };
+//# sourceMappingURL=index.mjs.map

package/components/input/checkboxset/fesm2022/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/input/checkboxset/src/checkboxset.props.ts","../../../../../projects/components/widgets/input/checkboxset/src/checkboxset.component.ts","../../../../../projects/components/widgets/input/checkboxset/src/checkboxset.component.html","../../../../../projects/components/widgets/input/checkboxset/src/index.ts"],"sourcesContent":["import { FormWidgetType } from '@wm/core';\nimport { PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, register, registerFormWidget } from '@wm/components/base';\n\nexport const checkboxsetProps = new Map(\n    [\n        ['class', PROP_STRING],\n        ['collapsible', PROP_BOOLEAN],\n        ['compareby', PROP_STRING],\n        ['datafield', PROP_STRING],\n        ['dataset', {value: 'Option 1, Option 2, Option 3', ...PROP_ANY}],\n        ['datavaluesource', PROP_ANY],\n        ['datavalue', PROP_STRING],\n        ['dateformat', PROP_STRING],\n        ['disabled', PROP_BOOLEAN],\n        ['displayexpression', PROP_STRING],\n        ['displayfield', PROP_STRING],\n        ['displayValue', PROP_STRING],\n        ['groupby', PROP_STRING],\n        ['itemclass', {value: '', ...PROP_STRING}],\n        ['itemsperrow', {value: 'xs-1 sm-1 md-1 lg-1', ...PROP_STRING}],\n        ['listclass', {value: '', ...PROP_STRING}],\n        ['match', PROP_STRING],\n        ['name', PROP_STRING],\n        ['orderby', PROP_STRING],\n        ['readonly', PROP_BOOLEAN],\n        ['required', PROP_BOOLEAN],\n        ['show', {value: true, ...PROP_BOOLEAN}],\n        ['showcount', PROP_BOOLEAN],\n        ['showindevice', {displayType: 'inline-block', value: 'all', ...PROP_STRING}],\n        ['tabindex', {value: 0, ...PROP_NUMBER}],\n        ['usekeys', PROP_BOOLEAN]\n    ]\n);\n\nexport const registerProps = () => {\n    register(\n        'wm-checkboxset',\n        checkboxsetProps\n    );\n    registerFormWidget(\n        FormWidgetType.CHECKBOXSET,\n        new Map(checkboxsetProps)\n    );\n};\n","import { CommonModule } from '@angular/common';\nimport {Component, HostListener, Inject, Injector, Optional} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';\n\nimport {setListClass} from '@wm/core';\nimport { ItemTemplateDirective, IWidgetConfig, PartialContainerDirective, PartialParamHandlerDirective, provideAs, provideAsWidgetRef, styler, TextContentDirective } from '@wm/components/base';\nimport { DatasetAwareFormComponent } from '@wm/components/input/dataset-aware-form';\n\nimport { registerProps } from './checkboxset.props';\nimport {forEach, includes} from \"lodash-es\";\n\ndeclare const $;\n\nconst DEFAULT_CLS = 'app-checkboxset list-group inline';\nconst WIDGET_CONFIG: IWidgetConfig = {widgetType: 'wm-checkboxset', hostClass: DEFAULT_CLS};\n\n@Component({\n    standalone: true,\n    imports: [CommonModule, TextContentDirective, ItemTemplateDirective, PartialParamHandlerDirective, PartialContainerDirective],\n    selector: '[wmCheckboxset]',\n    exportAs: 'wmCheckboxset',\n    templateUrl: 'checkboxset.component.html',\n    providers: [\n        provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),\n        provideAs(CheckboxsetComponent, NG_VALIDATORS, true),\n        provideAsWidgetRef(CheckboxsetComponent)\n    ]\n})\n\nexport class CheckboxsetComponent extends DatasetAwareFormComponent {\n    static initializeProps = registerProps();\n\n    public layout = '';\n    public collapsible: boolean;\n\n    protected match: string;\n    protected dateformat: string;\n\n    public disabled: boolean;\n    public itemsperrow: string;\n    private itemsPerRowClass: string;\n\n    constructor(inj: Injector, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n        styler(this.nativeElement, this);\n        this.multiple = true;\n    }\n\n    triggerInvokeOnChange(keys, $event) {\n        this.modelByKey = keys;\n\n        if(this.viewParent.containerWidget && this.viewParent.containerWidget.updateDataValue)\n            this.viewParent.containerWidget.updateDataValue(this.datavalue);\n\n        this.invokeOnTouched();\n        // invoke on datavalue change.\n        this.invokeOnChange(this.datavalue, $event || {}, true);\n    }\n\n    onCheckboxLabelClick($event, key) {\n        if (!$($event.target).is('input')) {\n            return;\n        }\n\n        // construct the _model from the checked elements.\n        const inputElements = this.nativeElement.querySelectorAll('input:checked');\n        const keys = [];\n        forEach(inputElements, ($el) => {\n            // @ts-ignore\n            keys.push($el.value);\n        });\n\n        this.triggerInvokeOnChange(keys, $event);\n    }\n\n    // change and blur events are added from the template\n    protected handleEvent(node: HTMLElement, eventName: string, callback: Function, locals: any) {\n        if (eventName === 'click') {\n            this.eventManager.addEventListener(\n                node,\n                eventName,\n                e => {\n                    if (!$(e.target).is('input')) {\n                        return;\n                    }\n                    locals.$event = e;\n                    return callback();\n                }\n            );\n        } else if (!includes(['change'], eventName)) {\n            super.handleEvent(node, eventName, callback, locals);\n        }\n    }\n\n    @HostListener('keydown.enter', ['$event', '\"ENTER\"'])\n    onKeyDown($event) {\n        $event.preventDefault();\n        $event.target.click();\n    }\n\n    onPropertyChange(key, nv, ov?) {\n\n        if (key === 'tabindex') {\n            return;\n        }\n        if (key === 'required') {\n            this._onChange(this.datavalue);\n            return;\n        }\n        if (key === 'itemsperrow') {\n            setListClass(this);\n        } else {\n            super.onPropertyChange(key, nv, ov);\n        }\n    }\n}\n","@if (!groupby) {\n  @for (item of datasetItems; track item; let i = $index) {\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n      [class.active]=\"item.selected\"\n      [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n      (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n      <!-- Default item template -->\n      @if (!content) {\n        <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n          <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n            type=\"checkbox\"\n            [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n            [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n          <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n      }\n      <!-- Custom partial template -->\n      @if (content) {\n        <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n          <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n            type=\"checkbox\"\n            [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n            [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n          <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n      }\n    </li>\n  }\n} @else {\n  @for (groupObj of groupedData; track groupObj; let groupindex = $index) {\n    <li class=\"app-list-item-group\" role=\"presentation\">\n      <ul class=\"item-group\" [attr.aria-labelledby]=\"'group_' + widgetId + '_' + groupindex\">\n        <li [id]=\"'group_' + widgetId + '_' + groupindex\" aria-hidden=\"true\" class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n          <h4 class=\"group-title\" [attr.aria-label]=\"'Group '+groupObj.key\">{{groupObj.key}}\n            <div class=\"header-action\">\n              @if (collapsible) {\n                <i class=\"app-icon wi action wi-chevron-up\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n              }\n              @if (showcount) {\n                <span class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n              }\n            </div>\n          </h4>\n        </li>\n        @for (item of groupObj.data; track item; let i = $index) {\n          <li\n            [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n            [class.active]=\"item.selected\"\n            [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n            (click)=\"onCheckboxLabelClick($event, item)\">\n            <!-- Default item template -->\n            @if (!content) {\n              <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                  [tabindex]=\"tabindex\"\n                  [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                  [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption\" [textContent]=\"item.label\"></span>\n              </label>\n            }\n            <!-- Custom partial template -->\n            @if (content) {\n              <label class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                  [tabindex]=\"tabindex\"\n                  [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                  [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption\" partial-container-target></span>\n              </label>\n            }\n          </li>\n        }\n      </ul>\n    </li>\n  }\n}\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n@if (readonly || disabled) {\n  <div class=\"readonly-wrapper\"></div>\n}\n\n<!-- This template will be displayed when groupby is specified. -->\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/components/input/checkboxset/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@wm/components/input/checkboxset" />
+export * from './public_api';

package/components/input/checkboxset/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@wm/components/input/checkboxset",
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "module": "fesm2022/index.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/index.mjs",
+      "esm": "./esm2022/index.mjs",
+      "default": "./fesm2022/index.mjs"
+    }
+  }
+}

package/components/input/checkboxset/public_api.d.ts

@@ -0,0 +1 @@
+export * from './checkboxset.component';

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/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';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/input/dataset-aware-form'), require('@wm/components/basic/search'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@angular/core', '@angular/forms', '@wm/core', '@wm/components/base', '@wm/components/input/dataset-aware-form', '@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.ng.core, global.ng.forms, global.wm.core, global.wm.components.base, global.wm.components.input.datasetawareform, global.wm.components.basic.search, global._));
+})(this, (function (exports, i1, i0, forms, core, base, datasetAwareForm, search, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -22,103 +22,60 @@
     }
 
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
-    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
     var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
 
     const chipsProps = new Map([
-        ['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 }],
+        ['allowonlyselect', base.PROP_BOOLEAN],
+        ['autofocus', base.PROP_BOOLEAN],
+        ['chipclass', base.PROP_STRING],
+        ['class', base.PROP_STRING],
+        ['compareby', base.PROP_STRING],
+        ['datafield', base.PROP_STRING],
+        ['dataoptions', base.PROP_ANY],
+        ['dataset', { value: 'Option 1, Option 2, Option 3', ...base.PROP_ANY }],
+        ['datasource', base.PROP_ANY],
+        ['datavalue', base.PROP_ANY],
+        ['datavaluesource', base.PROP_ANY],
+        ['dateformat', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['displayexpression', base.PROP_STRING],
+        ['displayfield', base.PROP_STRING],
+        ['displayimagesrc', base.PROP_STRING],
+        ['enablereorder', base.PROP_BOOLEAN],
+        ['groupby', base.PROP_STRING],
+        ['inputposition', { value: 'last', ...base.PROP_STRING }],
+        ['inputwidth', { value: 'default', ...base.PROP_STRING }],
+        ['limit', base.PROP_NUMBER],
+        ['loadingdatamsg', { value: 'Loading items...', ...base.PROP_STRING }],
+        ['match', base.PROP_STRING],
+        ['matchmode', base.PROP_STRING],
+        ['maxsize', base.PROP_NUMBER],
+        ['minchars', { value: 1, ...base.PROP_NUMBER }],
+        ['name', base.PROP_STRING],
+        ['navsearchbar', { value: false, ...base.PROP_BOOLEAN }],
+        ['orderby', base.PROP_STRING],
+        ['placeholder', { value: 'Type here..', ...base.PROP_STRING }],
+        ['query', base.PROP_STRING],
+        ['readonly', base.PROP_BOOLEAN],
+        ['searchkey', base.PROP_STRING],
+        ['shortcutkey', base.PROP_STRING],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['showsearchicon', base.PROP_BOOLEAN],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['type', { value: 'search', ...base.PROP_STRING }],
+        ['debouncetime', { value: 250, ...base.PROP_NUMBER }],
+        ['datacompletemsg', { value: 'No more data to load', ...base.PROP_STRING }],
     ]);
     const registerProps = () => {
-        i2.register('wm-chips', chipsProps);
-        i2.registerFormWidget(core.FormWidgetType.CHIPS, new Map(chipsProps));
+        base.register('wm-chips', chipsProps);
+        base.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_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_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-        const _r10 = i0__namespace.ɵɵgetCurrentView();
-        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_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_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_For_1_Conditional_4_Template, 2, 1, "button", 8);
-        i0__namespace.ɵɵelementEnd()();
-    } if (rf & 2) {
-        const item_r3 = ctx.$implicit;
-        const ctx_r3 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵclassMapInterpolate1("chip-item ", ctx_r3.chipclass && !ctx_r3.bindChipclass ? ctx_r3.chipclass : "", "");
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(9, _c2, item_r3.active, ctx_r3.disabled));
-        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.ɵɵ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.ɵɵconditional(!ctx_r3.readonly ? 4 : -1);
-    } }
     const WIDGET_CONFIG = {
         widgetType: 'wm-chips',
         hostClass: 'app-chips nav nav-pills list-inline'
     };
-    class ChipsComponent extends input.DatasetAwareFormComponent {
+    class ChipsComponent extends datasetAwareForm.DatasetAwareFormComponent {
         static { this.initializeProps = registerProps(); }
         // getter setter is added to pass the datasource to searchcomponent.
         get datasource() {
@@ -140,7 +97,7 @@
             this.chipsList = [];
             this.maxSizeReached = 'Max size reached';
             this._unsubscribeDv = false;
-            i2.styler(this.nativeElement, this);
+            base.styler(this.nativeElement, this);
             // set the showsearchicon as false by default.
             if (!core.isDefined(this.showsearchicon)) {
                 this.showsearchicon = false;
@@ -211,7 +168,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(i2.getConditionalClasses(nv, ov), $index);
+                    this.applyItemClass(base.getConditionalClasses(nv, ov), $index);
                 }, watchName));
             }
         }
@@ -220,7 +177,7 @@
             $(chipItem).removeClass(val.toRemove).addClass(val.toAdd);
         }
         removeDuplicates() {
-            this.chipsList = i2.getUniqObjsByDataField(this.chipsList, this.datafield, this.displayfield || this.displaylabel);
+            this.chipsList = base.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.
@@ -256,10 +213,10 @@
                 if (itemFound) {
                     this.chipsList.push(itemFound);
                 }
-                else if (this.datafield !== i2.ALLFIELDS) {
+                else if (this.datafield !== base.ALLFIELDS) {
                     searchQuery.push(val);
                 }
-                else if (this.datafield === i2.ALLFIELDS) {
+                else if (this.datafield === base.ALLFIELDS) {
                     let dataObj, isCustom = false;
                     if (!lodashEs.isObject(val)) {
                         dataObj = this.createCustomDataModel(val);
@@ -344,7 +301,7 @@
                     return;
                 }
                 let dataObj;
-                if (this.datafield === i2.ALLFIELDS) {
+                if (this.datafield === base.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
@@ -394,7 +351,7 @@
         }
         // Prepare datavalue object from a string(junk) value when datafield is allFields.
         createCustomDataModel(val) {
-            const key = this.displayfield || (this.datafield !== i2.ALLFIELDS ? this.datafield : undefined);
+            const key = this.displayfield || (this.datafield !== base.ALLFIELDS ? this.datafield : undefined);
             if (key) {
                 const customObj = {};
                 customObj[key] = val;
@@ -403,7 +360,7 @@
         }
         // Check if newItem already exists
         isDuplicate(item) {
-            if (this.datafield === i2.ALLFIELDS) {
+            if (this.datafield === base.ALLFIELDS) {
                 return lodashEs.findIndex(this.chipsList, { value: item.value }) > -1;
             }
             return lodashEs.findIndex(this.chipsList, { key: item.key }) > -1;
@@ -582,7 +539,7 @@
                 items: '> li:not(.app-chip-search)',
                 placeholder: 'chip-placeholder'
             };
-            i2.configureDnD(this.$element, options, this.onReorderStart.bind(this), this.update.bind(this));
+            base.configureDnD(this.$element, options, this.onReorderStart.bind(this), this.update.bind(this));
         }
         // Triggered on drag start while reordering.
         onReorderStart(evt, ui) {
@@ -699,61 +656,45 @@
             }
             super.onPropertyChange(key, nv, ov);
         }
-        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(search.SearchComponent, 7);
-            } if (rf & 2) {
-                let _t;
-                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.searchComponent = _t.first);
-            } }, 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.ɵɵ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.ɵɵ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 }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: ChipsComponent, deps: [{ token: i0__namespace.Injector }, { token: 'displayfield.bind', attribute: true }, { token: 'displayexpression.bind', attribute: true }, { token: 'displayimagesrc.bind', attribute: true }, { token: 'datafield.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'chipclass.bind', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ChipsComponent, isStandalone: true, selector: "[wmChips]", providers: [
+                base.provideAs(ChipsComponent, forms.NG_VALUE_ACCESSOR, true),
+                base.provideAsWidgetRef(ChipsComponent)
+            ], viewQueries: [{ propertyName: "searchComponent", first: true, predicate: search.SearchComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, 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", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: search.SearchComponent, selector: "[wmSearch]" }] }); }
     }
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ChipsComponent, [{
-            type: i0.Component,
-            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']
-                }] }, { type: undefined, decorators: [{
-                    type: i0.Attribute,
-                    args: ['displayexpression.bind']
-                }] }, { type: undefined, decorators: [{
-                    type: i0.Attribute,
-                    args: ['displayimagesrc.bind']
-                }] }, { type: undefined, decorators: [{
-                    type: i0.Attribute,
-                    args: ['datafield.bind']
-                }] }, { type: undefined, decorators: [{
-                    type: i0.Attribute,
-                    args: ['dataset.bind']
-                }] }, { type: undefined, decorators: [{
-                    type: i0.Attribute,
-                    args: ['chipclass.bind']
-                }] }, { type: undefined, decorators: [{
-                    type: i0.Inject,
-                    args: ['EXPLICIT_CONTEXT']
-                }, {
-                    type: i0.Optional
-                }] }], { searchComponent: [{
-                type: i0.ViewChild,
-                args: [search.SearchComponent, /* TODO: add static flag */ { static: true }]
-            }] }); })();
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ChipsComponent, { className: "ChipsComponent", filePath: "chips.component.ts", lineNumber: 57 }); })();
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: ChipsComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i1.CommonModule, base.TextContentDirective, search.SearchComponent], selector: '[wmChips]', providers: [
+                            base.provideAs(ChipsComponent, forms.NG_VALUE_ACCESSOR, true),
+                            base.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" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['displayfield.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['displayexpression.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['displayimagesrc.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['datafield.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['dataset.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['chipclass.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { searchComponent: [{
+                    type: i0.ViewChild,
+                    args: [search.SearchComponent, /* TODO: add static flag */ { static: true }]
+                }] } });
 
     exports.ChipsComponent = ChipsComponent;
 

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

@@ -1,6 +1,6 @@
 import { AfterViewInit, Injector, OnInit } from '@angular/core';
 import { DataSetItem } from '@wm/components/base';
-import { DatasetAwareFormComponent } from '@wm/components/input';
+import { DatasetAwareFormComponent } from '@wm/components/input/dataset-aware-form';
 import { SearchComponent } from '@wm/components/basic/search';
 import * as i0 from "@angular/core";
 export declare class ChipsComponent extends DatasetAwareFormComponent implements OnInit, AfterViewInit {