@verisoft/ui-govcz 20.0.1 → 20.1.0

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

@@ -0,0 +1,50 @@
+<gov-dialog
+    [open]="visible"
+    [attr.block-close]="data.closable !== undefined ? !data.closable : false"
+    [attr.block-backdrop-close]="data.closable !== undefined ? !data.closable : false" 
+    [style.--dialog-max-width]="data.width"
+    [style.--dialog-max-height]="data.height"
+    role="dialog"
+    accessible-close-label="Close dialog box with more information"
+    (gov-close)="data.cancelButtonFn ? dialogClick(false) : (visible = false)"
+>
+    <gov-icon
+        type="components"
+        [name]="data.headerIcon"
+        slot="icon"
+        [color]="data.severity | govColor"
+    />
+    
+    <h2 slot="title">{{ data.title ?? 'Title' }}</h2>
+
+    @if (data && data.innerHTML) {
+    <div [innerHTML]="data.innerHTML"></div>
+    } @else if (data.componentType) {
+    <v-dynamic-component
+        [componentType]="data.componentType"
+        [data]="$any(data.data)"
+    ></v-dynamic-component>
+    }
+
+    <gov-button
+        color="primary"
+        size="m"
+        type="solid"
+        slot="footer"
+        (gov-click)="data.confirmButtonFn ? dialogClick(true) : (visible = false)"
+    >
+        {{ data.confirmButtonText ?? 'Yes'}}
+    </gov-button>
+    
+    <gov-button
+        [ngClass]="!data.showCancelButton ? 'd-none' : ''"
+        color="primary"
+        size="m"
+        type="outlined"
+        slot="footer"
+        [disabled]="!data.showCancelButton"
+        (gov-click)="data.cancelButtonFn ? dialogClick(false) : (visible = false)"
+    >
+        {{ data.cancelButtonText ?? 'No' }}
+    </gov-button>
+</gov-dialog>

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

@@ -0,0 +1,4 @@
+:host ::ng-deep dialog {
+  max-width: var(--dialog-max-width, 95%); // default 52.5rem
+  max-height: var(--dialog-max-height, 95%); // default 100%
+}

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

@@ -0,0 +1,79 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, inject } 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/dynamic-component';
+
+@Component({
+    selector: 'v-confirm-dialog',
+    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/src/lib/components/confirm-dialog/index.ts

@@ -0,0 +1 @@
+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,91 @@
+<div
+  class="v-dropdown mb-3"
+  (keydown)="onKeyDown($event)"
+>
+  <gov-form-control [disabled]="this.ngControl?.disabled">
+    @if (label && !floatLabel) {
+    <gov-form-label
+      slot="top"
+      [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)"
+            />
+          </cdk-virtual-scroll-viewport>
+        </ul>
+        }
+      </div>
+      }
+    </div>
+    <v-validation-message [ngControl]="ngControl" />
+  </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,296 @@
+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

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

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

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