@wavemaker/app-ng-runtime 11.8.0-rc.5666 → 11.8.0-rc.5668

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

@@ -0,0 +1,3385 @@
+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$8 = [".caret"];
+const _c3$3 = (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$3, 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$8, 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$7 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
+const _c3$2 = () => ({ standalone: true });
+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: 19, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "ngModelOptions", "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(14, _c2$7, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(18, _c3$2))("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           [ngModelOptions]=\"{standalone: true}\"\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$6 = 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$6, 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$6, 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$6, 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$6, 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: '',
+            standalone: true
+        };
+        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$5 = 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$5, 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$5, 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$5, 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$5, 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];
+const _c2$4 = () => ({ standalone: true });
+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: 18, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "ngModelOptions", "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(15, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(17, _c2$4))("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        [ngModelOptions]=\"{standalone: true}\"\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$3 = 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$3, 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 _c2$2 = () => ({ standalone: true });
+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: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "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("ngModelOptions", i0.ɵɵpureFunction0(18, _c2$2))("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       [ngModelOptions]=\"{standalone: true}\"\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 _c2$1 = () => ({ standalone: true });
+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: 16, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "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("ngModelOptions", i0.ɵɵpureFunction0(15, _c2$1))("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       [ngModelOptions]=\"{standalone: true}\"\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