carbon-components-angular 3.12.5 → 3.13.2

package/docs/documentation/components/TabHeaders.html

@@ -110,7 +110,9 @@ if content has overflow.</p>
 	[ngClass]&#x3D;&quot;{
 		&#x27;bx--skeleton&#x27;: skeleton
 	}&quot;
-	role&#x3D;&quot;navigation&quot;&gt;
+	role&#x3D;&quot;navigation&quot;
+	[attr.aria-label]&#x3D;&quot;ariaLabel&quot;
+	[attr.aria-labelledby]&#x3D;&quot;ariaLabelledby&quot;&gt;
 	&lt;div class&#x3D;&quot;bx--tabs-trigger&quot; tabindex&#x3D;&quot;0&quot; (click)&#x3D;&quot;showTabList()&quot;&gt;
 		&lt;a href&#x3D;&quot;javascript:void(0)&quot; class&#x3D;&quot;bx--tabs-trigger-text&quot; tabindex&#x3D;&quot;-1&quot;&gt;
 			&lt;ng-container *ngIf&#x3D;&quot;!getSelectedTab().headingIsTemplate&quot;&gt;
@@ -269,6 +271,12 @@ if content has overflow.</p>
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                <a href="#ariaLabel">ariaLabel</a>
+                            </li>
+                            <li>
+                                <a href="#ariaLabelledby">ariaLabelledby</a>
+                            </li>
                             <li>
                                 <a href="#cacheActive">cacheActive</a>
                             </li>
@@ -301,6 +309,9 @@ if content has overflow.</p>
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                <a href="#focusout">focusout</a>
+                            </li>
                             <li>
                                 <a href="#keydown">keydown</a>
                             </li>
@@ -315,6 +326,52 @@ if content has overflow.</p>
 
     <section>
     <h3 id="inputs">Inputs</h3>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-2">
+                        <a name="ariaLabel"></a>
+                        <code>ariaLabel</code>
+                    </td>
+                    <td class="col-md-10">
+                        <div><p>Sets the aria label on the nav element.</p>
+</div>
+                            <p>
+                            <em>Type :</em>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                            </p>
+                    </td>
+                </tr>
+                        <tr>
+                            <td class="col-md-2" colspan="2">
+                                    <div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/tabs/tab-headers.component.ts:119</a></div>
+                            </td>
+                        </tr>
+            </tbody>
+        </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-2">
+                        <a name="ariaLabelledby"></a>
+                        <code>ariaLabelledby</code>
+                    </td>
+                    <td class="col-md-10">
+                        <div><p>Sets the aria labelledby on the nav element.</p>
+</div>
+                            <p>
+                            <em>Type :</em>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                            </p>
+                    </td>
+                </tr>
+                        <tr>
+                            <td class="col-md-2" colspan="2">
+                                    <div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/tabs/tab-headers.component.ts:123</a></div>
+                            </td>
+                        </tr>
+            </tbody>
+        </table>
         <table class="table table-sm table-bordered">
             <tbody>
                 <tr>
@@ -333,7 +390,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="105" class="link-to-prism">src/tabs/tab-headers.component.ts:105</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/tabs/tab-headers.component.ts:107</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -350,7 +407,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/tabs/tab-headers.component.ts:116</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="126" class="link-to-prism">src/tabs/tab-headers.component.ts:126</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -367,7 +424,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/tabs/tab-headers.component.ts:115</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/tabs/tab-headers.component.ts:125</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -390,7 +447,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="109" class="link-to-prism">src/tabs/tab-headers.component.ts:109</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/tabs/tab-headers.component.ts:111</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -412,7 +469,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/tabs/tab-headers.component.ts:113</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/tabs/tab-headers.component.ts:115</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -435,7 +492,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/tabs/tab-headers.component.ts:100</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/tabs/tab-headers.component.ts:102</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -445,6 +502,40 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
 
     <section>
     <h3>HostListeners</h3>        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="focusout"></a>
+                        <span class="name">
+                            <b>
+                            focusout
+                            </b>
+                            <a href="#focusout"><span class="icon ion-ios-link"></span></a>
+                        </span>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <i>Arguments : </i><code>'$event' </code>
+                        </td>
+                    </tr>
+                <tr>
+                    <td class="col-md-4">
+<code>focusout(event)</code>
+                    </td>
+                </tr>
+
+
+                        <tr>
+                            <td class="col-md-4">
+                                    <div class="io-line">Defined in <a href="" data-line="219" class="link-to-prism">src/tabs/tab-headers.component.ts:219</a></div>
+                            </td>
+                        </tr>
+
+
+            </tbody>
+        </table>
+        <table class="table table-sm table-bordered">
             <tbody>
                 <tr>
                     <td class="col-md-4">
@@ -471,7 +562,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="149" class="link-to-prism">src/tabs/tab-headers.component.ts:149</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/tabs/tab-headers.component.ts:159</a></div>
                             </td>
                         </tr>
 
@@ -516,7 +607,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/tabs/tab-headers.component.ts:231</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/tabs/tab-headers.component.ts:248</a></div>
                             </td>
                         </tr>
 
@@ -554,7 +645,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/tabs/tab-headers.component.ts:208</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="225" class="link-to-prism">src/tabs/tab-headers.component.ts:225</a></div>
                             </td>
                         </tr>
 
@@ -594,7 +685,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="225" class="link-to-prism">src/tabs/tab-headers.component.ts:225</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="242" class="link-to-prism">src/tabs/tab-headers.component.ts:242</a></div>
                             </td>
                         </tr>
 
@@ -679,7 +770,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/tabs/tab-headers.component.ts:246</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="263" class="link-to-prism">src/tabs/tab-headers.component.ts:263</a></div>
                             </td>
                         </tr>
 
@@ -776,7 +867,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="262" class="link-to-prism">src/tabs/tab-headers.component.ts:262</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="279" class="link-to-prism">src/tabs/tab-headers.component.ts:279</a></div>
                             </td>
                         </tr>
 
@@ -818,7 +909,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="239" class="link-to-prism">src/tabs/tab-headers.component.ts:239</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="256" class="link-to-prism">src/tabs/tab-headers.component.ts:256</a></div>
                             </td>
                         </tr>
 
@@ -877,7 +968,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/tabs/tab-headers.component.ts:137</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/tabs/tab-headers.component.ts:147</a></div>
                             </td>
                         </tr>
 
@@ -918,7 +1009,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/tabs/tab-headers.component.ts:141</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/tabs/tab-headers.component.ts:151</a></div>
                             </td>
                         </tr>
 
@@ -964,7 +1055,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/tabs/tab-headers.component.ts:133</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/tabs/tab-headers.component.ts:143</a></div>
                             </td>
                         </tr>
 
@@ -1007,7 +1098,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/tabs/tab-headers.component.ts:121</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="131" class="link-to-prism">src/tabs/tab-headers.component.ts:131</a></div>
                             </td>
                         </tr>
 
@@ -1047,7 +1138,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/tabs/tab-headers.component.ts:142</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/tabs/tab-headers.component.ts:152</a></div>
                             </td>
                         </tr>
 
@@ -1090,7 +1181,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/tabs/tab-headers.component.ts:125</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/tabs/tab-headers.component.ts:135</a></div>
                             </td>
                         </tr>
 
@@ -1131,7 +1222,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/tabs/tab-headers.component.ts:129</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="139" class="link-to-prism">src/tabs/tab-headers.component.ts:139</a></div>
                             </td>
                         </tr>
 
@@ -1180,7 +1271,9 @@ import { Tab } from &quot;./tab.component&quot;;
 			[ngClass]&#x3D;&quot;{
 				&#x27;bx--skeleton&#x27;: skeleton
 			}&quot;
-			role&#x3D;&quot;navigation&quot;&gt;
+			role&#x3D;&quot;navigation&quot;
+			[attr.aria-label]&#x3D;&quot;ariaLabel&quot;
+			[attr.aria-labelledby]&#x3D;&quot;ariaLabelledby&quot;&gt;
 			&lt;div class&#x3D;&quot;bx--tabs-trigger&quot; tabindex&#x3D;&quot;0&quot; (click)&#x3D;&quot;showTabList()&quot;&gt;
 				&lt;a href&#x3D;&quot;javascript:void(0)&quot; class&#x3D;&quot;bx--tabs-trigger-text&quot; tabindex&#x3D;&quot;-1&quot;&gt;
 					&lt;ng-container *ngIf&#x3D;&quot;!getSelectedTab().headingIsTemplate&quot;&gt;
@@ -1263,6 +1356,14 @@ export class TabHeaders implements AfterContentInit {
 	 * Set to &#x60;true&#x60; to put tabs in a loading state.
 	 */
 	@Input() skeleton &#x3D; false;
+	/**
+	 * Sets the aria label on the nav element.
+	 */
+	@Input() ariaLabel: string;
+	/**
+	 * Sets the aria labelledby on the nav element.
+	 */
+	@Input() ariaLabelledby: string;
 
 	@Input() contentBefore;
 	@Input() contentAfter;
@@ -1357,6 +1458,13 @@ export class TabHeaders implements AfterContentInit {
 		}
 	}
 
+	@HostListener(&quot;focusout&quot;, [&quot;$event&quot;])
+	focusOut(event) {
+		if (this.tabListVisible &amp;&amp; event.relatedTarget &#x3D;&#x3D;&#x3D; null) {
+			this.tabListVisible &#x3D; false;
+		}
+	}
+
 	ngAfterContentInit() {
 		if (!this.tabInput) {
 			this.tabs &#x3D; this.tabQuery;
@@ -1454,7 +1562,7 @@ export class TabHeaders implements AfterContentInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><nav	class="bx--tabs"	[ngClass]="{		\'bx--skeleton\': skeleton	}"	role="navigation">	<div class="bx--tabs-trigger" tabindex="0" (click)="showTabList()">		<a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1">			<ng-container *ngIf="!getSelectedTab().headingIsTemplate">				{{ getSelectedTab().heading }}			</ng-container>			<ng-template				*ngIf="getSelectedTab().headingIsTemplate"				[ngTemplateOutlet]="getSelectedTab().heading">			</ng-template>		</a>		<svg width="10" height="5" viewBox="0 0 10 5">			<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path>		</svg>	</div>	<ul		#tabList		[ngClass]="{			\'bx--tabs__nav--hidden\': !tabListVisible		}"		class="bx--tabs__nav"		role="tablist">		<li role="presentation">			<ng-container *ngIf="contentBefore" [ngTemplateOutlet]="contentBefore"></ng-container>		</li>		<li			*ngFor="let tab of tabs; let i = index;"			[ngClass]="{				\'bx--tabs__nav-item--selected\': tab.active,				\'bx--tabs__nav-item--disabled\': tab.disabled			}"			class="bx--tabs__nav-item"			role="presentation"			(click)="selectTab(tabref, tab, i)">			<a				#tabItem				[attr.aria-selected]="tab.active"				[attr.tabindex]="(tab.active?0:-1)"				[attr.aria-controls]="tab.id"				(focus)="onTabFocus(tabref, i)"				draggable="false"				id="{{tab.id}}-header"				class="bx--tabs__nav-link"				href="javascript:void(0)"				role="tab">				<ng-container *ngIf="!tab.headingIsTemplate">					{{ tab.heading }}				</ng-container>				<ng-template					*ngIf="tab.headingIsTemplate"					[ngTemplateOutlet]="tab.heading"					[ngTemplateOutletContext]="{$implicit: tab.context}">				</ng-template>			</a>		</li>		<li role="presentation">			<ng-container *ngIf="contentAfter" [ngTemplateOutlet]="contentAfter"></ng-container>		</li>	</ul></nav></div>'
+        var COMPONENT_TEMPLATE = '<div><nav	class="bx--tabs"	[ngClass]="{		\'bx--skeleton\': skeleton	}"	role="navigation"	[attr.aria-label]="ariaLabel"	[attr.aria-labelledby]="ariaLabelledby">	<div class="bx--tabs-trigger" tabindex="0" (click)="showTabList()">		<a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1">			<ng-container *ngIf="!getSelectedTab().headingIsTemplate">				{{ getSelectedTab().heading }}			</ng-container>			<ng-template				*ngIf="getSelectedTab().headingIsTemplate"				[ngTemplateOutlet]="getSelectedTab().heading">			</ng-template>		</a>		<svg width="10" height="5" viewBox="0 0 10 5">			<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path>		</svg>	</div>	<ul		#tabList		[ngClass]="{			\'bx--tabs__nav--hidden\': !tabListVisible		}"		class="bx--tabs__nav"		role="tablist">		<li role="presentation">			<ng-container *ngIf="contentBefore" [ngTemplateOutlet]="contentBefore"></ng-container>		</li>		<li			*ngFor="let tab of tabs; let i = index;"			[ngClass]="{				\'bx--tabs__nav-item--selected\': tab.active,				\'bx--tabs__nav-item--disabled\': tab.disabled			}"			class="bx--tabs__nav-item"			role="presentation"			(click)="selectTab(tabref, tab, i)">			<a				#tabItem				[attr.aria-selected]="tab.active"				[attr.tabindex]="(tab.active?0:-1)"				[attr.aria-controls]="tab.id"				(focus)="onTabFocus(tabref, i)"				draggable="false"				id="{{tab.id}}-header"				class="bx--tabs__nav-link"				href="javascript:void(0)"				role="tab">				<ng-container *ngIf="!tab.headingIsTemplate">					{{ tab.heading }}				</ng-container>				<ng-template					*ngIf="tab.headingIsTemplate"					[ngTemplateOutlet]="tab.heading"					[ngTemplateOutletContext]="{$implicit: tab.context}">				</ng-template>			</a>		</li>		<li role="presentation">			<ng-container *ngIf="contentAfter" [ngTemplateOutlet]="contentAfter"></ng-container>		</li>	</ul></nav></div>'
     var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'Breadcrumb', 'selector': 'ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'ibm-breadcrumb-item'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'DatePicker', 'selector': 'ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Documentation', 'selector': 'ibm-documentation'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'ibm-expandable-tile'},{'name': 'File', 'selector': 'ibm-file'},{'name': 'FileUploader', 'selector': 'ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'ibm-hamburger'},{'name': 'Header', 'selector': 'ibm-header'},{'name': 'HeaderAction', 'selector': 'ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'ibm-header-global'},{'name': 'HeaderItem', 'selector': 'ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'ibm-header-navigation'},{'name': 'InlineLoading', 'selector': 'ibm-inline-loading'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListColumn', 'selector': 'ibm-list-column'},{'name': 'ListHeader', 'selector': 'ibm-list-header'},{'name': 'ListRow', 'selector': 'ibm-list-row'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'Number', 'selector': 'ibm-number'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'Panel', 'selector': 'ibm-panel'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProductSwitcher', 'selector': 'ibm-product-switcher'},{'name': 'ProductSwitcherItem', 'selector': 'ibm-product-switcher-item'},{'name': 'ProductSwitcherList', 'selector': 'ibm-product-switcher-list'},{'name': 'ProductSwitcherListItem', 'selector': 'ibm-product-switcher-list-item'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Search', 'selector': 'ibm-search'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'SelectionTile', 'selector': 'ibm-selection-tile'},{'name': 'SideNav', 'selector': 'ibm-sidenav'},{'name': 'SideNavHeader', 'selector': 'ibm-sidenav-header'},{'name': 'SideNavItem', 'selector': 'ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'ibm-sidenav-menu'},{'name': 'Slider', 'selector': 'ibm-slider'},{'name': 'StructuredList', 'selector': 'ibm-structured-list'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableContainer', 'selector': 'ibm-table-container'},{'name': 'TableHeader', 'selector': 'ibm-table-header'},{'name': 'TableToolbar', 'selector': 'ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tag', 'selector': 'ibm-tag'},{'name': 'TagFilter', 'selector': 'ibm-tag-filter'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'TileGroup', 'selector': 'ibm-tile-group'},{'name': 'TimePicker', 'selector': 'ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'ibm-timepicker-select'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'ibm-tooltip-definition'},{'name': 'TooltipIcon', 'selector': 'ibm-tooltip-icon'}];
     var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ColumnDirective', 'selector': '[ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DataGridFocus', 'selector': '[ibmDataGridFocus]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'ExpandedRowHover', 'selector': '[ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[ibmGrid]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'List', 'selector': '[ibmList]'},{'name': 'ListItemDirective', 'selector': '[ibmListItem]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'RowDirective', 'selector': '[ibmRow]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TableHeaderDescription', 'selector': '[ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[ibmTableHeaderTitle]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
     var ACTUAL_COMPONENT = {'name': 'TabHeaders'};

package/docs/documentation/components/TableToolbarSearch.html

@@ -205,6 +205,9 @@
                             <li>
                                 <a href="#active">active</a>
                             </li>
+                            <li>
+                                <a href="#autocomplete">autocomplete</a>
+                            </li>
                             <li>
                                 <a href="#clearButtonTitle">clearButtonTitle</a>
                             </li>
@@ -357,6 +360,35 @@
                         </tr>
             </tbody>
         </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-2">
+                        <a name="autocomplete"></a>
+                        <code>autocomplete</code>
+                    </td>
+                    <td class="col-md-10">
+                        <div><p>Sets the autocomplete attribute on the <code>input</code> element.
+For refernece: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values</a></p>
+</div>
+                        <p>
+                            <em>Default value : </em><code>&quot;on&quot;</code>
+                        </p>
+                    </td>
+                </tr>
+                            <tr>
+                                <td class="col-md-4" colspan="2">
+                                    <div class="io-line">Inherited from     <code><a href="../components/Search.html" target="_self" >Search</a></code>
+</div>
+                                </td>
+                            </tr>
+                        <tr>
+                            <td class="col-md-2" colspan="2">
+                                    <div class="io-line">Defined in Search:114</div>
+                            </td>
+                        </tr>
+            </tbody>
+        </table>
         <table class="table table-sm table-bordered">
             <tbody>
                 <tr>
@@ -380,7 +412,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in Search:121</div>
+                                    <div class="io-line">Defined in Search:126</div>
                             </td>
                         </tr>
             </tbody>
@@ -464,7 +496,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in Search:113</div>
+                                    <div class="io-line">Defined in Search:118</div>
                             </td>
                         </tr>
             </tbody>
@@ -521,7 +553,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in Search:117</div>
+                                    <div class="io-line">Defined in Search:122</div>
                             </td>
                         </tr>
             </tbody>
@@ -749,7 +781,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in Search:125</div>
+                                    <div class="io-line">Defined in Search:130</div>
                             </td>
                         </tr>
             </tbody>
@@ -882,7 +914,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:217</div>
+                                    <div class="io-line">Defined in Search:222</div>
                             </td>
                         </tr>
 
@@ -922,7 +954,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:206</div>
+                                    <div class="io-line">Defined in Search:211</div>
                             </td>
                         </tr>
 
@@ -1002,7 +1034,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:184</div>
+                                    <div class="io-line">Defined in Search:189</div>
                             </td>
                         </tr>
 
@@ -1048,7 +1080,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:192</div>
+                                    <div class="io-line">Defined in Search:197</div>
                             </td>
                         </tr>
 
@@ -1094,7 +1126,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:176</div>
+                                    <div class="io-line">Defined in Search:181</div>
                             </td>
                         </tr>
 
@@ -1176,7 +1208,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:200</div>
+                                    <div class="io-line">Defined in Search:205</div>
                             </td>
                         </tr>
 
@@ -1222,7 +1254,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:150</div>
+                                    <div class="io-line">Defined in Search:155</div>
                             </td>
                         </tr>
 
@@ -1301,7 +1333,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:158</div>
+                                    <div class="io-line">Defined in Search:163</div>
                             </td>
                         </tr>
 
@@ -1385,7 +1417,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:143</div>
+                                    <div class="io-line">Defined in Search:148</div>
                             </td>
                         </tr>
 
@@ -1518,7 +1550,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:129</div>
+                                    <div class="io-line">Defined in Search:134</div>
                             </td>
                         </tr>
 
@@ -1567,7 +1599,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:127</div>
+                                    <div class="io-line">Defined in Search:132</div>
                             </td>
                         </tr>
 
@@ -1612,7 +1644,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:165</div>
+                                    <div class="io-line">Defined in Search:170</div>
                             </td>
                         </tr>
 
@@ -1657,7 +1689,7 @@
                             </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in Search:170</div>
+                                    <div class="io-line">Defined in Search:175</div>
                             </td>
                         </tr>
 
@@ -1785,6 +1817,7 @@ export class TableToolbarSearch extends Search implements OnInit {
 			role&#x3D;&quot;search&quot;
 			[id]&#x3D;&quot;id&quot;
 			[value]&#x3D;&quot;value&quot;
+			[autocomplete]&#x3D;&quot;autocomplete&quot;
 			[placeholder]&#x3D;&quot;placeholder&quot;
 			[disabled]&#x3D;&quot;disabled&quot;
 			[required]&#x3D;&quot;required&quot;
@@ -1836,7 +1869,7 @@ export class TableToolbarSearch extends Search implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div	class="bx--search"	[ngClass]="{		\'bx--search--sm\': size === \'sm\',		\'bx--search--xl\': size === \'xl\',		\'bx--search--light\': theme === \'light\',		\'bx--skeleton\': skeleton,		\'bx--toolbar-search\': toolbar,		\'bx--toolbar-search--active\': toolbar && active	}"	role="search">	<label class="bx--label" [for]="id">{{label}}</label>	<div *ngIf="skeleton; else enableInput" class="bx--search-input"></div>	<ng-template #enableInput>		<input			#input			*ngIf="!toolbar || active || value !== \'\'"			class="bx--search-input"			[type]="tableSearch || !toolbar ? \'text\' : \'search\'"			role="search"			[id]="id"			[value]="value"			[placeholder]="placeholder"			[disabled]="disabled"			[required]="required"			(input)="onSearch($event.target.value)"/>		<button *ngIf="!tableSearch && toolbar" class="bx--toolbar-search__btn" (click)="openSearch()">			<ibm-icon-search16 class="bx--search-magnifier"></ibm-icon-search16>		</button>		<ibm-icon-search16 *ngIf="tableSearch || !toolbar" (click)="openSearch()" class="bx--search-magnifier"></ibm-icon-search16>	</ng-template>	<button		*ngIf="tableSearch || !toolbar"		class="bx--search-close"		[ngClass]="{			\'bx--search-close--hidden\': !value || value.length === 0		}"		[title]="clearButtonTitle"		[attr.aria-label]="clearButtonTitle"		(click)="clearSearch()">		<ibm-icon-close16></ibm-icon-close16>	</button></div></div>'
+        var COMPONENT_TEMPLATE = '<div><div	class="bx--search"	[ngClass]="{		\'bx--search--sm\': size === \'sm\',		\'bx--search--xl\': size === \'xl\',		\'bx--search--light\': theme === \'light\',		\'bx--skeleton\': skeleton,		\'bx--toolbar-search\': toolbar,		\'bx--toolbar-search--active\': toolbar && active	}"	role="search">	<label class="bx--label" [for]="id">{{label}}</label>	<div *ngIf="skeleton; else enableInput" class="bx--search-input"></div>	<ng-template #enableInput>		<input			#input			*ngIf="!toolbar || active || value !== \'\'"			class="bx--search-input"			[type]="tableSearch || !toolbar ? \'text\' : \'search\'"			role="search"			[id]="id"			[value]="value"			[autocomplete]="autocomplete"			[placeholder]="placeholder"			[disabled]="disabled"			[required]="required"			(input)="onSearch($event.target.value)"/>		<button *ngIf="!tableSearch && toolbar" class="bx--toolbar-search__btn" (click)="openSearch()">			<ibm-icon-search16 class="bx--search-magnifier"></ibm-icon-search16>		</button>		<ibm-icon-search16 *ngIf="tableSearch || !toolbar" (click)="openSearch()" class="bx--search-magnifier"></ibm-icon-search16>	</ng-template>	<button		*ngIf="tableSearch || !toolbar"		class="bx--search-close"		[ngClass]="{			\'bx--search-close--hidden\': !value || value.length === 0		}"		[title]="clearButtonTitle"		[attr.aria-label]="clearButtonTitle"		(click)="clearSearch()">		<ibm-icon-close16></ibm-icon-close16>	</button></div></div>'
     var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'Breadcrumb', 'selector': 'ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'ibm-breadcrumb-item'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'DatePicker', 'selector': 'ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Documentation', 'selector': 'ibm-documentation'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'ibm-expandable-tile'},{'name': 'File', 'selector': 'ibm-file'},{'name': 'FileUploader', 'selector': 'ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'ibm-hamburger'},{'name': 'Header', 'selector': 'ibm-header'},{'name': 'HeaderAction', 'selector': 'ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'ibm-header-global'},{'name': 'HeaderItem', 'selector': 'ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'ibm-header-navigation'},{'name': 'InlineLoading', 'selector': 'ibm-inline-loading'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListColumn', 'selector': 'ibm-list-column'},{'name': 'ListHeader', 'selector': 'ibm-list-header'},{'name': 'ListRow', 'selector': 'ibm-list-row'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'Number', 'selector': 'ibm-number'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'Panel', 'selector': 'ibm-panel'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProductSwitcher', 'selector': 'ibm-product-switcher'},{'name': 'ProductSwitcherItem', 'selector': 'ibm-product-switcher-item'},{'name': 'ProductSwitcherList', 'selector': 'ibm-product-switcher-list'},{'name': 'ProductSwitcherListItem', 'selector': 'ibm-product-switcher-list-item'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Search', 'selector': 'ibm-search'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'SelectionTile', 'selector': 'ibm-selection-tile'},{'name': 'SideNav', 'selector': 'ibm-sidenav'},{'name': 'SideNavHeader', 'selector': 'ibm-sidenav-header'},{'name': 'SideNavItem', 'selector': 'ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'ibm-sidenav-menu'},{'name': 'Slider', 'selector': 'ibm-slider'},{'name': 'StructuredList', 'selector': 'ibm-structured-list'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableContainer', 'selector': 'ibm-table-container'},{'name': 'TableHeader', 'selector': 'ibm-table-header'},{'name': 'TableToolbar', 'selector': 'ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tag', 'selector': 'ibm-tag'},{'name': 'TagFilter', 'selector': 'ibm-tag-filter'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'TileGroup', 'selector': 'ibm-tile-group'},{'name': 'TimePicker', 'selector': 'ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'ibm-timepicker-select'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'ibm-tooltip-definition'},{'name': 'TooltipIcon', 'selector': 'ibm-tooltip-icon'}];
     var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ColumnDirective', 'selector': '[ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DataGridFocus', 'selector': '[ibmDataGridFocus]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'ExpandedRowHover', 'selector': '[ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[ibmGrid]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'List', 'selector': '[ibmList]'},{'name': 'ListItemDirective', 'selector': '[ibmListItem]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'RowDirective', 'selector': '[ibmRow]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TableHeaderDescription', 'selector': '[ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[ibmTableHeaderTitle]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
     var ACTUAL_COMPONENT = {'name': 'TableToolbarSearch'};