@verisoft/ui-core 20.0.0 → 20.1.1

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

@@ -0,0 +1,16 @@
+import { InjectionToken } from '@angular/core';
+import { BaseFormCore } from '../base-form';
+
+export const RADIOBUTTON_COMPONENT_TOKEN = new InjectionToken<RadiobuttonCore<any>>(
+    'RadiobuttonComponentToken'
+);
+
+export interface RadioButtonItem<T> {
+    id: string;
+    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/src/lib/components/section/section.model.ts

@@ -0,0 +1,11 @@
+import { InjectionToken } from '@angular/core';
+
+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/src/lib/components/side-menu/index.ts

@@ -0,0 +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';

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/src/lib/components/slider/slider.model.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+import { BaseFormCore } from '../base-form';
+
+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/src/lib/components/stepper/stepper.model.ts

@@ -0,0 +1,24 @@
+import { EventEmitter, InjectionToken, TemplateRef } from "@angular/core";
+import { FieldSizeType, LayoutTypeType } from "../../common";
+
+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>
+    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/src/lib/components/tab-view/tab-view.model.ts

@@ -0,0 +1,22 @@
+import { EventEmitter, InjectionToken, TemplateRef } from "@angular/core";
+
+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>; 
+}
+
+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>;
+    }
+  }

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

@@ -0,0 +1,4 @@
+export * from './table.models';
+export * from './table-column.directive';
+export * from './table-builder';
+export * from './column-configuration';

package/src/lib/components/table/table-builder.ts

@@ -0,0 +1,93 @@
+import { Injectable } from '@angular/core';
+import { ColumnConfiguration } from './column-configuration';
+import { ColumnDefinition } from './table.models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TableBuilder<TEntity> {
+  private columns: ColumnDefinition<TEntity>[] = [];
+
+  addColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    const columnConfig = new ColumnConfiguration<TEntity>(id);
+    config?.(columnConfig);
+    this.columns.push(columnConfig.build());
+    return this;
+  }
+
+  addTextColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('text');
+    });
+  }
+
+  addNumberColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('number').columnClass('text-end');
+    });
+  }
+
+  addDateColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('date').valueFunction((row) => covertFromDateToUserLocale(row, id as string));
+    });
+  }
+
+  addBooleanColumn(
+    id: string,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('boolean');
+    });
+  }
+
+  addEnumColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('enum');
+    });
+  }
+
+  build(): ColumnDefinition<TEntity>[] {
+    return this.columns;
+  }
+}
+
+function covertFromDateToUserLocale<TEntity>(row: TEntity, id: string) {
+  const value = (row as { [key: string]: undefined | string | Date })[id];
+  if (value === undefined) {
+    return '';
+  }
+
+  const locale = navigator.language;
+
+  if (value instanceof Date) {
+    return value.toLocaleDateString(locale);
+  }
+
+  if (typeof value === 'string' && !isNaN(Date.parse(value))) {
+    return new Date(value).toLocaleDateString(locale);
+  }
+
+  return value;
+}

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

@@ -0,0 +1,62 @@
+import { ContentChild, Directive, Input, TemplateRef } from '@angular/core';
+import { Params } from '@angular/router';
+import { FieldAlign, FieldAlignType } from '../../common';
+import { ColumnDefinition, ColumnProvider, ColumnVisibility, ColumnVisibilityType, TABLE_COLUMN_PROVIDER } from './table.models';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-table-column',
+  standalone: true,
+  providers: [
+    {
+      provide: TABLE_COLUMN_PROVIDER,
+      useExisting: TableColumnDirective,
+      multi: true,
+    },
+  ],
+})
+export class TableColumnDirective<T> implements ColumnProvider<T> {
+  @ContentChild(TemplateRef) template!:
+  TemplateRef<{ $implicit: T }>;
+
+  @Input() index = 0;
+
+  @Input() id!: string;
+
+  @Input() columnClass!: string;
+
+  @Input() sortable!: boolean;
+
+  @Input() routerLink!: (row: T) => string;
+
+  @Input() queryParams!: Params;
+
+  @Input() headerName!: ((column: string, index?: number) => string) | string;
+
+  @Input() width: string | number | undefined;
+
+  @Input() textAlign: FieldAlignType = FieldAlign.left;
+
+  @Input() format!: (row: T) => string
+
+  @Input() forceVisibility: ColumnVisibilityType = ColumnVisibility.default;
+
+  @Input() visible = true;
+
+  getDefinition(): ColumnDefinition<T> {
+    return {
+      id: this.id,
+      columnClass: this.columnClass,
+      template: this.template,
+      headerName: this.headerName,
+      routerLink: this.routerLink,
+      queryParams: this.queryParams,
+      sortable: this.sortable,
+      width: this.width,
+      format: this.format,
+      textAlign: this.textAlign,
+      forceVisibility: this.forceVisibility,
+      visible: this.visible,
+    };
+  }
+}