@verisoft/ui-core 19.0.0-rc001 → 20.1.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,318 @@
-# ui-core
+# @verisoft/ui-core
 
-This library was generated with [Nx](https://nx.dev).
+A foundational Angular library that provides core UI functionalities, directives, interfaces, and base classes for building consistent user interfaces. This library serves as the architectural foundation for all UI component libraries within the Verisoft ecosystem, offering shared utilities, base components, and common interfaces without implementing concrete UI components.
 
-## Running unit tests
+## Overview
+
+The `@verisoft/ui-core` library provides essential infrastructure and utilities that enable other UI libraries to build consistent, accessible, and well-structured components. It includes base classes, interfaces, directives, services, and utilities that standardize component behavior across the entire Verisoft UI ecosystem.
+
+## Features
+
+### Core Infrastructure
+- **Base Classes**: Abstract base classes for form components, input controls, and lifecycle management
+- **Component Interfaces**: TypeScript interfaces defining component contracts and APIs
+- **Tokens & Providers**: Injection tokens for component registration and dependency injection
+- **Type Definitions**: Comprehensive type definitions for component properties and events
+
+### Directives
+- **Form Directives**: Enhanced form behavior, validation helpers, and form state management
+- **Utility Directives**: Common DOM manipulation, event handling, and accessibility helpers
+- **Validation Directives**: Custom validators and validation feedback mechanisms
+
+### Services & Utilities
+- **Format Services**: Date, number, currency, and text formatting utilities
+- **Screen Service**: Responsive design utilities and screen size detection
+- **Menu Service**: Navigation and menu state management
+- **Common Services**: Shared utilities for HTTP, storage, and application state
+
+### Base Components
+- **UnsubscribeComponent**: Automatic subscription cleanup and memory leak prevention
+- **BaseFormComponent**: Foundation for all form-related functionality
+- **BaseInputComponent**: Core input control behavior and validation integration
+
+### Key Features
+- ✅ **Architecture Foundation**: Provides the structural foundation for all UI libraries
+- ✅ **Type Safety**: Full TypeScript support with comprehensive type definitions
+- ✅ **Extensibility**: Designed to be extended by specialized UI component libraries
+- ✅ **Consistency**: Ensures consistent behavior across all UI components
+- ✅ **Performance**: Optimized base classes with OnPush change detection support
+- ✅ **Accessibility**: Built-in accessibility patterns and ARIA support
+- ✅ **Form Integration**: Deep Angular Reactive Forms integration and validation
+- ✅ **State Management**: Integration with `@verisoft/store` for application state
+
+## Installation
+
+```bash
+npm install @verisoft/ui-core
+```
+
+### Peer Dependencies
+
+Make sure you have the following peer dependencies installed:
+
+```bash
+npm install @verisoft/core @verisoft/store @angular/core @angular/common @angular/forms @angular/platform-browser
+```
+
+## Quick Start
+
+1. **Import base classes and interfaces** in your component library:
+
+```typescript
+import { 
+  BaseFormInputComponent, 
+  ButtonCore, 
+  TextfieldCore,
+  BUTTON_COMPONENT_TOKEN 
+} from '@verisoft/ui-core';
+
+@Component({
+  selector: 'my-button',
+  providers: [{
+    provide: BUTTON_COMPONENT_TOKEN,
+    useExisting: MyButtonComponent
+  }]
+})
+export class MyButtonComponent extends BaseFormInputComponent implements ButtonCore {
+  // Component implementation
+}
+```
+
+2. **Use services and utilities**:
+
+```typescript
+import { ScreenSizeService, FormatService } from '@verisoft/ui-core';
+
+@Component({
+  // ...
+})
+export class MyComponent {
+  constructor(
+    private screenService: ScreenSizeService,
+    private formatService: FormatService
+  ) {}
+
+  get isMobile() {
+    return this.screenService.isMobile();
+  }
+
+  formatCurrency(value: number) {
+    return this.formatService.currency(value);
+  }
+}
+```
+
+## Usage Examples
+
+### Creating a Custom Component with Base Classes
+```typescript
+import { 
+  BaseFormInputComponent, 
+  TextfieldCore, 
+  TEXTFIELD_COMPONENT_TOKEN,
+  FieldSizeType,
+  FieldTypeType 
+} from '@verisoft/ui-core';
+import { Component, Input, Optional, Self } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+
+@Component({
+  selector: 'custom-textfield',
+  template: `
+    <input 
+      [type]="type"
+      [value]="value"
+      [disabled]="disabled"
+      (input)="onInput($event)"
+      (blur)="onBlur()"
+      [class]="getInputClasses()"
+    />
+  `,
+  providers: [{
+    provide: TEXTFIELD_COMPONENT_TOKEN,
+    useExisting: CustomTextfieldComponent
+  }]
+})
+export class CustomTextfieldComponent 
+  extends BaseFormInputComponent 
+  implements ControlValueAccessor, TextfieldCore {
+
+  @Input() type: FieldTypeType = 'text';
+  @Input() size: FieldSizeType = 'medium';
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  protected getInputClasses(): string {
+    return `input input--${this.size} ${this.disabled ? 'input--disabled' : ''}`;
+  }
+}
+```
+
+### Using Core Services
+```typescript
+import { 
+  ScreenSizeService, 
+  SideMenuService, 
+  FormatService 
+} from '@verisoft/ui-core';
+
+@Component({
+  selector: 'my-responsive-component',
+  template: `
+    <div [class]="containerClass">
+      <span>{{ formattedPrice }}</span>
+      <button (click)="toggleMenu()" *ngIf="!isMobile">Menu</button>
+    </div>
+  `
+})
+export class ResponsiveComponent {
+  constructor(
+    private screenService: ScreenSizeService,
+    private menuService: SideMenuService,
+    private formatService: FormatService
+  ) {}
+
+  get isMobile(): boolean {
+    return this.screenService.isMobile();
+  }
+
+  get containerClass(): string {
+    return this.isMobile ? 'container-mobile' : 'container-desktop';
+  }
+
+  get formattedPrice(): string {
+    return this.formatService.currency(99.99, 'EUR');
+  }
+
+  toggleMenu(): void {
+    this.menuService.toggle();
+  }
+}
+```
+
+### Implementing Component Interfaces
+```typescript
+import { ButtonCore, IconPositionType } from '@verisoft/ui-core';
+
+export class MyButtonComponent implements ButtonCore {
+  @Input() primary: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() icon?: string;
+  @Input() iconPosition: IconPositionType = 'left';
+  @Input() loading: boolean = false;
+  @Input() size: 'small' | 'medium' | 'large' = 'medium';
+
+  // Implement required methods from ButtonCore interface
+  onClick(): void {
+    if (!this.disabled && !this.loading) {
+      // Handle click
+    }
+  }
+}
+```
+
+## Architecture
+
+### Base Classes
+- **BaseFormComponent**: Foundation for all form-related components with validation integration
+- **BaseFormInputComponent**: Base class for form input controls with ControlValueAccessor implementation
+- **UnsubscribeComponent**: Automatic subscription management and memory leak prevention
+- **BaseInputControls**: Core input control behavior and common properties
+
+### Component Interfaces
+- **ButtonCore**: Interface defining button component contract
+- **TextfieldCore**: Interface for text input components
+- **DropdownCore**: Interface for dropdown/select components
+- **TableCore**: Interface for data table components
+- **FormFieldCore**: Interface for form field wrapper components
+
+### Injection Tokens
+- **BUTTON_COMPONENT_TOKEN**: Token for registering button implementations
+- **TEXTFIELD_COMPONENT_TOKEN**: Token for registering textfield implementations
+- **DROPDOWN_COMPONENT_TOKEN**: Token for registering dropdown implementations
+- **TABLE_COMPONENT_TOKEN**: Token for registering table implementations
+
+### Services
+- **ScreenSizeService**: Responsive design utilities and breakpoint detection
+- **SideMenuService**: Navigation menu state management
+- **FormatService**: Formatting utilities for dates, numbers, and currencies
+- **ValidationService**: Custom validation logic and error handling
+
+### Type Definitions
+- **FieldSizeType**: Standardized size options ('small' | 'medium' | 'large')
+- **FieldTypeType**: Input field types ('text' | 'email' | 'password' | etc.)
+- **IconPositionType**: Icon positioning ('left' | 'right')
+- **ControlSeverityType**: Validation state types ('success' | 'warning' | 'error')
+
+## API Documentation
+
+For detailed component APIs, properties, and methods, please refer to the component documentation or use your IDE's IntelliSense for comprehensive inline documentation.
+
+## API Documentation
+
+For detailed APIs, interfaces, and base class documentation, please refer to:
+- TypeScript definitions and IntelliSense in your IDE
+- Base class documentation for extension patterns
+- Interface definitions for component contracts
+- Service documentation for utility functions
+
+## Development
+
+### Running unit tests
 
 Run `nx test ui-core` to execute the unit tests.
+
+### Building the library
+
+Run `nx build ui-core` to build the library.
+
+### Linting
+
+Run `nx lint ui-core` to run ESLint on the library.
+
+## Extending the Library
+
+The `ui-core` library is designed to be extended by other UI component libraries. Here's how to create a new UI library:
+
+### Creating a Component Library
+```typescript
+// 1. Extend base classes
+import { BaseFormInputComponent, ButtonCore } from '@verisoft/ui-core';
+
+export class MyButtonComponent extends BaseFormInputComponent implements ButtonCore {
+  // Your implementation
+}
+
+// 2. Provide component tokens
+@Component({
+  providers: [{
+    provide: BUTTON_COMPONENT_TOKEN,
+    useExisting: MyButtonComponent
+  }]
+})
+
+// 3. Use core services
+constructor(
+  private screenService: ScreenSizeService,
+  private formatService: FormatService
+) {
+  super();
+}
+```
+
+### Best Practices
+- Always extend `BaseFormInputComponent` for form controls
+- Implement the appropriate Core interface for your component type
+- Use injection tokens to register your components
+- Leverage core services for consistent behavior
+- Follow the established type definitions and naming conventions
+
+## Contributing
+
+This library is part of the Verisoft framework. Please follow the established coding standards and architectural patterns when contributing.
+
+## License
+
+Copyright © Verisoft. All rights reserved.

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,11 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/src/libs/ui-core",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "lodash-es",
+    "uuid"
+  ]
+}

package/package.json

@@ -1,36 +1,21 @@
 {
   "name": "@verisoft/ui-core",
-  "version": "19.0.0-rc001",
+  "version": "20.1.0",
   "peerDependencies": {
-    "@verisoft/core": "19.0.0-rc001",
-    "@verisoft/store": "19.0.0-rc001",
-    "@angular/core": "19.2.9",
-    "@angular/common": "19.2.9",
-    "@angular/forms": "19.2.9",
-    "@angular/platform-browser": "19.2.9",
-    "@angular/router": "19.2.9",
-    "@ngrx/store": "19.2.1",
-    "@ngx-translate/core": "^16.0.4",
-    "lodash-es": "^4.17.21",
-    "rxjs": "~7.8.0",
-    "uuid": "^10.0.0"
-  },
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "module": "fesm2022/verisoft-ui-core.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/verisoft-ui-core.mjs"
-    }
+    "@verisoft/core": "~20.1.0",
+    "@verisoft/store": "~20.1.0",
+    "@angular/core": "~20.2.0",
+    "@angular/common": "~20.2.0",
+    "@angular/forms": "~20.2.0",
+    "@angular/platform-browser": "~20.2.0",
+    "@angular/router": "~20.2.0",
+    "@ngrx/store": "~20.0.0",
+    "@ngx-translate/core": "^17.0.0",
+    "rxjs": "~7.8.0"
   },
   "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
+    "lodash-es": "^4.17.21",
+    "uuid": "^11.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}

@@ -3,4 +3,4 @@ export * from './lib/components';
 export * from './lib/directives';
 export * from './lib/pipes';
 export * from './lib/services';
-export * from './lib/format/format';
+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,80 @@
+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 Position{
+  top = 'top',
+  bottom = 'bottom',
+  left = 'left',
+  right = 'right',
+}
+
+export enum FieldSize {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+  xl = 'xl',
+}
+
+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 PositionType = keyof typeof Position;
+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);
+  });
+});