@verisoft/ui-primeng 18.6.0 → 18.7.0

package/assets/sass/main.scss

@@ -0,0 +1,28 @@
+@import "primeng/resources/primeng.min.css";
+@import "primeicons/primeicons.css";
+@import "primeng/resources/themes/saga-orange/theme.css";
+
+@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/tristatecheckbox';
+@import './layout/header';
+@import './layout/sidemenu';
+@import './layout/loader';
+@import './layout/dropdown';
+@import './layout/app';

package/assets/sass/themes/_verisoft_theme.scss

@@ -0,0 +1,46 @@
+$primary-color: #f7a711;
+$secondary-color: #64748b;
+$details-color: #ffeecd;
+$success-color: #90cb8a;
+$error-color: #e27575;
+$soft-error-color: #ffeeed;
+$bg-color: #ffffff;
+$white-color: #ffffff;
+$disabled-color: #646464;
+
+$theme: (
+  'primary': $primary-color,
+  'secondary': $secondary-color,
+  'details': $details-color,
+  'success': $success-color,
+  'error': $error-color,
+  'danger': $error-color,
+  'soft-error': $soft-error-color,
+  'white': $white-color,
+  'disabled': $disabled-color,
+);
+
+:root {
+  @each $key, $value in $theme {
+    .bg-#{$key} {
+      background: $value !important;
+    }
+
+    .text-#{$key} {
+      color: $value !important;
+
+      @if $key == 'error' {
+        padding-left: 0rem !important;
+      }
+    }
+  }
+
+  hr {
+    background-color: $primary-color;
+    border: none;
+    height: 0.125rem;
+  }
+
+  background-color: $white-color !important;
+}
+

package/assets/sass/utils/_utils.scss

@@ -0,0 +1,39 @@
+.w-025 {
+    width: 0.25rem;
+}
+
+.w-050 {
+    width: 0.5rem;
+}
+
+.w-1 {
+    width: 1rem;
+}
+
+.w-2 {
+    width: 2rem;
+}
+
+.w-3 {
+    width: 3rem;
+}
+
+.w-4 {
+    width: 4rem;
+}
+
+.w-5 {
+    width: 5rem;
+}
+
+.w-6 {
+    width: 6rem;
+}
+
+.w-7 {
+    width: 7rem;
+}
+
+.w-8 {
+    width: 8rem;
+}

package/assets/sass/utils/_variables.scss

@@ -0,0 +1,12 @@
+:root {
+  --primary-color: #f7a711;
+  --primary-color-semitransparent:#f7a71180;
+  --secondary-color: #64748b;
+  --details-color: #ffeecd;
+  --success-color: #90cb8a;
+  --error-color: #e27575;
+  --soft-error-color: #ffeeed;
+  --bg-color: #ffffff;
+  --white-color: #ffffff;
+  --disabled-color: #646464;
+}

package/assets/sass/vendors/_bootstrap.scss

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

package/assets/sass/vendors/_primeng.scss

@@ -0,0 +1,2 @@
+@import 'primeicons/primeicons.css';
+@import 'primeng/resources/themes/saga-orange/theme.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,15 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/src/libs/ui-primeng",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+    "assets": [
+    {
+      "glob": "**/*",
+      "input": "./src/sass/",
+      "output": "/sass/"
+    },
+    "./assets/"
+  ]
+}

package/package.json

@@ -1,37 +1,22 @@
-{
-  "name": "@verisoft/ui-primeng",
-  "version": "18.6.0",
-  "peerDependencies": {
-    "@angular/common": "^18.2.8",
-    "@angular/core": "^18.2.8",
-    "primeng": "^17.18.11",
-    "rxjs": "~7.8.0",
-    "@angular/forms": "18.2.8",
-    "@angular/router": "18.2.8",
-    "@storybook/angular": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@angular/platform-browser": "18.2.8",
-    "@verisoft/core": "18.6.0",
-    "@faker-js/faker": "^8.4.1",
-    "@verisoft/ui-core": "18.6.0",
-    "uuid": "^10.0.0",
-    "@ngx-translate/core": "^15.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/verisoft-ui-primeng.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/verisoft-ui-primeng.mjs",
-      "esm": "./esm2022/verisoft-ui-primeng.mjs",
-      "default": "./fesm2022/verisoft-ui-primeng.mjs"
-    }
-  }
-}
+{
+  "name": "@verisoft/ui-primeng",
+  "version": "18.7.0",
+  "peerDependencies": {
+    "@angular/common": "^18.2.8",
+    "@angular/core": "^18.2.8",
+    "primeng": "^17.18.11",
+    "rxjs": "~7.8.0",
+    "@angular/forms": "18.2.8",
+    "@angular/router": "18.2.8",
+    "@storybook/angular": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@angular/platform-browser": "18.2.8",
+    "@verisoft/core": "18.7.0",
+    "@faker-js/faker": "^8.4.1",
+    "@verisoft/ui-core": "18.7.0",
+    "uuid": "^10.0.0",
+    "@ngx-translate/core": "^15.0.0"
+  },
+  "dependencies": {},
+  "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}

@@ -1,29 +1,29 @@
-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/tristatecheckbox';
-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/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/icons';
+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/tristatecheckbox';
+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/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/icons';

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

@@ -0,0 +1,12 @@
+<div class="v-breadcrumb card flex justify-content-center">
+  <ng-container *ngIf="useHomeRoute; else default">
+    <p-breadcrumb
+      class="max-w-full"
+      [model]="items | menuItem"
+      [home]="home"
+    ></p-breadcrumb>
+  </ng-container>
+  <ng-template #default>
+    <p-breadcrumb class="max-w-full" [model]="items | menuItem"></p-breadcrumb>
+  </ng-template>
+</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,29 @@
+import { CommonModule } from '@angular/common';
+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',
+  standalone: true,
+  imports: [
+    CommonModule,
+    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/{lib/components/breadcrumb/index.d.ts → src/lib/components/breadcrumb/index.ts}

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

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"
+      [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 { CommonModule } from '@angular/common';
+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';
+
+@Component({
+  selector: 'v-button',
+  standalone: true,
+  imports: [CommonModule, ButtonModule, RippleModule, RouterModule],
+  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/{lib/components/button/index.d.ts → src/lib/components/button/index.ts}

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

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

@@ -0,0 +1,53 @@
+<div class="v-calendar w-100">
+  <ng-container *ngIf="label && !floatLabel">
+    <v-form-field
+      class="w-100"
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [display]="formDisplay"
+    >
+      <p-calendar
+        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>
+  </ng-container>
+  <ng-container *ngIf="floatLabel">
+    <p-floatLabel>
+      <p-calendar
+        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>
+  </ng-container>
+</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();
+  });
+});