@wavemaker/app-runtime-wm-build 11.4.0-next.24568 → 11.4.0-next.24569

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11229,6 +11229,10 @@
11229
11229
  if (openedDialogs.indexOf(ref) !== -1) {
11230
11230
  openedDialogs.splice(openedDialogs.indexOf(ref), 1);
11231
11231
  }
11232
+ if (openedDialogs.length === 0 && (core$1.isMobile() || core$1.isMobileApp())) {
11233
+ var parentSelector = $("body > app-root")[0];
11234
+ parentSelector.removeAttribute("aria-hidden");
11235
+ }
11232
11236
  };
11233
11237
  DialogServiceImpl.prototype.getOpenedDialogs = function() {
11234
11238
  return openedDialogs;
@@ -14216,7 +14220,7 @@
14216
14220
  var eventsTmpl = widgetType === core.FormWidgetType.UPLOAD ? "" : getEventsTemplate(attrs);
14217
14221
  var controlLayout = core.isMobileApp() ? "col-xs-12" : "col-sm-12";
14218
14222
  var isInList = pCounter === (parentList && parentList.get("parent_form_reference"));
14219
- attrs.set("__errormsg", formFieldErrorMsgId);
14223
+ attrs.set("__validationId", formFieldErrorMsgId);
14220
14224
  attrs.set("__widgetType", widgetType);
14221
14225
  attrs.delete("widget");
14222
14226
  shared.set("counter", counter);
@@ -26920,22 +26924,24 @@
26920
26924
  configurable: true
26921
26925
  });
26922
26926
  DateTimePickerComponent.prototype.validateSelectedDate = function() {
26923
- var _a, _b, _c, _d, _e, _f, _g;
26927
+ var _a, _b, _c, _d, _e;
26924
26928
  if (!this.changedValue) {
26925
26929
  return true;
26926
26930
  }
26927
26931
  var cd = moment(this.changedValue);
26928
- if (((_a = this._bsDatepickerConfig) === null || _a === void 0 ? void 0 : _a.minDate) && ((_b = this._bsDatepickerConfig) === null || _b === void 0 ? void 0 : _b.minDate) > this.changedValue) {
26932
+ var minDate = (_a = this._bsDatepickerConfig) === null || _a === void 0 ? void 0 : _a.minDate;
26933
+ var maxDate = (_b = this._bsDatepickerConfig) === null || _b === void 0 ? void 0 : _b.maxDate;
26934
+ if (minDate && (this.mode === "DATE" && moment(minDate).startOf("day").toDate() > this.changedValue || this.mode !== "DATE" && minDate > this.changedValue)) {
26929
26935
  return false;
26930
26936
  }
26931
- if (((_c = this._bsDatepickerConfig) === null || _c === void 0 ? void 0 : _c.maxDate) && ((_d = this._bsDatepickerConfig) === null || _d === void 0 ? void 0 : _d.maxDate) < this.changedValue) {
26937
+ if (maxDate && (this.mode === "DATE" && moment(maxDate).endOf("day").toDate() < this.changedValue || this.mode !== "DATE" && maxDate < this.changedValue)) {
26932
26938
  return false;
26933
26939
  }
26934
- if (((_f = (_e = this._bsDatepickerConfig) === null || _e === void 0 ? void 0 : _e.daysDisabled) === null || _f === void 0 ? void 0 : _f.indexOf(cd.day())) >= 0) {
26940
+ if (((_d = (_c = this._bsDatepickerConfig) === null || _c === void 0 ? void 0 : _c.daysDisabled) === null || _d === void 0 ? void 0 : _d.indexOf(cd.day())) >= 0) {
26935
26941
  return false;
26936
26942
  }
26937
26943
  var cdSt = cd.startOf("day").toDate().getTime();
26938
- if ((_g = this.excludedDatesToDisable) === null || _g === void 0 ? void 0 : _g.find((function(d) {
26944
+ if ((_e = this.excludedDatesToDisable) === null || _e === void 0 ? void 0 : _e.find((function(d) {
26939
26945
  return d.getTime() === cdSt;
26940
26946
  }))) {
26941
26947
  return false;
@@ -26984,6 +26990,9 @@
26984
26990
  newVal.setMilliseconds(oldVal.getMilliseconds());
26985
26991
  }
26986
26992
  this.changedValue = newVal;
26993
+ if (this.mode === "DATE" && oldVal !== newVal && this.validateSelectedDate()) {
26994
+ this.onOkClick();
26995
+ }
26987
26996
  };
26988
26997
  DateTimePickerComponent.prototype.onTimeUpdate = function(newVal) {
26989
26998
  this.changedValue = newVal;
@@ -27005,6 +27014,10 @@
27005
27014
  this.triggerChange();
27006
27015
  this.hideModal();
27007
27016
  };
27017
+ DateTimePickerComponent.prototype.setToday = function() {
27018
+ var today = moment().startOf("day").toDate();
27019
+ this.onDateUpdate(today);
27020
+ };
27008
27021
  DateTimePickerComponent.prototype.reset = function() {
27009
27022
  this.changedValue = this._value;
27010
27023
  };
@@ -27039,7 +27052,7 @@
27039
27052
  type: core.Component,
27040
27053
  args: [ {
27041
27054
  selector: "wm-datetimepicker",
27042
- template: ' \n <ng-template #datetimepickerTemplate>\n <div class="app-datetime-picker">\n <div class="modal-body">\n <div class="mobile-datetime-picker-options">\n \n </div>\n <bs-datepicker-inline\n [bsConfig]="bsDatepickerConfig"\n [datesDisabled]="excludedDatesToDisable"\n bsDatepicker\n [bsValue]="changedValue"\n (bsValueChange)="onDateUpdate($event)"\n *ngIf="mode === \'DATE_TIME\' || mode === \'DATE\'">\n </bs-datepicker-inline>\n <wm-timepicker\n [value]="changedValue"\n [min]="minTime"\n [max]="maxTime"\n (change)="onTimeUpdate($event)"\n *ngIf="mode === \'DATE_TIME\' || mode === \'TIME\'"></wm-timepicker>\n <span class="text-primary date-picker-value">\n {{getDateLabel()}}\n </span>\n </div>\n <div class="modal-footer">\n <button\n class="btn btn-secondary clear-btn"\n (click)="clear()">{{appLocale.MESSAGE_DATE_PICKER_CLEAR || "Clear" }}</button>\n <button\n class="btn btn-primary pull-right ok-btn"\n (click)="onOkClick()">{{appLocale.MESSAGE_DATE_PICKER_OK || "Ok" }}</button>\n <button\n class="btn btn-secondary pull-right cancel-btn"\n (click)="hideModal()">{{appLocale.MESSAGE_DATE_PICKER_CANCEL || "Cancel" }}</button>\n \n </div>\n </div>\n </ng-template>\n '
27055
+ template: ' \n <ng-template #datetimepickerTemplate>\n <div class="app-datetime-picker">\n <div class="modal-body">\n <div class="mobile-datetime-picker-options">\n \n </div>\n <bs-datepicker-inline\n [bsConfig]="bsDatepickerConfig"\n [datesDisabled]="excludedDatesToDisable"\n bsDatepicker\n [bsValue]="changedValue"\n (bsValueChange)="onDateUpdate($event)"\n *ngIf="mode === \'DATE_TIME\' || mode === \'DATE\'">\n </bs-datepicker-inline>\n <wm-timepicker\n [value]="changedValue"\n [min]="minTime"\n [max]="maxTime"\n (change)="onTimeUpdate($event)"\n *ngIf="mode === \'DATE_TIME\' || mode === \'TIME\'"></wm-timepicker>\n <span class="text-primary date-picker-value">\n {{getDateLabel()}}\n </span>\n </div>\n <div class="modal-footer">\n <button\n *ngIf="mode === \'DATE_TIME\' || mode === \'DATE\'"\n class="btn btn-secondary today-btn"\n (click)="setToday()">{{appLocale.MESSAGE_DATE_PICKER_TODAY || "Today" }}</button>\n <button\n class="btn btn-primary pull-right ok-btn"\n *ngIf="mode === \'DATE_TIME\' || mode === \'TIME\'"\n (click)="onOkClick()">{{appLocale.MESSAGE_DATE_PICKER_OK || "Ok" }}</button>\n <button\n class="btn btn-secondary pull-right clear-btn"\n (click)="clear()">{{appLocale.MESSAGE_DATE_PICKER_CLEAR || "Clear" }}</button>\n </div>\n </div>\n </ng-template>\n '
27043
27056
  } ]
27044
27057
  } ];
27045
27058
  DateTimePickerComponent.ctorParameters = function() {
@@ -27122,8 +27135,8 @@
27122
27135
  }
27123
27136
  return arr;
27124
27137
  };
27125
- TimePickerComponent.prototype.set = function(_h, unit) {
27126
- var index = _h.index, value = _h.value;
27138
+ TimePickerComponent.prototype.set = function(_f, unit) {
27139
+ var index = _f.index, value = _f.value;
27127
27140
  if (unit === "HOUR") {
27128
27141
  this.value = moment(this.value).hour(parseInt(value)).toDate();
27129
27142
  } else if (unit === "MINUTE") {
@@ -28296,7 +28309,7 @@
28296
28309
  type: core.Component,
28297
28310
  args: [ {
28298
28311
  selector: "[wmDate]",
28299
- template: ' <input class="form-control app-textbox app-dateinput display-input"\n focus-target\n type="text"\n [name]="name"\n [tabindex]="tabindex"\n [value]="displayValue"\n (click)="toggleDpDropdown($event, true)"\n (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n (blur)="onInputBlur($event)"\n [disabled]="disabled || readonly"\n [autofocus]="autofocus"\n [required]="required"\n [readOnly]="isReadOnly"\n [attr.placeholder]="placeholder"\n [attr.accesskey]="shortcutkey"\n [attr.aria-label]="hint"\n (change)="onDisplayDateChange($event)"\n (keydown)="this._triggeredByUser = true; onDisplayKeydown($event);">\n\n <span class="input-group-btn">\n <button type="button"\n class="btn btn-default btn-time"\n [tabindex]="tabindex"\n [disabled]="disabled || readonly"\n [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n aria-haspopup="true"\n aria-expanded="false"\n (click)="toggleDpDropdown($event, false)">\n <i aria-hidden="true"\n class="app-icon wm-sl-l sl-calendar"></i>\n </button>\n </span>\n <div style="width: 0;display: inline-block;">\n <input class="model-holder"\n aria-label="datepicker dropdownmenu"\n aria-controls="date"\n [container]="containerTarget || \'body\'"\n [bsConfig]="_dateOptions"\n [isOpen]="isOpen"\n #datepicker="bsDatepicker"\n bsDatepicker\n [daysDisabled]="excludedDaysToDisable"\n [datesDisabled]="excludedDatesToDisable"\n placement="bottom right"\n [isDisabled]="disabled || readonly"\n [bsValue]="bsDataValue"\n (onShown)="onDatePickerOpen()"\n (onHidden)="hideDatepickerDropdown()"\n (bsValueChange)="onDateChange($event)">\n</div>\n\n<ng-template [ngIf]="loadNativeDateInput">\n <wm-datetimepicker\n dateTimePicker\n mode="DATE"\n [config]="_dateOptions"\n [placement]="modal"\n [excludedDaysToDisable]="excludedDaysToDisable"\n [excludedDatesToDisable]="excludedDatesToDisable"\n [displayFormat]="dateInputFormat"\n [value]="bsDataValue"\n (change)="onDateChange($event)">\n </wm-datetimepicker>\n <div class="mobile-input mobile-datepicker-container"\n tabindex="1000000"\n (focus)="onDateTimeInputFocus(true); invokeOnFocus($event);"\n (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n </div>\n</ng-template>\n',
28312
+ template: ' <input class="form-control app-textbox app-dateinput display-input"\n focus-target\n type="text"\n [name]="name"\n [tabindex]="tabindex"\n [value]="displayValue"\n (click)="toggleDpDropdown($event, true)"\n (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n (blur)="onInputBlur($event)"\n [disabled]="disabled || readonly"\n [autofocus]="autofocus"\n [required]="required"\n [readOnly]="isReadOnly"\n [attr.placeholder]="placeholder"\n [attr.accesskey]="shortcutkey"\n [attr.aria-label]="hint"\n (change)="onDisplayDateChange($event)"\n (keydown)="this._triggeredByUser = true; onDisplayKeydown($event);">\n\n <span class="input-group-btn">\n <button type="button"\n class="btn btn-default btn-time"\n [tabindex]="tabindex"\n [disabled]="disabled || readonly"\n [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n aria-haspopup="true"\n aria-expanded="false"\n (click)="toggleDpDropdown($event, false)">\n <i aria-hidden="true"\n class="app-icon wm-sl-l sl-calendar"></i>\n </button>\n </span>\n <div style="width: 0;display: inline-block;">\n <input class="model-holder"\n aria-label="datepicker dropdownmenu"\n aria-controls="date"\n [container]="containerTarget || \'body\'"\n [bsConfig]="_dateOptions"\n [isOpen]="isOpen"\n #datepicker="bsDatepicker"\n bsDatepicker\n [daysDisabled]="excludedDaysToDisable"\n [datesDisabled]="excludedDatesToDisable"\n placement="bottom right"\n [isDisabled]="disabled || readonly"\n [bsValue]="bsDataValue"\n (onShown)="onDatePickerOpen()"\n (onHidden)="hideDatepickerDropdown()"\n (bsValueChange)="onDateChange($event)">\n</div>\n\n<ng-template [ngIf]="loadNativeDateInput">\n <wm-datetimepicker\n dateTimePicker\n mode="DATE"\n [config]="_dateOptions"\n [placement]="modal"\n [excludedDaysToDisable]="excludedDaysToDisable"\n [excludedDatesToDisable]="excludedDatesToDisable"\n [displayFormat]="dateInputFormat"\n [value]="bsDataValue"\n (change)="onDateChange($event)">\n </wm-datetimepicker>\n <div class="mobile-input mobile-datepicker-container"\n tabindex="1000000"\n (focus)="onDateTimeInputFocus(true); invokeOnFocus($event);"\n (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n </div>\n</ng-template>\n',
28300
28313
  providers: [ base.provideAs(DateComponent, forms.NG_VALUE_ACCESSOR, true), base.provideAs(DateComponent, forms.NG_VALIDATORS, true), base.provideAsWidgetRef(DateComponent) ]
28301
28314
  } ]
28302
28315
  } ];
@@ -35727,6 +35740,8 @@
35727
35740
  }));
35728
35741
  var popoverStartBtn = popoverContainer.querySelector(".popover-start");
35729
35742
  var popoverEndBtn = popoverContainer.querySelector(".popover-end");
35743
+ popoverStartBtn.setAttribute("aria-hidden", "true");
35744
+ popoverEndBtn.setAttribute("aria-hidden", "true");
35730
35745
  popoverStartBtn.onkeydown = function(event) {
35731
35746
  var action = _this.keyEventPlugin.constructor.getEventFullKey(event);
35732
35747
  if (action === "shift.tab") {
@@ -36426,15 +36441,17 @@
36426
36441
  _this.dialogService = inj.get(core.AbstractDialogService);
36427
36442
  _this.bsModal = inj.get(modal.BsModalService);
36428
36443
  var router$1 = inj.get(router.Router);
36429
- var subscriptions = [ _this.bsModal.onShown.subscribe((function() {
36444
+ var subscriptions = [ _this.bsModal.onShown.subscribe((function(_a) {
36445
+ var id = _a.id;
36430
36446
  var ref = _this.dialogService.getLastOpenedDialog();
36431
36447
  if (ref === _this) {
36432
36448
  invokeOpenedCallback(ref);
36449
+ _this.dialogId = id;
36433
36450
  }
36434
36451
  })), _this.bsModal.onShow.subscribe((function() {
36435
36452
  focusTrapObj.activeElement = document.activeElement;
36436
36453
  })), _this.bsModal.onHidden.subscribe((function(closeReason) {
36437
- var ref = closeReason === "esc" || closeReason === "backdrop-click" ? _this.dialogService.getLastOpenedDialog() : _this.dialogService.getDialogRefFromClosedDialogs();
36454
+ var ref = closeReason === "esc" || closeReason === "backdrop-click" || _this.dialogId && (closeReason === null || closeReason === void 0 ? void 0 : closeReason.id) === _this.dialogId ? _this.dialogService.getLastOpenedDialog() : _this.dialogService.getDialogRefFromClosedDialogs();
36438
36455
  if (ref === _this) {
36439
36456
  _this.dialogService.removeFromOpenedDialogs(ref);
36440
36457
  _this.dialogService.removeFromClosedDialogs(ref);
@@ -36474,6 +36491,10 @@
36474
36491
  Object.assign(this.context, initState);
36475
36492
  this.modalOptions.ariaLabelledBy = this.titleId;
36476
36493
  this.dialogRef = this.bsModal.show(this.getTemplateRef(), this.modalOptions);
36494
+ if (this.dialogService.getOpenedDialogs().length === 1 && (core.isMobile() || core.isMobileApp())) {
36495
+ var parentSelector = $("body > app-root")[0];
36496
+ parentSelector.setAttribute("aria-hidden", "true");
36497
+ }
36477
36498
  };
36478
36499
  BaseDialog.prototype.close = function() {
36479
36500
  if (this.dialogRef) {
@@ -42305,11 +42326,31 @@
42305
42326
  $index: _this.dn.currentPage
42306
42327
  });
42307
42328
  _this.goToPage();
42329
+ if (_this.navigation === "Basic") {
42330
+ _this._setAriaForBasicNavigation();
42331
+ }
42308
42332
  }
42309
42333
  }), base.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
42310
42334
  base.styler(_this.nativeElement, _this);
42311
42335
  return _this;
42312
42336
  }
42337
+ PaginationComponent.prototype._setAriaForBasicNavigation = function() {
42338
+ _.forEach(this.nativeElement.getElementsByTagName("a"), (function(item) {
42339
+ item.setAttribute("href", "javascript:void(0);");
42340
+ var childNode = item.querySelector("span");
42341
+ if ((childNode === null || childNode === void 0 ? void 0 : childNode.dataset.isacitvepage) === "true") {
42342
+ item.setAttribute("aria-current", "true");
42343
+ setTimeout((function() {
42344
+ return item.focus();
42345
+ }));
42346
+ }
42347
+ if ((childNode === null || childNode === void 0 ? void 0 : childNode.dataset.isdisabled) === "true") {
42348
+ item.setAttribute("aria-disabled", "true");
42349
+ } else {
42350
+ item.removeAttribute("aria-disabled");
42351
+ }
42352
+ }));
42353
+ };
42313
42354
  PaginationComponent.prototype.setResult = function(result) {
42314
42355
  this.result = result;
42315
42356
  this.resultEmitter.emit(this.result);
@@ -42426,9 +42467,7 @@
42426
42467
  this.resetPageNavigation();
42427
42468
  }
42428
42469
  if (this.navigation === "Basic") {
42429
- _.forEach(this.nativeElement.getElementsByTagName("a"), (function(item) {
42430
- item.setAttribute("href", "javascript:void(0);");
42431
- }));
42470
+ this._setAriaForBasicNavigation();
42432
42471
  }
42433
42472
  } else {
42434
42473
  if (newVal && !_.isString(newVal)) {
@@ -42705,7 +42744,7 @@
42705
42744
  type: core.Component,
42706
42745
  args: [ {
42707
42746
  selector: "[wmPagination]",
42708
- template: '\n<ul class="pagination advanced {{navigationClass}}" *ngIf="navcontrols === \'Classic\'">\n <li [ngClass]="{\'disabled\':isDisableFirst}">\n <a [title]="appLocale.LABEL_FIRST" name="first" href="javascript:void(0);" aria-label="First"\n (click)="navigatePage(\'first\', $event)">\n <span aria-hidden="true"><i class="wi wi-first-page"></i></span>\n <span class="sr-only">{{appLocale.LABEL_FIRST}}</span>\n </a>\n </li>\n <li [ngClass]="{\'disabled\':isDisablePrevious}">\n <a [title]="appLocale.LABEL_PREVIOUS" name="prev" href="javascript:void(0);" aria-label="Previous"\n (click)="navigatePage(\'prev\', $event)">\n <span aria-hidden="true"><i class="wi wi-chevron-left"></i></span>\n <span class="sr-only">{{appLocale.LABEL_PREVIOUS}}</span>\n </a>\n </li>\n <li class="pagecount disabled">\n <a><input type="number" [disabled]="isDisableCurrent" [(ngModel)]="dn.currentPage" [attr.aria-label]="\'Page Navigation \' + dn.currentPage"\n (keydown)="onKeyDown($event)" (change)="onModelChange($event)" class="form-control"/></a>\n </li>\n <li class="disabled">\n <a [hidden]="isDisableCount"> / {{pageCount}}</a>\n </li>\n <li [ngClass]="{\'disabled\':isDisableNext}">\n <a [title]="appLocale.LABEL_NEXT" name="next" href="javascript:void(0);" aria-label="Next"\n (click)="navigatePage(\'next\', $event)">\n <span aria-hidden="true"><i class="wi wi-chevron-right"></i></span>\n <span class="sr-only">{{appLocale.LABEL_NEXT}}</span>\n </a>\n </li>\n <li [ngClass]="{\'disabled\':isDisableLast}">\n <a [title]="appLocale.LABEL_LAST" name="last" href="javascript:void(0);" aria-label="Last"\n (click)="navigatePage(\'last\', $event)">\n <span aria-hidden="true"><i class="wi wi-last-page"></i></span>\n <span class="sr-only">{{appLocale.LABEL_LAST}}</span>\n </a>\n </li>\n <li *ngIf="showrecordcount" class="totalcount disabled">\n <a>{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n </li>\n</ul>\n<ul class="pager {{navigationClass}}" *ngIf="navcontrols === \'Pager\'">\n <li class="previous" [ngClass]="{\'disabled\':isDisablePrevious}">\n <a href="javascript:void(0);" (click)="navigatePage(\'prev\', $event)" aria-label="Previous">\n <span aria-hidden="true"><i class="wi wi-chevron-left"></i></span>\n {{appLocale.LABEL_PREVIOUS}}\n <span class="sr-only">{{appLocale.LABEL_PREVIOUS}}</span>\n </a>\n </li>\n <li class="next" [ngClass]="{\'disabled\':isDisableNext}">\n <a href="javascript:void(0);" (click)="navigatePage(\'next\', $event)" aria-label="Next">\n {{appLocale.LABEL_NEXT}}\n <span aria-hidden="true"><i class="wi wi-chevron-right"></i></span>\n <span class="sr-only">{{appLocale.LABEL_NEXT}}</span>\n </a>\n </li>\n</ul>\n\n<pagination class="pagination basic" [ngClass]="navigationClass" *ngIf="navcontrols === \'Basic\'" role="navigation"\n [itemsPerPage]="maxResults" [totalItems]="dataSize"\n [ngModel]="dn.currentPage" (pageChanged)="pageChanged($event)"\n [attr.aria-label]="\'Page \' + dn.currentPage + \' of \' + pageCount + \' pages\'"\n [boundaryLinks]="boundarylinks" [maxSize]="maxsize"\n [directionLinks]="directionlinks" previousText="." nextText="." firstText="." lastText="."></pagination>\n\n<ul *ngIf="navcontrols === \'Basic\' && showrecordcount" class="pagination">\n <li class="totalcount disabled basiccount"><a>{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a></li>\n</ul>\n',
42747
+ template: '\n<ul class="pagination advanced {{navigationClass}}" *ngIf="navcontrols === \'Classic\'">\n <li [ngClass]="{\'disabled\':isDisableFirst}">\n <a [title]="appLocale.LABEL_FIRST" name="first" href="javascript:void(0);"\n [attr.aria-disabled]="isDisableFirst"\n (click)="navigatePage(\'first\', $event)">\n <span aria-hidden="true"><i class="wi wi-first-page"></i></span>\n <span class="sr-only">Go to first page {{ isDisableFirst ? \' , Disabled\' : \'\'}}</span>\n </a>\n </li>\n <li [ngClass]="{\'disabled\':isDisablePrevious}">\n <a [title]="appLocale.LABEL_PREVIOUS" name="prev" href="javascript:void(0);"\n [attr.aria-disabled]="isDisablePrevious"\n (click)="navigatePage(\'prev\', $event)">\n <span aria-hidden="true"><i class="wi wi-chevron-left"></i></span>\n <span class="sr-only">Go to previous page {{ isDisablePrevious ? \', Disabled\' : \'\'}}</span>\n </a>\n </li>\n <li class="pagecount disabled">\n <a href="javascript:void(0);">\n <input type="number" [disabled]="isDisableCurrent" [(ngModel)]="dn.currentPage" [attr.aria-label]="\'Showing Page \' + dn.currentPage + \' of \' + pageCount"\n (keydown)="onKeyDown($event)" (change)="onModelChange($event)" class="form-control"/>\n </a>\n </li>\n <li class="disabled">\n <a [hidden]="isDisableCount"> / {{pageCount}}</a>\n </li>\n <li [ngClass]="{\'disabled\':isDisableNext}">\n <a [title]="appLocale.LABEL_NEXT" name="next" href="javascript:void(0);"\n [attr.aria-disabled]="isDisableNext"\n (click)="navigatePage(\'next\', $event)">\n <span aria-hidden="true"><i class="wi wi-chevron-right"></i></span>\n <span class="sr-only">Go to next page {{ isDisableNext ? \' , Disabled\' : \'\'}}</span>\n </a>\n </li>\n <li [ngClass]="{\'disabled\':isDisableLast}">\n <a [title]="appLocale.LABEL_LAST" name="last" href="javascript:void(0);"\n [attr.aria-disabled]="isDisableLast"\n (click)="navigatePage(\'last\', $event)">\n <span aria-hidden="true"><i class="wi wi-last-page"></i></span>\n <span class="sr-only">Go to last page {{ isDisableLast ? \' , Disabled\' : \'\'}}</span>\n </a>\n </li>\n <li *ngIf="showrecordcount" class="totalcount disabled">\n <a href="javascript:void(0);" tabindex="-1" aria-disabled="true">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n </li>\n</ul>\n<ul class="pager {{navigationClass}}" *ngIf="navcontrols === \'Pager\'">\n <li class="previous" [ngClass]="{\'disabled\':isDisablePrevious}">\n <a href="javascript:void(0);" (click)="navigatePage(\'prev\', $event)"\n [attr.aria-disabled]="isDisablePrevious">\n <span aria-hidden="true"><i class="wi wi-chevron-left"></i></span>\n {{appLocale.LABEL_PREVIOUS}}\n <span class="sr-only">{{ isDisablePrevious ? \' , Disabled\' : \'\'}}</span>\n </a>\n </li>\n <li class="next" [ngClass]="{\'disabled\':isDisableNext}">\n <a href="javascript:void(0);" (click)="navigatePage(\'next\', $event)"\n [attr.aria-disabled]="isDisableNext">\n <span aria-hidden="true"><i class="wi wi-chevron-right"></i></span>\n {{appLocale.LABEL_NEXT}}\n <span class="sr-only">{{ isDisableNext ? \' , Disabled\' : \'\'}}</span>\n </a>\n </li>\n</ul>\n\n<pagination class="pagination basic" [ngClass]="navigationClass" *ngIf="navcontrols === \'Basic\'" role="navigation"\n [itemsPerPage]="maxResults" [totalItems]="dataSize"\n [ngModel]="dn.currentPage" (pageChanged)="pageChanged($event)"\n [attr.aria-label]="\'Showing Page \' + dn.currentPage + \' of \' + pageCount + \' pages\'"\n [boundaryLinks]="boundarylinks" [maxSize]="maxsize"\n [directionLinks]="directionlinks"\n firstText="Firtst" lastText="Last"\n [customPreviousTemplate]="prevTemplate"\n [customNextTemplate]="nextTemplate"\n [customPageTemplate]="pageTemplate"></pagination>\n\n<ul *ngIf="navcontrols === \'Basic\' && showrecordcount" class="pagination">\n <li class="totalcount disabled basiccount">\n <a href="javascript:void(0);" tabindex="-1" aria-disabled="true">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n </li>\n</ul>\n\n<ng-template #pageTemplate let-page>\n <span class="sr-only" [attr.data-isacitvepage]="page.active">{{\'Page \'}}</span>\n {{page.number}}\n <span class="sr-only" *ngIf="page.active"> {{\', Showing page \' + page.number + \' of \' + pageCount}}</span>\n</ng-template>\n<ng-template #prevTemplate let-disabled="disabled">\n <span class="sr-only" [attr.data-isdisabled]="disabled">Go to Previous page {{disabled ? \', Disabled\' : \'\'}}</span>\n</ng-template>\n<ng-template #nextTemplate let-disabled="disabled">\n <span class="sr-only" [attr.data-isdisabled]="disabled">Go to Next page {{disabled ? \', Disabled\' : \'\'}}</span>\n</ng-template>\n',
42709
42748
  providers: [ base.provideAsWidgetRef(PaginationComponent) ]
42710
42749
  } ]
42711
42750
  } ];
@@ -44738,7 +44777,7 @@
44738
44777
  return this.datasource.execute(operation, options);
44739
44778
  };
44740
44779
  ListComponent.prototype.handleKeyDown = function($event, action) {
44741
- var _this = this;
44780
+ var _d, _e;
44742
44781
  $event.stopPropagation();
44743
44782
  if ($event.keyCode !== 13 && $event.keyCode !== 9 && !(($event.target.classList.contains("form-control") || $event.target.classList.contains("note-editable")) && $event.keyCode === 32)) {
44744
44783
  $event.preventDefault();
@@ -44780,27 +44819,21 @@
44780
44819
  }
44781
44820
  if (action === "focusPrev") {
44782
44821
  if (this.isListElementMovable) {
44783
- var prev_1;
44784
44822
  presentIndex = presentIndex <= 0 ? 0 : presentIndex;
44785
- this.lastSelectedItem = this.getListItemByIndex(presentIndex);
44786
44823
  if (presentIndex === 0) {
44787
- prev_1 = this.listItems.last;
44788
44824
  return;
44789
44825
  }
44790
- this.listItems.forEach((function($liItem, idx) {
44791
- if (idx === presentIndex) {
44792
- prev_1.nativeElement.before($liItem.nativeElement);
44793
- _this.lastSelectedItem.nativeElement.focus();
44794
- var arr = _this.listItems.toArray();
44795
- var temp = arr[presentIndex];
44796
- arr[presentIndex] = arr[presentIndex - 1];
44797
- arr[presentIndex - 1] = temp;
44798
- _this.listItems.reset(arr);
44799
- _this.currentIndex = presentIndex;
44800
- _this.ariaText = "selected ";
44801
- }
44802
- prev_1 = $liItem;
44803
- }));
44826
+ this.lastSelectedItem = this.getListItemByIndex(presentIndex);
44827
+ var prevElt = this.getListItemByIndex(presentIndex - 1);
44828
+ prevElt.nativeElement.before(this.lastSelectedItem.nativeElement);
44829
+ this.lastSelectedItem.nativeElement.focus();
44830
+ this.statePersistence.removeWidgetState(this, "selectedItem");
44831
+ var arr = this.listItems.toArray();
44832
+ _d = __read([ arr[presentIndex], arr[presentIndex - 1] ], 2), arr[presentIndex - 1] = _d[0],
44833
+ arr[presentIndex] = _d[1];
44834
+ this.listItems.reset(arr);
44835
+ this.currentIndex = presentIndex;
44836
+ this.ariaText = "selected ";
44804
44837
  } else {
44805
44838
  presentIndex = presentIndex <= 0 ? 0 : presentIndex - 1;
44806
44839
  this.lastSelectedItem = this.getListItemByIndex(presentIndex);
@@ -44810,27 +44843,21 @@
44810
44843
  }
44811
44844
  } else if (action === "focusNext") {
44812
44845
  if (this.isListElementMovable) {
44813
- var prev_2;
44814
44846
  presentIndex = presentIndex < listItems.length - 1 ? presentIndex : listItems.length - 1;
44815
- this.lastSelectedItem = this.getListItemByIndex(presentIndex);
44816
44847
  if (presentIndex === this.listItems.length - 1) {
44817
- prev_2 = this.listItems.first;
44818
44848
  return;
44819
44849
  }
44820
- this.listItems.forEach((function($liItem, idx) {
44821
- if (idx === presentIndex + 1) {
44822
- prev_2.nativeElement.before($liItem.nativeElement);
44823
- _this.lastSelectedItem.nativeElement.focus();
44824
- var arr = _this.listItems.toArray();
44825
- var temp = arr[presentIndex + 1];
44826
- arr[presentIndex + 1] = arr[presentIndex];
44827
- arr[presentIndex] = temp;
44828
- _this.listItems.reset(arr);
44829
- _this.currentIndex = idx + 1;
44830
- _this.ariaText = "selected ";
44831
- }
44832
- prev_2 = $liItem;
44833
- }));
44850
+ this.lastSelectedItem = this.getListItemByIndex(presentIndex);
44851
+ var nextElt = this.getListItemByIndex(presentIndex + 1);
44852
+ nextElt.nativeElement.after(this.lastSelectedItem.nativeElement);
44853
+ this.lastSelectedItem.nativeElement.focus();
44854
+ this.statePersistence.removeWidgetState(this, "selectedItem");
44855
+ var arr = this.listItems.toArray();
44856
+ _e = __read([ arr[presentIndex + 1], arr[presentIndex] ], 2), arr[presentIndex] = _e[0],
44857
+ arr[presentIndex + 1] = _e[1];
44858
+ this.listItems.reset(arr);
44859
+ this.currentIndex = presentIndex + 2;
44860
+ this.ariaText = "selected ";
44834
44861
  } else {
44835
44862
  presentIndex = presentIndex < listItems.length - 1 ? presentIndex + 1 : listItems.length - 1;
44836
44863
  this.lastSelectedItem = this.getListItemByIndex(presentIndex);
@@ -44852,11 +44879,10 @@
44852
44879
  this.isListElementMovable = !this.isListElementMovable;
44853
44880
  this.onItemClick($event, this.getListItemByIndex(presentIndex));
44854
44881
  this.currentIndex = presentIndex + 1;
44855
- var name = this.getListItemByIndex(presentIndex).item.name;
44856
44882
  if (this.isListElementMovable) {
44857
- this.ariaText = name + " grabbed, current position ";
44883
+ this.ariaText = "Item " + this.currentIndex + " grabbed, current position ";
44858
44884
  } else {
44859
- this.ariaText = name + " dropped, final position ";
44885
+ this.ariaText = "Item " + this.currentIndex + " dropped, final position ";
44860
44886
  }
44861
44887
  }
44862
44888
  };
@@ -45094,7 +45120,7 @@
45094
45120
  type: core$1.Component,
45095
45121
  args: [ {
45096
45122
  selector: "div[wmList]",
45097
- template: '<div class="panel-heading" *ngIf="title || subheading || iconclass">\n <h3 class="panel-title">\n <div class="pull-left">\n <i class="app-icon panel-icon {{iconclass}}" aria-hidden="true" [hidden]="!iconclass"></i>\n </div>\n <div class="pull-left">\n <div class="heading" [innerHTML]="title"></div>\n <div class="description" [innerHTML]="subheading"></div>\n </div>\n </h3>\n</div>\n\n<div class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisablePrevious" aria-label="Page navigation" *ngIf="navigation === \'Inline\' && !noDataFound">\n <ul class="pager">\n <li class="previous" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisablePrevious : true)}">\n <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'prev\', $event)">\n <i class="wi wi-chevron-left" aria-hidden="true"></i>\n <span class="sr-only">Previous</span>\n </a>\n </li>\n </ul>\n</div>\n<div *ngIf="navigation === \'Inline\' && !noDataFound" aria-live="polite" aria-atomic="true" class="sr-only"> {{\'Item \' + dataNavigator.dn.currentPage + \' of \' + dataNavigator.pageCount }}</div>\n\n<div>\n <div id={{titleId}} class="sr-only" >\n Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n </div>\n \n <div aria-live="assertive" *ngIf="listItems" class="sr-only" >\n {{ariaText + currentIndex + \' of \' + listItems.length}}\n </div> \n</div>\n\n<ul [attr.tabindex]="tabindex" [attr.aria-describedby] = "titleId" class="app-livelist-container clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}} {{listclass}}" role="list"\n (keydown.enter)="handleKeyDown($event, \'select\')"\n\n (keydown.space)="handleKeyDown($event, \'space\')"\n\n (keydown.arrowup)="handleKeyDown($event, \'focusPrev\')"\n (keydown.arrowdown)="handleKeyDown($event, \'focusNext\')"\n (keydown.arrowleft)="handleKeyDown($event, \'focusPrev\')"\n (keydown.arrowright)="handleKeyDown($event, \'focusNext\')"\n\n (keydown.shift.arrowup)="handleKeyDown($event, \'selectPrev\')"\n (keydown.shift.arrowdown)="handleKeyDown($event, \'selectNext\')"\n (keydown.shift.arrowleft)="handleKeyDown($event, \'selectPrev\')"\n (keydown.shift.arrowright)="handleKeyDown($event, \'selectNext\')"\n [hidden]="noDataFound && !variableInflight"\n>\n <ng-template [ngIf]="!groupby" [ngIfElse]="groupedListTemplate">\n <li *ngFor="let item of fieldDefs; index as $index; first as $first; last as $last;" class="app-list-item {{direction === \'horizontal\' ? \'\' : itemsPerRowClass}}" [ngClass]="listItemRef.itemClass"\n [wmListItem]="item"\n #listItemRef="listItemRef"\n [attr.tabindex]="tabindex"\n role="listitem">\n <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n </li>\n </ng-template>\n <ng-container [ngTemplateOutlet]="listLeftActionTemplate"></ng-container>\n <ng-container [ngTemplateOutlet]="listRightActionTemplate"></ng-container>\n</ul>\n\n<div class="no-data-msg" *ngIf="noDataFound && !variableInflight" [textContent]="nodatamessage"></div>\n\n<div class="loading-data-msg" *ngIf="variableInflight && !pulltorefresh">\n <span>\n <i class="app-icon panel-icon fa-spin" aria-hidden="true" [ngClass]="loadingicon"></i>\n <span class="sr-only">Loading</span>\n <span class="loading-text" [textContent]="loadingdatamsg"></span>\n </span>\n</div>\n\n<div class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisableNext" *ngIf="navigation === \'Inline\' && !noDataFound">\n <ul class="pager">\n <li class="next" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisableNext : true)}">\n <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'next\', $event)">\n <i class="wi wi-chevron-right" aria-hidden="true"></i>\n <span class="sr-only">Next</span>\n </a>\n </li>\n </ul>\n</div>\n\n<div class="panel-footer" *ngIf="navigation !== \'None\'" [hidden]="!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)">\n <nav wmPagination\n navigationalign.bind="navigationalign"\n navigation.bind="navControls"\n showrecordcount.bind="showrecordcount"\n maxsize.bind="maxsize"\n boundarylinks.bind="boundarylinks"\n forceellipses.bind="forceellipses"\n directionlinks.bind="directionlinks"\n show.bind="!onDemandLoad"\n paginationchange.event="beforePaginationChange($event, $index)"\n ></nav>\n <a *ngIf="onDemandLoad" href="javascript:void(0);"\n (click)="dataNavigator.navigatePage(\'next\', $event)"\n class="app-button btn btn-block"\n [ngClass]="paginationclass"\n [textContent]="ondemandmessage"\n ></a>\n</div>\n\n\x3c!--This template will be displayed when groupby is specified--\x3e\n<ng-template #groupedListTemplate>\n <li *ngFor="let groupObj of groupedData" class="app-list-item-group clearfix">\n <ul [attr.tabindex]="tabindex" class="list-group item-group" [ngClass]="listclass">\n <li class="app-list-item-header list-item list-group-header" (click)="handleHeaderClick($event)" [ngClass]="{\'collapsible-content\': collapsible}">\n <h4>{{groupObj.key}}\n <div class="header-action">\n <i class="app-icon wi action wi-chevron-up" *ngIf="collapsible"></i>\n <span *ngIf="showcount" class="label label-default">{{groupObj.data.length}}</span>\n </div>\n </h4>\n </li>\n <ul class="list-group clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}}">\n <li *ngFor="let item of groupObj.data; index as $index; first as $first; last as $last;" [attr.tabindex]="tabindex"\n class="app-list-item group-list-item {{itemsPerRowClass}}"\n [ngClass]="listItemRef.itemClass"\n [wmListItem]="item" #listItemRef="listItemRef">\n <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n </li>\n </ul>\n </ul>\n </li>\n</ng-template>\n',
45123
+ template: '<div class="panel-heading" *ngIf="title || subheading || iconclass">\n <h3 class="panel-title">\n <div class="pull-left">\n <i class="app-icon panel-icon {{iconclass}}" aria-hidden="true" [hidden]="!iconclass"></i>\n </div>\n <div class="pull-left">\n <div class="heading" [innerHTML]="title"></div>\n <div class="description" [innerHTML]="subheading"></div>\n </div>\n </h3>\n</div>\n\n<div class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisablePrevious" aria-label="Page navigation" *ngIf="navigation === \'Inline\' && !noDataFound">\n <ul class="pager">\n <li class="previous" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisablePrevious : true)}">\n <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'prev\', $event)"\n [attr.aria-disabled]="dataNavigator.isDisablePrevious">\n <i class="wi wi-chevron-left" aria-hidden="true"></i>\n <span class="sr-only">Go to Previous page {{dataNavigator.isDisablePrevious ? \', Disabled\' : \'\'}}</span>\n </a>\n </li>\n </ul>\n</div>\n<div *ngIf="navigation === \'Inline\' && !noDataFound" aria-live="polite" aria-atomic="true" class="sr-only"> {{\'Page \' + dataNavigator.dn.currentPage + \' of \' + dataNavigator.pageCount }}</div>\n\n<div>\n <div id={{titleId}} class="sr-only" *ngIf="enablereorder">\n Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n </div>\n\n <div aria-live="assertive" *ngIf="listItems && enablereorder && currentIndex" class="sr-only" >\n {{ariaText + currentIndex + \' of \' + listItems.length}}\n </div>\n</div>\n\n<ul [attr.tabindex]="tabindex" [attr.aria-describedby] = "titleId" class="app-livelist-container clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}} {{listclass}}" role="list"\n (keydown.enter)="handleKeyDown($event, \'select\')"\n\n (keydown.space)="handleKeyDown($event, \'space\')"\n\n (keydown.arrowup)="handleKeyDown($event, \'focusPrev\')"\n (keydown.arrowdown)="handleKeyDown($event, \'focusNext\')"\n (keydown.arrowleft)="handleKeyDown($event, \'focusPrev\')"\n (keydown.arrowright)="handleKeyDown($event, \'focusNext\')"\n\n (keydown.shift.arrowup)="handleKeyDown($event, \'selectPrev\')"\n (keydown.shift.arrowdown)="handleKeyDown($event, \'selectNext\')"\n (keydown.shift.arrowleft)="handleKeyDown($event, \'selectPrev\')"\n (keydown.shift.arrowright)="handleKeyDown($event, \'selectNext\')"\n [hidden]="noDataFound && !variableInflight"\n>\n <ng-template [ngIf]="!groupby" [ngIfElse]="groupedListTemplate">\n <li *ngFor="let item of fieldDefs; index as $index; first as $first; last as $last;" class="app-list-item {{direction === \'horizontal\' ? \'\' : itemsPerRowClass}}" [ngClass]="listItemRef.itemClass"\n [wmListItem]="item"\n #listItemRef="listItemRef"\n [attr.tabindex]="tabindex"\n role="listitem">\n <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n </li>\n </ng-template>\n <ng-container [ngTemplateOutlet]="listLeftActionTemplate"></ng-container>\n <ng-container [ngTemplateOutlet]="listRightActionTemplate"></ng-container>\n</ul>\n\n<div class="no-data-msg" *ngIf="noDataFound && !variableInflight" [textContent]="nodatamessage"></div>\n\n<div class="loading-data-msg" *ngIf="variableInflight && !pulltorefresh">\n <span>\n <i class="app-icon panel-icon fa-spin" aria-hidden="true" [ngClass]="loadingicon"></i>\n <span class="sr-only">Loading</span>\n <span class="loading-text" [textContent]="loadingdatamsg"></span>\n </span>\n</div>\n\n<div class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisableNext" *ngIf="navigation === \'Inline\' && !noDataFound">\n <ul class="pager">\n <li class="next" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisableNext : true)}">\n <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'next\', $event)"\n [attr.aria-disabled]="dataNavigator.isDisableNext">\n <i class="wi wi-chevron-right" aria-hidden="true"></i>\n <span class="sr-only">Go to Next page {{dataNavigator.isDisableNext ? \', Disabled\' : \'\'}}</span>\n </a>\n </li>\n </ul>\n</div>\n\n<div class="panel-footer" *ngIf="navigation !== \'None\'" [hidden]="!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)">\n <nav wmPagination\n navigationalign.bind="navigationalign"\n navigation.bind="navControls"\n showrecordcount.bind="showrecordcount"\n maxsize.bind="maxsize"\n boundarylinks.bind="boundarylinks"\n forceellipses.bind="forceellipses"\n directionlinks.bind="directionlinks"\n show.bind="!onDemandLoad"\n paginationchange.event="beforePaginationChange($event, $index)"\n ></nav>\n <a *ngIf="onDemandLoad" href="javascript:void(0);"\n (click)="dataNavigator.navigatePage(\'next\', $event)"\n class="app-button btn btn-block"\n [ngClass]="paginationclass"\n [textContent]="ondemandmessage"\n ></a>\n</div>\n\n\x3c!--This template will be displayed when groupby is specified--\x3e\n<ng-template #groupedListTemplate>\n <li *ngFor="let groupObj of groupedData" class="app-list-item-group clearfix">\n <ul [attr.tabindex]="tabindex" class="list-group item-group" [ngClass]="listclass">\n <li class="app-list-item-header list-item list-group-header" (click)="handleHeaderClick($event)" [ngClass]="{\'collapsible-content\': collapsible}">\n <h4>{{groupObj.key}}\n <div class="header-action">\n <i class="app-icon wi action wi-chevron-up" *ngIf="collapsible"></i>\n <span *ngIf="showcount" class="label label-default">{{groupObj.data.length}}</span>\n </div>\n </h4>\n </li>\n <ul class="list-group clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}}">\n <li *ngFor="let item of groupObj.data; index as $index; first as $first; last as $last;" [attr.tabindex]="tabindex"\n class="app-list-item group-list-item {{itemsPerRowClass}}"\n [ngClass]="listItemRef.itemClass"\n [wmListItem]="item" #listItemRef="listItemRef">\n <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n </li>\n </ul>\n </ul>\n </li>\n</ng-template>\n',
45098
45124
  providers: [ base.provideAsWidgetRef(ListComponent) ]
45099
45125
  } ]
45100
45126
  } ];
@@ -45714,6 +45740,7 @@
45714
45740
  _this.rowDef = {};
45715
45741
  _this.rowInstance = {};
45716
45742
  _this.fullFieldDefs = [];
45743
+ _this.variableInflight = true;
45717
45744
  _this.applyProps = new Map;
45718
45745
  _this.redraw = _.debounce(_this._redraw, 150);
45719
45746
  _this.debouncedHandleLoading = _.debounce(_this.handleLoading, 350);
@@ -46459,6 +46486,9 @@
46459
46486
  set: function(newValue) {
46460
46487
  var _a;
46461
46488
  this.isDataLoading = false;
46489
+ if (this.variableInflight && _.isEmpty(newValue)) {
46490
+ return;
46491
+ }
46462
46492
  this.variableInflight = false;
46463
46493
  if (this.gridOptions.isNavTypeScrollOrOndemand()) {
46464
46494
  _a = __read(this.paginationService.updateFieldsOnPagination(this, newValue), 2),
@@ -46912,6 +46942,9 @@
46912
46942
  };
46913
46943
  TableComponent.prototype.setGridData = function(serverData) {
46914
46944
  var data = this.filternullrecords ? this.removeEmptyRecords(serverData) : serverData;
46945
+ if (_.get(this.datasource, "category") === "wm.Variable") {
46946
+ this.variableInflight = false;
46947
+ }
46915
46948
  if (!this.variableInflight) {
46916
46949
  if (data && data.length === 0) {
46917
46950
  this.callDataGridMethod("setStatus", "nodata", this.nodatamessage);
@@ -47206,10 +47239,8 @@
47206
47239
  this.variableInflight = false;
47207
47240
  this.callDataGridMethod("setStatus", "nodata", this.nodatamessage);
47208
47241
  }
47209
- if (this.dataset) {
47210
- this.watchVariableDataSet(this.dataset);
47211
- this.onDataSourceChange();
47212
- }
47242
+ this.watchVariableDataSet(this.dataset);
47243
+ this.onDataSourceChange();
47213
47244
  break;
47214
47245
 
47215
47246
  case "dataset":
@@ -51047,15 +51078,20 @@
51047
51078
  };
51048
51079
  };
51049
51080
  var \u02752 = findInvalidElement;
51050
- var setTouchedState = function(ngForm) {
51081
+ var setTouchedState = function(self, ngForm, fieldName) {
51082
+ var _a, _b;
51051
51083
  if (ngForm.valid) {
51052
51084
  return;
51053
51085
  }
51054
51086
  if (ngForm.controls) {
51055
- _.forEach(ngForm.controls, (function(ctrl) {
51056
- setTouchedState(ctrl);
51087
+ _.forEach(ngForm.controls, (function(ctrl, fieldName) {
51088
+ setTouchedState(self, ctrl, fieldName);
51057
51089
  }));
51058
51090
  } else {
51091
+ var element = self.$element.find('[wmformfield][key="' + fieldName + '"]');
51092
+ element[0].setAttribute("__errormsg", element[0].getAttribute("__validationId"));
51093
+ (_a = element[0].querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", ngForm.invalid);
51094
+ (_b = element[0].querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", element[0].getAttribute("__validationId"));
51059
51095
  ngForm.markAsTouched();
51060
51096
  }
51061
51097
  };
@@ -51352,7 +51388,7 @@
51352
51388
  }));
51353
51389
  };
51354
51390
  FormComponent.prototype.highlightInvalidFields = function() {
51355
- setTouchedState(this.ngform);
51391
+ setTouchedState(this, this.ngform, "");
51356
51392
  };
51357
51393
  FormComponent.prototype.validateFieldsOnSubmit = function() {
51358
51394
  this.setValidationMsgs();
@@ -51881,8 +51917,8 @@
51881
51917
  FormComponent.prototype.generateFormFields = function() {
51882
51918
  return __awaiter(this, void 0, void 0, (function() {
51883
51919
  var noOfColumns, $gridLayout, columnWidth, fieldTemplate, colCount, index, userFields, fields, colTmpl, componentFactoryRef, component;
51884
- return __generator(this, (function(_b) {
51885
- switch (_b.label) {
51920
+ return __generator(this, (function(_c) {
51921
+ switch (_c.label) {
51886
51922
  case 0:
51887
51923
  if (_.isUndefined(this._isGridLayoutPresent)) {
51888
51924
  this._isGridLayoutPresent = this.$element.find(".panel-body [wmlayoutgrid]").length > 0;
@@ -51941,7 +51977,7 @@
51941
51977
  }) ];
51942
51978
 
51943
51979
  case 1:
51944
- componentFactoryRef = _b.sent();
51980
+ componentFactoryRef = _c.sent();
51945
51981
  component = this.dynamicFormRef.createComponent(componentFactoryRef, 0, this.inj);
51946
51982
  core.extendProto(component.instance, this._dynamicContext);
51947
51983
  $gridLayout[0].appendChild(component.location.nativeElement);
@@ -52462,10 +52498,18 @@
52462
52498
  $($evt.target).closest(".live-field").addClass("active");
52463
52499
  };
52464
52500
  FormFieldDirective.prototype._onBlurField = function($evt) {
52465
- var _a, _b;
52501
+ var _a, _b, _c, _d;
52466
52502
  $($evt.target).closest(".live-field").removeClass("active");
52467
- (_a = this.nativeElement.querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", "" + this.ngform.controls[this._fieldName].invalid);
52468
- (_b = this.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", "" + this.nativeElement.getAttribute("__errormsg"));
52503
+ var ele = this.nativeElement.querySelector("p.text-danger");
52504
+ if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
52505
+ this.nativeElement.setAttribute("__errormsg", "" + this.nativeElement.getAttribute("__validationId"));
52506
+ (_a = this.nativeElement.querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", "" + this.ngform.controls[this._fieldName].invalid);
52507
+ (_b = this.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", "" + this.nativeElement.getAttribute("__validationId"));
52508
+ } else {
52509
+ this.nativeElement.removeAttribute("__errormsg");
52510
+ (_c = this.nativeElement.querySelector("input")) === null || _c === void 0 ? void 0 : _c.removeAttribute("aria-invalid");
52511
+ (_d = this.nativeElement.querySelector("input")) === null || _d === void 0 ? void 0 : _d.removeAttribute("aria-describedby");
52512
+ }
52469
52513
  this._activeField = false;
52470
52514
  this._triggeredByUser = false;
52471
52515
  this._clicktriggeredByUser = false;
@@ -52687,7 +52731,7 @@
52687
52731
  });
52688
52732
  };
52689
52733
  FormFieldDirective.prototype.onValueChange = function(val) {
52690
- var _a, _b;
52734
+ var _a, _b, _c, _d;
52691
52735
  if (!this.isDestroyed) {
52692
52736
  var captionEl = $(this.nativeElement).find(".caption-floating");
52693
52737
  if (captionEl.length > 0) {
@@ -52699,8 +52743,15 @@
52699
52743
  isFocused: this._activeField
52700
52744
  });
52701
52745
  }
52702
- (_a = this.nativeElement.querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", this._triggeredByUser && this.ngform.controls[this._fieldName].invalid ? "true" : "false");
52703
- (_b = this.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", "" + this.nativeElement.getAttribute("__errormsg"));
52746
+ if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
52747
+ this.nativeElement.setAttribute("__errormsg", "" + this.nativeElement.getAttribute("__validationId"));
52748
+ (_a = this.nativeElement.querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", this._triggeredByUser && this.ngform.controls[this._fieldName].invalid ? "true" : "false");
52749
+ (_b = this.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", "" + this.nativeElement.getAttribute("__validationId"));
52750
+ } else {
52751
+ this.nativeElement.removeAttribute("__errormsg");
52752
+ (_c = this.nativeElement.querySelector("input")) === null || _c === void 0 ? void 0 : _c.removeAttribute("aria-invalid");
52753
+ (_d = this.nativeElement.querySelector("input")) === null || _d === void 0 ? void 0 : _d.removeAttribute("aria-describedby");
52754
+ }
52704
52755
  this.form.onFieldValueChange(this, val);
52705
52756
  this.notifyChanges();
52706
52757
  if (this.$element.find(".active").length > 0 || this.form.touched) {
@@ -58367,40 +58418,36 @@
58367
58418
  var TabsAnimator = function(_super) {
58368
58419
  __extends(TabsAnimator, _super);
58369
58420
  function TabsAnimator(tabs) {
58370
- var e_1, _a;
58371
58421
  var _this = _super.call(this) || this;
58372
58422
  _this.tabs = tabs;
58373
58423
  _this._$el = $(_this.tabs.getNativeElement()).find(">.tab-content");
58374
- var childEls = _this._$el.find(">[wmTabPane]");
58375
- _this._noOfTabs = childEls.length;
58376
- var maxWidth = _this._noOfTabs * 100 + "%";
58377
- core.addClass(_this.tabs.getNativeElement(), "has-transition");
58378
- core.setCSSFromObj(_this._$el[0], {
58379
- maxWidth: maxWidth,
58380
- width: maxWidth
58381
- });
58382
- var width = 100 / _this._noOfTabs + "%";
58383
- try {
58384
- for (var _b = __values(Array.from(childEls)), _c = _b.next(); !_c.done; _c = _b.next()) {
58385
- var child = _c.value;
58386
- core.setCSS(child, "width", width);
58387
- }
58388
- } catch (e_1_1) {
58389
- e_1 = {
58390
- error: e_1_1
58391
- };
58392
- } finally {
58393
- try {
58394
- if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
58395
- } finally {
58396
- if (e_1) throw e_1.error;
58397
- }
58398
- }
58399
58424
  _this.init(_this._$el);
58400
58425
  return _this;
58401
58426
  }
58427
+ TabsAnimator.prototype.calibrate = function() {
58428
+ var activeTabIndex = this.tabs.getActiveTabIndex();
58429
+ var panes = this._$el.find(">.tab-pane");
58430
+ var activeTabVisibleIndex = 0;
58431
+ var noOfVisiblePanes = 0;
58432
+ var visiblePanes = [];
58433
+ panes.each((function(i, p) {
58434
+ if (!$(p).prop("hidden")) {
58435
+ noOfVisiblePanes++;
58436
+ if (i === activeTabIndex) {
58437
+ activeTabVisibleIndex = noOfVisiblePanes - 1;
58438
+ }
58439
+ visiblePanes.push(p);
58440
+ }
58441
+ return true;
58442
+ }));
58443
+ return {
58444
+ activeTabIndex: activeTabVisibleIndex,
58445
+ noOfTabs: noOfVisiblePanes,
58446
+ panes: visiblePanes
58447
+ };
58448
+ };
58402
58449
  TabsAnimator.prototype.bounds = function() {
58403
- var activeTabIndex = this.tabs.getActiveTabIndex(), w = this._$el.find(">.tab-pane").first().width(), noOfTabs = this._$el.find(">.tab-pane:visible").length, centerVal = -1 * activeTabIndex * w;
58450
+ var _a = this.calibrate(), activeTabIndex = _a.activeTabIndex, noOfTabs = _a.noOfTabs, panes = _a.panes, w = $(panes[0]).width(), centerVal = -1 * activeTabIndex * w;
58404
58451
  this.clearContentFocus();
58405
58452
  return {
58406
58453
  strict: false,
@@ -58427,8 +58474,18 @@
58427
58474
  }
58428
58475
  };
58429
58476
  TabsAnimator.prototype.transitionTabIntoView = function() {
58430
- var activeTabIndex = this.tabs.getActiveTabIndex();
58431
- core.setCSS(this._$el[0], "transform", "translate3d(" + -1 * activeTabIndex / this._noOfTabs * 100 + "%, 0, 0)");
58477
+ var _a = this.calibrate(), activeTabIndex = _a.activeTabIndex, noOfTabs = _a.noOfTabs, panes = _a.panes;
58478
+ var maxWidth = noOfTabs * 100 + "%";
58479
+ core.setCSSFromObj(this._$el[0], {
58480
+ maxWidth: maxWidth,
58481
+ width: maxWidth
58482
+ });
58483
+ core.addClass(this.tabs.getNativeElement(), "has-transition");
58484
+ var width = 100 / noOfTabs + "%";
58485
+ panes.forEach((function(p) {
58486
+ core.setCSS(p, "width", width);
58487
+ }));
58488
+ core.setCSS(this._$el[0], "transform", "translate3d(" + -1 * activeTabIndex / noOfTabs * 100 + "%, 0, 0)");
58432
58489
  };
58433
58490
  TabsAnimator.prototype.onUpper = function($event) {
58434
58491
  this.tabs.prev($event);
@@ -58554,6 +58611,7 @@
58554
58611
  };
58555
58612
  TabPaneComponent.prototype.onPropertyChange = function(key, nv, ov) {
58556
58613
  var _this = this;
58614
+ var _a;
58557
58615
  if (key === "content") {
58558
58616
  if (this.isActive) {
58559
58617
  setTimeout((function() {
@@ -58564,6 +58622,10 @@
58564
58622
  this.nativeElement.hidden = !nv;
58565
58623
  if (this._isFirstLoad) {
58566
58624
  this.tabsRef.selectDefaultPaneByIndex(this.tabsRef.defaultpaneindex);
58625
+ } else if (!nv && this.isActive) {
58626
+ this.tabsRef.next();
58627
+ } else if (nv || !this.isActive) {
58628
+ (_a = this.tabsRef.tabsAnimator) === null || _a === void 0 ? void 0 : _a.transitionTabIntoView();
58567
58629
  }
58568
58630
  this._isFirstLoad = false;
58569
58631
  } else {