@verisoft/ui-primeng 19.0.1-1 → 20.1.0

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/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/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/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();
+  });
+});

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

@@ -0,0 +1,72 @@
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+  Validators,
+} from '@angular/forms';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CheckboxComponent } from './checkbox.component';
+
+const meta: Meta<CheckboxComponent> = {
+  component: CheckboxComponent,
+  title: 'CheckboxComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+};
+export default meta;
+type StoryOb = StoryObj<CheckboxComponent>;
+
+export const Primary: StoryOb = {
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    label: 'Test checkbox',
+    disabled: false,
+    readonly: false,
+    required: false,
+  },
+  argTypes: {
+    label: {
+      description:
+        'Label shown on the right side of the `VerisoftCheckbox` input',
+    },
+    required: {
+      description: 'Can be set via formControl `Validators.requiredTrue`',
+      control: { disable: true },
+    },
+    disabled: {
+      description: 'Sets `disabled` state',
+    },
+    readonly: {
+      description: 'Sets `readonly` state',
+    },
+  },
+};
+
+export const CheckboxRequired: StoryOb = {
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    label: 'Agree to terms and conditions',
+    formControl: new UntypedFormControl(false, Validators.requiredTrue),
+    disabled: false,
+    readonly: false,
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description:
+        'Represents the `label` of the `CheckboxComponent`. Label is also being used as `placeholder` if the placeholder is not set',
+    },
+    formControl: {
+      description: 'Form control with `Validators.requiredTrue` set',
+      control: { disable: true },
+    },
+    disabled: { description: 'Sets `disabled` state' },
+    readonly: { description: 'Sets `readonly` state' },
+  },
+};

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

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseFormInputComponent, BaseInputControls, CHECKBOX_COMPONENT_TOKEN, CheckboxCore } from '@verisoft/ui-core';
+import { CheckboxModule } from 'primeng/checkbox';
+import { Icons } from '../../icons';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+@Component({
+  selector: 'v-checkbox',
+  imports: [CommonModule, CheckboxModule, ReactiveFormsModule, FormFieldComponent, ErrorComponent],
+  templateUrl: './checkbox.component.html',
+  styleUrl: './checkbox.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: CheckboxComponent,
+    },
+    {
+      provide: CHECKBOX_COMPONENT_TOKEN,
+      useExisting: CheckboxComponent,
+    },
+  ]
+})
+export class CheckboxComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, CheckboxCore {
+  indeterminate = input(false);
+
+  icon = Icons
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

package/src/lib/components/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,51 @@
+@if (data) {
+  <div class="v-dialog d-flex justify-content-center">
+    <p-dialog
+      [(visible)]="visible"
+      [modal]="true"
+      [closable]="closable"
+      [style]="{ width: '25rem' }"
+      >
+      <ng-template pTemplate="header">
+        <div
+          class="v-dialog-header w-100 align-items-center d-flex justify-content-center"
+          >
+          <h1 class="text-center me-3">{{ data.title }}</h1>
+          <i class="{{ data.headerIcon }} text-{{ data.severity }}"></i>
+        </div>
+      </ng-template>
+      <div class="v-dialog-content w-100 align-items-center text-center">
+        @if (data.innerHTML) {
+          <div [innerHTML]="data.innerHTML"></div>
+        } @else if (data.componentType) {
+          <v-dynamic-component
+            [componentType]="data.componentType"
+            [data]="$any(data.data)"
+          ></v-dynamic-component>
+        }
+      </div>
+      <ng-template pTemplate="footer">
+        <div
+          class="v-dialog-footer d-flex justify-content-center w-100 gap-3"
+        [ngClass]="{
+          'flex-row-reverse': data.buttonOrder === 'cancel-confirm'
+        }"
+          >
+          <v-button
+            [label]="data.confirmButtonText ?? 'Yes'"
+            [severity]="data.severity"
+            (click)="data.confirmButtonFn ? dialogClick(true) : (visible = false)"
+            />
+          @if (data.showCancelButton && data.severity !== 'success') {
+            <v-button
+              [label]="data.cancelButtonText ?? 'No'"
+              [outlined]="true"
+              [severity]="'secondary'"
+              (click)="data.cancelButtonFn ? dialogClick(false) : (visible = false)"
+              />
+          }
+        </div>
+      </ng-template>
+    </p-dialog>
+  </div>
+}

package/src/lib/components/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,3 @@
+.v-dialog-content * {
+  line-height: 1.5rem;
+}

package/src/lib/components/confirm-dialog/confirm-dialog.component.spec.ts

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

package/src/lib/components/confirm-dialog/confirm-dialog.component.stories.ts

@@ -0,0 +1,74 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { ButtonComponent } from '../button';
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+
+const meta: Meta<ConfirmDialogComponent> = {
+  component: ConfirmDialogComponent,
+  title: 'ConfirmDialogComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [BrowserAnimationsModule, ButtonComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: ActivatedRoute,
+        },
+      ],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<ConfirmDialogComponent>;
+const dataOptions = [
+  {
+    headerIcon: 'pi pi-times',
+    severity: 'danger',
+    confirmButtonText: 'Agreed',
+    innerHtml:
+      'You are <b class="text-danger">not allowed</b> to do that. Please contact <b>admin</b>.',
+    label: 'Danger',
+  },
+  {
+    headerIcon: 'pi pi-check',
+    severity: 'success',
+    confirmButtonText: 'Agreed',
+    innerHtml: 'Item <b class="text-success">successfully</b> saved.',
+    label: 'Success',
+  },
+  {
+    headerIcon: 'pi pi-exclamation-triangle',
+    severity: 'primary',
+    confirmButtonText: 'Agreed',
+    innerHtml:
+      'You might be <b class="text-primary">not allowed</b> to do that. Please contact <b>admin</b>.',
+    label: 'Warn',
+  },
+];
+
+const dataOptionsMap = {
+  Danger: dataOptions[0],
+  Success: dataOptions[1],
+  Warn: dataOptions[2],
+};
+
+export const Primary = {
+  args: {
+    visible: true,
+    data: dataOptions[0],
+  },
+  argTypes: {
+    data: {
+      options: dataOptionsMap,
+      control: {
+        type: 'select',
+        labels: {
+          danger: 'Danger',
+          success: 'Success',
+          warn: 'Warn',
+        },
+      },
+    },
+  },
+};