@verisoft/ui-primeng 19.0.1-1 → 20.1.0

package/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "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"
+      }
+    }
+  ]
+}

package/README.md

@@ -1,7 +1,381 @@
-# ui-primeng
+# @verisoft/ui-primeng
 
-This library was generated with [Nx](https://nx.dev).
+A comprehensive Angular UI component library built on top of PrimeNG that provides enterprise-grade components with modern design and extensive functionality. This library combines the power of PrimeNG with Verisoft's design patterns to deliver consistent, feature-rich user interfaces for business applications.
 
-## Running unit tests
+## Overview
+
+The `@verisoft/ui-primeng` library extends `@verisoft/ui-core` and leverages PrimeNG components to provide a complete set of UI components suitable for enterprise applications. It offers advanced data components, rich form controls, and sophisticated layout elements with built-in theming and internationalization support.
+
+## Features
+
+### Components
+- **Form Controls**: Advanced text fields, dropdowns, checkboxes, radio buttons, calendars, sliders
+- **Data Components**: Feature-rich tables with pagination, sorting, filtering, and export
+- **Navigation**: Breadcrumbs, side menus, tabs, stepper components with progress tracking
+- **Input Groups**: Complex input combinations with buttons, icons, and validation
+- **Feedback**: Toast notifications, confirm dialogs, loading indicators, tooltips
+- **Layout**: Headers, page headers, sections with collapsible content
+- **Advanced**: Multi-select with search, number inputs with formatting, password strength
+
+### Key Features
+- ✅ **PrimeNG Integration**: Built on top of the mature PrimeNG component library
+- ✅ **Enterprise Ready**: Components designed for complex business applications
+- ✅ **Rich Data Handling**: Advanced table features with virtual scrolling and lazy loading
+- ✅ **Theming Support**: Multiple built-in themes with customization options
+- ✅ **Internationalization**: Full i18n support with @ngx-translate integration
+- ✅ **Accessibility**: WCAG 2.1 compliant with keyboard navigation support
+- ✅ **Form Integration**: Deep Angular Reactive Forms integration with validation
+- ✅ **Performance**: Optimized for large datasets and complex UIs
+
+## Installation
+
+```bash
+npm install @verisoft/ui-primeng
+```
+
+### Peer Dependencies
+
+Make sure you have the following peer dependencies installed:
+
+```bash
+npm install @verisoft/core @verisoft/ui-core primeng @angular/core @angular/common @angular/forms @angular/platform-browser @angular/router rxjs @ngx-translate/core uuid
+```
+
+### Styling Setup
+
+Add PrimeNG CSS theme to your `angular.json` or import in your global styles:
+
+```json
+// angular.json
+"styles": [
+  "node_modules/primeng/resources/themes/saga-blue/theme.css",
+  "node_modules/primeng/resources/primeng.min.css",
+  "node_modules/primeicons/primeicons.css"
+]
+```
+
+Or in your global `styles.scss`:
+
+```scss
+@import 'primeng/resources/themes/saga-blue/theme.css';
+@import 'primeng/resources/primeng.min.css';
+@import 'primeicons/primeicons.css';
+```
+
+## Quick Start
+
+1. **Import individual components** in your Angular application:
+
+```typescript
+import { 
+  ButtonComponent, 
+  TextfieldComponent, 
+  FormFieldComponent 
+} from '@verisoft/ui-primeng';
+
+@Component({
+  imports: [ButtonComponent, TextfieldComponent, FormFieldComponent],
+  // ...
+})
+export class MyComponent { }
+```
+
+2. **Use components** in your templates:
+
+```html
+<v-button [primary]="true" icon="pi pi-check">Save Changes</v-button>
+<v-form-field label="Business Email">
+  <v-textfield formControlName="email" placeholder="Enter email address"></v-textfield>
+</v-form-field>
+```
+
+## Usage Examples
+
+### Advanced Form with Validation
+```typescript
+// Component
+import { FormBuilder, Validators } from '@angular/forms';
+import { 
+  ButtonComponent, 
+  TextfieldComponent, 
+  DropdownComponent, 
+  NumberInputComponent, 
+  CalendarComponent, 
+  MultiselectComponent, 
+  TextareaComponent, 
+  FormFieldComponent 
+} from '@verisoft/ui-primeng';
+
+@Component({
+  imports: [
+    ButtonComponent, 
+    TextfieldComponent, 
+    DropdownComponent, 
+    NumberInputComponent, 
+    CalendarComponent, 
+    MultiselectComponent, 
+    TextareaComponent, 
+    FormFieldComponent
+  ],
+  // ...
+})
+export class BusinessFormComponent {
+  form = this.fb.group({
+    companyName: ['', [Validators.required, Validators.minLength(3)]],
+    industry: ['', Validators.required],
+    employees: [null, [Validators.required, Validators.min(1)]],
+    foundedDate: [null, Validators.required],
+    features: [[]],
+    description: ['', Validators.maxLength(500)]
+  });
+
+  industries = [
+    { label: 'Technology', value: 'tech' },
+    { label: 'Healthcare', value: 'health' },
+    { label: 'Finance', value: 'finance' }
+  ];
+
+  features = [
+    { label: 'Online Payments', value: 'payments' },
+    { label: 'Customer Support', value: 'support' },
+    { label: 'Analytics', value: 'analytics' }
+  ];
+
+  constructor(private fb: FormBuilder) {}
+}
+```
+
+```html
+<!-- Template -->
+<form [formGroup]="form">
+  <v-form-field label="Company Name" [required]="true">
+    <v-textfield formControlName="companyName" placeholder="Enter company name"></v-textfield>
+  </v-form-field>
+  
+  <v-form-field label="Industry" [required]="true">
+    <v-dropdown formControlName="industry" [options]="industries" placeholder="Select industry"></v-dropdown>
+  </v-form-field>
+  
+  <v-form-field label="Number of Employees" [required]="true">
+    <v-number-input formControlName="employees" [min]="1" [max]="10000"></v-number-input>
+  </v-form-field>
+  
+  <v-form-field label="Founded Date" [required]="true">
+    <v-calendar formControlName="foundedDate" [showIcon]="true"></v-calendar>
+  </v-form-field>
+  
+  <v-form-field label="Required Features">
+    <v-multiselect formControlName="features" [options]="features" [filter]="true"></v-multiselect>
+  </v-form-field>
+  
+  <v-form-field label="Description">
+    <v-textarea formControlName="description" [rows]="4" [maxLength]="500"></v-textarea>
+  </v-form-field>
+  
+  <v-button [primary]="true" type="submit" [disabled]="form.invalid">Submit Application</v-button>
+</form>
+```
+
+### Advanced Data Table
+```typescript
+// Component
+import { TableComponent, PageHeaderComponent, ButtonComponent } from '@verisoft/ui-primeng';
+
+@Component({
+  imports: [TableComponent, PageHeaderComponent, ButtonComponent],
+  // ...
+})
+export class DataManagementComponent {
+  employees = [
+    { id: 1, name: 'John Doe', department: 'IT', salary: 75000, hireDate: new Date('2020-01-15') },
+    { id: 2, name: 'Jane Smith', department: 'HR', salary: 68000, hireDate: new Date('2019-03-20') }
+  ];
+
+  columns = [
+    { field: 'name', header: 'Employee Name', sortable: true, filter: true },
+    { field: 'department', header: 'Department', sortable: true, filter: true },
+    { field: 'salary', header: 'Salary', sortable: true, filter: true, type: 'currency' },
+    { field: 'hireDate', header: 'Hire Date', sortable: true, filter: true, type: 'date' }
+  ];
+
+  exportColumns = this.columns.map(col => ({ title: col.header, dataKey: col.field }));
+
+  exportPdf() {
+    // Export functionality
+  }
+
+  exportExcel() {
+    // Export functionality
+  }
+}
+```
+
+```html
+<!-- Template -->
+<v-page-header title="Employee Management">
+  <v-button icon="pi pi-download" label="Export PDF" (click)="exportPdf()"></v-button>
+  <v-button icon="pi pi-file-excel" label="Export Excel" (click)="exportExcel()"></v-button>
+</v-page-header>
+
+<v-table 
+  [data]="employees" 
+  [columns]="columns"
+  [sortable]="true"
+  [filterable]="true"
+  [pagination]="true"
+  [rows]="10"
+  [exportFilename]="'employees'"
+  [globalFilterFields]="['name', 'department']">
+  
+  <ng-template pTemplate="caption">
+    <div class="table-header">
+      <span>Employee Directory</span>
+      <span class="p-input-icon-left">
+        <i class="pi pi-search"></i>
+        <input pInputText type="text" (input)="table.filterGlobal($event.target.value, 'contains')" placeholder="Global Search" />
+      </span>
+    </div>
+  </ng-template>
+</v-table>
+```
+
+### Stepper Component for Multi-Step Process
+```typescript
+// Component
+import { StepperComponent, ButtonComponent } from '@verisoft/ui-primeng';
+
+@Component({
+  imports: [StepperComponent, ButtonComponent],
+  // ...
+})
+export class OnboardingComponent {
+  activeIndex = 0;
+  
+  steps = [
+    { label: 'Personal Info' },
+    { label: 'Company Details' },
+    { label: 'Preferences' },
+    { label: 'Confirmation' }
+  ];
+
+  nextStep() {
+    if (this.activeIndex < this.steps.length - 1) {
+      this.activeIndex++;
+    }
+  }
+
+  prevStep() {
+    if (this.activeIndex > 0) {
+      this.activeIndex--;
+    }
+  }
+}
+```
+
+```html
+<!-- Template -->
+<v-stepper [(activeIndex)]="activeIndex" [steps]="steps">
+  <v-step>
+    <!-- Personal Info Form -->
+    <h3>Personal Information</h3>
+    <!-- Form fields -->
+  </v-step>
+  
+  <v-step>
+    <!-- Company Details Form -->
+    <h3>Company Details</h3>
+    <!-- Form fields -->
+  </v-step>
+  
+  <v-step>
+    <!-- Preferences Form -->
+    <h3>Preferences</h3>
+    <!-- Form fields -->
+  </v-step>
+  
+  <v-step>
+    <!-- Confirmation -->
+    <h3>Review & Confirm</h3>
+    <!-- Summary -->
+  </v-step>
+</v-stepper>
+
+<div class="step-actions">
+  <v-button label="Back" (click)="prevStep()" [disabled]="activeIndex === 0"></v-button>
+  <v-button label="Next" (click)="nextStep()" [disabled]="activeIndex === steps.length - 1" [primary]="true"></v-button>
+</div>
+```
+
+## Theming
+
+The library supports multiple PrimeNG themes. You can switch themes by changing the CSS import:
+
+```scss
+// Light themes
+@import 'primeng/resources/themes/saga-blue/theme.css';      // Default
+@import 'primeng/resources/themes/saga-green/theme.css';
+@import 'primeng/resources/themes/saga-orange/theme.css';
+
+// Dark themes
+@import 'primeng/resources/themes/vela-blue/theme.css';
+@import 'primeng/resources/themes/vela-green/theme.css';
+@import 'primeng/resources/themes/arya-blue/theme.css';
+```
+
+## Internationalization
+
+The library includes built-in support for internationalization:
+
+```typescript
+// app.module.ts
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    })
+  ]
+})
+export class AppModule { }
+```
+
+## API Documentation
+
+For detailed component APIs, properties, and methods, please refer to:
+- Component documentation with IntelliSense
+- [PrimeNG Documentation](https://primeng.org/) for underlying component features
+- Verisoft component extensions and customizations
+
+## Development
+
+### Running unit tests
 
 Run `nx test ui-primeng` to execute the unit tests.
+
+### Building the library
+
+Run `nx build ui-primeng` to build the library.
+
+### Linting
+
+Run `nx lint ui-primeng` to run ESLint on the library.
+
+## Performance Tips
+
+- Use virtual scrolling for large datasets in tables
+- Implement lazy loading for dropdowns with many options
+- Use OnPush change detection strategy for better performance
+- Consider pagination for tables with extensive data
+
+## Contributing
+
+This library is part of the Verisoft framework. Please follow the established coding standards and ensure compatibility with PrimeNG updates.
+
+## License
+
+Copyright © Verisoft. All rights reserved.

package/assets/sass/main.scss

@@ -1,27 +1,10 @@
-@import "primeng/resources/primeng.min.css";
-@import "primeicons/primeicons.css";
-// Téma je nyní konfigurováno v app.config.ts pomocí providePrimeNG s Aura theme
 
-@import './base/typography';
-@import './utils/variables';
-@import './vendors/bootstrap';
-@import './utils/mixins';
-@import './utils/utils';
-@import './themes/verisoft_theme';
-@import './base/scrollbar';
-@import './layout/layout';
-@import './layout/tables';
-@import './layout/formField';
-@import './layout/radiobutton';
-@import './layout/snackbar';
-@import './layout/icons';
-@import './layout/inputSwitch';
-@import './layout/tree';
-@import './layout/button';
-@import './layout/dialog';
-@import './layout/checkbox';
-@import './layout/header';
-@import './layout/sidemenu';
-@import './layout/loader';
-@import './layout/dropdown';
-@import './layout/app';
+@use "primeicons/primeicons.css";
+
+@use './base/_typography';
+@use './utils/_variables';
+@use './vendors/_bootstrap';
+@use './utils/_mixins';
+@use './utils/_utils';
+@use './themes/_verisoft_theme';
+

package/assets/sass/themes/_verisoft_theme.scss

@@ -21,6 +21,8 @@ $theme: (
 );
 
 :root {
+ --p-primary-color: $primary-color;
+
   @each $key, $value in $theme {
     .bg-#{$key} {
       background: $value !important;

package/assets/sass/vendors/_bootstrap.scss

@@ -1,2 +1,2 @@
-@import 'node_modules/bootstrap/scss/bootstrap-grid.scss';
-@import 'node_modules/bootstrap/scss/bootstrap-utilities.scss';
+@use 'bootstrap/scss/bootstrap-grid.scss';
+@use 'bootstrap/scss/bootstrap-utilities.scss';

package/assets/sass/vendors/_primeng.scss

@@ -1,2 +1 @@
-@import 'primeicons/primeicons.css';
-// Téma je nyní konfigurováno v app.config.ts pomocí providePrimeNG s Aura theme
+@use 'primeicons/primeicons.css';

package/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'ui-primeng',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/src/libs/ui-primeng',
+  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,14 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/src/libs/ui-primeng",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "assets": [
+    "./assets/",
+    "README.md"
+  ],
+  "allowedNonPeerDependencies": [
+    "uuid"
+  ]
+}

package/package.json

@@ -1,33 +1,20 @@
 {
   "name": "@verisoft/ui-primeng",
-  "version": "19.0.1-1",
+  "version": "20.1.0",
   "peerDependencies": {
-    "@verisoft/core": "19.0.1-1",
-    "@verisoft/ui-core": "19.0.1-1",
-    "@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",
-    "primeng": "19.1.3",
-    "rxjs": "~7.8.0",
-    "@ngx-translate/core": "16.0.4",
-    "uuid": "^10.0.0",
-    "@faker-js/faker": "9.8.0"
+    "@verisoft/core": "~20.1.0",
+    "@verisoft/ui-core": "~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",
+    "@ngx-translate/core": "^17.0.0",
+    "primeng": "~20.0.1",
+    "rxjs": "~7.8.0"
   },
   "dependencies": {
-    "tslib": "^2.3.0"
+    "uuid": "^11.0.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/verisoft-ui-primeng.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/verisoft-ui-primeng.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/project.json

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

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

@@ -26,5 +26,9 @@ export * from './lib/components/switch';
 export * from './lib/interceptors/http-error-message.interceptor';
 export * from './lib/components/tab-view';
 export * from './lib/components/shared-components';
+export * from './lib/components/filter';
+export * from './lib/components/feature-list';
 export * from './lib/components/tooltip';
+export * from './lib/components/tag';
+export * from './lib/components/icon';
 export * from './lib/icons';

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

@@ -0,0 +1,11 @@
+<div class="v-breadcrumb card flex justify-content-center">
+  @if (useHomeRoute) {
+    <p-breadcrumb
+      class="max-w-full"
+      [model]="items | menuItem"
+      [home]="home"
+    ></p-breadcrumb>
+  } @else {
+    <p-breadcrumb class="max-w-full" [model]="items | menuItem"></p-breadcrumb>
+  }
+</div>

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

@@ -0,0 +1,18 @@
+p-breadcrumb > nav {
+  border: none;
+  > ol {
+    align-items: stretch;
+    font-weight: 600;
+    font-size: 1rem;
+  }
+  a[aria-current='page'] > span {
+    color: var(--primary-color) !important;
+  }
+}
+.p-menuitem-link {
+  gap: 0.5rem;
+  text-align: center;
+}
+.p-menuitem-text {
+  align-self: baseline;
+}

package/src/lib/components/breadcrumb/breadcrumb.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BreadcrumbComponent } from './breadcrumb.component';
+
+describe('BreadcrumbComponent', () => {
+  let component: BreadcrumbComponent;
+  let fixture: ComponentFixture<BreadcrumbComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BreadcrumbComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BreadcrumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});