@wavemaker/app-runtime-wm-build 11.4.3-next.30202 → 11.4.3-rc.126

app-runtime-wm-build/wmapp/scripts/wm-loader.js

@@ -4976,7 +4976,7 @@
             if (!_.get(parsedObj, [ stateParam ]) && !_.get(parsedObj, key)) {
                 return;
             }
-            if (_.get(parsedObj, stateParam + "." + key)) {
+            if (_.get(parsedObj, stateParam + "." + key) || parsedObj && parsedObj[stateParam] && parsedObj[stateParam][key]) {
                 if (subParam) {
                     delete parsedObj[stateParam][key][subParam];
                 } else {
@@ -7243,14 +7243,14 @@
             }
             return new http.HttpRequest(options.method, options.url, third, fourth);
         };
-        HttpServiceImpl.prototype.sendCallAsObservable = function(options) {
+        HttpServiceImpl.prototype.sendCallAsObservable = function(options, params) {
             var req = this.generateRequest(options);
             return this.httpClient.request(req);
         };
-        HttpServiceImpl.prototype.sendCall = function(requestParams, variable) {
+        HttpServiceImpl.prototype.sendCall = function(requestParams, variable, params) {
             var _this = this;
             return new Promise((function(resolve, reject) {
-                variable._observable = _this.sendCallAsObservable(requestParams).subscribe((function(response) {
+                variable._observable = _this.sendCallAsObservable(requestParams, params).subscribe((function(response) {
                     if (response && response.type) {
                         resolve(response);
                     }
@@ -12533,7 +12533,11 @@
             };
             this.widgetControl.setAsyncValidators([ this._asyncValidatorFn() ]);
             if (this.widgetContext.ngform.touched) {
-                this.widgetControl.updateValueAndValidity();
+                var opt = {};
+                if (this.formwidget && this.instance.value === this.formwidget.prevDatavalue) {
+                    opt["emitEvent"] = false;
+                }
+                this.widgetControl.updateValueAndValidity(opt);
             }
         };
         BaseFieldValidations.prototype.isDefaultValidator = function(type) {
@@ -12590,8 +12594,12 @@
         BaseFieldValidations.prototype.validate = function() {
             this.applyDefaultValidators();
             if (this._asyncValidatorFn) {
+                var opt = {};
+                if (this.formwidget && this.instance.value === this.formwidget.prevDatavalue) {
+                    opt["emitEvent"] = false;
+                }
                 this.widgetControl.setAsyncValidators([ this._asyncValidatorFn() ]);
-                this.widgetControl.updateValueAndValidity();
+                this.widgetControl.updateValueAndValidity(opt);
             }
             if (this.widgetContext.ngform.touched) {
                 this.widgetControl.markAsTouched();
@@ -12610,8 +12618,12 @@
         };
         BaseFieldValidations.prototype.applyDefaultValidators = function() {
             var validators = this.getDefaultValidators();
+            var opt = {};
+            if (this.formwidget && this.instance.value === this.formwidget.prevDatavalue) {
+                opt["emitEvent"] = false;
+            }
             this.widgetControl.setValidators(_.concat(this._syncValidators || [], validators));
-            this.widgetControl.updateValueAndValidity();
+            this.widgetControl.updateValueAndValidity(opt);
             this.setCustomValidationMessage();
         };
         BaseFieldValidations.prototype.setCustomValidationMessage = function() {
@@ -14513,7 +14525,7 @@
         return {
             pre: function(attrs) {
                 var counter = idGen$c.nextUid();
-                return "<" + tagName$P + " wmButton #" + counter + '="wmButton" [attr.aria-label]="' + counter + ".hint || " + counter + '.caption" ' + transpiler.getAttrMarkup(attrs) + ">";
+                return "<" + tagName$P + " wmButton #" + counter + '="wmButton" [attr.aria-label]="' + counter + ".hint || " + counter + '.caption || null" ' + transpiler.getAttrMarkup(attrs) + ">";
             },
             post: function() {
                 return "</" + tagName$P + ">";
@@ -17071,7 +17083,9 @@
         };
         BaseFormCustomComponent.prototype.invokeOnChange = function(value, $event, valid) {
             this._onChange(value);
-            _super.prototype.invokeOnChange.call(this, value, $event);
+            if (valid) {
+                _super.prototype.invokeOnChange.call(this, value, $event);
+            }
         };
         BaseFormCustomComponent.prototype.invokeOnTouched = function($event) {
             this._onTouched();
@@ -22705,7 +22719,7 @@
         type: core$1.Component,
         args: [ {
             selector: "[wmSearch]",
-            template: '<ng-template #customItemTemplate let-model="item" let-index="index" let-query="query" let-match="match">\n    \x3c!-- Default item template --\x3e\n    <a *ngIf="!content">\n        <img *ngIf="model.imgSrc" [src]="model.imgSrc" alt="Search" [style.width]="imagewidth">\n        <span [title]="model.label" [innerHtml]="highlight(match, query) || model.label"></span>\n    </a>\n    \x3c!-- Custom partial template --\x3e\n    <a *ngIf="content" [ngClass]="{customTemplate: content}" partialContainer [wmItemTemplate]="content" [userComponentParams]="match.item">\n        <div partial-container-target></div>\n    </a>\n</ng-template>\n\n<ng-template #customListTemplate let-matches="matches" let-itemTemplate="itemTemplate" let-query="query">\n    <ul #ulElement class="app-search dropdown-menu" scrollable>\n        <li #liElements *ngFor="let match of matches" [ngClass]="{active: typeaheadContainer && typeaheadContainer.isActive(match), \'list-group-header\': match && match.isHeader()}"\n            (mouseenter)="typeaheadContainer.selectActive(match);"\n            (click)="match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();">\n            \x3c!-- itemTemplate comes from the <input> --\x3e\n            <h4 *ngIf="match.isHeader()" class="group-title">{{match.value}}</h4>\n            <ng-container *ngIf="!match.isHeader()" [ngTemplateOutlet]="itemTemplate"\n                          [ngTemplateOutletContext]="{item: match.item, index: i, match: match, query: query}">\n            </ng-container>\n        </li>\n        <div class="status" [hidden]="_loadingItems || !(datacompletemsg && dataProvider.isLastPage)">\n            <span [textContent]="datacompletemsg"></span>\n        </div>\n        <div class="status" [hidden]="!_loadingItems">\n            <i class="fa fa-circle-o-notch fa-spin"></i>\n            <span [textContent]="loadingdatamsg"></span>\n        </div>\n    </ul>\n</ng-template>\n\n\x3c!--This template is for search inside mobile navbar.--\x3e\n<ng-container *ngIf="navsearchbar; else searchTemplate">\n    <input [title]="query || \'\'" type="text" class="app-textbox form-control list-of-objs app-search-input" [placeholder]="placeholder || \'\'"\n           focus-target\n           container="body"\n           [disabled]="disabled"\n           autocomplete="off"\n           [(ngModel)]="query"\n           [readonly]="readonly"\n           [disabled]="disabled"\n           [typeahead]="typeaheadDataSource"\n           [typeaheadWaitMs]="debouncetime"\n           [typeaheadItemTemplate]="customItemTemplate"\n           [optionsListTemplate]="customListTemplate"\n           (input)="onInputChange($event)"\n           (keydown)="listenQuery = true"\n           (keydown.enter)="$typeaheadEvent = $event;handleEnterEvent($event)"\n           (keydown.arrowdown)="selectNext($event)"\n           (blur)="invokeOnTouched($event)"\n           (click)="handleFocus($event);"\n           (focus)="_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);"\n           (focusout)="onFocusOut()"\n           [typeaheadMinLength]="minchars"\n           [typeaheadOptionsLimit]="limit"\n           (typeaheadLoading)="_loadingItems"\n           (typeaheadOnSelect)="typeaheadOnSelect($event)"\n           typeaheadOptionField="label"\n           [typeaheadGroupField]="groupby ? \'groupby\' : null"\n           [typeaheadAsync]="true"\n           [typeaheadScrollable]="true"\n           [typeaheadOptionsInScrollableView]="optionslimitinscrollableview"\n           [dropup]="dropup"\n           [tabindex]="tabindex"\n           [attr.name]="name"\n           [attr.aria-label]="hint || \'Search field\'"/>\n    <i class="btn-close wi wi-cancel" [hidden]="!showClosebtn" (click)="clearSearch($event);"></i>\n</ng-container>\n\x3c!--This template is for both web and fullscreen mode in mobile.--\x3e\n<ng-template #searchTemplate>\n    <span class="wi wi-arrow-left form-control-feedback back-btn" aria-hidden="true" (click)="closeSearch()"></span>\n    <span class="sr-only">Back button</span>\n    <input [title]="query || \'\'" type="text" class="app-textbox form-control list-of-objs app-search-input" [placeholder]="placeholder || \'\'"\n           focus-target\n           [container]="containerTarget || \'body\'"\n           [disabled]="disabled"\n           autocomplete="off"\n           [(ngModel)]="query"\n           [readonly]="readonly"\n           [typeahead]="typeaheadDataSource"\n           [typeaheadWaitMs]="debouncetime"\n           [typeaheadItemTemplate]="customItemTemplate"\n           [optionsListTemplate]="customListTemplate"\n           (input)="onInputChange($event)"\n           (keydown)="listenQuery = true"\n           (keydown.enter)="$typeaheadEvent = $event;handleEnterEvent($event)"\n           (keydown.arrowdown)="selectNext($event)"\n           (blur)="invokeOnTouched($event); onFocusOut()"\n           (click)="handleFocus($event);"\n           (focus)="_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)"\n           [typeaheadMinLength]="minchars"\n           [typeaheadOptionsLimit]="limit"\n           (typeaheadLoading)="_loadingItems"\n           (typeaheadOnSelect)="typeaheadOnSelect($event)"\n           typeaheadOptionField="label"\n           [typeaheadGroupField]="groupby ? \'groupby\' : null"\n           [typeaheadAsync]="true"\n           [typeaheadScrollable]="true"\n           [typeaheadOptionsInScrollableView]="optionslimitinscrollableview"\n           [tabindex]="tabindex"\n           [dropup]="dropup"\n           [attr.name]="name"\n           [attr.aria-label]="hint || \'Search field\'">\n    <input class="model-holder" ng-model="proxyModel" ng-required="required" tabindex="-1" aria-hidden="true">\n    <span *ngIf="_loadingItems" aria-hidden="true" class="fa fa-circle-o-notch fa-spin form-control-feedback"></span>\n    <span class="wi wi-close form-control-feedback clear-btn" [ngClass]="{\'show-btn\': isQueryEntered()}" (click)="clearSearch($event, true)"></span>\n    <span class="sr-only">Clear button</span>\n    <span *ngIf="showsearchicon" class="input-group-addon" aria-label="search icon" [ngClass]="{\'disabled\': disabled}">\n        <form>\n            <button title="Search" [disabled]="disabled" class="app-search-button wm-sl-l sl-search" type="submit"\n                    (click)="onSearchSelect($event)"></button>\n        </form>\n    </span>\n</ng-template>\n',
+            template: '<ng-template #customItemTemplate let-model="item" let-index="index" let-query="query" let-match="match">\n    \x3c!-- Default item template --\x3e\n    <a *ngIf="!content">\n        <img *ngIf="model.imgSrc" [src]="model.imgSrc" alt="Search" [style.width]="imagewidth">\n        <span [title]="model.label" [innerHtml]="highlight(match, query) || model.label"></span>\n    </a>\n    \x3c!-- Custom partial template --\x3e\n    <a *ngIf="content" [ngClass]="{customTemplate: content}" partialContainer [wmItemTemplate]="content" [userComponentParams]="match.item">\n        <div partial-container-target></div>\n    </a>\n</ng-template>\n\n<ng-template #customListTemplate let-matches="matches" let-itemTemplate="itemTemplate" let-query="query">\n    <ul #ulElement class="app-search dropdown-menu" scrollable>\n        <li #liElements *ngFor="let match of matches" [ngClass]="{active: typeaheadContainer && typeaheadContainer.isActive(match), \'list-group-header\': match && match.isHeader()}"\n            (mouseenter)="typeaheadContainer.selectActive(match);"\n            (click)="match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();">\n            \x3c!-- itemTemplate comes from the <input> --\x3e\n            <h4 *ngIf="match.isHeader()" class="group-title">{{match.value}}</h4>\n            <ng-container *ngIf="!match.isHeader()" [ngTemplateOutlet]="itemTemplate"\n                          [ngTemplateOutletContext]="{item: match.item, index: i, match: match, query: query}">\n            </ng-container>\n        </li>\n        <div class="status" [hidden]="_loadingItems || !(datacompletemsg && dataProvider.isLastPage)">\n            <span [textContent]="datacompletemsg"></span>\n        </div>\n        <div class="status" [hidden]="!_loadingItems">\n            <i class="fa fa-circle-o-notch fa-spin"></i>\n            <span [textContent]="loadingdatamsg"></span>\n        </div>\n    </ul>\n</ng-template>\n\n\x3c!--This template is for search inside mobile navbar.--\x3e\n<ng-container *ngIf="navsearchbar; else searchTemplate">\n    <input [title]="query || \'\'" type="text" class="app-textbox form-control list-of-objs app-search-input" [placeholder]="placeholder || \'\'"\n           focus-target\n           container="body"\n           [disabled]="disabled"\n           autocomplete="off"\n           [(ngModel)]="query"\n           [readonly]="readonly"\n           [disabled]="disabled"\n           [typeahead]="typeaheadDataSource"\n           [typeaheadWaitMs]="debouncetime"\n           [typeaheadItemTemplate]="customItemTemplate"\n           [optionsListTemplate]="customListTemplate"\n           (input)="onInputChange($event)"\n           (keydown)="listenQuery = true"\n           (keydown.enter)="$typeaheadEvent = $event;handleEnterEvent($event)"\n           (keydown.arrowdown)="selectNext($event)"\n           (blur)="invokeOnTouched($event)"\n           (click)="handleFocus($event);"\n           (focus)="_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);"\n           (focusout)="onFocusOut()"\n           [typeaheadMinLength]="minchars"\n           [typeaheadOptionsLimit]="limit"\n           (typeaheadLoading)="_loadingItems"\n           (typeaheadOnSelect)="typeaheadOnSelect($event)"\n           typeaheadOptionField="label"\n           [typeaheadGroupField]="groupby ? \'groupby\' : null"\n           [typeaheadAsync]="true"\n           [typeaheadScrollable]="true"\n           [adaptivePosition]="true"\n           [typeaheadOptionsInScrollableView]="optionslimitinscrollableview"\n           [dropup]="dropup"\n           [tabindex]="tabindex"\n           [attr.name]="name"\n           [attr.aria-label]="hint || \'Search field\'"/>\n    <i class="btn-close wi wi-cancel" [hidden]="!showClosebtn" (click)="clearSearch($event);"></i>\n</ng-container>\n\x3c!--This template is for both web and fullscreen mode in mobile.--\x3e\n<ng-template #searchTemplate>\n    <span class="wi wi-arrow-left form-control-feedback back-btn" aria-hidden="true" (click)="closeSearch()"></span>\n    <span class="sr-only">Back button</span>\n    <input [title]="query || \'\'" type="text" class="app-textbox form-control list-of-objs app-search-input" [placeholder]="placeholder || \'\'"\n           focus-target\n           [container]="containerTarget || \'body\'"\n           [disabled]="disabled"\n           autocomplete="off"\n           [(ngModel)]="query"\n           [readonly]="readonly"\n           [typeahead]="typeaheadDataSource"\n           [typeaheadWaitMs]="debouncetime"\n           [typeaheadItemTemplate]="customItemTemplate"\n           [optionsListTemplate]="customListTemplate"\n           (input)="onInputChange($event)"\n           (keydown)="listenQuery = true"\n           (keydown.enter)="$typeaheadEvent = $event;handleEnterEvent($event)"\n           (keydown.arrowdown)="selectNext($event)"\n           (blur)="invokeOnTouched($event); onFocusOut()"\n           (click)="handleFocus($event);"\n           (focus)="_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)"\n           [typeaheadMinLength]="minchars"\n           [typeaheadOptionsLimit]="limit"\n           (typeaheadLoading)="_loadingItems"\n           (typeaheadOnSelect)="typeaheadOnSelect($event)"\n           typeaheadOptionField="label"\n           [typeaheadGroupField]="groupby ? \'groupby\' : null"\n           [typeaheadAsync]="true"\n           [typeaheadScrollable]="true"\n           [adaptivePosition]="true"\n           [typeaheadOptionsInScrollableView]="optionslimitinscrollableview"\n           [tabindex]="tabindex"\n           [dropup]="dropup"\n           [attr.name]="name"\n           [attr.aria-label]="hint || \'Search field\'">\n    <input class="model-holder" ng-model="proxyModel" ng-required="required" tabindex="-1" aria-hidden="true">\n    <span *ngIf="_loadingItems" aria-hidden="true" class="fa fa-circle-o-notch fa-spin form-control-feedback"></span>\n    <span class="wi wi-close form-control-feedback clear-btn" [ngClass]="{\'show-btn\': isQueryEntered()}" (click)="clearSearch($event, true)"></span>\n    <span class="sr-only">Clear button</span>\n    <span *ngIf="showsearchicon" class="input-group-addon" aria-label="search icon" [ngClass]="{\'disabled\': disabled}">\n        <form>\n            <button title="Search" [disabled]="disabled" class="app-search-button wm-sl-l sl-search" type="submit"\n                    (click)="onSearchSelect($event)"></button>\n        </form>\n    </span>\n</ng-template>\n',
             providers: [ base.provideAs(SearchComponent, forms.NG_VALUE_ACCESSOR, true), base.provideAs(SearchComponent, forms.NG_VALIDATORS, true), base.provideAsWidgetRef(SearchComponent) ]
         } ]
     } ];
@@ -28148,7 +28162,7 @@
     }, base.PROP_BOOLEAN) ], [ "clearbutton", Object.assign({
         value: true
     }, base.PROP_BOOLEAN) ], [ "adaptiveposition", Object.assign({
-        value: false
+        value: true
     }, base.PROP_BOOLEAN) ], [ "todaybuttonlabel", Object.assign({
         value: "LABEL_TODAY_DATE"
     }, base.PROP_STRING) ], [ "clearbuttonlabel", Object.assign({
@@ -28237,6 +28251,8 @@
             if (isNativePicker === void 0) {
                 isNativePicker = false;
             }
+            this.datepattern = this.appDefaults.dateFormat || core$1.getDisplayDateTimeFormat(core$1.FormWidgetType.DATE);
+            this.updateFormat("datepattern");
             if (this.isEnterPressedOnDateInput) {
                 this.isEnterPressedOnDateInput = false;
                 return;
@@ -28342,6 +28358,8 @@
             }), 350);
         };
         DateComponent.prototype.onDisplayKeydown = function(event) {
+            this.datepattern = this.appDefaults.dateFormat || core$1.getDisplayDateTimeFormat(core$1.FormWidgetType.DATE);
+            this.updateFormat("datepattern");
             if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
                 event.stopPropagation();
                 var action = this.keyEventPlugin.constructor.getEventFullKey(event);
@@ -28374,6 +28392,8 @@
             }
         };
         DateComponent.prototype.onDateChange = function(newVal) {
+            this.datepattern = this.appDefaults.dateFormat || core$1.getDisplayDateTimeFormat(core$1.FormWidgetType.DATE);
+            this.updateFormat("datepattern");
             if (this._bsDefaultLoadCheck) {
                 this._bsDefaultLoadCheck = false;
                 return;
@@ -28442,7 +28462,7 @@
     }, base.PROP_BOOLEAN) ], [ "clearbutton", Object.assign({
         value: true
     }, base.PROP_BOOLEAN) ], [ "adaptiveposition", Object.assign({
-        value: false
+        value: true
     }, base.PROP_BOOLEAN) ], [ "todaybuttonlabel", Object.assign({
         value: "LABEL_TODAY_DATE"
     }, base.PROP_STRING) ], [ "clearbuttonlabel", Object.assign({
@@ -35686,7 +35706,10 @@
             value: "Link"
         }, base.PROP_STRING) ], [ "class", base.PROP_STRING ], [ "conditionalclass", base.PROP_ANY ], [ "content", base.PROP_STRING ], [ "contentanimation", base.PROP_STRING ], [ "contentsource", Object.assign({
             value: "partial"
-        }, base.PROP_STRING) ], [ "encodeurl", base.PROP_BOOLEAN ], [ "hint", base.PROP_STRING ], [ "hyperlink", base.PROP_STRING ], [ "iconclass", base.PROP_STRING ], [ "iconheight", base.PROP_STRING ], [ "iconmargin", base.PROP_STRING ], [ "iconposition", base.PROP_STRING ], [ "iconurl", base.PROP_STRING ], [ "iconwidth", base.PROP_STRING ], [ "interaction", Object.assign({
+        }, base.PROP_STRING) ], [ "encodeurl", base.PROP_BOOLEAN ], [ "hint", base.PROP_STRING ], [ "hyperlink", {
+            value: "javascript:void(0)",
+            PROP_STRING: base.PROP_STRING
+        } ], [ "iconclass", base.PROP_STRING ], [ "iconheight", base.PROP_STRING ], [ "iconmargin", base.PROP_STRING ], [ "iconposition", base.PROP_STRING ], [ "iconurl", base.PROP_STRING ], [ "iconwidth", base.PROP_STRING ], [ "interaction", Object.assign({
             value: "click"
         }, base.PROP_STRING) ], [ "name", base.PROP_STRING ], [ "popoverarrow", Object.assign({
             value: true
@@ -37150,7 +37173,7 @@
         type: core$1.Component,
         args: [ {
             selector: "div[wmAlertDialog]",
-            template: '<ng-template #dialogTemplate>\n    <div wmDialogHeader [closable]="closable"\n         [iconclass]="iconclass"\n         [iconurl]="iconurl"\n         [iconwidth]="iconwidth"\n         [iconheight]="iconheight"\n         [iconmargin]="iconmargin"\n         [heading]="title"\n         [titleid]="titleId"></div>\n    <div wmDialogBody>\n        <p class="app-dialog-message text-{{alerttype}}" [attr.aria-describedby]="message" [textContent]="message"></p>\n    </div>\n    <div wmDialogFooter>\n        <button wmButton class="btn-primary ok-action" caption.bind="oktext" aria-label="Submit button" (click)="onOk($event)"></button>\n    </div>\n</ng-template>\n',
+            template: '<ng-template #dialogTemplate>\n    <div wmDialogHeader [closable]="closable"\n         [iconclass]="iconclass"\n         [iconurl]="iconurl"\n         [iconwidth]="iconwidth"\n         [iconheight]="iconheight"\n         [iconmargin]="iconmargin"\n         [heading]="title"\n         [titleid]="titleId"></div>\n    <div wmDialogBody>\n        <p class="app-dialog-message text-{{alerttype}}" [textContent]="message"></p>\n    </div>\n    <div wmDialogFooter>\n        <button wmButton class="btn-primary ok-action" caption.bind="oktext" aria-label="Submit button" (click)="onOk($event)"></button>\n    </div>\n</ng-template>\n',
             providers: [ base.provideAsWidgetRef(AlertDialogComponent), base.provideAsDialogRef(AlertDialogComponent) ]
         } ]
     } ];
@@ -38073,10 +38096,9 @@
         value;
     }
     var registerProps = function() {
-        base.register("wm-dialog", new Map([ [ "animation", base.PROP_STRING ], [ "class", base.PROP_STRING ], [ "closable", {
-            value: true,
-            PROP_BOOLEAN: base.PROP_BOOLEAN
-        } ], [ "iconclass", {
+        base.register("wm-dialog", new Map([ [ "animation", base.PROP_STRING ], [ "class", base.PROP_STRING ], [ "closable", Object.assign({
+            value: true
+        }, base.PROP_BOOLEAN) ], [ "iconclass", {
             value: "wi wi-file-text",
             PROP_STRING: base.PROP_STRING
         } ], [ "iconheight", base.PROP_STRING ], [ "iconmargin", base.PROP_STRING ], [ "iconurl", base.PROP_STRING ], [ "iconwidth", base.PROP_STRING ], [ "modal", Object.assign({
@@ -38111,7 +38133,7 @@
             _this = _super.call(this, inj, WIDGET_INFO, {
                 class: DIALOG_CLS + " " + (dialogClass || ""),
                 backdrop: backdrop,
-                keyboard: !core.toBoolean(modal)
+                keyboard: core.toBoolean(closable) ? true : !core.toBoolean(modal)
             }) || this;
             return _this;
         }
@@ -46914,6 +46936,9 @@
                 }
             } else {
                 this.resetPageNavigation();
+                if (newVal === "" || newVal === undefined || _.get(this.datasource, "category") === "wm.Variable") {
+                    this.variableInflight = false;
+                }
                 if (!this.variableInflight) {
                     this.callDataGridMethod("setStatus", "nodata", this.nodatamessage);
                 }
@@ -47053,7 +47078,7 @@
         };
         TableComponent.prototype.setGridData = function(serverData) {
             var data = this.filternullrecords ? this.removeEmptyRecords(serverData) : serverData;
-            if (_.get(this.datasource, "category") === "wm.Variable") {
+            if (_.get(this.datasource, "category") === "wm.Variable" || _.get(this.datasource, "category") === undefined) {
                 this.variableInflight = false;
             }
             if (!this.variableInflight) {
@@ -64970,6 +64995,7 @@
             variables.wmSetDependency("oAuth", this.oAuthService);
             variables.wmSetDependency("security", this.securityService);
             variables.wmSetDependency("metadata", this.metadataService);
+            variables.wmSetDependency("http", this.httpService);
         }
         VariablesService.prototype.bulkCancel = function(collection) {
             Object.keys(collection).forEach((function(name) {