@verisoft/ui-core 18.6.0 → 18.7.0

package/.eslintrc.json

@@ -0,0 +1,48 @@
+{
+  "extends": ["../../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "v",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "v",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"]
+          }
+        ]
+      }
+    }
+  ]
+}

package/README.md

@@ -1,7 +1,56 @@
 # ui-core
 
-This library was generated with [Nx](https://nx.dev).
+The `ui-core` library provides shared UI components, utilities, and base styles for the Verisoft Frontend workspace.
 
-## Running unit tests
+## Features
 
-Run `nx test ui-core` to execute the unit tests.
+- Reusable Angular UI components
+- Shared UI utilities and helpers
+- Base styles and theming support
+
+## Installation
+
+This package is intended for internal use within the monorepo. To use it in another library or app, add it as a dependency in your `project.json`:
+
+```json
+"dependencies": {
+  "ui-core": "*"
+}
+```
+
+## Usage
+
+Import the required modules or components from `ui-core`:
+
+```typescript
+import { UiButtonComponent } from '@verisoft/ui-core';
+```
+
+## Development
+
+### Building
+
+Run the following command to build the library:
+
+```sh
+nx build ui-core
+```
+
+### Running Unit Tests
+
+To execute the unit tests for this library:
+
+```sh
+nx test ui-core
+```
+
+## Contributing
+
+1. Fork the repository and create your branch from `master`.
+2. Make your changes and add tests if needed.
+3. Run `nx test ui-core` to ensure all tests pass.
+4. Submit a pull request.
+
+## License
+
+This project is licensed under the MIT License.

package/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'ui-core',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/src/libs/ui-core',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/src/libs/ui-core",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -1,35 +1,19 @@
-{
-  "name": "@verisoft/ui-core",
-  "version": "18.6.0",
-  "peerDependencies": {
-    "@angular/core": "^18.2.8",
-    "@angular/router": "18.2.8",
-    "@verisoft/core": "18.6.0",
-    "@angular/forms": "18.2.8",
-    "rxjs": "~7.8.0",
-    "@angular/common": "^18.2.8",
-    "lodash-es": "^4.17.21",
-    "@verisoft/store": "18.6.0",
-    "@ngrx/store": "18.0.2",
-    "@angular/platform-browser": "18.2.8",
-    "uuid": "^10.0.0",
-    "@ngx-translate/core": "^15.0.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/verisoft-ui-core.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/verisoft-ui-core.mjs",
-      "esm": "./esm2022/verisoft-ui-core.mjs",
-      "default": "./fesm2022/verisoft-ui-core.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
+{
+  "name": "@verisoft/ui-core",
+  "version": "18.7.0",
+  "peerDependencies": {
+    "@angular/core": "^18.2.8",
+    "@angular/router": "18.2.8",
+    "@verisoft/core": "18.7.0",
+    "@angular/forms": "18.2.8",
+    "rxjs": "~7.8.0",
+    "@angular/common": "^18.2.8",
+    "lodash-es": "^4.17.21",
+    "@verisoft/store": "18.7.0",
+    "@ngrx/store": "18.0.2",
+    "@angular/platform-browser": "18.2.8",
+    "uuid": "^10.0.0",
+    "@ngx-translate/core": "^15.0.0"
+  },
+  "sideEffects": false
+}

package/project.json

@@ -0,0 +1,36 @@
+{
+  "name": "ui-core",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "src/libs/ui-core/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "src/libs/ui-core/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "src/libs/ui-core/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "src/libs/ui-core/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "src/libs/ui-core/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/{index.d.ts → src/index.ts}

@@ -1,6 +1,6 @@
-export * from './lib/common';
-export * from './lib/components';
-export * from './lib/directives';
-export * from './lib/pipes';
-export * from './lib/services';
-export * from './lib/format/format';
+export * from './lib/common';
+export * from './lib/components';
+export * from './lib/directives';
+export * from './lib/pipes';
+export * from './lib/services';
+export * from './lib/format/format';

package/src/lib/common/angular-helper.ts

@@ -0,0 +1,44 @@
+import { OnChanges, SimpleChange, SimpleChanges } from '@angular/core';
+
+export function setComponentProperties<TComponent>(
+  component: TComponent,
+  value: Partial<TComponent>,
+  firstChange = false
+) {
+  if (!value || !component) {
+    return;
+  }
+
+  const simpleChanges = Object.keys(value).reduce(
+    (changes: SimpleChanges, property: string) => {
+      const indexedComponent = component as unknown as {
+        [key: string]: TComponent[keyof TComponent];
+      };
+      const indexedValue = value as unknown as {
+        [key: string]: TComponent[keyof TComponent];
+      };
+      const previousValue = indexedComponent[property];
+      const currentValue = indexedValue[
+        property
+      ] as TComponent[keyof TComponent];
+      if (currentValue !== previousValue) {
+        indexedComponent[property] = currentValue;
+        const change = new SimpleChange(
+          previousValue,
+          currentValue,
+          firstChange
+        );
+
+        return { ...changes, [property]: change };
+      }
+
+      return changes;
+    },
+    {}
+  );
+
+  const changeableComponent = component as unknown as OnChanges;
+  if (changeableComponent['ngOnChanges']) {
+    changeableComponent.ngOnChanges(simpleChanges);
+  }
+}

package/src/lib/common/constants.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_DEBOUNCE_TIME = 300;
+
+export const DEFAULT_PAGINATION = [10, 25, 50, 100];
+
+export const MAX_COLUMN_CHAR_COUNT = 30;

package/src/lib/common/control.models.ts

@@ -0,0 +1,71 @@
+export enum ControlSeverity {
+  success = 'success',
+  info = 'info',
+  warning = 'warning',
+  danger = 'danger',
+  help = 'help',
+  primary = 'primary',
+  secondary = 'secondary',
+  contrast = 'contrast',
+}
+
+export enum GovControlSeverity {
+  primary = 'primary',
+  secondary = 'secondary',
+  neutral = 'neutral',
+  error = 'error',
+  success = 'success',
+  warning = 'warning',
+}
+
+export enum GovButtonType {
+  solid = 'solid',
+  outlined = "outlined",
+  base = "base",
+  link = "link"
+}
+
+export enum IconPosition {
+  left = 'left',
+  right = 'right',
+}
+
+export enum SlotPosition {
+  top = 'top',
+  bottom = 'bottom',
+}
+
+export enum FieldSize {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+}
+
+export enum FieldAlign {
+  left = 'left',
+  center = 'center',
+  right = 'right',
+}
+
+export enum FieldType {
+  text = 'text',
+  number = 'number',
+  password = 'password',
+  search = 'search',
+  date = 'date',
+}
+
+export enum LayoutType {
+  horizontal = 'horizontal',
+  vertical = 'vertical',
+}
+
+export type ControlSeverityType = keyof typeof ControlSeverity;
+export type GovControlSeverityType = keyof typeof GovControlSeverity;
+export type GovButtonTypeType = keyof typeof GovButtonType;
+export type IconPositionType = keyof typeof IconPosition;
+export type SlotPositionType = keyof typeof SlotPosition;
+export type FieldSizeType = keyof typeof FieldSize;
+export type FieldAlignType = keyof typeof FieldAlign;
+export type FieldTypeType = keyof typeof FieldType;
+export type LayoutTypeType = keyof typeof LayoutType;

package/src/lib/common/datasource-component.model.spec.ts

@@ -0,0 +1,42 @@
+import { setDataToArray } from './datasource-component.model';
+
+describe('setDataToArray', () => {
+  test('Should return data when target array is null and data is passed.', () => {
+    const data = ['item 1', 'item 2'];
+    const targetData = undefined;
+
+    const actual = setDataToArray(targetData, data);
+
+    expect(actual).toEqual(data);
+  });
+
+  test('Should return data when target array is null and data is passed.', () => {
+    const data = ['item 1', 'item 2'];
+    const targetData: string[] = [];
+
+    const actual = setDataToArray(targetData, data);
+
+    expect(actual).toEqual(data);
+  });
+
+  test('Should return extended target array when target array is empty and data is passed and offset is specified.', () => {
+    const data = ['item 1', 'item 2'];
+    const targetData: string[] = [];
+    const offset = 1;
+
+    const actual = setDataToArray(targetData, data, offset);
+
+    expect(actual).toEqual([undefined, ...data]);
+  });
+
+  test('Should return target array extended to total items when data is passed and total is specified.', () => {
+    const data = ['item 1', 'item 2'];
+    const targetData: string[] = [];
+    const total = 5;
+    const offset = 0;
+
+    const actual = setDataToArray(targetData, data, offset, total);
+
+    expect(actual.length).toEqual(total);
+  });
+});

package/src/lib/common/datasource-component.model.ts

@@ -0,0 +1,43 @@
+import { EventEmitter, SimpleChanges } from '@angular/core';
+import { FilterEvent, LazyLoadEvent, RequestParams } from '@verisoft/core';
+
+export interface DataSourceComponentModel<TEntity> {
+  ngOnChanges?: (changes: SimpleChanges) => void;
+  lazy: boolean;
+  loading: boolean;
+  filter: boolean;
+  options: TEntity[] | undefined;
+  optionValue: string | undefined;
+  optionLabel: string | undefined;
+  showed: EventEmitter<any>;
+  cleared: EventEmitter<any>;
+  filtered: EventEmitter<FilterEvent>;
+  lazyLoad: EventEmitter<LazyLoadEvent>;
+}
+
+export function setDataToArray<T>(
+  targetArray: (T | undefined)[] | undefined,
+  data: T[],
+  offset = 0,
+  total: number | undefined = undefined,
+  defaultItem: T | undefined = undefined
+): (T | undefined)[] {
+  const totalItems = total ?? data.length + offset;
+  if (!targetArray) {
+    targetArray = Array(totalItems).fill(defaultItem);
+  }
+
+  if (targetArray.length < totalItems) {
+    targetArray = targetArray.concat(
+      new Array(totalItems - targetArray.length).fill(defaultItem)
+    );
+  }
+
+  for (let i = 0; i < data.length; i++) {
+    targetArray[i + offset] = data[i] ?? defaultItem;
+  }
+
+  return targetArray;
+}
+
+export type ExtendedRequestType<T> = RequestParams<T> & { useNewData: boolean}

package/{lib/common/deactivate-guard.model.d.ts → src/lib/common/deactivate-guard.model.ts}

@@ -1,4 +1,5 @@
-import { Observable } from "rxjs";
-export interface PreventUnsavedChangesCore {
-    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
-}
+import { Observable } from "rxjs";
+
+export interface PreventUnsavedChangesCore {
+  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
+}

package/src/lib/common/download-file.ts

@@ -0,0 +1,20 @@
+export function downloadText(
+  filename: string,
+  text: string,
+  mimeType: string | undefined = 'text/plain'
+): void {
+  const blob = new Blob([text], { type: mimeType });
+  downloadFile(filename, blob);
+}
+
+export function downloadFile(
+  filename: string,
+  blob: Blob
+): void {
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  window.URL.revokeObjectURL(url);
+}

package/src/lib/common/filter.ts

@@ -0,0 +1,7 @@
+export function isFilterEmpty<T>(filter: Partial<T> | undefined) {
+  if (filter == undefined) {
+    return true;
+  }
+
+  return !Object.entries(filter).some((x) => x[1] != undefined);
+}

package/{lib/common/icons.d.ts → src/lib/common/icons.ts}

@@ -1,34 +1,34 @@
-export interface CommonIcons {
-    add: string;
-    minus: string;
-    delete: string;
-    filter: string;
-    download: string;
-    save: string;
-    print: string;
-    edit: string;
-    settings: string;
-    house: string;
-    calendar: string;
-    chevronRight: string;
-    chevronLeft: string;
-    chevronDown: string;
-    chevronUp: string;
-    checkbox: string;
-    warning: string;
-    search: string;
-    action: string;
-    user: string;
-    logout: string;
-    crossCircle: string;
-    infoCircle: string;
-    cross: string;
-    arrowLeft: string;
-    arrowRight: string;
-    questionCircle: string;
-    checkCircle: string;
-    sitemap: string;
-    check: string;
-    envelope: string;
-    loader: string;
-}
+export interface CommonIcons {
+    add: string;
+    minus: string;
+    delete: string;
+    filter: string;
+    download: string;
+    save: string;
+    print: string;
+    edit: string;
+    settings: string;
+    house: string;
+    calendar: string;
+    chevronRight: string;
+    chevronLeft: string;
+    chevronDown: string;
+    chevronUp: string;
+    checkbox: string;
+    warning: string;
+    search: string;
+    action: string;
+    user: string;
+    logout: string;
+    crossCircle: string;
+    infoCircle: string;
+    cross: string;
+    arrowLeft: string;
+    arrowRight: string;
+    questionCircle: string;
+    checkCircle: string;
+    sitemap: string;
+    check: string;
+    envelope: string;
+    loader: string;
+}

package/{lib/common/index.d.ts → src/lib/common/index.ts}

@@ -1,10 +1,10 @@
-export * from './angular-helper';
-export * from './control.models';
-export * from './constants';
-export * from './datasource-component.model';
-export * from './filter';
-export * from './notificable-property.model';
-export * from './rxjs';
-export * from './icons';
-export * from './download-file';
-export * from './deactivate-guard.model';
+export * from './angular-helper';
+export * from './control.models';
+export * from './constants';
+export * from './datasource-component.model';
+export * from './filter';
+export * from './notificable-property.model';
+export * from './rxjs';
+export * from './icons';
+export * from './download-file';
+export * from './deactivate-guard.model'

package/{lib/common/notificable-property.model.d.ts → src/lib/common/notificable-property.model.ts}

@@ -1,4 +1,5 @@
-import { Observable } from "rxjs";
-export interface NotificableProperty {
-    propertyChanged: Observable<unknown>;
-}
+import { Observable } from "rxjs";
+
+export interface NotificableProperty {
+  propertyChanged: Observable<unknown>;
+}

package/src/lib/common/rxjs.spec.ts

@@ -0,0 +1,58 @@
+import { QueryList } from '@angular/core';
+import { skip, Subject } from 'rxjs';
+import { NotificableProperty } from './notificable-property.model';
+import { queryListChanged } from './rxjs';
+
+describe('queryListChanged', () => {
+  let queryList: QueryList<NotificableProperty>;
+
+  beforeEach(() => {
+    queryList = new QueryList<NotificableProperty>();
+  });
+
+  it('should emit initial value', (done) => {
+    queryListChanged(queryList).subscribe((result) => {
+      expect(result).toEqual([]);
+      done();
+    });
+  });
+
+  it('should emit when propertyChanged emits', (done) => {
+    const propertyChanged = new Subject<void>();
+    const item = { propertyChanged } as NotificableProperty;
+    queryList.reset([item]);
+    queryList.notifyOnChanges();
+
+    queryListChanged(queryList)
+      .pipe(skip(1))
+      .subscribe((result) => {
+        expect(result).toEqual([item]);
+        done();
+      });
+
+    setTimeout(() => {
+      propertyChanged.next();
+    }, 60);
+  });
+
+  it('should debounce emissions', (done) => {
+    const propertyChanged = new Subject<void>();
+    const item = { propertyChanged } as NotificableProperty;
+    queryList.reset([item]);
+    queryList.notifyOnChanges();
+
+    const emittedValues: NotificableProperty[][] = [];
+    queryListChanged(queryList).subscribe((result) => {
+      emittedValues.push(result);
+    });
+
+    propertyChanged.next();
+    propertyChanged.next();
+
+    setTimeout(() => {
+      expect(emittedValues.length).toBe(1);
+      expect(emittedValues[0]).toEqual([item]);
+      done();
+    }, 100);
+  });
+});

package/src/lib/common/rxjs.ts

@@ -0,0 +1,21 @@
+import { QueryList } from '@angular/core';
+import { debounceTime, map, merge, startWith, switchMap } from 'rxjs';
+import { NotificableProperty } from './notificable-property.model';
+
+export function queryListChanged<TEntity>(list: QueryList<TEntity>) {
+  return list.changes.pipe(
+    startWith({}),
+    switchMap(() => {
+      const actionPropertyChanges$ = list
+        .toArray()
+        .filter((action) => (<NotificableProperty>action).propertyChanged)
+        .map((action) => (<NotificableProperty>action).propertyChanged);
+
+      return merge(...actionPropertyChanges$).pipe(
+        startWith({}),
+        map(() => list.toArray())
+      );
+    }),
+    debounceTime(50)
+  );
+}