carbon-components-angular 3.8.0 → 3.9.3

package/docs/documentation/components/Number.html

@@ -117,8 +117,14 @@
             <tr>
                 <td class="col-md-3">template</td>
                 <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;label *ngIf&#x3D;&quot;skeleton &amp;&amp; label&quot; class&#x3D;&quot;bx--label bx--skeleton&quot;&gt;&lt;/label&gt;
-&lt;label *ngIf&#x3D;&quot;!skeleton &amp;&amp; label&quot; [for]&#x3D;&quot;id&quot; class&#x3D;&quot;bx--label&quot;&gt;{{label}}&lt;/label&gt;
-&lt;div *ngIf&#x3D;&quot;helperText&quot; class&#x3D;&quot;bx--form__helper-text&quot;&gt;{{helperText}}&lt;/div&gt;
+&lt;label *ngIf&#x3D;&quot;!skeleton &amp;&amp; label&quot; [for]&#x3D;&quot;id&quot; class&#x3D;&quot;bx--label&quot;&gt;
+	&lt;ng-container *ngIf&#x3D;&quot;!isTemplate(label)&quot;&gt;{{label}}&lt;/ng-container&gt;
+	&lt;ng-template *ngIf&#x3D;&quot;isTemplate(label)&quot; [ngTemplateOutlet]&#x3D;&quot;label&quot;&gt;&lt;/ng-template&gt;
+&lt;/label&gt;
+&lt;div *ngIf&#x3D;&quot;helperText&quot; class&#x3D;&quot;bx--form__helper-text&quot;&gt;
+	&lt;ng-container *ngIf&#x3D;&quot;!isTemplate(helperText)&quot;&gt;{{helperText}}&lt;/ng-container&gt;
+	&lt;ng-template *ngIf&#x3D;&quot;isTemplate(helperText)&quot; [ngTemplateOutlet]&#x3D;&quot;helperText&quot;&gt;&lt;/ng-template&gt;
+&lt;/div&gt;
 &lt;div
 	data-numberinput
 	[attr.data-invalid]&#x3D;&quot;(invalid ? true : null)&quot;
@@ -129,8 +135,6 @@
 		&#x27;bx--number--helpertext&#x27;: helperText,
 		&#x27;bx--skeleton&#x27; : skeleton
 	}&quot;&gt;
-	&lt;label *ngIf&#x3D;&quot;!skeleton &amp;&amp; label&quot; [for]&#x3D;&quot;id&quot; class&#x3D;&quot;bx--label&quot;&gt;{{label}}&lt;/label&gt;
-	&lt;div *ngIf&#x3D;&quot;helperText&quot; class&#x3D;&quot;bx--form__helper-text&quot;&gt;{{helperText}}&lt;/div&gt;
 	&lt;div class&#x3D;&quot;bx--number__input-wrapper&quot;&gt;
 		&lt;input
 			type&#x3D;&quot;number&quot;
@@ -221,7 +225,7 @@
                                 <a href="#emitChangeEvent">emitChangeEvent</a>
                             </li>
                             <li>
-                                    <span class="modifier">Protected</span>
+                                    <span class="modifier">Public</span>
                                 <a href="#isTemplate">isTemplate</a>
                             </li>
                             <li>
@@ -346,7 +350,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/number-input/number.component.ts:164</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="168" class="link-to-prism">src/number-input/number.component.ts:168</a></div>
                             </td>
                         </tr>
 
@@ -379,7 +383,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/number-input/number.component.ts:120</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/number-input/number.component.ts:124</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -394,11 +398,15 @@
                     <td class="col-md-10">
                         <div><p>Sets the optional helper text.</p>
 </div>
+                            <p>
+                            <em>Type :</em>    <code>string | TemplateRef&lt;any&gt;</code>
+
+                            </p>
                     </td>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/number-input/number.component.ts:156</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="160" class="link-to-prism">src/number-input/number.component.ts:160</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -420,7 +428,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/number-input/number.component.ts:132</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/number-input/number.component.ts:136</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -442,7 +450,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/number-input/number.component.ts:128</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/number-input/number.component.ts:132</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -465,7 +473,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="160" class="link-to-prism">src/number-input/number.component.ts:160</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/number-input/number.component.ts:164</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -480,11 +488,15 @@
                     <td class="col-md-10">
                         <div><p>Sets the text inside the <code>label</code> tag.</p>
 </div>
+                            <p>
+                            <em>Type :</em>    <code>string | TemplateRef&lt;any&gt;</code>
+
+                            </p>
                     </td>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/number-input/number.component.ts:152</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/number-input/number.component.ts:156</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -503,7 +515,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/number-input/number.component.ts:148</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/number-input/number.component.ts:152</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -522,7 +534,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/number-input/number.component.ts:144</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/number-input/number.component.ts:148</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -545,7 +557,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/number-input/number.component.ts:136</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/number-input/number.component.ts:140</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -567,7 +579,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/number-input/number.component.ts:124</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/number-input/number.component.ts:128</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -593,7 +605,7 @@
                 </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/number-input/number.component.ts:116</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/number-input/number.component.ts:120</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -615,7 +627,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/number-input/number.component.ts:140</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/number-input/number.component.ts:144</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -639,7 +651,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/number-input/number.component.ts:164</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="168" class="link-to-prism">src/number-input/number.component.ts:168</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -672,7 +684,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/number-input/number.component.ts:111</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/number-input/number.component.ts:115</a></div>
                             </td>
                         </tr>
 
@@ -709,7 +721,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="241" class="link-to-prism">src/number-input/number.component.ts:241</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/number-input/number.component.ts:245</a></div>
                             </td>
                         </tr>
 
@@ -734,7 +746,7 @@
                         <a name="isTemplate"></a>
                         <span class="name">
                             <b>
-                                <span class="modifier">Protected</span>
+                                <span class="modifier">Public</span>
                             isTemplate
                             </b>
                             <a href="#isTemplate"><span class="icon ion-ios-link"></span></a>
@@ -751,7 +763,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="254" class="link-to-prism">src/number-input/number.component.ts:254</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">src/number-input/number.component.ts:258</a></div>
                             </td>
                         </tr>
 
@@ -816,7 +828,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/number-input/number.component.ts:231</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="235" class="link-to-prism">src/number-input/number.component.ts:235</a></div>
                             </td>
                         </tr>
 
@@ -856,7 +868,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/number-input/number.component.ts:221</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="225" class="link-to-prism">src/number-input/number.component.ts:225</a></div>
                             </td>
                         </tr>
 
@@ -896,7 +908,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="249" class="link-to-prism">src/number-input/number.component.ts:249</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="253" class="link-to-prism">src/number-input/number.component.ts:253</a></div>
                             </td>
                         </tr>
 
@@ -963,7 +975,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/number-input/number.component.ts:187</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="191" class="link-to-prism">src/number-input/number.component.ts:191</a></div>
                             </td>
                         </tr>
 
@@ -1036,7 +1048,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="195" class="link-to-prism">src/number-input/number.component.ts:195</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="199" class="link-to-prism">src/number-input/number.component.ts:199</a></div>
                             </td>
                         </tr>
 
@@ -1112,7 +1124,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="202" class="link-to-prism">src/number-input/number.component.ts:202</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="206" class="link-to-prism">src/number-input/number.component.ts:206</a></div>
                             </td>
                         </tr>
 
@@ -1185,7 +1197,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="178" class="link-to-prism">src/number-input/number.component.ts:178</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/number-input/number.component.ts:182</a></div>
                             </td>
                         </tr>
 
@@ -1279,7 +1291,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="109" class="link-to-prism">src/number-input/number.component.ts:109</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/number-input/number.component.ts:113</a></div>
                             </td>
                         </tr>
 
@@ -1324,7 +1336,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="210" class="link-to-prism">src/number-input/number.component.ts:210</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="214" class="link-to-prism">src/number-input/number.component.ts:214</a></div>
                             </td>
                         </tr>
 
@@ -1363,7 +1375,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="216" class="link-to-prism">src/number-input/number.component.ts:216</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/number-input/number.component.ts:220</a></div>
                             </td>
                         </tr>
 
@@ -1426,8 +1438,14 @@ export class NumberChange {
 	selector: &quot;ibm-number&quot;,
 	template: &#x60;
 		&lt;label *ngIf&#x3D;&quot;skeleton &amp;&amp; label&quot; class&#x3D;&quot;bx--label bx--skeleton&quot;&gt;&lt;/label&gt;
-		&lt;label *ngIf&#x3D;&quot;!skeleton &amp;&amp; label&quot; [for]&#x3D;&quot;id&quot; class&#x3D;&quot;bx--label&quot;&gt;{{label}}&lt;/label&gt;
-		&lt;div *ngIf&#x3D;&quot;helperText&quot; class&#x3D;&quot;bx--form__helper-text&quot;&gt;{{helperText}}&lt;/div&gt;
+		&lt;label *ngIf&#x3D;&quot;!skeleton &amp;&amp; label&quot; [for]&#x3D;&quot;id&quot; class&#x3D;&quot;bx--label&quot;&gt;
+			&lt;ng-container *ngIf&#x3D;&quot;!isTemplate(label)&quot;&gt;{{label}}&lt;/ng-container&gt;
+			&lt;ng-template *ngIf&#x3D;&quot;isTemplate(label)&quot; [ngTemplateOutlet]&#x3D;&quot;label&quot;&gt;&lt;/ng-template&gt;
+		&lt;/label&gt;
+		&lt;div *ngIf&#x3D;&quot;helperText&quot; class&#x3D;&quot;bx--form__helper-text&quot;&gt;
+			&lt;ng-container *ngIf&#x3D;&quot;!isTemplate(helperText)&quot;&gt;{{helperText}}&lt;/ng-container&gt;
+			&lt;ng-template *ngIf&#x3D;&quot;isTemplate(helperText)&quot; [ngTemplateOutlet]&#x3D;&quot;helperText&quot;&gt;&lt;/ng-template&gt;
+		&lt;/div&gt;
 		&lt;div
 			data-numberinput
 			[attr.data-invalid]&#x3D;&quot;(invalid ? true : null)&quot;
@@ -1438,8 +1456,6 @@ export class NumberChange {
 				&#x27;bx--number--helpertext&#x27;: helperText,
 				&#x27;bx--skeleton&#x27; : skeleton
 			}&quot;&gt;
-			&lt;label *ngIf&#x3D;&quot;!skeleton &amp;&amp; label&quot; [for]&#x3D;&quot;id&quot; class&#x3D;&quot;bx--label&quot;&gt;{{label}}&lt;/label&gt;
-			&lt;div *ngIf&#x3D;&quot;helperText&quot; class&#x3D;&quot;bx--form__helper-text&quot;&gt;{{helperText}}&lt;/div&gt;
 			&lt;div class&#x3D;&quot;bx--number__input-wrapper&quot;&gt;
 				&lt;input
 					type&#x3D;&quot;number&quot;
@@ -1533,11 +1549,11 @@ export class Number implements ControlValueAccessor {
 	/**
 	 * Sets the text inside the &#x60;label&#x60; tag.
 	 */
-	@Input() label;
+	@Input() label: string | TemplateRef&lt;any&gt;;
 	/**
 	 * Sets the optional helper text.
 	 */
-	@Input() helperText;
+	@Input() helperText: string | TemplateRef&lt;any&gt;;
 	/**
 	 * Sets the invalid text.
 	 */
@@ -1635,7 +1651,7 @@ export class Number implements ControlValueAccessor {
 		this.emitChangeEvent();
 	}
 
-	protected isTemplate(value) {
+	public isTemplate(value) {
 		return value instanceof TemplateRef;
 	}
 }
@@ -1674,7 +1690,7 @@ export class Number implements ControlValueAccessor {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><label *ngIf="skeleton && label" class="bx--label bx--skeleton"></label><label *ngIf="!skeleton && label" [for]="id" class="bx--label">{{label}}</label><div *ngIf="helperText" class="bx--form__helper-text">{{helperText}}</div><div	data-numberinput	[attr.data-invalid]="(invalid ? true : null)"	class="bx--number"	[ngClass]="{		\'bx--number--light\': theme === \'light\',		\'bx--number--nolabel\': !label,		\'bx--number--helpertext\': helperText,		\'bx--skeleton\' : skeleton	}">	<label *ngIf="!skeleton && label" [for]="id" class="bx--label">{{label}}</label>	<div *ngIf="helperText" class="bx--form__helper-text">{{helperText}}</div>	<div class="bx--number__input-wrapper">		<input			type="number"			[id]="id"			[value]="value"			[min]="min"			[max]="max"			[disabled]="disabled"			[required]="required"			(input)="onNumberInputChange($event)"/>		<ibm-icon-warning-filled16			*ngIf="!skeleton && invalid"			class="bx--number__invalid"			style="display: inherit;">		</ibm-icon-warning-filled16>		<div *ngIf="!skeleton" class="bx--number__controls">			<button				class="bx--number__control-btn up-icon"				aria-live="polite"				aria-atomic="true"				(click)="onIncrement()">				<ibm-icon-caret-up16></ibm-icon-caret-up16>			</button>			<button				class="bx--number__control-btn down-icon"				aria-live="polite"				aria-atomic="true"				(click)="onDecrement()">				<ibm-icon-caret-down16></ibm-icon-caret-down16>			</button>		</div>	</div>	<div *ngIf="invalid" class="bx--form-requirement">		<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>		<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>	</div></div>	</div>'
+        var COMPONENT_TEMPLATE = '<div><label *ngIf="skeleton && label" class="bx--label bx--skeleton"></label><label *ngIf="!skeleton && label" [for]="id" class="bx--label">	<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>	<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template></label><div *ngIf="helperText" class="bx--form__helper-text">	<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>	<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template></div><div	data-numberinput	[attr.data-invalid]="(invalid ? true : null)"	class="bx--number"	[ngClass]="{		\'bx--number--light\': theme === \'light\',		\'bx--number--nolabel\': !label,		\'bx--number--helpertext\': helperText,		\'bx--skeleton\' : skeleton	}">	<div class="bx--number__input-wrapper">		<input			type="number"			[id]="id"			[value]="value"			[min]="min"			[max]="max"			[disabled]="disabled"			[required]="required"			(input)="onNumberInputChange($event)"/>		<ibm-icon-warning-filled16			*ngIf="!skeleton && invalid"			class="bx--number__invalid"			style="display: inherit;">		</ibm-icon-warning-filled16>		<div *ngIf="!skeleton" class="bx--number__controls">			<button				class="bx--number__control-btn up-icon"				aria-live="polite"				aria-atomic="true"				(click)="onIncrement()">				<ibm-icon-caret-up16></ibm-icon-caret-up16>			</button>			<button				class="bx--number__control-btn down-icon"				aria-live="polite"				aria-atomic="true"				(click)="onDecrement()">				<ibm-icon-caret-down16></ibm-icon-caret-down16>			</button>		</div>	</div>	<div *ngIf="invalid" class="bx--form-requirement">		<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>		<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>	</div></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': 'Number'};