@verisoft/ui-core 18.0.0 → 18.3.0

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

@@ -1,4 +1,10 @@
-import { ChangeDetectorRef, Directive, Input, inject, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Directive,
+  Input,
+  inject,
+  OnInit,
+} from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { filter, takeUntil } from 'rxjs';
 import { MenuItem } from '../side-menu';
@@ -17,6 +23,8 @@ export class BreadcrumbCoreComponent
 
   static readonly ROUTE_DATA_BREADCRUMB = 'breadcrumb';
   static readonly ROUTE_DATA_BREADCRUMB_URL = 'breadcrumb_url';
+  static readonly ROUTE_DATA_NO_BREADCRUMB_ROUTE = 'breadcrumb_no_route';
+  static readonly BREADCRUMB_HIDE = 'breadcrumb_hide';
   readonly home = { icon: 'pi pi-home', routerLink: this.homeRoute };
 
   router = inject(Router);
@@ -31,7 +39,10 @@ export class BreadcrumbCoreComponent
 
   private initBreadcrumbsCreation() {
     this.router.events
-      .pipe(filter((event) => event instanceof NavigationEnd))
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntil(this.destroyed$)
+      )
       .subscribe(
         () => (this.items = this.createBreadcrumbs(this.activatedRoute.root))
       );
@@ -39,22 +50,22 @@ export class BreadcrumbCoreComponent
 
   private initRouteChangeListen() {
     this.breadcrumbService.routeChange
-    .pipe(
-      filter((x) => x.label !== 'Undefined'),
-      takeUntil(this.destroyed$)
-    )
-    .subscribe((x) => {
-      this.items = [
-        ...this.items,
-        {
-          label: x.label,
-          routerLink: x.routerLink,
-          url: x.url,
-          class: 'breadcrumb',
-        },
-      ];
-      this.cdr.detectChanges();
-    });
+      .pipe(
+        filter((x) => x.label !== 'Undefined'),
+        takeUntil(this.destroyed$)
+      )
+      .subscribe((x) => {
+        this.items = [
+          ...this.items,
+          {
+            label: x.label,
+            routerLink: x.routerLink,
+            url: x.url,
+            class: 'breadcrumb',
+          },
+        ];
+        this.cdr.detectChanges();
+      });
   }
 
   private createBreadcrumbs(
@@ -73,19 +84,29 @@ export class BreadcrumbCoreComponent
         .map((segment) => segment.path)
         .join('/');
 
-      if (BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB_URL !== undefined) {
-        const route =
-          child.snapshot.data[BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB_URL];
-        routerLink += `/${route}`;
-      }
+      if (!child.snapshot.data[BreadcrumbCoreComponent.BREADCRUMB_HIDE]) {
+        if (BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB_URL !== undefined) {
+          const route =
+            child.snapshot.data[BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB_URL];
+          routerLink += `/${route}`;
+        }
 
-      if (!BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB_URL && routeURL !== '') {
-        routerLink += `/${routeURL}`;
-      }
+        if (!BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB_URL && routeURL !== '') {
+          routerLink += `/${routeURL}`;
+        }
 
-      const label = child.snapshot.data[BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB];
-      if (label !== undefined && label !== null) {
-        breadcrumbs.push({ label, routerLink: routerLink });
+        const label = child.snapshot.data[BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB];
+        if (
+          label &&
+          BreadcrumbCoreComponent.ROUTE_DATA_NO_BREADCRUMB_ROUTE &&
+          child.snapshot.data[
+            BreadcrumbCoreComponent.ROUTE_DATA_NO_BREADCRUMB_ROUTE
+          ]
+        ) {
+          breadcrumbs.push({ label, routerLink: undefined });
+        } else if (label && child.snapshot.routeConfig?.path !== '') {
+          breadcrumbs.push({ label, routerLink: routerLink });
+        }
       }
 
       return this.createBreadcrumbs(child, routerLink, breadcrumbs);

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

@@ -12,7 +12,6 @@ export interface ButtonCore {
     badge?: string;
     iconPos: IconPositionType;
     rounded: boolean;
-    text: boolean;
     outlined: boolean;
     raised: boolean;
     severity?: ControlSeverityType;

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

@@ -11,6 +11,6 @@ export interface CalendarCore extends BaseFormCore {
     minDate: Date;
     header: string;
     footer: string;
-    floatLabel?: string;
+    floatLabel: string | undefined;
     selectionMode: "single" | "multiple" | "range" | undefined;
 }

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

@@ -5,5 +5,4 @@ export const CHECKBOX_COMPONENT_TOKEN = new InjectionToken<CheckboxCore>(
     'CheckboxComponentToken'
 );
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface CheckboxCore extends BaseFormCore {}
+export type CheckboxCore = BaseFormCore

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

@@ -3,24 +3,29 @@ import { SafeHtml } from "@angular/platform-browser";
 import { ControlSeverityType } from '../../common';
 
 export const CONFIRM_DIALOG_COMPONENT_TOKEN = new InjectionToken<ConfirmDialogCore>(
-    'ConfirmDialogComponentToken'
+  'ConfirmDialogComponentToken'
 );
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ConfirmDialogCore {}
+export type ConfirmDialogCore = object
 
 export interface DialogData {
-    title?: string;
-    headerIcon: string;
-    severity: ControlSeverityType;
-    showCancelButton?: boolean;
-    buttonOrder?: 'confirm-cancel' | 'cancel-confirm';
-    confirmButtonText?: string;
-    confirmButtonFn?: () => void;
-    cancelButtonFn?: () => void;
-    cancelButtonText?: string;
-    innerHTML?: string | SafeHtml;
-    data?: unknown;
-    componentType?: Type<unknown>;
-    closable?: boolean;
-}
+  title?: string;
+  headerIcon?: string;
+  severity?: ControlSeverityType;
+  showCancelButton?: boolean;
+  buttonOrder?: 'confirm-cancel' | 'cancel-confirm';
+  confirmButtonText?: string;
+  confirmButtonFn?: () => void;
+  cancelButtonFn?: () => void;
+  cancelButtonText?: string;
+  innerHTML?: string | SafeHtml;
+  data?: unknown;
+  componentType?: Type<unknown>;
+  closable?: boolean;
+  width?: string;
+  height?: string;
+}
+
+export interface ExtendedDialogData<TInputs = any, TOutputs = any> extends DialogData {
+  data?: TInputs & TOutputs;
+}

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

@@ -1 +1 @@
-export * from './confirm-dialog.model';
+export * from './confirm-dialog.model';

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

@@ -10,4 +10,7 @@ export interface DropdownCore<T> extends DataSourceComponentModel<T>, BaseFormCo
     dropdownIcon?: string;
     floatLabel?: string;
     editable: boolean;
+    forceMinWidth: boolean;
+    showFilter: boolean;
+    localSearch: boolean;
 }

package/src/lib/components/dynamic-component/dynamic-component.model.ts

@@ -0,0 +1,2 @@
+export type ExtendedComponent<TComponent> = 
+    Partial<TComponent> & { [key: string]: (value: any) => void; };

package/src/lib/components/dynamic-component/index.ts

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

package/src/lib/components/filter/filter.model.ts

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { GenericFieldDefinition } from '../generic-form';
+
+export const FILTER_COMPONENT_TOKEN = new InjectionToken<FilterCore>(
+    'FilterComponentToken'
+);
+
+export interface FilterCore extends ControlValueAccessor {
+    fields: GenericFieldDefinition[];  
+    title?: string;  
+    fulltextFieldName: string;  
+    showFulltext: boolean;  
+    showFilters: boolean;  
+    autoBind: boolean;  
+    debounceTime?: number;
+}

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

@@ -0,0 +1 @@
+export * from './filter.model';

package/src/lib/components/generic-field/generic-field.model.ts

@@ -3,7 +3,7 @@ import { DataSourceComponentModel } from '../../common';
 import { BaseFormCore } from '../base-form';
 
 export const GENERIC_FIELD_COMPONENT_TOKEN = new InjectionToken<GenericFieldCore<any>>(
-    'DropdownComponentToken'
+    'GenericFieldComponentToken'
 );
 
 export interface GenericFieldCore<T> extends DataSourceComponentModel<T>, BaseFormCore {

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

@@ -0,0 +1,33 @@
+import { ValidatorFn } from '@angular/forms';
+import { DatasourceType } from '@verisoft/core';
+import { FieldSizeType } from '../../common';
+
+export interface GenericFieldDefinition {
+  validator?: ValidatorFn[];
+  type?: GenericFieldTypeType;
+  label?: string;
+  floatLabel?: boolean;
+  name: string;
+  optionLabel?: string;
+  optionValue?: string;
+  options?: unknown[];
+  value?: unknown;
+  testId?: string;
+  size?: FieldSizeType;
+  readonly?: boolean;
+  datasource?: DatasourceType<any>;
+  filterField?: string;
+  showFilter?: boolean;
+  localSearch?: boolean;
+}
+
+export enum GenericFieldType {
+  'dropdown' = 'dropdown',
+  'checkbox' = 'checkbox',
+  'simplecheckbox' = 'simplecheckbox',
+  'calendar' = 'calendar',
+  'multiselect' = 'multiselect',
+  'text' = 'text',
+}
+
+export type GenericFieldTypeType = keyof typeof GenericFieldType;

package/src/lib/components/generic-form/index.ts

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

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

@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
-import { MenuItem } from 'primeng/api';
+import { MenuItem } from '../side-menu/side-menu.model';
 
 export const HEADER_COMPONENT_TOKEN = new InjectionToken<HeaderCore>(
     'HeaderComponentToken'
@@ -7,7 +7,7 @@ export const HEADER_COMPONENT_TOKEN = new InjectionToken<HeaderCore>(
 
 export const SETTINGS_MENU = new InjectionToken<MenuItem[]>(
     'SETTINGS_MENU'
-  );
+);
 
 export interface HeaderCore {
     title: string;

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

@@ -0,0 +1,17 @@
+import { Component, Input } from "@angular/core";
+import { ICONS_COMPONENT_TOKEN } from "./icons.model";
+
+@Component({
+    standalone: true,
+    template: '',
+    providers: [
+        {
+            provide: ICONS_COMPONENT_TOKEN,
+            useExisting: IconsComponent
+        }
+    ]
+})
+
+export class IconsComponent{
+    @Input() name!: string;
+}

package/src/lib/components/icons/icons.model.ts

@@ -0,0 +1,10 @@
+import { InjectionToken } from "@angular/core";
+import { CommonIcons } from "../../common/icons"
+
+export const ICONS_COMPONENT_TOKEN = new InjectionToken<IconsCore>(
+    'IconsComponentToken'
+);
+
+export interface IconsCore extends CommonIcons {
+    name: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './icons.model';
+export * from './icons.component';

package/src/lib/components/index.ts

@@ -6,8 +6,11 @@ export * from './calendar';
 export * from './checkbox';
 export * from './confirm-dialog';
 export * from './dropdown';
+export * from './dynamic-component';
+export * from './filter';
 export * from './form-field';
 export * from './generic-field';
+export * from './generic-form';
 export * from './header';
 export * from './input-group';
 export * from './loader';
@@ -29,3 +32,4 @@ export * from './textarea';
 export * from './textfield';
 export * from './tristatecheckbox';
 export * from './unsubscribe.component';
+export * from './icons';

package/src/lib/components/loader/loader.model.ts

@@ -4,5 +4,4 @@ export const LOADER_COMPONENT_TOKEN = new InjectionToken<LoaderCore>(
     'LoaderComponentToken'
 );
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LoaderCore {}
+export type LoaderCore = object

package/src/lib/components/page-header/index.ts

@@ -1 +1,3 @@
-export * from './page-header.model';
+export * from './page-header.model';
+export * from './page-header.service';
+export * from './page-headercore.component';

package/src/lib/components/page-header/page-header.model.ts

@@ -7,11 +7,5 @@ export const PAGE_HEADER_COMPONENT_TOKEN = new InjectionToken<PageHeaderCore>(
 export interface PageHeaderCore {
     title: string;
     subtitle: string | undefined;
-    showBackButton: boolean;
+    showBackButton: boolean | undefined;
 }
-
-export interface PageHeader {
-    title: string;
-    subtitle?: string;
-    showBackButton?: boolean;
-}

package/src/lib/components/page-header/page-header.service.ts

@@ -0,0 +1,9 @@
+import { EventEmitter, Injectable, Output } from '@angular/core';
+import { PageHeaderCore } from './page-header.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PageHeaderService {
+  @Output() pageHeader = new EventEmitter<PageHeaderCore>();
+}

package/src/lib/components/page-header/page-headercore.component.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectorRef, Directive, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { takeUntil } from 'rxjs';
+import { FieldSize, FieldSizeType } from '../../common';
+import { UnsubscribeComponent } from '../unsubscribe.component';
+import { PageHeaderService } from './page-header.service';
+
+@Directive({})
+export class PageHeaderCoreComponent
+  extends UnsubscribeComponent
+  implements OnInit
+{
+  @Input() title!: string;
+  @Input() subtitle: string | undefined;
+  @Input() showBackButton!: boolean;
+  @Input() size: FieldSizeType = FieldSize.small;
+
+constructor(
+    readonly router: Router,
+    readonly cdr: ChangeDetectorRef,
+    readonly headerService: PageHeaderService
+  ) {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.headerService.pageHeader
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((x: any) => {
+        this.title = x.title;
+        this.subtitle = x.subtitle;
+        this.showBackButton = x.showBackButton ?? false;
+        this.cdr.detectChanges();
+      });
+  }
+
+  protected locationBack() {
+    history.back();
+  }
+}

package/src/lib/components/password/password.model.ts

@@ -5,7 +5,21 @@ export const PASSWORD_COMPONENT_TOKEN = new InjectionToken<PasswordCore>(
     'PasswordComponentToken'
 );
 
+export enum PasswordStrength {
+    None = 0,
+    Low = 1,
+    Medium = 2,
+    High = 3,
+    Superb = 4
+}
+
 export interface PasswordCore extends BaseFormCore {
     toggleMask: boolean;
     feedback: boolean;
+}
+
+export interface PasswordValidationItem {
+    severity: 'success' | 'error';
+    validationLabel: string;
+    validationFn: (x: string) => boolean;
 }

package/src/lib/components/side-menu/directives/side-menu-service.directive.ts

@@ -0,0 +1,31 @@
+import { AfterViewInit, ChangeDetectorRef, Directive, inject } from "@angular/core";
+import { takeUntil } from "rxjs";
+import { UnsubscribeComponent } from "../../unsubscribe.component";
+import { SideMenuService } from "../services/side-menu.service";
+import { SIDE_MENU_COMPONENT_TOKEN } from "../side-menu.model";
+
+@Directive({
+    // eslint-disable-next-line @angular-eslint/directive-selector
+    selector: 'v-side-menu[useMenuService]',
+    exportAs: 'useMenuService',
+    standalone: true,
+})
+export class MenuServiceDirective
+    extends UnsubscribeComponent
+    implements AfterViewInit
+{
+    private readonly menuService = inject(SideMenuService);
+    private readonly cdr = inject(ChangeDetectorRef);
+    private readonly sideMenu = inject(SIDE_MENU_COMPONENT_TOKEN);
+
+    ngAfterViewInit() {
+        this.menuService.menuItems$.pipe(takeUntil(this.destroyed$)).subscribe((items) => {
+
+            if (this.sideMenu) {
+                this.sideMenu.items = items;
+            }
+        });
+
+        this.cdr.detectChanges();
+    }
+}

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

@@ -1,3 +1,4 @@
 export * from './side-menu.model';
 export * from './services/side-menu-provider.service';
-export * from './services/side-menu.service';
+export * from './services/side-menu.service';
+export * from './directives/side-menu-service.directive';

package/src/lib/components/side-menu/services/side-menu.service.ts

@@ -26,7 +26,7 @@ export class SideMenuService {
     );
 
     if (!expanded) {
-      this.stateToken.expanded?.push(item.label);
+      this.stateToken.expanded?.push(item.label!);
       localStorage.setItem(
         'SideMenuStateToken',
         JSON.stringify(this.stateToken)
@@ -50,9 +50,13 @@ export class SideMenuService {
     const localStorageValue = this.stateToken.expanded;
 
     if (!localStorageValue) return;
-    for (let index = 0; index < items.length; index++) {
-      const element = items[index];
-      element.expanded = !!localStorageValue.find((i: string) => i === element.label);
+    if (items) {
+      for (let index = 0; index < items.length; index++) {
+        const element = items[index];
+        element.expanded = !!localStorageValue.find(
+          (i: string) => i === element.label
+        );
+      }
     }
   }
 }

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

@@ -1,19 +1,20 @@
 import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
 
 export const MENU_TOKEN = new InjectionToken<MenuItem[]>(
-    'MENU'
+  'MENU'
 );
 
 export const LOGO_ROUTER_ROUTE = new InjectionToken<string>(
   'LOGO_ROUTER_ROUTE'
 );
 
-export const SIDE_MENU_COMPONENT_TOKEN = new InjectionToken<ISideMenu>(
+export const SIDE_MENU_COMPONENT_TOKEN = new InjectionToken<SideMenuCore>(
   'SideMenuComponentToken'
 );
 
 export const SIDE_MENU_STATE_TOKEN = new InjectionToken<SideMenuState>(
-    'SideMenuStateToken'
+  'SideMenuStateToken'
 );
 
 export interface SideMenuState {
@@ -23,17 +24,19 @@ export interface SideMenuState {
 
 export interface MenuItem {
   id?: string;
-  label: string;
+  label?: string | undefined;
   icon?: string;
   expanded?: boolean;
   data?: MenuItemData;
   tooltip?: string;
   url?: string;
-  visible?: boolean;
+  visible?: boolean | Observable<boolean>;
   type?: string;
   children?: MenuItem[];
   routerLink?: any;
   class?: string;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  command?: Function;
 }
 
 type ExtendableType = {
@@ -56,9 +59,9 @@ export interface SideMenuModuleConfig {
   items?: MenuItem[];
 }
 
-export interface ISideMenu {
-    item: MenuItem[];
-    logoUrl: string;
-    userName: string;
-    userRole: any | any[] | undefined;
-}
+export interface SideMenuCore {
+  items: MenuItem[];
+  logoUrl: string;
+  userName: string;
+  userRole: any | any[] | undefined;
+}

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

@@ -4,5 +4,4 @@ export const SNACKBAR_COMPONENT_TOKEN = new InjectionToken<SnackbarCore>(
     'SnackbarComponentToken'
 );
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface SnackbarCore {}
+export type SnackbarCore = object

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

@@ -1,4 +1,5 @@
-import { InjectionToken, TemplateRef } from "@angular/core";
+import { EventEmitter, InjectionToken, TemplateRef } from "@angular/core";
+import { FieldSizeType, LayoutTypeType } from "../../common";
 
 export const STEPPER_COMPONENT_TOKEN = new InjectionToken<StepperCore>(
     'StepperComponentToken'
@@ -6,9 +7,18 @@ export const STEPPER_COMPONENT_TOKEN = new InjectionToken<StepperCore>(
 
 export interface StepperItem {
     header: string;
-    template: TemplateRef<any>;
+    template?: TemplateRef<any>;
+    annotation?: string;
+    prefix?: string;
 }
 
 export interface StepperCore {
-    items: StepperItem[];
+    items: StepperItem[]
+    layout: LayoutTypeType
+    activeIndexChange: EventEmitter<number>
+    size: FieldSizeType | undefined;
+    icon: string;
+    prefix: string;
+    annotation: string;
+    label: string;
 }

package/src/lib/components/switch/switch.model.ts

@@ -5,5 +5,4 @@ export const SWITCH_COMPONENT_TOKEN = new InjectionToken<SwitchCore>(
     'SwitchComponentToken'
 );
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface SwitchCore extends BaseFormCore {}
+export type SwitchCore = BaseFormCore

package/src/lib/components/tab-view/tab-view.model.ts

@@ -1,19 +1,22 @@
-import { InjectionToken, TemplateRef } from "@angular/core";
+import { EventEmitter, InjectionToken, TemplateRef } from "@angular/core";
 
 export const TAB_VIEW_COMPONENT_TOKEN = new InjectionToken<TabViewCore>(
     'TabVIewComponentToken'
 );
 
-export interface TabViewItem {
+export interface TabViewItemCore {
     title: string;
     url?: string;
     icon?: string;
+    disabled?: boolean;
     content?: string;
-    contentTemplate?: TemplateRef<unknown>
+    contentTemplate?: TemplateRef<unknown>; 
 }
 
 export interface TabViewCore {
-    items: TabViewItem[];
+    items: TabViewItemCore[];
     useRouting: boolean;
     activeIndex: number;
+    activeIndexChange: EventEmitter<number>;
+    url?: string;
 }