@verisoft/ui-govcz 20.0.0 → 20.1.0

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

@@ -0,0 +1,390 @@
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  effect,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  Output,
+  QueryList,
+  SimpleChanges,
+  TemplateRef,
+} from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  FormCheckboxEvent,
+  FormSelectEvent,
+} from '@gov-design-system-ce/components';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  DEFAULT_SEARCH_LIMIT,
+  LazyLoadEvent,
+  multiSort,
+  Sort,
+  SortDirectionType,
+} from '@verisoft/core';
+import {
+  ColumnDefinition,
+  ColumnModel,
+  ColumnProvider,
+  DEFAULT_PAGINATION,
+  FieldSize,
+  FieldSizeType,
+  MAX_COLUMN_CHAR_COUNT,
+  RowModel,
+  TABLE_COLUMN_PROVIDER,
+  TABLE_COMPONENT_TOKEN,
+  TableCore,
+  TableSelectionMode,
+  TableService,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { LoaderComponent } from '../loader';
+import { TablePaginationInfoComponent } from './table-pagination-info.component';
+import { getNextSortDirection } from './table.model';
+
+@Component({
+    selector: 'v-table',
+    imports: [
+        CommonModule,
+        RouterModule,
+        GovDesignSystemModule,
+        NgTemplateOutlet,
+        TranslateModule,
+        GovSizePipe,
+        LoaderComponent,
+        TablePaginationInfoComponent,
+    ],
+    templateUrl: './table.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrl: './table.component.scss',
+    providers: [
+        {
+            provide: TABLE_COMPONENT_TOKEN,
+            useExisting: TableComponent,
+        },
+    ]
+})
+export class TableComponent<T>
+  implements OnChanges, AfterViewInit, TableCore<T>
+{
+  @ContentChildren(TABLE_COLUMN_PROVIDER)
+  viewColumns!: QueryList<ColumnProvider<T>>;
+
+  @ContentChild('rowDetail', { static: false })
+  rowDetailTemplate!: TemplateRef<{ $implicit: T }>;
+
+  @ContentChild('rowDetailButton', { static: false })
+  rowDetailButtonTemplate!: TemplateRef<{ $implicit: T }>;
+
+  @Input() sorters!: Sort[];
+  @Input() data!: T[];
+  @Input() total = 0;
+  @Input() filter: Partial<T> | undefined;
+  @Input() extraFilter: Partial<T> | undefined;
+  @Input() loading = false;
+  @Input() scrollable = true;
+  @Input() pageSize = DEFAULT_SEARCH_LIMIT;
+  @Input() currentPage = 1;
+  @Input() showPaginator = true;
+  @Input() userTableWrapper = true;
+  @Input() sortMultiple = false;
+  @Input() lazy = false;
+  @Input() selectionMode: 'single' | 'multiple' | undefined;
+  @Input() selection: T[] = [];
+  @Input() showPageSizePicker = true;
+  @Input() entityKey: string | undefined;
+  @Input() customRoute: string | undefined;
+  @Input() disableCustomClicks = false;
+  @Input() tableName?: string;
+  @Input() size: FieldSizeType = FieldSize.medium;
+  @Input() showActionButtons = false;
+  @Input() maximumColumnLength = MAX_COLUMN_CHAR_COUNT;
+
+  @Input()
+  set columns(value: ColumnDefinition<T>[]) {
+    this._columns = value;
+    this.updateColumnModels();
+  }
+
+  get columns(): ColumnDefinition<T>[] {
+    return this._columns;
+  }
+
+  @Output() selectionChange = new EventEmitter<T[]>();
+  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
+  @Output() download = new EventEmitter<RowModel<T>[]>();
+  @Output() delete = new EventEmitter<RowModel<T>[]>();
+  @Output() save = new EventEmitter<RowModel<T>[]>();
+
+  private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+  private readonly service = inject(TableService);
+  private _columns: ColumnDefinition<T, keyof T>[] = [];
+
+  tableColumns: ColumnModel<T>[] = [];
+  tableRows: RowModel<T>[] = [];
+  pageSizeOptions = DEFAULT_PAGINATION.map((x: number) => ({ value: x.toString() }));
+  allSelected = false;
+  icons = Icons;
+
+  get govPageSize() {
+    return this.pageSize.toString();
+  }
+
+  get tableRowView(): RowModel<T>[] {
+    if (this.lazy) {
+      return this.tableRows;
+    } else {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.tableRows.slice(start, end);
+    }
+  }
+
+  get selected(): RowModel<T>[] {
+    return this.tableRows.filter(r => r.selected);
+  }
+
+  get selectedCount(): number {
+    return this.selected.length;
+  }
+
+  constructor() {
+    effect(() => {
+      this.reactToSignals();
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['data']) {
+      this.updateRowModels();
+      if (!this.lazy && this.data) {
+        this.total = this.data.length;
+      }
+    }
+
+    if (changes['total']) {
+      this.cdRef.markForCheck();
+    }
+
+    if (changes['selection']) {
+      this.selectSelected();
+    }
+
+    if (changes['filter']) {
+      this.updateFilter();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.viewColumns?.length) {
+      this.updateColumnModels();
+      this.cdRef.detectChanges();
+    }
+  }
+
+  protected sortColumn(column: ColumnModel<T>) {
+    if (column.sortable) {
+      column.sortDirection = getNextSortDirection(
+        column.sortDirection,
+        this.sortMultiple
+      );
+
+      if (!this.sortMultiple) {
+        this.tableColumns
+          .filter((x) => x !== column)
+          .forEach((x) => {
+            x.sortDirection = undefined;
+          });
+      }
+
+      const sorts: Sort[] = this.getSorts().map((x) => ({
+        field: 'row.' + x.field,
+        direction: x.direction,
+      }));
+
+      if (!this.lazy) {
+        this.tableRows = multiSort(this.tableRows, sorts);
+      } else {
+        this.fireLazyLoad();
+      }
+    }
+  }
+
+  protected changePage(event: { detail: { pagination: { currentPage: number } } }) {
+    this.currentPage = event.detail.pagination.currentPage;
+    this.fireLazyLoad();
+  }
+
+  protected changePageSize(event: CustomEvent<FormSelectEvent>) {
+    this.pageSize = parseInt(event.detail.value);
+    this.currentPage = 1;
+    this.fireLazyLoad();
+  }
+
+  protected selectRow(row: RowModel<T>, event: MouseEvent) {
+    if (event.ctrlKey || event.metaKey) {
+      this.navigate(row, event);
+      return;
+    }
+
+    if (this.selectionMode === 'single') {
+      row.selected = !row.selected;
+      this.tableRows.forEach((x) => (x !== row ? (x.selected = false) : null));
+      this.fireSelectionChange();
+    } else if (this.selectionMode === 'multiple') {
+      row.selected = !row.selected;
+      this.fireSelectionChange();
+    }
+  }
+
+  protected navigate(row: RowModel<T>, event: MouseEvent) {
+    if (this.disableCustomClicks) {
+      return;
+    }
+
+    event.preventDefault();
+    const targetUrl = this.createUrl(row);
+
+    if (event.ctrlKey || event.metaKey) {
+      setTimeout(() => {
+        window.open(
+          this.router.serializeUrl(this.router.createUrlTree([targetUrl], { relativeTo: this.route })),
+          '_blank'
+        );
+      }, 0);
+    } else {
+      this.router.navigate([targetUrl], { relativeTo: this.route });
+    }
+  }
+
+  protected navigateNewWindow(row: RowModel<T>, event: MouseEvent) {
+  if (this.disableCustomClicks || event.button !== 1) {
+    return;
+  }
+
+    event.preventDefault();
+    const targetUrl = this.createUrl(row);
+
+    window.open(this.router.serializeUrl(this.router.createUrlTree([targetUrl], { relativeTo: this.route })), '_blank');
+  }
+
+  protected toggleAll(event: CustomEvent<FormCheckboxEvent>) {
+    this.allSelected = event.detail.checked;
+    this.tableRows.forEach((x) => (x.selected = this.allSelected));
+    this.fireSelectionChange();
+  }
+
+  protected toggleDetail(row: RowModel<T>) {
+    row.expanded = !row.expanded;
+    this.cdRef.detectChanges();
+  }
+
+  protected selectRowCheckbox(row: RowModel<T>, event: CustomEvent<FormCheckboxEvent>) {
+    row.selected = event.detail.checked;
+    this.allSelected = this.tableRows.every((x) => x.selected);
+    this.fireSelectionChange();
+  }
+
+  protected truncate(text: string): string {
+    return text.length > this.maximumColumnLength
+      ? text.slice(0, this.maximumColumnLength) + '...'
+      : text;
+  }
+
+  protected deselectAll() {
+    this.allSelected = false;
+    this.tableRows.forEach(x => (x.selected = this.allSelected));
+  }
+
+  private createUrl(row: RowModel<T>): string {
+    if (row.customRoute) {
+      return row.customRoute;
+    }
+
+    return row.id.toString();
+  }
+
+  private reactToSignals(): void {
+    const reload = this.service.reload();
+
+    if (typeof reload === 'symbol') {
+      this.fireLazyLoad();
+    } else if (reload.name === this.tableName) {
+      this.fireLazyLoad()
+    }
+
+    this.deselectAll();
+  }
+
+  private updateColumnModels() {
+    const viewColumns = this.viewColumns
+      ?.toArray()
+      .map((x) => x.getDefinition());
+    this.tableColumns = [...(this._columns ?? []), ...(viewColumns ?? [])].map(
+      (x) => new ColumnModel(x)
+    );
+  }
+
+  private updateRowModels(): void {
+    this.tableRows = (this.data ?? []).map(
+      (x) => new RowModel(x, false, false, undefined, undefined, undefined, this.customRoute, this.entityKey)
+    );
+  }
+
+  private fireSelectionChange() {
+    const selectedRows = this.tableRows
+      .filter((x) => x.selected)
+      .map((x) => x.row);
+    this.selectionChange.emit(selectedRows);
+  }
+
+  private selectSelected() {
+    if (this.selection?.length && this.selectionMode) {
+      const selection =
+        this.selectionMode === TableSelectionMode.single
+          ? [this.selection[0]]
+          : this.selection;
+      const selectionSet = new Set(selection);
+      this.tableRows.forEach((item) => {
+        item.selected = selectionSet.has(item.row);
+      });
+
+      this.allSelected = this.tableRows.every((x) => x.selected);
+    }
+  }
+
+  private fireLazyLoad() {
+    const lazyLoadEvent: LazyLoadEvent = {
+      sort: this.getSorts(),
+      offset: (this.currentPage - 1) * this.pageSize,
+      limit: this.pageSize,
+      filter: this.filter,
+    };
+
+    this.lazyLoad.emit(lazyLoadEvent);
+  }
+
+  private updateFilter() {
+    this.fireLazyLoad();
+  }
+
+  private getSorts(): Sort[] {
+    return this.tableColumns
+      .filter((x) => x.sortable && x.sortDirection)
+      .map((x) => ({
+        field: x.id,
+        direction: <SortDirectionType>x.sortDirection,
+      }));
+  }
+}

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

@@ -0,0 +1,17 @@
+import { SortDirection, SortDirectionType } from '@verisoft/core';
+
+export function getNextSortDirection(
+  sortDirection: SortDirectionType | undefined,
+  isNullable = false
+): SortDirectionType | undefined {
+  return isNullable && sortDirection === SortDirection.desc
+    ? undefined
+    : !sortDirection || sortDirection === SortDirection.desc
+    ? SortDirection.asc
+    : SortDirection.desc;
+}
+export 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/table.models.ts

@@ -0,0 +1,12 @@
+import { SortDirection, SortDirectionType } from '@verisoft/core';
+
+export function getNextSortDirection(
+  sortDirection: SortDirectionType | undefined,
+  isNullable = false
+): SortDirectionType | undefined {
+  return isNullable && sortDirection === SortDirection.desc
+    ? undefined
+    : !sortDirection || sortDirection === SortDirection.desc
+    ? SortDirection.asc
+    : SortDirection.desc;
+}

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

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

package/src/lib/components/tag/tag.component.html

@@ -0,0 +1,12 @@
+<gov-tag
+  [color]="severity() | govColor"
+  [type]="variant()"
+  [size]="size() | govSize"
+>
+  @if (label()) {
+    {{ label() | translate }}
+  } @else {
+    <ng-content></ng-content>
+  }
+</gov-tag>
+

package/src/lib/components/tag/tag.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: inline-block;
+}
+

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

@@ -0,0 +1,44 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    input,
+} from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { TranslateModule } from "@ngx-translate/core";
+import {
+    ControlSeverity,
+    ControlSeverityType,
+    FieldSize,
+    FieldSizeType,
+    TagCore,
+    TAG_COMPONENT_TOKEN,
+    TagVariant,
+} from "@verisoft/ui-core";
+import { GovColorPipe, GovSizePipe } from "../../pipes";
+import { GovTagType } from "./tag.model";
+
+@Component({
+    selector: "v-tag",
+    styleUrl: "./tag.component.scss",
+    templateUrl: './tag.component.html',
+    imports: [
+        GovDesignSystemModule,
+        GovSizePipe,
+        GovColorPipe,
+        TranslateModule
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: TAG_COMPONENT_TOKEN,
+            useExisting: TagComponent,
+        }
+    ],
+})
+export class TagComponent implements TagCore {
+    label = input<string | undefined>();
+    severity = input<ControlSeverityType | undefined>(ControlSeverity.primary);
+    variant = input<TagVariant>(GovTagType.bold);
+    size = input<FieldSizeType>(FieldSize.medium);
+}
+

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

@@ -0,0 +1,7 @@
+export enum GovTagType {
+  bold = 'bold',
+  subtle = 'subtle',
+}
+
+export type GovTagTypeType = keyof typeof GovTagType;
+

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

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

package/src/lib/components/textarea/textarea.component.html

@@ -0,0 +1,50 @@
+<gov-form-control class="mb-3">
+    @if (label) {
+    <gov-form-label 
+        [slot]="labelSlot"
+        [size]="size | govSize"
+    >
+        {{ label | translate }}
+    </gov-form-label>
+    }
+    <gov-form-group>
+        <gov-form-input [type]="type"
+            [formControl]="formControl"
+            [minlength]="minlength" 
+            [maxlength]="maxlength" 
+            [size]='size | govSize'  
+            [name]='name' 
+            [role]='role'
+            [required]="required"
+            [readonly]="readonly"
+            [invalid]="ngControl?.errors ? true : false"
+            [multiline]="true"
+            [rows]="rows"
+            [cols]="cols"
+        >
+            @if (icon) {
+            <gov-icon
+                [name]="icon"
+                [slot]="iconPos === 'left' ? 'icon-start' : 'icon-end'"
+            />
+            } @if (prefix) {
+            <p slot="prefix">
+                {{ prefix }}
+            </p>
+            } @if (sufix) {
+            <p slot="sufix">
+                {{ sufix }}
+            </p>
+            }
+        </gov-form-input>
+    </gov-form-group>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+    @if (message) {
+    <gov-form-message 
+        [slot]="messageSlot" 
+        color="neutral"
+        >
+        {{ message | translate }}
+    </gov-form-message>
+    }
+</gov-form-control>

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

@@ -0,0 +1,77 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  TextfieldCore,
+  FieldType,
+  BaseFormInputComponent,
+  FieldSizeType,
+  FieldSize,
+  IconPositionType,
+  IconPosition,
+  SlotPositionType,
+  SlotPosition,
+  TEXTAREA_COMPONENT_TOKEN,
+  TextareaCore,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+@Component({
+  selector: 'v-textarea',
+  imports: [
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    GovSizePipe,
+    ErrorComponent,
+    TranslateModule
+],
+  templateUrl: './textarea.component.html',
+  styleUrl: './textarea.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: TEXTAREA_COMPONENT_TOKEN,
+      useExisting: TextareaComponent,
+    },
+  ]
+})
+export class TextareaComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, TextareaCore {
+  @Input() floatLabel!: string | undefined;
+  @Input() type = FieldType.text;
+  @Input() minlength = 0;
+  @Input() maxlength = 524288;
+  @Input() prefix!: string;
+  @Input() sufix!: string;
+  @Input() message!: string;
+  @Input() name!: string;
+  @Input() role!: string;
+  @Input() size: FieldSizeType = FieldSize.medium;
+  @Input() icon!: string;
+  @Input() iconPos: IconPositionType = IconPosition.right;
+  @Input() labelSlot: SlotPositionType = SlotPosition.top;
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom;
+  @Input() rows = 0;
+  @Input() cols = 0;
+  @Input() autoResize = false;
+
+  icons = Icons;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

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

package/src/lib/components/textfield/textfield.component.html

@@ -0,0 +1,34 @@
+<gov-form-control>
+    @if (label) {
+    <gov-form-label [slot]="labelSlot" [size]="size | govSize">
+        {{ label | translate }}
+        @if (tooltip) {
+        <v-tooltip [tooltipText]="tooltip | translate" />
+        }
+    </gov-form-label>
+    }
+    <gov-form-group>
+        <gov-form-input [inputType]="type" [formControl]="formControl" [minlength]="minlength" [maxlength]="maxlength"
+            [min]="min" [max]="max" [size]='size | govSize' [name]='name' [role]='role' [required]="required"
+            [attr.disabled]="disabled ? 'true' : 'false'" [invalid]="ngControl?.errors ? true : false"
+            [placeholder]="placeholder">
+            @if (icon) {
+            <gov-icon [name]="icon" [slot]="iconPos === 'left' ? 'icon-start' : 'icon-end'" />
+            } @if (prefix) {
+            <p slot="prefix">
+                {{ prefix }}
+            </p>
+            } @if (sufix) {
+            <p slot="sufix">
+                {{ sufix }}
+            </p>
+            }
+        </gov-form-input>
+        <v-validation-message [ngControl]="ngControl" />
+        @if (message) {
+        <gov-form-message [slot]="messageSlot" color="neutral">
+            {{ message }}
+        </gov-form-message>
+        }
+    </gov-form-group>
+</gov-form-control>