@verisoft/ui-primeng 18.0.0

package/src/lib/components/button/directives/shortcut.directive.ts

@@ -0,0 +1,37 @@
+import { Directive, HostListener, Input } from "@angular/core";
+
+@Directive({
+    // eslint-disable-next-line @angular-eslint/directive-selector
+    selector: 'v-button[useShortCut]',
+    exportAs: 'useShortCut',
+    standalone: true,
+  })
+  export class ButtonShortCutDirective
+  {
+     @Input() shortCutFn?: () => void;
+     @Input() shortCutKey!: string;
+
+     private keyMap: { [key: string]: boolean } = {};
+
+     @HostListener('document:keydown', ['$event'])
+     onKeyDown(event: KeyboardEvent) {
+       this.keyMap[event.key.toLowerCase()] = true;
+       this.checkShortcut();
+     }
+   
+     @HostListener('document:keyup', ['$event'])
+     onKeyUp(event: KeyboardEvent) {
+       this.keyMap[event.key.toLowerCase()] = false;
+     }
+
+     private checkShortcut() {
+       if (this.shortCutKey && this.shortCutFn) {
+         const keys = this.shortCutKey.toLowerCase().split('+');
+         const isShortcutPressed = keys.every((key) => this.keyMap[key]);   
+         if (isShortcutPressed) {
+           this.shortCutFn?.();
+           keys.forEach((key) => (this.keyMap[key] = false));
+         }
+       }
+     }
+}

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

@@ -0,0 +1,2 @@
+export * from './button.component';
+export * from './directives/shortcut.directive';

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"
+      [ngControl]="ngControl"
+      [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>
+  </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"
+        [showIcon]="formControl && !formControl.value"
+        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();
+  });
+});

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

@@ -0,0 +1,67 @@
+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 { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-calendar',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    CalendarModule,
+    FormFieldComponent,
+    FloatLabelModule,
+  ],
+  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 = 'pi pi-calendar';
+  @Input() minDate!: Date;
+  @Input() header!: string;
+  @Input() footer!: string;
+  @Input() floatLabel?: string;
+  @Input() selectionMode: 'single' | 'multiple' | 'range' | undefined =
+    'single';
+
+  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,19 @@
+<div class="v-checkbox d-flex align-items-center mt-2">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [ngControl]="ngControl"
+    [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-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,41 @@
+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 { FormFieldComponent } from '../form-field';
+@Component({
+  selector: 'v-checkbox',
+  standalone: true,
+  imports: [CommonModule, CheckboxModule, ReactiveFormsModule, FormFieldComponent],
+  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
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

@@ -0,0 +1 @@
+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,
+  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 '../dynamic-component/dynamic-component.component';
+import { DialogService } from './services/confirm-dialog.service';
+
+@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) => {
+        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/src/lib/components/confirm-dialog/index.ts

@@ -0,0 +1,2 @@
+export * from './confirm-dialog.component';
+export * from './services/confirm-dialog.service';

package/src/lib/components/confirm-dialog/services/confirm-dialog.service.ts

@@ -0,0 +1,14 @@
+import { EventEmitter, Injectable, Output } from '@angular/core';
+import { DialogData } from '@verisoft/ui-core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DialogService {
+  @Output() showEvent: EventEmitter<DialogData> =
+    new EventEmitter<DialogData>();
+
+  showDialog(data: DialogData): void {
+    this.showEvent.emit(data);
+  }
+}