@verisoft/ui-primeng 18.5.0 → 18.6.0

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

@@ -1,72 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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/src/lib/components/confirm-dialog/confirm-dialog.component.html

@@ -1,48 +0,0 @@
-<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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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/src/lib/components/dropdown/dropdown.component.html

@@ -1,96 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-.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

@@ -1,21 +0,0 @@
-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.stories.ts

@@ -1,90 +0,0 @@
-import { UntypedFormControl, Validators } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { faker } from '@faker-js/faker';
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { within, expect } from '@storybook/test';
-import { DropdownComponent } from './dropdown.component';
-
-const meta: Meta<DropdownComponent<any>> = {
-  component: DropdownComponent,
-  title: 'DropdownComponent',
-  decorators: [
-    moduleMetadata({
-      imports: [BrowserAnimationsModule],
-    }),
-  ],
-};
-export default meta;
-type Story = StoryObj<DropdownComponent<any>>;
-const options = Array(5)
-  .fill(0)
-  .map((x, i) => {
-    return {
-      id: i,
-      name: faker.airline.airline().name,
-    };
-  });
-export const Primary: Story = {
-  parameters: {
-    controls: { expanded: true },
-  },
-  args: {
-    options: options,
-    optionLabel: 'name',
-    optionValue: 'id',
-  },
-  argTypes: {
-    optionLabel: {
-      description:
-        'String value that sets matching `T[property]` as a label value, where `property = optionLabel`',
-    },
-    optionValue: {
-      description:
-        'String value that sets matching `T[property]` as a binding value, where `property = optionValue`',
-    },
-    options: { description: 'Array of `T`' },
-  },
-};
-
-export const DropdownWithFormControl: Story = {
-  parameters: {
-    controls: { expanded: true },
-  },
-  args: {
-    options: options,
-    optionLabel: 'name',
-    optionValue: 'id',
-    label: 'Airline names',
-    placeholder: 'Select an option',
-    clearable: true,
-    formControl: new UntypedFormControl(undefined, Validators.required),
-  },
-  argTypes: {
-    formControl: {
-      control: false,
-      description: 'Form control with `Validators.required` set',
-    },
-    clearable: {
-      description: 'Defines if the `DropdownComponent` is clearable',
-    },
-    label: {
-      description:
-        'Represents the `label` of the `DropdownComponent`. Label is also being used as `placeholder` if the placeholder is not set',
-    },
-    optionLabel: {
-      description:
-        'String value that sets matching `T[property]` as a label value, where `property = optionLabel`',
-    },
-    optionValue: {
-      description:
-        'String value that sets matching `T[property]` as a binding value, where `property = optionValue`',
-    },
-    placeholder: { description: 'Placeholder for the `DropdownComponent`' },
-    options: { description: 'Array of `T`' },
-  },
-  play: async ({ canvasElement }: any) => {
-    const canvas = within(canvasElement);
-    expect(canvas.getByTitle('Airline names')).toBeTruthy();
-    expect(canvas.findByPlaceholderText('Select an option')).toBeTruthy();
-  },
-};