@verisoft/ui-govcz 18.0.0 → 18.3.0

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

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');
+    });
+  });

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

@@ -0,0 +1,30 @@
+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",
+    standalone: true,
+    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> {
+    return this.errorService.mapError(errors);
+  }
+}

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

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

package/src/lib/components/form-field/form-field.component.html

@@ -0,0 +1,14 @@
+<gov-form-control>
+  @if (label) {
+  <gov-form-label 
+    [slot]="labelSlot"
+    [size]="size | govSize"
+  >
+    {{ label }}
+  </gov-form-label>
+  }
+  <gov-form-group>
+    <ng-content />
+  </gov-form-group>
+  <v-validation-message [ngControl]="ngControl"></v-validation-message>
+</gov-form-control>

package/src/lib/components/form-field/form-field.component.spec.ts

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

package/src/lib/components/form-field/form-field.component.ts

@@ -0,0 +1,78 @@
+import { CommonModule } from '@angular/common';
+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 {
+  BaseFormInputComponent,
+  FieldSize,
+  FieldSizeType,
+  FieldType,
+  IconPositionType,
+  IconPosition,
+  FormFieldCore,
+  FORM_FIELD_COMPONENT_TOKEN,
+  FieldTypeType,
+  SlotPosition,
+  SlotPositionType,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+
+@Component({
+  selector: 'v-form-field',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    GovSizePipe,
+    ErrorComponent,
+  ],
+  templateUrl: './form-field.component.html',
+  styleUrl: './form-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: FORM_FIELD_COMPONENT_TOKEN,
+      useExisting: FormFieldComponent,
+    },
+  ],
+})
+export class FormFieldComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, FormFieldCore
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() floatLabel!: boolean;
+  @Input() type: FieldTypeType = FieldType.text;
+  @Input() minlength = 0;
+  @Input() maxlength = 524288;
+  @Input() prefix!: string;
+  @Input() sufix!: string;
+  @Input() message!: string;
+  @Input() name! : string;
+  @Input() role! : string;
+  @Input() autocorrect: 'on' | 'off' = 'on';
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
+  @Input() icon!: string;
+  @Input() iconPos: IconPositionType = IconPosition.right;
+  @Input() display!: 'flex' | 'block';
+  @Input() labelSlot: SlotPositionType = SlotPosition.top;
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom;
+
+  icons = Icons;
+}

package/src/lib/components/form-field/index.ts

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

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

@@ -0,0 +1,122 @@
+<header class="gov-header">
+    <div class="gov-header__divider">
+        <div class="gov-header__content">
+            <gov-flex
+                justify-content="space-between"
+                align-items="center"
+                responsive="false"
+            >
+                <a
+                    href="/"
+                    class="gov-header__logo"
+                    aria-label="Zpět na úvodní stránku"
+                >
+                    <gov-flex
+                        align-items="center"
+                        gap="s"
+                        responsive="false"
+                    >
+                        @if (logoUrl) {
+                        <img
+                            class="gov-header__logo-img"
+                            src="{{ logoUrl }}"
+                            width="125px"
+                            height="43px"
+                            alt="GAČR Logo"
+                        >
+                        }
+                    </gov-flex>
+                </a>
+            </gov-flex>
+            <gov-flex
+                class="gov-header__action"
+                justify-content="space-between"
+                align-items="center"
+                gap="s"
+            >
+                <gov-button
+                    color="primary"
+                    size="m"
+                    type="base"
+                >{{ userName }}</gov-button>
+                <ng-content></ng-content>
+                <ng-container *ngTemplateOutlet="
+                    this.actionTemplate;
+                "></ng-container>
+            </gov-flex>
+        </div>
+    </div>
+    <div class="gov-header__navigation">
+        <nav
+            class="gov-navigation"
+            aria-label="Main navigation"
+            id="main-navigation"
+        >
+            <ul>
+                @for (tab of tabsService.menuItems$ | async; track tab; let index = $index) {
+                <li
+                    *hasPermission="tab.data?.permissions ?? []"
+                    class="gov-navigation--has-megamenu"
+                >
+                    <gov-button
+                        type="base"
+                        color="primary"
+                        size="l"
+                        [attr.aria-label]="tab.label"
+                        (gov-click)="
+                            showOrHide(index, tab.children?.length ?? 0);
+                            canRedirect(tab.url, !tab.children?.length)
+                        "
+                    >
+                        {{ tab.label }}
+                        @if (tab.children?.length) {
+                        <gov-icon
+                            slot="icon-end"
+                            size="s"
+                            [name]="canBeShown(index) ? 'chevron-up' : 'chevron-down'"
+                        ></gov-icon>
+                        }
+                    </gov-button>
+                    @if (canBeShown(index)) {
+                    <ul
+                        id="megamenu{{index}}"
+                        class="gov-mega-menu gov-header__submenu"
+                        [attr.aria-hidden]="canBeShown(index)"
+                    >
+                        @for (child of tab.children; track child) {
+                        <li
+                            *hasPermission="child.data?.permissions ?? []"
+                            class="gov-mega-menu__heading"
+                        >
+                            <a
+                                [routerLink]="child.url"
+                                (click)="showOrHide(index)"
+                            >
+                                @if (child.icon) {
+                                <gov-icon
+                                    [name]="child.icon"
+                                    size="m"
+                                ></gov-icon>
+                                }
+                                <span>{{ child.label }}</span>
+                            </a>
+                            @if (child.children) { @for(miniChild of child.children; track miniChild) {
+                            <ul>
+                                <li *hasPermission="miniChild.data?.permissions ?? []">
+                                    <a
+                                        [routerLink]="miniChild.url"
+                                        (click)="showOrHide(index)"
+                                    >{{ miniChild.label }}</a>
+                                </li>
+                            </ul>
+                            } }
+                        </li>
+                        }
+                    </ul>
+                    }
+                </li>
+                }
+            </ul>
+        </nav>
+    </div>
+</header>