@verisoft/ui-primeng 18.0.0 → 18.3.0

package/{src/assets → assets}/sass/base/_typography.scss

@@ -4,14 +4,14 @@
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('../../../assets/fonts/orbitron-bold.otf') format('opentype');
+  src: url('../../fonts/orbitron-bold.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('../../../assets/fonts/orbitron-black.ttf') format('truetype');
+  src: url('../../fonts/orbitron-black.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
 }

package/assets/sass/layout/_button.scss

@@ -0,0 +1,57 @@
+.p-button:not(.p-button-outlined) {
+  color: var(--white-color);
+}
+
+.p-button.p-button-danger:not(.p-button-outlined),
+.p-button-group.p-button-danger > .p-button,
+.p-splitbutton.p-button-danger > .p-button {
+  border-color: var(--error-color);
+  background-color: var(--error-color);
+
+  &:hover {
+    border-color: #e60017;
+    background-color: #e60017;
+  }
+}
+
+.p-button.p-button-success:not(.p-button-outlined),
+.p-button-group.p-button-success > .p-button,
+.p-splitbutton.p-button-success > .p-button {
+  border-color: var(--success-color);
+  background-color: var(--success-color);
+  color: var(--white-color);
+
+  &:hover {
+    border-color: #439446;
+    background-color: #439446;
+  }
+}
+
+.p-button-icon-only.p-button-danger:not(.p-button-outlined) {
+  border-color: var(--error-color);
+  background-color: var(--error-color);
+
+  .pi {
+    color: var(--white-color) !important;
+  }
+
+  &:hover {
+    border-color: #e60017;
+    background-color: #e60017;
+  }
+}
+
+.p-button-icon-only.p-button-success:not(.p-button-outlined) {
+  border-color: var(--success-color);
+  background-color: var(--success-color);
+
+  &:hover {
+    border-color: #57b44c;
+    background-color: #57b44c !important;
+  }
+}
+
+.p-button-icon-only.p-button-secondary:not(.p-button-outlined) {
+  border-color: var(--secondary-color);
+  background-color: var(--secondary-color);
+}

package/{src/assets → assets}/sass/layout/_sidemenu.scss

@@ -163,25 +163,11 @@
         padding: 2rem 0 0 0;
       }
     }
-    .p-treenode .p-treenode-label,
-    .support-button .p-button-label {
+    .p-treenode .p-treenode-label {
       display: none;
     }
     .close-button {
       transform:rotate(180deg);
     }
   }
-  
-  .support-button {
-    & :hover {
-      border-color: var(--primary-color-semitransparent);
-    }
-  
-    button {
-      border-radius: 0.2rem;
-      border-color: transparent;
-      background-color: transparent;
-  
-    }
-  }
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verisoft/ui-primeng",
-  "version": "18.0.0",
+  "version": "18.3.0",
   "peerDependencies": {
     "@angular/common": "^18.2.8",
     "@angular/core": "^18.2.8",
@@ -8,13 +8,14 @@
     "rxjs": "~7.8.0",
     "@angular/forms": "18.2.8",
     "@angular/router": "18.2.8",
-    "@verisoft/store": "18.0.0",
     "@storybook/angular": "^8.3.5",
     "@storybook/test": "^8.3.5",
     "@angular/platform-browser": "18.2.8",
     "@verisoft/core": "18.0.0",
     "@faker-js/faker": "^8.4.1",
-    "@verisoft/ui-core": "0.0.1"
+    "@verisoft/ui-core": "18.0.0",
+    "uuid": "^10.0.0",
+    "@ngx-translate/core": "^15.0.0"
   },
   "dependencies": {},
   "sideEffects": false

package/src/index.ts

@@ -1,4 +1,3 @@
-export * from './lib/components/action-button-group';
 export * from './lib/components/input-group';
 export * from './lib/components/textfield';
 export * from './lib/components/breadcrumb';
@@ -25,7 +24,6 @@ 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';
+export * from './lib/components/shared-components';
+export * from './lib/icons';

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

@@ -2,11 +2,11 @@
   <ng-container *ngIf="useHomeRoute; else default">
     <p-breadcrumb
       class="max-w-full"
-      [model]="items"
+      [model]="items | menuItem"
       [home]="home"
     ></p-breadcrumb>
   </ng-container>
   <ng-template #default>
-    <p-breadcrumb class="max-w-full" [model]="items"></p-breadcrumb>
+    <p-breadcrumb class="max-w-full" [model]="items | menuItem"></p-breadcrumb>
   </ng-template>
 </div>

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

@@ -7,11 +7,16 @@ import {
   BreadcrumbCoreComponent,
 } from '@verisoft/ui-core';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { ConvertMenuItemPipe } from './breadcrumb.pipe';
 
 @Component({
   selector: 'v-breadcrumb',
   standalone: true,
-  imports: [CommonModule, BreadcrumbModule],
+  imports: [
+    CommonModule,
+    BreadcrumbModule,
+    ConvertMenuItemPipe,
+  ],
   templateUrl: './breadcrumb.component.html',
   styleUrl: './breadcrumb.component.scss',
   providers: [

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

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { MenuItem as VerisoftMenuItem } from "@verisoft/ui-core";
+import { MenuItem as PrimeMenuItem } from "primeng/api";
+
+@Pipe({
+  name: 'menuItem',
+  standalone: true,
+})
+export class ConvertMenuItemPipe implements PipeTransform {
+  transform(items: VerisoftMenuItem[]): PrimeMenuItem[] {
+    return items.map(i => i as PrimeMenuItem);
+  }
+}

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

@@ -1,4 +1,5 @@
-<div class="v-button mt-3">
+<div class="v-button d-inline-block" 
+(click)="fireClick($event)">
   <a
     [routerLink]="routerLink ? routerLink : undefined"
     [queryParams]="queryParams ? queryParams : undefined"
@@ -11,7 +12,6 @@
       [rounded]="rounded"
       [raised]="raised"
       [label]="label"
-      [text]="text"
       [size]="$any(size)"
       [severity]="severity"
       [iconPos]="iconPos"

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

@@ -33,11 +33,17 @@ export class ButtonComponent implements ButtonCore {
   @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;
+
+  fireClick(event: Event): void {
+    if (this.disabled) {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    }
+  }
 }

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

@@ -1,2 +1 @@
 export * from './button.component';
-export * from './directives/shortcut.directive';

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

@@ -3,7 +3,6 @@
     <v-form-field
       class="w-100"
       [label]="label"
-      [ngControl]="ngControl"
       [tooltip]="tooltip"
       [required]="isRequired()"
       [display]="formDisplay"
@@ -27,6 +26,7 @@
         iconDisplay="input"
       />
     </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </ng-container>
   <ng-container *ngIf="floatLabel">
     <p-floatLabel>
@@ -44,10 +44,10 @@
         [placeholder]="placeholder"
         [required]="isRequired()"
         [minDate]="minDate"
-        [showIcon]="formControl && !formControl.value"
         iconDisplay="input"
       />
       <label [for]="inputId" [innerHTML]="floatLabel"></label>
     </p-floatLabel>
   </ng-container>
 </div>
+

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

@@ -20,6 +20,8 @@ import {
 } from '@verisoft/ui-core';
 import { CalendarModule } from 'primeng/calendar';
 import { FloatLabelModule } from 'primeng/floatlabel';
+import { Icons } from '../../icons';
+import { ErrorComponent } from '../errors';
 import { FormFieldComponent } from '../form-field';
 
 @Component({
@@ -31,6 +33,7 @@ import { FormFieldComponent } from '../form-field';
     CalendarModule,
     FormFieldComponent,
     FloatLabelModule,
+    ErrorComponent,
   ],
   templateUrl: './calendar.component.html',
   styleUrl: './calendar.component.scss',
@@ -55,13 +58,15 @@ export class CalendarComponent
   }
 
   @Input() maxDate!: Date;
-  @Input() icon = 'pi pi-calendar';
+  @Input() icon = Icons.calendar;
   @Input() minDate!: Date;
   @Input() header!: string;
   @Input() footer!: string;
-  @Input() floatLabel?: string;
+  @Input() floatLabel: string | undefined;
   @Input() selectionMode: 'single' | 'multiple' | 'range' | undefined =
     'single';
 
+    icons = Icons;
+
   override formDisplay: "flex" | "block" = "block";
 }

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

@@ -4,7 +4,6 @@
     [label]="label"
     [tooltip]="tooltip"
     [required]="isRequired()"
-    [ngControl]="ngControl"
     [testId]="testId"
     [display]="formDisplay"
   >
@@ -15,5 +14,6 @@
       [binary]="true"
       [readonly]="readonly"
     />
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </v-form-field>
 </div>

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

@@ -12,11 +12,13 @@ import {
 } 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',
   standalone: true,
-  imports: [CommonModule, CheckboxModule, ReactiveFormsModule, FormFieldComponent],
+  imports: [CommonModule, CheckboxModule, ReactiveFormsModule, FormFieldComponent, ErrorComponent],
   templateUrl: './checkbox.component.html',
   styleUrl: './checkbox.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -35,6 +37,8 @@ export class CheckboxComponent
   extends BaseFormInputComponent
   implements ControlValueAccessor, CheckboxCore
 {
+
+  icon = Icons
   constructor(@Optional() @Self() ngControl: NgControl) {
     super(ngControl);
   }

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

@@ -4,14 +4,14 @@ 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 '../dynamic-component/dynamic-component.component';
-import { DialogService } from './services/confirm-dialog.service';
+import { DynamicComponent } from '../shared-components';
 
 @Component({
   selector: 'v-confirm-dialog',
@@ -50,7 +50,7 @@ export class ConfirmDialogComponent
   ngOnInit(): void {
     this.dialogService.showEvent
       .pipe(takeUntil(this.destroyed$))
-      .subscribe((x) => {
+      .subscribe((x: DialogData) => {
         this.data = x;
         this.visible = true;
         this.cdr.detectChanges();

package/src/lib/components/confirm-dialog/index.ts

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

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

@@ -4,7 +4,6 @@
       [label]="label"
       [tooltip]="tooltip"
       [required]="isRequired()"
-      [ngControl]="ngControl"
       [testId]="testId"
       [display]="formDisplay"
     >
@@ -34,6 +33,7 @@
       >
       </p-dropdown>
     </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </ng-container>
   <ng-container *ngIf="!label && !floatLabel">
     <p-dropdown

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

@@ -36,6 +36,7 @@ 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({
@@ -49,6 +50,7 @@ import { FormFieldComponent } from '../form-field';
     FormFieldComponent,
     MessageModule,
     FloatLabelModule,
+    ErrorComponent
   ],
   templateUrl: './dropdown.component.html',
   styleUrls: ['./dropdown.component.scss'],
@@ -79,15 +81,18 @@ export class DropdownComponent<T>
     super(ngControl);
   }
 
-  @Input() options?: T[] = [];
-  @Input() optionLabel?: string;
-  @Input() optionValue?: string;
+  @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>();

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

@@ -5,7 +5,7 @@
           class="v-formfield-label d-flex align-items-center"
           [ngClass]="{
             'pb-2': display === 'block',
-            'text-error': (ngControl?.errors | error) && ngControl?.dirty, 
+            '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
@@ -15,7 +15,7 @@
         </label>
         <i *ngIf="tooltip"
           [pTooltip]="tooltip"
-          class="ps-2 text-default v-tooltip pi pi-info-circle"
+          class="ps-2 text-default v-tooltip {{ icons.infoCircle }}"
         ></i>
       </div>
       <div 
@@ -29,12 +29,7 @@
         </div>
       </div>
       <div class="align-content-center">
-        <ng-container *ngIf="ngControl?.invalid && ngControl?.dirty">
-          <i
-            [pTooltip]="(ngControl?.errors | error) || (ngControl?.errors | warning)"
-            [ngClass]="{ 'text-error': ngControl?.errors | error, 'text-warning': ngControl?.errors | warning }"
-            class="pi pi-times-circle"
-          ></i>
+        <ng-container>
         </ng-container>
       </div>
   </div>

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

@@ -1,16 +1,17 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input, Optional, Self } from '@angular/core';
 import { NgControl, ReactiveFormsModule } from '@angular/forms';
-import { ErrorPipe, FormFieldCore, WarningPipe } from '@verisoft/ui-core';
+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,
-    ErrorPipe,
     WarningPipe,
     ReactiveFormsModule,
     MessageModule,
@@ -19,16 +20,19 @@ import { TooltipModule } from 'primeng/tooltip';
   templateUrl: './form-field.component.html',
   styleUrl: './form-field.component.scss',
 })
-export class FormFieldComponent implements FormFieldCore {
-  @Input() ngControl?: NgControl;
+export class FormFieldComponent
+  extends BaseFormInputComponent
+  implements FormFieldCore
+{
+  @Input() display: 'flex' | 'block' = 'block';
+  
+  @Input() variant!: 'simple';
 
-  @Input() label?: string;
+  protected readonly errorProvider = inject(ERROR_PROVIDER_TOKEN)
+  
+  icons = Icons;
 
-  @Input() tooltip?: string;
-
-  @Input() required = false;
-
-  @Input() testId?: string;
-
-  @Input() display: 'flex' | 'block' = 'flex';
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
 }

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

@@ -5,8 +5,7 @@
   <ng-container *ngIf="screenSizeService.isMobileBlock | async">
     <div class="burger-menu">
       <v-button
-        [text]="true"
-        [icon]="menuVisible ? 'pi pi-times' : 'pi pi-bars'"
+      [icon]="menuVisible ? icons.cross : icons.action"
         (click)="toggleMenu()"
       />
       <div class="logo mt-3" [routerLink]="[logoRouterLink]">
@@ -29,7 +28,7 @@
     <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/images/_global/jara.png"
+          image="assets/primeng/images/_global/jara.png"
           styleClass="me-2"
           size="large"
           shape="circle"

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

@@ -10,10 +10,11 @@ import { RouterModule } from '@angular/router';
 import {
   HEADER_COMPONENT_TOKEN,
   HeaderCore,
+  ScreenSizeService,
   UnsubscribeComponent,
 } from '@verisoft/ui-core';
 import { AvatarModule } from 'primeng/avatar';
-import { ScreenSizeService } from '../../services/screen-size.service';
+import { Icons } from '../../icons';
 import { ButtonComponent } from '../button';
 import { HeaderProviderService } from './services/header-provider.service';
 
@@ -47,6 +48,7 @@ export class HeaderComponent
   @Input() menuRef!: HTMLDivElement;
   @Input() exampleHeader = false;
 
+  icons = Icons;
   protected menuVisible = false;
   protected logoRouterLink!: string;
 

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

@@ -1,6 +1,6 @@
 import { Inject, Injectable } from '@angular/core';
 import { SETTINGS_MENU } from '@verisoft/ui-core';
-import { MenuItem } from 'primeng/api';
+import { MenuItem } from '@verisoft/ui-core';
 
 @Injectable({
   providedIn: 'root',

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

@@ -2,9 +2,7 @@
   <v-form-field
     [label]="label"
     [required]="required"
-    [tooltip]="tooltip"
-    [ngControl]="ngControl"
-  >
+    [tooltip]="tooltip"  >
     <p-inputGroup>
       <ng-container *ngFor="let item of items">
         <p-inputGroupAddon *ngIf="item.position === 'left'">

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

@@ -5,7 +5,6 @@
       [label]="label"
       [tooltip]="tooltip"
       [required]="isRequired()"
-      [ngControl]="ngControl"
       [testId]="testId"
       [display]="formDisplay"
     >
@@ -35,6 +34,7 @@
         (lazyLoadEvent)="onLazyLoad($any($event))"
       ></p-multiSelect>
     </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </ng-container>
   <ng-container *ngIf="floatLabel">
     <p-floatLabel>
@@ -63,6 +63,7 @@
         (changeEvent)="selectionChange($event)"
         (lazyLoadEvent)="onLazyLoad($any($event))"
       ></p-multiSelect>
+
       <label [for]="inputId">{{ floatLabel }}</label>
     </p-floatLabel>
   </ng-container>