@wavemaker/app-ng-runtime 11.8.0-rc.5667 → 11.8.0-rc.5670

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

@@ -1,3380 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, Inject, Optional, HostBinding, Directive, HostListener, Injectable, ElementRef, Attribute, ViewChild, ContentChildren, Injector, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { NumberSymbol, getLocaleNumberSymbol, CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
-import { FormControlName, NgModel, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
-import * as i3 from 'angular-imask';
-import { IMaskDirective, IMaskModule } from 'angular-imask';
-import * as i2 from '@wm/components/base';
-import { PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, register, DISPLAY_TYPE, StylableComponent, styler, provideAsWidgetRef, APPLY_STYLES_TYPE, WidgetConfig, registerFormWidget, provideAs, extractDataAsArray, ToDatePipe, ALLFIELDS, convertDataToObject, getOrderedDataset, transformDataWithKeys, transformFormData, getUniqObjsByDataField, groupData, handleHeaderClick, toggleAllHeaders, WidgetRef, INPUTMODE, TrailingZeroDecimalPipe, WmComponentsModule } from '@wm/components/base';
-import * as i1$1 from '@wm/core';
-import { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, $appDigest, debounce as debounce$1, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, AbstractI18nService, setAttr, removeAttr, setCSS } from '@wm/core';
-import { has, set, isArray, debounce, toString, find, isNull, isObject, isEqual, isEmpty, forEach, includes, isString, get, isUndefined, round, toArray, intersection, findIndex } from 'lodash-es';
-import { Subject } from 'rxjs';
-import { __param, __metadata, __decorate } from 'tslib';
-
-const registerProps$e = () => {
-    register('wm-button', new Map([
-        ['animation', PROP_STRING],
-        ['badgevalue', PROP_STRING],
-        ['caption', PROP_STRING],
-        ['class', PROP_STRING],
-        ['conditionalclass', PROP_ANY],
-        ['conditionalstyle', PROP_ANY],
-        ['disabled', PROP_BOOLEAN],
-        ['hint', PROP_STRING],
-        ['iconclass', PROP_STRING],
-        ['iconheight', PROP_STRING],
-        ['iconmargin', PROP_STRING],
-        ['iconposition', PROP_STRING],
-        ['iconurl', PROP_STRING],
-        ['iconwidth', PROP_STRING],
-        ['name', PROP_STRING],
-        ['shortcutkey', PROP_STRING],
-        ['show', { value: true, ...PROP_BOOLEAN }],
-        ['tabindex', { value: 0, ...PROP_NUMBER }],
-        ['type', PROP_STRING]
-    ]));
-};
-
-const _c0$c = ["wmButton", ""];
-const _c1$b = [[["", 8, "caret"]]];
-const _c2$5 = [".caret"];
-const _c3$2 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
-const _c4$2 = (a0, a1, a2, a3) => ({ width: a0, height: a1, margin: a2, fontSize: a3 });
-function ButtonComponent_img_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 5);
-    i0.ɵɵpipe(1, "image");
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("src", i0.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", i0.ɵɵpureFunction3(4, _c3$2, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
-} }
-function ButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 6);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction4(4, _c4$2, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin, ctx_r0.iconwidth));
-} }
-function ButtonComponent_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 7);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
-} }
-function ButtonComponent_span_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 8);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("textContent", ctx_r0.badgevalue);
-} }
-const DEFAULT_CLS$6 = 'btn app-button';
-const WIDGET_CONFIG$e = {
-    widgetType: 'wm-button',
-    hostClass: DEFAULT_CLS$6,
-    displayType: DISPLAY_TYPE.INLINE_BLOCK
-};
-class ButtonComponent extends StylableComponent {
-    static { this.initializeProps = registerProps$e(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$e, explicitContext);
-        styler(this.nativeElement, this);
-    }
-    static { this.ɵfac = function ButtonComponent_Factory(t) { return new (t || ButtonComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ButtonComponent, selectors: [["button", "wmButton", ""]], hostVars: 5, hostBindings: function ButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵhostProperty("type", ctx.type)("tabIndex", ctx.tabindex)("disabled", ctx.disabled);
-            i0.ɵɵattribute("accesskey", ctx.shortcutkey)("icon-position", ctx.iconposition);
-        } }, exportAs: ["wmButton"], features: [i0.ɵɵProvidersFeature([
-                provideAsWidgetRef(ButtonComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c2$5, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c1$b);
-            i0.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0)(1, ButtonComponent_i_1_Template, 1, 9, "i", 1)(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
-            i0.ɵɵelement(3, "span", 3);
-            i0.ɵɵprojection(4);
-            i0.ɵɵtemplate(5, ButtonComponent_span_5_Template, 1, 1, "span", 4);
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.iconurl);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.iconclass);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.iconclass);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("innerHTML", ctx.caption, i0.ɵɵsanitizeHtml);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.badgevalue);
-        } }, dependencies: [i1.NgIf, i1.NgStyle, i2.TextContentDirective, i2.ImagePipe], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonComponent, [{
-        type: Component,
-        args: [{ selector: 'button[wmButton]', providers: [
-                    provideAsWidgetRef(ButtonComponent)
-                ], exportAs: 'wmButton', template: "<img data-identifier=\"img\" alt=\"button image\" class=\"button-image-icon\" [src]=\"iconurl | image\" *ngIf=\"iconurl\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n<i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin, fontSize:iconwidth}\" *ngIf=\"iconclass\"></i>\n<span class=\"sr-only\" *ngIf=\"iconclass\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n<span class=\"btn-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n<span *ngIf=\"badgevalue\" class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { type: [{
-            type: HostBinding,
-            args: ['type']
-        }], tabindex: [{
-            type: HostBinding,
-            args: ['tabIndex']
-        }], disabled: [{
-            type: HostBinding,
-            args: ['disabled']
-        }], shortcutkey: [{
-            type: HostBinding,
-            args: ['attr.accesskey']
-        }], iconposition: [{
-            type: HostBinding,
-            args: ['attr.icon-position']
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ButtonComponent, { className: "ButtonComponent", filePath: "button/button.component.ts", lineNumber: 22 }); })();
-
-const registerProps$d = () => {
-    register('wm-buttongroup', new Map([
-        ['class', PROP_STRING],
-        ['name', PROP_STRING],
-        ['show', { value: true, ...PROP_BOOLEAN }],
-        ['vertical', PROP_BOOLEAN]
-    ]));
-};
-
-const DEFAULT_CLS$5 = 'btn-group app-button-group';
-const WIDGET_CONFIG$d = {
-    widgetType: 'wm-buttongroup',
-    hostClass: DEFAULT_CLS$5
-};
-class ButtonGroupDirective extends StylableComponent {
-    static { this.initializeProps = registerProps$d(); }
-    handleClick(event) {
-        const $target = $(event.target).closest('.app-button');
-        this.$element.find('.app-button').removeClass('selected');
-        $target.addClass('selected');
-    }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$d, explicitContext);
-        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
-    }
-    static { this.ɵfac = function ButtonGroupDirective_Factory(t) { return new (t || ButtonGroupDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ButtonGroupDirective, selectors: [["", "wmButtonGroup", ""]], hostVars: 2, hostBindings: function ButtonGroupDirective_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("click", function ButtonGroupDirective_click_HostBindingHandler($event) { return ctx.handleClick($event); });
-        } if (rf & 2) {
-            i0.ɵɵclassProp("btn-group-vertical", ctx.vertical);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAsWidgetRef(ButtonGroupDirective)
-            ]), i0.ɵɵInheritDefinitionFeature] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonGroupDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[wmButtonGroup]',
-                providers: [
-                    provideAsWidgetRef(ButtonGroupDirective)
-                ]
-            }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { vertical: [{
-            type: HostBinding,
-            args: ['class.btn-group-vertical']
-        }], handleClick: [{
-            type: HostListener,
-            args: ['click', ['$event']]
-        }] }); })();
-
-class BaseFormComponent extends StylableComponent {
-    constructor(inj, config, explicitContext, initPromise) {
-        super(inj, config, explicitContext, initPromise);
-        this.inj = inj;
-        this.binddatavalue = this.$element.attr('datavalue.bind');
-    }
-    set datavalue(datavalue) {
-        this.dataval = datavalue;
-    }
-    get datavalue() {
-        return this.dataval;
-    }
-    /**
-     * Responsible for updating the variable bound to the widget's datavalue property.
-     * @param value
-     */
-    updateBoundVariable(value) {
-        let binddatavalue = this.binddatavalue;
-        // return if the variable bound is not static.
-        if (this.datavaluesource && this.datavaluesource.execute(DataSource.Operation.IS_API_AWARE)) {
-            return;
-        }
-        else if (this.datavaluesource && !this.datavaluesource.twoWayBinding) {
-            return;
-        }
-        // return if widget is bound.
-        if (!binddatavalue || binddatavalue.startsWith('Widgets.') || binddatavalue.startsWith('itemRef.currentItemWidgets')) {
-            return;
-        }
-        binddatavalue = binddatavalue.replace(/\[\$i\]/g, '[0]');
-        // In case of list widget context will be the listItem.
-        if (has(this.context, binddatavalue.split('.')[0])) {
-            set(this.context, binddatavalue, value);
-        }
-        else {
-            set(this.viewParent, binddatavalue, value);
-        }
-    }
-    invokeOnChange(value, $event) {
-        // invoke the event callback
-        if ($event) {
-            if (this.datavalue !== this.prevDatavalue) {
-                this.updateBoundVariable(value);
-                this.invokeEventCallback('change', {
-                    $event,
-                    newVal: value,
-                    oldVal: this.prevDatavalue
-                });
-            }
-        }
-        // update the previous value
-        this.prevDatavalue = value;
-    }
-    updatePrevDatavalue(val) {
-        this.prevDatavalue = val;
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        // [WMS-18892]- stopping event propagation [for ArrowLeft, ArrowUp, ArrowRight, ArrowDown actions]  when form widgets or form is inside list widget
-        let parentElemList = $(this.nativeElement).parents();
-        if (parentElemList.closest('[wmList]').length) {
-            this.$element.keydown(function ($event) {
-                if ($event.keyCode === 37 || $event.keyCode === 38 || $event.keyCode === 39 || $event.keyCode === 40) {
-                    $event.stopPropagation();
-                }
-            });
-        }
-    }
-    static { this.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject('EXPLICIT_CONTEXT', 8), i0.ɵɵinject(Promise)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseFormComponent, factory: BaseFormComponent.ɵfac }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormComponent, [{
-        type: Injectable
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: [WidgetConfig]
-            }] }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }, { type: Promise }], null); })();
-
-/*
- * WMS-18269
- * custom 'required' validator for components,
- * as the bound values are resolved at runtime
- * Called on 'required' property change
- *
- * Note: Component needs NG_VALIDATOR provider for this to work
- */
-function isValidValue(val) {
-    switch (typeof val) {
-        case 'object': return (!!val && (!!val.length || !!Object.keys(val).length));
-        case 'number': return (!!val || val === 0);
-        default: return !(val === undefined || val === null || val === '');
-    }
-}
-function validateRequiredBind(required) {
-    return (control) => required
-        ? (isValidValue(control.value)
-            ? null
-            : { required: true })
-        : null;
-}
-class BaseFormCustomComponent extends BaseFormComponent {
-    constructor() {
-        super(...arguments);
-        this._onChange = () => { };
-        this._onTouched = () => { };
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this._formControl = this.inj.get(FormControlName, null);
-    }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    writeValue(value) {
-        if (this.isDestroyed) {
-            return;
-        }
-        if (this._formControl) {
-            this.datavalue = value;
-            this.onPropertyChange('datavalue', value);
-            this.updatePrevDatavalue(value);
-        }
-        /*
-         * WMS:18246
-         * Call onChange on default value, so that the Component Model is updated
-         * Do only When the Model Value is different from datavalue
-         */
-        (value !== this.datavalue) && this._onChange(this.datavalue);
-    }
-    invokeOnChange(value, $event, valid) {
-        // let the angular know about the change
-        this._onChange(value);
-        if ($event) {
-            super.invokeOnChange(value, $event);
-        }
-        else if (valid) {
-            // Fix for [WMS-24869]: updating PrevDatavalue when there is a default value for the widget.
-            this.updatePrevDatavalue(value);
-        }
-    }
-    invokeOnTouched($event) {
-        this._onTouched();
-        if ($event) {
-            this.invokeEventCallback('blur', { $event });
-        }
-    }
-    invokeOnFocus($event) {
-        this.invokeEventCallback('focus', { $event });
-    }
-    /* WMS-18269 */
-    validate(control) {
-        return this['show'] ? validateRequiredBind(this['required'])(control) : null;
-    }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵBaseFormCustomComponent_BaseFactory; return function BaseFormCustomComponent_Factory(t) { return (ɵBaseFormCustomComponent_BaseFactory || (ɵBaseFormCustomComponent_BaseFactory = i0.ɵɵgetInheritedFactory(BaseFormCustomComponent)))(t || BaseFormCustomComponent); }; })(); }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseFormCustomComponent, factory: BaseFormCustomComponent.ɵfac }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormCustomComponent, [{
-        type: Injectable
-    }], null, null); })();
-
-const checkboxProps = new Map([
-    ['caption', PROP_STRING],
-    ['class', PROP_STRING],
-    ['conditionalclass', PROP_ANY],
-    ['conditionalstyle', PROP_ANY],
-    ['checkedvalue', { value: true, ...PROP_STRING }],
-    ['datavaluesource', PROP_ANY],
-    ['datavalue', PROP_STRING],
-    ['disabled', PROP_BOOLEAN],
-    ['hint', PROP_STRING],
-    ['name', PROP_STRING],
-    ['readonly', PROP_BOOLEAN],
-    ['required', PROP_BOOLEAN],
-    ['shortcutkey', PROP_STRING],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['tabindex', { value: 0, ...PROP_NUMBER }],
-    ['uncheckedvalue', { value: false, ...PROP_STRING }]
-]);
-const registerProps$c = () => {
-    register('wm-checkbox', checkboxProps);
-    registerFormWidget(FormWidgetType.CHECKBOX, checkboxProps);
-    registerFormWidget(FormWidgetType.TOGGLE, checkboxProps);
-};
-
-const _c0$b = ["checkbox"];
-const _c1$a = ["wmCheckbox", ""];
-const _c2$4 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
-const DEFAULT_CLS$4 = 'app-checkbox checkbox';
-const WIDGET_CONFIG$c = {
-    widgetType: 'wm-checkbox',
-    hostClass: DEFAULT_CLS$4
-};
-/*
- * try to convert the chekedvalue and unchecked values to boolean/number
- */
-const unStringify = (val, defaultVal) => {
-    if (val === null) {
-        return defaultVal;
-    }
-    if (val === true || val === 'true') {
-        return true;
-    }
-    if (val === false || val === 'false') {
-        return false;
-    }
-    const number = parseInt(val, 10);
-    if (!isNaN(number)) {
-        return number;
-    }
-    return val;
-};
-class CheckboxComponent extends BaseFormCustomComponent {
-    static { this.initializeProps = registerProps$c(); }
-    // if the checkbox is checked, return checkedvalue else return uncheckedvalue
-    // @ts-ignore
-    get datavalue() {
-        return isDefined(this.proxyModel) ? (this.proxyModel ? this._checkedvalue : this._uncheckedvalue) : undefined;
-    }
-    // when the datavalue is set, update the checked state
-    // @ts-ignore
-    set datavalue(v) {
-        this.proxyModel = (isDefined(v) && v !== '') ? v === this._checkedvalue : undefined;
-        this.updatePrevDatavalue(this.datavalue);
-    }
-    constructor(inj, checkedVal, uncheckedVal, type, explicitContext) {
-        super(inj, WIDGET_CONFIG$c, explicitContext);
-        this.type = type;
-        this._caption = '&nbsp';
-        this._checkedvalue = unStringify(checkedVal, true);
-        this._uncheckedvalue = unStringify(uncheckedVal, false);
-        // if the type of the checkbox is toggle update the related classes on the host node
-        toggleClass(this.nativeElement, 'app-toggle', type === 'toggle');
-    }
-    onPropertyChange(key, nv, ov) {
-        if (key === 'tabindex') {
-            return;
-        }
-        if (key === 'required') {
-            this._onChange(this.datavalue);
-            return;
-        }
-        if (key === 'caption') {
-            if (!isDefined(nv) || nv === '') {
-                this._caption = '&nbsp;';
-            }
-            else {
-                this._caption = nv;
-            }
-        }
-        else if (key === 'checkedvalue') {
-            this._checkedvalue = unStringify(nv, true);
-        }
-        else if (key === 'uncheckedvalue') {
-            this._uncheckedvalue = unStringify(nv, false);
-        }
-        else if (key === 'datavalue') {
-            this.datavalue = unStringify(nv);
-            this._onChange(this.datavalue);
-        }
-        else {
-            super.onPropertyChange(key, nv, ov);
-        }
-    }
-    // change and blur events are handled from template
-    handleEvent(node, eventName, callback, locals) {
-        if (eventName !== 'change' && eventName !== 'blur') {
-            // applying tap (Hammer event) on the label as the event handler is not getting triggered on the input.
-            const $el = eventName === 'tap' ? this.nativeElement.querySelector('label') : this.checkboxEl.nativeElement;
-            super.handleEvent($el, eventName, callback, locals);
-        }
-    }
-    handleChange(newVal) {
-        this.invokeOnChange(this.datavalue, { type: 'change' }, this.ngModel.valid);
-    }
-    onKeyDown($event) {
-        $event.preventDefault();
-        this.checkboxEl.nativeElement.click();
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        styler(this.nativeElement.querySelector('label'), this);
-    }
-    static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵinjectAttribute('checkedvalue'), i0.ɵɵinjectAttribute('uncheckedvalue'), i0.ɵɵinjectAttribute('type'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxComponent, selectors: [["", "wmCheckbox", ""]], viewQuery: function CheckboxComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(NgModel, 5);
-            i0.ɵɵviewQuery(_c0$b, 7, ElementRef);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxEl = _t.first);
-        } }, hostBindings: function CheckboxComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("keydown.enter", function CheckboxComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(CheckboxComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(CheckboxComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 17, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "readonly", "required", "disabled", "tabindex"], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "label", 1)(1, "input", 2, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.proxyModel, $event) || (ctx.proxyModel = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("blur", function CheckboxComponent_Template_input_blur_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.invokeOnTouched($event)); })("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(3, "span", 3)(4, "img", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(5, "input", 5);
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(13, _c2$4, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
-            i0.ɵɵadvance();
-            i0.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
-            i0.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("innerHtml", ctx._caption, i0.ɵɵsanitizeHtml);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", ctx.disabled)("value", ctx.proxyModel);
-        } }, dependencies: [i1.NgClass, i2$1.CheckboxControlValueAccessor, i2$1.NgControlStatus, i2$1.CheckboxRequiredValidator, i2$1.NgModel], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxComponent, [{
-        type: Component,
-        args: [{ selector: '[wmCheckbox]', providers: [
-                    provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(CheckboxComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(CheckboxComponent)
-                ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Attribute,
-                args: ['checkedvalue']
-            }] }, { type: undefined, decorators: [{
-                type: Attribute,
-                args: ['uncheckedvalue']
-            }] }, { type: undefined, decorators: [{
-                type: Attribute,
-                args: ['type']
-            }] }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { ngModel: [{
-            type: ViewChild,
-            args: [NgModel]
-        }], checkboxEl: [{
-            type: ViewChild,
-            args: ['checkbox', { static: true, read: ElementRef }]
-        }], onKeyDown: [{
-            type: HostListener,
-            args: ['keydown.enter', ['$event', '"ENTER"']]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckboxComponent, { className: "CheckboxComponent", filePath: "checkbox/checkbox.component.ts", lineNumber: 59 }); })();
-
-class DatasetAwareFormComponent extends BaseFormCustomComponent {
-    get modelByKey() {
-        return this._modelByKey;
-    }
-    // triggers on ngModel change. This function extracts the datavalue value.
-    set modelByKey(val) {
-        this.selectByKey(val);
-        // invoke on datavalue change.
-        this.invokeOnChange(this._modelByValue);
-    }
-    // @ts-ignore
-    get datavalue() {
-        return this._modelByValue;
-    }
-    // triggers on setting the datavalue. This function extracts the model value.
-    // @ts-ignore
-    set datavalue(val) {
-        if (this.multiple) {
-            val = extractDataAsArray(val);
-        }
-        this._modelByValue = val;
-        this.selectByValue(val);
-        // changes on the datavalue can be subscribed using listenToDatavalue
-        this.datavalue$.next(val);
-        // invoke on datavalue change.
-        this.invokeOnChange(val, undefined, true);
-    }
-    constructor(inj, config, explicitContext, groupby) {
-        super(inj, config, explicitContext);
-        this.groupby = groupby;
-        this.datasetItems = [];
-        this.acceptsArray = false; // set to true if proxyModel on widget accepts array type.
-        this.dataset$ = new Subject();
-        this.datavalue$ = new Subject();
-        this.allowempty = true;
-        this._debounceDatavalueUpdation = debounce((values) => {
-            // if no item is found in datasetItems, wait untill the dataset updates by preserving the datavalue in toBeProcessedDatavalue.
-            if (!isDefined(this._modelByKey) || (isArray(this._modelByKey) && !this._modelByKey.length)) {
-                this.toBeProcessedDatavalue = values;
-                this._modelByValue = '';
-            }
-            else if (isDefined(this.toBeProcessedDatavalue)) {
-                // obtain the first array value when multiple is set to false.
-                // set the modelByValue only when undefined.
-                if (!isDefined(this._modelByValue)) {
-                    this._modelByValue = (!this.multiple && isArray(this.toBeProcessedDatavalue)) ? this.toBeProcessedDatavalue[0] : this.toBeProcessedDatavalue;
-                }
-                this.toBeProcessedDatavalue = undefined;
-            }
-            this.initDisplayValues();
-        }, 150);
-        this.datePipe = this.inj.get(ToDatePipe);
-        this.appDefaults = this.inj.get(AppDefaults);
-        this.binddisplayexpression = this.nativeElement.getAttribute('displayexpression.bind');
-        this.binddisplayimagesrc = this.nativeElement.getAttribute('displayimagesrc.bind');
-        this.binddisplaylabel = this.nativeElement.getAttribute('displaylabel.bind');
-        this._debouncedInitDatasetItems = debounce$1(() => {
-            this.initDatasetItems();
-            $appDigest();
-        }, 150);
-        this.handleHeaderClick = noop;
-        this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", () => {
-            this._debouncedInitDatasetItems();
-        });
-    }
-    /**
-     * This function sets the _datavalue value from the model and sets the selected flag when item is found.
-     * Here model is the value obtained from ngModel.
-     * @param keys represent the model.
-     */
-    selectByKey(keys) {
-        this.resetDatasetItems();
-        if (!this.datasetItems.length) {
-            return;
-        }
-        if (this.multiple && !isArray(keys)) {
-            keys = [keys];
-        }
-        // Set the _modelByKey to the modified keys.
-        this._modelByKey = keys;
-        if (this.multiple) {
-            this._modelByValue = [];
-            keys.forEach(key => {
-                const itemByKey = find(this.datasetItems, item => {
-                    // not triple equal, as the instance type can be different.
-                    // only value comparison should be done.
-                    return toString(item.key) === toString(key);
-                });
-                if (itemByKey) {
-                    itemByKey.selected = true;
-                    this._modelByValue = [...this._modelByValue, itemByKey.value];
-                }
-            });
-        }
-        else {
-            this._modelByValue = '';
-            const itemByKey = find(this.datasetItems, item => {
-                // not triple equal, as the instance type can be different.
-                // only value comparison should be done.
-                return toString(item.key) === toString(keys);
-            });
-            if (itemByKey) {
-                itemByKey.selected = true;
-                this._modelByValue = itemByKey.value;
-            }
-        }
-        this.initDisplayValues();
-    }
-    /**
-     * This function sets the _model value from the datavalue (selectedvalues) and sets the selected flag when item is found.
-     * datavalue is the default value or a value representing the displayField (for suppose: object in case of ALLFIELDS).
-     * If acceptsArray is true, the model always accepts an array.
-     * For example, select always accepts model as array whether multiple select is true or false.
-     * @param values represent the datavalue.
-     */
-    selectByValue(values) {
-        this.resetDatasetItems();
-        // if datavalue is not defined or empty then set the model as undefined.
-        if (!isDefined(values) || values === '' || isNull(values) || (values instanceof Array && !values.length)) {
-            this._modelByKey = undefined;
-            // do not return when allowempty is set to true.
-            if (!this.allowempty || !isDefined(values)) {
-                return;
-            }
-        }
-        if (this.acceptsArray && !isArray(values)) {
-            values = this.allowempty ? [values] : extractDataAsArray(values);
-        }
-        // preserve the datavalue if datasetItems are empty.
-        if (!this.datasetItems.length && isDefined(values)) {
-            this.toBeProcessedDatavalue = values;
-            return;
-        }
-        const filterField = this.datafield === ALLFIELDS ? 'dataObject' : 'key';
-        if (isArray(values)) {
-            this._modelByKey = [];
-            values.forEach(val => {
-                const itemByValue = find(this.datasetItems, item => {
-                    if (filterField === 'dataObject') {
-                        if (this.compareby && this.compareby.length) {
-                            return isEqualWithFields(item[filterField], val, this.compareby);
-                        }
-                    }
-                    return (isObject(item.value) ? isEqual(item.value, val) : (toString(item.value)).toLowerCase() === (toString(val)).toLowerCase());
-                });
-                if (itemByValue) {
-                    itemByValue.selected = true;
-                    this._modelByKey.push(itemByValue.key);
-                }
-            });
-        }
-        else {
-            this._modelByKey = undefined;
-            const itemByValue = find(this.datasetItems, item => {
-                if (filterField === 'dataObject') {
-                    if (this.compareby && this.compareby.length) {
-                        return isEqualWithFields(item[filterField], values, this.compareby);
-                    }
-                }
-                return (isObject(item.value) ? isEqual(item.value, values) : (toString(item.value)).toLowerCase() === (toString(values)).toLowerCase());
-            });
-            if (itemByValue) {
-                itemByValue.selected = true;
-                this._modelByKey = itemByValue.key;
-            }
-        }
-        // delaying the datavalue update as the widgets in liveform are having datavalue as undefined and not the default provided value
-        // because datavalue is updated later when new dataset is available.
-        this._debounceDatavalueUpdation(values);
-    }
-    // Updates the displayValue property.
-    initDisplayValues() {
-        const displayValues = [];
-        this.datasetItems.forEach(item => {
-            if (item.selected) {
-                displayValues.push(item.label);
-            }
-        });
-        this.displayValue = this.multiple ? displayValues : displayValues[0] || '';
-    }
-    // This function parses the dataset and extracts the displayOptions from parsed dataset.
-    initDatasetItems() {
-        if (!this.dataset || isEmpty(this.dataset)) {
-            this.datasetItems = [];
-            // notify the dataset listeners
-            this.dataset$.next(this.datasetItems);
-            return;
-        }
-        // convert any dataset to the object format.
-        const orderedDataset = getOrderedDataset(convertDataToObject(this.dataset), this.orderby);
-        if (this.usekeys) {
-            this.datasetItems = transformDataWithKeys(orderedDataset);
-        }
-        else {
-            const displayOptions = transformFormData(this.viewParent, orderedDataset, this.datafield, {
-                displayField: this.displayfield || this.displaylabel,
-                displayExpr: this.displayexpression,
-                bindDisplayExpr: this.binddisplayexpression || this.binddisplaylabel,
-                bindDisplayImgSrc: this.binddisplayimagesrc,
-                displayImgSrc: this.displayimagesrc
-            });
-            // get the unique objects out of the extracted data. Notify change in datasetItems using [...datasetItems] notation
-            this.datasetItems = [...getUniqObjsByDataField(displayOptions, this.datafield, this.displayfield || this.displaylabel, toBoolean(this.allowempty))];
-        }
-        this.postDatasetItemsInit();
-    }
-    // Once the datasetItems are ready, set the proxyModel by using datavalue.
-    postDatasetItemsInit() {
-        if (this.datasetItems.length && !this._defaultQueryInvoked) {
-            // use the latest of toBeProcessedDatavalue, datavalue
-            const _datavalue = isEmpty(this.toBeProcessedDatavalue) ? this.datavalue : this.toBeProcessedDatavalue;
-            this.selectByValue(_datavalue);
-        }
-        // notify the dataset listeners
-        this.dataset$.next(this.datasetItems);
-    }
-    // Reset the selected flag on datasetItems to false.
-    resetDatasetItems() {
-        this.datasetItems.forEach(item => item.selected = false);
-    }
-    setTemplate(partialName) {
-        this.content = partialName;
-        if (this.viewParent && this.viewParent.prefabName) {
-            this['prefabName'] = this.viewParent.prefabName;
-        }
-    }
-    getGroupedData() {
-        return this.datasetItems.length ? groupData(this, convertDataToObject(this.datasetItems), this.groupby, this.match, this.orderby, this.dateformat, this.datePipe, 'dataObject', this.appDefaults) : [];
-    }
-    datasetSubscription() {
-        const datasetSubscription = this.dataset$.subscribe(() => {
-            this.groupedData = this.getGroupedData();
-        });
-        this.registerDestroyListener(() => datasetSubscription.unsubscribe());
-    }
-    setGroupData() {
-        this.datasetSubscription();
-        // If groupby is set, get the groupedData from the datasetItems.
-        this.groupedData = this.getGroupedData();
-    }
-    onPropertyChange(key, nv, ov) {
-        super.onPropertyChange(key, nv, ov);
-        switch (key) {
-            case 'dataset':
-            case 'datafield':
-            case 'displayfield':
-            case 'displaylabel':
-            case 'displayexpression':
-            case 'orderby':
-            case 'usekeys':
-                this._debouncedInitDatasetItems();
-                break;
-            case 'required':
-            case 'datavalue':
-                this._onChange(this.datavalue);
-                break;
-            case 'groupby':
-            case 'match':
-                if (this.widgetType !== 'wm-search' && this.widgetType !== 'wm-chips') {
-                    this.setGroupData();
-                }
-                break;
-        }
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.groupby && (this.widgetType !== 'wm-search' && this.widgetType !== 'wm-chips')) {
-            this.setGroupData();
-        }
-        // adding the handler for header click and toggle headers.
-        if (this.groupby && this.collapsible) {
-            this.handleHeaderClick = handleHeaderClick;
-            this.toggleAllHeaders = toggleAllHeaders.bind(undefined, this);
-        }
-    }
-    ngOnDestroy() {
-        if (this.cancelLocaleChangeSubscription) {
-            this.cancelLocaleChangeSubscription();
-        }
-    }
-    static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject('EXPLICIT_CONTEXT', 8), i0.ɵɵinjectAttribute('groupby')); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DatasetAwareFormComponent, factory: DatasetAwareFormComponent.ɵfac }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatasetAwareFormComponent, [{
-        type: Injectable
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: [WidgetConfig]
-            }] }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }, { type: undefined, decorators: [{
-                type: Attribute,
-                args: ['groupby']
-            }] }], null); })();
-
-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$b = () => {
-    register('wm-checkboxset', checkboxsetProps);
-    registerFormWidget(FormWidgetType.CHECKBOXSET, new Map(checkboxsetProps));
-};
-
-const _c0$a = ["wmCheckboxset", ""];
-const _c1$9 = (a0, a1) => ["checkbox", "app-checkbox", a0, a1];
-const _c2$3 = a0 => ({ "disabled": a0 });
-const _c3$1 = a0 => ({ "collapsible-content": a0 });
-const _c4$1 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
-function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 8);
-    i0.ɵɵelement(1, "input", 9)(2, "span", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    const item_r2 = ctx_r3.$implicit;
-    const i_r5 = ctx_r3.index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-    i0.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("textContent", item_r2.label);
-} }
-function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 11);
-    i0.ɵɵelement(1, "input", 9)(2, "span", 12);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    const item_r2 = ctx_r3.$implicit;
-    const i_r5 = ctx_r3.index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-    i0.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
-} }
-function CheckboxsetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 5);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
-    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 14, "label", 6)(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 12, "label", 7);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", item_r2.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c1$9, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.content);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.content);
-} }
-function CheckboxsetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
-} }
-function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 13);
-} }
-function CheckboxsetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 23);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
-} }
-function CheckboxsetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 24);
-} if (rf & 2) {
-    const groupObj_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("textContent", groupObj_r7.data.length);
-} }
-function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 8);
-    i0.ɵɵelement(1, "input", 26)(2, "span", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    const item_r9 = ctx_r9.$implicit;
-    const i_r11 = ctx_r9.index;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-    i0.ɵɵattribute("data-attr-index", i_r11);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("textContent", item_r9.label);
-} }
-function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 11);
-    i0.ɵɵelement(1, "input", 26)(2, "span", 27);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    const item_r9 = ctx_r9.$implicit;
-    const i_r11 = ctx_r9.index;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-    i0.ɵɵattribute("data-attr-index", i_r11);
-} }
-function CheckboxsetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 25);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r9)); });
-    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6)(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r9 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", item_r9.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4$1, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.content);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.content);
-} }
-function CheckboxsetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 15)(1, "ul", 16)(2, "li", 17);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
-    i0.ɵɵelementStart(3, "h4", 18);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementStart(5, "div", 19);
-    i0.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 20)(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(8, CheckboxsetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 22);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const groupObj_r7 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(6, _c3$1, ctx_r2.collapsible));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.showcount);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", groupObj_r7.data);
-} }
-function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 8, "li", 14);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
-} }
-const DEFAULT_CLS$3 = 'app-checkboxset list-group inline';
-const WIDGET_CONFIG$b = { widgetType: 'wm-checkboxset', hostClass: DEFAULT_CLS$3 };
-class CheckboxsetComponent extends DatasetAwareFormComponent {
-    static { this.initializeProps = registerProps$b(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$b, explicitContext);
-        this.layout = '';
-        styler(this.nativeElement, this);
-        this.multiple = 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.modelByKey = keys;
-        this.invokeOnTouched();
-        // invoke on datavalue change.
-        this.invokeOnChange(this.datavalue, $event || {}, true);
-    }
-    // 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 = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxsetComponent, selectors: [["", "wmCheckboxset", ""]], hostBindings: function CheckboxsetComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("keydown.enter", function CheckboxsetComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
-        } }, exportAs: ["wmCheckboxset"], features: [i0.ɵɵProvidersFeature([
-                provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(CheckboxsetComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "click", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["type", "checkbox", "aria-label", "checkbox group", 3, "name", "tabindex", "disabled", "value", "checked"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
-            i0.ɵɵelement(1, "input", 2);
-            i0.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 3)(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-        } if (rf & 2) {
-            const groupedListTemplate_r12 = i0.ɵɵreference(4);
-            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxsetComponent, [{
-        type: Component,
-        args: [{ selector: '[wmCheckboxset]', exportAs: 'wmCheckboxset', providers: [
-                    provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(CheckboxsetComponent)
-                ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems; let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\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        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\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    </li>\n</ng-template>\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\" role=\"presentation\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\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                <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\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                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\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            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { onKeyDown: [{
-            type: HostListener,
-            args: ['keydown.enter', ['$event', '"ENTER"']]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckboxsetComponent, { className: "CheckboxsetComponent", filePath: "checkboxset/checkboxset.component.ts", lineNumber: 27 }); })();
-
-const registerProps$a = () => {
-    register('wm-form-group', new Map([
-        ['captionposition', PROP_STRING],
-        ['name', PROP_STRING],
-        ['required', PROP_BOOLEAN],
-        ['show', { value: true, ...PROP_BOOLEAN }]
-    ]));
-};
-
-const DEFAULT_CLS$2 = 'form-group app-composite-widget clearfix';
-const WIDGET_CONFIG$a = {
-    widgetType: 'wm-form-group',
-    hostClass: DEFAULT_CLS$2
-};
-const CAPTION_POSITION = {
-    left: 'caption-left',
-    right: 'caption-right',
-    top: 'caption-top',
-    floating: 'caption-floating'
-};
-class CompositeDirective extends StylableComponent {
-    static { this.initializeProps = registerProps$a(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$a, explicitContext);
-        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
-    }
-    /**
-     * this is onPropertyChange handler for the form-group component
-     * @param key
-     * @param nv
-     * @param ov
-     */
-    onPropertyChange(key, nv, ov) {
-        if (key === 'captionposition') {
-            switchClass(this.nativeElement, CAPTION_POSITION[nv], CAPTION_POSITION[ov]);
-        }
-        else if (key === 'required') {
-            this.required = nv;
-            this.assignRequiredToSubComponents();
-        }
-        else {
-            super.onPropertyChange(key, nv, ov);
-        }
-    }
-    /**
-     * this method assigns the required on the component/directive based on the required attribute of the form-group
-     */
-    assignRequiredToSubComponents() {
-        if (this.required && this.componentRefs) {
-            setTimeout(() => {
-                this.componentRefs.forEach(componentRef => componentRef.widget.required = true);
-            }, 50);
-        }
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        addForIdAttributes(this.nativeElement);
-        this.assignRequiredToSubComponents();
-    }
-    static { this.ɵfac = function CompositeDirective_Factory(t) { return new (t || CompositeDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CompositeDirective, selectors: [["div", "wmComposite", ""]], contentQueries: function CompositeDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, WidgetRef, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.componentRefs = _t);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAsWidgetRef(CompositeDirective)
-            ]), i0.ɵɵInheritDefinitionFeature] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompositeDirective, [{
-        type: Directive,
-        args: [{
-                selector: 'div[wmComposite]',
-                providers: [
-                    provideAsWidgetRef(CompositeDirective)
-                ]
-            }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { componentRefs: [{
-            type: ContentChildren,
-            args: [WidgetRef, { descendants: true }]
-        }] }); })();
-
-const numberProps = new Map([
-    ['autofocus', PROP_BOOLEAN],
-    ['class', PROP_STRING],
-    ['datavaluesource', PROP_ANY],
-    ['datavalue', PROP_STRING],
-    ['disabled', PROP_BOOLEAN],
-    ['hint', PROP_STRING],
-    ['localefilter', PROP_STRING],
-    ['minvalue', PROP_NUMBER],
-    ['maxvalue', PROP_NUMBER],
-    ['name', PROP_STRING],
-    ['numberfilter', PROP_STRING],
-    ['placeholder', { value: 'Enter number', ...PROP_STRING }],
-    ['readonly', PROP_BOOLEAN],
-    ['regexp', PROP_STRING],
-    ['required', PROP_BOOLEAN],
-    ['shortcutkey', PROP_STRING],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['step', { value: 1, ...PROP_NUMBER }],
-    ['tabindex', { value: 0, ...PROP_NUMBER }],
-    ['trailingzero', { value: false, ...PROP_BOOLEAN }],
-    ['updateon', PROP_STRING],
-    ['inputmode', { value: 'natural', ...PROP_STRING }],
-    ['conditionalclass', PROP_ANY],
-    ['conditionalstyle', PROP_ANY]
-]);
-const registerProps$9 = () => {
-    register('wm-number', numberProps);
-    registerFormWidget(FormWidgetType.NUMBER, new Map(numberProps));
-};
-
-class BaseInput extends BaseFormCustomComponent {
-    onPropertyChange(key, nv, ov) {
-        // set the class on the input element
-        if (key === 'tabindex') {
-            return;
-        }
-        if (key === 'required') {
-            /* WMS-18269 | Update Angular about the required attr value change */
-            this._onChange(this.datavalue);
-        }
-        if (key === 'class') {
-            if (this.inputEl.nativeElement) {
-                switchClass(this.inputEl.nativeElement, nv, ov);
-            }
-        }
-        else if (key === 'datavalue') {
-            // update the oldDataValue when the datavalue is modified programmatically
-            this.updatePrevDatavalue(nv);
-            this._onChange(this.datavalue);
-        }
-        else {
-            super.onPropertyChange(key, nv, ov);
-        }
-    }
-    // invoke the change callback
-    handleChange(newValue) {
-        if (this.autotrim && this.datavalue && isString(this.datavalue)) {
-            this.datavalue = this.datavalue.trim();
-        }
-        this.invokeOnChange(this.datavalue, { type: 'change' }, this.ngModel.valid);
-    }
-    // Change event is registered from the template, Prevent the framework from registering one more event
-    handleEvent(node, eventName, eventCallback, locals) {
-        if (eventName !== 'change' && eventName !== 'blur') {
-            super.handleEvent(this.inputEl.nativeElement, eventName, eventCallback, locals);
-        }
-    }
-    // invoke the blur callback
-    handleBlur($event) {
-        this.invokeOnTouched($event);
-    }
-    // Update the model on enter key press
-    flushViewChanges(val) {
-        // when val contains masked value, update the model with unmasked value
-        const unMaskedVal = get(this.imask, 'maskRef.unmaskedValue');
-        val = unMaskedVal ? unMaskedVal : val;
-        this.ngModel.update.next(val);
-        $appDigest();
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        // add the class on the input element
-        if (this.class) {
-            addClass(this.inputEl.nativeElement, this.class);
-        }
-        styler(this.inputEl.nativeElement, this);
-    }
-    constructor(inj, config, explicitContext) {
-        super(inj, config, explicitContext);
-        // possible values for ngModelOptions are 'blur' and 'change'
-        // default is 'blur'
-        this.ngModelOptions = {
-            updateOn: ''
-        };
-        let updateOn = this.nativeElement.getAttribute('updateon') || 'blur';
-        updateOn = updateOn === 'default' ? 'change' : updateOn;
-        this.ngModelOptions.updateOn = updateOn;
-    }
-    static { this.ɵfac = function BaseInput_Factory(t) { return new (t || BaseInput)(i0.ɵɵinject(i0.Injector), i0.ɵɵinject(WidgetConfig), i0.ɵɵinject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BaseInput, factory: BaseInput.ɵfac }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseInput, [{
-        type: Injectable
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: [WidgetConfig]
-            }] }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], null); })();
-
-let NumberLocale = class NumberLocale extends BaseInput {
-    constructor(inj, config, i18nService, trailingZeroDecimalPipe, explicitContext) {
-        super(inj, config, explicitContext);
-        this.i18nService = i18nService;
-        this.trailingZeroDecimalPipe = trailingZeroDecimalPipe;
-        this.isDefaultQuery = true;
-        this.decimalValue = '';
-        this.selectedLocale = i18nService.getSelectedLocale();
-        this.DECIMAL = getLocaleNumberSymbol(this.localefilter || this.selectedLocale, NumberSymbol.Decimal);
-        this.GROUP = getLocaleNumberSymbol(this.localefilter || this.selectedLocale, NumberSymbol.Group);
-        this.numberfilter = '1.0-16';
-        this.resetValidations();
-    }
-    // Setter for the datavalue.
-    // @ts-ignore
-    set datavalue(value) {
-        this.lastValIsDecimal = false;
-        // set text value to null if data value is empty.
-        // @ts-ignore
-        if (includes([null, undefined, ''], value)) {
-            const input = this.inputEl.nativeElement;
-            const prevDataValue = this.prevDatavalue;
-            this.displayValue = input.value = this.proxyModel = null;
-            this.resetValidations();
-            if (prevDataValue && !this.isDefaultQuery) {
-                this.handleChange(value);
-                this._onChange();
-            }
-            return;
-        }
-        // if the widget has default value and if we change the locale, the value should be in selected locale format.
-        if (this.isDefaultQuery) {
-            const isLocalizedNumber = isString(value) && includes(value, this.DECIMAL);
-            const parts = isLocalizedNumber ? value.split(this.DECIMAL) : isString(value) && value.split('.');
-            this.decimalValue = parts[1] || '';
-            value = isLocalizedNumber ? value : this.transformNumber(value);
-        }
-        const numberReg = /\d/;
-        const strVal = value.toString();
-        let model;
-        // When the input value only contains seperator, do not convert the sepertaor into 0
-        if (numberReg.test(strVal)) {
-            model = this.parseNumber(strVal);
-        }
-        else {
-            model = NaN;
-        }
-        // On keypress, if the user types a decimal and is still active on the input do not throw error.
-        if (isNaN(model) && strVal[strVal.length - 1] === this.DECIMAL && this.ngModelOptions.updateOn === 'change' && this.$element.find('input:focus').length) {
-            this.lastValIsDecimal = true;
-        }
-        // get a valid number form the text.
-        // if the number is valid or if number is not in range update the model value.
-        if (!this.lastValIsDecimal && this.isValid(model)) {
-            this.proxyModel = model;
-            // update the display value in the text box.
-            this.updateDisplayText();
-            // Do not trigger onchange event for default value
-            if (!this.isDefaultQuery) {
-                this.handleChange(model);
-            }
-        }
-        else {
-            this.displayValue = value.toString();
-            this.proxyModel = null;
-            this.handleChange(null);
-        }
-    }
-    // returns the actual model value of the widget.
-    get datavalue() {
-        return this.proxyModel;
-    }
-    // resets all the flags related to the widget's validation.
-    resetValidations() {
-        this.isInvalidNumber = false;
-        this.numberNotInRange = false;
-    }
-    /**
-     * Adds validations for the number before updating the widget model. like validating min and max value for the widget.
-     * @param {number} val number to be validated
-     * @returns {number}
-     */
-    isValid(val) {
-        // id number is infinite then consider it as invalid value
-        if (isNaN(val) || !isFinite(val) || (!Number.isInteger(this.step) &&
-            this.countDecimals(val) > this.countDecimals(this.step))) {
-            this.isInvalidNumber = true;
-            return false;
-        }
-        if (val !== this.getValueInRange(val)) {
-            this.numberNotInRange = true;
-            return true;
-        }
-        this.resetValidations();
-        return true;
-    }
-    /**
-     * returns a valid number by validating the minimum and maximum values.
-     * @param {number} value
-     * @returns {number}
-     */
-    getValueInRange(value) {
-        if (!isNaN(this.minvalue) && value < this.minvalue) {
-            this.validateType = 'minvalue';
-            return this.minvalue;
-        }
-        if (!isNaN(this.maxvalue) && value > this.maxvalue) {
-            this.validateType = 'maxvalue';
-            return this.maxvalue;
-        }
-        return value;
-    }
-    /**
-     * convert number to localized number using angular decimal pipe. eg 10,00,000 or 1,000,000
-     * @param number
-     * @returns {string}
-     */
-    transformNumber(number, numberfilter) {
-        const filterVal = numberfilter ? numberfilter : this.numberfilter;
-        return this.trailingZeroDecimalPipe.transform(number, this.selectedLocale, filterVal, this.localefilter, this.trailingzero, this.decimalValue, !!numberfilter, this.i18nService?.getwidgetLocale());
-    }
-    /**
-     * resets the cursor position in the text box.
-     * @param {number} value cursor position index form left to right.
-     */
-    resetCursorPosition(value) {
-        const input = this.inputEl.nativeElement;
-        // position of the cursor should be given form right to left.
-        let position = input.value.length - value;
-        position = position < 0 ? 0 : position;
-        // set the cursor position in the text box.
-        input.setSelectionRange(position, position);
-    }
-    /**
-     * Method parses the Localized number(string) to a valid number.
-     * if the string dose not result to a valid number then returns NaN.
-     * @param {string} val Localized number.
-     * @returns {number}
-     */
-    parseNumber(val) {
-        // WMS-22179: split number based on the decimal separator in the val
-        // splits string into two parts. decimal and number.
-        const parts = val.split(this.inputmode === INPUTMODE.FINANCIAL ? (val.indexOf(this.DECIMAL) > -1 ? this.DECIMAL : '.') : this.DECIMAL);
-        if (!parts.length) {
-            return null;
-        }
-        if (parts.length > 2) {
-            return NaN;
-        }
-        // If number have decimal point and not have a decimal value then return.
-        if (parts[1] === '') {
-            return NaN;
-        }
-        // replaces all group separators form the number.
-        const number = Number(parts[0].split(this.GROUP).join(''));
-        const decimal = Number(`0.${parts[1] || 0}`);
-        if (Number.isNaN(number) || Number.isNaN(decimal)) {
-            return NaN;
-        }
-        const sum = parts.length > 1 ? parseFloat((number + decimal).toFixed(parts[1].length)) : number + decimal;
-        // if the number is negative then calculate the number as number - decimal
-        // Ex: number = -123 and decimal = 0.45 then number - decimal = -123-045 = -123.45
-        // If entered number is -0.1 to -0.9 then the number is -0 and decimal is 0.1 to 0.9. Now calaculate the number as number-decimal
-        // Ex: number = -0 and decimal = 0.1 then number-decimal = -0-0.1 = -0.1
-        if (number === 0) {
-            return Object.is(0, number) ? sum : number - decimal;
-        }
-        return number > 0 ? sum : number - decimal;
-    }
-    // updates the widgets text value.
-    updateDisplayText() {
-        const input = this.inputEl.nativeElement;
-        const position = input.selectionStart;
-        const preValue = input.value;
-        if (!this.isDefaultQuery) {
-            const parts = preValue.split(this.DECIMAL);
-            this.decimalValue = parts[1] || '';
-        }
-        const stepVal = this.stepLength();
-        if (this.inputmode === INPUTMODE.FINANCIAL && stepVal) {
-            this.displayValue = input.value = this.transformNumber(this.proxyModel, `1.${stepVal}-${stepVal}`);
-            this.decimalValue = this.decimalValue.replace(/\D/g, '');
-        }
-        else {
-            this.displayValue = input.value = this.transformNumber(this.proxyModel);
-        }
-        // in safari browser, setSelectionRange will focus the input by default, which may invoke the focus event on widget.
-        // Hence preventing the setSelectionRange when default value is set i.e. widget is not focused.
-        if (this.updateon === 'default' && !this.isDefaultQuery) {
-            this.resetCursorPosition(preValue.length - position);
-        }
-    }
-    // This function returns the step length set in the studio
-    stepLength() {
-        const stepLen = this.step.toString().split('.');
-        if (stepLen.length === 1) {
-            return;
-        }
-        else {
-            return stepLen[1].length;
-        }
-    }
-    // This function checks if the currency widget has input mode as natural and trailing zero is defined or not
-    isNaturalCurrency() {
-        return this.inputmode === INPUTMODE.NATURAL && this.widgetType === 'wm-currency' && !!this.trailingzero;
-    }
-    /**
-  * @param value contains the value entered in the input box
-  * This function modifies the user input value, into financial mode.
-  * Number starts from highest precesion decimal, on typing number shifts to the left
-  */
-    onInputChange(value) {
-        const stepVal = this.stepLength();
-        // WMS-22355, Trigger change cb if value exists or value is empty but datavalue exists (when value is selected and deleted).
-        if (isDefined(value) && (value !== '' || this.datavalue)) {
-            this.handleChange(value);
-        }
-        else {
-            return;
-        }
-        if (!stepVal || this.inputmode !== INPUTMODE.FINANCIAL) {
-            return;
-        }
-        let financialVal;
-        /**
-         * If the value is entered by the user, format the input
-         * If the value is provided as default value, skip formatting
-         */
-        if (this.isDefaultQuery) {
-            financialVal = parseFloat(value);
-        }
-        else {
-            const valInWholeNum = parseInt(value.toString().replace(/\D/g, ''));
-            financialVal = valInWholeNum * this.step;
-        }
-        if (!isNaN(financialVal)) {
-            // When update on key is set keypress, update the datavalue else update only the display value
-            if (this.ngModelOptions.updateOn === 'change') {
-                this.datavalue = parseFloat(financialVal.toFixed(stepVal));
-                this.handleChange(this.datavalue);
-            }
-            else {
-                this.displayValue = financialVal.toFixed(stepVal);
-            }
-        }
-        else if (this.ngModelOptions.updateOn !== 'blur') {
-            this.datavalue = undefined;
-            this.handleChange(null);
-        }
-    }
-    // Input mode is financial and trailing zero is set to false, On focus set display val to fixed point notation and On blur strip trailing zeros
-    // In currency, inputmode is natural and trailing zero and step are defined, on blur display val to fixed point notation and on focus strip the zeros
-    checkForTrailingZeros($event) {
-        const stepVal = this.stepLength();
-        const financialMode = !this.trailingzero && this.inputmode === INPUTMODE.FINANCIAL;
-        // If the user's last input is a decimal and not active on input field, throw error
-        if (this.lastValIsDecimal) {
-            this.onModelChange(this.displayValue);
-        }
-        if (!financialMode && !this.isNaturalCurrency()) {
-            return;
-        }
-        if (stepVal && this.datavalue) {
-            let numberfilter;
-            if ((financialMode && $event.type === 'focus') || (this.isNaturalCurrency() && $event.type === 'blur')) {
-                numberfilter = `1.${stepVal}-${stepVal}`;
-            }
-            this.displayValue = this.transformNumber(this.datavalue, numberfilter);
-        }
-    }
-    /**
-     * returns the number of decimal places a number have.
-     * @param value: number
-     * @returns {number}
-     */
-    countDecimals(value) {
-        if ((value % 1) !== 0) {
-            const decimalValue = value.toString().split('.')[1];
-            return decimalValue && decimalValue.length;
-        }
-        return 0;
-    }
-    /**
-     * handles the arrow press event. Increases or decreases the number. triggered fom the template
-     * @param $event keyboard event.
-     * @param key identifier to increase or decrease the number.
-     */
-    onArrowPress($event, key) {
-        $event.preventDefault();
-        if (this.readonly || this.step === 0) {
-            return;
-        }
-        const targetVal = $event.target.value.replace(/,/g, '');
-        // proxyModel to be updated from $event.target.value if present to support arrow keys when input changes else pick up from this.proxymodel
-        let proxyModel;
-        if (targetVal && !isNaN(parseFloat(targetVal))) {
-            proxyModel = parseFloat(targetVal);
-        }
-        else {
-            proxyModel = this.proxyModel;
-        }
-        let value;
-        // if the number is not in range and when arrow buttons are pressed need to get appropriate number value.
-        if (this.numberNotInRange) {
-            const inputValue = this.parseNumber(this.inputEl.nativeElement.value);
-            // take the textbox value as current model if the value is valid.
-            if (!isNaN(inputValue)) {
-                value = this.getValueInRange(inputValue);
-                proxyModel = inputValue;
-                this.resetValidations();
-            }
-        }
-        else {
-            if (isUndefined(proxyModel) || isNull(proxyModel)) {
-                proxyModel = value = this.getValueInRange((this.minvalue || 0));
-                this.resetValidations();
-            }
-            else {
-                value = this.getValueInRange(proxyModel + (key === 'UP' ? this.step : -this.step));
-            }
-        }
-        if ((key === 'UP' && proxyModel <= value) || (key === 'DOWN' && proxyModel >= value)) {
-            const decimalRoundValue = Math.max(this.countDecimals(proxyModel), this.countDecimals(this.step));
-            // update the modelProxy.
-            this.proxyModel = round(value, decimalRoundValue);
-            this.updateDisplayText();
-            this.handleChange(this.proxyModel);
-        }
-    }
-    /**
-     * method is called from the from widget. to check whether the value entered is valid or not.
-     * @returns {object}
-     */
-    validate(c) {
-        if (this.isInvalidNumber) {
-            this.validateType = '';
-            return {
-                invalidNumber: {
-                    valid: false
-                },
-            };
-        }
-        if (this.numberNotInRange) {
-            return {
-                numberNotInRange: {
-                    valid: false
-                },
-            };
-        }
-        this.validateType = '';
-        /* WMS-18269 | Extending the existing validation for 'required' */
-        if (this['show'] && this['required']) {
-            return (!!c.value || c.value === 0) ? null : { required: true };
-        }
-        return null;
-    }
-    validateInputEntry($event) {
-        this.isDefaultQuery = false;
-        // allow actions if control key is pressed or if backspace is pressed. (for Mozilla).
-        if ($event.ctrlKey || includes(['Backspace', 'ArrowRight', 'ArrowLeft', 'Tab', 'Enter', 'Delete'], $event.key)) {
-            return;
-        }
-        const validity = new RegExp(`^[\\d\\s-,.e+${this.GROUP}${this.DECIMAL}]$`, 'i');
-        const inputValue = $event.target.value;
-        // when input mode is financial, do not restrict user on entering the value when step value limit is reached.
-        const skipStepValidation = this.inputmode === INPUTMODE.FINANCIAL;
-        // Validates if user eneters more than 16 digits
-        if (inputValue) {
-            const parsedVal = parseInt(inputValue.toString().replace(/\D/g, ''));
-            if (parsedVal.toString().length > 15) {
-                // WMS-22321: If the number is greater than MAX_SAFE_INTEGER (more than 15 numbers).
-                // user selects a range of digits and presses a key.
-                // Do not throw validation of exceeded number as selected range value will be deleted.
-                const selectedVal = window.getSelection();
-                if (selectedVal && selectedVal.toString() && selectedVal.focusNode === this.nativeElement) {
-                    return true;
-                }
-                return false;
-            }
-        }
-        // validates entering of decimal values only when user provides decimal limit(i.e step contains decimal values).
-        // Restrict user from entering only if the decimal limit is reached and the new digit is entered in decimal place
-        if (!skipStepValidation && inputValue && this.countDecimals(this.step) && (this.countDecimals(inputValue) >= this.countDecimals(this.step)) && $event.target.selectionStart >= inputValue.length - 1) {
-            return false;
-        }
-        // validates if user entered an invalid character.
-        if (!validity.test($event.key)) {
-            return false;
-        }
-        // comma cannot be entered consecutively
-        if (includes(inputValue, ',') && inputValue[inputValue.length - 1] === ',' && $event.key === ',') {
-            return false;
-        }
-        // a decimal value can be entered only once in the input.
-        if (includes(inputValue, this.DECIMAL) && $event.key === this.DECIMAL) {
-            return false;
-        }
-        // 'e' can be entered only once in the input.
-        if (intersection(toArray(inputValue), ['e', 'E']).length && includes('eE', $event.key)) {
-            return false;
-        }
-        if ((includes(inputValue, '+') || includes(inputValue, '-')) && ($event.key === '+' || $event.key === '-')) {
-            return false;
-        }
-        // Do not allow user to enter only space without any input value
-        if (!inputValue && $event.code === 'Space') {
-            return false;
-        }
-    }
-    onBackspace($event) {
-        this.isDefaultQuery = false;
-    }
-    onEnter($event) {
-        this.datavalue = $event.target.value;
-    }
-    onModelChange($event) {
-        if (this.inputmode === INPUTMODE.NATURAL || (this.inputmode === INPUTMODE.FINANCIAL && this.ngModelOptions.updateOn === 'blur')) {
-            this.datavalue = $event;
-        }
-    }
-    onPropertyChange(key, nv, ov) {
-        if (key === 'minvalue' || key === 'maxvalue') {
-            this.isValid(nv);
-        }
-        else if (key === 'datavalue' && !ov) {
-            if (this.isNaturalCurrency()) {
-                this.checkForTrailingZeros({ type: 'blur' });
-            }
-            else {
-                this.onInputChange(nv);
-            }
-        }
-        else {
-            super.onPropertyChange(key, nv, ov);
-        }
-    }
-};
-NumberLocale = __decorate([
-    __param(4, Inject('EXPLICIT_CONTEXT')),
-    __param(4, Optional()),
-    __metadata("design:paramtypes", [Injector, Object, AbstractI18nService,
-        TrailingZeroDecimalPipe, Object])
-], NumberLocale);
-
-const _c0$9 = ["input"];
-const _c1$8 = ["wmNumber", ""];
-const WIDGET_CONFIG$9 = {
-    widgetType: 'wm-number',
-    hostClass: 'app-input-wrapper'
-};
-class NumberComponent extends NumberLocale {
-    static { this.initializeProps = registerProps$9(); }
-    constructor(inj, i18nService, trailingZeroDecimalPipe, explicitContext) {
-        super(inj, WIDGET_CONFIG$9, i18nService, trailingZeroDecimalPipe, explicitContext);
-    }
-    static { this.ɵfac = function NumberComponent_Factory(t) { return new (t || NumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.AbstractI18nService), i0.ɵɵdirectiveInject(i2.TrailingZeroDecimalPipe), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NumberComponent, selectors: [["", "wmNumber", ""]], viewQuery: function NumberComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$9, 7);
-            i0.ɵɵviewQuery(NgModel, 7);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(NumberComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(NumberComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["input", ""], ["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown", "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required"]], template: function NumberComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "input", 1, 0);
-            i0.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModelChange($event)); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("input", function NumberComponent_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputChange($event.target.value)); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.validateInputEntry($event)); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBackspace($event)); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEnter($event)); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event, "UP")); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event, "DOWN")); });
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngModel", ctx.displayValue)("readonly", ctx.readonly)("disabled", ctx.disabled)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("ngModelOptions", ctx.ngModelOptions)("required", ctx.required);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-        } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.PatternValidator, i2$1.NgModel], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberComponent, [{
-        type: Component,
-        args: [{ selector: '[wmNumber]', providers: [
-                    provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(NumberComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(NumberComponent)
-                ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       role=\"textbox\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
-    }], () => [{ type: i0.Injector }, { type: i1$1.AbstractI18nService }, { type: i2.TrailingZeroDecimalPipe }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { inputEl: [{
-            type: ViewChild,
-            args: ['input', { static: true }]
-        }], ngModel: [{
-            type: ViewChild,
-            args: [NgModel, { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NumberComponent, { className: "NumberComponent", filePath: "number/number.component.ts", lineNumber: 24 }); })();
-
-const radiosetProps = 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_ANY],
-    ['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$8 = () => {
-    register('wm-radioset', radiosetProps);
-    registerFormWidget(FormWidgetType.RADIOSET, new Map(radiosetProps));
-};
-
-const _c0$8 = ["wmRadioset", ""];
-const _c1$7 = (a0, a1) => ["radio", "app-radio", a0, a1];
-const _c2$2 = a0 => ({ "disabled": a0 });
-const _c3 = a0 => ({ "collapsible-content": a0 });
-const _c4 = (a0, a1) => ["radio", "app-radio", "group-list-item", a0, a1];
-function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 7);
-    i0.ɵɵelement(1, "input", 8)(2, "span", 9);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    const item_r2 = ctx_r3.$implicit;
-    const i_r5 = ctx_r3.index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-    i0.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("textContent", item_r2.label);
-} }
-function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 7);
-    i0.ɵɵelement(1, "input", 8)(2, "span", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    const item_r2 = ctx_r3.$implicit;
-    const i_r5 = ctx_r3.index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-    i0.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
-} }
-function RadiosetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 5);
-    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r2.key)); });
-    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6)(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 11, "label", 6);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", item_r2.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c1$7, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.content);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.content);
-} }
-function RadiosetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, RadiosetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
-} }
-function RadiosetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 11);
-} }
-function RadiosetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 21);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
-} }
-function RadiosetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 22);
-} if (rf & 2) {
-    const groupObj_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("textContent", groupObj_r7.data.length);
-} }
-function RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 7);
-    i0.ɵɵelement(1, "input", 8)(2, "span", 9);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    const item_r9 = ctx_r9.$implicit;
-    const i_r11 = ctx_r9.index;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-    i0.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("textContent", item_r9.label);
-} }
-function RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 7);
-    i0.ɵɵelement(1, "input", 8)(2, "span", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    const item_r9 = ctx_r9.$implicit;
-    const i_r11 = ctx_r9.index;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-    i0.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
-} }
-function RadiosetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 23);
-    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r9)); });
-    i0.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 11, "label", 6)(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 6);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r9 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", item_r9.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.content);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.content);
-} }
-function RadiosetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 13)(1, "ul", 14)(2, "li", 15);
-    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
-    i0.ɵɵelementStart(3, "h4", 16);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementStart(5, "div", 17);
-    i0.ɵɵtemplate(6, RadiosetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 18)(7, RadiosetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 19);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(8, RadiosetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 20);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const groupObj_r7 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(6, _c3, ctx_r2.collapsible));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.showcount);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", groupObj_r7.data);
-} }
-function RadiosetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 8, "li", 12);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
-} }
-const DEFAULT_CLS$1 = 'app-radioset list-group inline';
-const WIDGET_CONFIG$8 = { widgetType: 'wm-radioset', hostClass: DEFAULT_CLS$1 };
-class RadiosetComponent extends DatasetAwareFormComponent {
-    static { this.initializeProps = registerProps$8(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$8, explicitContext);
-        this.layout = '';
-        styler(this.nativeElement, this);
-        this.multiple = false;
-    }
-    /**
-     * On click of the option, update the datavalue
-     */
-    onRadioLabelClick($event, key) {
-        if (!$($event.target).is('input')) {
-            return;
-        }
-        this.modelByKey = key;
-        this.invokeOnTouched();
-        // invoke on datavalue change.
-        this.invokeOnChange(this.datavalue, $event || {}, true);
-    }
-    // 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);
-        }
-    }
-    onPropertyChange(key, nv, ov) {
-        if (key === 'tabindex') {
-            return;
-        }
-        if (key === 'itemsperrow') {
-            setListClass(this);
-        }
-        else {
-            super.onPropertyChange(key, nv, ov);
-        }
-    }
-    static { this.ɵfac = function RadiosetComponent_Factory(t) { return new (t || RadiosetComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadiosetComponent, selectors: [["", "wmRadioset", ""]], exportAs: ["wmRadioset"], features: [i0.ɵɵProvidersFeature([
-                provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(RadiosetComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(RadiosetComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", 4, "ngFor", "ngForOf"], [1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "click", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
-            i0.ɵɵelement(1, "input", 2);
-            i0.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 3)(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-        } if (rf & 2) {
-            const groupedListTemplate_r12 = i0.ɵɵreference(4);
-            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadiosetComponent, [{
-        type: Component,
-        args: [{ selector: '[wmRadioset]', exportAs: 'wmRadioset', providers: [
-                    provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(RadiosetComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(RadiosetComponent)
-                ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems;let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onRadioLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption customTemplate\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RadiosetComponent, { className: "RadiosetComponent", filePath: "radioset/radioset.component.ts", lineNumber: 26 }); })();
-
-const selectProps = new Map([
-    ['autofocus', PROP_BOOLEAN],
-    ['class', { value: '', ...PROP_STRING }],
-    ['compareby', PROP_STRING],
-    ['datafield', PROP_STRING],
-    ['dataset', 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],
-    ['hint', PROP_STRING],
-    ['match', PROP_STRING],
-    ['multiple', { value: false, ...PROP_BOOLEAN }],
-    ['name', PROP_STRING],
-    ['orderby', PROP_STRING],
-    ['placeholder', PROP_STRING],
-    ['readonly', PROP_BOOLEAN],
-    ['required', PROP_BOOLEAN],
-    ['shortcutkey', PROP_STRING],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['tabindex', { value: 0, ...PROP_NUMBER }],
-    ['usekeys', PROP_BOOLEAN]
-]);
-const registerProps$7 = () => {
-    register('wm-select', selectProps);
-    registerFormWidget(FormWidgetType.SELECT, new Map(selectProps));
-    registerFormWidget(FormWidgetType.TYPEAHEAD, new Map(selectProps));
-};
-
-const _c0$7 = ["select"];
-const _c1$6 = a0 => ["app-select form-control", a0];
-function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 7);
-} if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    i0.ɵɵproperty("value", item_r2.key)("selected", item_r2.selected)("textContent", item_r2.label);
-} }
-function SelectComponent_ng_container_3_optgroup_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "optgroup", 5);
-    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 6);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const groupObj_r3 = ctx.$implicit;
-    i0.ɵɵproperty("label", groupObj_r3.key);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", groupObj_r3.data);
-} }
-function SelectComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 4);
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r3.groupedData);
-} }
-function SelectComponent_ng_container_4_option_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 7);
-} if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    i0.ɵɵproperty("value", item_r5.key)("selected", item_r5.selected)("textContent", item_r5.label);
-} }
-function SelectComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 6);
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r3.datasetItems);
-} }
-const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
-class SelectComponent extends DatasetAwareFormComponent {
-    static { this.initializeProps = registerProps$7(); }
-    set datasource(ds) {
-        if (ds && ds.execute && ds.execute(DataSource.Operation.IS_BOUND_TO_LOCALE)) {
-            this.datavalue = ds.execute(DataSource.Operation.GET_DEFAULT_LOCALE);
-        }
-    }
-    constructor(inj, app, explicitContext) {
-        super(inj, WIDGET_CONFIG$7, explicitContext);
-        this.app = app;
-        this.acceptsArray = true;
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        styler(this.selectEl.nativeElement, this);
-    }
-    // Change event is registered from the template, Prevent the framework from registering one more event
-    handleEvent(node, eventName, eventCallback, locals) {
-        if (!includes(['blur', 'change'], eventName)) {
-            super.handleEvent(this.selectEl.nativeElement, eventName, eventCallback, locals);
-        }
-    }
-    onSelectValueChange($event) {
-        if (this.readonly) {
-            if (this.placeholder) {
-                this.selectEl.nativeElement.value = this.placeholder;
-            }
-            else {
-                this.selectEl.nativeElement.value = '';
-            }
-            this.datavalue = this.prevDatavalue;
-            return;
-        }
-        this.invokeOnTouched();
-        // invoke on datavalue change.
-        this.invokeOnChange(this.datavalue, $event || {}, true);
-    }
-    onPropertyChange(key, nv, ov) {
-        if (key === 'required') {
-            this._onChange(this.datavalue);
-            return;
-        }
-        if (key === 'class' || key === 'tabindex') {
-            if (key === 'class') {
-                // After NG15 upgrade ng-invalid class is added even the field is valid, so we are removing the ng-invalid manually
-                const isNgUntouchedValid = this.selectEl.nativeElement.classList.contains('ng-untouched') && this.selectEl.nativeElement.classList.contains('ng-valid');
-                if (isNgUntouchedValid && nv.includes('ng-untouched') && nv.includes('ng-invalid')) {
-                    setTimeout(() => {
-                        if (this.selectEl.nativeElement.classList.contains('ng-untouched') && this.selectEl.nativeElement.classList.contains('ng-valid') && this.selectEl.nativeElement.classList.contains('ng-invalid')) {
-                            this.selectEl.nativeElement.classList.remove('ng-invalid');
-                        }
-                    });
-                }
-            }
-            return;
-        }
-        else if (key === 'readonly') {
-            (nv === true) ? setAttr(this.selectEl.nativeElement, 'readonly', 'readonly') : removeAttr(this.selectEl.nativeElement, 'readonly');
-        }
-        super.onPropertyChange(key, nv, ov);
-    }
-    /**
-     * When caption floating is enabled and placeholder is given, do not show placeholder until user focuses on the field
-     * When focused add the placeholder to the option which is selected
-     * On blur, remove the placeholder and do not animate the label
-     * @param $event event received will be either a blur or focus event
-     */
-    checkForFloatingLabel($event) {
-        const captionEl = $(this.selectEl.nativeElement).closest('.app-composite-widget.caption-floating');
-        if (captionEl.length > 0) {
-            if ($event.type === 'focus' && (!this.datavalue || (this.datavalue && $(this.selectEl).find('select option:selected').text() === '' && this.placeholder))) {
-                if (!(this.datavalue || this.placeholder)) {
-                    this.removePlaceholderOption();
-                }
-                else {
-                    $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
-                }
-            }
-            else if (!this.datavalue) {
-                $(this.selectEl.nativeElement).find('option:selected').text('');
-                captionEl.removeClass('float-active');
-            }
-        }
-        else if (!(this.datavalue || this.placeholder)) {
-            this.removePlaceholderOption();
-        }
-    }
-    /*
-    * Removing the placeholder option if no placeholder is provided.
-    * In html we are hiding the placeholder option using css but in apple devices and safari option is showing.
-    * */
-    removePlaceholderOption() {
-        const hiddenEle = $(this.selectEl.nativeElement).find('#placeholderOption');
-        if (hiddenEle.length) {
-            hiddenEle.remove();
-            this.selectEl.nativeElement.value = '';
-        }
-    }
-    static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectComponent, selectors: [["wm-select"]], viewQuery: function SelectComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$7, 7, ElementRef);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectEl = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(SelectComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(SelectComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 16, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus"], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "select", 1, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSelectValueChange($event)); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
-            i0.ɵɵelement(2, "option", 2);
-            i0.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
-            i0.ɵɵproperty("multiple", ctx.multiple)("autofocus", ctx.autofocus);
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.groupby);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.groupby);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, i2$1.SelectMultipleControlValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel, i2.TextContentDirective], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectComponent, [{
-        type: Component,
-        args: [{ selector: 'wm-select', providers: [
-                    provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(SelectComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(SelectComponent)
-                ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\">\n\n        <option selected\n                value=\"undefined\"\n                [textContent]=\"placeholder\"\n                id=\"placeholderOption\"\n                [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
-    }], () => [{ type: i0.Injector }, { type: i1$1.App }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { selectEl: [{
-            type: ViewChild,
-            args: ['select', { static: true, read: ElementRef }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 22 }); })();
-
-const switchProps = new Map([
-    ['class', PROP_STRING],
-    ['compareby', PROP_STRING],
-    ['datafield', PROP_STRING],
-    ['dataset', { value: 'yes, no, maybe', ...PROP_ANY }],
-    ['datavaluesource', PROP_ANY],
-    ['datavalue', PROP_STRING],
-    ['disabled', PROP_BOOLEAN],
-    ['displayexpression', PROP_STRING],
-    ['displayfield', PROP_STRING],
-    ['hint', PROP_STRING],
-    ['iconclass', PROP_STRING],
-    ['name', PROP_STRING],
-    ['orderby', PROP_STRING],
-    ['required', PROP_BOOLEAN],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['tabindex', { value: 0, ...PROP_NUMBER }]
-]);
-const registerProps$6 = () => {
-    register('wm-switch', switchProps);
-    registerFormWidget(FormWidgetType.SWITCH, new Map(switchProps));
-    registerFormWidget(FormWidgetType.TOGGLE, new Map(switchProps));
-};
-
-const _c0$6 = ["wmSwitch", ""];
-const _c1$5 = (a0, a1) => ({ "selected": a0, "disabled": a1 });
-const _c2$1 = a0 => ["app-icon", a0];
-function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 8);
-} if (rf & 2) {
-    const opt_r3 = i0.ɵɵnextContext().$implicit;
-    const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c2$1, opt_r3.dataObject[ctx_r4.iconclass] || opt_r3["icon"]));
-} }
-function SwitchComponent_a_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 5);
-    i0.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const ctx_r1 = i0.ɵɵrestoreView(_r1); const opt_r3 = ctx_r1.$implicit; const $index_r4 = ctx_r1.index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.selectOpt($event, $index_r4, opt_r3)); });
-    i0.ɵɵtemplate(1, SwitchComponent_a_1_i_1_Template, 1, 3, "i", 6);
-    i0.ɵɵelement(2, "span", 7);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const opt_r3 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0.ɵɵpureFunction2(4, _c1$5, opt_r3.selected, ctx_r4.disabled));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass]);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("textContent", opt_r3[ctx_r4.displayfield] || opt_r3.label);
-} }
-function SwitchComponent_i_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i");
-} if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r4.selectedItem && ctx_r4.selectedItem.dataObject && ctx_r4.selectedItem.dataObject[ctx_r4.iconclass], "");
-} }
-const DEFAULT_CLS = 'app-switch';
-const WIDGET_CONFIG$6 = { widgetType: 'wm-switch', hostClass: DEFAULT_CLS };
-class SwitchComponent extends DatasetAwareFormComponent {
-    static { this.initializeProps = registerProps$6(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$6, explicitContext);
-        this.options = [];
-        this._debounceSetSelectedValue = debounce$1((val) => {
-            this.setSelectedValue();
-            this.updateHighlighter(val);
-            // only for default value trigger app digest to apply the selectedItem
-            if (val) {
-                $appDigest();
-            }
-        }, 200);
-        const datasetSubscription = this.dataset$.subscribe(() => this.updateSwitchOptions());
-        this.registerDestroyListener(() => datasetSubscription.unsubscribe());
-        const datavalueSubscription = this.datavalue$.subscribe(() => {
-            this._debounceSetSelectedValue(true);
-        });
-        this.registerDestroyListener(() => datavalueSubscription.unsubscribe());
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        styler(this.nativeElement, this);
-    }
-    onStyleChange(key, nv, ov) {
-        if (key === 'height') {
-            setCSS(this.nativeElement, 'overflow', nv ? 'auto' : '');
-        }
-        else {
-            super.onStyleChange(key, nv, ov);
-        }
-    }
-    // This function sets the selectedItem by either using compareby fields or selected flag on datasetItems.
-    setSelectedValue() {
-        if (isDefined(this.datavalue) || isDefined(this.toBeProcessedDatavalue)) {
-            this.selectedItem = find(this.datasetItems, { selected: true });
-            return;
-        }
-        // If no value is provided, set first value as default if options are available else set -1 ie no selection
-        this.selectOptAtIndex(0);
-    }
-    // set the css for switch overlay element.
-    // set the selected index from the datasetItems and highlight the datavalue on switch.
-    updateSwitchOptions() {
-        if (this.datasetItems.length) {
-            this.btnwidth = (100 / this.datasetItems.length);
-            setCSS(this.nativeElement.querySelector('.app-switch-overlay'), 'width', this.btnwidth + '%');
-        }
-        this._debounceSetSelectedValue(true);
-    }
-    // This function animates the highlighted span on to the selected value.
-    updateHighlighter(skipAnimation) {
-        const handler = $(this.nativeElement).find('span.app-switch-overlay');
-        this.setSelectedValue();
-        let left, index = this.selectedItem ? findIndex(this.datasetItems, { key: this.selectedItem.key }) : -1;
-        if (index === undefined || index === null) {
-            index = -1;
-        }
-        left = index * this.btnwidth;
-        if (skipAnimation) {
-            handler.css('left', left + '%');
-        }
-        else {
-            handler.animate({
-                left: left + '%'
-            }, 300);
-        }
-    }
-    selectOptAtIndex($index) {
-        if (!this.datasetItems.length) {
-            return;
-        }
-        const opt = this.datasetItems[$index];
-        this._modelByValue = opt.value;
-    }
-    // Triggered on selected the option from the switch.
-    // set the index and highlight the default value. Invoke onchange event handler.
-    selectOpt($event, $index, option) {
-        $event.preventDefault();
-        if (this.disabled) {
-            return;
-        }
-        this.modelByKey = option.key;
-        this.invokeOnTouched();
-        if (this.selectedItem && $index === findIndex(this.datasetItems, { key: this.selectedItem.key })) {
-            if (this.datasetItems.length === 2) {
-                $index = $index === 1 ? 0 : 1;
-            }
-            else {
-                return;
-            }
-        }
-        this.selectedItem = this.datasetItems[$index];
-        this.updateHighlighter();
-        // invoke on datavalue change.
-        this.invokeOnChange(this.datavalue, $event || {}, true);
-        $appDigest();
-    }
-    onPropertyChange(key, nv, ov) {
-        if (key === 'disabled' && !toBoolean(nv)) {
-            this.nativeElement.removeAttribute(key);
-        }
-        else {
-            super.onPropertyChange(key, nv, ov);
-        }
-    }
-    static { this.ɵfac = function SwitchComponent_Factory(t) { return new (t || SwitchComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SwitchComponent, selectors: [["", "wmSwitch", ""]], exportAs: ["wmSwitch"], features: [i0.ɵɵProvidersFeature([
-                provideAs(SwitchComponent, NG_VALUE_ACCESSOR, true),
-                provideAsWidgetRef(SwitchComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [["role", "group", 1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "class", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", 1, "btn", "btn-default", 3, "click", "name", "ngClass"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, SwitchComponent_a_1_Template, 3, 7, "a", 1);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(2, "span", 2);
-            i0.ɵɵtemplate(3, SwitchComponent_i_3_Template, 1, 3, "i", 3);
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(5, "input", 4);
-        } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngForOf", ctx.datasetItems);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("title", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.iconclass);
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey, "\n");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.modelByKey)("required", ctx.required);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.TextContentDirective], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwitchComponent, [{
-        type: Component,
-        args: [{ selector: '[wmSwitch]', providers: [
-                    provideAs(SwitchComponent, NG_VALUE_ACCESSOR, true),
-                    provideAsWidgetRef(SwitchComponent)
-                ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\">\n    <a *ngFor=\"let opt of datasetItems; let $index = index;\"\n       focus-target\n       href=\"javascript:void(0);\"\n       class=\"btn btn-default\"\n       [name]=\"'wm-switch-' + opt.key\"\n       [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n       (click)=\"selectOpt($event, $index, opt)\"\n    >\n        <i *ngIf=\"opt.dataObject && opt.dataObject[iconclass]\" aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n        <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n</div>\n<span [title]=\"selectedItem ? selectedItem.label : modelByKey\"\n      class=\"btn btn-primary app-switch-overlay switch-handle\">\n    <i *ngIf=\"iconclass\"\n       class=\"app-icon {{(selectedItem && selectedItem.dataObject) && selectedItem.dataObject[iconclass]}}\"></i>\n    {{selectedItem ? selectedItem.label : modelByKey}}\n</span>\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SwitchComponent, { className: "SwitchComponent", filePath: "switch/switch.component.ts", lineNumber: 25 }); })();
-
-const inputCalendarTypeProps = new Map([
-    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
-    ['autotrim', { value: true, ...PROP_BOOLEAN }],
-    ['autofocus', PROP_BOOLEAN],
-    ['class', PROP_STRING],
-    ['datasource', PROP_ANY],
-    ['datavalue', PROP_STRING],
-    ['disabled', PROP_BOOLEAN],
-    ['hint', PROP_STRING],
-    ['maxvalue', PROP_NUMBER],
-    ['minvalue', PROP_NUMBER],
-    ['name', PROP_STRING],
-    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
-    ['readonly', PROP_BOOLEAN],
-    ['required', PROP_BOOLEAN],
-    ['shortcutkey', PROP_STRING],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['step', PROP_NUMBER],
-    ['tabindex', { value: 0, ...PROP_NUMBER }],
-    ['type', PROP_STRING],
-    ['updateon', PROP_STRING],
-    ['conditionalclass', PROP_ANY],
-    ['conditionalstyle', PROP_ANY]
-]);
-const registerProps$5 = () => {
-    register('wm-input-calendar', inputCalendarTypeProps);
-};
-
-const _c0$5 = ["input"];
-const _c1$4 = ["type", "date"];
-const WIDGET_CONFIG$5 = {
-    widgetType: 'wm-input-calendar',
-    hostClass: 'app-input-wrapper'
-};
-class InputCalendarComponent extends BaseInput {
-    static { this.initializeProps = registerProps$5(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$5, explicitContext);
-    }
-    static { this.ɵfac = function InputCalendarComponent_Factory(t) { return new (t || InputCalendarComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputCalendarComponent, selectors: [["wm-input", "type", "date"], ["wm-input", "type", "datetime-local"], ["wm-input", "type", "month"], ["wm-input", "type", "time"], ["wm-input", "type", "week"]], viewQuery: function InputCalendarComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$5, 7);
-            i0.ɵɵviewQuery(NgModel, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(InputCalendarComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(InputCalendarComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "input", 1, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("blur", function InputCalendarComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); });
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵproperty("type", ctx.type);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-            i0.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
-        } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputCalendarComponent, [{
-        type: Component,
-        args: [{ selector: 'wm-input[type="date"], wm-input[type="datetime-local"], wm-input[type="month"], wm-input[type="time"], wm-input[type="week"]', providers: [
-                    provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(InputCalendarComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(InputCalendarComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { inputEl: [{
-            type: ViewChild,
-            args: ['input', { static: true }]
-        }], ngModel: [{
-            type: ViewChild,
-            args: [NgModel]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputCalendarComponent, { className: "InputCalendarComponent", filePath: "text/calendar/input-calendar.component.ts", lineNumber: 22 }); })();
-
-const inputColorTypeProps = new Map([
-    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
-    ['autofocus', PROP_BOOLEAN],
-    ['autotrim', { value: true, ...PROP_BOOLEAN }],
-    ['class', PROP_STRING],
-    ['datavaluesource', PROP_ANY],
-    ['datavalue', PROP_STRING],
-    ['disabled', PROP_BOOLEAN],
-    ['hint', PROP_STRING],
-    ['name', PROP_STRING],
-    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
-    ['readonly', PROP_BOOLEAN],
-    ['required', PROP_BOOLEAN],
-    ['shortcutkey', PROP_STRING],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['tabindex', { value: 0, ...PROP_NUMBER }],
-    ['type', { value: 'color', ...PROP_STRING }],
-    ['updateon', PROP_STRING],
-    ['conditionalclass', PROP_ANY],
-    ['conditionalstyle', PROP_ANY]
-]);
-const registerProps$4 = () => {
-    register('wm-input-color', inputColorTypeProps);
-};
-
-const _c0$4 = ["input"];
-const _c1$3 = ["type", "color"];
-const WIDGET_CONFIG$4 = {
-    widgetType: 'wm-input-color',
-    hostClass: 'app-input-wrapper'
-};
-class InputColorComponent extends BaseInput {
-    static { this.initializeProps = registerProps$4(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$4, explicitContext);
-    }
-    static { this.ɵfac = function InputColorComponent_Factory(t) { return new (t || InputColorComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputColorComponent, selectors: [["wm-input", "type", "color"]], viewQuery: function InputColorComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$4, 7);
-            i0.ɵɵviewQuery(NgModel, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(InputColorComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(InputColorComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 14, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "input", 1, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("blur", function InputColorComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); });
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵproperty("type", ctx.type);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-            i0.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-        } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputColorComponent, [{
-        type: Component,
-        args: [{ selector: 'wm-input[type="color"]', providers: [
-                    provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(InputColorComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(InputColorComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { inputEl: [{
-            type: ViewChild,
-            args: ['input', { static: true }]
-        }], ngModel: [{
-            type: ViewChild,
-            args: [NgModel]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputColorComponent, { className: "InputColorComponent", filePath: "text/color/input-color.component.ts", lineNumber: 23 }); })();
-
-const inputEmailTypeProps = new Map([
-    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
-    ['autofocus', PROP_BOOLEAN],
-    ['autotrim', { value: true, ...PROP_BOOLEAN }],
-    ['class', PROP_STRING],
-    ['datavaluesource', PROP_ANY],
-    ['datavalue', PROP_STRING],
-    ['disabled', PROP_BOOLEAN],
-    ['hint', PROP_STRING],
-    ['maxchars', PROP_NUMBER],
-    ['name', PROP_STRING],
-    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
-    ['readonly', PROP_BOOLEAN],
-    ['regexp', PROP_STRING],
-    ['required', PROP_BOOLEAN],
-    ['shortcutkey', PROP_STRING],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['tabindex', { value: 0, ...PROP_NUMBER }],
-    ['type', { value: 'email', ...PROP_STRING }],
-    ['updateon', PROP_STRING],
-    ['conditionalclass', PROP_ANY],
-    ['conditionalstyle', PROP_ANY]
-]);
-const registerProps$3 = () => {
-    register('wm-input-email', inputEmailTypeProps);
-};
-
-const _c0$3 = ["input"];
-const _c1$2 = ["type", "email"];
-const WIDGET_CONFIG$3 = {
-    widgetType: 'wm-input-email',
-    hostClass: 'app-input-wrapper'
-};
-class InputEmailComponent extends BaseInput {
-    static { this.initializeProps = registerProps$3(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$3, explicitContext);
-    }
-    static { this.ɵfac = function InputEmailComponent_Factory(t) { return new (t || InputEmailComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputEmailComponent, selectors: [["wm-input", "type", "email"]], viewQuery: function InputEmailComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$3, 7);
-            i0.ɵɵviewQuery(NgModel, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(InputEmailComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(InputEmailComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputEmailComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "input", 1, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("blur", function InputEmailComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputEmailComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); });
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵproperty("type", ctx.type);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-            i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-        } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.EmailValidator, i2$1.NgModel], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputEmailComponent, [{
-        type: Component,
-        args: [{ selector: 'wm-input[type="email"]', providers: [
-                    provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(InputEmailComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(InputEmailComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { inputEl: [{
-            type: ViewChild,
-            args: ['input', { static: true }]
-        }], ngModel: [{
-            type: ViewChild,
-            args: [NgModel]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputEmailComponent, { className: "InputEmailComponent", filePath: "text/email/input-email.component.ts", lineNumber: 23 }); })();
-
-const inputNumberTypeProps = new Map([
-    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
-    ['autofocus', PROP_BOOLEAN],
-    ['autotrim', { value: true, ...PROP_BOOLEAN }],
-    ['class', PROP_STRING],
-    ['datavaluesource', PROP_ANY],
-    ['datavalue', PROP_STRING],
-    ['disabled', PROP_BOOLEAN],
-    ['hint', PROP_STRING],
-    ['maxchars', PROP_NUMBER],
-    ['maxvalue', PROP_NUMBER],
-    ['minvalue', PROP_NUMBER],
-    ['name', PROP_STRING],
-    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
-    ['readonly', PROP_BOOLEAN],
-    ['regexp', PROP_STRING],
-    ['required', PROP_BOOLEAN],
-    ['shortcutkey', PROP_STRING],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['step', PROP_NUMBER],
-    ['tabindex', { value: 0, ...PROP_NUMBER }],
-    ['type', { value: 'number', ...PROP_STRING }],
-    ['updateon', PROP_STRING],
-    ['conditionalclass', PROP_ANY],
-    ['conditionalstyle', PROP_ANY]
-]);
-const registerProps$2 = () => {
-    register('wm-input-number', inputNumberTypeProps);
-};
-
-const _c0$2 = ["input"];
-const _c1$1 = ["type", "number"];
-const _c2 = a0 => ({ "step-hidden": a0 });
-const WIDGET_CONFIG$2 = {
-    widgetType: 'wm-input-number',
-    hostClass: 'app-input-wrapper'
-};
-class InputNumberComponent extends BaseInput {
-    static { this.initializeProps = registerProps$2(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$2, explicitContext);
-    }
-    onArrowPress($event) {
-        if (this.step === 0) {
-            $event.preventDefault();
-        }
-    }
-    validateInputEntry($event) {
-        if ($event.key === 'e' && $event.target.value.indexOf($event.key) !== -1) {
-            return false;
-        }
-    }
-    static { this.ɵfac = function InputNumberComponent_Factory(t) { return new (t || InputNumberComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputNumberComponent, selectors: [["wm-input", "type", "number"]], viewQuery: function InputNumberComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$2, 7);
-            i0.ɵɵviewQuery(NgModel, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(InputNumberComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(InputNumberComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress", "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete"]], template: function InputNumberComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "input", 1, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("blur", function InputNumberComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("keyup.enter", function InputNumberComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); })("keydown.ArrowUp", function InputNumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event)); })("keydown.ArrowDown", function InputNumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event)); })("keypress", function InputNumberComponent_Template_input_keypress_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.validateInputEntry($event)); });
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-            i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-        } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputNumberComponent, [{
-        type: Component,
-        args: [{ selector: 'wm-input[type="number"]', providers: [
-                    provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(InputNumberComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(InputNumberComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { inputEl: [{
-            type: ViewChild,
-            args: ['input', { static: true }]
-        }], ngModel: [{
-            type: ViewChild,
-            args: [NgModel]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputNumberComponent, { className: "InputNumberComponent", filePath: "text/number/input-number.component.ts", lineNumber: 22 }); })();
-
-const inputTextTypeProps = new Map([
-    ['autocomplete', { value: true, ...PROP_BOOLEAN }],
-    ['autofocus', PROP_BOOLEAN],
-    ['autotrim', { value: true, ...PROP_BOOLEAN }],
-    ['class', PROP_STRING],
-    ['datavaluesource', PROP_ANY],
-    ['datavalue', PROP_STRING],
-    ['disabled', PROP_BOOLEAN],
-    ['displayformat', PROP_STRING],
-    ['hint', PROP_STRING],
-    ['maxchars', PROP_NUMBER],
-    ['name', PROP_STRING],
-    ['placeholder', { value: 'Enter text', ...PROP_STRING }],
-    ['readonly', PROP_BOOLEAN],
-    ['regexp', PROP_STRING],
-    ['required', PROP_BOOLEAN],
-    ['shortcutkey', PROP_STRING],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['showdisplayformaton', { value: 'always', ...PROP_ANY }],
-    ['tabindex', { value: 0, ...PROP_NUMBER }],
-    ['type', { value: 'text', ...PROP_STRING }],
-    ['updateon', PROP_STRING],
-    ['conditionalclass', PROP_ANY],
-    ['conditionalstyle', PROP_ANY]
-]);
-const registerProps$1 = () => {
-    register('wm-input-text', inputTextTypeProps);
-    registerFormWidget(FormWidgetType.PASSWORD, new Map(inputTextTypeProps));
-    const formTextProps = new Map(inputTextTypeProps);
-    const mergeTextProps = (typeProps) => {
-        typeProps.forEach((v, k) => formTextProps.set(k, v));
-    };
-    mergeTextProps(inputCalendarTypeProps);
-    mergeTextProps(inputColorTypeProps);
-    mergeTextProps(inputEmailTypeProps);
-    mergeTextProps(inputNumberTypeProps);
-    registerFormWidget(FormWidgetType.TEXT, new Map(formTextProps));
-};
-
-const _c0$1 = ["input"];
-const _c1 = ["type", "text"];
-const WIDGET_CONFIG$1 = {
-    widgetType: 'wm-input-text',
-    hostClass: 'app-input-wrapper'
-};
-class InputTextComponent extends BaseInput {
-    static { this.initializeProps = registerProps$1(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG$1, explicitContext);
-        this.lazy = false;
-    }
-    /* Define the property change handler. This function will be triggered when there is a change in the widget property */
-    onPropertyChange(key, nv, ov) {
-        /*Monitoring changes for styles or properties and accordingly handling respective changes.*/
-        switch (key) {
-            case 'displayformat':
-                this.maskVal = this.displayformat;
-                this.checkForDisplayFormat();
-                break;
-            case 'showdisplayformaton':
-                this.lazy = nv === 'keypress' ? true : false;
-                break;
-            default:
-                super.onPropertyChange(key, nv, ov);
-        }
-    }
-    get mask() {
-        if (this.displayformat && (!this.placeholder || (this.placeholder && this.isFocused))) {
-            return {
-                mask: this.maskVal,
-                lazy: this.lazy,
-                definitions: {
-                    '9': /\d/,
-                    'A': /[a-zA-Z]/,
-                    'a': /[a-z]/,
-                    '*': /\w/
-                }
-            };
-        }
-        else {
-            return false;
-        }
-    }
-    // show display format on focus or when it has a data value present. Else show the placeholder
-    checkForDisplayFormat($event) {
-        if (this.displayformat) {
-            this.isFocused = (($event && $event.type === 'focus') || this.datavalue) ? true : false;
-            // Do not show format placeholder when no value is present on blur
-            if (!this.isFocused && this.imask && this.imask.maskRef) {
-                this.imask.maskRef.updateOptions({ lazy: true });
-                // on blur, when no value is present assign maskref to null, as in some cases (where format palceholder starts with pranthesis) the format placeholder is still shown. WMS-20124
-                if (!this.datavalue && this.imask.maskRef.value) {
-                    this.imask.maskRef.value = this.datavalue;
-                }
-            }
-            else {
-                // when display format is dynamically populated, cursor position is at the end of the format, readjusting the cursor position based on masked input value
-                // Adding timeout, as the below code should be on hold until imask model is generated
-                setTimeout(() => {
-                    if (this.imask && this.imask.maskRef && this.imask.maskRef.value) {
-                        const maskValIndex = this.imask.maskRef.value.indexOf('_');
-                        const enteredMaskVal = maskValIndex >= 0 ? this.imask.maskRef.value.slice(0, maskValIndex).length : this.imask.maskRef.value.length;
-                        if (enteredMaskVal !== this.imask.maskRef.cursorPos) {
-                            this.imask.maskRef.updateCursor(enteredMaskVal);
-                        }
-                    }
-                }, 50);
-            }
-        }
-        else if (this.imask && this.imask.maskRef) { // When display format is bound via condition, remove the placeholder when the format is not applicable
-            this.imask.maskRef.updateOptions({ lazy: true });
-            // when display format is removed assign input value to the datavalue attr. WMS-20124
-            this.inputEl.nativeElement.value = this.datavalue;
-        }
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.isFocused = !!this.datavalue;
-    }
-    static { this.ɵfac = function InputTextComponent_Factory(t) { return new (t || InputTextComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputTextComponent, selectors: [["wm-input", "type", "text"], ["wm-input", 3, "type", ""], ["wm-input", "type", "password"], ["wm-input", "type", "search"], ["wm-input", "type", "tel"], ["wm-input", "type", "url"]], viewQuery: function InputTextComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1, 7);
-            i0.ɵɵviewQuery(NgModel, 5);
-            i0.ɵɵviewQuery(_c0$1, 5, IMaskDirective);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.imask = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(InputTextComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(InputTextComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "focus", "keyup.enter", "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputTextComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "input", 1, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("blur", function InputTextComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("focus", function InputTextComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForDisplayFormat($event)); })("keyup.enter", function InputTextComponent_Template_input_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.flushViewChanges(input_r2.value)); });
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵproperty("type", ctx.type);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-            i0.ɵɵproperty("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
-        } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.NgModel, i3.IMaskDirective], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputTextComponent, [{
-        type: Component,
-        args: [{ selector: 'wm-input[type="text"], wm-input:not([type]), wm-input[type="password"], wm-input[type="search"], wm-input[type="tel"], wm-input[type="url"]', providers: [
-                    provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(InputTextComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(InputTextComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"hint\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { inputEl: [{
-            type: ViewChild,
-            args: ['input', { static: true }]
-        }], ngModel: [{
-            type: ViewChild,
-            args: [NgModel]
-        }], imask: [{
-            type: ViewChild,
-            args: ['input', { read: IMaskDirective }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputTextComponent, { className: "InputTextComponent", filePath: "text/text/input-text.component.ts", lineNumber: 23 }); })();
-
-const textareaProps = new Map([
-    ['autofocus', PROP_BOOLEAN],
-    ['autotrim', { value: true, ...PROP_BOOLEAN }],
-    ['class', PROP_STRING],
-    ['datavaluesource', PROP_ANY],
-    ['datavalue', PROP_STRING],
-    ['disabled', PROP_BOOLEAN],
-    ['hint', PROP_STRING],
-    ['maxchars', PROP_NUMBER],
-    ['name', PROP_STRING],
-    ['placeholder', { value: 'Place your text', ...PROP_STRING }],
-    ['readonly', PROP_BOOLEAN],
-    ['required', PROP_BOOLEAN],
-    ['shortcutkey', PROP_STRING],
-    ['show', { value: true, ...PROP_BOOLEAN }],
-    ['tabindex', { value: 0, ...PROP_NUMBER }],
-    ['updateon', PROP_STRING],
-    ['limitdisplaytext', PROP_STRING],
-    ['charlength', PROP_NUMBER],
-    ['conditionalclass', PROP_ANY],
-    ['conditionalstyle', PROP_ANY]
-]);
-const registerProps = () => {
-    register('wm-textarea', textareaProps);
-    registerFormWidget(FormWidgetType.TEXTAREA, new Map(textareaProps));
-};
-
-const _c0 = ["textarea"];
-function TextareaComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.limitdisplaytext);
-} }
-const WIDGET_CONFIG = {
-    widgetType: 'wm-textarea',
-    hostClass: 'app-input-wrapper'
-};
-class TextareaComponent extends BaseInput {
-    static { this.initializeProps = registerProps(); }
-    constructor(inj, explicitContext) {
-        super(inj, WIDGET_CONFIG, explicitContext);
-        this.charlength = 0;
-    }
-    onInputChange() {
-        this.charlength = this.inputEl.nativeElement.value.length;
-    }
-    static { this.ɵfac = function TextareaComponent_Factory(t) { return new (t || TextareaComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextareaComponent, selectors: [["wm-textarea"]], viewQuery: function TextareaComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 7);
-            i0.ɵɵviewQuery(NgModel, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature([
-                provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
-                provideAs(TextareaComponent, NG_VALIDATORS, true),
-                provideAsWidgetRef(TextareaComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "textarea", 1, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("input", function TextareaComponent_Template_textarea_input_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputChange()); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleChange($event); return i0.ɵɵresetView(ctx.onInputChange()); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(2, TextareaComponent_div_2_Template, 2, 1, "div", 2);
-        } if (rf & 2) {
-            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-            i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.maxchars);
-        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextareaComponent, [{
-        type: Component,
-        args: [{ selector: 'wm-textarea', providers: [
-                    provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
-                    provideAs(TextareaComponent, NG_VALIDATORS, true),
-                    provideAsWidgetRef(TextareaComponent)
-                ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          role=\"textbox\"\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"hint\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          [ngClass]=\"conditionalclass\"\n          [ngStyle]=\"conditionalstyle\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
-    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['EXPLICIT_CONTEXT']
-            }, {
-                type: Optional
-            }] }], { inputEl: [{
-            type: ViewChild,
-            args: ['textarea', { static: true }]
-        }], ngModel: [{
-            type: ViewChild,
-            args: [NgModel]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 22 }); })();
-
-class CaptionPositionDirective {
-    constructor(inj, app) {
-        // skip floating caption for the below form fields
-        this.skipFloatPositionWidgets = ['radioset', 'checkboxset', 'richtext', 'switch', 'chips', 'checkbox', 'slider', 'rating', 'toggle', 'upload'];
-        this.elementRef = inj.get(ElementRef);
-        this.nativeEl = this.elementRef.nativeElement;
-        this.app = app;
-    }
-    onBlurCb() {
-        let mobileInputVal;
-        // In case of mobile date / time picker check for input element's value which has 'mobile-input' class
-        if (this.inputEl.length > 1 && this.inputEl.hasClass('mobile-input')) {
-            forEach(this.inputEl, (el) => {
-                if ($(el).hasClass('mobile-input') && el.value) {
-                    mobileInputVal = el.value;
-                }
-            });
-        }
-        if (!this.inputEl.val() && !mobileInputVal) {
-            this.compositeEle.classList.remove('float-active');
-            this.inputEl.removeAttr('placeholder');
-        }
-    }
-    onFocusCb() {
-        this.compositeEle.classList.add('float-active');
-        this.inputEl.attr('placeholder', this.placeholder);
-    }
-    // For select widget, display placeholder only on focus else remove the text of the option selected.
-    checkForSelectPlaceholder() {
-        if ($(this.nativeEl).find('select option:selected').text() && !$(this.nativeEl).find('select').is(':focus') &&
-            !$(this.inputEl.closest('[widget-id]')).attr('datavalue')) {
-            $(this.nativeEl).find('select option:selected').text('');
-        }
-    }
-    setDefaultValueAnimation() {
-        // remove placeholder when the input el has placeholder and the placeholder is not bound to any variable
-        if (!this._isPlaceholderBound && this.inputEl.attr('placeholder')) {
-            this.placeholder = this.inputEl.attr('placeholder');
-            this.inputEl.removeAttr('placeholder');
-        }
-        // Do not show placeholder as selected by default
-        this.checkForSelectPlaceholder();
-        // check for datavalue attribute in composite element and defaultvalue attribute in form field element
-        // check for datavalue.bind attribute to see whether default value is binded via expression or a variable
-        // check for displayformat attribute, as in form fields user can set display format to the field
-        // check for formdata/bindformdata attribute to see if any default value is binded to the form
-        // check for select tag with multiple attribute enabled
-        if ((this.inputEl.val() && !this.inputEl.is('select')) || $(this.inputEl.closest('[widget-id]')).attr('datavalue') || $(this.inputEl.parent('[widget-id]')).attr('datavalue.bind') || this.nativeEl.getAttribute('defaultvalue')
-            || this.nativeEl.getAttribute('displayformat') || $(this.nativeEl).find('select option:selected').text() || $(this.nativeEl).find('select').attr('multiple')) {
-            this.compositeEle.classList.add('float-active');
-        }
-    }
-    /**
-     * Observing placeholder attribute change on DOM instead of having a propChangeHandler fn
-     * For composite widgets propertychangehandler function is invoked at independent widgets where as the directive is at composite level
-     */
-    observeForPlaceholderAttrChange() {
-        this._attrObserver = new MutationObserver(mutations => {
-            mutations.forEach((mutation) => {
-                if (mutation.attributeName === 'placeholder' && this.inputEl.attr('placeholder') && !this.compositeEle.classList.contains('float-active')) {
-                    this.placeholder = this.inputEl.attr('placeholder');
-                    this.inputEl.removeAttr('placeholder');
-                }
-            });
-        });
-        const config = { attributes: true, childList: false, characterData: false };
-        this._attrObserver.observe(this.inputEl[0], config);
-    }
-    // when a form is right aligned and have input-group-btn's like date picker, time picker etc. adjust the css to not overlap the label on the icon
-    checkForRightAlignedForm() {
-        const $compositeEle = $(this.compositeEle);
-        if ($compositeEle.closest('.align-right').length && $compositeEle.find('.input-group-btn').length) {
-            const $label = $compositeEle.find('label');
-            if ($compositeEle.find('[wmdatetime]').length) { // for datetime picker, as there will be 2 icons css is different
-                $label.addClass('input-grp-dt-icon');
-            }
-            else {
-                $label.addClass('input-grp-icon');
-            }
-        }
-    }
-    ngAfterViewInit() {
-        this.compositeEle = this.nativeEl;
-        const widget = this.nativeEl.widget;
-        let captionPosition = widget.$attrs.get('captionposition');
-        if (widget.form) {
-            captionPosition = widget.form.$attrs.get('captionposition');
-            this.compositeEle = this.nativeEl.querySelector('.app-composite-widget');
-            this._isPlaceholderBound = this.nativeEl.getAttribute('placeholder.bind');
-        }
-        if (captionPosition === 'floating') {
-            if (widget.form) { // for form-fields remove caption-floating and replace it with caption-float or caption-top
-                const widgetType = this.nativeEl.getAttribute('widgettype'); // fetches the form field type
-                if (this.skipFloatPositionWidgets.indexOf(widgetType) > -1) {
-                    this.compositeEle.classList.remove('caption-floating');
-                    this.compositeEle.classList.add('caption-top');
-                }
-                this.checkForRightAlignedForm();
-            }
-            this.inputEl = $(this.nativeEl).find('input, select, textarea');
-            if (!this._isPlaceholderBound) {
-                this._isPlaceholderBound = this.inputEl.closest('[widget-id]').attr('placeholder.bind');
-            }
-            // call the below function to apply float-active class when there are default values to the fields
-            setTimeout(this.setDefaultValueAnimation.bind(this), 0);
-            this.inputEl.focus(this.onFocusCb.bind(this));
-            this.inputEl.blur(this.onBlurCb.bind(this));
-            // observe for placeholder attribute change when placeholder is bound via db variable or an expression
-            if (this._isPlaceholderBound) {
-                this.observeForPlaceholderAttrChange();
-            }
-        }
-    }
-    // captionPositionAnimate is only notified for date-time, time and search widgets as input el is not updated with value on selection of dropdown/popups
-    ngOnInit() {
-        this.labelAnimationSubscription = this.app.subscribe('captionPositionAnimate', (data) => {
-            // displayVal is true when there is a value entered in the input field
-            // In case of form fields, when the field is in focus, isFocused will be set as true
-            // isSelectMultiple is set to true when for select widget, multiple option is enabled
-            // Checking inputEl focus - when form is represented as dialog and the first field is automatically in focus
-            const isInputElFocused = this.inputEl && this.inputEl.is(':focus');
-            if (data.displayVal || data.isFocused || data.isSelectMultiple || isInputElFocused) {
-                data.nativeEl.addClass('float-active');
-                if (!data.displayVal && isInputElFocused) {
-                    this.inputEl.attr('placeholder', this.placeholder);
-                }
-            }
-            else {
-                data.nativeEl.removeClass('float-active');
-                // Remove placeholder on removing float-active, if not the label and placeholder are collided
-                // before placeholder is removed assign it to the placeholder variable
-                // check for placeholder in inputel and selectel
-                if (this.inputEl) {
-                    const selectEl = this.inputEl.find('option:first');
-                    if (this.inputEl.attr('placeholder') || selectEl.text()) {
-                        if (selectEl.length) {
-                            selectEl.text('');
-                        }
-                        else {
-                            this.placeholder = this.inputEl.attr('placeholder');
-                            this.inputEl.removeAttr('placeholder');
-                        }
-                    }
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        if (this.labelAnimationSubscription) {
-            this.labelAnimationSubscription();
-        }
-        if (this._attrObserver) {
-            this._attrObserver.disconnect();
-        }
-    }
-    static { this.ɵfac = function CaptionPositionDirective_Factory(t) { return new (t || CaptionPositionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CaptionPositionDirective, selectors: [["", "wmCaptionPosition", ""]] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaptionPositionDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[wmCaptionPosition]'
-            }]
-    }], () => [{ type: i0.Injector }, { type: i1$1.App }], null); })();
-
-const components = [
-    ButtonComponent,
-    ButtonGroupDirective,
-    CaptionPositionDirective,
-    CheckboxComponent,
-    CheckboxsetComponent,
-    CompositeDirective,
-    NumberComponent,
-    RadiosetComponent,
-    SelectComponent,
-    SwitchComponent,
-    InputCalendarComponent,
-    InputColorComponent,
-    InputEmailComponent,
-    InputNumberComponent,
-    InputTextComponent,
-    TextareaComponent
-];
-class InputModule {
-    static { this.ɵfac = function InputModule_Factory(t) { return new (t || InputModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: InputModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
-            FormsModule,
-            WmComponentsModule,
-            IMaskModule] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputModule, [{
-        type: NgModule,
-        args: [{
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    WmComponentsModule,
-                    IMaskModule
-                ],
-                declarations: [...components],
-                exports: [...components]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(InputModule, { declarations: [ButtonComponent,
-        ButtonGroupDirective,
-        CaptionPositionDirective,
-        CheckboxComponent,
-        CheckboxsetComponent,
-        CompositeDirective,
-        NumberComponent,
-        RadiosetComponent,
-        SelectComponent,
-        SwitchComponent,
-        InputCalendarComponent,
-        InputColorComponent,
-        InputEmailComponent,
-        InputNumberComponent,
-        InputTextComponent,
-        TextareaComponent], imports: [CommonModule,
-        FormsModule,
-        WmComponentsModule,
-        IMaskModule], exports: [ButtonComponent,
-        ButtonGroupDirective,
-        CaptionPositionDirective,
-        CheckboxComponent,
-        CheckboxsetComponent,
-        CompositeDirective,
-        NumberComponent,
-        RadiosetComponent,
-        SelectComponent,
-        SwitchComponent,
-        InputCalendarComponent,
-        InputColorComponent,
-        InputEmailComponent,
-        InputNumberComponent,
-        InputTextComponent,
-        TextareaComponent] }); })();
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { BaseFormComponent, BaseFormCustomComponent, ButtonComponent, ButtonGroupDirective, CaptionPositionDirective, CheckboxComponent, CheckboxsetComponent, CompositeDirective, DatasetAwareFormComponent, InputCalendarComponent, InputColorComponent, InputEmailComponent, InputModule, InputNumberComponent, InputTextComponent, NumberComponent, NumberLocale, RadiosetComponent, SelectComponent, SwitchComponent, TextareaComponent, unStringify };
-//# sourceMappingURL=index.mjs.map