carbon-components-angular 3.0.2 → 3.2.0

package/docs/documentation/components/Toggle.html

@@ -107,7 +107,8 @@
 
             <tr>
                 <td class="col-md-3">template</td>
-                <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;input
+                <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;div *ngIf&#x3D;&quot;label&quot; class&#x3D;&quot;bx--label&quot; [id]&#x3D;&quot;ariaLabelledby&quot;&gt;{{label}}&lt;/div&gt;
+&lt;input
 	class&#x3D;&quot;bx--toggle&quot;
 	type&#x3D;&quot;checkbox&quot;
 	[ngClass]&#x3D;&quot;{
@@ -120,6 +121,7 @@
 	[required]&#x3D;&quot;required&quot;
 	[checked]&#x3D;&quot;checked&quot;
 	[disabled]&#x3D;&quot;disabled&quot;
+	[attr.aria-labelledby]&#x3D;&quot;ariaLabelledby&quot;
 	[attr.aria-checked]&#x3D;&quot;checked&quot;
 	(change)&#x3D;&quot;onChange($event)&quot;
 	(click)&#x3D;&quot;onClick($event)&quot;&gt;
@@ -259,6 +261,9 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                <a href="#label">label</a>
+                            </li>
                             <li>
                                 <a href="#offText">offText</a>
                             </li>
@@ -386,7 +391,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/toggle/toggle.component.ts:136</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/toggle/toggle.component.ts:141</a></div>
                             </td>
                         </tr>
 
@@ -440,6 +445,29 @@
 
     <section>
     <h3 id="inputs">Inputs</h3>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-2">
+                        <a name="label"></a>
+                        <code>label</code>
+                    </td>
+                    <td class="col-md-10">
+                        <div><p>Text that is set as the label of the toggle.</p>
+</div>
+                            <p>
+                            <em>Type :</em>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                            </p>
+                    </td>
+                </tr>
+                        <tr>
+                            <td class="col-md-2" colspan="2">
+                                    <div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/toggle/toggle.component.ts:119</a></div>
+                            </td>
+                        </tr>
+            </tbody>
+        </table>
         <table class="table table-sm table-bordered">
             <tbody>
                 <tr>
@@ -458,7 +486,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/toggle/toggle.component.ts:94</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/toggle/toggle.component.ts:96</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -481,7 +509,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/toggle/toggle.component.ts:106</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/toggle/toggle.component.ts:108</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -507,7 +535,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/toggle/toggle.component.ts:118</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/toggle/toggle.component.ts:123</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -529,7 +557,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/toggle/toggle.component.ts:122</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="127" class="link-to-prism">src/toggle/toggle.component.ts:127</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -929,7 +957,7 @@ click.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/toggle/toggle.component.ts:133</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/toggle/toggle.component.ts:138</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -1090,7 +1118,7 @@ on an indeterminate checkbox.</p>
 
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/toggle/toggle.component.ts:148</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="153" class="link-to-prism">src/toggle/toggle.component.ts:153</a></div>
                             </td>
                         </tr>
 
@@ -1745,7 +1773,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/toggle/toggle.component.ts:135</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/toggle/toggle.component.ts:140</a></div>
                             </td>
                         </tr>
 
@@ -1779,7 +1807,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/toggle/toggle.component.ts:136</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/toggle/toggle.component.ts:141</a></div>
                             </td>
                         </tr>
 
@@ -1812,7 +1840,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="127" class="link-to-prism">src/toggle/toggle.component.ts:127</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/toggle/toggle.component.ts:132</a></div>
                             </td>
                         </tr>
 
@@ -1858,7 +1886,7 @@ on an indeterminate checkbox.</p>
                     </tr>
                         <tr>
                             <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/toggle/toggle.component.ts:88</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/toggle/toggle.component.ts:90</a></div>
                             </td>
                         </tr>
 
@@ -2231,7 +2259,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/toggle/toggle.component.ts:98</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/toggle/toggle.component.ts:100</a></div>
                                 </td>
                             </tr>
 
@@ -2242,7 +2270,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/toggle/toggle.component.ts:94</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/toggle/toggle.component.ts:96</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -2302,7 +2330,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/toggle/toggle.component.ts:110</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/toggle/toggle.component.ts:112</a></div>
                                 </td>
                             </tr>
 
@@ -2313,7 +2341,7 @@ on an indeterminate checkbox.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/toggle/toggle.component.ts:106</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/toggle/toggle.component.ts:108</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -2406,6 +2434,7 @@ 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;input
 			class&#x3D;&quot;bx--toggle&quot;
 			type&#x3D;&quot;checkbox&quot;
@@ -2419,6 +2448,7 @@ export class ToggleChange {
 			[required]&#x3D;&quot;required&quot;
 			[checked]&#x3D;&quot;checked&quot;
 			[disabled]&#x3D;&quot;disabled&quot;
+			[attr.aria-labelledby]&#x3D;&quot;ariaLabelledby&quot;
 			[attr.aria-checked]&#x3D;&quot;checked&quot;
 			(change)&#x3D;&quot;onChange($event)&quot;
 			(click)&#x3D;&quot;onClick($event)&quot;&gt;
@@ -2474,8 +2504,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.
 	 */
@@ -2548,7 +2581,7 @@ export class Toggle extends Checkbox {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><input	class="bx--toggle"	type="checkbox"	[ngClass]="{		\'bx--toggle--small\': size === \'sm\',		\'bx--skeleton\': skeleton	}"	[id]="id"	[value]="value"	[name]="name"	[required]="required"	[checked]="checked"	[disabled]="disabled"	[attr.aria-checked]="checked"	(change)="onChange($event)"	(click)="onClick($event)"><label	class="bx--toggle__label"	[for]="id"	[ngClass]="{		\'bx--skeleton\': skeleton	}">	<span class="bx--toggle__text--left">{{(!skeleton ? offText : null) | async }}</span>	<span class="bx--toggle__appearance">		<svg *ngIf="size === \'sm\'" class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">			<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>		</svg>	</span>	<span class="bx--toggle__text--right">{{(!skeleton ? onText : null) | async}}</span></label>	</div>'
+        var COMPONENT_TEMPLATE = '<div><div *ngIf="label" class="bx--label" [id]="ariaLabelledby">{{label}}</div><input	class="bx--toggle"	type="checkbox"	[ngClass]="{		\'bx--toggle--small\': size === \'sm\',		\'bx--skeleton\': skeleton	}"	[id]="id"	[value]="value"	[name]="name"	[required]="required"	[checked]="checked"	[disabled]="disabled"	[attr.aria-labelledby]="ariaLabelledby"	[attr.aria-checked]="checked"	(change)="onChange($event)"	(click)="onClick($event)"><label	class="bx--toggle__label"	[for]="id"	[ngClass]="{		\'bx--skeleton\': skeleton	}">	<span class="bx--toggle__text--left">{{(!skeleton ? offText : null) | async }}</span>	<span class="bx--toggle__appearance">		<svg *ngIf="size === \'sm\'" class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">			<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>		</svg>	</span>	<span class="bx--toggle__text--right">{{(!skeleton ? onText : null) | async}}</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': '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': 'Toggle'};

package/docs/documentation/coverage.html

@@ -2111,7 +2111,7 @@
                 <span class="coverage-count">(0/6)</span>
             </td>
         </tr>
-        <tr class="very-good">
+        <tr class="good">
             <td>
                 <!-- miscellaneous -->
                 <a href="./components/TabHeaders.html">src/tabs/tab-headers.component.ts</a>
@@ -2122,9 +2122,9 @@
             <td>
                 TabHeaders
             </td>
-            <td align="right" data-sort="78">
-                <span class="coverage-percent">78 %</span>
-                <span class="coverage-count">(15/19)</span>
+            <td align="right" data-sort="71">
+                <span class="coverage-percent">71 %</span>
+                <span class="coverage-count">(15/21)</span>
             </td>
         </tr>
         <tr class="very-good">
@@ -2175,7 +2175,7 @@
                 <span class="coverage-count">(10/10)</span>
             </td>
         </tr>
-        <tr class="low">
+        <tr class="medium">
             <td>
                 <!-- miscellaneous -->
                 <a href="./components/TagFilter.html">src/tag/tag-filter.component.ts</a>
@@ -2186,9 +2186,9 @@
             <td>
                 TagFilter
             </td>
-            <td align="right" data-sort="20">
-                <span class="coverage-percent">20 %</span>
-                <span class="coverage-count">(1/5)</span>
+            <td align="right" data-sort="33">
+                <span class="coverage-percent">33 %</span>
+                <span class="coverage-count">(2/6)</span>
             </td>
         </tr>
         <tr class="medium">
@@ -2348,7 +2348,7 @@
             </td>
             <td align="right" data-sort="86">
                 <span class="coverage-percent">86 %</span>
-                <span class="coverage-count">(39/45)</span>
+                <span class="coverage-count">(40/46)</span>
             </td>
         </tr>
         <tr class="very-good">

package/docs/documentation/directives/ContentSwitcherOption.html

@@ -716,7 +716,7 @@ export class ContentSwitcherOption {
 
 	@HostListener("blur", ["$event"])
 	onBlur(event) {
-		if (event.relatedTarget) {
+		if (event.relatedTarget && event.relatedTarget.classList.contains("bx--content-switcher-btn")) {
 			this.active = false;
 		}
 	}