@verisoft/ui-govcz 18.5.0 → 18.6.0

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

@@ -1,297 +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',
-  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/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,30 +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",
-    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

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

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

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

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

@@ -1,78 +0,0 @@
-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/header/header.component.html

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

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

@@ -1,91 +0,0 @@
-import { AsyncPipe, CommonModule } from "@angular/common";
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  inject,
-  Input,
-  TemplateRef,
-} from "@angular/core";
-import { Router, RouterModule } from "@angular/router";
-import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
-import { HasPermissionDirective } from '@verisoft/security-core';
-import {
-  HEADER_COMPONENT_TOKEN,
-  HeaderCore,
-  MenuItem,
-  SideMenuService,
-} from "@verisoft/ui-core";
-import { Icons } from "../../icons";
-
-@Component({
-  selector: "v-header",
-  standalone: true,
-  styleUrl: "./header.component.scss",
-  templateUrl: './header.component.html',
-  imports: [
-    CommonModule,
-    GovDesignSystemModule,
-    AsyncPipe,
-    RouterModule,
-    HasPermissionDirective,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: HEADER_COMPONENT_TOKEN,
-      useExisting: HeaderComponent
-    }
-  ],
-})
-export class HeaderComponent
-  implements HeaderCore {
-
-  @Input() title!: string;
-
-  @Input() userName!: string;
-
-  @Input() logoUrl!: string;
-
-  @Input() userRole!: any;
-
-  @Input() menuRef!: HTMLDivElement;
-
-  @Input() items: MenuItem[] = [];
-
-  @ContentChild('action', { static: false })
-  actionTemplate!: TemplateRef<{ $implicit: any }>;
-
-  protected icons = Icons;
-  protected menuVisible = false;
-  private openedIndexes: number[] = [];
-
-  protected readonly tabsService = inject(SideMenuService);
-  private readonly router = inject(Router);
-
-  toggleMenu() {
-    this.menuVisible = !this.menuVisible;
-  }
-
-  protected canRedirect(url?: string, canRedirect?: boolean) {
-    if (url && canRedirect) {
-      this.router.navigateByUrl(url);
-    }
-  }
-
-  protected showOrHide(index: number, children?: number): void {
-    if (children === 0) {
-      return;
-    }
-
-    if (!this.openedIndexes.includes(index)) {
-      this.openedIndexes = [...[], index];
-    } else if (this.openedIndexes.includes(index)) {
-      this.openedIndexes = this.openedIndexes.filter(x => x !== index);
-    }
-  }
-
-  protected canBeShown(index: number) {
-    return this.openedIndexes.includes(index);
-  }
-}