@wavemaker/app-ng-runtime 11.9.0-next.24953 → 11.9.0-next.24958

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

@@ -1241,6 +1241,7 @@ const numberProps = new Map([
     ['trailingzero', { value: false, ...PROP_BOOLEAN }],
     ['updateon', PROP_STRING],
     ['inputmode', { value: 'natural', ...PROP_STRING }],
+    ['decimalplaces', PROP_NUMBER],
     ['conditionalclass', PROP_ANY],
     ['conditionalstyle', PROP_ANY]
 ]);
@@ -1367,8 +1368,27 @@ let NumberLocale = class NumberLocale extends BaseInput {
         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);
+            let decimalPlacesAttrVal = this.getAttr('decimalplaces');
+            const decimalplaces = decimalPlacesAttrVal !== '' && decimalPlacesAttrVal !== undefined ? Number(decimalPlacesAttrVal) : NaN;
+            if (this.inputmode === INPUTMODE.NATURAL && !isNaN(decimalplaces)) {
+                if (decimalplaces === 0) {
+                    this.decimalValue = '';
+                    value = isLocalizedNumber ? parts[0] : this.transformNumber(parts[0]);
+                }
+                if (decimalplaces > 0) {
+                    this.decimalValue = parts[1] && parts[1].substring(0, decimalplaces) || '';
+                    if (isLocalizedNumber) {
+                        value = this.decimalValue.length ? `${parts[0]}${this.DECIMAL}${this.decimalValue}` : parts[0];
+                    }
+                    else {
+                        value = Number.parseFloat(String(value)).toFixed(decimalplaces);
+                    }
+                }
+            }
+            else {
+                this.decimalValue = parts[1] || '';
+                value = isLocalizedNumber ? value : this.transformNumber(value);
+            }
         }
         const numberReg = /\d/;
         const strVal = value.toString();
@@ -1417,8 +1437,14 @@ let NumberLocale = class NumberLocale extends BaseInput {
      */
     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))) {
+        let invalidDecimalPlaces = false;
+        if (this.inputmode === INPUTMODE.NATURAL && !isNaN(this.decimalplaces) && this.decimalplaces >= 0) {
+            invalidDecimalPlaces = this.countDecimals(val) > this.decimalplaces;
+        }
+        else if (!Number.isInteger(this.step) && this.countDecimals(val) > this.countDecimals(this.step)) {
+            invalidDecimalPlaces = true;
+        }
+        if (isNaN(val) || !isFinite(val) || invalidDecimalPlaces) {
             this.isInvalidNumber = true;
             return false;
         }
@@ -1527,6 +1553,9 @@ let NumberLocale = class NumberLocale extends BaseInput {
     }
     // This function returns the step length set in the studio
     stepLength() {
+        if (this.inputmode === 'INPUTMODE.NATURAL' && !isNaN(this.decimalplaces) && this.decimalplaces >= 0) {
+            return this.decimalplaces;
+        }
         const stepLen = this.step.toString().split('.');
         if (stepLen.length === 1) {
             return;
@@ -1609,11 +1638,10 @@ let NumberLocale = class NumberLocale extends BaseInput {
      * @returns {number}
      */
     countDecimals(value) {
-        if ((value % 1) !== 0) {
-            const decimalValue = value.toString().split('.')[1];
-            return decimalValue && decimalValue.length;
-        }
-        return 0;
+        const valueStr = value.toString();
+        const isLocalizedNumber = includes(valueStr, this.DECIMAL);
+        const parts = isLocalizedNumber ? valueStr.split(this.DECIMAL) : valueStr.split('.');
+        return parts[1] ? parts[1].length : 0;
     }
     /**
      * handles the arrow press event. Increases or decreases the number. triggered fom the template
@@ -1715,13 +1743,23 @@ let NumberLocale = class NumberLocale extends BaseInput {
         }
         // 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;
-        }
+        // 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;
         }
+        if (this.inputmode === INPUTMODE.NATURAL && !isNaN(this.decimalplaces)) {
+            if (this.decimalplaces === 0 && this.DECIMAL === $event.key) {
+                return false;
+            }
+            const parts = includes(inputValue, this.DECIMAL) ? inputValue.split(this.DECIMAL) : inputValue.split('.');
+            const isCursorPositionAtDecimalPlace = $event.target.selectionStart > parts[0].length;
+            if (this.decimalplaces > 0 && this.countDecimals(inputValue) >= this.decimalplaces && isCursorPositionAtDecimalPlace) {
+                return false;
+            }
+        }
         // comma cannot be entered consecutively
         if (includes(inputValue, ',') && inputValue[inputValue.length - 1] === ',' && $event.key === ',') {
             return false;
@@ -2312,7 +2350,7 @@ class SelectComponent extends DatasetAwareFormComponent {
                 provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(SelectComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(SelectComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 17, consts: [["select", ""], ["focus-target", "", 3, "ngModelChange", "change", "mousedown", "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"], [3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], [3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 18, consts: [["select", ""], ["focus-target", "", 3, "ngModelChange", "change", "mousedown", "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"], [3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], [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); });
@@ -2321,10 +2359,10 @@ class SelectComponent extends DatasetAwareFormComponent {
             i0.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
+            i0.ɵɵ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(16, _c2$4))("multiple", ctx.multiple)("autofocus", ctx.autofocus);
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(17, _c2$4))("multiple", ctx.multiple)("autofocus", ctx.autofocus);
+            i0.ɵɵattribute("accesskey", ctx.shortcutkey)("name", ctx.name)("aria-label", ctx.arialabel);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
             i0.ɵɵadvance();
@@ -2339,7 +2377,7 @@ class SelectComponent extends DatasetAwareFormComponent {
                     provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(SelectComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(SelectComponent)
-                ], template: "<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<select #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        (mousedown)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"arialabel\"\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            ></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        ></option>\n    </ng-container>\n</select>\n" }]
+                ], template: "<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<select #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [attr.accesskey]=\"shortcutkey\"\n        [(ngModel)]=\"modelByKey\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (mousedown)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"arialabel\"\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            ></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        ></option>\n    </ng-container>\n</select>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2396,7 +2434,8 @@ function SwitchComponent_a_1_Template(rf, ctx) { if (rf & 1) {
 } 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.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0.ɵɵpureFunction2(5, _c1$5, opt_r3.selected, ctx_r4.disabled));
+    i0.ɵɵattribute("aria-pressed", opt_r3.selected ? true : false);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass]);
     i0.ɵɵadvance();
@@ -2520,9 +2559,9 @@ class SwitchComponent extends DatasetAwareFormComponent {
     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.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [[1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", "role", "button", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], ["aria-hidden", "true", 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);", "role", "button", 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.ɵɵtemplate(1, SwitchComponent_a_1_Template, 3, 8, "a", 1);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(2, "span", 2);
             i0.ɵɵtemplate(3, SwitchComponent_i_3_Template, 1, 3, "i", 3);
@@ -2547,7 +2586,7 @@ class SwitchComponent extends DatasetAwareFormComponent {
         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" }]
+                ], exportAs: 'wmSwitch', template: "<div 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       role=\"button\"\n       [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n       [attr.aria-pressed]=\"opt.selected ? true : false\"\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 aria-hidden=\"true\" [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']
@@ -3213,9 +3252,10 @@ class CaptionPositionDirective {
     }
     // 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') &&
+        const selectElPlaceholderOption = this.nativeEl.querySelector('#placeholderOption');
+        if (selectElPlaceholderOption && selectElPlaceholderOption.textContent && !$(this.nativeEl).find('select').is(':focus') &&
             !$(this.inputEl.closest('[widget-id]')).attr('datavalue')) {
-            $(this.nativeEl).find('select option:selected').text('');
+            selectElPlaceholderOption.textContent = '';
         }
     }
     setDefaultValueAnimation() {
@@ -3317,10 +3357,10 @@ class CaptionPositionDirective {
                 // 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('');
+                    const selectElPlaceholderOption = this.nativeEl.querySelector('#placeholderOption');
+                    if (this.inputEl.attr('placeholder') || selectElPlaceholderOption) {
+                        if (selectElPlaceholderOption) {
+                            selectElPlaceholderOption.textContent = '';
                         }
                         else {
                             this.placeholder = this.inputEl.attr('placeholder');