@verisoft/ui-govcz 20.1.1 → 20.1.2

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

@@ -1,286 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import {
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  forwardRef,
-  inject,
-  Input,
-  OnChanges,
-  OnInit,
-  QueryList,
-  SimpleChanges,
-} from '@angular/core';
-import {
-  FormControl,
-  FormGroup,
-  NG_VALUE_ACCESSOR,
-  ReactiveFormsModule,
-} from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { BaseHttpService } from '@verisoft/core';
-import {
-  ButtonShortCutDirective,
-  DEFAULT_DEBOUNCE_TIME,
-  DialogService,
-  FieldSize,
-  FILTER_COMPONENT_TOKEN,
-  FilterCore,
-  GenericFieldDefinition,
-  GovButtonType,
-  GovButtonTypeType,
-  isFilterEmpty,
-  ScreenSizeService,
-  UnsubscribeComponent,
-} from '@verisoft/ui-core';
-import {
-  BehaviorSubject,
-  combineLatestWith,
-  debounceTime,
-  distinctUntilChanged,
-  map,
-  Observable,
-  startWith,
-  takeUntil,
-} from 'rxjs';
-import { Icons } from '../../icons';
-import { ButtonComponent } from '../button';
-import { TextfieldComponent } from '../textfield';
-import { generateFormGroup, GenericFormComponent } from '../shared-components/generic-form';
-import { FilterFieldDirective } from './directives/filter-field.directive';
-import { getFilledControlCount } from './filter.model';
-
-type FilterValueType = { [key: string]: unknown };
-
-@Component({
-    selector: 'v-filter',
-    imports: [
-        AsyncPipe,
-        ReactiveFormsModule,
-        TranslateModule,
-        TextfieldComponent,
-        GenericFormComponent,
-        ButtonComponent,
-        ButtonShortCutDirective,
-    ],
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => FilterComponent),
-            multi: true,
-        },
-        {
-            provide: FILTER_COMPONENT_TOKEN,
-            useExisting: FilterComponent,
-        },
-    ],
-    templateUrl: './filter.component.html',
-    styleUrl: './filter.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class FilterComponent<T extends object>
-  extends UnsubscribeComponent
-  implements OnChanges, OnInit, AfterContentInit, FilterCore
-{
-  @ContentChildren(FilterFieldDirective)
-  fieldDeclarations!: QueryList<FilterFieldDirective>;
-
-  @Input() fields: GenericFieldDefinition[] = [];
-
-  @Input() filters: GenericFieldDefinition[] = [];
-
-  @Input() title?: string;
-
-  @Input() total?: number;
-
-  @Input() recordsText = 'FILTER.RECORDS';
-
-  @Input() showRecords = true;
-
-  @Input() fulltextFieldName = 'searchField';
-
-  @Input() showFulltext = true;
-
-  @Input() showFilters = true;
-
-  @Input() autoBind = true;
-
-  @Input() applyLabel = 'Apply';
-
-  @Input() clearLabel = 'Clear';
-
-  @Input() buttonType: GovButtonTypeType = GovButtonType.solid;
-
-  @Input() buttonOutlined = false;
-
-  @Input() debounceTime?: number = DEFAULT_DEBOUNCE_TIME;
-
-  @Input() defaultExpanded = false;
-
-  icons = Icons;
-
-  protected isExpanded = false;
-
-  fieldDefinitios$?: Observable<GenericFieldDefinition[]>;
-
-  formGroup$?: Observable<FormGroup>;
-
-  simpleFormFieldDefinitions$?: Observable<GenericFieldDefinition[]>;
-
-  private get searchField(): GenericFieldDefinition {
-    return {
-      name: this.fulltextFieldName,
-    };
-  }
-
-  private onTouch?: () => void;
-
-  private onChange?: (value: FilterValueType | undefined) => void;
-
-  private inputFields$ = new BehaviorSubject<
-    GenericFieldDefinition[] | undefined
-  >([...this.fields ?? [], ...this.filters ?? []]);
-
-  FieldSize = FieldSize;
-
-  protected screenSizeService = inject(ScreenSizeService);
-  protected changeDetectorRef = inject(ChangeDetectorRef);
-  protected dialogService = inject(DialogService);
-
-  service!: BaseHttpService<T>;
-
-  formGroup = new FormGroup({});
-
-  filledFiltersCount$: Observable<string> = this.formGroup.valueChanges.pipe(
-    startWith(this.formGroup),
-    map(() => getFilledControlCount(this.formGroup).toString())
-  );
-
-  private lastFormFields: GenericFieldDefinition[] = [];
-
-  ngOnInit(): void {
-    this.isExpanded = this.defaultExpanded;
-    this.formGroup.valueChanges
-      .pipe(
-        takeUntil(this.destroyed$),
-        debounceTime(this.debounceTime ?? DEFAULT_DEBOUNCE_TIME),
-        map((x) => this.convertFilter(x)),
-        distinctUntilChanged()
-      )
-      .subscribe((value) => {
-        this.onChange?.(value);
-      });
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['total']) {
-      this.changeDetectorRef.markForCheck();
-    }
-    if (changes['fields'] || changes['filters']) {
-      this.inputFields$.next([...this.fields ?? [], ...this.filters ?? []]);
-    }
-  }
-
-  ngAfterContentInit(): void {
-    const fieldDeclaratios$: Observable<GenericFieldDefinition[]> =
-      this.fieldDeclarations.changes.pipe(
-        startWith({}),
-        map(() => this.fieldDeclarations.toArray())
-      );
-
-    this.fieldDefinitios$ = this.inputFields$.pipe(
-      combineLatestWith(fieldDeclaratios$),
-      map(([inputs, views]) => {
-        this.lastFormFields = [this.searchField, ...(inputs ?? []), ...views];
-        return this.lastFormFields;
-      })
-    );
-
-    this.simpleFormFieldDefinitions$ = this.fieldDefinitios$.pipe(
-      map((fields) => {
-        return fields
-          .filter((x) => x.name !== this.fulltextFieldName)
-          .map((x) => ({ ...x, floatLabel: false, size: x.size ?? FieldSize.medium }));
-      })
-    );
-
-    this.formGroup$ = this.fieldDefinitios$.pipe(
-      map((fields) => {
-        const group = generateFormGroup(fields, this.formGroup, undefined, false);
-        if (!group.get(this.fulltextFieldName) && this.showFulltext) {
-          group.addControl(this.fulltextFieldName, new FormControl(''));
-        }
-        return group;
-      })
-    );
-
-    this.changeDetectorRef.detectChanges();
-  }
-
-  protected toggleFilters() {
-    this.isExpanded = !this.isExpanded;
-  }
-
-  protected openSearch() {
-    this.dialogService.showDialog({
-      headerIcon: 'pi pi-search',
-      severity: 'primary',
-      innerHTML: '<p>Search</p>',
-      confirmButtonFn: () => this.submitValue(),
-      confirmButtonText: 'Apply',
-      cancelButtonFn: () => this.clear(),
-      cancelButtonText: 'Clear all',
-      showCancelButton: true,
-      closable: false,
-    });
-  }
-
-  writeValue(data: FilterValueType): void {
-    this.formGroup.patchValue(data);
-  }
-
-  registerOnChange(fn: (value: FilterValueType | undefined) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState?(isDisabled: boolean): void {
-    isDisabled ? this.formGroup.disable() : this.formGroup.enable();
-  }
-
-  submitValue() {
-    if (!this.autoBind) {
-      this.onChange?.(this.formGroup.value);
-    }
-  }
-
-  setFilterValues(dialogFormGroup: FormGroup) {
-    this.formGroup.setValue(dialogFormGroup.value);
-    this.submitValue();
-  }
-
-  clear() {
-    this.formGroup.reset();
-    this.submitValue();
-  }
-
-  private convertFilter(
-    value: FilterValueType | undefined
-  ): FilterValueType | undefined {
-    if (value == undefined) {
-      return undefined;
-    }
-
-    const isEmpty = isFilterEmpty(value);
-    if (isEmpty) {
-      return undefined;
-    }
-
-    return value;
-  }
-}

package/src/lib/components/filter/filter.model.ts

@@ -1,18 +0,0 @@
-import { FormGroup } from '@angular/forms';
-
-export function getFilledControlCount(formGroup: FormGroup): number {
-  let count = 0;
-  Object.keys(formGroup.controls).forEach((key) => {
-    const control = formGroup.get(key);
-    if (control?.value) {
-      if (typeof control.value === 'boolean') {
-        count++;
-      }
-      if (typeof control.value === 'string' && control.value.trim() !== '') {
-        count++;
-      }
-    }
-  });
-
-  return count;
-}

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

@@ -1,2 +0,0 @@
-export * from './filter.component';
-export * from './directives/filter-field.directive';

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,76 +0,0 @@
-
-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',
-    imports: [
-    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

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

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,90 +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",
-    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);
-  }
-}

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

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

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

@@ -1,11 +0,0 @@
-@if (library() === 'native') {
-    <gov-icon 
-        [name]="name()" 
-        [size]="govSize"
-        [class]="govClasses"
-    />
-} @else if (library() === 'bootstrap') {
-    <i [class]="bootstrapClasses"></i>
-}
-
-

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

@@ -1,20 +0,0 @@
-:host {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-// Bootstrap icon sizes
-.icon-small {
-    font-size: 0.875rem;
-}
-
-.icon-medium {
-    font-size: 1rem;
-}
-
-.icon-large {
-    font-size: 1.5rem;
-}
-
-