@verisoft/ui-primeng 20.0.0 → 20.1.1

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/checkbox/index.ts

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

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',
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,73 @@
+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',
+    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/src/lib/components/confirm-dialog/index.ts

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

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

@@ -0,0 +1,93 @@
+<div class="v-dropdown">
+  @if (label && !floatLabel) {
+    <v-form-field
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [testId]="testId"
+      [display]="formDisplay"
+      >
+      <p-select
+        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-select>
+    </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  }
+  @if (!label && !floatLabel) {
+    <p-select
+      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-select>
+  }
+  @if (floatLabel && !label) {
+    <p-floatLabel>
+      <p-select
+        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-select>
+      <label [for]="inputId">{{ floatLabel }}</label>
+    </p-floatLabel>
+  }
+</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();
+  });
+});

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

@@ -0,0 +1,139 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Optional,
+  Output,
+  Self,
+  SimpleChanges,
+  ViewEncapsulation,
+  OnInit,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { FilterEvent, LazyLoadEvent } from '@verisoft/core';
+import {
+  BaseFormInputComponent,
+  BaseInputControls,
+  DROPDOWN_COMPONENT_TOKEN,
+  DropdownCore
+} from '@verisoft/ui-core';
+import { ScrollerOptions } from 'primeng/api';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { MessageModule } from 'primeng/message';
+import { ScrollerLazyLoadEvent } from 'primeng/scroller';
+import { SelectModule, SelectFilterEvent } from 'primeng/select';
+import { TooltipModule } from 'primeng/tooltip';
+import { Subject } from 'rxjs';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+    selector: 'v-dropdown',
+    imports: [
+    ReactiveFormsModule,
+    SelectModule,
+    TooltipModule,
+    FormFieldComponent,
+    MessageModule,
+    FloatLabelModule,
+    ErrorComponent
+],
+    templateUrl: './dropdown.component.html',
+    styleUrls: ['./dropdown.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    providers: [
+        {
+            provide: BaseInputControls,
+            useExisting: forwardRef(() => DropdownComponent),
+            multi: true,
+        },
+        {
+            provide: DROPDOWN_COMPONENT_TOKEN,
+            useExisting: DropdownComponent,
+        },
+    ]
+})
+export class DropdownComponent<T>
+  extends BaseFormInputComponent
+  implements
+    ControlValueAccessor,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    DropdownCore<T>
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() options: T[] | undefined = [];
+  @Input() optionLabel: string | undefined;
+  @Input() optionValue: string | undefined;
+  @Input() dropdownIcon?: string;
+  @Input() floatLabel?: string;
+  @Input() editable = false;
+  @Input() loading = false;
+  @Input() lazy = false;
+  @Input() filter = true;
+  @Input() forceMinWidth = false;
+  @Input() showFilter = false;
+  @Input() localSearch = false;
+
+  @Output() showed = new EventEmitter<any>();
+  @Output() cleared = new EventEmitter<any>();
+  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
+  @Output() filtered = new EventEmitter<FilterEvent>();
+
+  private destroy$ = new Subject<void>();
+
+  virtualScrollOptions!: ScrollerOptions | undefined;
+  virtualOptionSize = 37.5;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['lazy'] || changes['loading']) {
+      this.virtualScrollOptions = this.lazy
+        ? {
+            showLoader: this.loading,
+            lazy: true,
+            onLazyLoad: this.onLazyLoad.bind(this),
+          }
+        : undefined;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  onLazyLoad(event: ScrollerLazyLoadEvent): void {
+    this.lazyLoad.emit({
+      offset: event.first,
+      limit: event.last - event.first,
+    });
+  }
+
+  filterChange(event: SelectFilterEvent): void {
+    this.filtered.emit({
+      filter: event.filter,
+    });
+  }
+
+  onDropdownShow(): void {
+    this.showed.emit();
+  }
+
+  onDropdownClear(): void {
+    this.cleared.emit();
+  }
+}

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

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

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

@@ -0,0 +1 @@
+<p>NOT implemented </p>

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

@@ -0,0 +1,20 @@
+import { Component, input } from "@angular/core";
+import { DropdownButtonCore, DROPDOWN_BUTTON_COMPONENT_TOKEN, ControlSeverityType, ControlSeverity, FieldSizeType, MenuItem } from "@verisoft/ui-core";
+
+@Component({
+    selector: 'v-dropdown-button',
+    templateUrl: './dropdown-button.component.html',
+    providers: [
+        { provide: DROPDOWN_BUTTON_COMPONENT_TOKEN, useExisting: DropdownButtonComponent }
+    ]
+})
+ export class DropdownButtonComponent implements DropdownButtonCore {
+    label = input<string | undefined>();
+    icon = input<string | undefined>();
+    rounded = input<boolean | undefined>(false);
+    raised = input<boolean | undefined>(false);
+    outlined = input<boolean | undefined>(false);
+    severity = input<ControlSeverityType | undefined>(ControlSeverity.primary);
+    size = input<FieldSizeType | undefined>();
+    items = input<MenuItem[] | undefined>(undefined);
+ }

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

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

package/src/lib/components/errors/error.component.html

@@ -0,0 +1,7 @@
+
+@if (ngControl && ngControl.errors) {
+  <p-message
+    [severity]="severity"
+    text="{{ getErrorMessage(ngControl.errors) | async }}">
+  </p-message>
+}

package/src/lib/components/errors/error.component.scss

@@ -0,0 +1,3 @@
+.p-message-content {
+    color: #e60017;
+}