Merge pull request #99 from js-smart/development

feat(core): converts @inputs to signal inputs

package.json

@@ -27,6 +27,7 @@
     "@angular/platform-browser-dynamic": "^17.3.4",
     "@angular/router": "^17.3.4",
     "bootstrap": "^5.3.2",
+    "ngxtension": "3.2.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

projects/ngxsmart/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@js-smart/ngxsmart",
-	"version": "17.2.1",
+	"version": "17.3.0",
 	"peerDependencies": {
 		"@angular/common": "^17.0.0",
 		"@angular/core": "^17.0.0"

projects/ngxsmart/src/lib/components/alert/alert.component.html

@@ -1,9 +1,9 @@
-@if (isOpen) {
-	<div class="row {{ class }}">
+@if (open()) {
+	<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">
+			<div class="alert alert-{{ type() }} alert-dismissible alert_div" role="alert">
 				<ng-content></ng-content>
-				@if (dismissible) {
+				@if (dismissible()) {
 					<button (click)="closeAlert()" aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"></button>
 				}
 			</div>

projects/ngxsmart/src/lib/components/alert/alert.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, input, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -28,32 +28,37 @@ export class AlertComponent implements OnInit {
 	 *   8. light
 	 * </pre>
 	 */
-	@Input() type = 'info';
+	type = input('info');
 
 	/**
 	 *  Is alert visible or open
 	 */
-	@Input() isOpen = true;
+	isOpen = input(true);
+
+	/**
+	 *  Writable signal for isOpen
+	 */
+	open = signal(this.isOpen());
 
 	/**
 	 * If set, displays an inline “Close” button
 	 */
-	@Input() dismissible = true;
+	dismissible = input(true);
 
 	/**
 	 * If set, dismisses the alert after Dismiss Timeout
 	 */
-	@Input() dismissOnTimeout = true;
+	dismissOnTimeout = input(true);
 
 	/**
 	 * Number in milliseconds, after which alert will be closed. Default value is 5000 ms
 	 */
-	@Input() dismissTimeout = 5000;
+	dismissTimeout = input(5000);
 
 	/**
 	 * Additional classes to be added to the alert. This can be used to add custom styles to the alert
 	 */
-	@Input() class = '';
+	class = input('');
 
 	constructor(private cdr: ChangeDetectorRef) {}
 
@@ -66,11 +71,11 @@ export class AlertComponent implements OnInit {
 	ngOnInit(): void {
 		this.openAlert();
 
-		if (this.dismissOnTimeout) {
+		if (this.dismissOnTimeout()) {
 			setTimeout(() => {
 				this.closeAlert();
 				this.cdr.markForCheck();
-			}, this.dismissTimeout);
+			}, this.dismissTimeout());
 		}
 	}
 
@@ -81,10 +86,10 @@ export class AlertComponent implements OnInit {
 	 * @since 12.0.0
 	 */
 	closeAlert(): void {
-		if (!this.isOpen) {
+		if (!this.isOpen()) {
 			return;
 		}
-		this.isOpen = false;
+		this.open.set(false);
 	}
 
 	/**
@@ -94,6 +99,6 @@ export class AlertComponent implements OnInit {
 	 * @since 12.0.0
 	 */
 	private openAlert(): void {
-		this.isOpen = true;
+		this.open.set(true);
 	}
 }

projects/ngxsmart/src/lib/components/buttons/bs-link-button/bs-link-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
@@ -7,10 +7,11 @@ import { MatButtonModule } from '@angular/material/button';
 	selector: 'bs-link-button',
 	standalone: true,
 	imports: [CommonModule, MatButtonModule, MatIconModule],
+
 	template: `
 		<a class="btn text-primary" data-cy="bs-link-button" mat-button>
-			<mat-icon>{{ icon }}</mat-icon>
-			{{ label }}
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
 		</a>
 	`,
 	styleUrls: ['../../../../assets/app-buttons.css'],
@@ -19,10 +20,10 @@ export class BsLinkButtonComponent {
 	/**
 	 * Icon to display
 	 */
-	@Input() icon = 'search';
+	icon = input('search');
 
 	/**
 	 * If set, shows the label
 	 */
-	@Input() label = 'Edit';
+	label = input('Edit');
 }

projects/ngxsmart/src/lib/components/buttons/delete-button/delete-button.component.ts

@@ -1,20 +1,21 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 
 @Component({
 	selector: 'delete-button',
 	standalone: true,
 	imports: [MatButtonModule, MatIconModule],
+
 	template: `
-		<button [disabled]="disabled || loading" class="btn delete-button }}" mat-raised-button type="{{ type }}" data-cy="delete-button">
-			@if (loading) {
+		<button [disabled]="disabled() || loading()" class="btn delete-button }}" mat-raised-button type="{{ type() }}" data-cy="delete-button">
+			@if (loading()) {
 				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
 			}
-			@if (!loading) {
-				<mat-icon>{{ icon }}</mat-icon>
+			@if (!loading()) {
+				<mat-icon>{{ icon() }}</mat-icon>
 			}
-			{{ loading ? loadingLabel : label }}
+			{{ loading() ? loadingLabel() : label() }}
 		</button>
 	`,
 	styleUrls: ['../../../../assets/app-buttons.css'],
@@ -23,12 +24,12 @@ export class DeleteButtonComponent {
 	/**
 	 *  Is search in progress and loading the data
 	 */
-	@Input() loading: boolean | undefined = false;
+	loading = input<boolean>(false);
 
 	/**
 	 *  Is button disabled
 	 */
-	@Input() disabled: boolean | undefined = false;
+	disabled = input<boolean>(false);
 
 	/**
 	 * Type of the button. Following values are supported. See BootStrap docs for more information
@@ -37,20 +38,20 @@ export class DeleteButtonComponent {
 	 *   2. submit
 	 * </pre>
 	 */
-	@Input() type = 'button';
+	type = input('button');
 
 	/**
 	 * If set, shows when Delete in Progress
 	 */
-	@Input() loadingLabel = 'Deleting...';
+	loadingLabel = input('Deleting...');
 
 	/**
 	 * If set, shows when Delete is not in progress
 	 */
-	@Input() label = 'Delete';
+	label = input('Delete');
 
 	/**
 	 * If set, shows the icon. Otherwise, shows delete icon
 	 */
-	@Input() icon = 'delete';
+	icon = input('delete');
 }

projects/ngxsmart/src/lib/components/buttons/edit-bs-button/edit-bs-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -8,10 +8,11 @@ import { EditSolidSvgComponent } from '../../../svg-icons/edit-solid-svg/edit-so
 	selector: 'edit-bs-button',
 	standalone: true,
 	imports: [CommonModule, MatButtonModule, MatIconModule, EditSolidSvgComponent],
+
 	template: `
-		<button class="text-primary" mat-button color="primary" data-cy="edit-bs-button" type="{{ type }}">
+		<button class="text-primary" mat-button color="primary" data-cy="edit-bs-button" type="{{ type() }}">
 			<edit-solid-svg></edit-solid-svg>
-			{{ label }}
+			{{ label() }}
 		</button>
 	`,
 	styleUrls: ['../../../../assets/app-buttons.css'],
@@ -25,10 +26,10 @@ export class EditBsButtonComponent {
 	 *   2. submit
 	 * </pre>
 	 */
-	@Input() type = 'button';
+	type = input('button');
 
 	/**
 	 * If set, shows the label
 	 */
-	@Input() label = 'Edit';
+	label = input('Edit');
 }

projects/ngxsmart/src/lib/components/buttons/edit-button/edit-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
@@ -7,10 +7,11 @@ import { MatButtonModule } from '@angular/material/button';
 	selector: 'edit-button',
 	standalone: true,
 	imports: [CommonModule, MatButtonModule, MatIconModule],
+
 	template: `
-		<button class="primary-button" mat-raised-button type="{{ type }}" data-cy="edit-button">
-			<mat-icon>{{ icon }}</mat-icon>
-			{{ label }}
+		<button class="primary-button" mat-raised-button type="{{ type() }}" data-cy="edit-button">
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
 		</button>
 	`,
 	styleUrls: ['../../../../assets/app-buttons.css'],
@@ -24,15 +25,15 @@ export class EditButtonComponent {
 	 *   2. submit
 	 * </pre>
 	 */
-	@Input() type = 'button';
+	type = input('button');
 
 	/**
 	 * If set, shows material icon
 	 */
-	@Input() icon = 'edit';
+	icon = input('edit');
 
 	/**
 	 * If set, shows the label
 	 */
-	@Input() label = 'Edit';
+	label = input('Edit');
 }

projects/ngxsmart/src/lib/components/buttons/edit-svg-icon-button/edit-svg-icon-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { EditSolidSvgComponent } from '../../../svg-icons/edit-solid-svg/edit-solid-svg.component';
@@ -7,10 +7,11 @@ import { EditSolidSvgComponent } from '../../../svg-icons/edit-solid-svg/edit-so
 	selector: 'edit-svg-icon-button',
 	standalone: true,
 	imports: [CommonModule, MatButtonModule, EditSolidSvgComponent],
+
 	template: `
-		<button class="primary-button" mat-raised-button type="{{ type }}" data-cy="edit-svg-icon-button">
+		<button class="primary-button" mat-raised-button type="{{ type() }}" data-cy="edit-svg-icon-button">
 			<edit-solid-svg></edit-solid-svg>
-			{{ label }}
+			{{ label() }}
 		</button>
 	`,
 	styleUrls: ['../../../../assets/app-buttons.css'],
@@ -24,15 +25,15 @@ export class EditSvgIconButtonComponent {
 	 *   2. submit
 	 * </pre>
 	 */
-	@Input() type = 'button';
+	type = input('button');
 
 	/**
 	 * If set, shows material icon
 	 */
-	@Input() icon = 'edit';
+	icon = input('edit');
 
 	/**
 	 * If set, shows the label on the button
 	 */
-	@Input() label = 'Edit';
+	label = input('Edit');
 }

projects/ngxsmart/src/lib/components/buttons/manage-button/manage-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -7,10 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 	selector: 'manage-button',
 	standalone: true,
 	imports: [CommonModule, MatButtonModule, MatIconModule],
+
 	template: `
-		<button type="{{ type }}" class="mr-3 btn btn-secondary secondary-button" mat-raised-button data-cy="manage-button">
-			<mat-icon>{{ icon }}</mat-icon>
-			{{ label }}
+		<button type="{{ type() }}" class="mr-3 btn btn-secondary secondary-button" mat-raised-button data-cy="manage-button">
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
 		</button>
 	`,
 	styleUrls: ['../../../../assets/app-buttons.css'],
@@ -19,15 +20,15 @@ export class ManageButtonComponent {
 	/**
 	 * If set, shows when search is not in progress
 	 */
-	@Input() label = 'Manage';
+	label = input('Manage');
 
 	/**
 	 * If set, shows material icon
 	 */
-	@Input() icon = 'settings';
+	icon = input('settings');
 
 	/**
 	 * If set, shows button type. Defaults to 'button'. Other options are 'submit' and 'reset'
 	 */
-	@Input() type = 'button';
+	type = input('button');
 }