carbon-components-angular 5.14.0 → 5.14.2

package/docs/documentation/components/ComboBox.html

@@ -1738,8 +1738,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="560"
-                            class="link-to-prism">src/combobox/combobox.component.ts:560</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="559"
+                            class="link-to-prism">src/combobox/combobox.component.ts:559</a></div>
                 </td>
             </tr>
 
@@ -1779,8 +1779,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="807"
-                            class="link-to-prism">src/combobox/combobox.component.ts:807</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="806"
+                            class="link-to-prism">src/combobox/combobox.component.ts:806</a></div>
                 </td>
             </tr>
 
@@ -1818,8 +1818,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="818"
-                            class="link-to-prism">src/combobox/combobox.component.ts:818</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="817"
+                            class="link-to-prism">src/combobox/combobox.component.ts:817</a></div>
                 </td>
             </tr>
 
@@ -1857,8 +1857,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="787"
-                            class="link-to-prism">src/combobox/combobox.component.ts:787</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="786"
+                            class="link-to-prism">src/combobox/combobox.component.ts:786</a></div>
                 </td>
             </tr>
 
@@ -1928,8 +1928,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="585"
-                            class="link-to-prism">src/combobox/combobox.component.ts:585</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="584"
+                            class="link-to-prism">src/combobox/combobox.component.ts:584</a></div>
                 </td>
             </tr>
 
@@ -1965,8 +1965,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="847"
-                            class="link-to-prism">src/combobox/combobox.component.ts:847</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="846"
+                            class="link-to-prism">src/combobox/combobox.component.ts:846</a></div>
                 </td>
             </tr>
 
@@ -2032,8 +2032,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="827"
-                            class="link-to-prism">src/combobox/combobox.component.ts:827</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="826"
+                            class="link-to-prism">src/combobox/combobox.component.ts:826</a></div>
                 </td>
             </tr>
 
@@ -2074,8 +2074,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="868"
-                            class="link-to-prism">src/combobox/combobox.component.ts:868</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="867"
+                            class="link-to-prism">src/combobox/combobox.component.ts:867</a></div>
                 </td>
             </tr>
 
@@ -2111,8 +2111,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="763"
-                            class="link-to-prism">src/combobox/combobox.component.ts:763</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="762"
+                            class="link-to-prism">src/combobox/combobox.component.ts:762</a></div>
                 </td>
             </tr>
 
@@ -2178,8 +2178,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="651"
-                            class="link-to-prism">src/combobox/combobox.component.ts:651</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="650"
+                            class="link-to-prism">src/combobox/combobox.component.ts:650</a></div>
                 </td>
             </tr>
 
@@ -2245,8 +2245,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="671"
-                            class="link-to-prism">src/combobox/combobox.component.ts:671</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="670"
+                            class="link-to-prism">src/combobox/combobox.component.ts:670</a></div>
                 </td>
             </tr>
 
@@ -2293,8 +2293,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="560"
-                            class="link-to-prism">src/combobox/combobox.component.ts:560</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="559"
+                            class="link-to-prism">src/combobox/combobox.component.ts:559</a></div>
                 </td>
             </tr>
 
@@ -2366,8 +2366,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="780"
-                            class="link-to-prism">src/combobox/combobox.component.ts:780</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="779"
+                            class="link-to-prism">src/combobox/combobox.component.ts:779</a></div>
                 </td>
             </tr>
 
@@ -2471,8 +2471,8 @@ Subscribes to select events and handles focus/filtering/initial list updates</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="534"
-                            class="link-to-prism">src/combobox/combobox.component.ts:534</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="533"
+                            class="link-to-prism">src/combobox/combobox.component.ts:533</a></div>
                 </td>
             </tr>
 
@@ -2578,8 +2578,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="550"
-                            class="link-to-prism">src/combobox/combobox.component.ts:550</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="549"
+                            class="link-to-prism">src/combobox/combobox.component.ts:549</a></div>
                 </td>
             </tr>
 
@@ -2617,8 +2617,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="622"
-                            class="link-to-prism">src/combobox/combobox.component.ts:622</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="621"
+                            class="link-to-prism">src/combobox/combobox.component.ts:621</a></div>
                 </td>
             </tr>
 
@@ -2656,8 +2656,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="719"
-                            class="link-to-prism">src/combobox/combobox.component.ts:719</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="718"
+                            class="link-to-prism">src/combobox/combobox.component.ts:718</a></div>
                 </td>
             </tr>
 
@@ -2740,8 +2740,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="752"
-                            class="link-to-prism">src/combobox/combobox.component.ts:752</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="751"
+                            class="link-to-prism">src/combobox/combobox.component.ts:751</a></div>
                 </td>
             </tr>
 
@@ -2813,8 +2813,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="685"
-                            class="link-to-prism">src/combobox/combobox.component.ts:685</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="684"
+                            class="link-to-prism">src/combobox/combobox.component.ts:684</a></div>
                 </td>
             </tr>
 
@@ -2852,8 +2852,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="626"
-                            class="link-to-prism">src/combobox/combobox.component.ts:626</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="625"
+                            class="link-to-prism">src/combobox/combobox.component.ts:625</a></div>
                 </td>
             </tr>
 
@@ -2921,8 +2921,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="630"
-                            class="link-to-prism">src/combobox/combobox.component.ts:630</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="629"
+                            class="link-to-prism">src/combobox/combobox.component.ts:629</a></div>
                 </td>
             </tr>
 
@@ -2990,8 +2990,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="639"
-                            class="link-to-prism">src/combobox/combobox.component.ts:639</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="638"
+                            class="link-to-prism">src/combobox/combobox.component.ts:638</a></div>
                 </td>
             </tr>
 
@@ -3064,8 +3064,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="708"
-                            class="link-to-prism">src/combobox/combobox.component.ts:708</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="707"
+                            class="link-to-prism">src/combobox/combobox.component.ts:707</a></div>
                 </td>
             </tr>
 
@@ -3105,8 +3105,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="646"
-                            class="link-to-prism">src/combobox/combobox.component.ts:646</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="645"
+                            class="link-to-prism">src/combobox/combobox.component.ts:645</a></div>
                 </td>
             </tr>
 
@@ -3146,8 +3146,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="856"
-                            class="link-to-prism">src/combobox/combobox.component.ts:856</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="855"
+                            class="link-to-prism">src/combobox/combobox.component.ts:855</a></div>
                 </td>
             </tr>
 
@@ -3183,8 +3183,8 @@ Updates pills if necessary.</p>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="590"
-                            class="link-to-prism">src/combobox/combobox.component.ts:590</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="589"
+                            class="link-to-prism">src/combobox/combobox.component.ts:589</a></div>
                 </td>
             </tr>
 
@@ -4964,6 +4964,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 						} else {
 							this.propagateChangeCallback(this.view.getSelected());
 						}
+						this.selected.emit(event);
 					}
 				} else {
 					// If type is single, dropdown list will emit an object
@@ -4990,12 +4991,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 					if (!isUpdate(event)) {
 						this.elementRef.nativeElement.querySelector(&quot;input&quot;).focus();
 						this.view.filterBy(&quot;&quot;);
+						this.selected.emit(event.item);
 					}
 					this.closeDropdown();
 				}
-				if (!isUpdate(event) &amp;&amp; !Array.isArray(event)) {
-					this.selected.emit(event.item);
-				}
 			});
 			// update the rest of combobox with any pre-selected items
 			// setTimeout just defers the call to the next check cycle

package/docs/documentation/components/Toggletip.html

@@ -143,6 +143,9 @@
                                     <span class="modifier"></span>
                                 <a href="#btn" >btn</a>
                             </li>
+                            <li>
+                                <a href="#documentClick" >documentClick</a>
+                            </li>
                             <li>
                                     <span class="modifier"></span>
                                 <a href="#toggletipClass" >toggletipClass</a>
@@ -172,7 +175,6 @@
                                 <a href="#handleExpansion" >handleExpansion</a>
                             </li>
                             <li>
-                                    <span class="modifier"></span>
                                 <a href="#handleFocusOut" >handleFocusOut</a>
                             </li>
                             <li>
@@ -302,9 +304,6 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
-                            <li>
-                                <a href="#document:click" >document:click</a>
-                            </li>
                             <li>
                                 <a href="#keyup" >keyup</a>
                             </li>
@@ -327,7 +326,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/toggletip/toggletip.component.ts:32</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/toggletip/toggletip.component.ts:34</a></div>
                             </td>
                         </tr>
 
@@ -1146,39 +1145,6 @@
 
     <section data-compodoc="block-methods">
     <h3>HostListeners</h3>    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="document:click"></a>
-                    <span class="name">
-                        <span ><b>document:click</b></span>
-                        <a href="#document:click"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-                    <i>Arguments : </i><code>'$event' </code>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>document:click(event)</code>
-                </td>
-            </tr>
-
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="59"
-                            class="link-to-prism">src/toggletip/toggletip.component.ts:59</a></div>
-                </td>
-            </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
@@ -1203,8 +1169,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="51"
-                            class="link-to-prism">src/toggletip/toggletip.component.ts:51</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="68"
+                            class="link-to-prism">src/toggletip/toggletip.component.ts:68</a></div>
                 </td>
             </tr>
 
@@ -1239,8 +1205,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="65"
-                            class="link-to-prism">src/toggletip/toggletip.component.ts:65</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="81"
+                            class="link-to-prism">src/toggletip/toggletip.component.ts:81</a></div>
                 </td>
             </tr>
 
@@ -1311,7 +1277,6 @@
                 <td class="col-md-4">
                     <a name="handleFocusOut"></a>
                     <span class="name">
-                        <span class="modifier"></span>
                         <span ><b>handleFocusOut</b></span>
                         <a href="#handleFocusOut"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -1319,23 +1284,15 @@
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>handleFocusOut(event)</code>
+<code>handleFocusOut(event)</code>
                 </td>
             </tr>
 
-            <tr>
-                <td class="col-md-4">
-                    <b>Decorators : </b>
-                    <br />
-                    <code>@HostListener(&#x27;document:click&#x27;, [&#x27;$event&#x27;])<br /></code>
-                </td>
-            </tr>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="59"
-                            class="link-to-prism">src/toggletip/toggletip.component.ts:59</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="75"
+                            class="link-to-prism">src/toggletip/toggletip.component.ts:75</a></div>
                 </td>
             </tr>
 
@@ -1408,8 +1365,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="51"
-                            class="link-to-prism">src/toggletip/toggletip.component.ts:51</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="68"
+                            class="link-to-prism">src/toggletip/toggletip.component.ts:68</a></div>
                 </td>
             </tr>
 
@@ -1477,8 +1434,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="40"
-                            class="link-to-prism">src/toggletip/toggletip.component.ts:40</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="42"
+                            class="link-to-prism">src/toggletip/toggletip.component.ts:42</a></div>
                 </td>
             </tr>
 
@@ -1621,6 +1578,31 @@
                     </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="documentClick"></a>
+                    <span class="name">
+                        <span ><b>documentClick</b></span>
+                        <a href="#documentClick"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>this.handleFocusOut.bind(this)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/toggletip/toggletip.component.ts:34</a></div>
+                        </td>
+                    </tr>
+
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -1771,6 +1753,8 @@ export class Toggletip extends PopoverContainer implements AfterViewInit {
 
 	@ContentChild(ToggletipButton, { read: ElementRef }) btn!: ElementRef;
 
+	documentClick &#x3D; this.handleFocusOut.bind(this);
+
 	constructor(private hostElement: ElementRef, private renderer: Renderer2) {
 		super();
 		this.highContrast &#x3D; true;
@@ -1780,7 +1764,22 @@ export class Toggletip extends PopoverContainer implements AfterViewInit {
 	ngAfterViewInit(): void {
 		// Listen for click events on trigger
 		fromEvent(this.btn.nativeElement, &quot;click&quot;)
-			.subscribe((event: Event) &#x3D;&gt; this.handleExpansion(!this.isOpen, event));
+			.subscribe((event: Event) &#x3D;&gt; {
+				// Add/Remove event listener based on isOpen to improve performance when there
+				// are a lot of toggletips
+				if (this.isOpen) {
+					document.removeEventListener(&quot;click&quot;, this.documentClick);
+				} else {
+					document.addEventListener(&quot;click&quot;, this.documentClick);
+				}
+
+				this.handleExpansion(!this.isOpen, event);
+			});
+
+		// Toggletip is open on initial render, add &#x27;click&#x27; event listener to document so users can close
+		if (this.isOpen) {
+			document.addEventListener(&quot;click&quot;, this.documentClick);
+		}
 
 		if (this.btn) {
 			this.renderer.setAttribute(this.btn.nativeElement, &quot;aria-controls&quot;, this.id);
@@ -1795,7 +1794,6 @@ export class Toggletip extends PopoverContainer implements AfterViewInit {
 		}
 	}
 
-	@HostListener(&quot;document:click&quot;, [&quot;$event&quot;])
 	handleFocusOut(event) {
 		if (!this.hostElement.nativeElement.contains(event.target)) {
 			this.handleExpansion(false, event);