carbon-components-angular 3.0.2 → 3.2.0

package/content-switcher/content-switcher-option.directive.js

@@ -62,7 +62,7 @@ var ContentSwitcherOption = /** @class */ (function () {
         this.active = true;
     };
     ContentSwitcherOption.prototype.onBlur = function (event) {
-        if (event.relatedTarget) {
+        if (event.relatedTarget && event.relatedTarget.classList.contains("bx--content-switcher-btn")) {
             this.active = false;
         }
     };

package/content-switcher/content-switcher-option.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-switcher-option.directive.js","sourceRoot":"","sources":["../src/content-switcher/content-switcher-option.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,WAAW,EACX,KAAK,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,MAAM,eAAe,CAAC;AAEvB;IAAA;QAkBC;;;;WAIG;QACM,SAAI,GAAG,QAAQ,CAAC;QAEzB;;WAEG;QACO,aAAQ,GAAG,IAAI,YAAY,EAAE,CAAC;QAElB,kBAAa,GAAG,0BAA0B,CAAC;QACZ,kBAAa,GAAG,KAAK,CAAC;QACjD,SAAI,GAAG,KAAK,CAAC;QACJ,iBAAY,GAAG,KAAK,CAAC;QAC1B,aAAQ,GAAG,IAAI,CAAC;QAEpC,YAAO,GAAG,KAAK,CAAC;IAmB3B,CAAC;IAhDA,sBAAa,yCAAM;aAOnB;YACC,OAAO,IAAI,CAAC,OAAO,CAAC;QACrB,CAAC;QAZD;;WAEG;aACH,UAAqB,KAAc;YAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;QACpC,CAAC;;;OAAA;IA2BD,yCAAS,GADT;QAEC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAGD,uCAAO,GADP;QAEC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACpB,CAAC;IAGD,sCAAM,GADN,UACO,KAAK;QACX,IAAI,KAAK,CAAC,aAAa,EAAE;YACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACpB;IACF,CAAC;;gBAtDD,SAAS,SAAC;oBACV,QAAQ,EAAE,oBAAoB;iBAC9B;;;yBAKC,KAAK;uBAgBL,KAAK;2BAKL,MAAM;gCAEN,WAAW,SAAC,OAAO;gCACnB,WAAW,SAAC,sCAAsC;uBAClD,WAAW,SAAC,WAAW;+BACvB,WAAW,SAAC,oBAAoB;2BAChC,WAAW,SAAC,eAAe;4BAI3B,YAAY,SAAC,OAAO;0BAMpB,YAAY,SAAC,OAAO;yBAKpB,YAAY,SAAC,MAAM,EAAE,CAAC,QAAQ,CAAC;;IAMjC,4BAAC;CAAA,AAvDD,IAuDC;SApDY,qBAAqB","sourcesContent":["import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tHostListener,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[ibmContentOption]\"\n})\nexport class ContentSwitcherOption {\n\t/**\n\t * Used to activate the option. Only one option may be `active` at a time\n\t */\n\t@Input() set active (value: boolean) {\n\t\tthis._active = value;\n\t\tthis.selectedClass = value;\n\t\tthis.ariaSelected = value;\n\t\tthis.tabindex = value ? \"0\" : \"-1\";\n\t}\n\n\tget active() {\n\t\treturn this._active;\n\t}\n\n\t/**\n\t * Internal name for the option.\n\t * Should be something that identifies the option to the application.\n\t * Accessible from the `ContentSwitcher` `selected` emitter\n\t */\n\t@Input() name = \"option\";\n\n\t/**\n\t * Emits when the option is selected.\n\t */\n\t@Output() selected = new EventEmitter();\n\n\t@HostBinding(\"class\") switcherClass = \"bx--content-switcher-btn\";\n\t@HostBinding(\"class.bx--content-switcher--selected\") selectedClass = false;\n\t@HostBinding(\"attr.role\") role = \"tab\";\n\t@HostBinding(\"attr.aria-selected\") ariaSelected = false;\n\t@HostBinding(\"attr.tabIndex\") tabindex = \"-1\";\n\n\tprotected _active = false;\n\n\t@HostListener(\"click\")\n\thostClick() {\n\t\tthis.active = true;\n\t\tthis.selected.emit(true);\n\t}\n\n\t@HostListener(\"focus\")\n\tonFocus() {\n\t\tthis.active = true;\n\t}\n\n\t@HostListener(\"blur\", [\"$event\"])\n\tonBlur(event) {\n\t\tif (event.relatedTarget) {\n\t\t\tthis.active = false;\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"content-switcher-option.directive.js","sourceRoot":"","sources":["../src/content-switcher/content-switcher-option.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,WAAW,EACX,KAAK,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,MAAM,eAAe,CAAC;AAEvB;IAAA;QAkBC;;;;WAIG;QACM,SAAI,GAAG,QAAQ,CAAC;QAEzB;;WAEG;QACO,aAAQ,GAAG,IAAI,YAAY,EAAE,CAAC;QAElB,kBAAa,GAAG,0BAA0B,CAAC;QACZ,kBAAa,GAAG,KAAK,CAAC;QACjD,SAAI,GAAG,KAAK,CAAC;QACJ,iBAAY,GAAG,KAAK,CAAC;QAC1B,aAAQ,GAAG,IAAI,CAAC;QAEpC,YAAO,GAAG,KAAK,CAAC;IAmB3B,CAAC;IAhDA,sBAAa,yCAAM;aAOnB;YACC,OAAO,IAAI,CAAC,OAAO,CAAC;QACrB,CAAC;QAZD;;WAEG;aACH,UAAqB,KAAc;YAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;QACpC,CAAC;;;OAAA;IA2BD,yCAAS,GADT;QAEC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAGD,uCAAO,GADP;QAEC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACpB,CAAC;IAGD,sCAAM,GADN,UACO,KAAK;QACX,IAAI,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,0BAA0B,CAAC,EAAE;YAC9F,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACpB;IACF,CAAC;;gBAtDD,SAAS,SAAC;oBACV,QAAQ,EAAE,oBAAoB;iBAC9B;;;yBAKC,KAAK;uBAgBL,KAAK;2BAKL,MAAM;gCAEN,WAAW,SAAC,OAAO;gCACnB,WAAW,SAAC,sCAAsC;uBAClD,WAAW,SAAC,WAAW;+BACvB,WAAW,SAAC,oBAAoB;2BAChC,WAAW,SAAC,eAAe;4BAI3B,YAAY,SAAC,OAAO;0BAMpB,YAAY,SAAC,OAAO;yBAKpB,YAAY,SAAC,MAAM,EAAE,CAAC,QAAQ,CAAC;;IAMjC,4BAAC;CAAA,AAvDD,IAuDC;SApDY,qBAAqB","sourcesContent":["import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tHostListener,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[ibmContentOption]\"\n})\nexport class ContentSwitcherOption {\n\t/**\n\t * Used to activate the option. Only one option may be `active` at a time\n\t */\n\t@Input() set active (value: boolean) {\n\t\tthis._active = value;\n\t\tthis.selectedClass = value;\n\t\tthis.ariaSelected = value;\n\t\tthis.tabindex = value ? \"0\" : \"-1\";\n\t}\n\n\tget active() {\n\t\treturn this._active;\n\t}\n\n\t/**\n\t * Internal name for the option.\n\t * Should be something that identifies the option to the application.\n\t * Accessible from the `ContentSwitcher` `selected` emitter\n\t */\n\t@Input() name = \"option\";\n\n\t/**\n\t * Emits when the option is selected.\n\t */\n\t@Output() selected = new EventEmitter();\n\n\t@HostBinding(\"class\") switcherClass = \"bx--content-switcher-btn\";\n\t@HostBinding(\"class.bx--content-switcher--selected\") selectedClass = false;\n\t@HostBinding(\"attr.role\") role = \"tab\";\n\t@HostBinding(\"attr.aria-selected\") ariaSelected = false;\n\t@HostBinding(\"attr.tabIndex\") tabindex = \"-1\";\n\n\tprotected _active = false;\n\n\t@HostListener(\"click\")\n\thostClick() {\n\t\tthis.active = true;\n\t\tthis.selected.emit(true);\n\t}\n\n\t@HostListener(\"focus\")\n\tonFocus() {\n\t\tthis.active = true;\n\t}\n\n\t@HostListener(\"blur\", [\"$event\"])\n\tonBlur(event) {\n\t\tif (event.relatedTarget && event.relatedTarget.classList.contains(\"bx--content-switcher-btn\")) {\n\t\t\tthis.active = false;\n\t\t}\n\t}\n}\n"]}

package/docs/documentation/classes/NumberChange.html

@@ -265,6 +265,7 @@ export class NumberChange {
 			<div *ngIf="!skeleton" class="bx--number__controls">
 				<button
 					class="bx--number__control-btn up-icon"
+					type="button"
 					aria-live="polite"
 					aria-atomic="true"
 					(click)="onIncrement()">
@@ -272,6 +273,7 @@ export class NumberChange {
 				</button>
 				<button
 					class="bx--number__control-btn down-icon"
+					type="button"
 					aria-live="polite"
 					aria-atomic="true"
 					(click)="onDecrement()">

package/docs/documentation/classes/ToggleChange.html

@@ -247,6 +247,7 @@ export class ToggleChange {
 @Component({
 	selector: "ibm-toggle",
 	template: `
+		<div *ngIf="label" class="bx--label" [id]="ariaLabelledby">{{label}}</div>
 		<input
 			class="bx--toggle"
 			type="checkbox"
@@ -260,6 +261,7 @@ export class ToggleChange {
 			[required]="required"
 			[checked]="checked"
 			[disabled]="disabled"
+			[attr.aria-labelledby]="ariaLabelledby"
 			[attr.aria-checked]="checked"
 			(change)="onChange($event)"
 			(click)="onClick($event)">
@@ -315,8 +317,11 @@ export class Toggle extends Checkbox {
 	get onText() {
 		return this._onText;
 	}
-
-
+	/**
+	 * Text that is set as the label of the toggle.
+	 * @type {(string)}
+	 */
+	@Input() label: string;
 	/**
 	 * Size of the toggle component.
 	 */

package/docs/documentation/components/Number.html

@@ -130,6 +130,7 @@
 	<div *ngIf="!skeleton" class="bx--number__controls">
 		<button
 			class="bx--number__control-btn up-icon"
+			type="button"
 			aria-live="polite"
 			aria-atomic="true"
 			(click)="onIncrement()">
@@ -137,6 +138,7 @@
 		</button>
 		<button
 			class="bx--number__control-btn down-icon"
+			type="button"
 			aria-live="polite"
 			aria-atomic="true"
 			(click)="onDecrement()">
@@ -318,7 +320,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/number-input/number.component.ts:143</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="145" class="link-to-prism">src/number-input/number.component.ts:145</a></div>
                             </td>
                         </tr>
 
@@ -351,7 +353,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/number-input/number.component.ts:99</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/number-input/number.component.ts:101</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -370,7 +372,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/number-input/number.component.ts:135</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/number-input/number.component.ts:137</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -392,7 +394,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <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="113" class="link-to-prism">src/number-input/number.component.ts:113</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -414,7 +416,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/number-input/number.component.ts:107</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="109" class="link-to-prism">src/number-input/number.component.ts:109</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -433,7 +435,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="139" class="link-to-prism">src/number-input/number.component.ts:139</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/number-input/number.component.ts:141</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -452,7 +454,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="131" class="link-to-prism">src/number-input/number.component.ts:131</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/number-input/number.component.ts:133</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -471,7 +473,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="127" class="link-to-prism">src/number-input/number.component.ts:127</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/number-input/number.component.ts:129</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -490,7 +492,7 @@
                 </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/number-input/number.component.ts:123</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/number-input/number.component.ts:125</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -513,7 +515,7 @@
                 </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/number-input/number.component.ts:115</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/number-input/number.component.ts:117</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -535,7 +537,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="103" class="link-to-prism">src/number-input/number.component.ts:103</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="105" class="link-to-prism">src/number-input/number.component.ts:105</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -561,7 +563,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="95" class="link-to-prism">src/number-input/number.component.ts:95</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/number-input/number.component.ts:97</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -583,7 +585,7 @@
                 </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/number-input/number.component.ts:119</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/number-input/number.component.ts:121</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -607,7 +609,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/number-input/number.component.ts:143</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="145" class="link-to-prism">src/number-input/number.component.ts:145</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -640,7 +642,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/number-input/number.component.ts:90</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="92" class="link-to-prism">src/number-input/number.component.ts:92</a></div>
                             </td>
                         </tr>
 
@@ -677,7 +679,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="213" class="link-to-prism">src/number-input/number.component.ts:213</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="215" class="link-to-prism">src/number-input/number.component.ts:215</a></div>
                             </td>
                         </tr>
 
@@ -717,7 +719,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="203" class="link-to-prism">src/number-input/number.component.ts:203</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="205" class="link-to-prism">src/number-input/number.component.ts:205</a></div>
                             </td>
                         </tr>
 
@@ -757,7 +759,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/number-input/number.component.ts:193</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="195" class="link-to-prism">src/number-input/number.component.ts:195</a></div>
                             </td>
                         </tr>
 
@@ -797,7 +799,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="223" class="link-to-prism">src/number-input/number.component.ts:223</a></div>
                             </td>
                         </tr>
 
@@ -864,7 +866,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/number-input/number.component.ts:166</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>
 
@@ -937,7 +939,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="174" class="link-to-prism">src/number-input/number.component.ts:174</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="176" class="link-to-prism">src/number-input/number.component.ts:176</a></div>
                             </td>
                         </tr>
 
@@ -1015,7 +1017,7 @@
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/number-input/number.component.ts:157</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/number-input/number.component.ts:159</a></div>
                             </td>
                         </tr>
 
@@ -1109,7 +1111,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/number-input/number.component.ts:88</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/number-input/number.component.ts:90</a></div>
                             </td>
                         </tr>
 
@@ -1154,7 +1156,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/number-input/number.component.ts:182</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="184" class="link-to-prism">src/number-input/number.component.ts:184</a></div>
                             </td>
                         </tr>
 
@@ -1193,7 +1195,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="188" class="link-to-prism">src/number-input/number.component.ts:188</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="190" class="link-to-prism">src/number-input/number.component.ts:190</a></div>
                             </td>
                         </tr>
 
@@ -1269,6 +1271,7 @@ export class NumberChange {
 			&lt;div *ngIf&#x3D;&quot;!skeleton&quot; class&#x3D;&quot;bx--number__controls&quot;&gt;
 				&lt;button
 					class&#x3D;&quot;bx--number__control-btn up-icon&quot;
+					type&#x3D;&quot;button&quot;
 					aria-live&#x3D;&quot;polite&quot;
 					aria-atomic&#x3D;&quot;true&quot;
 					(click)&#x3D;&quot;onIncrement()&quot;&gt;
@@ -1276,6 +1279,7 @@ export class NumberChange {
 				&lt;/button&gt;
 				&lt;button
 					class&#x3D;&quot;bx--number__control-btn down-icon&quot;
+					type&#x3D;&quot;button&quot;
 					aria-live&#x3D;&quot;polite&quot;
 					aria-atomic&#x3D;&quot;true&quot;
 					(click)&#x3D;&quot;onDecrement()&quot;&gt;
@@ -1467,7 +1471,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 ? \'\' : null)"	class="bx--number"	[ngClass]="{		\'bx--number--light\': theme === \'light\',		\'bx--number--nolabel\': !label,		\'bx--number--helpertext\': helperText,		\'bx--skeleton\' : skeleton	}">	<input		type="number"		[id]="id"		[value]="value"		[min]="min"		[max]="max"		[disabled]="disabled"		[required]="required"		(input)="onNumberInputChange($event)"/>	<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 *ngIf="invalid" class="bx--form-requirement">		{{invalidText}}	</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">{{label}}</label><div *ngIf="helperText" class="bx--form__helper-text">{{helperText}}</div><div	data-numberinput	[attr.data-invalid]="(invalid ? \'\' : null)"	class="bx--number"	[ngClass]="{		\'bx--number--light\': theme === \'light\',		\'bx--number--nolabel\': !label,		\'bx--number--helpertext\': helperText,		\'bx--skeleton\' : skeleton	}">	<input		type="number"		[id]="id"		[value]="value"		[min]="min"		[max]="max"		[disabled]="disabled"		[required]="required"		(input)="onNumberInputChange($event)"/>	<div *ngIf="!skeleton" class="bx--number__controls">		<button			class="bx--number__control-btn up-icon"			type="button"			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"			type="button"			aria-live="polite"			aria-atomic="true"			(click)="onDecrement()">			<ibm-icon-caret-down16></ibm-icon-caret-down16>		</button>	</div>	<div *ngIf="invalid" class="bx--form-requirement">		{{invalidText}}	</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': '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': 'Placeholder', 'selector': 'ibm-placeholder'},{'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': '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': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
     var ACTUAL_COMPONENT = {'name': 'Number'};