@verisoft/ui-core 0.0.1

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

@@ -0,0 +1,18 @@
+import { InjectionToken } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+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;
+    logoUrl: string;
+    userRole: any | any[] | undefined;
+    menuRef: HTMLDivElement;
+}

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

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

package/src/lib/components/index.ts

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

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

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

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

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core';
+import { IconPositionType } from '../../common';
+import { BaseFormCore } from '../base-form';
+
+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,8 @@
+import { InjectionToken } from '@angular/core';
+
+export const LOADER_COMPONENT_TOKEN = new InjectionToken<LoaderCore>(
+    'LoaderComponentToken'
+);
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LoaderCore {}

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

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

package/src/lib/components/multiselect/mutiselect.model.ts

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

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

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

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

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core';
+
+export const PAGE_HEADER_COMPONENT_TOKEN = new InjectionToken<PageHeaderCore>(
+    'PageHeaderComponentToken'
+);
+
+export interface PageHeaderCore {
+    title: string;
+    subtitle: string | undefined;
+    showBackButton: boolean;
+}
+
+export interface PageHeader {
+    title: string;
+    subtitle?: string;
+    showBackButton?: boolean;
+}

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

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

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

@@ -0,0 +1,11 @@
+import { InjectionToken } from '@angular/core';
+import { BaseFormCore } from '../base-form';
+
+export const PASSWORD_COMPONENT_TOKEN = new InjectionToken<PasswordCore>(
+    'PasswordComponentToken'
+);
+
+export interface PasswordCore extends BaseFormCore {
+    toggleMask: boolean;
+    feedback: boolean;
+}

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

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

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/index.ts

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

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,58 @@
+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;
+    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,64 @@
+import { InjectionToken } from '@angular/core';
+
+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<ISideMenu>(
+  '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;
+  icon?: string;
+  expanded?: boolean;
+  data?: MenuItemData;
+  tooltip?: string;
+  url?: string;
+  visible?: boolean;
+  type?: string;
+  children?: MenuItem[];
+  routerLink?: any;
+  class?: string;
+}
+
+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 ISideMenu {
+    item: 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,8 @@
+import { InjectionToken } from '@angular/core';
+
+export const SNACKBAR_COMPONENT_TOKEN = new InjectionToken<SnackbarCore>(
+    'SnackbarComponentToken'
+);
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SnackbarCore {}

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,14 @@
+import { InjectionToken, TemplateRef } from "@angular/core";
+
+export const STEPPER_COMPONENT_TOKEN = new InjectionToken<StepperCore>(
+    'StepperComponentToken'
+);
+
+export interface StepperItem {
+    header: string;
+    template: TemplateRef<any>;
+}
+
+export interface StepperCore {
+    items: StepperItem[];
+}

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,9 @@
+import { InjectionToken } from "@angular/core";
+import { BaseFormCore } from "../base-form";
+
+export const SWITCH_COMPONENT_TOKEN = new InjectionToken<SwitchCore>(
+    'SwitchComponentToken'
+);
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SwitchCore extends 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,19 @@
+import { InjectionToken, TemplateRef } from "@angular/core";
+
+export const TAB_VIEW_COMPONENT_TOKEN = new InjectionToken<TabViewCore>(
+    'TabVIewComponentToken'
+);
+
+export interface TabViewItem {
+    title: string;
+    url?: string;
+    icon?: string;
+    content?: string;
+    contentTemplate?: TemplateRef<unknown>
+}
+
+export interface TabViewCore {
+    items: TabViewItem[];
+    useRouting: boolean;
+    activeIndex: number;
+}

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

@@ -0,0 +1,2 @@
+export * from './table.models';
+export * from './template-column.directive';

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

@@ -0,0 +1,189 @@
+import { InjectionToken, TemplateRef } from '@angular/core';
+import { Params } from '@angular/router';
+import { Page, Sort } from '@verisoft/core';
+import { Observable } from 'rxjs';
+
+export const TABLE_COMPONENT_TOKEN = new InjectionToken<TableCore<any>>(
+  'TabVIewComponentToken'
+);
+
+export const TABLE_COLUMN_PROVIDER = new InjectionToken(
+  'TABLE_COLUMN_PROVIDER'
+);
+
+export interface TableCore<T> {
+  sorters: Sort[];
+  data: T[];
+  total: number;
+  loading: boolean;
+  scrollHeight: string;
+  scrollable: boolean;
+  pageSize: number;
+  currentPage: number;
+  showPaginator: boolean;
+  sortMultiple: boolean;
+  lazy: boolean;
+  selectionMode: 'single' | 'multiple' | null | undefined;
+  multipleSelect: boolean;
+  autoIndex: boolean;
+  showPageSizePicker: boolean;
+  page: Page<T> | undefined;
+  entityId: string;
+  searchIndex$: Observable<number>;
+  filterComponent: any;
+}
+
+export interface ActionColumnsDefinition<T> {
+  severity?: TableButtonSeverity;
+  title?: string;
+  icon?: string;
+  tooltip?: string;
+  rounded?: boolean;
+  outlined?: boolean;
+  raised?: boolean;
+  badge?: string;
+  visible?: (row: T) => boolean;
+  routerLink?: (row: T) => string;
+  queryParams?: Params;
+  disabled?: boolean | ((row: T) => boolean);
+  onClick?: (row: T, event?: MouseEvent) => void;
+}
+
+export interface ColumnProvider<T> {
+  getDefinition(): ColumnDefinition<T>;
+  index: number;
+}
+
+export enum TableButtonSeverity {
+  SUCCESS = 'success',
+  INFO = 'info',
+  WARNING = 'warning',
+  DANGER = 'danger',
+  HELP = 'help',
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  CONTRAST = 'contrast',
+}
+
+export interface ColumnDefinition<T, _KEY = keyof T> {
+  id: string;
+  value?: (row: T, index?: number) => string;
+  headerName?: (column: string, index?: number) => string;
+  icon?: string | ((row?: T | undefined) => string);
+  type?: string;
+  sortable?: boolean;
+  routerLink?: (row: T) => string | string;
+  queryParams?: Params;
+  columnClass?: string;
+  template?: TemplateRef<T>;
+  actions?: ActionColumnsDefinition<T>[];
+}
+
+export function LinkRenderer<T>(text: string, href: string) {
+  return (row: T, index: number | undefined) => {
+    return '<a href="' + href + '">' + text + '</a>';
+  };
+}
+
+export function routerRenderer<T>(link: string, text: string) {
+  return (row: T, index?: number | undefined) => {
+    return { text: text, link: link };
+  };
+}
+
+export function Renderer<T>(fnc: (row: T) => string) {
+  return (row: T) => {
+    return fnc(row);
+  };
+}
+
+export class ColumnModel<T> {
+  sortDirection: SortDirection | undefined = undefined;
+  sortColumn: Sort | undefined = undefined;
+  columnClass?: string;
+  queryParams?: Params;
+  routerLink?: (row: T) => string | string;
+  valueGetter!: (row: T, index: number) => string;
+  headerGetter!: (column: string, index: number) => string | string;
+  template?: TemplateRef<T>;
+  actions?: ActionColumnsDefinition<T>[];
+  sortable?: boolean;
+
+  get headerName(): string {
+    return this.configuration.headerName?.toString() ?? 'undefined';
+  }
+
+  constructor(readonly configuration: ColumnDefinition<T>) {
+    if (this.configuration.value) {
+      this.valueGetter = (row, index) =>
+        this.configuration.value?.(row, index) ?? '-';
+    } else {
+      this.valueGetter = (row) =>
+        ((row as { [key: string]: string })?.[
+          this.configuration.id
+        ] as string) ?? '';
+    }
+
+    if (this.configuration.actions) {
+      this.actions = this.configuration.actions;
+    }
+
+    if (this.configuration.routerLink) {
+      this.routerLink = this.configuration.routerLink;
+    }
+
+    if (this.configuration.columnClass) {
+      this.columnClass = this.configuration.columnClass;
+    }
+
+    if (this.configuration.template) {
+      this.template = this.configuration.template;
+    }
+
+    if (this.configuration.headerName) {
+      this.headerGetter = (column, index) =>
+        this.configuration.headerName?.(column, index) ?? '';
+    } else {
+      this.headerGetter = (column, index) => column[index];
+    }
+
+    if (this.configuration.queryParams) {
+      this.queryParams = this.configuration.queryParams;
+    }
+
+    if (this.routerLink) {
+      this.columnClass += ' ' + 'link';
+    }
+
+    if (this.configuration.sortable !== undefined) {
+      this.sortable = this.configuration.sortable;
+    } else {
+      this.sortable = true;
+    }
+  }
+}
+
+export declare type SortDirection = 'asc' | 'desc' | undefined;
+
+export class RowModel<T> {
+  row: T;
+  index?: number;
+  selected: boolean;
+  marked?: boolean;
+  focused?: boolean;
+  fnc?: void;
+
+  constructor(
+    row: T,
+    selected: boolean,
+    marked?: boolean,
+    index?: number,
+    fnc?: void
+  ) {
+    this.row = row;
+    this.index = index;
+    this.selected = selected;
+    this.marked = marked;
+    this.fnc = fnc;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { ContentChild, Directive, Input, TemplateRef } from '@angular/core';
+import { Params } from '@angular/router';
+import { ColumnDefinition, ColumnProvider, TABLE_COLUMN_PROVIDER } from './table.models';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[v-templateColumn]',
+  standalone: true,
+  providers: [
+    {
+      provide: TABLE_COLUMN_PROVIDER,
+      useExisting: TemplateColumnDirective,
+      multi: true,
+    },
+  ],
+})
+export class TemplateColumnDirective<T> implements ColumnProvider<T> {
+  @ContentChild(TemplateRef) template!: TemplateRef<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;
+
+  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
+    };
+  }
+}

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

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