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

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

@@ -0,0 +1,43 @@
+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: 'primary-button',
+	imports: [MatButton, MatIcon],
+	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]="'primary-button'">
+			@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'],
+})
+export class PrimaryButtonComponent extends BaseButtonComponent {
+	override loadingLabel = input('Saving...');
+	override label = input('Save');
+	override icon = input('save');
+	override showIcon = input(false);
+	override classes = input('btn-primary primary-button');
+
+	constructor() {
+		super();
+	}
+}

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

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

package/src/lib/components/buttons/save-primary-button/save-primary-button.component.ts

@@ -0,0 +1,43 @@
+import { Component, input } from '@angular/core';
+import { BaseButtonComponent } from '../base-button/base-button.component';
+
+import { MatIcon } from '@angular/material/icon';
+import { MatButton } from '@angular/material/button';
+
+@Component({
+	selector: 'save-primary-button',
+	imports: [MatButton, MatIcon],
+	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]="'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'],
+})
+export class SavePrimaryButtonComponent extends BaseButtonComponent {
+	override loadingLabel = input('Saving...');
+	override label = input('Save');
+	override icon = input('save');
+	override classes = input('btn-primary primary-button');
+
+	constructor() {
+		super();
+	}
+}

package/src/lib/components/buttons/save-primary-button/save-primary-button.directive.ts

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

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

@@ -0,0 +1,41 @@
+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: 'search-button',
+	imports: [MatButtonModule, MatIconModule],
+	template: `
+		<button
+			class="btn btn-primary primary-button {{ loading() || disabled() ? 'disabled' : '' }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			mat-raised-button
+			type="{{ type() }}"
+			data-cy="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'],
+})
+export class SearchButtonComponent extends BaseButtonComponent {
+	override loadingLabel = input('Searching...');
+	override label = input('Search');
+	override icon = input('search');
+	override classes = input('btn-primary primary-button');
+
+	constructor() {
+		super();
+	}
+}

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

@@ -0,0 +1,41 @@
+import { Component, input } from '@angular/core';
+import { BaseButtonComponent } from '../base-button/base-button.component';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+	selector: 'success-button',
+	imports: [MatButton, MatIcon],
+	template: `
+		<button
+			mat-raised-button
+			class="btn {{ classes() }}"
+			(click)="onClick.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'success-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>
+	`,
+})
+export class SuccessButtonComponent extends BaseButtonComponent {
+	override loadingLabel = input('Updating...');
+	override label = input('Update');
+	override icon = input('save');
+	override classes = input('success-button');
+
+	constructor() {
+		super();
+	}
+}

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

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

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

@@ -0,0 +1,32 @@
+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: 'view-button',
+	imports: [MatButton, MatIcon],
+	template: `
+		<button
+			color="primary"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			mat-button>
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</button>
+	`,
+	styleUrls: ['../../../../assets/app-buttons.css'],
+})
+export class ViewButtonComponent extends BaseButtonComponent {
+	override label = input('View');
+	override icon = input('visibility');
+
+	constructor() {
+		super();
+	}
+}

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

@@ -0,0 +1,14 @@
+import { Directive, input } from '@angular/core';
+import { BaseButtonDirective } from '../base-button/base-button.directive';
+
+@Directive({
+	selector: '[viewButton]',
+})
+export class ViewButtonDirective extends BaseButtonDirective {
+	override icon = input<string>('visibility');
+	override loadingLabel = input<string>('Loading...');
+
+	constructor() {
+		super();
+	}
+}

package/src/lib/components/buttons/view-primary-button/view-primary-button.component.ts

@@ -0,0 +1,37 @@
+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: 'view-primary-button',
+	imports: [MatButton, MatIcon],
+	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()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'view-button'">
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</button>
+	`,
+	styleUrls: ['../../../../assets/app-buttons.css'],
+})
+export class ViewPrimaryButtonComponent extends BaseButtonComponent {
+	override label = input('View');
+	override icon = input('visibility');
+	override classes = input('btn-primary primary-button');
+
+	constructor() {
+		super();
+	}
+}

package/src/lib/components/buttons/view-primary-button/view-primary-button.directive.ts

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

package/src/lib/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,56 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+
+@Component({
+	selector: 'app-confirm-dialog',
+	imports: [MatButtonModule, MatDividerModule, MatDialogModule],
+	template: `
+		<div class="mat-dialog-title" style="text-align: center">
+			<h3 class="m-3 mat-headline-5	">{{ title }}</h3>
+		</div>
+
+		<mat-divider></mat-divider>
+		<div mat-dialog-content style="margin: 20px">
+			<p>{{ message }}</p>
+		</div>
+
+		<div align="end" class="modal-footer" mat-dialog-actions>
+			<button (click)="onDismiss()" mat-raised-button>No</button>
+			<button (click)="onConfirm()" class="primary-button" mat-raised-button>Yes</button>
+		</div>
+	`,
+	styles: [],
+})
+export class ConfirmDialogComponent {
+	title: string;
+	message: string;
+
+	constructor(
+		@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData,
+		public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+	) {
+		// Update view with given values
+		this.title = data.title;
+		this.message = data.message;
+	}
+
+	onDismiss() {
+		// Close the dialog, return true
+		this.dialogRef.close(false);
+	}
+
+	onConfirm() {
+		// Close the dialog, return true
+		this.dialogRef.close(true);
+	}
+}
+
+/**
+ * Class to represent confirm dialog model.
+ */
+export interface ConfirmDialogData {
+	title: string;
+	message: string;
+}

package/src/lib/components/ngx-spinner/ngx-spinner.component.css

@@ -0,0 +1,169 @@
+/*!
+ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
+ * Copyright 2015 Daniel Cardoso <@DanielCardoso>
+ * Licensed under MIT
+ */
+.la-ball-clip-rotate,
+.la-ball-clip-rotate > div {
+	position: relative;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.la-ball-clip-rotate {
+	display: block;
+	font-size: 0;
+	color: #fff;
+}
+
+.la-ball-clip-rotate.la-dark {
+	color: #333;
+}
+
+.la-ball-clip-rotate > div {
+	display: inline-block;
+	float: none;
+	background-color: currentColor;
+	border: 0 solid currentColor;
+}
+
+.la-ball-clip-rotate {
+	width: 32px;
+	height: 32px;
+}
+
+.la-ball-clip-rotate > div {
+	width: 32px;
+	height: 32px;
+	background: transparent;
+	border-width: 2px;
+	border-bottom-color: transparent;
+	border-radius: 100%;
+	-webkit-animation: ball-clip-rotate 0.75s linear infinite;
+	-moz-animation: ball-clip-rotate 0.75s linear infinite;
+	-o-animation: ball-clip-rotate 0.75s linear infinite;
+	animation: ball-clip-rotate 0.75s linear infinite;
+}
+
+.la-ball-clip-rotate.la-sm {
+	width: 16px;
+	height: 16px;
+}
+
+.la-ball-clip-rotate.la-sm > div {
+	width: 16px;
+	height: 16px;
+	border-width: 1px;
+}
+
+.la-ball-clip-rotate.la-2x {
+	width: 64px;
+	height: 64px;
+}
+
+.la-ball-clip-rotate.la-2x > div {
+	width: 64px;
+	height: 64px;
+	border-width: 4px;
+}
+
+.la-ball-clip-rotate.la-3x {
+	width: 96px;
+	height: 96px;
+}
+
+.la-ball-clip-rotate.la-3x > div {
+	width: 96px;
+	height: 96px;
+	border-width: 6px;
+}
+
+@-webkit-keyframes ball-clip-rotate {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	50% {
+		-webkit-transform: rotate(180deg);
+		transform: rotate(180deg);
+	}
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+@-moz-keyframes ball-clip-rotate {
+	0% {
+		-moz-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	50% {
+		-moz-transform: rotate(180deg);
+		transform: rotate(180deg);
+	}
+	100% {
+		-moz-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+@-o-keyframes ball-clip-rotate {
+	0% {
+		-o-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	50% {
+		-o-transform: rotate(180deg);
+		transform: rotate(180deg);
+	}
+	100% {
+		-o-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes ball-clip-rotate {
+	0% {
+		-webkit-transform: rotate(0deg);
+		-moz-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	50% {
+		-webkit-transform: rotate(180deg);
+		-moz-transform: rotate(180deg);
+		-o-transform: rotate(180deg);
+		transform: rotate(180deg);
+	}
+	100% {
+		-webkit-transform: rotate(360deg);
+		-moz-transform: rotate(360deg);
+		-o-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+.ngx-spinner-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.ngx-spinner-overlay > div:not(.loading-text) {
+	top: 50%;
+	left: 50%;
+	margin: 0;
+	position: absolute;
+	transform: translate(-50%, -50%);
+}
+
+.loading-text {
+	position: absolute;
+	top: 60%;
+	left: 50%;
+	transform: translate(-50%, -60%);
+}

package/src/lib/components/ngx-spinner/ngx-spinner.component.html

@@ -0,0 +1,24 @@
+@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>
+}