@verisoft/ui-primeng 18.0.0

package/src/assets/sass/layout/_tables.scss

@@ -0,0 +1,5 @@
+.veriosft-table {
+    ::-webkit-scrollbar-thumb {
+        background-color: var(--primary-color);
+    }
+}

package/src/assets/sass/layout/_tree.scss

@@ -0,0 +1,12 @@
+.p-treenode-content {
+    justify-content: flex-start;
+}
+
+.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background-color: transparent;
+    border: 1px solid var(--primary-color);
+
+    span {
+        color: var(--primary-color);
+    }
+}

package/src/assets/sass/layout/_tristatecheckbox.scss

@@ -0,0 +1,15 @@
+p-tristatecheckbox.ng-dirty.ng-invalid {
+    .p-checkbox>.p-checkbox-box {
+        border-color: var(--error-color);
+    }
+
+    .p-checkbox-label {
+        color: var(--error-color);
+    }
+}
+
+.tristate-error {
+    .p-checkbox-box.p-highlight {
+        background: var(--error-color);
+    }
+}

package/src/assets/sass/main.scss

@@ -0,0 +1,28 @@
+@import "primeng/resources/primeng.min.css";
+@import "primeicons/primeicons.css";
+@import "primeng/resources/themes/saga-orange/theme.css";
+
+@import './base/typography';
+@import './utils/variables';
+@import './vendors/bootstrap';
+@import './utils/mixins';
+@import './utils/utils';
+@import './themes/verisoft_theme';
+@import './base/scrollbar';
+@import './layout/layout';
+@import './layout/tables';
+@import './layout/formField';
+@import './layout/radiobutton';
+@import './layout/snackbar';
+@import './layout/icons';
+@import './layout/inputSwitch';
+@import './layout/tree';
+@import './layout/button';
+@import './layout/dialog';
+@import './layout/checkbox';
+@import './layout/tristatecheckbox';
+@import './layout/header';
+@import './layout/sidemenu';
+@import './layout/loader';
+@import './layout/dropdown';
+@import './layout/app';

package/src/assets/sass/themes/_verisoft_theme.scss

@@ -0,0 +1,46 @@
+$primary-color: #f7a711;
+$secondary-color: #64748b;
+$details-color: #ffeecd;
+$success-color: #90cb8a;
+$error-color: #e27575;
+$soft-error-color: #ffeeed;
+$bg-color: #ffffff;
+$white-color: #ffffff;
+$disabled-color: #646464;
+
+$theme: (
+  'primary': $primary-color,
+  'secondary': $secondary-color,
+  'details': $details-color,
+  'success': $success-color,
+  'error': $error-color,
+  'danger': $error-color,
+  'soft-error': $soft-error-color,
+  'white': $white-color,
+  'disabled': $disabled-color,
+);
+
+:root {
+  @each $key, $value in $theme {
+    .bg-#{$key} {
+      background: $value !important;
+    }
+
+    .text-#{$key} {
+      color: $value !important;
+
+      @if $key == 'error' {
+        padding-left: 0rem !important;
+      }
+    }
+  }
+
+  hr {
+    background-color: $primary-color;
+    border: none;
+    height: 0.125rem;
+  }
+
+  background-color: $white-color !important;
+}
+

package/src/assets/sass/utils/_utils.scss

@@ -0,0 +1,39 @@
+.w-025 {
+    width: 0.25rem;
+}
+
+.w-050 {
+    width: 0.5rem;
+}
+
+.w-1 {
+    width: 1rem;
+}
+
+.w-2 {
+    width: 2rem;
+}
+
+.w-3 {
+    width: 3rem;
+}
+
+.w-4 {
+    width: 4rem;
+}
+
+.w-5 {
+    width: 5rem;
+}
+
+.w-6 {
+    width: 6rem;
+}
+
+.w-7 {
+    width: 7rem;
+}
+
+.w-8 {
+    width: 8rem;
+}

package/src/assets/sass/utils/_variables.scss

@@ -0,0 +1,12 @@
+:root {
+  --primary-color: #f7a711;
+  --primary-color-semitransparent:#f7a71180;
+  --secondary-color: #64748b;
+  --details-color: #ffeecd;
+  --success-color: #90cb8a;
+  --error-color: #e27575;
+  --soft-error-color: #ffeeed;
+  --bg-color: #ffffff;
+  --white-color: #ffffff;
+  --disabled-color: #646464;
+}

package/src/assets/sass/vendors/_bootstrap.scss

@@ -0,0 +1,2 @@
+@import 'node_modules/bootstrap/scss/bootstrap-grid.scss';
+@import 'node_modules/bootstrap/scss/bootstrap-utilities.scss';

package/src/assets/sass/vendors/_primeng.scss

@@ -0,0 +1,2 @@
+@import 'primeicons/primeicons.css';
+@import 'primeng/resources/themes/saga-orange/theme.css';

package/src/index.ts

@@ -0,0 +1,31 @@
+export * from './lib/components/action-button-group';
+export * from './lib/components/input-group';
+export * from './lib/components/textfield';
+export * from './lib/components/breadcrumb';
+export * from './lib/components/checkbox';
+export * from './lib/components/tristatecheckbox';
+export * from './lib/components/calendar';
+export * from './lib/components/form-field';
+export * from './lib/components/password';
+export * from './lib/components/section';
+export * from './lib/components/button/button.component';
+export * from './lib/components/radiobutton';
+export * from './lib/components/number-input';
+export * from './lib/components/header';
+export * from './lib/components/textarea';
+export * from './lib/components/loader';
+export * from './lib/components/snackbar';
+export * from './lib/components/side-menu';
+export * from './lib/components/table';
+export * from './lib/components/page-header';
+export * from './lib/components/stepper';
+export * from './lib/components/dropdown';
+export * from './lib/components/multiselect';
+export * from './lib/components/slider';
+export * from './lib/components/confirm-dialog';
+export * from './lib/components/switch';
+export * from './lib/interceptors/http-error-message.interceptor';
+export * from './lib/components/action-button-group';
+export * from './lib/components/filter';
+export * from './lib/components/tab-view';
+export * from './lib/components/generic-field';

package/src/lib/components/action-button-group/action-button-group.component.html

@@ -0,0 +1,29 @@
+<div
+  class="v-action-button-group align-items-center justify-content-center justify-content-md-end"
+>
+  <div class="v-action-button-group__actions d-flex gap-2">
+    @for (action of visibleActions; track action) {
+    <v-action-button
+      [disabled]="action.disabled"
+      [icon]="action.icon"
+      [id]="action.id"
+      [outlined]="action.outlined"
+      [raised]="action.raised"
+      [text]="action.text"
+      [toolTip]="action.toolTip || action.label"
+      [severity]="action.severity"
+      [size]="action.size"
+      (clickEvent)="action.clickEvent.emit()"
+    ></v-action-button>
+    } @if (actions.length > visibleActions.length) {
+    <v-button
+      (click)="menu.toggle($event)"
+      [text]="true"
+      [label]="label"
+      [iconPos]="menuIconPos"
+      [icon]="menuIcon"
+    />
+    }
+  </div>
+</div>
+<p-menu #menu [model]="menuItems" [popup]="true" />

package/src/lib/components/action-button-group/action-button-group.component.spec.ts

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

package/src/lib/components/action-button-group/action-button-group.component.ts

@@ -0,0 +1,104 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+} from '@angular/core';
+import {
+  ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+  ActionButton,
+  ActionButtonGroupCore,
+  IconPositionType,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { MenuItem } from 'primeng/api';
+import { MenuModule } from 'primeng/menu';
+import { combineLatestWith, map, startWith, takeUntil } from 'rxjs';
+import { ScreenSizeService } from '../../services/screen-size.service';
+import { ButtonComponent } from '../button';
+import { ActionButtonComponent } from './components/action-button/action-button.component';
+
+@Component({
+  selector: 'v-action-button-group',
+  standalone: true,
+  imports: [MenuModule, ButtonComponent, ActionButtonComponent],
+  templateUrl: './action-button-group.component.html',
+  styleUrl: './action-button-group.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+      useExisting: ActionButtonGroupComponent,
+    },
+  ],
+})
+export class ActionButtonGroupComponent
+  extends UnsubscribeComponent
+  implements AfterContentInit, ActionButtonGroupCore
+{
+  @ContentChildren(ActionButtonComponent)
+  actions!: QueryList<ActionButtonComponent>;
+
+  @Input() maxItems = 3;
+
+  @Input() maxItemsMobile = 0;
+
+  @Input() items: ActionButton[] = [];
+
+  @Input() menuIconPos: IconPositionType = 'right';
+
+  @Input() menuIcon = 'pi pi-ellipsis-v';
+
+  @Input() label?: string;
+
+  allItems: ActionButton[] = [];
+  visibleActions: ActionButton[] = [];
+  menuItems: MenuItem[] = [];
+
+  constructor(
+    private readonly cd: ChangeDetectorRef,
+    readonly screenSizeService: ScreenSizeService
+  ) {
+    super();
+  }
+
+  ngAfterContentInit(): void {
+    this.subscribeItemChange();
+  }
+
+  private subscribeItemChange(): void {
+    const screenResize$ = this.screenSizeService.isMobileBlock;
+
+    const actions$ = this.actions.changes.pipe(
+      startWith({}),
+      map(() => this.actions.toArray())
+    );
+
+    screenResize$
+      .pipe(takeUntil(this.destroyed$), combineLatestWith(actions$))
+      .subscribe(([isMobile, actions]) => {
+        this.computeItems(actions, isMobile);
+      });
+  }
+
+  private computeItems(actions: ActionButton[], isMobile: boolean) {
+    const allItems = [...(this.items ?? []), ...actions];
+    const maxItems = isMobile ? this.maxItemsMobile : this.maxItems;
+    this.visibleActions = allItems.slice(0, maxItems);
+    this.menuItems = allItems.slice(maxItems).map(this.convertToMenuItem);
+    this.cd.detectChanges();
+  }
+
+  private convertToMenuItem(item: ActionButton): MenuItem {
+    return {
+      label: item.label,
+      icon: item.icon,
+      command: () => {
+        item.clickEvent.emit();
+      },
+    };
+  }
+}

package/src/lib/components/action-button-group/components/action-button/action-button.component.html

@@ -0,0 +1,12 @@
+<v-button
+  [label]="label"
+  [disabled]="disabled"
+  [icon]="icon"
+  [pTooltip]="toolTip"
+  [outlined]="outlined"
+  tooltipPosition="bottom"
+  [size]="size"
+  [text]="text"
+  [severity]="severity"
+  (clickEvent)="handleClick()"
+></v-button>

package/src/lib/components/action-button-group/components/action-button/action-button.component.spec.ts

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

package/src/lib/components/action-button-group/components/action-button/action-button.component.ts

@@ -0,0 +1,36 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { ActionButton, ControlSeverityType, FieldSizeType } from '@verisoft/ui-core';
+import { TooltipModule } from 'primeng/tooltip';
+import { ButtonComponent } from '../../../button';
+
+@Component({
+  selector: 'v-action-button',
+  standalone: true,
+  imports: [ButtonComponent, TooltipModule],
+  templateUrl: './action-button.component.html',
+  styleUrl: './action-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ActionButtonComponent implements ActionButton {
+  @Input() disabled = false;
+  @Input() toolTip?: string;
+  @Input() id?: string;
+  @Input() icon?: string;
+  @Input() outlined = false;
+  @Input() raised = false;
+  @Input() text = true;
+  @Input() severity?: ControlSeverityType;
+  @Input() label?: string;
+  @Input() size?: FieldSizeType;
+  @Output() clickEvent = new EventEmitter<void>();
+
+  handleClick() {
+    this.clickEvent.emit();
+  }
+}

package/src/lib/components/action-button-group/index.ts

@@ -0,0 +1,2 @@
+export * from './action-button-group.component';
+export * from './components/action-button/action-button.component';

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

@@ -0,0 +1,12 @@
+<div class="v-breadcrumb card flex justify-content-center">
+  <ng-container *ngIf="useHomeRoute; else default">
+    <p-breadcrumb
+      class="max-w-full"
+      [model]="items"
+      [home]="home"
+    ></p-breadcrumb>
+  </ng-container>
+  <ng-template #default>
+    <p-breadcrumb class="max-w-full" [model]="items"></p-breadcrumb>
+  </ng-template>
+</div>

package/src/lib/components/breadcrumb/breadcrumb.component.scss

@@ -0,0 +1,18 @@
+p-breadcrumb > nav {
+  border: none;
+  > ol {
+    align-items: stretch;
+    font-weight: 600;
+    font-size: 1rem;
+  }
+  a[aria-current='page'] > span {
+    color: var(--primary-color) !important;
+  }
+}
+.p-menuitem-link {
+  gap: 0.5rem;
+  text-align: center;
+}
+.p-menuitem-text {
+  align-self: baseline;
+}

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

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

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

@@ -0,0 +1,36 @@
+import { ActivatedRoute } from '@angular/router';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { BreadcrumbComponent } from './breadcrumb.component';
+
+const meta: Meta<BreadcrumbComponent> = {
+  component: BreadcrumbComponent,
+  title: 'BreadcrumbComponent',
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: ActivatedRoute,
+        },
+      ],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<BreadcrumbComponent>;
+export const Primary: Story = {
+  args: {
+    homeRoute: '123',
+    useHomeRoute: true,
+    items: [
+      { label: 'Contract', routerLink: '123' },
+      { label: 'List', routerLink: './list' },
+    ],
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText('Contract')).toBeTruthy();
+    expect(canvas.getByText('List')).toBeTruthy();
+  },
+};

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

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+} from '@angular/core';
+import {
+  BREADCRUMB_COMPONENT_TOKEN,
+  BreadcrumbCoreComponent,
+} from '@verisoft/ui-core';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+
+@Component({
+  selector: 'v-breadcrumb',
+  standalone: true,
+  imports: [CommonModule, BreadcrumbModule],
+  templateUrl: './breadcrumb.component.html',
+  styleUrl: './breadcrumb.component.scss',
+  providers: [
+    { 
+      provide: BREADCRUMB_COMPONENT_TOKEN,
+      useExisting: BreadcrumbComponent
+    },
+  ],
+})
+export class BreadcrumbComponent extends BreadcrumbCoreComponent { }

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

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

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

@@ -0,0 +1,20 @@
+<div class="v-button mt-3">
+  <a
+    [routerLink]="routerLink ? routerLink : undefined"
+    [queryParams]="queryParams ? queryParams : undefined"
+  >
+    <p-button
+      [disabled]="disabled"
+      [icon]="icon"
+      [badge]="badge"
+      [outlined]="outlined"
+      [rounded]="rounded"
+      [raised]="raised"
+      [label]="label"
+      [text]="text"
+      [size]="$any(size)"
+      [severity]="severity"
+      [iconPos]="iconPos"
+    />
+  </a>
+</div>

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

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

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

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Params, RouterModule } from '@angular/router';
+import {
+  BUTTON_COMPONENT_TOKEN,
+  ButtonCore,
+  ControlSeverityType,
+  FieldSizeType,
+  IconPosition,
+  IconPositionType,
+} from '@verisoft/ui-core';
+import { ButtonModule } from 'primeng/button';
+import { RippleModule } from 'primeng/ripple';
+
+@Component({
+  selector: 'v-button',
+  standalone: true,
+  imports: [CommonModule, ButtonModule, RippleModule, RouterModule],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: BUTTON_COMPONENT_TOKEN,
+      useExisting: ButtonComponent,
+    },
+  ],
+})
+export class ButtonComponent implements ButtonCore {
+  @Input() label?: string;
+  @Input() icon?: string;
+  @Input() badge?: string;
+  @Input() iconPos: IconPositionType = IconPosition.right;
+  @Input() disabled!: boolean;
+  @Input() rounded!: boolean;
+  @Input() text!: boolean;
+  @Input() outlined!: boolean;
+  @Input() raised!: boolean;
+  @Input() severity?: ControlSeverityType;
+  @Input() routerLink!: any[];
+  @Input() size: FieldSizeType | undefined;
+  @Input() queryParams?: Params;
+}