@verisoft/ui-primeng 18.6.0 → 18.7.0

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

@@ -0,0 +1,90 @@
+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();
+  },
+};

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

@@ -0,0 +1,144 @@
+import { CommonModule } from '@angular/common';
+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 {
+  DropdownFilterEvent,
+  DropdownModule,
+} from 'primeng/dropdown';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { MessageModule } from 'primeng/message';
+import { ScrollerLazyLoadEvent } from 'primeng/scroller';
+import { TooltipModule } from 'primeng/tooltip';
+import { Subject } from 'rxjs';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-dropdown',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    DropdownModule,
+    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: DropdownFilterEvent): void {
+    this.filtered.emit({
+      filter: event.filter,
+    });
+  }
+
+  onDropdownShow(): void {
+    this.showed.emit();
+  }
+
+  onDropdownClear(): void {
+    this.cleared.emit();
+  }
+}

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

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

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

@@ -0,0 +1,6 @@
+
+<p-message
+    *ngIf="ngControl && ngControl.errors" 
+    [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;
+}

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

@@ -0,0 +1,35 @@
+import { CommonModule } from "@angular/common";
+import { Component, inject, Input, } from "@angular/core";
+import { NgControl, ValidationErrors } from "@angular/forms";
+import { ERROR_PROVIDER_TOKEN } from "@verisoft/core";
+import { SlotPosition, SlotPositionType } from "@verisoft/ui-core";
+import { MessageModule } from "primeng/message";
+import { Observable } from "rxjs";
+import { Icons } from "../../icons";
+
+@Component({
+  selector: "v-validation-message",
+  templateUrl: "./error.component.html",
+  styleUrl: "./error.component.scss",
+  standalone: true,
+  imports: [CommonModule, MessageModule],
+})
+export class ErrorComponent {
+  @Input({ required: true }) ngControl?: NgControl;
+  
+  @Input() errorSlot: SlotPositionType = SlotPosition.bottom
+  
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom
+  
+  @Input() variant = 'simple';
+  
+  @Input() severity = 'error';
+  
+  readonly errorService = inject(ERROR_PROVIDER_TOKEN);
+
+  icons = Icons
+
+  getErrorMessage(errors: ValidationErrors): Observable<string> {
+    return this.errorService.mapError(errors);
+  }
+}

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

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

package/src/lib/components/form-field/form-field.component.html

@@ -0,0 +1,36 @@
+<div class="v-form-field mt-3" [attr.data-testId]="testId">
+  <div [ngClass]="{ 'd-block d-md-flex': display === 'flex', 'd-lg-flex': display === 'block' }">
+      <div class="col-12 col-md-4 d-flex align-items-center">
+        <label
+          class="v-formfield-label d-flex align-items-center"
+          [ngClass]="{
+            'pb-2': display === 'block',
+            'text-error': (errorProvider.mapError(ngControl?.errors ?? [])) && ngControl?.dirty, 
+            'text-warning': (ngControl?.errors | warning) && ngControl?.dirty,
+            'text-default': !ngControl?.invalid && !ngControl?.dirty,
+            'text-secondary': !ngControl?.invalid && ngControl?.dirty
+          }"
+        >{{ label }}<span *ngIf="label">:</span>
+          <span *ngIf="required" class="text-error ps-1">*</span>
+        </label>
+        <i *ngIf="tooltip"
+          [pTooltip]="tooltip"
+          class="ps-2 text-default v-tooltip {{ icons.infoCircle }}"
+        ></i>
+      </div>
+      <div 
+        class="col-sm-12 col-md-8 col-lg-8"
+      >
+        <div 
+          class="v-form-field-content align-items-center w-100"
+          [ngClass]="{ 'd-flex': display === 'flex', 'd-block': display === 'block', 'input-warning': ngControl?.errors | warning }"
+        >
+          <ng-content></ng-content>
+        </div>
+      </div>
+      <div class="align-content-center">
+        <ng-container>
+        </ng-container>
+      </div>
+  </div>
+</div>

package/src/lib/components/form-field/form-field.component.spec.ts

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

package/src/lib/components/form-field/form-field.component.stories.ts

@@ -0,0 +1,69 @@
+import { NgControl } from '@angular/forms';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { FormFieldComponent } from './form-field.component';
+
+const meta: Meta<FormFieldComponent> = {
+  component: FormFieldComponent,
+  title: 'FormFieldComponent',
+};
+export default meta;
+type Story = StoryObj<FormFieldComponent>;
+
+export const Primary: Story = {
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    label: 'Label showcase',
+    tooltip: 'This is a tooltip lorem ipsum',
+    required: false,
+    testId: '123',
+    display: 'flex',
+    ngControl: {} as NgControl,
+  },
+  argTypes: {
+    ngControl: {
+      control: false,
+      description: 'NgControl which is provided from a form component',
+    },
+    display: {
+      options: ['flex', 'block'],
+      control: {
+        type: 'radio',
+      },
+      description:
+        'Defines if the **FormFieldComponent** is in `flex` or `block` display mode',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Defines if the **FormFieldComponent** is `required`',
+    },
+    testId: {
+      control: {
+        type: 'text',
+      },
+      description: 'Sets the **FormFieldComponent** `test id`',
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Sets the **FormFieldComponent** `label`',
+    },
+    tooltip: {
+      control: {
+        type: 'text',
+      },
+      description: 'Sets the **FormFieldComponent** `tooltip`',
+    },
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText('Label showcase')).toBeTruthy();
+    expect(canvas.queryAllByText('This is a tooltip lorem ipsum')).toBeTruthy();
+    expect(canvas.findByTestId('123')).toBeTruthy();
+  },
+};

package/src/lib/components/form-field/form-field.component.ts

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, Optional, Self } from '@angular/core';
+import { NgControl, ReactiveFormsModule } from '@angular/forms';
+import { ERROR_PROVIDER_TOKEN } from '@verisoft/core';
+import { BaseFormInputComponent, FormFieldCore, WarningPipe } from '@verisoft/ui-core';
+import { MessageModule } from 'primeng/message';
+import { TooltipModule } from 'primeng/tooltip';
+import { Icons } from '../../icons';
+
+@Component({
+  selector: 'v-form-field',
+  standalone: true,
+  imports: [
+    CommonModule,
+    WarningPipe,
+    ReactiveFormsModule,
+    MessageModule,
+    TooltipModule,
+  ],
+  templateUrl: './form-field.component.html',
+  styleUrl: './form-field.component.scss',
+})
+export class FormFieldComponent
+  extends BaseFormInputComponent
+  implements FormFieldCore
+{
+  @Input() display: 'flex' | 'block' = 'block';
+  
+  @Input() variant!: 'simple';
+
+  protected readonly errorProvider = inject(ERROR_PROVIDER_TOKEN)
+  
+  icons = Icons;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

package/{lib/components/form-field/index.d.ts → src/lib/components/form-field/index.ts}

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

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

@@ -0,0 +1,84 @@
+<div
+  class="v-header d-flex w-100 text-align-end"
+  [ngStyle]="{ position: exampleHeader ? 'relative' : 'fixed' }"
+>
+  <ng-container *ngIf="screenSizeService.isMobileBlock | async">
+    <div class="burger-menu">
+      <v-button
+      [icon]="menuVisible ? icons.cross : icons.action"
+        (click)="toggleMenu()"
+      />
+      <div class="logo mt-3" [routerLink]="[logoRouterLink]">
+        <img [src]="logoUrl" alt=""/>
+      </div>
+    </div>
+  </ng-container>
+  <div class="v-header-title col-auto">
+    <p class="text-primary text-nowrap d-none d-md-block ps-3 m-0 w-100">
+      {{ title }}
+    </p>
+    <div class="col-8 col-md-auto ps-3 m-0 w-100">
+      <ng-content select="[module]"></ng-content>
+    </div>
+  </div>
+  <ng-container *ngIf="(screenSizeService.isMobileBlock | async) === false">
+    <div class="w-100 text-start justify-content-start align-content-center">
+      <ng-content select="[breadcrumbs]"></ng-content>
+    </div>
+    <div class="col-auto d-flex align-items-center justify-content-end p-4">
+      <div class="d-flex aling-items-center">
+        <p-avatar
+          image="assets/primeng/images/_global/jara.png"
+          styleClass="me-2"
+          size="large"
+          shape="circle"
+        />
+        <div class="card align-content-center pe-3">
+          <p
+            class="text-primary m-0 header-username"
+            [innerHTML]="userName"
+          ></p>
+          <p
+            class="text-default m-0 header-userrole"
+            [innerHTML]="userRole"
+          ></p>
+        </div>
+      </div>
+      <div class="d-flex gap-4 align-items-center">
+        <ng-content select="[useractions]"/>
+      </div>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="screenSizeService.isMobileBlock | async">
+    <div class="user-info-container d-flex align-items-center">
+      <div class="d-flex">
+        <div class="card pe-3 align-content-center">
+          <p-avatar
+            image="assets/images/_global/jara.png"
+            styleClass="mr-2"
+            size="large"
+            shape="circle"
+          ></p-avatar>
+        </div>
+        <div class="card align-content-center pe-3 d-flex">
+          <div class="user-info">
+            <p
+              class="text-default m-0 header-username"
+              [innerHTML]="userName"
+            ></p>
+            <p
+              class="text-default m-0 header-userrole"
+              [innerHTML]="userRole"
+            ></p>
+          </div>
+          <div class="user-actions">
+            <ng-content select="[useractions]"></ng-content>
+          </div>
+        </div>
+      </div>
+      <div class="d-flex gap-4 align-items-center justify-content-center">
+        <ng-content select="[dbcontext]" />
+      </div>
+    </div>
+  </ng-container>
+</div>

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

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

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { HeaderComponent } from './header.component';
+
+const meta: Meta<HeaderComponent> = {
+  component: HeaderComponent,
+  title: 'HeaderComponent',
+};
+export default meta;
+type Story = StoryObj<HeaderComponent>;
+
+export const Primary: Story = {
+  args: {
+    title: 'verisoft',
+    userName: 'Elon Musk',
+    userRole: 'Mars Owner',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText('verisoft')).toBeTruthy();
+    expect(canvas.findByText('Elon Musk')).toBeTruthy();
+    expect(canvas.findByText('Mars Owner')).toBeTruthy();
+  },
+};

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

@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {
+  HEADER_COMPONENT_TOKEN,
+  HeaderCore,
+  ScreenSizeService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { AvatarModule } from 'primeng/avatar';
+import { Icons } from '../../icons';
+import { ButtonComponent } from '../button';
+import { HeaderProviderService } from './services/header-provider.service';
+
+@Component({
+  selector: 'v-header',
+  standalone: true,
+  imports: [CommonModule, AvatarModule, ButtonComponent, RouterModule],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: HEADER_COMPONENT_TOKEN, useExisting: HeaderComponent },
+  ],
+})
+export class HeaderComponent
+  extends UnsubscribeComponent
+  implements OnInit, HeaderCore
+{
+  constructor(
+    readonly providerService: HeaderProviderService,
+    readonly screenSizeService: ScreenSizeService,
+    readonly cdr: ChangeDetectorRef
+  ) {
+    super();
+  }
+
+  @Input() title!: string;
+  @Input() logoUrl!: string;
+  @Input() userName!: string;
+  @Input() userRole!: any | any[] | undefined;
+  @Input() menuRef!: HTMLDivElement;
+  @Input() exampleHeader = false;
+
+  icons = Icons;
+  protected menuVisible = false;
+  protected logoRouterLink!: string;
+
+  ngOnInit(): void {
+    this.providerService.init();
+  }
+
+  toggleMenu() {
+    if (this.menuRef) {
+      this.menuVisible = !this.menuVisible;
+      this.menuRef.classList.toggle('menu-visible');
+      this.cdr.detectChanges();
+    }
+  }
+}

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

@@ -1,2 +1,2 @@
-export * from './header.component';
-export * from './services/header-provider.service';
+export * from './header.component';
+export * from './services/header-provider.service';

package/src/lib/components/header/services/header-provider.service.ts

@@ -0,0 +1,15 @@
+import { Inject, Injectable } from '@angular/core';
+import { SETTINGS_MENU } from '@verisoft/ui-core';
+import { MenuItem } from '@verisoft/ui-core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeaderProviderService {
+  constructor(@Inject(SETTINGS_MENU) private settingsMenu: MenuItem[]) {}
+  menu: MenuItem[] = [];
+
+  init(): void {
+    this.menu = this.settingsMenu;
+  }
+}