@verisoft/ui-primeng 20.1.1 → 20.1.3

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

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

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

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

@@ -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,73 +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',
-    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

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

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

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

@@ -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.ts

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

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

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

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

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

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

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

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

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

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

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