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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@js-smart/ng-kit",
-  "version": "20.6.2-beta.1",
+  "version": "20.6.2",
   "license": "MIT",
   "author": "Pavan Kumar Jadda",
   "private": false,
@@ -32,5 +32,16 @@
   "dependencies": {
     "tslib": "^2.8.1"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "module": "fesm2022/js-smart-ng-kit.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/js-smart-ng-kit.mjs"
+    }
+  }
 }

package/eslint.config.js

@@ -1,18 +0,0 @@
-// @ts-check
-const tseslint = require('typescript-eslint');
-const rootConfig = require('../../eslint.config.js');
-
-module.exports = tseslint.config(
-	...rootConfig,
-	{
-		files: ['**/*.ts'],
-		rules: {
-			'@typescript-eslint/no-explicit-any': 'error',
-			'@typescript-eslint/explicit-function-return-type': 'warn',
-		},
-	},
-	{
-		files: ['**/*.html'],
-		rules: { '@angular-eslint/template/no-negated-async': 'error' },
-	},
-);

package/karma.conf.js

@@ -1,35 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-	config.set({
-		basePath: '',
-		frameworks: ['jasmine', '@angular-devkit/build-angular'],
-		plugins: [
-			require('karma-jasmine'),
-			require('karma-chrome-launcher'),
-			require('karma-jasmine-html-reporter'),
-			require('karma-coverage'),
-			require('@angular-devkit/build-angular/plugins/karma'),
-		],
-		client: {
-			jasmine: {
-				// you can add configuration options for Jasmine here
-				// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-				// for example, you can disable the random execution with `random: false`
-				// or set a specific seed with `seed: 4321`
-			},
-		},
-		jasmineHtmlReporter: {
-			suppressAll: true, // removes the duplicated traces
-		},
-		coverageReporter: {
-			dir: require('path').join(__dirname, '../../coverage/ng-kit'),
-			subdir: '.',
-			reporters: [{ type: 'html' }, { type: 'text-summary' }],
-		},
-		reporters: ['progress', 'kjhtml'],
-		browsers: ['Chrome'],
-		restartOnFileChange: true,
-	});
-};

package/ng-package.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ng-kit",
-  "assets": [
-    "./assets",
-    "styles.scss"
-  ],
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/assets/app-buttons.css

@@ -1,33 +0,0 @@
-.primary-button,
-.primary-button:hover,
-.primary-button:active,
-.primary-button:visited {
-	color: white !important;
-	background-color: var(--primary-color) !important;
-}
-
-.secondary-button,
-.secondary-button:hover,
-.secondary-button:active,
-.secondary-button:visited {
-	color: white !important;
-	background-color: var(--secondary-color) !important;
-}
-
-/* Adds CSS for Success Button class */
-.success-button,
-.success-button:hover,
-.success-button:active,
-.success-button:visited {
-	color: white !important;
-	background-color: var(--success-color) !important;
-}
-
-/* Adds CSS for Delete Button class */
-.delete-button,
-.delete-button:hover,
-.delete-button:active,
-.success-button:visited {
-	color: white !important;
-	background-color: var(--delete-color) !important;
-}

package/src/assets/app-mat-snack-bar.css

@@ -1,89 +0,0 @@
-@import 'app-variables.css';
-
-/* Success Snack Bar Styles */
-.success-snackbar {
-	--mdc-snackbar-container-color: var(--success-color) !important;
-	--mat-mdc-snack-bar-button-color: var(--white-color) !important;
-}
-
-.success-snackbar .mdc-snackbar__surface {
-	background-color: var(--success-color) !important;
-	color: white !important;
-}
-
-.success-snackbar .mat-mdc-snack-bar-action {
-	color: var(--white-color) !important;
-}
-
-/* Error Snack Bar Styles */
-.error-snackbar {
-	--mdc-snackbar-container-color: var(--delete-color) !important;
-	--mat-mdc-snack-bar-button-color: var(--white-color) !important;
-}
-
-.error-snackbar .mdc-snackbar__surface {
-	background-color: var(--delete-color) !important;
-	color: white !important;
-}
-
-.error-snackbar .mat-mdc-snack-bar-action {
-	color: var(--white-color) !important;
-}
-
-/* Light Success Snack Bar Styles */
-.light-success-snackbar {
-	--mdc-snackbar-container-color: #d4edda !important;
-	--mat-mdc-snack-bar-button-color: darkgreen !important;
-}
-
-.light-success-snackbar .mdc-snackbar__surface {
-	background-color: #d4edda !important;
-	color: #155724 !important;
-}
-
-.light-success-snackbar .mat-mdc-snack-bar-action {
-	color: darkgreen !important;
-}
-
-/* Light Error Snack Bar Styles */
-.light-error-snackbar {
-	--mdc-snackbar-container-color: #f8d7da !important;
-	--mat-mdc-snack-bar-button-color: darkred !important;
-}
-
-.light-error-snackbar .mdc-snackbar__surface {
-	background-color: #f8d7da !important;
-	color: #721c24 !important;
-	border: 1px solid #f5c6cb;
-}
-
-/* Additional Color Options */
-.info-snackbar {
-	--mdc-snackbar-container-color: #0dcaf0 !important;
-	--mat-mdc-snack-bar-button-color: white !important;
-}
-
-.info-snackbar .mdc-snackbar__surface {
-	background-color: #0dcaf0 !important;
-	color: white !important;
-}
-
-.warning-snackbar {
-	--mdc-snackbar-container-color: #ffc107 !important;
-	--mat-mdc-snack-bar-button-color: #000 !important;
-}
-
-.warning-snackbar .mdc-snackbar__surface {
-	background-color: #ffc107 !important;
-	color: #000 !important;
-}
-
-.primary-snackbar {
-	--mdc-snackbar-container-color: var(--primary-color) !important;
-	--mat-mdc-snack-bar-button-color: white !important;
-}
-
-.primary-snackbar .mdc-snackbar__surface {
-	background-color: var(--primary-color) !important;
-	color: white !important;
-}

package/src/assets/app-variables.css

@@ -1,10 +0,0 @@
-/* Define global styles */
-
-:root {
-	--primary-color: #153d77;
-	--secondary-color: #6c757d;
-	--white-color: #fff;
-	--success-color: #198754;
-	--delete-color: #dc3545;
-	--background-color: #f2f2f2;
-}

package/src/assets/general.scss

@@ -1,77 +0,0 @@
-@import 'app-variables.css';
-
-/* Remove underline from hyperlink  */
-a {
-	text-decoration: none;
-}
-
-/* Show underline in hyperlink only when mouse is hovered  */
-a:hover {
-	text-decoration: underline;
-}
-
-/* By default make aligns items center for bootstrap row class */
-.row {
-	align-items: center;
-}
-
-/* Extends bootstrap row class and aligns items start */
-.row-align-items-start {
-	@extend .row;
-	align-items: start;
-}
-
-/* End of Bootstrap 5 adjustments */
-
-// Sets Mat-Dialog Overflow to auto by default
-.mat-dialog-content,
-.mat-dialog-container {
-	overflow: auto;
-}
-
-// Places item in the middle of the box
-.app-flex-center {
-	display: flex;
-	align-items: center;
-}
-
-// Places item in the center of the box
-.app-flex-justify-center {
-	display: flex;
-	justify-content: center;
-}
-
-// Places item in the left of the box
-.app-flex-justify-left {
-	display: flex;
-	justify-content: flex-start;
-}
-
-// Places item in the right of the box
-.app-flex-justify-right {
-	display: flex;
-	justify-content: flex-end;
-}
-
-// Places items at the start of the item
-.app-flex-align-items-start {
-	display: flex;
-	align-items: flex-start;
-}
-
-// Places items at the start of the item
-.app-flex-align-items-center {
-	display: flex;
-	align-items: center;
-}
-
-// Add padding to strong HTML tag
-strong {
-	padding-left: 5px;
-	padding-right: 5px;
-}
-
-//Primary color text
-.primary-color-text {
-	color: var(--primary-color);
-}

package/src/assets/styles.scss

@@ -1,5 +0,0 @@
-//Import Custom SCSS files
-@import 'general';
-@import 'app-variables.css';
-@import 'app-buttons.css';
-@import 'app-mat-snack-bar.css';

package/src/lib/components/alert/alert.component.html

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

package/src/lib/components/alert/alert.component.scss

@@ -1,5 +0,0 @@
-.alert_div {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}

package/src/lib/components/alert/alert.component.ts

@@ -1,105 +0,0 @@
-import { ChangeDetectorRef, Component, effect, inject, input, type OnInit, output, signal } from '@angular/core';
-
-export type AlertType = 'info' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'dark' | 'light';
-
-/**
- * Boostrap Alert component that can be used to alert messages to the user
- *
- * @author Pavan Kumar Jadda
- * @since 12.0.0
- */
-@Component({
-	selector: 'lib-alert, alert',
-	templateUrl: './alert.component.html',
-	styleUrls: ['./alert.component.scss'],
-})
-export class AlertComponent implements OnInit {
-	cdr = inject(ChangeDetectorRef);
-	/**
-	 * Type of the BootStrap Alert. Following values are supported. See BootStrap docs for more information
-	 */
-	type = input<AlertType>('info');
-
-	/**
-	 *  Is alert visible or open
-	 */
-	isOpen = input(true);
-
-	/**
-	 *  Writable signal for isOpen
-	 */
-	open = signal(this.isOpen());
-
-	/**
-	 * If set, displays an inline “Close” button
-	 */
-	dismissible = input(true);
-
-	/**
-	 * If set, dismisses the alert after Dismiss Timeout
-	 */
-	dismissOnTimeout = input(true);
-
-	/**
-	 * Number in milliseconds, after which alert will be closed. Default value is 5000 ms
-	 */
-	dismissTimeout = input(5000);
-
-	/**
-	 * Additional classes to be added to the alert. This can be used to add custom styles to the alert
-	 */
-	class = input('');
-
-	/**
-	 * Emits when the alert is closed.
-	 */
-	closed = output<void>();
-
-	constructor() {
-		// React to isOpen input changes
-		effect(() => {
-			this.open.set(this.isOpen());
-		});
-	}
-
-	/**
-	 * Initialize the component and settings
-	 *
-	 * @author Pavan Kumar Jadda
-	 * @since 12.0.0
-	 */
-	ngOnInit(): void {
-		this.openAlert();
-
-		if (this.dismissOnTimeout()) {
-			setTimeout(() => {
-				this.closeAlert();
-				this.cdr.markForCheck();
-			}, this.dismissTimeout());
-		}
-	}
-
-	/**
-	 * Closes BootStrap Alert if not open
-	 *
-	 * @author Pavan Kumar Jadda
-	 * @since 12.0.0
-	 */
-	closeAlert(): void {
-		if (!this.isOpen()) {
-			return;
-		}
-		this.open.set(false);
-		this.closed.emit();
-	}
-
-	/**
-	 * Opens Bootstrap Alert
-	 *
-	 * @author Pavan Kumar Jadda
-	 * @since 12.0.0
-	 */
-	private openAlert(): void {
-		this.open.set(true);
-	}
-}

package/src/lib/components/autocomplete/autocomplete.component.html

@@ -1,42 +0,0 @@
-<div>
-	<mat-form-field appearance="fill" class="{{ classes() }}">
-		<mat-label>{{ label() }}</mat-label>
-		<input
-			#inputAutoComplete
-			#trigger="matAutocompleteTrigger"
-			[formControl]="control"
-			[matAutocomplete]="auto"
-			[placeholder]="placeHolder()"
-			[required]="required()"
-			matInput
-			type="text" />
-
-		<div matSuffix style="display: flex">
-			@if (control.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>
-
-		<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 (typeof option === 'string') {
-						<ng-container>{{ option }}</ng-container>
-					} @else if (typeof option === 'object') {
-						<ng-container>{{ option[bindLabel()] }}</ng-container>
-					}
-				</mat-option>
-			}
-		</mat-autocomplete>
-	</mat-form-field>
-</div>

package/src/lib/components/autocomplete/autocomplete.component.ts

@@ -1,207 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import {
-	AfterContentChecked,
-	ChangeDetectorRef,
-	Component,
-	ElementRef,
-	forwardRef,
-	inject,
-	Input,
-	input,
-	OnChanges,
-	OnInit,
-	Optional,
-	output,
-	SimpleChanges,
-	ViewChild,
-} from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatOptionSelectionChange } from '@angular/material/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { map, startWith } from 'rxjs/operators';
-
-/**
- * Reusable Auto Complete component that extends MatAutoComplete to show Clear icon and Arrow buttons
- *
- * @author Pavan Kumar Jadda
- * @since 12.0.0
- */
-@Component({
-	selector: 'autocomplete, lib-autocomplete',
-	imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatButtonModule, MatIconModule, AsyncPipe],
-	templateUrl: './autocomplete.component.html',
-	providers: [
-		{
-			provide: NG_VALUE_ACCESSOR,
-			useExisting: forwardRef(() => AutocompleteComponent),
-			multi: true,
-		},
-	],
-})
-export class AutocompleteComponent implements OnInit, OnChanges, AfterContentChecked, ControlValueAccessor {
-	/**
-	 * Gets reference inputAutoComplete HTML attribute
-	 */
-	@ViewChild('inputAutoComplete') inputAutoComplete!: ElementRef;
-
-	cdRef = inject(ChangeDetectorRef);
-
-	/**
-	 * Internal form control for the autocomplete
-	 */
-	control = new FormControl('');
-
-	/**
-	 * Label of the AutoComplete
-	 */
-	label = input('');
-
-	/**
-	 * Placeholder of the AutoComplete
-	 */
-	placeHolder = input('');
-
-	/**
-	 * Appearance of the AutoComplete, defaults to `fill`
-	 */
-	appearance = input('fill');
-
-	/**
-	 * List of CSS classes that need to applied to autocomplete
-	 */
-	classes = input('');
-
-	/**
-	 * Attribute of the Object whose value would be shown when searching for data. Defaults to `ID`
-	 */
-	bindLabel = input('');
-
-	/**
-	 * Attribute of the Object whose value would be used for search
-	 */
-	bindValue = input('id');
-
-	/**
-	 * Function that maps an option's control value to its display value in the trigger.
-	 */
-	@Input() @Optional() displayWith: ((value: any) => string) | null = null;
-
-	/**
-	 * Specifies if the autocomplete is required. Default is not required.
-	 */
-	required = input(false);
-
-	/**
-	 * Specifies if the autocomplete is disabled. Default is not required.
-	 */
-	disabled = input(false);
-
-	/**
-	 * List of Objects that need to be bind and searched for
-	 */
-	data = input<string[] | any[]>();
-
-	/**
-	 * Emit selected value on selection changes
-	 */
-	onSelectionChange = output<any>();
-
-	/**
-	 * BehaviorSubject that shows the current active arrow icon
-	 */
-	arrowIconSubject = new BehaviorSubject('arrow_drop_down');
-
-	/**
-	 * Filtered options when user types
-	 */
-	filteredOptions: Observable<any[] | undefined> | undefined;
-
-	writeValue(value: any): void {
-		this.control.setValue(value, { emitEvent: false });
-	}
-
-	registerOnChange(fn: any): void {
-		this.onChange = fn;
-		// Forward value changes from internal control to parent form
-		this.control.valueChanges.subscribe((value) => fn(value));
-	}
-
-	registerOnTouched(fn: any): void {
-		this.onTouched = fn;
-	}
-
-	setDisabledState(isDisabled: boolean): void {
-		if (isDisabled) {
-			this.control.disable();
-		} else {
-			this.control.enable();
-		}
-	}
-
-	ngAfterContentChecked(): void {
-		this.cdRef.detectChanges();
-	}
-
-	ngOnInit() {
-		this.filteredOptions = this.control.valueChanges.pipe(
-			startWith(''),
-			map((value) => (typeof value === 'string' ? value : value !== null ? value[this.bindLabel()] : '')),
-			map(
-				(propertyName) =>
-					this.data()?.filter((option) => {
-						return typeof option === 'string'
-							? option?.toLowerCase().startsWith(propertyName.toLowerCase())
-							: option[this.bindLabel()]?.toLowerCase().indexOf(propertyName.toLowerCase()) === 0;
-					}) ?? this.data()?.slice(),
-			),
-		);
-	}
-
-	ngOnChanges(_changes: SimpleChanges): void {
-		this.displayFn = this.displayFn.bind(this);
-	}
-
-	clearInput(evt: any): void {
-		evt.stopPropagation();
-		this.control.reset();
-		this.onChange(null);
-		this.inputAutoComplete?.nativeElement.focus();
-	}
-
-	openOrClosePanel(evt: any, trigger: MatAutocompleteTrigger): void {
-		evt.stopPropagation();
-		if (trigger.panelOpen) {
-			trigger.closePanel();
-		} else {
-			trigger.openPanel();
-		}
-	}
-
-	displayFn(object: any): string {
-		if (this.displayWith !== undefined && this.displayWith !== null && typeof this.displayWith === 'function') {
-			this.displayFn = this.displayWith.bind(this);
-			return this.displayWith(object);
-		} else {
-			if (typeof object === 'string') {
-				return object;
-			}
-			return object?.[this.bindLabel()] ? object[this.bindLabel()] : '';
-		}
-	}
-
-	emitSelectedValue($event: MatOptionSelectionChange) {
-		this.onSelectionChange.emit($event.source.value);
-		this.onChange($event.source.value);
-		this.onTouched();
-	}
-
-	// ControlValueAccessor implementation
-	private onChange: (value: any) => void = () => {};
-
-	private onTouched: () => void = () => {};
-}