carbon-components-angular 3.8.0 → 3.9.3

package/datepicker-input/datepicker-input.component.ngfactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-input.component.ngfactory.js","sourceRoot":"","sources":["../src/datepicker-input/datepicker-input.component.ngfactory.ts","../src/datepicker-input/datepicker-input.component.ts.DatePickerInput.html"],"names":[],"mappings":";;;;;;;;;;;;;;0DCaI,gRAIW;0DAEX,qXAaiD,YAAhD;;wBAA8C;MAb/C,wBAaiD,wDAPhD,mBAAmB,UACnB,mBAA2B,cAE3B,8EAAsE,GACtE,mBAAU,KACV,mBAAqB,WACrB,0CAA6C,GAZ9C,YAaiD,EAPhD,SAAmB,EACnB,SAA2B,EAE3B,SAAsE,EACtE,SAAU,EACV,SAAqB,EACrB,SAA6C;0DAG5C,6EAA+C,KAAA,iJAAe;;0DAC9D,oMAA8E,sFAAjC,mBAAgC,cAA7E,YAA8E,EAAjC,SAAgC;0DAF9E,6GAAkD,KACjD,+KAA+C,IAC/C,+KAA8E,iDADhE,mCAAgC,eAA9C,YAA+C,EAAjC,SAAgC,GACjC,kCAA+B,eAA5C,YAA8E,EAAjE,SAA+B;0DAG/C,gRAIW;iEAzCb,uGAA2B,KAC1B,kRAMI,GALH,sHAKE,MACF,kHAAuC,KACtC,mHAAoC,KAAA,kCAEpC,MACA,+KAIW,IAEX,gLAaiD,IAChD,gLAAkD,IAKpD,gLAIW,iDAxCP,iCAAuB,EAC3B,2GAKE,YANH,YAMI,EANC,SAAuB,EAC3B,SAKE,GAMA,qCAAwB,GADzB,YAIW,EAHV,SAAwB,GAOxB,oBAAiB,WAFlB,aAaiD,EAXhD,SAAiB,GAYZ,mBAAe,UAApB,aAAkD,EAA7C,SAAe,GAMrB,6CAAmC,WADpC,aAIW,EAHV,SAAmC,mDA7B5B,mBAAU,KAAjB,YAAoC,EAA7B,SAAU,GAAmB,kDAEpC","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t{{label}}\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t"]}
+{"version":3,"file":"datepicker-input.component.ngfactory.js","sourceRoot":"","sources":["../src/datepicker-input/datepicker-input.component.ngfactory.ts","../src/datepicker-input/datepicker-input.component.ts.DatePickerInput.html"],"names":[],"mappings":";;;;;;;;;;;;;;0DCWK,6EAAyC,KAAA,2IAAS;;0DAClD,oMAAkE,sFAA3B,mBAA0B,QAAjE,YAAkE,EAA3B,SAA0B;0DAElE,gRAIW;0DAEX,qXAaiD,YAAhD;;wBAA8C;MAb/C,wBAaiD,wDAPhD,mBAAmB,UACnB,mBAA2B,cAE3B,8EAAsE,GACtE,mBAAU,KACV,mBAAqB,WACrB,0CAA6C,GAZ9C,YAaiD,EAPhD,SAAmB,EACnB,SAA2B,EAE3B,SAAsE,EACtE,SAAU,EACV,SAAqB,EACrB,SAA6C;0DAG5C,6EAA+C,KAAA,iJAAe;;0DAC9D,oMAA8E,sFAAjC,mBAAgC,cAA7E,YAA8E,EAAjC,SAAgC;0DAF9E,6GAAkD,KACjD,+KAA+C,IAC/C,+KAA8E,iDADhE,mCAAgC,eAA9C,YAA+C,EAAjC,SAAgC,GACjC,kCAA+B,eAA5C,YAA8E,EAAjE,SAA+B;2DAG/C,gRAIW;iEA1Cb,uGAA2B,KAC1B,kRAMI,GALH,sHAKE,MACF,mHAAuC,KACtC,mHAAoC,KACnC,+KAAyC,IACzC,+KAAkE,IAEnE,gLAIW,IAEX,gLAaiD,IAChD,gLAAkD,IAKpD,iLAIW,iDAzCP,iCAAuB,EAC3B,2GAKE,YANH,YAMI,EANC,SAAuB,EAC3B,SAKE,GAGc,mCAA0B,SAAxC,YAAyC,EAA3B,SAA0B,GAC3B,kCAAyB,SAAtC,YAAkE,EAArD,SAAyB,GAGtC,qCAAwB,GADzB,aAIW,EAHV,SAAwB,GAOxB,oBAAiB,WAFlB,aAaiD,EAXhD,SAAiB,GAYZ,mBAAe,UAApB,aAAkD,EAA7C,SAAe,GAMrB,6CAAmC,WADpC,aAIW,EAHV,SAAmC,mDA9B5B,mBAAU,KAAjB,YAAoC,EAA7B,SAAU","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t"]}

package/datepicker-input/datepicker-input.module.ngfactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-input.module.ngfactory.js","sourceRoot":"","sources":["../src/datepicker-input/datepicker-input.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './datepicker-input.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from 'ng2-flatpickr';\nimport * as i4 from '@carbon/icons-angular/lib/calendar/16';\nimport * as i5 from './datepicker-input.component';\nexport const DatePickerInputModuleNgFactory:i0.NgModuleFactory<i1.DatePickerInputModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.Ng2FlatpickrComponent = (<any>(null as any));\nvar _decl0_12:i3.Ng2FlatpickrDirective = (<any>(null as any));\nvar _decl0_13:i4.Calendar16 = (<any>(null as any));\nvar _decl0_14:i4.Calendar16Directive = (<any>(null as any));\nvar _decl0_15:i5.DatePickerInput = (<any>(null as any));\nvar _decl0_16:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_17:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_18:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_19:i2.JsonPipe = (<any>(null as any));\nvar _decl0_20:i2.SlicePipe = (<any>(null as any));\nvar _decl0_21:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_22:i2.PercentPipe = (<any>(null as any));\nvar _decl0_23:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_24:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_25:i2.DatePipe = (<any>(null as any));\nvar _decl0_26:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_27:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_28:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_29:i2.CommonModule = (<any>(null as any));\nvar _decl0_30:i3.Ng2FlatpickrModule = (<any>(null as any));\nvar _decl0_31:i4.Calendar16Module = (<any>(null as any));\nvar _decl0_32:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_33:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_DatePickerInput_Host_1_0():void {\n  var _any:any = (null as any);\n}\nfunction _View_DatePickerInput_1_0():void {\n  var _any:any = (null as any);\n  const currVal_0:any = 'bx--date-picker';\n  currVal_0;\n  const currVal_1:any = (<any>{'bx--date-picker--single':(_decl0_15.type === 'single'),\n      'bx--date-picker--range':(_decl0_15.type === 'range'),'bx--date-picker--light':(_decl0_15.theme === 'light'),\n      'bx--skeleton':_decl0_15.skeleton});\n  currVal_1;\n  const currVal_2:any = _decl0_15.id;\n  currVal_2;\n  const currVal_3:any = _decl0_15.label;\n  currVal_3;\n  const currVal_4:any = (_decl0_15.type == 'single');\n  currVal_4;\n  const currVal_5:any = !_decl0_15.skeleton;\n  currVal_5;\n  const currVal_6:any = _decl0_15.invalid;\n  currVal_6;\n  const currVal_7:any = ((_decl0_15.type == 'range') && _decl0_15.hasIcon);\n  currVal_7;\n}\n"]}
+{"version":3,"file":"datepicker-input.module.ngfactory.js","sourceRoot":"","sources":["../src/datepicker-input/datepicker-input.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './datepicker-input.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from 'ng2-flatpickr';\nimport * as i4 from '@carbon/icons-angular/lib/calendar/16';\nimport * as i5 from './datepicker-input.component';\nexport const DatePickerInputModuleNgFactory:i0.NgModuleFactory<i1.DatePickerInputModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.Ng2FlatpickrComponent = (<any>(null as any));\nvar _decl0_12:i3.Ng2FlatpickrDirective = (<any>(null as any));\nvar _decl0_13:i4.Calendar16 = (<any>(null as any));\nvar _decl0_14:i4.Calendar16Directive = (<any>(null as any));\nvar _decl0_15:i5.DatePickerInput = (<any>(null as any));\nvar _decl0_16:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_17:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_18:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_19:i2.JsonPipe = (<any>(null as any));\nvar _decl0_20:i2.SlicePipe = (<any>(null as any));\nvar _decl0_21:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_22:i2.PercentPipe = (<any>(null as any));\nvar _decl0_23:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_24:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_25:i2.DatePipe = (<any>(null as any));\nvar _decl0_26:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_27:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_28:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_29:i2.CommonModule = (<any>(null as any));\nvar _decl0_30:i3.Ng2FlatpickrModule = (<any>(null as any));\nvar _decl0_31:i4.Calendar16Module = (<any>(null as any));\nvar _decl0_32:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_33:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_DatePickerInput_Host_1_0():void {\n  var _any:any = (null as any);\n}\nfunction _View_DatePickerInput_1_0():void {\n  var _any:any = (null as any);\n  const currVal_0:any = 'bx--date-picker';\n  currVal_0;\n  const currVal_1:any = (<any>{'bx--date-picker--single':(_decl0_15.type === 'single'),\n      'bx--date-picker--range':(_decl0_15.type === 'range'),'bx--date-picker--light':(_decl0_15.theme === 'light'),\n      'bx--skeleton':_decl0_15.skeleton});\n  currVal_1;\n  const currVal_2:any = _decl0_15.id;\n  currVal_2;\n  const currVal_3:any = !_decl0_15.isTemplate(_decl0_15.label);\n  currVal_3;\n  const currVal_4:any = _decl0_15.isTemplate(_decl0_15.label);\n  currVal_4;\n  const currVal_5:any = (_decl0_15.type == 'single');\n  currVal_5;\n  const currVal_6:any = !_decl0_15.skeleton;\n  currVal_6;\n  const currVal_7:any = _decl0_15.invalid;\n  currVal_7;\n  const currVal_8:any = ((_decl0_15.type == 'range') && _decl0_15.hasIcon);\n  currVal_8;\n}\n"]}

package/docs/documentation/classes/CheckboxChange.html

@@ -290,7 +290,9 @@ export class CheckboxChange {
 			[ngClass]="{
 				'bx--skeleton' : skeleton
 			}">
-			<ng-content></ng-content>
+			<span [ngClass]="{'bx--visually-hidden' : hideLabel}">
+				<ng-content></ng-content>
+			</span>
 		</label>
 	`,
 	providers: [
@@ -328,6 +330,10 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 * Set to `true` for a loading checkbox.
 	 */
 	@Input() skeleton = false;
+	/**
+	 * Set to `true` to hide the checkbox labels.
+	 */
+	@Input() hideLabel = false;
 	/**
 	 * Sets the name attribute on the `input` element.
 	 */

package/docs/documentation/classes/NumberChange.html

@@ -252,8 +252,14 @@ export class NumberChange {
 	selector: "ibm-number",
 	template: `
 		<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>
+		<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)"
@@ -264,8 +270,6 @@ export class NumberChange {
 				'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"
@@ -359,11 +363,11 @@ export class Number implements ControlValueAccessor {
 	/**
 	 * Sets the text inside the `label` tag.
 	 */
-	@Input() label;
+	@Input() label: string | TemplateRef<any>;
 	/**
 	 * Sets the optional helper text.
 	 */
-	@Input() helperText;
+	@Input() helperText: string | TemplateRef<any>;
 	/**
 	 * Sets the invalid text.
 	 */
@@ -461,7 +465,7 @@ export class Number implements ControlValueAccessor {
 		this.emitChangeEvent();
 	}
 
-	protected isTemplate(value) {
+	public isTemplate(value) {
 		return value instanceof TemplateRef;
 	}
 }

package/docs/documentation/classes/ToggleChange.html

@@ -138,7 +138,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/toggle/toggle.component.ts:34</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/toggle/toggle.component.ts:35</a></div>
                             </td>
                         </tr>
 
@@ -178,7 +178,7 @@
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/toggle/toggle.component.ts:30</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/toggle/toggle.component.ts:31</a></div>
                             </td>
                         </tr>
 
@@ -209,7 +209,8 @@ import {
 	Component,
 	Input,
 	Output,
-	EventEmitter
+	EventEmitter,
+	TemplateRef
 } from &quot;@angular/core&quot;;
 import { NG_VALUE_ACCESSOR } from &quot;@angular/forms&quot;;
 
@@ -255,7 +256,10 @@ export class ToggleChange {
 @Component({
 	selector: &quot;ibm-toggle&quot;,
 	template: &#x60;
-		&lt;div *ngIf&#x3D;&quot;label&quot; class&#x3D;&quot;bx--label&quot; [id]&#x3D;&quot;ariaLabelledby&quot;&gt;{{label}}&lt;/div&gt;
+		&lt;label *ngIf&#x3D;&quot;label&quot; [id]&#x3D;&quot;ariaLabelledby&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;input
 			class&#x3D;&quot;bx--toggle&quot;
 			type&#x3D;&quot;checkbox&quot;
@@ -329,7 +333,7 @@ export class Toggle extends Checkbox {
 	 * Text that is set as the label of the toggle.
 	 * @type {(string)}
 	 */
-	@Input() label: string;
+	@Input() label: string | TemplateRef&lt;any&gt;;
 	/**
 	 * Size of the toggle component.
 	 */
@@ -371,6 +375,10 @@ export class Toggle extends Checkbox {
 		this.propagateChange(this.checked);
 		this.change.emit(event);
 	}
+
+	public isTemplate(value) {
+		return value instanceof TemplateRef;
+	}
 }
 </code></pre>
     </div>

package/docs/documentation/components/Checkbox.html

@@ -143,7 +143,9 @@
 	[ngClass]="{
 		'bx--skeleton' : skeleton
 	}">
-	<ng-content></ng-content>
+	<span [ngClass]="{'bx--visually-hidden' : hideLabel}">
+		<ng-content></ng-content>
+	</span>
 </label>
 	</code></pre></td>
             </tr>
@@ -261,6 +263,9 @@
                             <li>
                                 <a href="#disabled">disabled</a>
                             </li>
+                            <li>
+                                <a href="#hideLabel">hideLabel</a>
+                            </li>
                             <li>
                                 <a href="#id">id</a>
                             </li>
@@ -361,7 +366,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/checkbox/checkbox.component.ts:227</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="233" class="link-to-prism">src/checkbox/checkbox.component.ts:233</a></div>
                             </td>
                         </tr>
 
@@ -420,7 +425,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/checkbox/checkbox.component.ts:141</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/checkbox/checkbox.component.ts:147</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -443,7 +448,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/checkbox/checkbox.component.ts:146</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/checkbox/checkbox.component.ts:152</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -466,7 +471,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/checkbox/checkbox.component.ts:182</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="188" class="link-to-prism">src/checkbox/checkbox.component.ts:188</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -488,7 +493,29 @@
                 </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/checkbox/checkbox.component.ts:116</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/checkbox/checkbox.component.ts:118</a></div>
+                            </td>
+                        </tr>
+            </tbody>
+        </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-2">
+                        <a name="hideLabel"></a>
+                        <code>hideLabel</code>
+                    </td>
+                    <td class="col-md-10">
+                        <div><p>Set to <code>true</code> to hide the checkbox labels.</p>
+</div>
+                        <p>
+                            <em>Default value : </em><code>false</code>
+                        </p>
+                    </td>
+                </tr>
+                        <tr>
+                            <td class="col-md-2" colspan="2">
+                                    <div class="io-line">Defined in <a href="" data-line="126" class="link-to-prism">src/checkbox/checkbox.component.ts:126</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -510,7 +537,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/checkbox/checkbox.component.ts:128</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/checkbox/checkbox.component.ts:134</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -533,7 +560,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="158" class="link-to-prism">src/checkbox/checkbox.component.ts:158</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/checkbox/checkbox.component.ts:164</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -555,7 +582,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/checkbox/checkbox.component.ts:112</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/checkbox/checkbox.component.ts:114</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -578,7 +605,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/checkbox/checkbox.component.ts:124</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/checkbox/checkbox.component.ts:130</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -601,7 +628,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/checkbox/checkbox.component.ts:108</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/checkbox/checkbox.component.ts:110</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -624,7 +651,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/checkbox/checkbox.component.ts:132</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/checkbox/checkbox.component.ts:138</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -650,7 +677,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="104" class="link-to-prism">src/checkbox/checkbox.component.ts:104</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/checkbox/checkbox.component.ts:106</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -672,7 +699,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/checkbox/checkbox.component.ts:120</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/checkbox/checkbox.component.ts:122</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -695,7 +722,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/checkbox/checkbox.component.ts:136</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/checkbox/checkbox.component.ts:142</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -720,7 +747,7 @@ click.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="206" class="link-to-prism">src/checkbox/checkbox.component.ts:206</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="212" class="link-to-prism">src/checkbox/checkbox.component.ts:212</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -742,7 +769,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="211" class="link-to-prism">src/checkbox/checkbox.component.ts:211</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/checkbox/checkbox.component.ts:217</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -770,7 +797,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="195" class="link-to-prism">src/checkbox/checkbox.component.ts:195</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/checkbox/checkbox.component.ts:201</a></div>
                             </td>
                         </tr>
 
@@ -798,7 +825,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/checkbox/checkbox.component.ts:198</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="204" class="link-to-prism">src/checkbox/checkbox.component.ts:204</a></div>
                             </td>
                         </tr>
 
@@ -835,7 +862,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="325" class="link-to-prism">src/checkbox/checkbox.component.ts:325</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="331" class="link-to-prism">src/checkbox/checkbox.component.ts:331</a></div>
                             </td>
                         </tr>
 
@@ -875,7 +902,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="338" class="link-to-prism">src/checkbox/checkbox.component.ts:338</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="344" class="link-to-prism">src/checkbox/checkbox.component.ts:344</a></div>
                             </td>
                         </tr>
 
@@ -915,7 +942,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="273" class="link-to-prism">src/checkbox/checkbox.component.ts:273</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="279" class="link-to-prism">src/checkbox/checkbox.component.ts:279</a></div>
                             </td>
                         </tr>
 
@@ -982,7 +1009,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="282" class="link-to-prism">src/checkbox/checkbox.component.ts:282</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="288" class="link-to-prism">src/checkbox/checkbox.component.ts:288</a></div>
                             </td>
                         </tr>
 
@@ -1051,7 +1078,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="256" class="link-to-prism">src/checkbox/checkbox.component.ts:256</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="262" class="link-to-prism">src/checkbox/checkbox.component.ts:262</a></div>
                             </td>
                         </tr>
 
@@ -1124,7 +1151,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="264" class="link-to-prism">src/checkbox/checkbox.component.ts:264</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="270" class="link-to-prism">src/checkbox/checkbox.component.ts:270</a></div>
                             </td>
                         </tr>
 
@@ -1202,7 +1229,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="242" class="link-to-prism">src/checkbox/checkbox.component.ts:242</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/checkbox/checkbox.component.ts:248</a></div>
                             </td>
                         </tr>
 
@@ -1242,7 +1269,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="303" class="link-to-prism">src/checkbox/checkbox.component.ts:303</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="309" class="link-to-prism">src/checkbox/checkbox.component.ts:309</a></div>
                             </td>
                         </tr>
 
@@ -1315,7 +1342,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="247" class="link-to-prism">src/checkbox/checkbox.component.ts:247</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="253" class="link-to-prism">src/checkbox/checkbox.component.ts:253</a></div>
                             </td>
                         </tr>
 
@@ -1395,7 +1422,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="216" class="link-to-prism">src/checkbox/checkbox.component.ts:216</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="222" class="link-to-prism">src/checkbox/checkbox.component.ts:222</a></div>
                             </td>
                         </tr>
 
@@ -1434,7 +1461,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/checkbox/checkbox.component.ts:220</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="226" class="link-to-prism">src/checkbox/checkbox.component.ts:226</a></div>
                             </td>
                         </tr>
 
@@ -1480,7 +1507,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/checkbox/checkbox.component.ts:99</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/checkbox/checkbox.component.ts:101</a></div>
                             </td>
                         </tr>
 
@@ -1525,7 +1552,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="222" class="link-to-prism">src/checkbox/checkbox.component.ts:222</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="228" class="link-to-prism">src/checkbox/checkbox.component.ts:228</a></div>
                             </td>
                         </tr>
 
@@ -1568,7 +1595,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/checkbox/checkbox.component.ts:227</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="233" class="link-to-prism">src/checkbox/checkbox.component.ts:233</a></div>
                             </td>
                         </tr>
 
@@ -1613,7 +1640,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="295" class="link-to-prism">src/checkbox/checkbox.component.ts:295</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="301" class="link-to-prism">src/checkbox/checkbox.component.ts:301</a></div>
                             </td>
                         </tr>
 
@@ -1652,7 +1679,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="349" class="link-to-prism">src/checkbox/checkbox.component.ts:349</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="355" class="link-to-prism">src/checkbox/checkbox.component.ts:355</a></div>
                             </td>
                         </tr>
 
@@ -1687,7 +1714,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/checkbox/checkbox.component.ts:151</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/checkbox/checkbox.component.ts:157</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -1707,7 +1734,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="158" class="link-to-prism">src/checkbox/checkbox.component.ts:158</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/checkbox/checkbox.component.ts:164</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -1767,7 +1794,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/checkbox/checkbox.component.ts:175</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/checkbox/checkbox.component.ts:181</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -1787,7 +1814,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/checkbox/checkbox.component.ts:182</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="188" class="link-to-prism">src/checkbox/checkbox.component.ts:188</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -1918,7 +1945,9 @@ export class CheckboxChange {
 			[ngClass]&#x3D;&quot;{
 				&#x27;bx--skeleton&#x27; : skeleton
 			}&quot;&gt;
-			&lt;ng-content&gt;&lt;/ng-content&gt;
+			&lt;span [ngClass]&#x3D;&quot;{&#x27;bx--visually-hidden&#x27; : hideLabel}&quot;&gt;
+				&lt;ng-content&gt;&lt;/ng-content&gt;
+			&lt;/span&gt;
 		&lt;/label&gt;
 	&#x60;,
 	providers: [
@@ -1956,6 +1985,10 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 * Set to &#x60;true&#x60; for a loading checkbox.
 	 */
 	@Input() skeleton &#x3D; false;
+	/**
+	 * Set to &#x60;true&#x60; to hide the checkbox labels.
+	 */
+	@Input() hideLabel &#x3D; false;
 	/**
 	 * Sets the name attribute on the &#x60;input&#x60; element.
 	 */
@@ -2221,7 +2254,7 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><input	#inputCheckbox	class="bx--checkbox"	type="checkbox"	[id]="id"	[value]="value"	[name]="name"	[required]="required"	[checked]="checked"	[disabled]="disabled"	[indeterminate]="indeterminate"	[attr.aria-label]="ariaLabel"	[attr.aria-labelledby]="ariaLabelledby"	[attr.aria-checked]="(indeterminate ? \'mixed\' : checked)"	(change)="onChange($event)"	(click)="onClick($event)"><label	[for]="id"	class="bx--checkbox-label"	[ngClass]="{		\'bx--skeleton\' : skeleton	}">	<ng-content></ng-content></label>	</div>'
+        var COMPONENT_TEMPLATE = '<div><input	#inputCheckbox	class="bx--checkbox"	type="checkbox"	[id]="id"	[value]="value"	[name]="name"	[required]="required"	[checked]="checked"	[disabled]="disabled"	[indeterminate]="indeterminate"	[attr.aria-label]="ariaLabel"	[attr.aria-labelledby]="ariaLabelledby"	[attr.aria-checked]="(indeterminate ? \'mixed\' : checked)"	(change)="onChange($event)"	(click)="onClick($event)"><label	[for]="id"	class="bx--checkbox-label"	[ngClass]="{		\'bx--skeleton\' : skeleton	}">	<span [ngClass]="{\'bx--visually-hidden\' : hideLabel}">		<ng-content></ng-content>	</span></label>	</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': 'Checkbox'};