carbon-components-angular 3.16.3 → 3.17.3

package/docs/documentation/classes/TableHeaderItem.html

@@ -83,6 +83,9 @@
                                     <span class="modifier">Protected</span>
                                 <a href="#_ascending">_ascending</a>
                             </li>
+                            <li>
+                                <a href="#ariaSortLabel">ariaSortLabel</a>
+                            </li>
                             <li>
                                 <a href="#className">className</a>
                             </li>
@@ -101,6 +104,9 @@
                             <li>
                                 <a href="#filterTemplate">filterTemplate</a>
                             </li>
+                            <li>
+                                <a href="#formatSortLabel">formatSortLabel</a>
+                            </li>
                             <li>
                                 <a href="#metadata">metadata</a>
                             </li>
@@ -177,7 +183,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="213" class="link-to-prism">src/table/table-header-item.class.ts:213</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/table/table-header-item.class.ts:197</a></div>
                             </td>
                         </tr>
 
@@ -249,7 +255,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="213" class="link-to-prism">src/table/table-header-item.class.ts:213</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/table/table-header-item.class.ts:197</a></div>
                             </td>
                         </tr>
 
@@ -262,6 +268,46 @@
 
             </tbody>
         </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="ariaSortLabel"></a>
+                        <span class="name">
+                            <b>
+                            ariaSortLabel
+                            </b>
+                            <a href="#ariaSortLabel"><span class="icon ion-ios-link"></span></a>
+                        </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <code>ariaSortLabel:     <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <i>Type : </i>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                        </td>
+                    </tr>
+                        <tr>
+                            <td class="col-md-4">
+                                    <div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/table/table-header-item.class.ts:119</a></div>
+                            </td>
+                        </tr>
+
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The label for the sort button</p>
+</div>
+                    </td>
+                </tr>
+
+            </tbody>
+        </table>
         <table class="table table-sm table-bordered">
             <tbody>
                 <tr>
@@ -289,7 +335,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="44" class="link-to-prism">src/table/table-header-item.class.ts:44</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="39" class="link-to-prism">src/table/table-header-item.class.ts:39</a></div>
                             </td>
                         </tr>
 
@@ -329,7 +375,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="85" class="link-to-prism">src/table/table-header-item.class.ts:85</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="74" class="link-to-prism">src/table/table-header-item.class.ts:74</a></div>
                             </td>
                         </tr>
 
@@ -374,7 +420,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/table/table-header-item.class.ts:37</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/table/table-header-item.class.ts:33</a></div>
                             </td>
                         </tr>
 
@@ -415,7 +461,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="205" class="link-to-prism">src/table/table-header-item.class.ts:205</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="190" class="link-to-prism">src/table/table-header-item.class.ts:190</a></div>
                             </td>
                         </tr>
 
@@ -459,7 +505,7 @@ available in <code>filterData.data</code> in your extension of <code>TableHeader
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="190" class="link-to-prism">src/table/table-header-item.class.ts:190</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="178" class="link-to-prism">src/table/table-header-item.class.ts:178</a></div>
                             </td>
                         </tr>
 
@@ -499,7 +545,7 @@ available in <code>filterData.data</code> in your extension of <code>TableHeader
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/table/table-header-item.class.ts:182</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="173" class="link-to-prism">src/table/table-header-item.class.ts:173</a></div>
                             </td>
                         </tr>
 
@@ -545,6 +591,46 @@ store the data you need to <code>filter.data</code>. You will be able to access
 
             </tbody>
         </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="formatSortLabel"></a>
+                        <span class="name">
+                            <b>
+                            formatSortLabel
+                            </b>
+                            <a href="#formatSortLabel"><span class="icon ion-ios-link"></span></a>
+                        </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <code>formatSortLabel:     <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
+</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <i>Type : </i>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
+
+                        </td>
+                    </tr>
+                        <tr>
+                            <td class="col-md-4">
+                                    <div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/table/table-header-item.class.ts:124</a></div>
+                            </td>
+                        </tr>
+
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>A callback function to format the sort label. Will be heavily called.</p>
+</div>
+                    </td>
+                </tr>
+
+            </tbody>
+        </table>
         <table class="table table-sm table-bordered">
             <tbody>
                 <tr>
@@ -572,7 +658,7 @@ store the data you need to <code>filter.data</code>. You will be able to access
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/table/table-header-item.class.ts:94</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="80" class="link-to-prism">src/table/table-header-item.class.ts:80</a></div>
                             </td>
                         </tr>
 
@@ -612,7 +698,7 @@ For example, which <code>field</code> is this column related to.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/table/table-header-item.class.ts:28</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/table/table-header-item.class.ts:25</a></div>
                             </td>
                         </tr>
 
@@ -652,7 +738,7 @@ If false then this column won&#39;t show a sorting arrow at all.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/table/table-header-item.class.ts:20</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="18" class="link-to-prism">src/table/table-header-item.class.ts:18</a></div>
                             </td>
                         </tr>
 
@@ -697,7 +783,7 @@ If false then this column won&#39;t show a sorting arrow at all.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="53" class="link-to-prism">src/table/table-header-item.class.ts:53</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="47" class="link-to-prism">src/table/table-header-item.class.ts:47</a></div>
                             </td>
                         </tr>
 
@@ -738,7 +824,7 @@ If false then this column won&#39;t show a sorting arrow at all.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/table/table-header-item.class.ts:130</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/table/table-header-item.class.ts:114</a></div>
                             </td>
                         </tr>
 
@@ -792,7 +878,7 @@ necessary for you to be able to access item&#39;s data in the template.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/table/table-header-item.class.ts:13</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="12" class="link-to-prism">src/table/table-header-item.class.ts:12</a></div>
                             </td>
                         </tr>
 
@@ -834,7 +920,7 @@ necessary for you to be able to access item&#39;s data in the template.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/table/table-header-item.class.ts:251</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="229" class="link-to-prism">src/table/table-header-item.class.ts:229</a></div>
                             </td>
                         </tr>
 
@@ -843,6 +929,11 @@ necessary for you to be able to access item&#39;s data in the template.</p>
                     <td class="col-md-4">
                             <div class="io-description"><p>Used for sorting rows of the table.</p>
 <p>Override to enable different sorting.</p>
+<p>&lt; 0 if <code>one</code> should go before <code>two</code></p>
+<blockquote>
+<p>0 if <code>one</code> shoulg go after <code>two</code>
+0 if it doesn&#39;t matter (they are the same)</p>
+</blockquote>
 </div>
 
                             <div class="io-description">
@@ -890,12 +981,7 @@ necessary for you to be able to access item&#39;s data in the template.</p>
 
                             </div>
                                 <div class="io-description">
-                                    <p>&lt; 0 if <code>one</code> should go before <code>two</code></p>
-<blockquote>
-<p>0 if <code>one</code> shoulg go after <code>two</code>
-0 if it doesn&#39;t matter (they are the same)</p>
-</blockquote>
-
+                                    
                                 </div>
                     </td>
                 </tr>
@@ -923,7 +1009,7 @@ necessary for you to be able to access item&#39;s data in the template.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="275" class="link-to-prism">src/table/table-header-item.class.ts:275</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="250" class="link-to-prism">src/table/table-header-item.class.ts:250</a></div>
                             </td>
                         </tr>
 
@@ -934,6 +1020,8 @@ necessary for you to be able to access item&#39;s data in the template.</p>
 <p>Override to make a custom filter.</p>
 <p>Even though there is just one filter function, there can be multiple filters.
 When implementing filter, set <code>filterCount</code> before returning.</p>
+<p><code>true</code> to hide the row
+<code>false</code> to show the row</p>
 </div>
 
                             <div class="io-description">
@@ -969,9 +1057,7 @@ When implementing filter, set <code>filterCount</code> before returning.</p>
 
                             </div>
                                 <div class="io-description">
-                                    <p><code>true</code> to hide the row
-<code>false</code> to show the row</p>
-
+                                    
                                 </div>
                     </td>
                 </tr>
@@ -1004,7 +1090,7 @@ When implementing filter, set <code>filterCount</code> before returning.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/table/table-header-item.class.ts:63</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="56" class="link-to-prism">src/table/table-header-item.class.ts:56</a></div>
                                 </td>
                             </tr>
 
@@ -1015,7 +1101,7 @@ When implementing filter, set <code>filterCount</code> before returning.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="60" class="link-to-prism">src/table/table-header-item.class.ts:60</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="53" class="link-to-prism">src/table/table-header-item.class.ts:53</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -1071,7 +1157,7 @@ When implementing filter, set <code>filterCount</code> before returning.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/table/table-header-item.class.ts:75</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/table/table-header-item.class.ts:67</a></div>
                                 </td>
                             </tr>
 
@@ -1082,7 +1168,7 @@ When implementing filter, set <code>filterCount</code> before returning.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="72" class="link-to-prism">src/table/table-header-item.class.ts:72</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="64" class="link-to-prism">src/table/table-header-item.class.ts:64</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -1137,14 +1223,12 @@ export class TableHeaderItem {
 	/**
 	 * Defines if column under this TableHeaderItem should be displayed.
 	 *
-	 * @memberof TableHeaderItem
 	 */
 	visible &#x3D; true;
 
 	/**
 	 * Disables sorting by default.
 	 *
-	 * @memberof TableHeaderItem
 	 */
 	sorted &#x3D; false;
 
@@ -1152,7 +1236,6 @@ export class TableHeaderItem {
 	 * Enables sorting on click by default.
 	 * If false then this column won&#x27;t show a sorting arrow at all.
 	 *
-	 * @memberof TableHeaderItem
 	 */
 	sortable &#x3D; true;
 
@@ -1161,14 +1244,12 @@ export class TableHeaderItem {
 	 *
 	 * &#x60;filter()&#x60; should set it to appropriate number.
 	 *
-	 * @memberof TableHeaderItem
 	 */
 	filterCount &#x3D; 0;
 
 	/**
 	 * Attach a class to the column, both the header and column cells.
 	 *
-	 * @memberof TableHeaderItem
 	 */
 	className: string;
 
@@ -1177,14 +1258,12 @@ export class TableHeaderItem {
 	 *
 	 * ngStyle-like format
 	 *
-	 * @memberof TableHeaderItem
 	 */
 	style &#x3D; {};
 
 	/**
 	 * If true, sort is set to ascending, if false descending will be true.
 	 *
-	 * @memberof TableHeaderItem
 	 */
 	set ascending(asc) {
 		this._ascending &#x3D; asc;
@@ -1196,7 +1275,6 @@ export class TableHeaderItem {
 	/**
 	 * If true, sort is set to descending, if false ascending will be true.
 	 *
-	 * @memberof TableHeaderItem
 	 */
 	set descending(desc) {
 		this._ascending &#x3D; !desc;
@@ -1207,18 +1285,12 @@ export class TableHeaderItem {
 
 	/**
 	 * Data for the header item.
-	 *
-	 * @type {*}
-	 * @memberof TableHeaderItem
 	 */
 	data: any;
 
 	/**
 	 * Data for the header item for general usage in the controller.
 	 * For example, which &#x60;field&#x60; is this column related to.
-	 *
-	 * @type {*}
-	 * @memberof TableHeaderItem
 	 */
 	metadata: any;
 
@@ -1253,11 +1325,19 @@ export class TableHeaderItem {
 	 * 		new TableHeaderItem({data: {name: &quot;Custom header&quot;, link: &quot;/table&quot;}, template: this.customHeaderTemplate})
 	 * ];
 	 * &#x60;&#x60;&#x60;
-	 * @type {TemplateRef&lt;any&gt;}
-	 * @memberof TableHeaderItem
 	 */
 	template: TemplateRef&lt;any&gt;;
 
+	/**
+	 * The label for the sort button
+	 */
+	ariaSortLabel: string;
+
+	/**
+	 * A callback function to format the sort label. Will be heavily called.
+	 */
+	formatSortLabel: (label: string, staticLabel?: string) &#x3D;&gt; string;
+
 	/**
 	 * Used as a template for popover filter.
 	 *
@@ -1304,17 +1384,11 @@ export class TableHeaderItem {
 	 * 	}
 	 * }
 	 * &#x60;&#x60;&#x60;
-	 *
-	 * @type {TemplateRef&lt;any&gt;}
-	 * @memberof TableHeaderItem
 	 */
 	filterTemplate: TemplateRef&lt;any&gt;;
 
 	/**
 	 * Used along with &#x60;filterTemplate&#x60; to construct the filter popover
-	 *
-	 * @type {TemplateRef&lt;any&gt;}
-	 * @memberof TableHeaderItem
 	 */
 	filterFooter: TemplateRef&lt;any&gt;;
 
@@ -1327,9 +1401,6 @@ export class TableHeaderItem {
 	 * available in &#x60;filterData.data&#x60; in your extension of &#x60;TableHeaderItem&#x60;.
 	 *
 	 * Because angular and object references.
-	 *
-	 * @type {*}
-	 * @memberof TableHeaderItem
 	 */
 	filterData: any;
 
@@ -1337,14 +1408,11 @@ export class TableHeaderItem {
 	 * used in &#x60;ascending&#x60;
 	 *
 	 * @protected
-	 * @memberof TableHeaderItem
 	 */
 	protected _ascending &#x3D; true;
 
 	/**
 	 * Creates an instance of TableHeaderItem.
-	 * @param {*} [rawData]
-	 * @memberof TableHeaderItem
 	 */
 	constructor(rawData?: any) {
 		// defaults so we dont leave things empty
@@ -1369,13 +1437,9 @@ export class TableHeaderItem {
 	 *
 	 * Override to enable different sorting.
 	 *
-	 * @param {TableItem} one
-	 * @param {TableItem} two
-	 * @returns {number}
 	 * &lt; 0 if &#x60;one&#x60; should go before &#x60;two&#x60;
 	 * &gt; 0 if &#x60;one&#x60; shoulg go after &#x60;two&#x60;
 	 * 0 if it doesn&#x27;t matter (they are the same)
-	 * @memberof TableHeaderItem
 	 */
 	compare(one: TableItem, two: TableItem): number {
 		if (one.data &lt; two.data) {
@@ -1395,11 +1459,8 @@ export class TableHeaderItem {
 	 * Even though there is just one filter function, there can be multiple filters.
 	 * When implementing filter, set &#x60;filterCount&#x60; before returning.
 	 *
-	 * @param {TableItem} item
-	 * @returns {boolean}
 	 * &#x60;true&#x60; to hide the row
 	 * &#x60;false&#x60; to show the row
-	 * @memberof TableHeaderItem
 	 */
 	filter(item: TableItem): boolean {
 		this.filterCount &#x3D; 0;

package/docs/documentation/classes/TableItem.html

@@ -115,7 +115,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="69" class="link-to-prism">src/table/table-item.class.ts:69</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="58" class="link-to-prism">src/table/table-item.class.ts:58</a></div>
                             </td>
                         </tr>
 
@@ -187,7 +187,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="12" class="link-to-prism">src/table/table-item.class.ts:12</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="9" class="link-to-prism">src/table/table-item.class.ts:9</a></div>
                             </td>
                         </tr>
 
@@ -227,7 +227,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/table/table-item.class.ts:22</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="16" class="link-to-prism">src/table/table-item.class.ts:16</a></div>
                             </td>
                         </tr>
 
@@ -268,7 +268,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="69" class="link-to-prism">src/table/table-item.class.ts:69</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="58" class="link-to-prism">src/table/table-item.class.ts:58</a></div>
                             </td>
                         </tr>
 
@@ -309,7 +309,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="59" class="link-to-prism">src/table/table-item.class.ts:59</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="50" class="link-to-prism">src/table/table-item.class.ts:50</a></div>
                             </td>
                         </tr>
 
@@ -356,9 +356,6 @@ necessary for you to be able to access item&#39;s data in the template.</p>
 export class TableItem {
 	/**
 	 * Data for the table item.
-	 *
-	 * @type {*}
-	 * @memberof TableItem
 	 */
 	data: any;
 
@@ -366,9 +363,6 @@ export class TableItem {
 	 * Data for the expanded part of the row.
 	 *
 	 * You only need to set it for the first item in the row.
-	 *
-	 * @type {*}
-	 * @memberof TableItem
 	 */
 	expandedData: any;
 
@@ -403,9 +397,6 @@ export class TableItem {
 	 * 	[new TableItem({data: {name: &quot;Custom item&quot;, link: &quot;/table&quot;}, template: this.customItemTemplate})]
 	 * ];
 	 * &#x60;&#x60;&#x60;
-	 *
-	 * @type {TemplateRef&lt;any&gt;}
-	 * @memberof TableItem
 	 */
 	template: TemplateRef&lt;any&gt;;
 
@@ -414,15 +405,11 @@ export class TableItem {
 	 *
 	 * You only need to set it for the first item in the row.
 	 *
-	 * @type {TemplateRef&lt;any&gt;}
-	 * @memberof TableItem
 	 */
 	expandedTemplate: TemplateRef&lt;any&gt;;
 
 	/**
 	 * Creates an instance of TableItem.
-	 * @param {*} [rawData]
-	 * @memberof TableItem
 	 */
 	constructor(rawData?: any) {
 		// defaults so we dont leave things empty