Merge pull request #2606 from Akshat55/ng16-type

fix: Add empty string option for props that match directive name

Author: Akshat55

src/button/button.directive.ts

@@ -1,8 +1,7 @@
 import {
 	Directive,
 	HostBinding,
-	Input,
-	OnInit
+	Input
 } from "@angular/core";
 import { ButtonSize, ButtonType } from "./button.types";
 
@@ -23,17 +22,19 @@ import { ButtonSize, ButtonType } from "./button.types";
 @Directive({
 	selector: "[cdsButton], [ibmButton]"
 })
-export class Button implements OnInit {
+export class Button {
 	/**
 	 * @deprecated as of v5 - Use `cdsButton` input property instead
 	 */
 	@Input() set ibmButton(type: ButtonType) {
 		this.cdsButton = type;
 	}
 	/**
-	 * sets the button type
+	 * Sets the button type
+	 * Accepts `ButtonType` or nothing (empty string which is equivalent to "primary")
+	 * Empty string has been added as an option for Angular 16+ to resolve type errors
 	 */
-	@Input() cdsButton: ButtonType = "primary";
+	@Input() cdsButton: ButtonType | "" = "primary";
 	/**
 	 * Specify the size of the button
 	 */
@@ -57,7 +58,7 @@ export class Button implements OnInit {
 	// a whole lot of HostBindings ... this way we don't have to touch the elementRef directly
 	@HostBinding("class.cds--btn") baseClass = true;
 	@HostBinding("class.cds--btn--primary") get primaryButton() {
-		return this.cdsButton === "primary";
+		return this.cdsButton === "primary" || !this.cdsButton;
 	}
 	@HostBinding("class.cds--btn--secondary") get secondaryButton() {
 		return this.cdsButton === "secondary";
@@ -92,14 +93,4 @@ export class Button implements OnInit {
 	@HostBinding("class.cds--btn--2xl") get twoExtraLargeSize() {
 		return this.size === "2xl";
 	}
-
-	/**
-	 * We need to make sure cdsButton is not an empty string since
-	 * input name matches selector name.
-	 */
-	ngOnInit() {
-		if (!this.cdsButton) {
-			this.cdsButton = "primary";
-		}
-	}
 }

src/layout/stack.directive.ts

@@ -3,20 +3,19 @@ import {
 	ElementRef,
 	HostBinding,
 	Input,
-	OnInit,
 	Renderer2
 } from "@angular/core";
 
 @Directive({
 	selector: "[cdsStack], [ibmStack]"
 })
-export class StackDirective implements OnInit {
+export class StackDirective {
 	@HostBinding("class.cds--stack-horizontal") get isHorizontal() {
 		return this.cdsStack === "horizontal";
 	}
 
 	@HostBinding("class.cds--stack-vertical") get isVertical() {
-		return this.cdsStack === "vertical";
+		return this.cdsStack === "vertical" || !this.cdsStack;
 	}
 
 	/**
@@ -28,8 +27,11 @@ export class StackDirective implements OnInit {
 
 	/**
 	 * Orientation of the items in the stack, defaults to `vertical`
+	 * Empty string is equivalent to "vertical"
+	 *
+	 * Empty string has been added as an option for Angular 16+ to resolve type errors
 	 */
-	@Input() cdsStack: "vertical" | "horizontal" = "vertical";
+	@Input() cdsStack: "vertical" | "horizontal" | "" = "vertical";
 
 	/**
 	 * Gap in the layout, provide a custom value (string) or a step from the spacing scale (number)
@@ -44,15 +46,5 @@ 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 = "vertical";
-		}
-	}
+	constructor(private render: Renderer2, private hostElement: ElementRef) {}
 }

src/theme/theme.directive.ts

@@ -4,11 +4,12 @@ import {
 	Directive,
 	HostBinding,
 	Input,
-	OnInit,
 	QueryList
 } from "@angular/core";
 import { LayerDirective } from "carbon-components-angular/layer";
 
+export type ThemeType = "white" | "g10" | "g90" | "g100";
+
 /**
  * Applies theme styles to the div container it is applied to.
  *
@@ -18,18 +19,20 @@ import { LayerDirective } from "carbon-components-angular/layer";
 	selector: "[cdsTheme], [ibmTheme]",
 	exportAs: "theme"
 })
-export class ThemeDirective implements OnInit, AfterContentChecked {
+export class ThemeDirective implements AfterContentChecked {
 	/**
 	 * @deprecated as of v5 - Use `cdsTheme` input property instead
 	 */
-	@Input() set ibmTheme(type: "white" | "g10" | "g90" | "g100") {
+	@Input() set ibmTheme(type: ThemeType | "") {
 		this.cdsTheme = type;
 	}
 
 	/**
 	 * Sets the theme for the content
+	 * Accepts `ThemeType` or nothing (empty string which is equivalent to "white")
+	 * Empty string has been added as an option for Angular 16+ to resolve type errors
 	 */
-	@Input() cdsTheme: "white" | "g10" | "g90" | "g100" = "white";
+	@Input() cdsTheme: ThemeType | "" = "white";
 
 	@ContentChildren(LayerDirective, { descendants: false }) layerChildren: QueryList<LayerDirective>;
 
@@ -38,7 +41,7 @@ export class ThemeDirective implements OnInit, AfterContentChecked {
 	 * overwrite user added classes
 	 */
 	@HostBinding("class.cds--white") get whiteThemeClass() {
-		return this.cdsTheme === "white";
+		return this.cdsTheme === "white" || !this.cdsTheme;
 	}
 
 	@HostBinding("class.cds--g10") get g10ThemeClass() {
@@ -66,14 +69,4 @@ export class ThemeDirective implements OnInit, AfterContentChecked {
 			}
 		});
 	}
-
-	/**
-	 * We need to make sure cdsTheme is not an empty string because
-	 * input name matches selector name.
-	 */
-	ngOnInit(): void {
-		if (!this.cdsTheme) {
-			this.cdsTheme = "white";
-		}
-	}
 }