feat: migrate to new control flow syntax (#3072)

Signed-off-by: Akshat Patel <[email protected]>
carbon-design-system · Nov 30, 2024 · 6ca6472 · 6ca6472
1 parent 8f4af0f
commit 6ca6472
Show file tree

Hide file tree

Showing 131 changed files with 3,011 additions and 2,547 deletions.
diff --git a/src/accordion/accordion-item.component.ts b/src/accordion/accordion-item.component.ts
@@ -18,27 +18,27 @@ import {
 			(click)="toggleExpanded()"
 			class="cds--accordion__heading">
 			<svg cdsIcon="chevron--right" size="16" class="cds--accordion__arrow"></svg>
-			<p *ngIf="!isTemplate(title)"
-				class="cds--accordion__title"
-				[ngClass]="{
-					'cds--skeleton__text': skeleton
-				}">
-				{{!skeleton ? title : null}}
-			</p>
-			<ng-template
-				*ngIf="isTemplate(title)"
-				[ngTemplateOutlet]="title"
-				[ngTemplateOutletContext]="context">
-			</ng-template>
+			@if (isTemplate(title)) {
+				<ng-template [ngTemplateOutlet]="title" [ngTemplateOutletContext]="context" />
+			} @else {
+				<p
+					class="cds--accordion__title"
+					[ngClass]="{
+						'cds--skeleton__text': skeleton
+					}">
+					{{!skeleton ? title : null}}
+				</p>
+			}
 		</button>
 		<div class="cds--accordion__wrapper">
 			<div [id]="id" class="cds--accordion__content">
-				<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
-				<ng-template #skeletonTemplate>
+				@if (skeleton) {
 					<p class="cds--skeleton__text" style="width: 90%"></p>
 					<p class="cds--skeleton__text" style="width: 80%"></p>
 					<p class="cds--skeleton__text" style="width: 95%"></p>
-				</ng-template>
+				} @else {
+					<ng-content />
+				}
 			</div>
 		</div>
 	`,

diff --git a/src/accordion/accordion.component.ts b/src/accordion/accordion.component.ts
@@ -31,7 +31,7 @@ import { AccordionItem } from "./accordion-item.component";
 				'cds--layout--size-lg': size === 'lg'
 			}"
 			role="list">
-			<ng-content></ng-content>
+			<ng-content />
 		</div>
 	`
 })

diff --git a/src/breadcrumb/breadcrumb-item.component.ts b/src/breadcrumb/breadcrumb-item.component.ts
@@ -12,17 +12,18 @@ import { Router } from "@angular/router";
 @Component({
 	selector: "cds-breadcrumb-item, ibm-breadcrumb-item",
 	template: `
-	<a
-		class="cds--link"
-		[href]="(skeleton ? '/#' : href)"
-		(click)="navigate($event)"
-		[attr.aria-current]="(current ? ariaCurrent : null)"
-		*ngIf="useTemplate(); else content">
-		<ng-container *ngTemplateOutlet="content"></ng-container>
-	</a>
-	<ng-template #content>
-		<ng-content></ng-content>
-	</ng-template>`
+		@if (useTemplate()) {
+			<a
+				class="cds--link"
+				[href]="(skeleton ? '/#' : href)"
+				(click)="navigate($event)"
+				[attr.aria-current]="(current ? ariaCurrent : null)">
+				<ng-container *ngTemplateOutlet="content" />
+			</a>
+		} @else {
+			<ng-content />
+		}
+	`
 })
 export class BreadcrumbItemComponent {
 	@Input() set href(v: string) {

diff --git a/src/breadcrumb/breadcrumb.component.ts b/src/breadcrumb/breadcrumb.component.ts
@@ -29,102 +29,99 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
 @Component({
 	selector: "cds-breadcrumb, ibm-breadcrumb",
 	template: `
-	<nav #nav class="cds--breadcrumb"
-		[ngClass]="{
-			'cds--skeleton' : skeleton,
-			'cds--breadcrumb--no-trailing-slash' : noTrailingSlash
-		}"
-		[attr.aria-label]="ariaLabel">
-		<ng-template [ngIf]="shouldShowContent">
-			<ng-content></ng-content>
-		</ng-template>
-		<ng-template [ngIf]="!shouldShowOverflow">
-			<cds-breadcrumb-item
-				*ngFor="let item of items"
-				[href]="item.href"
-				[route]="item.route"
-				[routeExtras]="item.routeExtras"
-				[current]="item.current"
-				[ariaCurrent]="item.ariaCurrent"
-				(navigation)="navigation.emit($event)">
-				<ng-container *ngIf="!item.template">{{item.content}}</ng-container>
-				<ng-template
-					*ngIf="item.template"
-					[ngTemplateOutlet]="item.template"
-					[ngTemplateOutletContext]="{ $implicit: item }">
-				</ng-template>
-			</cds-breadcrumb-item>
-		</ng-template>
-		<ng-template [ngIf]="shouldShowOverflow">
-			<cds-breadcrumb-item
-				[href]="first?.href"
-				[route]="first?.route"
-				[routeExtras]="first?.routeExtras"
-				[current]="first?.current"
-				[ariaCurrent]="first?.ariaCurrent"
-				(navigation)="navigation.emit($event)">
-				<ng-container *ngIf="!first?.template">{{first?.content}}</ng-container>
-				<ng-template
-					*ngIf="first?.template"
-					[ngTemplateOutlet]="first?.template"
-					[ngTemplateOutletContext]="{ $implicit: first }">
-				</ng-template>
-			</cds-breadcrumb-item>
-			<cds-breadcrumb-item>
-				<ng-template #overflowMenuTrigger>
-					<svg class="cds--overflow-menu__icon" cdsIcon="overflow-menu--horizontal" size="16"></svg>
-				</ng-template>
-				<cds-overflow-menu
-					[customTrigger]="overflowMenuTrigger"
-					triggerClass="cds--btn--icon-only"
-					[description]="description"
-					[autoAlign]="autoAlign">
-					<li class="cds--overflow-menu-options__option"
-						*ngFor="let item of overflowItems">
-						<a class="cds--overflow-menu-options__btn"
-							href="{{item?.href}}"
-							(click)="navigate($event, item)"
-							style="text-decoration: none;">
-							<ng-container *ngIf="!item?.template">{{item?.content}}</ng-container>
-							<ng-template
-								*ngIf="item?.template"
-								[ngTemplateOutlet]="item?.template"
-								[ngTemplateOutletContext]="{ $implicit: item }">
-							</ng-template>
-						</a>
-					</li>
-				</cds-overflow-menu>
-			</cds-breadcrumb-item>
-			<cds-breadcrumb-item
-				[href]="secondLast?.href"
-				[route]="secondLast?.route"
-				[routeExtras]="secondLast?.routeExtras"
-				[current]="secondLast?.current"
-				[ariaCurrent]="secondLast?.ariaCurrent"
-				(navigation)="navigation.emit($event)">
-				<ng-container *ngIf="!secondLast?.template">{{secondLast?.content}}</ng-container>
-				<ng-template
-					*ngIf="secondLast?.template"
-					[ngTemplateOutlet]="secondLast?.template"
-					[ngTemplateOutletContext]="{ $implicit: secondLast }">
-				</ng-template>
-			</cds-breadcrumb-item>
-			<cds-breadcrumb-item
-				[href]="last?.href"
-				[route]="last?.route"
-				[routeExtras]="last?.routeExtras"
-				[current]="last?.current"
-				[ariaCurrent]="last?.ariaCurrent"
-				(navigation)="navigation.emit($event)">
-				<ng-container *ngIf="!last?.template">{{last?.content}}</ng-container>
-				<ng-template
-					*ngIf="last?.template"
-					[ngTemplateOutlet]="last?.template"
-					[ngTemplateOutletContext]="{ $implicit: last }">
-				</ng-template>
-			</cds-breadcrumb-item>
-		</ng-template>
-	</nav>`
+		<nav #nav class="cds--breadcrumb"
+			[ngClass]="{
+				'cds--skeleton' : skeleton,
+				'cds--breadcrumb--no-trailing-slash' : noTrailingSlash
+			}"
+			[attr.aria-label]="ariaLabel">
+			@if (shouldShowContent) {
+				<ng-content />
+			}
+			@if (shouldShowOverflow) {
+				<cds-breadcrumb-item
+					[href]="first?.href"
+					[route]="first?.route"
+					[routeExtras]="first?.routeExtras"
+					[current]="first?.current"
+					[ariaCurrent]="first?.ariaCurrent"
+					(navigation)="navigation.emit($event)">
+					@if (first?.template) {
+						<ng-template [ngTemplateOutlet]="first?.template" [ngTemplateOutletContext]="{ $implicit: first }" />
+					} @else {
+						{{first?.content}}
+					}
+				</cds-breadcrumb-item>
+				<cds-breadcrumb-item>
+					<ng-template #overflowMenuTrigger>
+						<svg class="cds--overflow-menu__icon" cdsIcon="overflow-menu--horizontal" size="16"></svg>
+					</ng-template>
+					<cds-overflow-menu
+						[customTrigger]="overflowMenuTrigger"
+						triggerClass="cds--btn--icon-only"
+						[description]="description"
+						[autoAlign]="autoAlign">
+						@for (item of overflowItems; track item) {
+							<li class="cds--overflow-menu-options__option">
+								<a class="cds--overflow-menu-options__btn"
+									href="{{item?.href}}"
+									(click)="navigate($event, item)"
+									style="text-decoration: none;">
+									@if (item?.template) {
+										<ng-template [ngTemplateOutlet]="item?.template" [ngTemplateOutletContext]="{ $implicit: item }" />
+									} @else {
+										{{item?.content}}
+									}
+								</a>
+							</li>
+						}
+					</cds-overflow-menu>
+				</cds-breadcrumb-item>
+				<cds-breadcrumb-item
+					[href]="secondLast?.href"
+					[route]="secondLast?.route"
+					[routeExtras]="secondLast?.routeExtras"
+					[current]="secondLast?.current"
+					[ariaCurrent]="secondLast?.ariaCurrent"
+					(navigation)="navigation.emit($event)">
+					@if (secondLast?.template) {
+						<ng-template [ngTemplateOutlet]="secondLast?.template" [ngTemplateOutletContext]="{ $implicit: secondLast }" />
+					} @else {
+						{{secondLast?.content}}
+					}
+				</cds-breadcrumb-item>
+				<cds-breadcrumb-item
+					[href]="last?.href"
+					[route]="last?.route"
+					[routeExtras]="last?.routeExtras"
+					[current]="last?.current"
+					[ariaCurrent]="last?.ariaCurrent"
+					(navigation)="navigation.emit($event)">
+					@if (last?.template) {
+						<ng-template [ngTemplateOutlet]="last?.template" [ngTemplateOutletContext]="{ $implicit: last }" />
+					} @else {
+						{{last?.content}}
+					}
+				</cds-breadcrumb-item>
+			} @else {
+				@for (item of items; track item) {
+					<cds-breadcrumb-item
+						[href]="item.href"
+						[route]="item.route"
+						[routeExtras]="item.routeExtras"
+						[current]="item.current"
+						[ariaCurrent]="item.ariaCurrent"
+						(navigation)="navigation.emit($event)">
+						@if (item.template) {
+							<ng-template [ngTemplateOutlet]="item.template" [ngTemplateOutletContext]="{ $implicit: item }" />
+						} @else {
+							{{item.content}}
+						}
+					</cds-breadcrumb-item>
+				}
+			}
+		</nav>
+	`
 })
 export class Breadcrumb implements AfterContentInit {
 	@ContentChildren(BreadcrumbItemComponent) children: QueryList<BreadcrumbItemComponent>;

diff --git a/src/button/button-set.component.ts b/src/button/button-set.component.ts
@@ -11,7 +11,7 @@ import { Component, HostBinding } from "@angular/core";
  */
 @Component({
 	selector: "cds-button-set, ibm-button-set",
-	template: "<ng-content></ng-content>"
+	template: "<ng-content />"
 })
 export class ButtonSet {
 	@HostBinding("class.cds--btn-set") buttonSetClass = true;

diff --git a/src/button/icon-button.component.ts b/src/button/icon-button.component.ts
@@ -50,7 +50,7 @@ import { ButtonSize, ButtonType } from "./button.types";
 			(click)="emitClickEvent($event)"
 			(focus)="focus.emit($event)"
 			(blur)="blur.emit($event)">
-			<ng-content></ng-content>
+			<ng-content />
 		</button>
 	</cds-tooltip>
 	`

diff --git a/src/checkbox/checkbox.component.ts b/src/checkbox/checkbox.component.ts
@@ -57,7 +57,7 @@ export enum CheckboxState {
 					'cds--skeleton' : skeleton
 				}">
 				<span [ngClass]="{'cds--visually-hidden' : hideLabel}" class="cds--checkbox-label-text">
-					<ng-content></ng-content>
+					<ng-content />
 				</span>
 			</label>
 		</div>