@js-smart/ng-kit 20.6.0 → 20.6.2-beta.1

package/src/lib/components/buttons/base-button/base-button.component.ts

@@ -0,0 +1,86 @@
+import { Component, input, output } from '@angular/core';
+
+@Component({
+	standalone: true,
+	template: ``,
+})
+export class BaseButtonComponent {
+	/**
+	 *  Is search in progress and loading the data
+	 */
+	loading = input(false, { transform: (value: boolean | undefined) => value ?? false });
+
+	/**
+	 *  Is button disabled
+	 */
+	disabled = input<boolean>(false);
+
+	/**
+	 * Type of the button. Following values are supported. See BootStrap docs for more information
+	 * <pre>
+	 *   1. button
+	 *   2. submit
+	 * </pre>
+	 */
+	type = input('button');
+
+	/**
+	 * If set, shows when action in Progress
+	 */
+	loadingLabel = input('Saving...');
+
+	/**
+	 * If set, shows when Delete is not in progress
+	 */
+	label = input('Save');
+
+	/**
+	 * If set, shows the icon. Otherwise, shows delete icon
+	 */
+	icon = input('save');
+
+	/**
+	 * If set, shows material icon otherwise hides the icons
+	 */
+	showIcon = input(true);
+
+	/**
+	 * If set, sets the style of the button
+	 */
+	style = input<any | null | undefined>();
+
+	/**
+	 * If set, sets the class of the button
+	 */
+	classes = input('btn');
+
+	/**
+	 * If set, sets the data-cy attribute for the button
+	 */
+	dataCy = input('save-button');
+
+	/**
+	 *  Output event when button is clicked
+	 */
+	onClick = output<MouseEvent>();
+
+	/**
+	 *  Output event when button is focused
+	 */
+	onFocus = output<FocusEvent>();
+
+	/**
+	 * Output event when button is blurred
+	 */
+	onBlur = output<FocusEvent>();
+
+	/**
+	 *  Output event when key is pressed
+	 */
+	onKeyDown = output<KeyboardEvent>();
+
+	/**
+	 *  Output event when key is up
+	 */
+	onKeyUp = output<KeyboardEvent>();
+}

package/src/lib/components/buttons/base-button/base-button.directive.ts

@@ -0,0 +1,87 @@
+import { Directive, DOCUMENT, effect, ElementRef, inject, input, OnInit, signal } from '@angular/core';
+
+@Directive()
+export abstract class BaseButtonDirective implements OnInit {
+	icon = input<string>('');
+	loadingLabel = input<string>('Loading...');
+	loading = input<boolean>(false);
+	elementRef = inject(ElementRef);
+	document = inject(DOCUMENT);
+
+	protected originalText = signal('');
+	protected iconSpan = signal<HTMLElement | null>(null);
+
+	constructor() {
+		this.elementRef.nativeElement.classList.add('btn');
+
+		effect(() => {
+			this.updateContent();
+		});
+	}
+
+	ngOnInit(): void {
+		// Capture original text before creating icon
+		this.originalText.set(this.elementRef.nativeElement.textContent?.trim() || 'Button');
+
+		// Create icon after capturing text
+		this.createIcon();
+	}
+
+	/**
+	 * Create icon element if icon name is provided
+	 */
+	protected createIcon(): void {
+		if (this.icon()) {
+			const iconElement = this.document.createElement('mat-icon');
+			iconElement.classList.add('mat-icon', 'material-icons', 'pe-2');
+			iconElement.textContent = this.icon();
+			this.iconSpan.set(iconElement);
+		}
+	}
+
+	/**
+	 * Update content of the button
+	 */
+	protected updateContent(): void {
+		const element = this.elementRef.nativeElement;
+		element.innerHTML = '';
+
+		if (this.loading()) {
+			this.showLoadingState(element);
+		} else {
+			this.showNormalState(element);
+		}
+	}
+
+	/**
+	 * Show loading state. Add spinner and loadingLabel text
+	 */
+	protected showLoadingState(element: HTMLElement): void {
+		// Create a new span element
+		const newSpan = this.document.createElement('span');
+
+		// Set its text content
+		newSpan.classList.add('spinner-border', 'spinner-border-sm', 'me-2');
+		newSpan.setAttribute('role', 'status');
+
+		// Append the new element to the host element
+		element.appendChild(newSpan);
+		element.appendChild(this.document.createTextNode(this.loadingLabel()));
+		element.setAttribute('disabled', 'true');
+	}
+
+	/**
+	 * Show normal state. Add icon and original text
+	 */
+	protected showNormalState(element: HTMLElement): void {
+		// Add icon and original text
+		const iconElement = this.iconSpan();
+		if (iconElement) {
+			element.appendChild(iconElement);
+		}
+
+		// Append text node instead of setting textContent (which overwrites the icon)
+		element.appendChild(this.document.createTextNode(this.originalText()));
+		element.removeAttribute('disabled');
+	}
+}

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

@@ -0,0 +1,37 @@
+import { Component, input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatAnchor } from '@angular/material/button';
+import { BaseButtonComponent } from '../base-button/base-button.component';
+
+@Component({
+	selector: 'bs-link-button',
+	imports: [MatIcon, MatAnchor],
+	template: `
+		<a
+			type="{{ type() }}"
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'bs-link-button'"
+			mat-button>
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</a>
+	`,
+	styleUrls: ['../../../../assets/app-buttons.css'],
+})
+export class BsLinkButtonComponent extends BaseButtonComponent {
+	override label = input('Edit');
+	override icon = input('search');
+	override classes = input('btn text-primary');
+
+	constructor() {
+		super();
+	}
+}

package/src/lib/components/buttons/bs-link-button/bs-link-button.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, DOCUMENT, effect, ElementRef, inject, input } from '@angular/core';
+
+@Directive({
+	selector: '[bsLinkButton]',
+})
+export class BsLinkButtonDirective {
+	icon = input<string>('search');
+	elementRef = inject(ElementRef);
+	document = inject(DOCUMENT);
+
+	constructor() {
+		this.elementRef.nativeElement.classList.add('btn', 'text-primary');
+
+		effect(() => {
+			this.updateContent();
+		});
+	}
+
+	private updateContent(): void {
+		// if icon present, add material-icons class and set text content
+		if (this.icon()) {
+			const iconSpan = this.document.createElement('span');
+			iconSpan.classList.add('material-icons', 'pe-2');
+			iconSpan.textContent = this.icon();
+			this.elementRef.nativeElement.appendChild(iconSpan);
+		}
+	}
+}

package/src/lib/components/buttons/close-button/close-button.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, ElementRef, inject } from '@angular/core';
+
+@Directive({
+	selector: '[closeButton]',
+})
+export class CloseButtonDirective {
+	elementRef = inject(ElementRef);
+
+	constructor() {
+		this.elementRef.nativeElement.classList.add('secondary-button');
+	}
+}

package/src/lib/components/buttons/delete-button/delete-button.component.ts

@@ -0,0 +1,42 @@
+import { Component, input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { BaseButtonComponent } from '../base-button/base-button.component';
+
+@Component({
+	selector: 'delete-button',
+	imports: [MatButtonModule, MatIconModule],
+	template: `
+		<button
+			mat-raised-button
+			class="btn {{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.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>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</button>
+	`,
+	styleUrls: ['../../../../assets/app-buttons.css'],
+})
+export class DeleteButtonComponent extends BaseButtonComponent {
+	override loadingLabel = input('Deleting...');
+	override label = input('Delete');
+	override icon = input('delete');
+	override classes = input('delete-button');
+
+	constructor() {
+		super();
+	}
+}

package/src/lib/components/buttons/delete-button/delete-button.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, input } from '@angular/core';
+import { BaseButtonDirective } from '../base-button/base-button.directive';
+
+@Directive({
+	selector: '[deleteButton]',
+})
+export class DeleteButtonDirective extends BaseButtonDirective {
+	override icon = input<string>('delete');
+	override loadingLabel = input<string>('Deleting...');
+
+	constructor() {
+		super();
+		this.elementRef.nativeElement.classList.add('delete-button');
+	}
+}

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

@@ -0,0 +1,39 @@
+import { Component, input } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { EditSolidSvgComponent } from '../../../svg-icons/edit-solid-svg/edit-solid-svg.component';
+import { BaseButtonComponent } from '../base-button/base-button.component';
+
+@Component({
+	selector: 'edit-bs-button',
+	imports: [MatButtonModule, MatIconModule, EditSolidSvgComponent],
+	template: `
+		<button
+			color="primary"
+			type="{{ type() }}"
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'edit-bs-button'"
+			mat-button>
+			<edit-solid-svg></edit-solid-svg>
+			{{ label() }}
+		</button>
+	`,
+	styleUrls: ['../../../../assets/app-buttons.css'],
+})
+export class EditBsButtonComponent extends BaseButtonComponent {
+	override label = input('Edit');
+	override classes = input('text-primary');
+
+	constructor() {
+		super();
+	}
+}

package/src/lib/components/buttons/edit-bs-button/edit-bs-button.directive.ts

@@ -0,0 +1,37 @@
+import { ComponentRef, Directive, DOCUMENT, ElementRef, inject, OnInit, signal, ViewContainerRef } from '@angular/core';
+import { EditSolidSvgComponent } from '../../../svg-icons/edit-solid-svg/edit-solid-svg.component';
+
+@Directive({
+	selector: '[editBsButton]',
+})
+export class EditBsButtonDirective implements OnInit {
+	elementRef = inject(ElementRef);
+	viewContainerRef = inject(ViewContainerRef);
+	document = inject(DOCUMENT);
+	protected originalText = signal('');
+	protected iconComponentRef = signal<ComponentRef<EditSolidSvgComponent> | null>(null);
+
+	ngOnInit(): void {
+		// Add the btn class first
+		this.elementRef.nativeElement.classList.add('btn', 'text-primary');
+
+		// Capture original text before creating icon
+		this.originalText.set(this.elementRef.nativeElement.textContent?.trim() || 'Edit');
+
+		// Update content to show icon and text
+		this.updateContent();
+	}
+
+	private updateContent(): void {
+		// Create the EditSolidSvgComponent properly using Angular's component system
+		const componentRef = this.viewContainerRef.createComponent(EditSolidSvgComponent);
+		this.iconComponentRef.set(componentRef);
+
+		// Clear the original content and append the icon component
+		this.elementRef.nativeElement.textContent = '';
+		this.elementRef.nativeElement.appendChild(componentRef.location.nativeElement);
+
+		// Add text after the icon
+		this.elementRef.nativeElement.appendChild(this.document.createTextNode(' ' + this.originalText()));
+	}
+}

package/src/lib/components/buttons/edit-button/edit-button.component.ts

@@ -0,0 +1,37 @@
+import { Component, input } from '@angular/core';
+
+import { MatIcon } from '@angular/material/icon';
+import { MatButton } from '@angular/material/button';
+import { BaseButtonComponent } from '../base-button/base-button.component';
+
+@Component({
+	selector: 'edit-button',
+	imports: [MatButton, MatIcon],
+	template: `
+		<button
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'edit-button'"
+			mat-raised-button>
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</button>
+	`,
+	styleUrls: ['../../../../assets/app-buttons.css'],
+})
+export class EditButtonComponent extends BaseButtonComponent {
+	override label = input('Edit');
+	override icon = input('edit');
+	override classes = input('primary-button');
+
+	constructor() {
+		super();
+	}
+}

package/src/lib/components/buttons/edit-button/edit-button.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, input } from '@angular/core';
+import { BaseButtonDirective } from '../base-button/base-button.directive';
+
+@Directive({
+	selector: '[editButton]',
+})
+export class EditButtonDirective extends BaseButtonDirective {
+	override icon = input<string>('edit');
+	override loadingLabel = input<string>('Editing...');
+
+	constructor() {
+		super();
+		this.elementRef.nativeElement.classList.add('primary-button');
+	}
+}

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

@@ -0,0 +1,37 @@
+import { Component, input } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { EditSolidSvgComponent } from '../../../svg-icons/edit-solid-svg/edit-solid-svg.component';
+import { BaseButtonComponent } from '../base-button/base-button.component';
+
+@Component({
+	selector: 'edit-svg-icon-button',
+	imports: [MatButton, EditSolidSvgComponent],
+	template: `
+		<button
+			type="{{ type() }}"
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'edit-svg-icon-button'"
+			mat-raised-button>
+			<edit-solid-svg></edit-solid-svg>
+			{{ label() }}
+		</button>
+	`,
+	styleUrls: ['../../../../assets/app-buttons.css'],
+})
+export class EditSvgIconButtonComponent extends BaseButtonComponent {
+	override label = input('Edit');
+	override icon = input('edit');
+	override classes = input('primary-button');
+
+	constructor() {
+		super();
+	}
+}

package/src/lib/components/buttons/edit-svg-icon-button/edit-svg-icon-button.directive.ts

@@ -0,0 +1,39 @@
+import { ComponentRef, Directive, DOCUMENT, ElementRef, inject, OnInit, signal, ViewContainerRef } from '@angular/core';
+import { EditSolidSvgComponent } from '../../../svg-icons/edit-solid-svg/edit-solid-svg.component';
+
+@Directive({
+	selector: '[editSvgIconButton]',
+})
+export class EditSvgIconButtonDirective implements OnInit {
+	elementRef = inject(ElementRef);
+	viewContainerRef = inject(ViewContainerRef);
+	document = inject(DOCUMENT);
+
+	protected originalText = signal('');
+	protected iconComponentRef = signal<ComponentRef<EditSolidSvgComponent> | null>(null);
+
+	ngOnInit(): void {
+		// Add Material Design button classes
+		this.elementRef.nativeElement.classList.add('mat-raised-button', 'primary-button');
+
+		// Capture original text before creating icon
+		this.originalText.set(this.elementRef.nativeElement.textContent?.trim() || 'Edit');
+
+		// Set data-cy attribute for testing
+		this.elementRef.nativeElement.setAttribute('data-cy', 'edit-svg-icon-button');
+
+		// Update content to show icon and text
+		this.updateContent();
+	}
+
+	private updateContent(): void {
+		// Create the EditSolidSvgComponent properly using Angular's component system
+		const componentRef = this.viewContainerRef.createComponent(EditSolidSvgComponent);
+		this.iconComponentRef.set(componentRef);
+
+		// Clear the original content and append the icon component
+		this.elementRef.nativeElement.textContent = '';
+		this.elementRef.nativeElement.appendChild(componentRef.location.nativeElement);
+		this.elementRef.nativeElement.appendChild(this.document.createTextNode(' ' + this.originalText()));
+	}
+}

package/src/lib/components/buttons/excel-export-button/excel-export-button.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+	selector: 'excel-export-button',
+	imports: [MatButtonModule],
+	template: ` <button class="excel-export-button" mat-raised-button type="button" data-cy="excel-export-button">Excel</button> `,
+	styleUrls: ['../../../../assets/app-buttons.css'],
+	styles: [
+		`
+			.excel-export-button {
+				margin-left: 20px !important;
+				margin-right: 20px !important;
+				width: 100px;
+				color: white !important;
+				background-color: darkgreen !important;
+				border-radius: 24px !important;
+			}
+		`,
+	],
+})
+export class ExcelExportButtonComponent {}

package/src/lib/components/buttons/excel-export-button/excel-export-button.directive.ts

@@ -0,0 +1,23 @@
+import { Directive } from '@angular/core';
+import { BaseButtonDirective } from '../base-button/base-button.directive';
+
+@Directive({
+	selector: '[excelExportButton]',
+})
+export class ExcelExportButtonDirective extends BaseButtonDirective {
+	constructor() {
+		super();
+		const styles = [
+			{ property: 'margin-left', value: '20px' },
+			{ property: 'margin-right', value: '20px' },
+			{ property: 'width', value: '100px' },
+			{ property: 'color', value: 'white' },
+			{ property: 'background-color', value: 'darkgreen' },
+			{ property: 'border-radius', value: '24px' },
+		];
+
+		styles.forEach((style) => {
+			this.elementRef.nativeElement.style[style.property] = style.value;
+		});
+	}
+}

package/src/lib/components/buttons/manage-button/manage-button.component.ts

@@ -0,0 +1,35 @@
+import { Component, input } from '@angular/core';
+
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { BaseButtonComponent } from '../base-button/base-button.component';
+
+@Component({
+	selector: 'manage-button',
+	imports: [MatButton, MatIcon],
+	template: `
+		<button
+			mat-raised-button
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'manage-button'">
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</button>
+	`,
+	styleUrls: ['../../../../assets/app-buttons.css'],
+})
+export class ManageButtonComponent extends BaseButtonComponent {
+	override label = input('Manage');
+	override icon = input('settings');
+	override classes = input('mr-3 btn btn-secondary secondary-button');
+
+	constructor() {
+		super();
+	}
+}

package/src/lib/components/buttons/manage-button/manage-button.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, input } from '@angular/core';
+import { BaseButtonDirective } from '../base-button/base-button.directive';
+
+@Directive({
+	selector: '[manageButton]',
+})
+export class ManageButtonDirective extends BaseButtonDirective {
+	override icon = input<string>('settings');
+
+	constructor() {
+		super();
+		this.elementRef.nativeElement.classList.add('mr-3');
+		this.elementRef.nativeElement.classList.add('secondary-button');
+	}
+}

package/src/lib/components/buttons/pdf-export-button/pdf-export-button.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+	selector: 'pdf-export-button',
+	imports: [MatButtonModule],
+	template: ` <button class="pdf-export-button" mat-raised-button type="button" data-cy="pdf-export-button">PDF</button> `,
+	styles: [
+		`
+			.pdf-export-button {
+				margin-left: 20px !important;
+				width: 100px;
+				color: white !important;
+				background-color: #a3071b !important;
+				border-radius: 24px !important;
+			}
+		`,
+	],
+})
+export class PdfExportButtonComponent {}

package/src/lib/components/buttons/pdf-export-button/pdf-export-button.directive.ts

@@ -0,0 +1,22 @@
+import { Directive } from '@angular/core';
+import { BaseButtonDirective } from '../base-button/base-button.directive';
+
+@Directive({
+	selector: '[pdfExportButton]',
+})
+export class PdfExportButtonDirective extends BaseButtonDirective {
+	constructor() {
+		super();
+		const styles = [
+			{ property: 'margin-left', value: '20px' },
+			{ property: 'width', value: '100px' },
+			{ property: 'color', value: 'white' },
+			{ property: 'background-color', value: '#a3071b' },
+			{ property: 'border-radius', value: '24px' },
+		];
+
+		styles.forEach((style) => {
+			this.elementRef.nativeElement.style[style.property] = style.value;
+		});
+	}
+}