@verisoft/ui-govcz 20.1.0 → 20.1.2

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

@@ -1,296 +0,0 @@
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  NO_ERRORS_SCHEMA,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Optional,
-  Output,
-  Self,
-  SimpleChanges,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormControl,
-  NgControl,
-  ReactiveFormsModule,
-} from '@angular/forms';
-import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
-import { TranslateModule } from '@ngx-translate/core';
-import { DEFAULT_PAGE_SIZE, FilterEvent, getValueByPath, LazyLoadEvent } from '@verisoft/core';
-import {
-  BaseFormInputComponent,
-  DropdownCore,
-  DROPDOWN_COMPONENT_TOKEN,
-  FieldSizeType,
-  FieldSize,
-} from '@verisoft/ui-core';
-import { debounceTime, distinctUntilChanged, Subscription } from 'rxjs';
-import { Icons } from '../../icons';
-import { ErrorComponent } from '../errors';
-import { TextfieldComponent } from '../textfield';
-import { DropdownItemComponent } from './dropdown-item.component';
-import { DropDownItemData } from './dropdown.model';
-
-@Component({
-    selector: 'v-dropdown',
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        GovDesignSystemModule,
-        ErrorComponent,
-        DropdownItemComponent,
-        TextfieldComponent,
-        ScrollingModule,
-        TranslateModule,
-    ],
-    templateUrl: './dropdown.component.html',
-    styleUrl: './dropdown.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    providers: [
-        {
-            provide: DROPDOWN_COMPONENT_TOKEN,
-            useExisting: DropdownComponent,
-        },
-    ],
-    schemas: [
-        NO_ERRORS_SCHEMA
-    ]
-})
-export class DropdownComponent<T>
-  extends BaseFormInputComponent
-  implements ControlValueAccessor, DropdownCore<T>, OnInit, OnChanges, OnDestroy {
-
-  @ViewChild('filterTextField', { static: false }) filterTextField!: ElementRef;
-
-  @Input() options: T[] | undefined = [];
-  @Input() optionLabel: string | undefined;
-  @Input() optionValue: string | undefined;
-  @Input() dropdownIcon: string | undefined;
-  @Input() floatLabel: string | undefined;
-  @Input() lazy!: boolean;
-  @Input() filter!: boolean;
-  @Input() editable!: boolean;
-  @Input() loading!: boolean;
-  @Input() size: FieldSizeType = FieldSize.medium;
-  @Input() showFilter = true;
-  @Input() localSearch = true;
-  @Input() forceMinWidth = false;
-
-  @Output() changed = new EventEmitter<any>();
-  @Output() showed = new EventEmitter<any>();
-  @Output() cleared = new EventEmitter<any>();
-  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
-  @Output() filtered = new EventEmitter<FilterEvent>();
-
-  opened = false;
-  icons = Icons;
-  selectedItem: DropDownItemData<T> | undefined;
-  filterControl = new FormControl('');
-  filterSub: Subscription | undefined
-  dropdownOptions: DropDownItemData<T>[] | undefined;
-  private readonly pageSize = DEFAULT_PAGE_SIZE;
-  private lastPage: number | undefined;
-
-  get labelClasses() {
-    return {
-      disabled: this.ngControl?.disabled,
-      error: this.ngControl?.invalid
-    };
-  }
-
-  get inputClasses() {
-    return {
-      'disabled-input': this.ngControl?.disabled,
-      'error-input': this.ngControl?.invalid
-    };
-  }
-
-  constructor(@Optional() @Self() ngControl: NgControl,
-    private changeDetectorRef: ChangeDetectorRef) {
-    super(ngControl);
-  }
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.filterSub = this.filterControl.valueChanges.pipe(
-      debounceTime(300),
-      distinctUntilChanged()
-    ).subscribe((value) => {
-      this.filterOptions(value);
-    });
-  }
-
-  override writeValue(value: any): void {
-    const selectedItem = (value == undefined || value === "") ? undefined : (this.dropdownOptions?.find(x => x.value === value)
-      ?? { value, label: '', option: undefined as T, selected: false } as unknown as DropDownItemData<T>)
-    this.selectItem(selectedItem, false);
-
-    this.changeDetectorRef.detectChanges();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['options'] || changes['loading']) {
-      this.dropdownOptions = this.convertToOptions();
-      if (this.selectedItem && !this.selectedItem?.item) {
-        const item = this.dropdownOptions?.find(x => this.selectedItem?.value === x.value);
-        if (item) {
-          this.selectItem(item, false);
-        }
-      }
-    }
-
-    this.changeDetectorRef.detectChanges();
-  }
-
-  private convertToOptions(): DropDownItemData<T>[] | undefined {
-    return this.options?.map((option) => ({
-      label: (this.optionLabel ? getValueByPath(option, this.optionLabel) : option) as unknown as string,
-      value: this.optionValue ? getValueByPath(option, this.optionValue) : option as unknown as string,
-      item: option,
-      selected: false,
-    } as DropDownItemData<T>)
-    );
-  }
-
-  ngOnDestroy() {
-    this.filterSub?.unsubscribe();
-  }
-
-  toggleDropdown() {
-    if (this.ngControl?.disabled) {
-      return;
-    }
-
-    if (!this.opened) {
-      this.openDropdown();
-    } else {
-      this.closeDropdown();
-    }
-  }
-
-  protected clearSelection(event: MouseEvent) {
-    event.stopPropagation();
-    this.changed.emit(null);
-    this.dropdownOptions = this.dropdownOptions?.map(x => ({ ...x, selected: false })) ?? [];
-    this.ngControl?.control?.setValue(null);
-  }
-
-  private openDropdown() {
-    this.opened = true;
-    this.setFilterFocus();
-    this.showed.emit();
-  }
-
-  selectItem(option: DropDownItemData<T> | undefined, emitChange: boolean) {
-    if (option == undefined) {
-      this.selectedItem = undefined;
-      this.closeDropdown();
-      return;
-    }
-
-    if (this.selectedItem && this.selectedItem != option) {
-      this.selectedItem.selected = false;
-    }
-
-    option.selected = true;
-    this.selectedItem = option;
-
-    if (emitChange) {
-      if (this.ngControl?.control?.value !== option.value) {
-        this.changed.emit(option.value);
-        this.ngControl?.control?.setValue(option?.value);
-      }
-    }
-
-    this.closeDropdown();
-  }
-
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    if (!target.closest('v-dropdown')) {
-      this.opened = false;
-    }
-  }
-
-  onScroll(index: number) {
-    this.loadDataForIndex(index);
-  }
-
-  onKeyDown(event: KeyboardEvent) {
-    if (this.formControl.disabled || this.readonly || this.loading || !this.opened) {
-      return;
-    }
-
-    switch (event.code) {
-      case 'ArrowDown':
-        break;
-
-      case 'ArrowUp':
-        break;
-
-      case 'ArrowLeft':
-      case 'ArrowRight':
-        break;
-    }
-  }
-
-  private loadDataForIndex(index: number) {
-    if (this.lazy) {
-      const currentPage = Math.floor(index / this.pageSize);
-      const shouldLazyLoad = currentPage !== this.lastPage;
-      if (shouldLazyLoad) {
-        this.lastPage = currentPage;
-        this.lazyLoad.emit({
-          filter: this.createFilterObject(this.filterControl.value),
-          offset: currentPage * this.pageSize,
-          limit: this.pageSize,
-        });
-      }
-    }
-  }
-
-  private setFilterFocus() {
-    setTimeout(() => {
-      this.filterTextField?.nativeElement?.querySelector("input").focus();
-    }, 200);
-  }
-
-  private closeDropdown() {
-    this.opened = false;
-  }
-
-  private filterOptions(value: string | null) {
-    if (!this.localSearch) {
-      this.filtered.emit({
-        filter: !value ? undefined : value,
-      });
-    }
-
-    if (this.lazy) {
-      this.loadDataForIndex(0);
-    } else {
-      const loweredFilterValue = value?.toLocaleLowerCase();
-      this.dropdownOptions = !loweredFilterValue ?
-        this.convertToOptions()
-        : this.convertToOptions()?.filter(x => x.label?.toLocaleLowerCase()?.indexOf(loweredFilterValue) !== -1);
-      this.changeDetectorRef.detectChanges();
-    }
-  }
-
-  private createFilterObject(filterValue: string | null): Partial<T> {
-    return (this.optionLabel ? { [this.optionLabel]: filterValue } : filterValue) as unknown as Partial<T>
-  }
-}

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

@@ -1,6 +0,0 @@
-export interface DropDownItemData<T> {
-    label: string;
-    value: string | number;
-    item: T;
-    selected: boolean;
-}

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

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

package/src/lib/components/dropdown-button/dropdown-button.component.html

@@ -1,31 +0,0 @@
-<gov-dropdown position="left">
-    <v-button
-      [label]="label()"
-      [icon]="icon()"
-      [rounded]="rounded() ?? false"
-      [outlined]="outlined() ?? false"
-      [raised]="raised() ?? false"
-      [severity]="severity()"
-      [type]="type()"
-      [size]="size()"
-    />
-  
-    @if (items()?.length) {
-      <ul slot="list">
-        @for (item of items(); track item.id) {
-          <li>
-            <v-button
-              class="w-100"
-              [label]="item.label"
-              [icon]="item.icon"
-              [severity]="$any('normal')"
-              [size]="'medium'"
-              [type]="type()"
-              (click)="fireClickItem(item)"
-            />
-          </li>
-        }
-      </ul>
-    }
-  </gov-dropdown>
-  

package/src/lib/components/dropdown-button/dropdown-button.component.ts

@@ -1,34 +0,0 @@
-import { Component, input, output } from "@angular/core";
-import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
-import { DropdownButtonCore, DROPDOWN_BUTTON_COMPONENT_TOKEN, ButtonCore, ControlSeverityType, ControlSeverity, FieldSizeType, MenuItem, GovButtonTypeType, GovButtonType } from "@verisoft/ui-core";
-import { ButtonComponent } from "../button";
-
-@Component({
-    selector: 'v-dropdown-button',
-    templateUrl: './dropdown-button.component.html',
-    imports: [ GovDesignSystemModule, ButtonComponent],
-    providers: [
-        { provide: DROPDOWN_BUTTON_COMPONENT_TOKEN, useExisting: DropdownButtonComponent }
-    ]
-})
- export class DropdownButtonComponent implements DropdownButtonCore {
-    label = input<string | undefined>();
-    icon = input<string | undefined>();
-    rounded = input<boolean | undefined>(false);
-    raised = input<boolean | undefined>(false);
-    outlined = input<boolean | undefined>(false);
-    severity = input<ControlSeverityType | undefined>(ControlSeverity.primary);
-    size = input<FieldSizeType | undefined>();
-    type = input<GovButtonTypeType>(GovButtonType.solid);
-    items = input<MenuItem[] | undefined>(undefined);
-
-    fireClick = output<MenuItem>();
-
-    fireClickItem(item: MenuItem): void {
-        if (item.command) {
-            item.command();
-        } else {
-            this.fireClick.emit(item);
-        }
-      }
- }

package/src/lib/components/dropdown-button/index.ts

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

package/src/lib/components/errors/error.component.html

@@ -1,11 +0,0 @@
-@if (ngControl && ngControl.errors) {
-<gov-form-message 
-    [slot]="errorSlot" 
-    color="error"
->
-    {{ getErrorMessage(ngControl.errors) | async }}
-  <gov-icon 
-    [name]="icons.warning" 
-    slot="validation-icon" />
-</gov-form-message>
-}

package/src/lib/components/errors/error.component.spec.ts

@@ -1,19 +0,0 @@
-describe('Extract first key from errors object', () => {
-    it('should return the first key from an object with multiple keys', () => {
-      const errors = { name: 'Required', email: 'Invalid' };
-      const key = Object.keys(errors)[0];
-      expect(key).toBe('name');
-    });
-  
-    it('should return undefined for an empty object', () => {
-      const errors = {};
-      const key = Object.keys(errors)[0];
-      expect(key).toBeUndefined();
-    });
-  
-    it('should return the only key in a single-key object', () => {
-      const errors = { password: 'Too short' };
-      const key = Object.keys(errors)[0];
-      expect(key).toBe('password');
-    });
-  });

package/src/lib/components/errors/error.component.ts

@@ -1,29 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component, inject, Input, } from "@angular/core";
-import { NgControl, ValidationErrors } from "@angular/forms";
-import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
-import { ERROR_PROVIDER_TOKEN } from "@verisoft/core";
-import { SlotPosition, SlotPositionType } from "@verisoft/ui-core";
-import { Observable } from "rxjs";
-import { Icons } from "../../icons";
-
-@Component({
-  selector: "v-validation-message",
-  templateUrl: "./error.component.html",
-  styleUrl: "./error.component.scss",
-  imports: [CommonModule, GovDesignSystemModule]
-})
-export class ErrorComponent {
-  @Input({ required: true }) ngControl?: NgControl;
-
-  @Input() errorSlot: SlotPositionType = SlotPosition.bottom
-
-  @Input() messageSlot: SlotPositionType = SlotPosition.bottom
-
-  readonly errorService = inject(ERROR_PROVIDER_TOKEN);
-  icons = Icons
-
-  getErrorMessage(errors: ValidationErrors): Observable<string | undefined> {
-    return this.errorService.mapError(errors);
-  }
-}

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

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

package/src/lib/components/feature-list/directives/feature-list-column.directive.ts

@@ -1,32 +0,0 @@
-import { Directive, Input } from '@angular/core';
-import { GenericFieldType, GenericFieldTypeType, TableColumnDirective } from '@verisoft/ui-core';
-import { FEATURE_LIST_COLUMN_PROVIDER, FeatureListColumnDefinition, FeatureListColumnProvider } from '../feature-list-page.model';
-
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'v-feature-list-column',
-  standalone: true,
-  providers: [
-    {
-      provide: FEATURE_LIST_COLUMN_PROVIDER,
-      useExisting: FeatureListColumnDirective,
-      multi: true,
-    },
-  ],
-})
-export class FeatureListColumnDirective<T>
-  extends TableColumnDirective<T>
-  implements FeatureListColumnProvider<T>
-{
-  @Input() filter = false;
-
-  @Input() type: GenericFieldTypeType = GenericFieldType.text;
-
-  override getDefinition(): FeatureListColumnDefinition<T> {
-    const definition = super.getDefinition() as FeatureListColumnDefinition<T>;
-    definition.filter = this.filter;
-    definition.type = this.type;
-    definition.format = this.format;
-    return definition;
-  }
-}

package/src/lib/components/feature-list/directives/feature-list-filter-field.directive.ts

@@ -1,8 +0,0 @@
-import { Directive } from '@angular/core';
-import { FilterFieldDirective } from '../../filter';
-
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'v-feature-list-filter-field',
-})
-export class FeatureListFilterFieldDirective extends FilterFieldDirective {}

package/src/lib/components/feature-list/feature-list-filter.pipe.ts

@@ -1,20 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core";
-import { GenericFieldDefinition, GenericFieldType } from "@verisoft/ui-core";
-import { FeatureListColumnDefinition } from "./feature-list-page.model";
-
-@Pipe({
-    name: 'featureListColumn',
-})
-export class FeatureListFilterPipe<T> implements PipeTransform {
-    transform(value: FeatureListColumnDefinition<T>[] | undefined): GenericFieldDefinition[] | undefined {
-        if (!value){
-            return undefined;
-        }
-
-        return value.filter(x => x.filter).map((x, index) => ({
-            name: x.id,
-            label: typeof x.headerName === 'function'? x.headerName(x.id, index) : x.headerName ?? '',
-            type: x.type as GenericFieldType,
-        }));
-    }
-}

package/src/lib/components/feature-list/feature-list-page.component.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import {
-  FEATURE_LIST_PAGE_CONFIG_PROPERTY,
-  FeatureListPageConfig,
-} from './feature-list-page.model';
-import { FeatureListComponent } from './feature-list.component';
-
-@Component({
-    selector: 'v-feature-list-page',
-    imports: [FeatureListComponent],
-    template: `
-    <v-feature-list
-      [title]="config.title"
-      [tableName]="config.tableName"
-      [showAdd]="config.showAdd ?? true"
-      [showDownload]="config.showDownload ?? true"
-      [showDelete]="config.showDelete ?? true"
-    >
-    </v-feature-list>
-  `
-})
-export class FeatureListPageComponent {
-  config!: FeatureListPageConfig;
-
-  constructor(activatedRoute: ActivatedRoute) {
-    this.config =
-      activatedRoute.snapshot.data[FEATURE_LIST_PAGE_CONFIG_PROPERTY];
-  }
-}

package/src/lib/components/feature-list/feature-list-page.model.ts

@@ -1,42 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { Route } from '@angular/router';
-import { ColumnDefinition, GenericFieldTypeType } from '@verisoft/ui-core';
-import { FeatureListPageComponent } from './feature-list-page.component';
-
-export interface FeatureListPageConfig {
-  title: string;
-  datasource: string;
-  tableName: string;
-  showAdd?: boolean;
-  showDownload?: boolean;
-  showDelete?: boolean;
-}
-
-export const FEATURE_LIST_PAGE_CONFIG_PROPERTY = 'feature_list_config';
-
-export function addFeatureListPage(
-  value: Partial<Route> & { config: FeatureListPageConfig }
-): Route {
-  const { config, ...route } = value;
-  return {
-    component: FeatureListPageComponent,
-    ...route,
-    data: {
-      [FEATURE_LIST_PAGE_CONFIG_PROPERTY]: config,
-      ...(route.data ?? {}),
-    },
-  };
-}
-
-export interface FeatureListColumnDefinition<T> extends ColumnDefinition<T> {
-  filter?: boolean;
-  type?: GenericFieldTypeType;
-}
-
-export const FEATURE_LIST_COLUMN_PROVIDER = new InjectionToken(
-  'FEATURE_LIST_COLUMN_PROVIDER'
-);
-
-export interface FeatureListColumnProvider<T> {
-  getDefinition: () => FeatureListColumnDefinition<T>;
-}

package/src/lib/components/feature-list/feature-list.component.html

@@ -1,67 +0,0 @@
-<div class="feature-list__container full-height-container">
-  <v-filter
-    #filter
-    [title]="title"
-    [total]="tableTotal"
-    [recordsText]="recordsText"
-    [fields]="columns | featureListColumn"
-    [filters]="filters"
-    [fulltextFieldName]="fulltextFieldName"
-    [showFulltext]="showFulltext"
-    [showFilters]="showExtendedFilter"
-    [applyLabel]="applyLabel"
-    [clearLabel]="clearLabel"
-    [buttonType]="buttonType"
-    [buttonOutlined]="buttonOutlined"
-  >
-    <v-action-button-group
-      [maxItems]="maxVisibleActions"
-      [maxItemsMobile]="maxVisibleMobileActions"
-    >
-      @if (showAdd) {
-      <v-action-button
-        [icon]="icons.add"
-        label="Add"
-        [disabled]="!canAdd"
-        (click)="addClick.emit()"
-      />
-      } @if (showDelete){
-      <v-action-button
-        [icon]="icons.delete"
-        label="Delete"
-        [disabled]="!canDelete || !selection.length"
-        (click)="startDeleteItems()"
-      />
-      } @if (showDownload){
-      <v-action-button
-        [icon]="icons.download"
-        label="Download"
-        [disabled]="!canDownload"
-        (click)="startDownload()"
-      />
-      }
-    </v-action-button-group>
-  </v-filter>
-  <div class="feature-list__table-container full-height-container">
-    <div class="full-height-container">
-      <v-table
-        #table
-        useDatasource
-        useFilter
-        [filterComponent]="filter"
-        class="full-height-container"
-        [selectionMode]="selectionMode"
-        [tableName]="tableName"
-        [autoBind]="true"
-        [datasource]="datasource"
-        [columns]="columns"
-        [extraFilter]="extraFilter"
-        [maximumColumnLength]="maximumColumnLength"
-        [disableCustomClicks]="disableCustomClicks"
-        (selectionChange)="selectItems($event)"
-      >
-        <ng-content />
-      </v-table>
-    </div>
-  </div>
-</div>

package/src/lib/components/feature-list/feature-list.component.scss

@@ -1,10 +0,0 @@
-.full-height-container {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    height: 100%;
-}
-
-:host {
-    @extend .full-height-container;
-}