@verisoft/ui-core 0.0.1

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

@@ -0,0 +1,7 @@
+# ui-core
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-core` to execute the unit tests.

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

@@ -0,0 +1,16 @@
+{
+  "name": "@verisoft/ui-core",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/core": "^18.2.8",
+    "@angular/router": "18.2.8",
+    "@verisoft/core": "18.0.0",
+    "@angular/forms": "18.2.8",
+    "primeng": "^17.18.11",
+    "rxjs": "~7.8.0",
+    "@angular/common": "^18.2.8",
+    "lodash-es": "^4.17.21",
+    "@verisoft/store": "18.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/src/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/common';
+export * from './lib/components';
+export * from './lib/directives';
+export * from './lib/pipes';

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 @@
+export const DEFAULT_DEBOUNCE_TIME = 300;

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

@@ -0,0 +1,57 @@
+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 FieldType {
+  text = 'text',
+  number = 'number',
+  password = 'password',
+  search = 'search',
+}
+
+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 FieldTypeType = keyof typeof FieldType;

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,41 @@
+import { EventEmitter, SimpleChanges } from '@angular/core';
+import { FilterEvent, LazyLoadEvent } from '@verisoft/core';
+
+export interface DataSourceComponentModel<TEntity> {
+  ngOnChanges?: (changes: SimpleChanges) => void;
+  lazy: boolean;
+  loading: boolean;
+  filter: boolean;
+  options?: TEntity[];
+  optionValue?: string;
+  optionLabel?: string;
+  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;
+}

package/src/lib/common/index.ts

@@ -0,0 +1,4 @@
+export * from './angular-helper';
+export * from './control.models';
+export * from './constants';
+export * from './datasource-component.model';

package/src/lib/components/action-button-group/action-button-group.model.ts

@@ -0,0 +1,16 @@
+import { InjectionToken } from '@angular/core';
+import { IconPositionType } from '../../common';
+import { ActionButton } from './action-button.model';
+
+export const ACTION_BUTTON_GROUP_COMPONENT_TOKEN = new InjectionToken<ActionButtonGroupCore>(
+    'ActionButtonGroupComponentToken'
+);
+
+export interface ActionButtonGroupCore {
+    maxItems: number;
+    maxItemsMobile: number;
+    items: ActionButton[]
+    menuIconPos: IconPositionType;
+    menuIcon: string;
+    label?: string;
+}

package/src/lib/components/action-button-group/action-button.model.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from "@angular/core";
+import { ControlSeverityType, FieldSizeType } from "../../common";
+
+export interface ActionButton {
+    disabled: boolean;
+    toolTip?: string;
+    id?: string;
+    icon?: string;
+    outlined: boolean;
+    raised: boolean;
+    text: boolean;
+    severity?: ControlSeverityType;
+    label?: string;
+    size?: FieldSizeType;
+    clickEvent: EventEmitter<void>;
+}

package/src/lib/components/action-button-group/index.ts

@@ -0,0 +1,2 @@
+export * from './action-button-group.model';
+export * from './action-button.model';

package/src/lib/components/base-form/base-form-input.component.ts

@@ -0,0 +1,115 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormControl,
+  FormControlDirective,
+  FormControlName,
+  FormGroupDirective,
+  NgControl,
+  NgModel,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseInputControls } from './models/base-form-input.models';
+
+const noop = () => {
+  /* */
+};
+
+@Component({
+  template: '',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+})
+export class BaseFormInputComponent
+  implements BaseInputControls<any>, ControlValueAccessor, OnInit
+{
+  readonly ngControl?: NgControl;
+
+  formControl!: FormControl;
+
+  constructor(private readonly control: NgControl) {
+    this.ngControl = control;
+    if (this.control) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  @Input()
+  label?: string;
+
+  @Input()
+  required = false;
+
+  @Input()
+  readonly!: boolean;
+
+  @Input()
+  tooltip!: string;
+
+  @Input()
+  formDisplay: 'flex' | 'block' = 'flex';
+
+  @Input()
+  clearable = true;
+
+  @Input()
+  placeholder?: string = '';
+
+  @Input()
+  testId?: string;
+
+  inputId = Math.random().toString(36).substring(2);
+
+  selectionChanged: any = noop;
+
+  onTouch: any = noop;
+
+  registerOnChange(fn: any): void {
+    this.selectionChanged = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  writeValue(value: any): void {}
+
+  ngOnInit(): void {
+    if (this.ngControl) {
+      if (this.ngControl instanceof FormControlName) {
+        this.formControl =
+          this.ngControl.control ||
+          ((this.ngControl.formDirective as FormGroupDirective)?.form.controls[
+            this.ngControl.name as string
+          ] as FormControl);
+      } else if (
+        this.ngControl instanceof FormControlDirective ||
+        this.ngControl instanceof NgModel
+      ) {
+        this.formControl = this.ngControl.control;
+        if (this.ngControl instanceof NgModel) {
+          this.formControl.valueChanges.subscribe(() =>
+            this.ngControl?.viewToModelUpdate(this.control?.value)
+          );
+        }
+      } else {
+        this.formControl = new FormControl();
+      }
+    } else {
+      this.formControl = new FormControl();
+    }
+  }
+
+  isRequired() {
+    if (this.ngControl) {
+      const validator = this.ngControl?.control?.validator?.(
+        {} as AbstractControl
+      );
+      return this.required || (validator && validator['required']);
+    }
+    return this.required;
+  }
+}