carbon-components-angular 5.14.1 → 5.14.2

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);