@verisoft/ui-govcz 20.1.1 → 20.1.2

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

@@ -1,390 +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',
-    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

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

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

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

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

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

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

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

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

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

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

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

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