refactor(core): moves *ng directives to new control flow syntax

js-smart · Nov 11, 2023 · 23c117c · 23c117c
2 parents 30e1fbb + a75ffbb
commit 23c117c
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 132 deletions.
diff --git a/projects/ngxsmart/src/lib/components/alert/alert.component.html b/projects/ngxsmart/src/lib/components/alert/alert.component.html
@@ -1,14 +1,17 @@
-<div *ngIf="isOpen" class="row {{class}}">
-	<div class="col-xs-12 col-sm-12 col-md-auto mx-auto">
-		<div class="alert alert-{{ type }} alert-dismissible alert_div" role="alert">
-			<ng-content></ng-content>
-			<button
-				(click)="closeAlert()"
-				*ngIf="dismissible"
-				aria-label="Close"
-				class="btn-close"
-				data-bs-dismiss="alert"
-				type="button"></button>
-		</div>
-	</div>
-</div>
+@if (isOpen) {
+  <div class="row {{class}}">
+    <div class="col-xs-12 col-sm-12 col-md-auto mx-auto">
+      <div class="alert alert-{{ type }} alert-dismissible alert_div" role="alert">
+        <ng-content></ng-content>
+        @if (dismissible) {
+          <button
+            (click)="closeAlert()"
+            aria-label="Close"
+            class="btn-close"
+            data-bs-dismiss="alert"
+            type="button"></button>
+        }
+      </div>
+    </div>
+  </div>
+}
diff --git a/projects/ngxsmart/src/lib/components/autocomplete/autocomplete.component.html b/projects/ngxsmart/src/lib/components/autocomplete/autocomplete.component.html
@@ -1,44 +1,49 @@
 <div [formGroup]="inputFormGroup">
-	<mat-form-field appearance="fill" class="{{ classes }}">
-		<mat-label>{{ label }}</mat-label>
-		<input
-			#inputAutoComplete
-			#trigger="matAutocompleteTrigger"
-			[matAutocomplete]="auto"
-			[placeholder]="placeHolder"
-			[required]="required"
-			formControlName="autocomplete"
-			matInput
-			type="text" />
+  <mat-form-field appearance="fill" class="{{ classes }}">
+    <mat-label>{{ label }}</mat-label>
+    <input
+      #inputAutoComplete
+      #trigger="matAutocompleteTrigger"
+      [matAutocomplete]="auto"
+      [placeholder]="placeHolder"
+      [required]="required"
+      formControlName="autocomplete"
+      matInput
+      type="text"/>
 
-		<div matSuffix style="display: flex">
-			<button
-				(click)="clearInput($event)"
-				*ngIf="inputFormGroup.get('autocomplete')?.value !== null && inputFormGroup.get('autocomplete')?.value !== ''"
-				aria-label="Clear"
-				mat-icon-button
-				type="button">
-				<mat-icon>clear</mat-icon>
-			</button>
+    <div matSuffix style="display: flex">
+      @if (!!inputFormGroup.get('autocomplete')?.value) {
+        <button
+          (click)="clearInput($event)"
+          aria-label="Clear"
+          mat-icon-button
+          type="button">
+          <mat-icon>clear</mat-icon>
+        </button>
+      }
+      <button (click)="openOrClosePanel($event, trigger)" aria-label="Clear" mat-icon-button type="button">
+        <mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>
+      </button>
+    </div>
 
-			<button (click)="openOrClosePanel($event, trigger)" aria-label="Clear" mat-icon-button type="button">
-				<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>
-			</button>
-		</div>
+    <mat-autocomplete
+      #auto="matAutocomplete"
+      (closed)="arrowIconSubject.next('arrow_drop_down')"
+      (opened)="arrowIconSubject.next('arrow_drop_up')"
+      (optionSelected)="arrowIconSubject.next('arrow_drop_down')"
+      [displayWith]="displayFn">
+      @for (option of filteredOptions|async;track option[bindValue]) {
+        <mat-option
+          (onSelectionChange)="emitSelectedValue($event)"
+          [value]="option">
+          @if ((option | typeOf) === 'string') {
+            <ng-container>{{ option }}</ng-container>
+          }@else if ((option | typeOf) === 'object') {
+          <ng-container>{{ option[bindLabel] }}</ng-container>
+        }
+        </mat-option>
+      }
 
-		<mat-autocomplete
-			#auto="matAutocomplete"
-			(closed)="arrowIconSubject.next('arrow_drop_down')"
-			(opened)="arrowIconSubject.next('arrow_drop_up')"
-			(optionSelected)="arrowIconSubject.next('arrow_drop_down')"
-			[displayWith]="displayFn">
-			<mat-option
-				(onSelectionChange)="emitSelectedValue($event)"
-				*ngFor="let option of filteredOptions | async; trackBy: trackByFn"
-				[value]="option">
-				<ng-container *ngIf="(option | typeOf) === 'string'">{{ option }}</ng-container>
-				<ng-container *ngIf="(option | typeOf) === 'object'">{{ option[bindLabel] }}</ng-container>
-			</mat-option>
-		</mat-autocomplete>
-	</mat-form-field>
+    </mat-autocomplete>
+  </mat-form-field>
 </div>
diff --git a/projects/ngxsmart/src/lib/components/autocomplete/autocomplete.component.ts b/projects/ngxsmart/src/lib/components/autocomplete/autocomplete.component.ts
@@ -18,12 +18,12 @@ import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { map, startWith } from 'rxjs/operators';
 import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatOptionSelectionChange } from '@angular/material/core';
-import { CommonModule } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { TypeOfPipe } from '../../pipes/type-of.pipe';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { AsyncPipe } from '@angular/common';
 
 /**
  * Reusable Auto Complete component that extends MatAutoComplete to show Clear icon and Arrow buttons
@@ -35,14 +35,14 @@ import { MatIconModule } from '@angular/material/icon';
 	selector: 'autocomplete, lib-autocomplete',
 	standalone: true,
 	imports: [
-		CommonModule,
 		ReactiveFormsModule,
 		TypeOfPipe,
 		MatFormFieldModule,
 		MatAutocompleteModule,
 		MatInputModule,
 		MatButtonModule,
 		MatIconModule,
+		AsyncPipe,
 	],
 	templateUrl: './autocomplete.component.html',
 	changeDetection: ChangeDetectionStrategy.Default,
@@ -143,8 +143,8 @@ export class AutocompleteComponent implements OnInit, OnChanges, AfterContentChe
 						return typeof option === 'string'
 							? option?.toLowerCase().indexOf(propertyName.toLowerCase()) === 0
 							: option[this.bindLabel]?.toLowerCase().indexOf(propertyName.toLowerCase()) === 0;
-					}) ?? this.data?.slice()
-			)
+					}) ?? this.data?.slice(),
+			),
 		);
 	}
 
@@ -192,16 +192,6 @@ export class AutocompleteComponent implements OnInit, OnChanges, AfterContentChe
 		}
 	}
 
-	/**
-	 * Tracks autocomplete values by bindVale
-	 *
-	 * @author Pavan Kumar Jadda
-	 * @since 12.1.2
-	 */
-	trackByFn(index: number, item: any) {
-		return item[this.bindLabel]?.bindValue;
-	}
-
 	/**
 	 * Emit selected value
 	 * @param $event - Event emitted by autocomplete

diff --git a/projects/ngxsmart/src/lib/components/buttons/delete-button/delete-button.component.ts b/projects/ngxsmart/src/lib/components/buttons/delete-button/delete-button.component.ts
@@ -1,16 +1,18 @@
 import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 
 @Component({
 	selector: 'delete-button',
 	standalone: true,
-	imports: [CommonModule, MatButtonModule, MatIconModule],
+	imports: [MatButtonModule, MatIconModule],
 	template: `
 		<button class="btn delete-button {{ loading ? 'disabled' : '' }}" mat-raised-button type="{{ type }}" data-cy="delete-button">
-			<span *ngIf="loading" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
-			<mat-icon *ngIf="!loading">{{ icon }}</mat-icon>
+			@if(loading){
+			<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			} @if(!loading){
+			<mat-icon>{{ icon }}</mat-icon>
+			}
 			{{ loading ? loadingLabel : label }}
 		</button>
 	`,

diff --git a/projects/ngxsmart/src/lib/components/buttons/primary-button/primary-button.component.ts b/projects/ngxsmart/src/lib/components/buttons/primary-button/primary-button.component.ts
@@ -1,24 +1,26 @@
-import { Component, Input } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { MatButtonModule } from "@angular/material/button";
-import { MatIconModule } from "@angular/material/icon";
+import { Component, Input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
-	selector: "primary-button",
+	selector: 'primary-button',
 	standalone: true,
-	imports: [CommonModule, MatButtonModule, MatIconModule],
+	imports: [MatButtonModule, MatIconModule],
 	template: `
 		<button
 			class="btn btn-primary primary-button {{ loading || disabled ? 'disabled' : '' }}"
 			mat-raised-button
 			type="{{ type }}"
 			data-cy="primary-button">
-			<span *ngIf="loading" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
-			<mat-icon *ngIf="!loading && showIcon">{{ icon }}</mat-icon>
+			@if(loading){
+			<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			} @if(!loading && showIcon){
+			<mat-icon>{{ icon }}</mat-icon>
+			}
 			{{ loading ? loadingLabel : label }}
 		</button>
 	`,
-	styleUrls: ["../../../../assets/app-buttons.css"]
+	styleUrls: ['../../../../assets/app-buttons.css'],
 })
 export class PrimaryButtonComponent {
 	/**

diff --git a/.../ngxsmart/src/lib/components/buttons/save-primary-button/save-primary-button.component.ts b/.../ngxsmart/src/lib/components/buttons/save-primary-button/save-primary-button.component.ts
@@ -1,23 +1,23 @@
-import { Component, Input } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { MatIconModule } from "@angular/material/icon";
-import { MatButtonModule } from "@angular/material/button";
+import { Component, Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
-	selector: "save-primary-button",
+	selector: 'save-primary-button',
 	standalone: true,
-	imports: [CommonModule, MatButtonModule, MatIconModule],
-	template: `
-		<button
-			class="btn btn-primary primary-button {{ loading ? 'disabled' : '' }}"
-			mat-raised-button
-			type="{{ type }}"
-			data-cy="save-primary-button">
-		<span *ngIf="loading" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
-		<mat-icon *ngIf="!loading">{{ icon }}</mat-icon>
+	imports: [MatButtonModule, MatIconModule],
+	template: ` <button
+		class="btn btn-primary primary-button {{ loading ? 'disabled' : '' }}"
+		mat-raised-button
+		type="{{ type }}"
+		data-cy="save-primary-button">
+		@if(loading){<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>} @if(!loading){<mat-icon>{{
+			icon
+		}}</mat-icon
+		>}
 		{{ loading ? loadingLabel : label }}
 	</button>`,
-	styleUrls: ["../../../../assets/app-buttons.css"]
+	styleUrls: ['../../../../assets/app-buttons.css'],
 })
 export class SavePrimaryButtonComponent {
 	/**

diff --git a/projects/ngxsmart/src/lib/components/buttons/search-button/search-button.component.ts b/projects/ngxsmart/src/lib/components/buttons/search-button/search-button.component.ts
@@ -1,10 +1,10 @@
-import { Component, Input } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { MatIconModule } from "@angular/material/icon";
-import { MatButtonModule } from "@angular/material/button";
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
-	selector: "search-button",
+	selector: 'search-button',
 	standalone: true,
 	imports: [CommonModule, MatButtonModule, MatIconModule],
 	template: `
@@ -13,12 +13,15 @@ import { MatButtonModule } from "@angular/material/button";
 			mat-raised-button
 			type="{{ type }}"
 			data-cy="primary-button">
-			<span *ngIf="loading" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
-			<mat-icon *ngIf="!loading">search</mat-icon>
+			@if(loading){
+			<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			} @if(!loading){
+			<mat-icon>search</mat-icon>
+			}
 			{{ loading ? loadingLabel : label }}
 		</button>
 	`,
-	styleUrls: ["../../../../assets/app-buttons.css"]
+	styleUrls: ['../../../../assets/app-buttons.css'],
 })
 export class SearchButtonComponent {
 	/**

diff --git a/projects/ngxsmart/src/lib/components/buttons/success-button/success-button.component.ts b/projects/ngxsmart/src/lib/components/buttons/success-button/success-button.component.ts
@@ -1,20 +1,22 @@
 import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 
 @Component({
 	selector: 'success-button',
 	standalone: true,
-	imports: [CommonModule, MatButtonModule, MatIconModule],
+	imports: [MatButtonModule, MatIconModule],
 	template: `
 		<button
 			class="btn success-button {{ loading || disabled ? 'disabled' : '' }}"
 			mat-raised-button
 			type="{{ type }}"
 			data-cy="success-button">
-			<span *ngIf="loading" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
-			<mat-icon *ngIf="!loading">{{ icon }}</mat-icon>
+			@if(loading){
+			<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			} @if(!loading){
+			<mat-icon>{{ icon }}</mat-icon>
+			}
 			{{ loading ? loadingLabel : label }}
 		</button>
 	`,

diff --git a/projects/ngxsmart/src/lib/components/ngx-spinner/ngx-spinner.component.html b/projects/ngxsmart/src/lib/components/ngx-spinner/ngx-spinner.component.html
@@ -1,17 +1,24 @@
-<div
-	#overlay
-	*ngIf="spinner.show"
-	[@.disabled]="disableAnimation"
-	[@fadeIn]="'in'"
-	[style.background-color]="spinner.bdColor"
-	[style.position]="spinner.fullScreen ? 'fixed' : 'absolute'"
-	[style.z-index]="spinner.zIndex"
-	class="ngx-spinner-overlay">
-	<div *ngIf="!template" [class]="spinner.class" [style.color]="spinner.color">
-		<div *ngFor="let index of spinner.divArray"></div>
-	</div>
-	<div *ngIf="template" [innerHTML]="template | safeHtml"></div>
-	<div [style.z-index]="spinner.zIndex" class="loading-text">
-		<ng-content></ng-content>
-	</div>
-</div>
+@if(spinner.show){
+  <div
+    #overlay
+    [@.disabled]="disableAnimation"
+    [@fadeIn]="'in'"
+    [style.background-color]="spinner.bdColor"
+    [style.position]="spinner.fullScreen ? 'fixed' : 'absolute'"
+    [style.z-index]="spinner.zIndex"
+    class="ngx-spinner-overlay">
+    @if(spinner.show){
+      <div [class]="spinner.class" [style.color]="spinner.color">
+        @for( index of spinner.divArray;track index){
+          <div></div>
+        }
+      </div>
+    }
+    @if(template){
+      <div [innerHTML]="template | safeHtml"></div>
+    }
+    <div [style.z-index]="spinner.zIndex" class="loading-text">
+      <ng-content></ng-content>
+    </div>
+  </div>
+}
diff --git a/projects/ngxsmart/src/lib/components/ngx-spinner/ngx-spinner.component.ts b/projects/ngxsmart/src/lib/components/ngx-spinner/ngx-spinner.component.ts
@@ -4,13 +4,12 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DEFAULTS, LOADERS, NgxSpinner, PRIMARY_SPINNER, Size } from './ngx-spinner.enum';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { CommonModule } from '@angular/common';
 import { SafeHtmlPipe } from './safe-html.pipe';
 
 @Component({
 	selector: 'ngx-spinner',
 	standalone: true,
-	imports: [CommonModule, SafeHtmlPipe],
+	imports: [SafeHtmlPipe],
 	templateUrl: 'ngx-spinner.component.html',
 	styleUrls: ['ngx-spinner.component.css'],
 	animations: [