@verisoft/ui-primeng 18.0.0

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

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

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

@@ -0,0 +1,24 @@
+<div class="v-section">
+  <div
+    class="v-section-header text-align-center d-flex"
+    [ngStyle]="{ 'background-color': backgroundColor }"
+  >
+    <p
+      class="text-primary align-items-center text-nowrap d-none d-md-block ps-3 m-0 w-100"
+    >
+      {{ title }}
+    </p>
+    <div class="d-flex">
+      <ng-content select="[actions]"></ng-content>
+      <v-button
+        size="small"
+        icon="pi {{ icon }}"
+        [text]="true"
+        (click)="toggle()"
+      />
+    </div>
+  </div>
+  <div class="v-section-content" *ngIf="showContent">
+    <ng-content></ng-content>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { SECTION_COMPONENT_TOKEN, SectionCore } from '@verisoft/ui-core';
+import { ButtonComponent } from '../button';
+
+@Component({
+  selector: 'v-section',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  templateUrl: './section.component.html',
+  styleUrl: './section.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: SECTION_COMPONENT_TOKEN, useExisting: SectionComponent },
+  ],
+})
+export class SectionComponent 
+  implements SectionCore
+{
+  @Input() title!: string;
+  @Input() showContent = true;
+  @Input() backgroundColor!: string;
+
+  protected icon = 'pi-angle-down';
+
+  protected toggle(): void {
+    this.showContent = !this.showContent;
+    this.icon = this.showContent ? 'pi-angle-down' : 'pi-angle-up';
+  }
+}

package/src/lib/components/side-menu/index.ts

@@ -0,0 +1,2 @@
+export * from './side-menu.module';
+export * from './side-menu.component';

package/src/lib/components/side-menu/side-menu.component.html

@@ -0,0 +1,55 @@
+<div class="v-side-menu" #sidemenu>
+  <div
+    [ngClass]="
+      (screenSizeService.isMobileBlock | async)
+        ? 'v-side-menu-container__mobile'
+        : 'v-side-menu-container'
+    "
+  >
+    <ng-container *ngIf="(screenSizeService.isMobileBlock | async) === false">
+      <div class="v-side-menu-header pb-3 text-center">
+        <div class="logo" [routerLink]="[logoRouterLink]">
+          <img [src]="logoUrl" alt="" />
+        </div>
+        <hr />
+      </div>
+    </ng-container>
+    <div
+      [ngClass]="{
+        'v-side-menu-body__mobile':
+          screenSizeService.isMobileBlock | async,
+        'v-side-menu-body':
+          (screenSizeService.isMobileBlock | async) === false
+      }"
+      class="text-center"
+    >
+      <p-tree
+        selectionMode="single"
+        [value]="menuService.menuItems$ | async"
+        (onNodeExpand)="onSelectionChange($event)"
+        (onNodeCollapse)="onSelectionChange($event)"
+        (onNodeSelect)="onNodeSelect($event)"
+      >
+      </p-tree>
+    </div>
+    <div
+      class="text-center py-3 d-flex justify-content-end flex-column support"
+    >
+      <hr class="mx-4 divider" />
+      <p-button
+        class="support-button"
+        label="Support"
+        [text]="true"
+        severity="primary"
+        icon="pi pi-question-circle"
+      ></p-button>
+    </div>
+  </div>
+  <div
+    *ngIf="(screenSizeService.isMobileBlock | async) === false"
+    class="close-button"
+    (click)="menuMinimalize(sidemenu)"
+  >
+    <i class="pi pi-chevron-left text-white close-icon"></i>
+  </div>
+</div>

package/src/lib/components/side-menu/side-menu.component.spec.ts

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

package/src/lib/components/side-menu/side-menu.component.ts

@@ -0,0 +1,97 @@
+import { AsyncPipe, NgClass, NgIf } from '@angular/common';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ISideMenu, MenuItem, SideMenuService, UnsubscribeComponent } from '@verisoft/ui-core';
+import { AvatarModule } from 'primeng/avatar';
+import { ButtonModule } from 'primeng/button';
+import { TreeModule, TreeNodeSelectEvent } from 'primeng/tree';
+import { ScreenSizeService } from '../../services/screen-size.service';
+
+@Component({
+  selector: 'v-side-menu',
+  standalone: true,
+  imports: [
+    NgClass,
+    AsyncPipe,
+    NgIf,
+    TreeModule,
+    ButtonModule,
+    TranslateModule,
+    AvatarModule,
+    RouterModule,
+  ],
+  templateUrl: './side-menu.component.html',
+  styleUrl: './side-menu.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SideMenuComponent
+  extends UnsubscribeComponent
+  implements ISideMenu, AfterContentInit
+{
+  @Input() item: MenuItem[] = [];
+  @Input() logoUrl = '';
+  @Input() userName!: string;
+  @Input() userRole!: any | any[] | undefined;
+  @Output() minimalized = new EventEmitter<boolean>();
+  @Output() itemSelected = new EventEmitter<MenuItem>();
+  
+  @ViewChild ('sidemenu', { static: true }) menu!: ElementRef<HTMLDivElement>;
+
+  menuService = inject(SideMenuService);
+  router = inject(Router);
+
+  protected screenSizeService = inject(ScreenSizeService);
+  protected logoRouterLink!: string;
+  protected isMinimalized = false;
+
+  ngAfterContentInit(): void {
+    if (this.menuService.menuMinimalized) {
+      this.setMenuMinimalized(this.menu);
+    }
+  }
+  
+  protected menuMinimalize(menu: HTMLDivElement): void {
+    const audit = document.getElementsByClassName('detail-audit');
+    if (audit.length > 0) {
+      audit.item(0)?.classList.toggle('menu-close__audit');
+    }
+    if (menu) {
+      menu.classList.toggle('menu-closed');
+      this.isMinimalized = menu.classList.contains('menu-closed');
+      this.menuService.saveMinimalizedState(this.isMinimalized);
+      this.minimalized.emit(this.isMinimalized);
+    }
+  }
+
+  onSelectionChange(event: any) {
+    const item = event.node;
+    if (item.label) {
+      this.menuService.saveExpandedState(item);
+    }
+  }
+
+  onNodeSelect(event: TreeNodeSelectEvent): void {
+    const item = event.node as MenuItem;
+    if (item.url) {
+      this.router.navigateByUrl(item.url);
+    }
+  }
+
+  private setMenuMinimalized(menu: ElementRef<HTMLDivElement>): void {
+    if(menu) {
+      menu.nativeElement.classList.add("menu-closed");
+      this.minimalized.emit(true);
+    }
+  }
+}

package/src/lib/components/side-menu/side-menu.module.ts

@@ -0,0 +1,66 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import {
+  MENU_TOKEN,
+  MenuItem,
+  SIDE_MENU_COMPONENT_TOKEN,
+  SIDE_MENU_STATE_TOKEN,
+  SideMenuModuleConfig,
+  SideMenuProviderService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { SideMenuComponent } from './side-menu.component';
+
+@NgModule({
+  imports: [SideMenuComponent],
+  exports: [SideMenuComponent],
+  providers: [
+    SideMenuProviderService,
+    {
+      provide: SIDE_MENU_COMPONENT_TOKEN,
+      useExisting: SideMenuComponent,
+    },
+    {
+      provide: SIDE_MENU_STATE_TOKEN,
+      useValue: localStorage.getItem('SideMenuStateToken') ?? {
+        expanded: [],
+        minimalized: false,
+      },
+    },
+  ],
+})
+export class SideMenuModule extends UnsubscribeComponent {
+  constructor(private readonly service: SideMenuProviderService) {
+    super();
+  }
+
+  static forRoot(
+    config?: SideMenuModuleConfig
+  ): ModuleWithProviders<SideMenuModule> {
+    const moduleWithProvider: ModuleWithProviders<SideMenuModule> = {
+      ngModule: SideMenuModule,
+    };
+
+    if (config?.items) {
+      moduleWithProvider.providers = [
+        {
+          provide: MENU_TOKEN,
+          useValue: config.items,
+        },
+      ];
+    }
+
+    return moduleWithProvider;
+  }
+
+  static forChild(menu: MenuItem[]): ModuleWithProviders<SideMenuModule> {
+    return {
+      ngModule: SideMenuModule,
+      providers: [
+        {
+          provide: MENU_TOKEN,
+          useValue: menu,
+        },
+      ],
+    };
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+<div class="v-slider">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [ngControl]="ngControl"
+    [testId]="testId"
+  >
+    <p-slider
+      class="w-100"
+      [formControl]="formControl"
+      [step]="step"
+      [range]="range"
+      [min]="min"
+      [max]="max"
+    />
+  </v-form-field>
+</div>

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

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

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

@@ -0,0 +1,56 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseFormInputComponent, BaseInputControls, SLIDER_COMPONENT_TOKEN, SliderCore } from '@verisoft/ui-core';
+import { SliderModule } from 'primeng/slider';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-slider',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SliderModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+  ],
+  templateUrl: './slider.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: forwardRef(() => SliderComponent),
+    },
+    {
+      provide: SLIDER_COMPONENT_TOKEN,
+      useExisting: SliderComponent,
+    },
+  ],
+})
+export class SliderComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, SliderCore
+{
+  @Input() step = 1;
+
+  @Input() min = 0;
+
+  @Input() max = 100;
+
+  @Input() range = false;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

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

package/src/lib/components/snackbar/services/snackbar.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { MessageService } from 'primeng/api';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SnackbarService {
+  constructor(readonly messageService: MessageService) {}
+
+  showSuccess(message: string, icon?: string) {
+    this.messageService.add({
+      severity: 'success',
+      summary: 'Success',
+      detail: message,
+      icon: icon,
+    });
+  }
+
+  showInfo(message: string, icon?: string) {
+    this.messageService.add({
+      severity: 'info',
+      summary: 'Info',
+      detail: message,
+      icon: icon,
+    });
+  }
+
+  showWarn(message: string, icon?: string) {
+    this.messageService.add({
+      severity: 'warn',
+      summary: 'Warn',
+      detail: message,
+      icon: icon,
+    });
+  }
+
+  showError(message: string, icon?: string) {
+    this.messageService.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: message,
+      icon: icon,
+    });
+  }
+}

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

@@ -0,0 +1,3 @@
+<div class="v-snackbar">
+    <p-toast />
+</div>

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

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

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

@@ -0,0 +1,70 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { MessageService } from 'primeng/api';
+import { ToastModule } from 'primeng/toast';
+import { ButtonComponent } from '../button/button.component';
+import { SnackbarService } from './services/snackbar.service';
+import { SnackbarComponent } from './snackbar.component';
+
+const meta: Meta<SnackbarComponent> = {
+  component: SnackbarComponent,
+  title: 'SnackbarComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonComponent, BrowserAnimationsModule, ToastModule],
+      providers: [
+        MessageService,
+        SnackbarService,
+        {
+          provide: ActivatedRoute,
+          useValue: {},
+        },
+      ],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<SnackbarComponent>;
+const messageService = new MessageService();
+const snackbarService = new SnackbarService(messageService);
+
+export const Primary: Story = {
+  render: () => {
+    return {
+      props: {
+        showSuccess: () => snackbarService.showSuccess('Snackbar works!'),
+        showInfo: () => snackbarService.showInfo('Snackbar works!'),
+        showWarn: () => snackbarService.showWarn('Snackbar works!'),
+        showError: () => snackbarService.showError('Snackbar works!'),
+      },
+      template: `
+      <v-snackbar class="mt-2" />
+        <div class="d-flex gap-3 mt-2">
+          <v-button
+            label="Show Success"
+            severity="success"
+            (click)='showSuccess()'
+          ></v-button>
+          <v-button
+            label="Show Info"
+            severity="info"
+            (click)='showInfo()'
+          ></v-button>
+          <v-button
+            label="Show Warn"
+            severity="warn"
+            (click)='showWarn()'
+          ></v-button>
+          <v-button
+            label="Show Error"
+            severity="danger"
+            (click)='showError()'
+          ></v-button>
+        </div>
+      `,
+    };
+  },
+  args: {},
+};

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

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { SNACKBAR_COMPONENT_TOKEN, SnackbarCore } from '@verisoft/ui-core';
+import { RippleModule } from 'primeng/ripple';
+import { ToastModule } from 'primeng/toast';
+import { SnackbarService } from './services/snackbar.service';
+
+@Component({
+  selector: 'v-snackbar',
+  standalone: true,
+  imports: [CommonModule, ToastModule, RippleModule],
+  templateUrl: './snackbar.component.html',
+  styleUrl: './snackbar.component.scss',
+  providers: [
+    SnackbarService,
+    {
+      provide: SNACKBAR_COMPONENT_TOKEN,
+      useExisting: SnackbarComponent,
+    },
+  ],
+})
+export class SnackbarComponent 
+  implements SnackbarCore
+{
+  constructor(private snackbarService: SnackbarService) {}
+}

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

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

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

@@ -0,0 +1,43 @@
+<div class="v-stepper">
+  <p-stepper>
+    <p-stepperPanel
+      *ngFor="let item of items; let index = index"
+      [header]="item.header"
+    >
+      <ng-template
+        pTemplate="content"
+        let-nextCallback="nextCallback"
+        let-prevCallback="prevCallback"
+        let-index="index"
+      >
+        <ng-container *ngIf="item.template && item.template.elementRef">
+          <ng-template
+            *ngTemplateOutlet="
+              item.template;
+              context: { item: item, index: index }
+            "
+          />
+        </ng-container>
+        <div class="d-flex pt-4 justify-content-between">
+          <v-button
+            *ngIf="index > 0"
+            label="Back"
+            icon="pi pi-arrow-left"
+            size="small"
+            [outlined]="true"
+            (click)="prevCallback.emit()"
+          />
+
+          <v-button
+            *ngIf="index < items.length - 1"
+            label="Next"
+            size="small"
+            icon="pi pi-arrow-right"
+            iconPos="right"
+            (click)="nextCallback.emit()"
+          />
+        </div>
+      </ng-template>
+    </p-stepperPanel>
+  </p-stepper>
+</div>

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

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