@verisoft/ui-primeng 20.0.0 → 20.1.1

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/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,9 +1,9 @@
 {
   "name": "@verisoft/ui-primeng",
-  "version": "20.0.0",
+  "version": "20.1.1",
   "peerDependencies": {
-    "@verisoft/core": "~20.0.0",
-    "@verisoft/ui-core": "~20.0.0",
+    "@verisoft/core": "~20.1.1",
+    "@verisoft/ui-core": "~20.1.1",
     "@angular/core": "~20.2.0",
     "@angular/common": "~20.2.0",
     "@angular/forms": "~20.2.0",
@@ -14,19 +14,7 @@
     "rxjs": "~7.8.0"
   },
   "dependencies": {
-    "uuid": "^11.0.0",
-    "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/src/index.ts

@@ -0,0 +1,34 @@
+export * from './lib/components/input-group';
+export * from './lib/components/textfield';
+export * from './lib/components/breadcrumb';
+export * from './lib/components/checkbox';
+export * from './lib/components/calendar';
+export * from './lib/components/form-field';
+export * from './lib/components/password';
+export * from './lib/components/section';
+export * from './lib/components/button/button.component';
+export * from './lib/components/dropdown-button';
+export * from './lib/components/radiobutton';
+export * from './lib/components/number-input';
+export * from './lib/components/header';
+export * from './lib/components/textarea';
+export * from './lib/components/loader';
+export * from './lib/components/snackbar';
+export * from './lib/components/side-menu';
+export * from './lib/components/table';
+export * from './lib/components/page-header';
+export * from './lib/components/stepper';
+export * from './lib/components/dropdown';
+export * from './lib/components/multiselect';
+export * from './lib/components/slider';
+export * from './lib/components/confirm-dialog';
+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();
+  });
+});

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

@@ -0,0 +1,36 @@
+import { ActivatedRoute } from '@angular/router';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { BreadcrumbComponent } from './breadcrumb.component';
+
+const meta: Meta<BreadcrumbComponent> = {
+  component: BreadcrumbComponent,
+  title: 'BreadcrumbComponent',
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: ActivatedRoute,
+        },
+      ],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<BreadcrumbComponent>;
+export const Primary: Story = {
+  args: {
+    homeRoute: '123',
+    useHomeRoute: true,
+    items: [
+      { label: 'Contract', routerLink: '123' },
+      { label: 'List', routerLink: './list' },
+    ],
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText('Contract')).toBeTruthy();
+    expect(canvas.getByText('List')).toBeTruthy();
+  },
+};

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

@@ -0,0 +1,27 @@
+
+import {
+  Component,
+} from '@angular/core';
+import {
+  BREADCRUMB_COMPONENT_TOKEN,
+  BreadcrumbCoreComponent,
+} from '@verisoft/ui-core';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { ConvertMenuItemPipe } from './breadcrumb.pipe';
+
+@Component({
+    selector: 'v-breadcrumb',
+    imports: [
+    BreadcrumbModule,
+    ConvertMenuItemPipe
+],
+    templateUrl: './breadcrumb.component.html',
+    styleUrl: './breadcrumb.component.scss',
+    providers: [
+        {
+            provide: BREADCRUMB_COMPONENT_TOKEN,
+            useExisting: BreadcrumbComponent
+        },
+    ]
+})
+export class BreadcrumbComponent extends BreadcrumbCoreComponent { }

package/src/lib/components/breadcrumb/breadcrumb.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { MenuItem as VerisoftMenuItem } from "@verisoft/ui-core";
+import { MenuItem as PrimeMenuItem } from "primeng/api";
+
+@Pipe({
+  name: 'menuItem',
+  standalone: true,
+})
+export class ConvertMenuItemPipe implements PipeTransform {
+  transform(items: VerisoftMenuItem[]): PrimeMenuItem[] {
+    return items.map(i => i as PrimeMenuItem);
+  }
+}

package/src/lib/components/breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb.component';

package/src/lib/components/button/button-severity.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ControlSeverity, ControlSeverityType } from '@verisoft/ui-core';
+import { ButtonSeverity } from 'primeng/button';
+
+@Pipe({
+    name: 'buttonSeverity'
+})
+export class ButtonSeverityPipe implements PipeTransform {
+    transform(severity: ControlSeverityType | undefined | null): ButtonSeverity {
+        if (severity === undefined || severity === null) {
+            return null;
+        }
+
+        if (severity === ControlSeverity.warning) {
+            return 'warn';
+        }
+
+        return severity;
+    }
+}

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

@@ -0,0 +1,20 @@
+<div class="v-button d-inline-block" 
+(click)="fireClick($event)">
+  <a
+    [routerLink]="routerLink ? routerLink : undefined"
+    [queryParams]="queryParams ? queryParams : undefined"
+  >
+    <p-button
+      [disabled]="disabled"
+      [icon]="icon"
+      [badge]="badge"
+      [outlined]="outlined"
+      [rounded]="rounded"
+      [raised]="raised"
+      [label]="label"
+      [size]="$any(size)"
+      [severity]="severity | buttonSeverity"
+      [iconPos]="iconPos"
+    />
+  </a>
+</div>

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

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

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

@@ -0,0 +1,49 @@
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Params, RouterModule } from '@angular/router';
+import {
+  BUTTON_COMPONENT_TOKEN,
+  ButtonCore,
+  ControlSeverityType,
+  FieldSizeType,
+  IconPosition,
+  IconPositionType,
+} from '@verisoft/ui-core';
+import { ButtonModule } from 'primeng/button';
+import { RippleModule } from 'primeng/ripple';
+import { ButtonSeverityPipe } from "./button-severity.pipe";
+
+@Component({
+  selector: 'v-button',
+  imports: [ButtonModule, RippleModule, RouterModule, ButtonSeverityPipe],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: BUTTON_COMPONENT_TOKEN,
+      useExisting: ButtonComponent,
+    },
+  ]
+})
+export class ButtonComponent implements ButtonCore {
+  @Input() label?: string;
+  @Input() icon?: string;
+  @Input() badge?: string;
+  @Input() iconPos: IconPositionType = IconPosition.right;
+  @Input() disabled!: boolean;
+  @Input() rounded!: boolean;
+  @Input() outlined!: boolean;
+  @Input() raised!: boolean;
+  @Input() severity?: ControlSeverityType;
+  @Input() routerLink!: any[];
+  @Input() size: FieldSizeType | undefined;
+  @Input() queryParams?: Params;
+
+  fireClick(event: Event): void {
+    if (this.disabled) {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    }
+  }
+}

package/src/lib/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button.component';

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

@@ -0,0 +1,53 @@
+<div class="v-calendar w-100">
+  @if (label && !floatLabel) {
+    <v-form-field
+      class="w-100"
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [display]="formDisplay"
+      >
+      <p-date-picker
+        appendTo="body"
+        [style]="{'width':'100%'}"
+        [inputStyle]="{'width':'100%'}"
+        [formControl]="formControl"
+        [showClear]="clearable"
+        [dataType]="'string'"
+        [selectionMode]="selectionMode"
+        [icon]="icon"
+        [maxDate]="maxDate"
+        [id]="inputId"
+        [showButtonBar]="true"
+        [placeholder]="placeholder"
+        [required]="isRequired()"
+        [minDate]="minDate"
+        [showIcon]="formControl && !formControl.value"
+        iconDisplay="input"
+        />
+    </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  }
+  @if (floatLabel) {
+    <p-floatLabel>
+      <p-date-picker
+        appendTo="body"
+        [style]="{'width':'100%'}"
+        [inputStyle]="{'width':'100%'}"
+        [formControl]="formControl"
+        [showClear]="clearable"
+        [maxDate]="maxDate"
+        [id]="inputId"
+        [icon]="icon"
+        [selectionMode]="selectionMode"
+        [showButtonBar]="true"
+        [placeholder]="placeholder"
+        [required]="isRequired()"
+        [minDate]="minDate"
+        iconDisplay="input"
+        />
+      <label [for]="inputId" [innerHTML]="floatLabel"></label>
+    </p-floatLabel>
+  }
+</div>
+

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

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

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

@@ -0,0 +1,70 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  BaseFormInputComponent,
+  BaseInputControls,
+  CALENDAR_COMPONENT_TOKEN,
+  CalendarCore,
+} from '@verisoft/ui-core';
+import { DatePicker } from 'primeng/datepicker';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { Icons } from '../../icons';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+    selector: 'v-calendar',
+    imports: [
+    ReactiveFormsModule,
+    DatePicker,
+    FormFieldComponent,
+    FloatLabelModule,
+    ErrorComponent
+],
+    templateUrl: './calendar.component.html',
+    styleUrl: './calendar.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: BaseInputControls,
+            useExisting: forwardRef(() => CalendarComponent),
+        },
+        {
+            provide: CALENDAR_COMPONENT_TOKEN,
+            useExisting: CalendarComponent,
+        },
+    ]
+})
+export class CalendarComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, CalendarCore
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() maxDate!: Date;
+  @Input() icon = Icons.calendar;
+  @Input() minDate!: Date;
+  @Input() header!: string;
+  @Input() footer!: string;
+  @Input() floatLabel: string | undefined;
+  @Input() selectionMode: 'single' | 'multiple' | 'range' | undefined =
+    'single';
+
+    icons = Icons;
+
+  override formDisplay: "flex" | "block" = "block";
+}

package/src/lib/components/calendar/index.ts

@@ -0,0 +1 @@
+export * from './calendar.component';

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

@@ -0,0 +1,20 @@
+<div class="v-checkbox d-flex align-items-center mt-2">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [testId]="testId"
+    [display]="formDisplay"
+  >
+    <p-checkbox
+      [ngClass]="{ 'checkbox-error': ngControl?.invalid && ngControl?.dirty && ngControl?.value === false }"
+      [formControl]="formControl"
+      [required]="required"
+      [binary]="true"
+      [readonly]="readonly"
+      [indeterminate]="indeterminate()"
+    />
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </v-form-field>
+</div>

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

@@ -0,0 +1,15 @@
+p-echeckbox.ng-dirty.ng-invalid {
+    .p-checkbox>.p-checkbox-box {
+        border-color: var(--error-color);
+    }
+
+    .p-checkbox-label {
+        color: var(--error-color);
+    }
+}
+
+.checkbox-error {
+    .p-checkbox-box.p-highlight {
+        background: var(--error-color);
+    }
+}

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

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