carbon-components-angular 5.10.4 → 5.10.6

package/docs/documentation/directives/IconDirective.html

@@ -83,6 +83,7 @@
             </p>
             <p class="comment">
                         <code>AfterViewInit</code>
+                        <code>OnChanges</code>
             </p>
 
 
@@ -115,10 +116,6 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
-                            <li>
-                                    <span class="modifier">Private</span>
-                                <a href="#iconName" >iconName</a>
-                            </li>
                             <li>
                                     <span class="modifier">Static</span>
                                 <a href="#titleIdCounter" >titleIdCounter</a>
@@ -138,6 +135,9 @@
                             <li>
                                 <a href="#ngAfterViewInit" >ngAfterViewInit</a>
                             </li>
+                            <li>
+                                <a href="#ngOnChanges" >ngOnChanges</a>
+                            </li>
                             <li>
                                 <a href="#renderIcon" >renderIcon</a>
                             </li>
@@ -195,9 +195,6 @@
                                 <li>
                                     <a href="#ibmIcon" >ibmIcon</a>
                                 </li>
-                                <li>
-                                    <a href="#cdsIcon" >cdsIcon</a>
-                                </li>
                             </ul>
                         </td>
                     </tr>
@@ -216,7 +213,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="51" class="link-to-prism">src/icon/icon.directive.ts:51</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="49" class="link-to-prism">src/icon/icon.directive.ts:49</a></div>
                             </td>
                         </tr>
 
@@ -359,10 +356,15 @@
                         <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&quot;&quot;</code>
+                    </td>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/icon/icon.directive.ts:33</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/icon/icon.directive.ts:37</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -383,7 +385,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/icon/icon.directive.ts:29</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/icon/icon.directive.ts:31</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -495,8 +497,8 @@
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="124"
-                            class="link-to-prism">src/icon/icon.directive.ts:124</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="122"
+                            class="link-to-prism">src/icon/icon.directive.ts:122</a></div>
                 </td>
             </tr>
 
@@ -516,24 +518,24 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="renderIcon"></a>
+                    <a name="ngOnChanges"></a>
                     <span class="name">
-                        <span ><b>renderIcon</b></span>
-                        <a href="#renderIcon"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ngOnChanges</b></span>
+                        <a href="#ngOnChanges"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>renderIcon(iconName: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
+<code>ngOnChanges(undefined: SimpleChanges)</code>
                 </td>
             </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="58"
-                            class="link-to-prism">src/icon/icon.directive.ts:58</a></div>
+                    <div class="io-line">Defined in <a href="" data-line="126"
+                            class="link-to-prism">src/icon/icon.directive.ts:126</a></div>
                 </td>
             </tr>
 
@@ -554,9 +556,8 @@
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td>iconName</td>
                                     <td>
-                                                <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                            <code>SimpleChanges</code>
                                     </td>
 
                                     <td>
@@ -581,39 +582,81 @@
             </tr>
         </tbody>
     </table>
-</section>
-            <section data-compodoc="block-properties">
-    
-    <h3 id="inputs">
-        Properties
-    </h3>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="iconName"></a>
+                    <a name="renderIcon"></a>
                     <span class="name">
-                            <span class="modifier">Private</span>
-                        <span ><b>iconName</b></span>
-                        <a href="#iconName"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>renderIcon</b></span>
+                        <a href="#renderIcon"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+            <tr>
+                <td class="col-md-4">
+<code>renderIcon(iconName: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
+                </td>
+            </tr>
 
-                    </td>
-                </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="51" class="link-to-prism">src/icon/icon.directive.ts:51</a></div>
-                        </td>
-                    </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-line">Defined in <a href="" data-line="56"
+                            class="link-to-prism">src/icon/icon.directive.ts:56</a></div>
+                </td>
+            </tr>
+
+
+            <tr>
+                <td class="col-md-4">
+
+                    <div class="io-description">
+                        <b>Parameters :</b>
+                        
+                        <table class="params">
+                            <thead>
+                                <tr>
+                                    <td>Name</td>
+                                    <td>Type</td>
+                                    <td>Optional</td>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>iconName</td>
+                                    <td>
+                                                <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                    </td>
+
+                                    <td>
+                                        No
+                                    </td>
+
+
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div>
+                    </div>
+                    <div class="io-description">
+                        <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
 
+                    </div>
+                    <div class="io-description">
+                        
+                    </div>
+                </td>
+            </tr>
         </tbody>
     </table>
+</section>
+            <section data-compodoc="block-properties">
+    
+    <h3 id="inputs">
+        Properties
+    </h3>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -639,7 +682,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/icon/icon.directive.ts:37</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/icon/icon.directive.ts:35</a></div>
                         </td>
                     </tr>
 
@@ -669,66 +712,7 @@
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/icon/icon.directive.ts:29</a></div>
-                                </td>
-                            </tr>
-                    <tr>
-                        <td class="col-md-4">
-
-                                <div class="io-description">
-                                        <b>Parameters :</b>
-                                        <table class="params">
-                                            <thead>
-                                                <tr>
-                                                    <td>Name</td>
-                                                        <td>Type</td>
-                                                    <td>Optional</td>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                    <tr>
-                                                            <td>iconName</td>
-                                                    
-                                                            <td>
-                                                                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
-                                                            </td>
-                                                    
-                                                        <td>
-                                                                No
-                                                        </td>
-                                                        
-                                                    </tr>
-                                            </tbody>
-                                        </table>
-                                </div>
-                                <div>
-                                </div>
-                                <div class="io-description">
-                                    <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                                </div>
-                        </td>
-                    </tr>
-            </tbody>
-        </table>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-                        <a name="cdsIcon"></a>
-                        <span class="name"><b>cdsIcon</b><a href="#cdsIcon"><span class="icon ion-ios-link"></span></a></span>
-                    </td>
-                </tr>
-
-
-                <tr>
-                    <td class="col-md-4">
-                        <span class="accessor"><b>set</b><code>cdsIcon(iconName: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code></span>
-                    </td>
-                </tr>
-                            <tr>
-                                <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/icon/icon.directive.ts:33</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/icon/icon.directive.ts:31</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -780,7 +764,9 @@
 	AfterViewInit,
 	Directive,
 	ElementRef,
-	Input
+	Input,
+	OnChanges,
+	SimpleChanges
 } from &quot;@angular/core&quot;;
 import { IconService } from &quot;./icon.service&quot;;
 import { getAttributes } from &quot;@carbon/icon-helpers&quot;;
@@ -799,7 +785,7 @@ import { getAttributes } from &quot;@carbon/icon-helpers&quot;;
 @Directive({
 	selector: &quot;[cdsIcon], [ibmIcon]&quot;
 })
-export class IconDirective implements AfterViewInit {
+export class IconDirective implements AfterViewInit, OnChanges {
 
 	/**
 	 * @deprecated since v5 - Use &#x60;cdsIcon&#x60; input property instead
@@ -808,12 +794,10 @@ export class IconDirective implements AfterViewInit {
 		this.cdsIcon &#x3D; iconName;
 	}
 
-	@Input() set cdsIcon(iconName: string) {
-		this.iconName &#x3D; iconName;
-		this.renderIcon(iconName);
-	}
 	static titleIdCounter &#x3D; 0;
 
+	@Input() cdsIcon &#x3D; &quot;&quot;;
+
 	@Input() size &#x3D; &quot;16&quot;;
 
 	@Input() title &#x3D; &quot;&quot;;
@@ -826,12 +810,10 @@ export class IconDirective implements AfterViewInit {
 
 	@Input() isFocusable &#x3D; false;
 
-	private iconName: string;
-
 	constructor(
 		protected elementRef: ElementRef,
 		protected iconService: IconService
-	) { }
+	) {}
 
 	renderIcon(iconName: string) {
 		const root &#x3D; this.elementRef.nativeElement as HTMLElement;
@@ -900,7 +882,15 @@ export class IconDirective implements AfterViewInit {
 	}
 
 	ngAfterViewInit() {
-		this.renderIcon(this.iconName);
+		this.renderIcon(this.cdsIcon);
+	}
+
+	ngOnChanges({ cdsIcon }: SimpleChanges) {
+		// We want to ignore first change to let the icon register
+		// and add only after view has been initialized
+		if (!cdsIcon.isFirstChange()) {
+			this.renderIcon(this.cdsIcon);
+		}
 	}
 }
 </code></pre>

package/docs/documentation/directives/StackDirective.html

@@ -69,12 +69,6 @@
 
 
 
-            <p class="comment">
-                <h3>Implements</h3>
-            </p>
-            <p class="comment">
-                        <code>OnInit</code>
-            </p>
 
 
         <section data-compodoc="block-metadata">
@@ -114,20 +108,6 @@
                     </td>
                 </tr>
 
-                <tr>
-                    <td class="col-md-4">
-                        <h6><b>Methods</b></h6>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <ul class="index-list">
-                            <li>
-                                <a href="#ngOnInit" >ngOnInit</a>
-                            </li>
-                        </ul>
-                    </td>
-                </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -208,7 +188,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/layout/stack.directive.ts:45</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="47" class="link-to-prism">src/layout/stack.directive.ts:47</a></div>
                             </td>
                         </tr>
 
@@ -270,7 +250,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>&quot;vertical&quot; | &quot;horizontal&quot;</code>
+                        <i>Type : </i>    <code>&quot;vertical&quot; | &quot;horizontal&quot; | string</code>
 
                     </td>
                 </tr>
@@ -281,12 +261,14 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/layout/stack.directive.ts:32</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/layout/stack.directive.ts:34</a></div>
                             </td>
                         </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Orientation of the items in the stack, defaults to <code>vertical</code></p>
+                        <div class="io-description"><p>Orientation of the items in the stack, defaults to <code>vertical</code>
+Empty string is equivalent to &quot;vertical&quot;</p>
+<p>Empty string has been added as an option for Angular 16+ to resolve type errors</p>
 </div>
                     </td>
                 </tr>
@@ -308,7 +290,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/layout/stack.directive.ts:37</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="39" class="link-to-prism">src/layout/stack.directive.ts:39</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -335,7 +317,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/layout/stack.directive.ts:25</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/layout/stack.directive.ts:24</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -362,7 +344,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="14" class="link-to-prism">src/layout/stack.directive.ts:14</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/layout/stack.directive.ts:13</a></div>
                         </td>
                     </tr>
 
@@ -388,7 +370,7 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="18" class="link-to-prism">src/layout/stack.directive.ts:18</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/layout/stack.directive.ts:17</a></div>
                         </td>
                     </tr>
 
@@ -398,52 +380,7 @@
 </section>
 
 
-            <section data-compodoc="block-methods">
-    
-    <h3 id="methods">
-        Methods
-    </h3>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="ngOnInit"></a>
-                    <span class="name">
-                        <span ><b>ngOnInit</b></span>
-                        <a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>ngOnInit()</code>
-                </td>
-            </tr>
-
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="53"
-                            class="link-to-prism">src/layout/stack.directive.ts:53</a></div>
-                </td>
-            </tr>
-
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>We need to make sure cdsStack is not an empty string since
-input name matches selector name.</p>
-</div>
-
-                    <div class="io-description">
-                        <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
 
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</section>
             <section data-compodoc="block-properties">
     
     <h3 id="inputs">
@@ -463,7 +400,7 @@ input name matches selector name.</p>
             </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/layout/stack.directive.ts:45</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="47" class="link-to-prism">src/layout/stack.directive.ts:47</a></div>
                         </td>
                     </tr>
 
@@ -492,7 +429,7 @@ input name matches selector name.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="14" class="link-to-prism">src/layout/stack.directive.ts:14</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/layout/stack.directive.ts:13</a></div>
                                 </td>
                             </tr>
 
@@ -514,7 +451,7 @@ input name matches selector name.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="18" class="link-to-prism">src/layout/stack.directive.ts:18</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/layout/stack.directive.ts:17</a></div>
                                 </td>
                             </tr>
 
@@ -537,7 +474,7 @@ input name matches selector name.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/layout/stack.directive.ts:25</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/layout/stack.directive.ts:24</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -596,7 +533,7 @@ input name matches selector name.</p>
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/layout/stack.directive.ts:37</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="39" class="link-to-prism">src/layout/stack.directive.ts:39</a></div>
                                 </td>
                             </tr>
                     <tr>
@@ -651,20 +588,19 @@ input name matches selector name.</p>
 	ElementRef,
 	HostBinding,
 	Input,
-	OnInit,
 	Renderer2
 } from &quot;@angular/core&quot;;
 
 @Directive({
 	selector: &quot;[cdsStack], [ibmStack]&quot;
 })
-export class StackDirective implements OnInit {
+export class StackDirective {
 	@HostBinding(&quot;class.cds--stack-horizontal&quot;) get isHorizontal() {
 		return this.cdsStack &#x3D;&#x3D;&#x3D; &quot;horizontal&quot;;
 	}
 
 	@HostBinding(&quot;class.cds--stack-vertical&quot;) get isVertical() {
-		return this.cdsStack &#x3D;&#x3D;&#x3D; &quot;vertical&quot;;
+		return this.cdsStack &#x3D;&#x3D;&#x3D; &quot;vertical&quot; || !this.cdsStack;
 	}
 
 	/**
@@ -676,8 +612,11 @@ export class StackDirective implements OnInit {
 
 	/**
 	 * Orientation of the items in the stack, defaults to &#x60;vertical&#x60;
+	 * Empty string is equivalent to &quot;vertical&quot;
+	 *
+	 * Empty string has been added as an option for Angular 16+ to resolve type errors
 	 */
-	@Input() cdsStack: &quot;vertical&quot; | &quot;horizontal&quot; &#x3D; &quot;vertical&quot;;
+	@Input() cdsStack: &quot;vertical&quot; | &quot;horizontal&quot; | &quot;&quot; &#x3D; &quot;vertical&quot;;
 
 	/**
 	 * Gap in the layout, provide a custom value (string) or a step from the spacing scale (number)
@@ -692,17 +631,7 @@ export class StackDirective implements OnInit {
 	// Used to track previous value of gap so we can dynamically remove class
 	private _gap;
 
-	constructor(private render: Renderer2, private hostElement: ElementRef) { }
-
-	/**
-	 * We need to make sure cdsStack is not an empty string since
-	 * input name matches selector name.
-	 */
-	ngOnInit(): void {
-		if (!this.cdsStack) {
-			this.cdsStack &#x3D; &quot;vertical&quot;;
-		}
-	}
+	constructor(private render: Renderer2, private hostElement: ElementRef) {}
 }
 </code></pre>
     </div>