@verisoft/ui-primeng 18.7.0 → 18.8.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,66 +0,0 @@
-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/src/lib/components/header/services/header-provider.service.ts

@@ -1,15 +0,0 @@
-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;
-  }
-}

package/src/lib/components/input-group/input-group.component.html

@@ -1,30 +0,0 @@
-<div class="v-input-group w-100">
-  <v-form-field
-    [label]="label"
-    [required]="required"
-    [tooltip]="tooltip"  >
-    <p-inputGroup>
-      <ng-container *ngFor="let item of items">
-        <p-inputGroupAddon *ngIf="item.position === 'left'">
-          <ng-container *ngIf="item.icon">
-            <i [class]="item.icon"></i>
-          </ng-container>
-          <ng-container *ngIf="item.text">
-            {{ item.text }}
-          </ng-container>
-        </p-inputGroupAddon>
-      </ng-container>
-      <input pInputText [formControl]="formControl" class="w-100" />
-      <ng-container *ngFor="let item of items">
-        <p-inputGroupAddon *ngIf="item.position === 'right'">
-          <ng-container *ngIf="item.icon">
-            <i [class]="item.icon"></i>
-          </ng-container>
-          <ng-container *ngIf="item.text">
-            {{ item.text }}
-          </ng-container>
-        </p-inputGroupAddon>
-      </ng-container>
-    </p-inputGroup>
-  </v-form-field>
-</div>

package/src/lib/components/input-group/input-group.component.spec.ts

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