@verisoft/ui-govcz 18.6.2 → 18.6.3

package/src/lib/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,80 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  CONFIRM_DIALOG_COMPONENT_TOKEN,
+  ConfirmDialogCore,
+  DialogData,
+  DialogService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { takeUntil } from 'rxjs';
+import { GovColorPipe } from '../../pipes';
+import { DynamicComponent } from '../shared-components';
+
+@Component({
+  selector: 'v-confirm-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    GovDesignSystemModule,
+    GovColorPipe,
+    DynamicComponent,
+  ],
+  templateUrl: './confirm-dialog.component.html',
+  styleUrl: './confirm-dialog.component.scss',
+  providers: [
+    {
+      provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
+      useExisting: ConfirmDialogComponent,
+    },
+  ],
+})
+export class ConfirmDialogComponent
+  extends UnsubscribeComponent
+  implements OnInit, ConfirmDialogCore
+{
+  constructor(
+    private readonly dialogService: DialogService,
+    private readonly cdr: ChangeDetectorRef
+  ) {
+    super();
+  }
+
+  visible = false;
+  protected closable = false;
+  data: DialogData = { severity: 'primary', headerIcon: 'info-circle' };
+
+  ngOnInit(): void {
+    this.dialogService.showEvent
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((x: DialogData) => {
+        this.data = x;
+        this.visible = true;
+        this.cdr.detectChanges();
+      });
+
+    this.dialogService.closeEvent
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe(() => {
+        this.data = {};
+        this.visible = false;
+        this.cdr.detectChanges();
+      })
+  }
+
+  protected dialogClick(confirm: boolean) {
+    const { confirmButtonFn, cancelButtonFn } = this.data;
+
+    if (confirm && confirmButtonFn) {
+      confirmButtonFn();
+    }
+
+    if (!confirm && cancelButtonFn) {
+      cancelButtonFn();
+    }
+
+    this.visible = false;
+    this.cdr.detectChanges();
+  }
+}

package/{lib/components/confirm-dialog/index.d.ts → src/lib/components/confirm-dialog/index.ts}

@@ -1 +1 @@
-export * from './confirm-dialog.component';
+export * from './confirm-dialog.component';

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

@@ -0,0 +1,8 @@
+<li
+    role="option"
+    class="v-dropdown__item"
+    [attr.aria-selected]="item?.selected"
+    [class.is-active]="item?.selected"
+>
+    {{item?.label}}
+</li>

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

@@ -0,0 +1,18 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DropDownItemData } from './dropdown.model';
+
+@Component({
+  selector: 'v-dropdown-item',
+  standalone: true,
+  templateUrl: './dropdown-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class DropdownItemComponent<T> {
+  @Input() item : DropDownItemData<T> | undefined;
+}

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

@@ -0,0 +1,90 @@
+<div
+  class="v-dropdown mb-3"
+  (keydown)="onKeyDown($event)"
+>
+  <gov-form-control [disabled]="this.ngControl?.disabled">
+    <gov-form-label
+      [slot]="label"
+      [ngClass]="labelClasses"
+    >
+      <span [ngClass]="labelClasses">
+        {{ label ?? '' | translate }}
+        @if (tooltip) {
+        <v-tooltip [message]="tooltip | translate" />
+        }
+      </span>
+    </gov-form-label>
+    <div
+      class="gov-form-input"
+      [ngStyle]="forceMinWidth ? {'min-width': '16rem'} : {}"
+      [ngClass]="inputClasses"
+    >
+      <div
+        class="element d-flex gov-form-input-child"
+        [ngClass]="labelClasses"
+        (click)="toggleDropdown()"
+      >
+        <div class="v-dropdown__value flex-grow-1 me-1">{{ selectedItem?.label ?? placeholder }}</div>
+        @if (clearable && ngControl?.enabled && selectedItem !== undefined && selectedItem !== null) {
+          <gov-icon
+            [name]="icons.cross"
+            size="m"
+            class="v-dropdown__clear me-1"
+            color="error"
+            (click)="clearSelection($event)"
+          />
+        }
+        @if (loading) {
+        <div class="v-dropdown__loader">
+          <gov-icon [name]="icons.loader" />
+        </div>
+        }
+        <div class="v-dropdown__trigger">
+          <gov-icon [name]="opened ? icons.chevronUp : icons.chevronDown" />
+        </div>
+      </div>
+    </div>
+    <div class="position-relative">
+      @if (opened) {
+      <div class="v-dropdown__container">
+        @if (showFilter) {
+        <div
+          class="v-dropdown__filter"
+          #filterTextField
+          (keydown)="onKeyDown($event)"
+        >
+          <v-textfield
+            placeholder="Search"
+            [formControl]="filterControl"
+            iconPos="right"
+            [icon]="icons.search"
+          />
+        </div>
+        }
+        @if (!dropdownOptions?.length) {
+        <div class="v-dropdown__no-item">No option was found.</div>
+        } @else {
+        <ul
+          role="listbox"
+          class="v-dropdown__list"
+        >
+          <cdk-virtual-scroll-viewport
+            [itemSize]="30"
+            class="v-dropdown__scroll"
+            (scrolledIndexChange)="onScroll($event)"
+          >
+            <v-dropdown-item
+              *cdkVirtualFor="let option of dropdownOptions;"
+              [item]="option"
+              (click)="selectItem(option, true)"
+            >
+            </v-dropdown-item>
+          </cdk-virtual-scroll-viewport>
+        </ul>
+        }
+      </div>
+      }
+    </div>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </gov-form-control>
+</div>

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

@@ -0,0 +1,108 @@
+.v-dropdown__container {
+  position: absolute;
+  z-index: 100;
+  background-color: var(--button-outlined-primary-hover);
+  min-width: 100%;
+  border-radius: var(--border-radius, var(--corner-radius-s));
+  border: var(--border-width, 0.0625rem) solid var(--form-border-color, var(--border-neutral));
+}
+
+.v-dropdown__trigger {
+  min-height: 1.5rem;
+  display: flex;
+}
+
+.disabled {
+  color: var(--form-state-value-disabled, var(--text-disabled));
+  cursor: default !important;
+  pointer-events: none;
+
+  &-input {
+    border-color: var(--form-state-border-disabled, var(--border-subtlest)) !important;
+    background: var(--form-state-bg-disabled, transparent);
+  }
+}
+
+.error {
+  color: var(--form-state-label-error, var(--text-status-error));
+
+  &-input {
+    border-color: var(--form-state-border-error, var(--status-error)) !important;
+  }
+}
+
+.gov-form-input-child {
+  padding: 0.5rem 0.75rem;
+  border: 0px !important;
+}
+
+.v-dropdown__no-item {
+  padding: 0.5rem;
+}
+
+.v-dropdown__list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.v-dropdown__scroll {
+  height: 10rem;
+}
+
+.v-dropdown__filter {
+  padding: 0.5rem;
+}
+
+.v-dropdown__item {
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+
+  &.is-active {
+    background-color: var(--background-primary);
+    color: var(--text-white);
+
+    &:hover {
+      opacity: 0.8;
+
+    }
+  }
+
+  &:hover {
+    background-color: var(--background-primary);
+    ;
+    color: var(--text-white);
+  }
+}
+
+.v-dropdown__loader {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 1rem;
+  animation: rotate 1s linear infinite;
+  display: inline-block;
+  transform-origin: center;
+  color: var(--color-neutral-300)
+}
+
+.v-dropdown__clear {
+  z-index: 99;
+  cursor: pointer;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+::ng-deep .cdk-virtual-scrollable {
+  contain: none;
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MultiselectComponent } from './gov-multiselect.component';
+
+describe('MultiselectComponent', () => {
+  let component: MultiselectComponent<any>;
+  let fixture: ComponentFixture<MultiselectComponent<any>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MultiselectComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MultiselectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,297 @@
+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',
+  standalone: true,
+  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/{lib/components/dropdown/dropdown.model.d.ts → src/lib/components/dropdown/dropdown.model.ts}

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

package/{lib/components/dropdown/index.d.ts → src/lib/components/dropdown/index.ts}

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

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

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

@@ -0,0 +1,19 @@
+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');
+    });
+  });