carbon-components-angular 3.16.3 → 3.17.3

package/docs/documentation/directives/DataGridFocus.html

@@ -58,9 +58,21 @@
             <code>src/table/data-grid-focus.directive.ts</code>
         </p>
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>NOTE: This directive has been deprecated in favor of <code>DataGridInteractionModel</code></p>
 
+            </p>
 
 
+            <p class="comment">
+                <h3>Example</h3>
+            </p>
+            <div class="io-description">
+            </div>
+
         <section>
             <h3>Metadata</h3>
             <table class="table table-sm table-hover">
@@ -95,20 +107,6 @@
                     </td>
                 </tr>
 
-                <tr>
-                    <td class="col-md-4">
-                        <h6><b>Methods</b></h6>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <ul class="index-list">
-                            <li>
-                                <a href="#focus">focus</a>
-                            </li>
-                        </ul>
-                    </td>
-                </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -191,7 +189,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/table/data-grid-focus.directive.ts:30</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/table/data-grid-focus.directive.ts:35</a></div>
                             </td>
                         </tr>
 
@@ -247,7 +245,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/table/data-grid-focus.directive.ts:17</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/table/data-grid-focus.directive.ts:22</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -268,7 +266,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="16" class="link-to-prism">src/table/data-grid-focus.directive.ts:16</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/table/data-grid-focus.directive.ts:21</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -290,7 +288,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/table/data-grid-focus.directive.ts:28</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/table/data-grid-focus.directive.ts:33</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -320,7 +318,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/table/data-grid-focus.directive.ts:159</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="153" class="link-to-prism">src/table/data-grid-focus.directive.ts:153</a></div>
                             </td>
                         </tr>
 
@@ -354,7 +352,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="46" class="link-to-prism">src/table/data-grid-focus.directive.ts:46</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="40" class="link-to-prism">src/table/data-grid-focus.directive.ts:40</a></div>
                             </td>
                         </tr>
 
@@ -363,77 +361,6 @@
         </table>
 </section>
 
-            <section>
-    
-        <h3 id="methods">
-            Methods
-        </h3>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="focus"></a>
-                        <span class="name">
-                            <b>
-                            focus
-                            </b>
-                            <a href="#focus"><span class="icon ion-ios-link"></span></a>
-                        </span>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-<code>focus(element)</code>
-                    </td>
-                </tr>
-
-
-                        <tr>
-                            <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/table/data-grid-focus.directive.ts:34</a></div>
-                            </td>
-                        </tr>
-
-
-                <tr>
-                    <td class="col-md-4">
-
-                            <div class="io-description">
-                                    <b>Parameters :</b>
-                                    <table class="params">
-                                        <thead>
-                                            <tr>
-                                                <td>Name</td>
-                                                <td>Optional</td>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                                <tr>
-                                                        <td>element</td>
-                                                    
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
-                            <div>
-                            </div>
-                            <div class="io-description">
-                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                            </div>
-                                <div class="io-description">
-                                    
-                                </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
             <section>
     
@@ -468,7 +395,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/table/data-grid-focus.directive.ts:30</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/table/data-grid-focus.directive.ts:35</a></div>
                             </td>
                         </tr>
 
@@ -497,7 +424,7 @@
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/table/data-grid-focus.directive.ts:24</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/table/data-grid-focus.directive.ts:29</a></div>
                                 </td>
                             </tr>
 
@@ -508,7 +435,7 @@
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/table/data-grid-focus.directive.ts:17</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/table/data-grid-focus.directive.ts:22</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -567,6 +494,11 @@
 import { Table } from &quot;./table.component&quot;;
 import { getFocusElementList, tabbableSelectorIgnoreTabIndex } from &quot;../common/tab.service&quot;;
 
+/**
+ * NOTE: This directive has been deprecated in favor of &#x60;DataGridInteractionModel&#x60;
+ *
+ * @deprecated
+ */
 @Directive({
 	selector: &quot;[ibmDataGridFocus]&quot;
 })
@@ -589,17 +521,6 @@ export class DataGridFocus {
 
 	constructor(protected elementRef: ElementRef) {}
 
-	focus(element) {
-		const focusElementList &#x3D; getFocusElementList(element, tabbableSelectorIgnoreTabIndex);
-		if (element.firstElementChild &amp;&amp; element.firstElementChild.classList.contains(&quot;bx--table-sort-v2&quot;)) {
-			focusElementList[1].focus();
-		} else if (focusElementList.length &gt; 0) {
-			focusElementList[0].focus();
-		}  else {
-			element.focus();
-		}
-	}
-
 	@HostListener(&quot;keydown&quot;, [&quot;$event&quot;])
 	keyDown(event: KeyboardEvent) {
 		if (!this.ibmDataGridFocus) {
@@ -622,7 +543,7 @@ export class DataGridFocus {
 					const nextSibling &#x3D; element.nextElementSibling;
 					Table.setTabIndex(element, -1);
 					Table.setTabIndex(nextSibling, 0);
-					this.focus(nextSibling);
+					Table.focus(nextSibling);
 				}
 				break;
 			case &quot;Left&quot;: // IE specific value
@@ -633,7 +554,7 @@ export class DataGridFocus {
 					const previousSibling &#x3D; element.previousElementSibling;
 					Table.setTabIndex(element, -1);
 					Table.setTabIndex(previousSibling, 0);
-					this.focus(previousSibling);
+					Table.focus(previousSibling);
 				}
 				break;
 			case &quot;Down&quot;: // IE specific value
@@ -645,13 +566,13 @@ export class DataGridFocus {
 					Table.setTabIndex(element, -1);
 					if (rows[rowIndex].classList.contains(&quot;bx--expandable-row-v2&quot;) &amp;&amp; !rows[rowIndex].classList.contains(&quot;bx--parent-row-v2&quot;)) {
 						Table.setTabIndex(row[0], 0);
-						this.focus(row[0]);
+						Table.focus(row[0]);
 					} else {
 						if (this.columnIndex &gt; row.length - 1) {
 							this.columnIndex &#x3D; row.length - 1;
 						}
 						Table.setTabIndex(row[this.columnIndex], 0);
-						this.focus(row[this.columnIndex]);
+						Table.focus(row[this.columnIndex]);
 					}
 				}
 				break;
@@ -667,13 +588,13 @@ export class DataGridFocus {
 				const row &#x3D; rows[rowIndex].querySelectorAll(&quot;td, th&quot;);
 				if (rows[rowIndex].classList.contains(&quot;bx--expandable-row-v2&quot;) &amp;&amp; !rows[rowIndex].classList.contains(&quot;bx--parent-row-v2&quot;)) {
 					Table.setTabIndex(row[0], 0);
-					this.focus(row[0]);
+					Table.focus(row[0]);
 				} else {
 					if (this.columnIndex &gt; row.length - 1) {
 						this.columnIndex &#x3D; row.length - 1;
 					}
 					Table.setTabIndex(row[this.columnIndex], 0);
-					this.focus(row[this.columnIndex]);
+					Table.focus(row[this.columnIndex]);
 				}
 				break;
 			case &quot;Home&quot;:
@@ -683,16 +604,16 @@ export class DataGridFocus {
 				if (event.ctrlKey) {
 					if (Array.from(headerRow).some(th &#x3D;&gt; getFocusElementList(th, tabbableSelectorIgnoreTabIndex).length &gt; 0)) {
 						Table.setTabIndex(headerRow[0], 0);
-						this.focus(headerRow[0]);
+						Table.focus(headerRow[0]);
 					} else {
 						const firstBodyCell &#x3D; rows[1].querySelectorAll(&quot;td&quot;)[0];
 						Table.setTabIndex(firstBodyCell, 0);
-						this.focus(firstBodyCell);
+						Table.focus(firstBodyCell);
 					}
 				} else {
 					const firstRowCell &#x3D; rows[rowIndex].querySelectorAll(&quot;th, td&quot;)[0];
 					Table.setTabIndex(firstRowCell, 0);
-					this.focus(firstRowCell);
+					Table.focus(firstRowCell);
 				}
 				break;
 			case &quot;End&quot;:
@@ -702,12 +623,12 @@ export class DataGridFocus {
 				if (event.ctrlKey) {
 					this.columnIndex &#x3D; lastRow.length - 1;
 					Table.setTabIndex(lastRow[this.columnIndex], 0);
-					this.focus(lastRow[this.columnIndex]);
+					Table.focus(lastRow[this.columnIndex]);
 				} else {
 					const currentRow &#x3D; rows[rowIndex].querySelectorAll(&quot;th, td&quot;);
 					this.columnIndex &#x3D; currentRow.length - 1;
 					Table.setTabIndex(currentRow[this.columnIndex], 0);
-					this.focus(currentRow[this.columnIndex]);
+					Table.focus(currentRow[this.columnIndex]);
 				}
 				break;
 		}
@@ -721,7 +642,7 @@ export class DataGridFocus {
 		const focusElementList &#x3D; getFocusElementList(this.elementRef.nativeElement.closest(&quot;table&quot;), tabbableSelectorIgnoreTabIndex);
 		focusElementList.forEach(element &#x3D;&gt; Table.setTabIndex(element, -1));
 		Table.setTabIndex(this.elementRef.nativeElement, 0);
-		this.focus(this.elementRef.nativeElement);
+		Table.focus(this.elementRef.nativeElement);
 	}
 }
 </code></pre>