@verisoft/ui-govcz 18.6.2 → 18.6.3

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/{lib/components/form-field/index.d.ts → src/lib/components/form-field/index.ts}

@@ -1 +1 @@
-export * from './form-field.component';
+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>

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

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

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

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

package/{lib/components/index.d.ts → src/lib/components/index.ts}

@@ -1,33 +1,33 @@
-export * from './button';
-export * from './breadcrumb';
-export * from './calendar';
-export * from './checkbox';
-export * from './confirm-dialog';
-export * from './dropdown';
-export * from './header';
-export * from './checkbox';
-export * from './password';
-export * from './shared-components';
-export * from './radiobutton';
-export * from './switch';
-export * from './multiselect';
-export * from './search';
-export * from './section';
-export * from './side-menu';
-export * from './snackbar';
-export * from './table';
-export * from './textarea';
-export * from './textfield';
-export * from './tooltip';
-export * from './loader';
-export * from './tristatecheckbox';
-export * from './form-field';
-export * from './input-group';
-export * from './number-input';
-export * from './tooltip';
-export * from './snackbar';
-export * from './section';
-export * from './page-header';
-export * from './section';
-export * from './stepper';
-export * from './tab-view';
+export * from './button';
+export * from './breadcrumb';
+export * from './calendar';
+export * from './checkbox';
+export * from './confirm-dialog';
+export * from './dropdown';
+export * from './header';
+export * from './checkbox';
+export * from './password';
+export * from './shared-components';
+export * from './radiobutton';
+export * from './switch';
+export * from './multiselect';
+export * from './search';
+export * from './section';
+export * from './side-menu';
+export * from './snackbar';
+export * from './table';
+export * from './textarea';
+export * from './textfield';
+export * from './tooltip';
+export * from './loader';
+export * from './tristatecheckbox';
+export * from './form-field';
+export * from './input-group';
+export * from './number-input';
+export * from './tooltip';
+export * from './snackbar';
+export * from './section';
+export * from './page-header';
+export * from './section'
+export * from './stepper';
+export * from './tab-view';

package/src/lib/components/input-group/index.ts

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

package/src/lib/components/input-group/input-group.component.html

@@ -0,0 +1,41 @@
+<gov-form-control>
+    @if (label) {
+    <gov-form-label 
+        [slot]="labelSlot"
+        [size]="size | govSize"
+    >
+        {{ label }}
+    </gov-form-label>
+    }
+        @if(prefix) {
+            <gov-icon
+                [name]="name"
+            />
+        }
+        <gov-form-input 
+            input-type="input-type"
+            [formControl]="formControl"
+            [minlength]="minlength" 
+            [maxlength]="maxlength" 
+            [size]='size | govSize'  
+            [name]='name' 
+            [role]='role'
+            [required]="required"
+            [readonly]="readonly"
+            [invalid]="ngControl?.errors ? true : false"
+        />
+        @if(sufix) {
+            <gov-icon
+                [name]="name"
+            />
+        }
+        <v-validation-message [ngControl]="ngControl"></v-validation-message>
+        @if (message) {
+        <gov-form-message 
+            [slot]="messageSlot" 
+            color="neutral"
+            >
+            {{ message }}
+        </gov-form-message>
+        }
+</gov-form-control>

package/src/lib/components/input-group/input-group.component.ts

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

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

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

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

@@ -0,0 +1,7 @@
+<div style="min-height: 300px;">
+  <gov-loading
+    [size]="size | govSize"
+  >
+    {{ message }}
+  </gov-loading>
+</div>

package/src/lib/components/loader/loader.component.spec.ts

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

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

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { 
+    LOADER_COMPONENT_TOKEN, 
+    LoaderCore,
+    FieldSize,
+    FieldSizeType,
+} from '@verisoft/ui-core';
+import { GovSizePipe } from '../../pipes';
+
+@Component({
+  selector: 'v-loader',
+  standalone: true,
+  imports: [
+    CommonModule, GovDesignSystemModule, GovSizePipe
+  ],
+  templateUrl: './loader.component.html',
+  styleUrl: './loader.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { 
+      provide: LOADER_COMPONENT_TOKEN, 
+      useExisting: LoaderComponent,
+    }
+  ],
+})
+export class LoaderComponent 
+    implements LoaderCore 
+{
+  @Input() size: FieldSizeType = FieldSize.medium;
+  @Input() message!: string;
+}

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

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

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

@@ -0,0 +1,21 @@
+<gov-form-control>
+  <gov-form-label 
+    [slot]="label"
+    [size]="size | govSize"
+  >
+    {{ label }}
+  </gov-form-label>
+  <gov-form-multi-select
+    [size]="size | govSize"
+    [formControl]="formControl"
+    [required]="required"
+    [invalid]="ngControl && ngControl.errors"
+    [options]="options | govMultiselectOptions : optionLabel : optionValue"
+    [placeholder]="placeholder ?? ''"
+    (gov-focus)="onDropdownShow()"
+    (gov-remove)="onDropdownClear()"
+    (gov-change)="selectionChange($event)"
+    (lazyLoadEvent)="onLazyLoad($any($event))"
+  />
+  <v-validation-message [ngControl]="ngControl"></v-validation-message>
+</gov-form-control>