@refinitiv-ui/efx-grid 6.0.137 → 6.0.139

Sign up to get free protection for your applications and to get access to all the features.
@@ -570,7 +570,7 @@ class ColumnSelectionDialog extends BasicElement {
570
570
  this._excludedRightColumns = 0;
571
571
  this._unmovableColumns = 0;
572
572
  this._pendingScroll = false;
573
- this._highlightedElem = null; // There can only one highlighted elem
573
+ this._focusedElement = null;
574
574
  this._pendingTreeRefresh = false;
575
575
  this._pendingResetSearchInput = false;
576
576
  this._middleSeparator = "";
@@ -613,6 +613,8 @@ class ColumnSelectionDialog extends BasicElement {
613
613
  this._handleInfoIconMouseover = this._handleInfoIconMouseover.bind(this);
614
614
  this._handleInfoIconMouseout = this._handleInfoIconMouseout.bind(this);
615
615
  this._handleClick = this._handleClick.bind(this);
616
+ this._handleFocusIn = this._handleFocusIn.bind(this);
617
+ this._handleFocusOut = this._handleFocusOut.bind(this);
616
618
  this._createTreeCustomRender = this._createTreeCustomRender.bind(this);
617
619
  this._selectAllCheckedChanged = this._selectAllCheckedChanged.bind(this);
618
620
 
@@ -738,7 +740,7 @@ class ColumnSelectionDialog extends BasicElement {
738
740
  </div>
739
741
  <div class="row">
740
742
  <div class="side">
741
- <ef-search-field placeholder="${this._searchPlaceholder ? this._searchPlaceholder : t["Search"]}" id="searchInput"></ef-search-field>
743
+ <ef-search-field aria-label="search for columns" placeholder="${this._searchPlaceholder ? this._searchPlaceholder : t["Search"]}" id="searchInput"></ef-search-field>
742
744
  </div>
743
745
  <div class="side">
744
746
  <label>${t["Show in this order"]}</label>
@@ -750,13 +752,13 @@ class ColumnSelectionDialog extends BasicElement {
750
752
  <div id="allColumns">
751
753
  <ef-item id="treeNoResult" class="no-results" label="${t["No results found"]}"></ef-item>
752
754
  <ef-header level="1" id="selectAllHeader">
753
- <ef-checkbox id="selectAllCheckbox">${t["Select All"]}</ef-checkbox>
755
+ <ef-checkbox aria-label="select all columns" id="selectAllCheckbox">${t["Select All"]}</ef-checkbox>
754
756
  </ef-header>
755
- <ef-tree id="tree" multiple></ef-tree>
757
+ <ef-tree aria-label="column list" id="tree" multiple></ef-tree>
756
758
  </div>
757
759
  </div>
758
760
  <div class="side" id="visibleSide">
759
- <div id="visibleColumns">
761
+ <div id="visibleColumns" aria-label="visible column list">
760
762
  ${this._visibleColumnList.map(item => html`
761
763
  <ef-item
762
764
  value="${item.value}"
@@ -768,10 +770,10 @@ class ColumnSelectionDialog extends BasicElement {
768
770
  </div>
769
771
  <div id="ordering_div">
770
772
  <div id="ordering_buttons">
771
- <ef-button icon="up" @click="${this._onUpItem}" id="upItem">${t["Up"]}</ef-button><!--
772
- --><ef-button icon="down" @click="${this._onDownItem}" id="downItem">${t["Down"]}</ef-button>
773
+ <ef-button aria-label="move selected visible columns up" icon="up" @click="${this._onUpItem}" id="upItem">${t["Up"]}</ef-button><!--
774
+ --><ef-button aria-label="move selected visible columns down" icon="down" @click="${this._onDownItem}" id="downItem">${t["Down"]}</ef-button>
773
775
  </div>
774
- <ef-button id="removeFromVisibleColumnsBtn" @click="${this._removeBtnClicked}">${t["Remove"]}</ef-button>
776
+ <ef-button aria-label="remove selected visible columns" id="removeFromVisibleColumnsBtn" @click="${this._removeBtnClicked}">${t["Remove"]}</ef-button>
775
777
  </div>
776
778
  </div>
777
779
  </div>
@@ -779,7 +781,7 @@ class ColumnSelectionDialog extends BasicElement {
779
781
  </div>
780
782
  <div slot="footer">
781
783
  <div part="custom-buttons">
782
- ${this._defaultItems ? html`<ef-button id="restore_btn" @click="${this._restoreDefault}" tabindex="0">${t["RESTORE DEFAULT"]}</ef-button>` : ""}
784
+ ${this._defaultItems ? html`<ef-button aria-label="restore default visible columns" id="restore_btn" @click="${this._restoreDefault}" tabindex="0">${t["RESTORE DEFAULT"]}</ef-button>` : ""}
783
785
  ${hasNoVisibleItem ? html`<ef-icon icon="warning-circle"></ef-icon>` : ""}
784
786
  ${hasNoVisibleItem ? html`<div id="status_div">${t["WARNING_1"]}</div>` : ""}
785
787
  </div>
@@ -827,6 +829,8 @@ class ColumnSelectionDialog extends BasicElement {
827
829
  this._visibleColumnsContainer.addEventListener('mouseout', this._handleMouseout);
828
830
  this._visibleColumnsContainer.addEventListener('click', this._handleClick);
829
831
  this._visibleColumnsContainer.addEventListener('dblclick', this._removeBtnClicked);
832
+ this._visibleColumnsContainer.addEventListener('focusin', this._handleFocusIn);
833
+ this._visibleColumnsContainer.addEventListener('focusout', this._handleFocusOut);
830
834
 
831
835
  // icon custom renderer
832
836
  if(this._descriptionBox) { // TODO: This should not work only for the first time
@@ -1131,58 +1135,42 @@ class ColumnSelectionDialog extends BasicElement {
1131
1135
  return getItemIndex(this._visibleColumnList, separatorCol.value, "value");
1132
1136
  }
1133
1137
 
1134
- /** This will also remove focused state set by ef-item
1135
- * @private
1136
- */
1137
- _unhighlightItems() {
1138
- if(this._highlightedElem) { // There can be only one highlighted Item
1139
- this._highlightedElem.highlighted = false;
1140
- this._highlightedElem.removeAttribute('focused'); // WORKAROUND: Focused and highlighted have the same styles in Halo themes
1141
- this._highlightedElem = null;
1142
- }
1143
- }
1144
-
1145
1138
  /** @private
1146
1139
  * @param {number} step if positive highlight will move up, if negative highlight will move down
1147
1140
  */
1148
- _moveHighlightedItems(step) {
1141
+ _moveFocusedItem(step) {
1149
1142
  if (!step) {
1150
1143
  return;
1151
1144
  }
1152
1145
 
1153
- if (!this._highlightedElem) {
1146
+ var focusedEl = this._focusedElement;
1147
+ if (!focusedEl) {
1154
1148
  var selectedIndexes = _getSelectedItemIndexes(this._visibleColumnList);
1155
1149
  if (!selectedIndexes.length) {
1156
1150
  return;
1157
1151
  }
1158
1152
 
1159
- this._highlightedElem = this._visibleColumnsContainer.children[selectedIndexes[0]];
1160
- this._highlightedElem.highlighted = true;
1153
+ focusedEl = this._visibleColumnsContainer.children[selectedIndexes[0]];
1161
1154
  }
1162
1155
 
1163
- var pn = this._highlightedElem.parentNode;
1156
+ var pn = focusedEl.parentNode;
1164
1157
  if(!pn) {
1165
1158
  return;
1166
1159
  }
1167
1160
 
1168
1161
  var chdr = pn.children;
1169
1162
  var childCount = chdr.length;
1170
- var i; // highlighted index
1163
+ var i; // focused element index
1171
1164
  for(i = 0; i < childCount; ++i) {
1172
- if(chdr[i] === this._highlightedElem) {
1165
+ if(chdr[i] === focusedEl) {
1173
1166
  break;
1174
1167
  }
1175
1168
  }
1176
- if(i >= childCount) {
1177
- return;
1178
- }
1179
1169
 
1180
1170
  i += step;
1181
1171
  if (i >= 0 && i < childCount) {
1182
- this._unhighlightItems();
1183
- this._highlightedElem = chdr[i];
1184
- this._highlightedElem.highlighted = true;
1185
1172
  scrollToItem(pn, i);
1173
+ chdr[i].focus();
1186
1174
  }
1187
1175
  }
1188
1176
 
@@ -1501,6 +1489,22 @@ class ColumnSelectionDialog extends BasicElement {
1501
1489
  this._selectAllStatus && this._selectAllCheckbox.setAttribute(this._selectAllStatus, "");
1502
1490
  }
1503
1491
 
1492
+ /**
1493
+ * @private
1494
+ * @param {Object} e
1495
+ */
1496
+ _handleFocusIn(e) {
1497
+ this._focusedElement = e.target;
1498
+ }
1499
+
1500
+ /**
1501
+ * @private
1502
+ * @param {Object} e
1503
+ */
1504
+ _handleFocusOut(e) {
1505
+ this._focusedElement = null;
1506
+ }
1507
+
1504
1508
  /**
1505
1509
  * @private
1506
1510
  * @param {Object} e
@@ -1509,17 +1513,32 @@ class ColumnSelectionDialog extends BasicElement {
1509
1513
  var handled = false;
1510
1514
  switch (e.keyCode) {
1511
1515
  case 40: // down
1512
- case 9: // tab
1513
- this._moveHighlightedItems(1);
1516
+ this._moveFocusedItem(1);
1514
1517
  handled = true;
1515
1518
  break;
1516
1519
  case 38: // up
1517
- this._moveHighlightedItems(-1);
1520
+ this._moveFocusedItem(-1);
1518
1521
  handled = true;
1519
1522
  break;
1523
+ case 9: // tab
1524
+ var focusedEl = this._focusedElement;
1525
+ if (focusedEl) {
1526
+ if (e.shiftKey) {
1527
+ if(focusedEl.previousElementSibling) {
1528
+ this._moveFocusedItem(-1);
1529
+ handled = true;
1530
+ }
1531
+ } else {
1532
+ if (focusedEl.nextElementSibling) {
1533
+ this._moveFocusedItem(1);
1534
+ handled = true;
1535
+ }
1536
+ }
1537
+ }
1538
+ break;
1520
1539
  case 13: // enter
1521
- if(this._highlightedElem) {
1522
- this._highlightedElem.click();
1540
+ if(this._focusedElement) {
1541
+ this._focusedElement.click();
1523
1542
  handled = true;
1524
1543
  }
1525
1544
  break;
@@ -1527,7 +1546,6 @@ class ColumnSelectionDialog extends BasicElement {
1527
1546
 
1528
1547
  if(handled) {
1529
1548
  e.preventDefault();
1530
- e.stopPropagation();
1531
1549
  }
1532
1550
  }
1533
1551
 
@@ -1538,14 +1556,7 @@ class ColumnSelectionDialog extends BasicElement {
1538
1556
  _handleMouseover(e) {
1539
1557
  var targetElem = e.target;
1540
1558
  if (targetElem.highlightable) {
1541
- if (this._highlightedElem) {
1542
- if(this._highlightedElem === targetElem) {
1543
- return;
1544
- }
1545
- this._highlightedElem.highlighted = false;
1546
- }
1547
- this._highlightedElem = targetElem;
1548
- this._highlightedElem.highlighted = true;
1559
+ targetElem.highlighted = true;
1549
1560
  }
1550
1561
  }
1551
1562
 
@@ -1554,11 +1565,7 @@ class ColumnSelectionDialog extends BasicElement {
1554
1565
  * @param {Object} e
1555
1566
  */
1556
1567
  _handleMouseout(e) {
1557
- var targetElem = e.target;
1558
- if (targetElem === this._highlightedElem) {
1559
- targetElem.highlighted = false;
1560
- this._highlightedElem = null;
1561
- }
1568
+ e.target.highlighted = false;
1562
1569
  }
1563
1570
 
1564
1571
  /**
@@ -1582,8 +1589,7 @@ class ColumnSelectionDialog extends BasicElement {
1582
1589
  return;
1583
1590
  }
1584
1591
 
1585
- var list = null;
1586
- list = this._visibleColumnList;
1592
+ var list = this._visibleColumnList;
1587
1593
  var selectedIndex = getDomElementIndex(selectedElement);
1588
1594
 
1589
1595
  if(e.metaKey || e.ctrlKey) {
@@ -1608,7 +1614,7 @@ class ColumnSelectionDialog extends BasicElement {
1608
1614
  * @private
1609
1615
  * @param {object} e - event object
1610
1616
  */
1611
- _handleInfoIconClicked(e) {
1617
+ _handleInfoIconClicked(e) {
1612
1618
  var targetElem = e.currentTarget;
1613
1619
  var divItem = targetElem.parentNode;
1614
1620
  var treeItem = divItem.parentNode;
@@ -1621,7 +1627,7 @@ class ColumnSelectionDialog extends BasicElement {
1621
1627
  * @private
1622
1628
  * @param {object} e - event object
1623
1629
  */
1624
- _handleInfoIconMouseover(e) {
1630
+ _handleInfoIconMouseover(e) {
1625
1631
  var targetElem = e.currentTarget;
1626
1632
  var divItem = targetElem.parentNode;
1627
1633
  var treeItem = divItem.parentNode;
@@ -1634,7 +1640,7 @@ class ColumnSelectionDialog extends BasicElement {
1634
1640
  * @private
1635
1641
  * @param {object} e - event object
1636
1642
  */
1637
- _handleInfoIconMouseout(e) {
1643
+ _handleInfoIconMouseout(e) {
1638
1644
  var targetElem = e.currentTarget;
1639
1645
  var divItem = targetElem.parentNode;
1640
1646
  var treeItem = divItem.parentNode;
@@ -1873,10 +1879,10 @@ class ColumnSelectionDialog extends BasicElement {
1873
1879
  }
1874
1880
 
1875
1881
  /**
1876
- * ef-tree value changed event
1877
- * @param {Object} e
1878
- * @private
1879
- */
1882
+ * ef-tree value changed event
1883
+ * @param {Object} e
1884
+ * @private
1885
+ */
1880
1886
  _treeValueChanged(e) {
1881
1887
  var selectedMapping = {};
1882
1888
 
@@ -2007,7 +2013,6 @@ class ColumnSelectionDialog extends BasicElement {
2007
2013
  if (index >= 0) this._visibleColumnList[index] = null;
2008
2014
  }
2009
2015
  this._visibleColumnList = this._visibleColumnList.filter(Boolean); // clear null element
2010
- this._unhighlightItems();
2011
2016
  this._pendingButtonUpdate = true;
2012
2017
  }
2013
2018
  }
package/lib/grid/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import {Grid} from "./lib/efx-grid.js";
2
2
  export {Grid}
3
- window.EFX_GRID = { version: "6.0.137" };
3
+ window.EFX_GRID = { version: "6.0.139" };
@@ -49,8 +49,6 @@ declare class RowSegmentingPlugin extends GridPlugin {
49
49
 
50
50
  public getSegmentParentRowId(rowRef: string|number|null): string;
51
51
 
52
- public _resolveDisplayColumn(): number;
53
-
54
52
  public setSegmentSeparators(rowIds: (string)[]|null, enabled?: boolean|null): boolean;
55
53
 
56
54
  public setSegmentSeparator(rowRef: string|number|null, enabled?: boolean|null): boolean;