@wavemaker/app-ng-runtime 11.6.0-next.40753 → 11.6.0-next.41002

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

@@ -9,7 +9,7 @@ import { IMaskDirective, IMaskModule } from 'angular-imask';
 import * as i2 from '@wm/components/base';
 import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, DISPLAY_TYPE, StylableComponent, styler, provideAsWidgetRef, APPLY_STYLES_TYPE, WidgetConfig, registerFormWidget, provideAs, extractDataAsArray, ToDatePipe, ALLFIELDS, getOrderedDataset, convertDataToObject, transformDataWithKeys, transformFormData, getUniqObjsByDataField, groupData, handleHeaderClick, toggleAllHeaders, WidgetRef, INPUTMODE, WmComponentsModule } from '@wm/components/base';
 import * as i1$1 from '@wm/core';
-import { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, debounce, $appDigest, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, setAttr, removeAttr, setCSS } from '@wm/core';
+import { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, debounce, $appDigest, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, setAttr, removeAttr, isIos, setCSS } from '@wm/core';
 import { Subject } from 'rxjs';
 
 const registerProps$e = () => {
@@ -2210,59 +2210,68 @@ const registerProps$7 = () => {
 };
 
 const _c0$7 = ["select"];
+function SelectComponent_option_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "option", 4);
+    }
+    if (rf & 2) {
+        const ctx_r1 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("textContent", ctx_r1.placeholder)("hidden", !ctx_r1.placeholder);
+    }
+}
 function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "option", 7);
+        i0.ɵɵelement(0, "option", 8);
     }
     if (rf & 2) {
-        const item_r6 = ctx.$implicit;
-        i0.ɵɵproperty("value", item_r6.key)("selected", item_r6.selected)("textContent", item_r6.label);
+        const item_r7 = ctx.$implicit;
+        i0.ɵɵproperty("value", item_r7.key)("selected", item_r7.selected)("textContent", item_r7.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.ɵɵelementStart(0, "optgroup", 6);
+        i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 7);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const groupObj_r4 = ctx.$implicit;
-        i0.ɵɵproperty("label", groupObj_r4.key);
+        const groupObj_r5 = ctx.$implicit;
+        i0.ɵɵproperty("label", groupObj_r5.key);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", groupObj_r4.data);
+        i0.ɵɵproperty("ngForOf", groupObj_r5.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.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 5);
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
+        const ctx_r2 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx_r1.groupedData);
+        i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
     }
 }
 function SelectComponent_ng_container_4_option_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "option", 7);
+        i0.ɵɵelement(0, "option", 8);
     }
     if (rf & 2) {
-        const item_r8 = ctx.$implicit;
-        i0.ɵɵproperty("value", item_r8.key)("selected", item_r8.selected)("textContent", item_r8.label);
+        const item_r9 = ctx.$implicit;
+        i0.ɵɵproperty("value", item_r9.key)("selected", item_r9.selected)("textContent", item_r9.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.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 7);
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
-        const ctx_r2 = i0.ɵɵnextContext();
+        const ctx_r3 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
+        i0.ɵɵproperty("ngForOf", ctx_r3.datasetItems);
     }
 }
 const _c1$6 = function (a1) { return ["app-select form-control", a1]; };
@@ -2273,13 +2282,17 @@ class SelectComponent extends DatasetAwareFormComponent {
             this.datavalue = ds.execute(DataSource.Operation.GET_DEFAULT_LOCALE);
         }
     }
-    constructor(inj) {
+    constructor(inj, app) {
         super(inj, WIDGET_CONFIG$7);
+        this.app = app;
         this.acceptsArray = true;
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
         styler(this.selectEl.nativeElement, this);
+        setTimeout(() => {
+            this.checkForFloatingLabel(null);
+        }, 10);
     }
     // Change event is registered from the template, Prevent the framework from registering one more event
     handleEvent(node, eventName, eventCallback, locals) {
@@ -2326,6 +2339,9 @@ class SelectComponent extends DatasetAwareFormComponent {
         }
         super.onPropertyChange(key, nv, ov);
     }
+    isIosPlatform() {
+        return isIos();
+    }
     /**
      * 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
@@ -2335,18 +2351,27 @@ class SelectComponent extends DatasetAwareFormComponent {
     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))) {
-                $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
+            if ((!$event || $event.type === 'focus') && (($(this.selectEl).find('select option:selected').text() === '' && (this.placeholder || this.datavalue || this.isIosPlatform())))) {
+                if (!$event && (this.placeholder || this.datavalue || this.isIosPlatform())) {
+                    this.app.notify('captionPositionAnimate', { isSelect: true, nativeEl: captionEl });
+                }
+                if (this.placeholder) {
+                    $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
+                }
             }
             else if (!this.datavalue) {
-                $(this.selectEl.nativeElement).find('option:selected').text('');
-                captionEl.removeClass('float-active');
+                if (!this.placeholder) {
+                    //  $(this.selectEl.nativeElement).find('option:first').text('');
+                    if (!this.isIosPlatform()) {
+                        captionEl.removeClass('float-active');
+                    }
+                }
             }
         }
     }
 }
 SelectComponent.initializeProps = registerProps$7();
-SelectComponent.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+SelectComponent.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App)); };
 SelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectComponent, selectors: [["wm-select"]], viewQuery: function SelectComponent_Query(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵviewQuery(_c0$7, 7, ElementRef);
@@ -2359,20 +2384,20 @@ SelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectCompo
             provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
             provideAs(SelectComponent, NG_VALIDATORS, true),
             provideAsWidgetRef(SelectComponent)
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 16, consts: [["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus", "ngModelChange", "change", "focus", "blur"], ["select", ""], ["selected", "", "value", "undefined", 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) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 15, consts: [["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus", "ngModelChange", "change", "focus", "blur"], ["select", ""], ["value", "undefined", 3, "textContent", "hidden", 4, "ngIf"], [4, "ngIf"], ["value", "undefined", 3, "textContent", "hidden"], [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) {
             i0.ɵɵelementStart(0, "select", 0, 1);
             i0.ɵɵlistener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { return ctx.modelByKey = $event; })("change", function SelectComponent_Template_select_change_0_listener($event) { return ctx.onSelectValueChange($event); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { return ctx.checkForFloatingLabel($event); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { ctx.invokeOnTouched($event); return ctx.checkForFloatingLabel($event); });
-            i0.ɵɵelement(2, "option", 2);
+            i0.ɵɵtemplate(2, SelectComponent_option_2_Template, 1, 2, "option", 2);
             i0.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3);
             i0.ɵɵtemplate(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)("ngModel", ctx.modelByKey)("multiple", ctx.multiple)("autofocus", ctx.autofocus);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex)("ngModel", ctx.modelByKey)("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.ɵɵproperty("ngIf", !ctx.isIosPlatform() || !!ctx.placeholder);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.groupby);
             i0.ɵɵadvance(1);
@@ -2386,8 +2411,8 @@ SelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectCompo
                         provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                         provideAs(SelectComponent, NG_VALIDATORS, true),
                         provideAsWidgetRef(SelectComponent)
-                    ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\"\n>\n    <option selected\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n    [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" }]
-        }], function () { return [{ type: i0.Injector }]; }, { selectEl: [{
+                    ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\"\n>\n    <option\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n            *ngIf=\"!isIosPlatform() || !!placeholder\"\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" }]
+        }], function () { return [{ type: i0.Injector }, { type: i1$1.App }]; }, { selectEl: [{
                 type: ViewChild,
                 args: ['select', { static: true, read: ElementRef }]
             }] });
@@ -3338,7 +3363,7 @@ class CaptionPositionDirective {
             // 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) {
+            if (data.isSelect || data.displayVal || data.isFocused || data.isSelectMultiple || isInputElFocused) {
                 data.nativeEl.addClass('float-active');
                 if (!data.displayVal && isInputElFocused) {
                     this.inputEl.attr('placeholder', this.placeholder);