@verisoft/ui-primeng 18.6.0 → 18.7.0

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

@@ -0,0 +1,72 @@
+import { CommonModule } from '@angular/common';
+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 { CalendarModule } from 'primeng/calendar';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { Icons } from '../../icons';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-calendar',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    CalendarModule,
+    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/{lib/components/calendar/index.d.ts → src/lib/components/calendar/index.ts}

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

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

@@ -0,0 +1,19 @@
+<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"
+    />
+    <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,45 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  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',
+  standalone: true,
+  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
+{
+
+  icon = Icons
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

package/{lib/components/checkbox/index.d.ts → src/lib/components/checkbox/index.ts}

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

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

@@ -0,0 +1,48 @@
+<div class="v-dialog d-flex justify-content-center" *ngIf="data">
+  <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)"
+        />
+        <v-button
+          *ngIf="data.showCancelButton && data.severity !== 'success'"
+          [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',
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,74 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import {
+  CONFIRM_DIALOG_COMPONENT_TOKEN,
+  ConfirmDialogCore,
+  DialogData,
+  DialogService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { AvatarModule } from 'primeng/avatar';
+import { DialogModule } from 'primeng/dialog';
+import { takeUntil } from 'rxjs';
+import { ButtonComponent } from '../button';
+import { DynamicComponent } from '../shared-components';
+
+@Component({
+  selector: 'v-confirm-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DialogModule,
+    ButtonComponent,
+    AvatarModule,
+    DynamicComponent,
+  ],
+  templateUrl: './confirm-dialog.component.html',
+  styleUrl: './confirm-dialog.component.scss',
+  providers: [
+    {
+      provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
+      useExisting: ConfirmDialogComponent,
+    },
+  ],
+})
+export class ConfirmDialogComponent
+  extends UnsubscribeComponent
+  implements OnInit, ConfirmDialogCore
+{
+  constructor(
+    private readonly dialogService: DialogService,
+    private readonly cdr: ChangeDetectorRef
+  ) {
+    super();
+  }
+
+  visible = false;
+  protected closable = false;
+  data!: DialogData;
+
+  ngOnInit(): void {
+    this.dialogService.showEvent
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((x: DialogData) => {
+        this.data = x;
+        this.visible = true;
+        this.cdr.detectChanges();
+      });
+  }
+
+  protected dialogClick(confirm: boolean) {
+    const { confirmButtonFn, cancelButtonFn } = this.data;
+
+    if (confirm && confirmButtonFn) {
+      confirmButtonFn();
+    }
+
+    if (!confirm && cancelButtonFn) {
+      cancelButtonFn();
+    }
+
+    this.visible = false;
+    this.cdr.detectChanges();
+  }
+}

package/{lib/components/confirm-dialog/index.d.ts → src/lib/components/confirm-dialog/index.ts}

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

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

@@ -0,0 +1,96 @@
+<div class="v-dropdown">
+  <ng-container *ngIf="label && !floatLabel">
+    <v-form-field
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [testId]="testId"
+      [display]="formDisplay"
+    >
+      <p-dropdown
+        [baseZIndex]="9999"
+        class="w-100"
+        appendTo="body"
+        [formControl]="formControl"
+        [filter]="filter"
+        [title]="label"
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [loading]="loading"
+        [placeholder]="placeholder ?? ''"
+        [virtualScroll]="lazy"
+        [virtualScrollItemSize]="virtualOptionSize"
+        [virtualScrollOptions]="virtualScrollOptions"
+        [tooltip]="tooltip"
+        [required]="isRequired()"
+        [showClear]="formControl && clearable && !readonly"
+        [editable]="editable"
+        [dataKey]="optionValue"
+        (showEvent)="onDropdownShow()"
+        (clearEvent)="onDropdownClear()"
+        (onFilter)="filterChange($event)"
+      >
+      </p-dropdown>
+    </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </ng-container>
+  <ng-container *ngIf="!label && !floatLabel">
+    <p-dropdown
+      [baseZIndex]="9999"
+      class="w-100"
+      appendTo="body"
+      [formControl]="formControl"
+      [filter]="filter"
+      [title]="label"
+      [options]="options"
+      [optionLabel]="optionLabel"
+      [optionValue]="optionValue"
+      [loading]="loading"
+      [placeholder]="placeholder ? placeholder : label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [showClear]="formControl && clearable && !readonly"
+      [editable]="editable"
+      [dataKey]="optionValue"
+      [virtualScroll]="lazy"
+      [virtualScrollItemSize]="virtualOptionSize"
+      [virtualScrollOptions]="virtualScrollOptions"
+      (showEvent)="onDropdownShow()"
+      (clearEvent)="onDropdownClear()"
+      (onFilter)="filterChange($event)"
+    >
+    </p-dropdown>
+  </ng-container>
+  <ng-container *ngIf="floatLabel && !label">
+    <p-floatLabel>
+      <p-dropdown
+        [baseZIndex]="9999"
+        class="w-100"
+        appendTo="body"
+        [formControl]="formControl"
+        [title]="label"
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [loading]="loading"
+        [placeholder]="placeholder ? placeholder : label"
+        [filter]="filter"
+        [tooltip]="tooltip"
+        [required]="isRequired()"
+        [showClear]="formControl && clearable && !readonly"
+        [editable]="editable"
+        [dataKey]="optionValue"
+        [virtualScroll]="lazy"
+        [virtualScrollItemSize]="virtualOptionSize"
+        [virtualScrollOptions]="virtualScrollOptions"
+        (showEvent)="onDropdownShow()"
+        (clearEvent)="onDropdownClear()"
+        (onFilter)="filterChange($event)"
+        (lazyLoad)="onLazyLoad($any($event))"
+      >
+      </p-dropdown>
+      <label [for]="inputId">{{ floatLabel }}</label>
+    </p-floatLabel>
+  </ng-container>
+</div>

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

@@ -0,0 +1,16 @@
+.v-dropdown {
+  justify-content: center;
+  width: 100%;
+}
+
+.p-dropdown-items-wrapper,
+.p-scroller-viewport,
+.p-scroller {
+  min-width: 8rem !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.p-dropdown {
+  width: 100%;
+}

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

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