@verisoft/ui-govcz 18.5.0 → 18.6.1

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

@@ -1,387 +0,0 @@
-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',
-  standalone: true,
-  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['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

@@ -1,17 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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/textarea/index.ts

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

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

@@ -1,50 +0,0 @@
-<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

@@ -1,78 +0,0 @@
-import { CommonModule } from '@angular/common';
-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,
-} from '@verisoft/ui-core';
-import { Icons } from '../../icons';
-import { GovSizePipe } from '../../pipes';
-import { ErrorComponent } from '../errors';
-@Component({
-  selector: 'v-textarea',
-  standalone: true,
-  imports: [
-    CommonModule,
-    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, TextfieldCore
-{
-  @Input() floatLabel!: boolean;
-  @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;
-
-  icons = Icons;
-
-  constructor(@Optional() @Self() ngControl: NgControl) {
-    super(ngControl);
-  }
-}

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

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

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

@@ -1,56 +0,0 @@
-<gov-form-control class="mb-3">
-    @if (label) {
-    <gov-form-label
-        [slot]="labelSlot"
-        [size]="size | govSize"
-    >
-        <div class="d-flex">
-            {{ label | translate }}
-            @if (tooltip) {
-            <v-tooltip [message]="tooltip | translate" />
-            }
-        </div>
-    </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"></v-validation-message>
-        @if (message) {
-        <gov-form-message
-            [slot]="messageSlot"
-            color="neutral"
-        >
-            {{ message }}
-        </gov-form-message>
-        }
-    </gov-form-group>
-</gov-form-control>