@verisoft/ui-core 19.0.0-rc001 → 20.1.0

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,
+    };
+  }
+}

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

@@ -0,0 +1,261 @@
+import { EventEmitter, InjectionToken, TemplateRef } from '@angular/core';
+import { Params } from '@angular/router';
+import { LazyLoadEvent, Sort, SortDirectionType } from '@verisoft/core';
+import { v4 } from 'uuid';
+import { FieldAlignType } from '../../common';
+
+export const TABLE_COMPONENT_TOKEN = new InjectionToken<TableCore<any>>(
+  'TabVIewComponentToken'
+);
+
+export const TABLE_COLUMN_PROVIDER = new InjectionToken(
+  'TABLE_COLUMN_PROVIDER'
+);
+
+export enum TableSelectionMode {
+  single = 'single',
+  multiple = 'multiple',
+}
+
+export enum TableButtonSeverity {
+  success = 'success',
+  info = 'info',
+  warning = 'warning',
+  danger = 'danger',
+  help = 'help',
+  primary = 'primary',
+  secondary = 'secondary',
+  contrast = 'contrast',
+}
+
+export enum ColumnVisibility {
+  visible = 'visible',
+  hidden = 'hidden',
+  default = 'default',
+}
+
+export type TableSelectionModeType = keyof typeof TableSelectionMode;
+export type TableButtonSeverityType = keyof typeof TableButtonSeverity;
+export type ColumnVisibilityType = keyof typeof ColumnVisibility;
+
+export interface TableCore<T> {
+  sorters: Sort[];
+  columns: ColumnDefinition<T>[];
+  data: T[];
+  total: number;
+  filter: Partial<T> | undefined;
+  loading: boolean;
+  scrollable: boolean;
+  pageSize: number;
+  currentPage: number;
+  showPaginator: boolean;
+  sortMultiple: boolean;
+  lazy: boolean;
+  selection: T[];
+  selectionMode: TableSelectionModeType | undefined;
+  showPageSizePicker: boolean;
+  entityKey: string | undefined;
+  selectionChange: EventEmitter<T[]>;
+  lazyLoad: EventEmitter<LazyLoadEvent>;
+  maximumColumnLength: number;
+  disableCustomClicks: boolean;
+}
+
+export interface TableSignal {
+  name: string,
+  symbol: symbol
+}
+
+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 interface ColumnDefinition<T, _KEY = keyof T> {
+  id: string;
+  value?: (row: T, index?: number) => string;
+  headerName?: ((columnId: string, index?: number) => string) | string;
+  icon?: string | ((row?: T | undefined) => string);
+  type?: string;
+  sortable?: boolean;
+  format?: (row: T) => string
+  routerLink?: (row: T) => string | string;
+  queryParams?: Params;
+  columnClass?: string;
+  template?: TemplateRef<{ $implicit: T }>;
+  actions?: ActionColumnsDefinition<T>[];
+  textAlign?: FieldAlignType;
+  width?: string | number;
+  forceVisibility?: ColumnVisibilityType;
+  visible?: boolean;
+}
+
+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: SortDirectionType | undefined = undefined;
+  columnClass?: string;
+  queryParams?: Params;
+  routerLink?: (row: T) => string | string;
+  valueGetter!: (row: T, index: number) => string;
+  headerGetter!: (columnId: string, index: number) => string | string;
+  template?: TemplateRef<{ $implicit: T }>;
+  actions?: ActionColumnsDefinition<T>[];
+  sortable?: boolean;
+  id: string;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  format!: Function;
+  textAlign?: FieldAlignType;
+  width: string | undefined;
+  forceVisibility: ColumnVisibilityType = ColumnVisibility.default;
+  visible = true;
+
+  constructor(readonly configuration: ColumnDefinition<T>) {
+    this.id = this.configuration.id;
+
+    if (this.configuration.format) {
+      this.format = this.configuration.format;
+    }
+
+    if (this.configuration.value) {
+      this.valueGetter = (row, index) => {
+        const value = this.configuration.value?.(row, index) ?? '-';
+        return this.format ? this.format(value, row) : value;
+      };
+    } else {
+      this.valueGetter = (row) => {
+        const value = ((row as { [key: string]: string })?.[this.configuration.id]) ?? '';
+        return this.format ? this.format(value, row) : value;
+      };
+    }
+
+    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 = (
+        typeof this.configuration.headerName === 'string'
+          ? () => this.configuration.headerName ?? ''
+          : (columnId: string, index: number) =>
+              (<(columnId: string, index?: number) => string>(
+                this.configuration.headerName
+              ))?.(columnId, index) ?? this.id
+      ) as (columnId: string, index: number) => string;
+    } else {
+      this.headerGetter = () => "";
+    }
+
+    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;
+    }
+
+    if (this.configuration.width){
+      this.width = typeof this.configuration.width === "number" ? this.configuration.width + 'px' : this.configuration.width;
+    }
+
+    if (this.configuration.textAlign !== undefined) {
+      this.textAlign = this.configuration.textAlign;
+    }
+
+    if (this.configuration.forceVisibility) {
+      this.forceVisibility = this.configuration.forceVisibility;
+    }
+
+    if (this.configuration.visible !== undefined) {
+      this.visible = this.configuration.visible;
+    }
+  }
+}
+
+export class RowModel<T> {
+  row: T;
+  index?: number;
+  id: number | string;
+  selected: boolean;
+  marked?: boolean;
+  focused?: boolean;
+  expanded: boolean;
+  fnc?: void;
+  customRoute: string | undefined;
+
+  constructor(
+    row: T,
+    selected: boolean,
+    expanded: boolean,
+    marked?: boolean,
+    index?: number,
+    fnc?: void,
+    customRoute?: string,
+    entityKey?: string
+  ) {
+    this.row = row;
+    this.id = (row as { [key: string]: string })['id'] ?? v4();
+    this.index = index;
+    this.selected = selected;
+    this.expanded = expanded;
+    this.marked = marked;
+    this.fnc = fnc;
+    this.customRoute = createCustomRoute<T>(row, entityKey, customRoute);
+  }
+}
+
+function createCustomRoute<T>(row: T, entityKey?: string, customRoute?: string) {
+  return customRoute && entityKey
+    ? `${customRoute}/` + (row as { [key: string]: string })[entityKey]
+    : undefined;
+}

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

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

package/{lib/components/table-filter/table-filter.model.d.ts → src/lib/components/table-filter/table-filter.model.ts}

@@ -1,6 +1,10 @@
 import { InjectionToken } from '@angular/core';
 import { BaseFormDirectiveCore } from '../base-form';
-export declare const TABLE_FILTER_COMPONENT_TOKEN: InjectionToken<TableFilterCore<any>>;
+
+export const TABLE_FILTER_COMPONENT_TOKEN = new InjectionToken<TableFilterCore<any>>(
+    'TableFilterComponentToken'
+);
+
 export interface FilterDefinition {
     optionLabel: string;
     label: string;
@@ -9,6 +13,7 @@ export interface FilterDefinition {
     filterType?: 'dropdown' | 'checkbox' | 'calendar' | 'multiselect';
     initialValue?: any;
 }
+
 export interface TableFilterCore<T> extends BaseFormDirectiveCore<T> {
     filterDefinitions: FilterDefinition[];
     title: string;

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

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

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

@@ -0,0 +1,13 @@
+import { InjectionToken, InputSignal } from "@angular/core";
+import { ControlSeverityType, FieldSizeType } from "../../common";
+
+export const TAG_COMPONENT_TOKEN = new InjectionToken<TagCore>('TagComponentToken');
+
+export type TagVariant = 'bold' | 'subtle';
+
+export interface TagCore {
+    label: InputSignal<string | undefined>;
+    severity: InputSignal<ControlSeverityType | undefined>;
+    variant: InputSignal<TagVariant>;
+    size: InputSignal<FieldSizeType>;
+  }

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

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

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

@@ -1,6 +1,10 @@
 import { InjectionToken } from '@angular/core';
 import { BaseFormCore } from '../base-form';
-export declare const TEXTAREA_COMPONENT_TOKEN: InjectionToken<TextareaCore>;
+
+export const TEXTAREA_COMPONENT_TOKEN = new InjectionToken<TextareaCore>(
+    'TextareaComponentToken'
+);
+
 export interface TextareaCore extends BaseFormCore {
     rows: number;
     cols: number;

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

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

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

@@ -1,9 +1,13 @@
 import { InjectionToken } from '@angular/core';
 import { FieldSizeType, FieldTypeType } from '../../common';
 import { BaseFormCore } from '../base-form';
-export declare const TEXTFIELD_COMPONENT_TOKEN: InjectionToken<TextfieldCore>;
+
+export const TEXTFIELD_COMPONENT_TOKEN = new InjectionToken<TextfieldCore>(
+    'TextfieldComponentToken'
+);
+
 export interface TextfieldCore extends BaseFormCore {
     size: FieldSizeType | undefined;
     type: FieldTypeType;
     floatLabel: boolean;
-}
+}

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

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

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

@@ -0,0 +1,13 @@
+import { InjectionToken, Signal } from '@angular/core';
+import { ControlSeverityType, FieldSizeType, PositionType } from '../../common';
+
+export const TOOLTIP_COMPONENT_TOKEN = new InjectionToken<TooltipCore>(
+    'TooltipComponentToken'
+);
+
+export interface TooltipCore {
+    color: Signal<ControlSeverityType | undefined>;
+    position: Signal<PositionType | undefined>;
+    size: Signal<FieldSizeType | undefined>;
+    tooltipText: Signal<string | undefined>;
+}

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

@@ -0,0 +1,12 @@
+import { Directive, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Directive()
+export abstract class UnsubscribeComponent implements OnDestroy {
+  destroyed$ = new Subject<void>();
+
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+}