@verisoft/ui-govcz 20.1.1 → 20.1.2

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

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

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

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

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

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

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

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

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

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

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

@@ -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';