@wavemaker/app-ng-runtime 11.4.0-next.28701 → 11.4.0-rc.5342

app-ng-runtime/components/data/list/fesm2015/index.js

@@ -988,9 +988,10 @@ class ListComponent extends StylableComponent {
         }
     }
     // Triggers after the sorting.
-    onUpdate(evt, ui) {
+    onUpdate(evt, ui, presentIndex) {
         const data = this.fieldDefs;
-        const newIndex = ui.item.index();
+        // If ui is not present then it is called from drag and drop using keyboard
+        const newIndex = ui === undefined ? presentIndex : ui.item.index();
         const oldIndex = this.$ulEle.data('oldIndex');
         const minIndex = _.min([newIndex, oldIndex]);
         const maxIndex = _.max([newIndex, oldIndex]);
@@ -1136,27 +1137,20 @@ class ListComponent extends StylableComponent {
         }
         if (action === 'focusPrev') {
             if (this.isListElementMovable) {
-                let prev;
                 presentIndex = presentIndex <= 0 ? 0 : (presentIndex);
-                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
                 if (presentIndex === 0) {
-                    prev = this.listItems.last;
                     return;
                 }
-                this.listItems.forEach(($liItem, idx) => {
-                    if (idx === presentIndex) {
-                        prev.nativeElement.before($liItem.nativeElement);
-                        this.lastSelectedItem.nativeElement.focus();
-                        const arr = this.listItems.toArray();
-                        let temp = arr[presentIndex];
-                        arr[presentIndex] = arr[presentIndex - 1];
-                        arr[presentIndex - 1] = temp;
-                        this.listItems.reset(arr);
-                        this.currentIndex = presentIndex;
-                        this.ariaText = "selected ";
-                    }
-                    prev = $liItem;
-                });
+                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                const prevElt = this.getListItemByIndex(presentIndex - 1);
+                prevElt.nativeElement.before(this.lastSelectedItem.nativeElement);
+                this.lastSelectedItem.nativeElement.focus();
+                this.statePersistence.removeWidgetState(this, 'selectedItem');
+                const arr = this.listItems.toArray();
+                [arr[presentIndex - 1], arr[presentIndex]] = [arr[presentIndex], arr[presentIndex - 1]];
+                this.listItems.reset(arr);
+                this.currentIndex = presentIndex;
+                this.ariaText = "selected ";
             }
             else {
                 presentIndex = presentIndex <= 0 ? 0 : (presentIndex - 1);
@@ -1168,27 +1162,20 @@ class ListComponent extends StylableComponent {
         }
         else if (action === 'focusNext') {
             if (this.isListElementMovable) {
-                let prev;
                 presentIndex = presentIndex < (listItems.length - 1) ? (presentIndex) : (listItems.length - 1);
-                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
                 if (presentIndex === this.listItems.length - 1) {
-                    prev = this.listItems.first;
                     return;
                 }
-                this.listItems.forEach(($liItem, idx) => {
-                    if (idx === presentIndex + 1) {
-                        prev.nativeElement.before($liItem.nativeElement);
-                        this.lastSelectedItem.nativeElement.focus();
-                        const arr = this.listItems.toArray();
-                        let temp = arr[presentIndex + 1];
-                        arr[presentIndex + 1] = arr[presentIndex];
-                        arr[presentIndex] = temp;
-                        this.listItems.reset(arr);
-                        this.currentIndex = idx + 1;
-                        this.ariaText = "selected ";
-                    }
-                    prev = $liItem;
-                });
+                this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                const nextElt = this.getListItemByIndex(presentIndex + 1);
+                nextElt.nativeElement.after(this.lastSelectedItem.nativeElement);
+                this.lastSelectedItem.nativeElement.focus();
+                this.statePersistence.removeWidgetState(this, 'selectedItem');
+                const arr = this.listItems.toArray();
+                [arr[presentIndex], arr[presentIndex + 1]] = [arr[presentIndex + 1], arr[presentIndex]];
+                this.listItems.reset(arr);
+                this.currentIndex = presentIndex + 2;
+                this.ariaText = "selected ";
             }
             else {
                 presentIndex = presentIndex < (listItems.length - 1) ? (presentIndex + 1) : (listItems.length - 1);
@@ -1214,12 +1201,13 @@ class ListComponent extends StylableComponent {
             this.isListElementMovable = !this.isListElementMovable;
             this.onItemClick($event, this.getListItemByIndex(presentIndex));
             this.currentIndex = presentIndex + 1;
-            let name = this.getListItemByIndex(presentIndex).item.name;
             if (this.isListElementMovable) {
-                this.ariaText = name + " grabbed, current position ";
+                this.ariaText = `Item ${this.currentIndex} grabbed, current position `;
+                this.$ulEle.data('oldIndex', presentIndex);
             }
             else {
-                this.ariaText = name + " dropped, final position ";
+                this.ariaText = `Item ${this.currentIndex} dropped, final position `;
+                this.onUpdate($event, undefined, presentIndex);
             }
         }
     }
@@ -1271,11 +1259,13 @@ class ListComponent extends StylableComponent {
             this.dataNavigator.maxResults = nv;
         }
         else if (key === 'enablereorder') {
-            if (nv) {
+            if (nv && this.$ulEle) {
+                this.$ulEle.attr('aria-describedby', this.titleId);
                 this.configureDnD();
                 this.$ulEle.sortable('enable');
             }
             else if (this.$ulEle && !nv) {
+                this.$ulEle.removeAttr('aria-describedby');
                 this.$ulEle.sortable('disable');
             }
         }
@@ -1439,9 +1429,18 @@ class ListComponent extends StylableComponent {
             super.ngAfterViewInit();
             this.setUpCUDHandlers();
             this.selectedItemWidgets = this.multiselect ? [] : {};
+            var ele = $(this.nativeElement).find('.app-livelist-container');
             if (this.enablereorder && !this.groupby) {
+                if (ele) {
+                    ele.attr('aria-describedby', this.titleId);
+                }
                 this.configureDnD();
             }
+            if (!this.enablereorder) {
+                if (ele) {
+                    ele.removeAttr('aria-describedby');
+                }
+            }
             if (this.groupby && this.collapsible) {
                 this.handleHeaderClick = handleHeaderClick;
                 this.toggleAllHeaders = toggleAllHeaders.bind(undefined, this);
@@ -1451,6 +1450,16 @@ class ListComponent extends StylableComponent {
         this.setupHandlers();
         const $ul = this.nativeElement.querySelector('ul.app-livelist-container');
         styler($ul, this, APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
+        if (this.enablereorder) {
+            if ($ul) {
+                $ul.setAttribute('aria-describedby', this.titleId);
+            }
+        }
+        if (!this.enablereorder) {
+            if ($ul) {
+                $ul.removeAttribute('aria-describedby');
+            }
+        }
         if (isMobileApp() && $ul.querySelector('.app-list-item-action-panel')) {
             this._listAnimator = new ListAnimator(this);
         }
@@ -1471,7 +1480,7 @@ ListComponent.initializeProps = registerProps();
 ListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'div[wmList]',
-                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<nav 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</nav>\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\" *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<nav 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</nav>\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<!--This template will be displayed when groupby is specified-->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group 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",
+                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\"  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<!--This template will be displayed when groupby is specified-->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group 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",
                 providers: [
                     provideAsWidgetRef(ListComponent)
                 ]