@verisoft/ui-core 19.0.0-rc001 → 20.1.0

package/{lib/components/generic-form/index.d.ts → src/lib/components/generic-form/index.ts}

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

package/{lib/components/header/header.model.d.ts → src/lib/components/header/header.model.ts}

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

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

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

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

@@ -0,0 +1,22 @@
+import { Component, input } from "@angular/core";
+import { ControlSeverityType, FieldSizeType } from "../../common";
+import { IconLibraryType, ICONS_COMPONENT_TOKEN, IconsCore } from "./icons.model";
+
+@Component({
+    standalone: true,
+    template: '',
+    providers: [
+        {
+            provide: ICONS_COMPONENT_TOKEN,
+            useExisting: IconsComponent
+        }
+    ]
+})
+
+export abstract class IconsComponent implements IconsCore {
+    library = input<IconLibraryType>('native');
+    name = input.required<string>();
+    size = input<FieldSizeType | undefined>();
+    severity = input<ControlSeverityType | undefined>();
+    class = input<string>();
+}

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

@@ -0,0 +1,16 @@
+import { InjectionToken, InputSignal } from "@angular/core";
+import { ControlSeverityType, FieldSizeType } from "../../common";
+
+export const ICONS_COMPONENT_TOKEN = new InjectionToken<IconsCore>(
+    'IconsComponentToken'
+);
+
+export type IconLibraryType = 'native' | 'bootstrap';
+
+export interface IconsCore {
+    library: InputSignal<IconLibraryType>;
+    name: InputSignal<string>;
+    size: InputSignal<FieldSizeType | undefined>;
+    severity: InputSignal<ControlSeverityType | undefined>;
+    class: InputSignal<string | undefined>;
+}

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

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

package/{lib/components/index.d.ts → src/lib/components/index.ts}

@@ -31,5 +31,7 @@ export * from './table';
 export * from './table-filter';
 export * from './textarea';
 export * from './textfield';
+export * from './tooltip';
 export * from './unsubscribe.component';
 export * from './icons';
+export * from './tag';

package/src/lib/components/input-group/index.ts

@@ -0,0 +1 @@
+export * from './input-group.model'

package/{lib/components/input-group/input-group.model.d.ts → src/lib/components/input-group/input-group.model.ts}

@@ -1,12 +1,17 @@
 import { InjectionToken } from '@angular/core';
 import { IconPositionType } from '../../common';
 import { BaseFormCore } from '../base-form';
-export declare const INPUT_GROUP_COMPONENT_TOKEN: InjectionToken<InputGroupCore>;
+
+export const INPUT_GROUP_COMPONENT_TOKEN = new InjectionToken<InputGroupCore>(
+    'HeaderComponentToken'
+);
+
 export interface InputGroupItem {
     icon?: string;
     text?: string;
     position: IconPositionType;
 }
+
 export interface InputGroupCore extends BaseFormCore {
     items: InputGroupItem[];
-}
+}

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

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

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

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+export const LOADER_COMPONENT_TOKEN = new InjectionToken<LoaderCore>(
+    'LoaderComponentToken'
+);
+
+export type LoaderCore = object

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

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

package/{lib/components/multiselect/mutiselect.model.d.ts → src/lib/components/multiselect/mutiselect.model.ts}

@@ -1,9 +1,13 @@
 import { InjectionToken } from '@angular/core';
 import { DataSourceComponentModel } from '../../common';
 import { BaseFormCore } from '../base-form';
-export declare const MULTISELECT_COMPONENT_TOKEN: InjectionToken<MultiselectCore<any>>;
+
+export const MULTISELECT_COMPONENT_TOKEN = new InjectionToken<MultiselectCore<any>>(
+    'MultiselectComponentToken'
+);
+
 export interface MultiselectCore<T> extends DataSourceComponentModel<T>, BaseFormCore {
     dropdownIcon?: string;
     floatLabel?: string;
     editable: boolean;
-}
+}

package/src/lib/components/number-input/index.ts

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

package/{lib/components/number-input/number-input.model.d.ts → src/lib/components/number-input/number-input.model.ts}

@@ -1,10 +1,14 @@
 import { InjectionToken } from '@angular/core';
 import { BaseFormCore } from '../base-form';
-export declare const NUMBER_INPUT_COMPONENT_TOKEN: InjectionToken<NumberInputCore>;
+
+export const NUMBER_INPUT_COMPONENT_TOKEN = new InjectionToken<NumberInputCore>(
+    'NumberInputComponentToken'
+);
+
 export interface NumberInputCore extends BaseFormCore {
     mode: string;
     currency: string;
     min: number;
     max: number;
     step: number;
-}
+}

package/{lib/components/page-header/index.d.ts → src/lib/components/page-header/index.ts}

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

package/{lib/components/page-header/page-header.model.d.ts → src/lib/components/page-header/page-header.model.ts}

@@ -1,5 +1,9 @@
 import { InjectionToken } from '@angular/core';
-export declare const PAGE_HEADER_COMPONENT_TOKEN: InjectionToken<PageHeaderCore>;
+
+export const PAGE_HEADER_COMPONENT_TOKEN = new InjectionToken<PageHeaderCore>(
+    'PageHeaderComponentToken'
+);
+
 export interface PageHeaderCore {
     title: string;
     subtitle: string | undefined;

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,42 @@
+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/index.ts

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

package/{lib/components/password/password.model.d.ts → src/lib/components/password/password.model.ts}

@@ -1,19 +1,25 @@
 import { InjectionToken } from '@angular/core';
 import { BaseFormCore } from '../base-form';
-export declare const PASSWORD_COMPONENT_TOKEN: InjectionToken<PasswordCore>;
-export declare enum PasswordStrength {
+
+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/radiobutton/index.ts

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

package/{lib/components/radiobutton/radiobutton.model.d.ts → src/lib/components/radiobutton/radiobutton.model.ts}

@@ -1,11 +1,16 @@
 import { InjectionToken } from '@angular/core';
 import { BaseFormCore } from '../base-form';
-export declare const RADIOBUTTON_COMPONENT_TOKEN: InjectionToken<RadiobuttonCore<any>>;
+
+export const RADIOBUTTON_COMPONENT_TOKEN = new InjectionToken<RadiobuttonCore<any>>(
+    'RadiobuttonComponentToken'
+);
+
 export interface RadioButtonItem<T> {
     id: string;
-    value: T;
+    value: T; 
 }
+
 export interface RadiobuttonCore<T> extends BaseFormCore {
     radioGroupName: string;
     items: RadioButtonItem<T>[];
-}
+}

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

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

package/{lib/components/section/section.model.d.ts → src/lib/components/section/section.model.ts}

@@ -1,7 +1,11 @@
 import { InjectionToken } from '@angular/core';
-export declare const SECTION_COMPONENT_TOKEN: InjectionToken<SectionCore>;
+
+export const SECTION_COMPONENT_TOKEN = new InjectionToken<SectionCore>(
+    'SectionComponentToken'
+);
+
 export interface SectionCore {
     title: string;
     showContent: boolean;
     backgroundColor: string;
-}
+}

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/{lib/components/side-menu/index.d.ts → src/lib/components/side-menu/index.ts}

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

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

@@ -0,0 +1,13 @@
+import { Injectable, Optional, Inject } from '@angular/core';
+import { MENU_TOKEN, MenuItem } from '../side-menu.model';
+import { SideMenuService } from './side-menu.service';
+
+@Injectable()
+export class SideMenuProviderService {
+  constructor(
+    @Optional() @Inject(MENU_TOKEN) readonly menu: MenuItem[] = [],
+    readonly menuService: SideMenuService
+  ) {
+    menuService.setMenu(menu);
+  }
+}

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

@@ -0,0 +1,62 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { MenuItem, SIDE_MENU_STATE_TOKEN } from '../side-menu.model';
+
+@Injectable({ providedIn: 'root' })
+export class SideMenuService {
+  private _menuItems = new BehaviorSubject<MenuItem[]>([]);
+  private stateToken = inject(SIDE_MENU_STATE_TOKEN);
+
+  menuItems$: Observable<MenuItem[]> = this._menuItems.asObservable();
+  menuMinimalized = false;
+
+  setMenu(items: MenuItem[]): void {
+    this.resetSidemenuState(items);
+    this._menuItems.next(items);
+  }
+
+  saveMinimalizedState(minimalized: boolean): void {
+    this.stateToken.minimalized = minimalized;
+    localStorage.setItem('SideMenuStateToken', JSON.stringify(this.stateToken));
+  }
+
+  saveExpandedState(item: MenuItem): void {
+    const expanded = this.stateToken.expanded?.find(
+      (i: string) => i === item.label
+    );
+
+    if (!expanded) {
+      this.stateToken.expanded?.push(item.label!);
+      localStorage.setItem(
+        'SideMenuStateToken',
+        JSON.stringify(this.stateToken)
+      );
+      return;
+    }
+
+    this.stateToken.expanded = this.stateToken.expanded?.filter(
+      (i: string) => i !== item.label
+    );
+
+    localStorage.setItem('SideMenuStateToken', JSON.stringify(this.stateToken));
+  }
+
+  private resetSidemenuState(items: MenuItem[]) {
+    if (typeof this.stateToken === 'string') {
+      this.stateToken = JSON.parse(this.stateToken);
+    }
+
+    this.menuMinimalized = this.stateToken.minimalized;
+    const localStorageValue = this.stateToken.expanded;
+
+    if (!localStorageValue) return;
+    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

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

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

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

package/{lib/components/slider/slider.model.d.ts → src/lib/components/slider/slider.model.ts}

@@ -1,9 +1,13 @@
 import { InjectionToken } from '@angular/core';
 import { BaseFormCore } from '../base-form';
-export declare const SLIDER_COMPONENT_TOKEN: InjectionToken<SliderCore>;
+
+export const SLIDER_COMPONENT_TOKEN = new InjectionToken<SliderCore>(
+    'SliderComponentToken'
+);
+
 export interface SliderCore extends BaseFormCore {
     step: number;
     min: number;
     max: number;
     range: boolean;
-}
+}

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

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

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

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+export const SNACKBAR_COMPONENT_TOKEN = new InjectionToken<SnackbarCore>(
+    'SnackbarComponentToken'
+);
+
+export type SnackbarCore = object

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

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

package/{lib/components/stepper/stepper.model.d.ts → src/lib/components/stepper/stepper.model.ts}

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

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

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

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

@@ -0,0 +1,8 @@
+import { InjectionToken } from "@angular/core";
+import { BaseFormCore } from "../base-form";
+
+export const SWITCH_COMPONENT_TOKEN = new InjectionToken<SwitchCore>(
+    'SwitchComponentToken'
+);
+
+export type SwitchCore = BaseFormCore

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

@@ -0,0 +1 @@
+export * from './tab-view.model'

package/{lib/components/tab-view/tab-view.model.d.ts → src/lib/components/tab-view/tab-view.model.ts}

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

package/src/lib/components/table/column-configuration.ts

@@ -0,0 +1,38 @@
+import { ColumnDefinition } from "./table.models";
+
+export class ColumnConfiguration<TEntity> {
+    private column: Partial<ColumnDefinition<TEntity>> = {};
+  
+    constructor(private id: string | keyof TEntity) {
+      this.column.id = id as string;
+    }
+  
+    headerName(headerName: string | ((columnId: string, index?: number) => string)): this {
+      this.column.headerName = headerName;
+      return this;
+    }
+  
+    sortable(sortable: boolean): this {
+      this.column.sortable = sortable;
+      return this;
+    }
+  
+    columnClass(columnClass: string): this {
+      this.column.columnClass = columnClass;
+      return this;
+    }
+  
+    valueFunction(value: (row: TEntity, index?: number) => string): this {
+      this.column.value = value;
+      return this;
+    }
+  
+    type(type: string): this {
+      this.column.type = type;
+      return this;
+    }
+  
+    build(): ColumnDefinition<TEntity> {
+      return this.column as ColumnDefinition<TEntity>;
+    }
+  }