@verisoft/ui-govcz 0.0.1

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

@@ -0,0 +1,73 @@
+<div class="g-header">
+    <header class="gov-container--no-y-offset gov-header">
+        <div class="gov-container__content">
+            <div class="gov-header__holder">
+                <div class="gov-header__left">
+                    <a href="/" class="gov-link--inversed gov-header__logo" [attr.aria-label]="title"></a>
+                    <a class="gov-logo gov-logo--inversed" href="/" [attr.aria-label]="title">
+                        <div class="gov-pictogram--logo gov-pictogram--inversed">
+                            @if (logoUrl) {
+                            <img src="{{ logoUrl }}" height="100%" width="100%" alt="GACR logo">
+                            }
+                        </div>
+                            
+                        <span *ngIf="title" class="gov-logo__sitename">
+                            {{ title }}
+                        </span>
+                    </a>
+                </div>
+                <div class="gov-header__right">
+                    <div class="gov-header__item gov-header__user-info">
+                        <span class="gov-header__item-user-info">{{ userName }}</span>
+                        <button class="gov-header__button">
+                            <gov-icon type="complex" name="user-login" size="xl" />
+                        </button>
+                    </div>
+                    <div class="gov-header__fixed-items">
+                        <div class="gov-header__item gov-header__item--mobile">
+                            <button 
+                                class="gov-header__hamburger"
+                                [ngClass]="this.menuVisible ? 'active' : ''"
+                                (click)="toggleMenu()"
+                            >
+                                <span></span>
+                                <span></span>
+                                <div>MENU</div>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <hr class="gov-header__separator">
+        
+            <div 
+                class="gov-header__overlay"
+                [ngClass]="this.menuVisible ? 'active' : ''"
+            ></div>
+            <nav 
+                class="gov-header__nav"
+                [ngClass]="this.menuVisible ? 'active' : ''"
+            >
+                <div 
+                    class="gov-header__nav-logo"
+                    [ngClass]="this.menuVisible ? 'active' : ''"
+                ></div>
+            
+                <div class="gov-header__nav-holder">
+                    @for (item of tabsService.menuItems$ | async; track item) {
+                    <div class="gov-header__link">
+                        <a 
+                            href="{{ item.url }}"
+                            class="gov-link gov-link--standalone gov-link--large gov-link--inversed"
+                            [attr.aria-label]="item.label"
+                        >
+                            {{ item.label }}
+                        </a>
+                    </div>
+                    }
+                </div>
+            </nav>
+        </div>
+    </header>
+</div>

package/src/lib/components/gov-header/gov-header.component.scss

@@ -0,0 +1,20 @@
+.gov-header__button {
+    color: var(--gov-color-white);
+
+    &:hover {
+        color: var(--gov-color-blue);
+    }
+}
+
+.gov-header__user-info {
+    text-align: right;
+    color: var(--gov-color-white);
+}
+
+.gov-header__link .gov-link {
+    color: var(--gov-color-white);
+}
+
+.gov-header__item-user-info {
+    margin-right: 1rem;
+}

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

@@ -0,0 +1,51 @@
+import { AsyncPipe, CommonModule } from "@angular/common";
+import { 
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input
+} from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import {
+  HEADER_COMPONENT_TOKEN,
+  HeaderCore,
+  MenuItem,
+  SideMenuService
+} from "@verisoft/ui-core";
+
+@Component({
+  selector: "v-header",
+  standalone: true,
+  styleUrls: [
+    "./gov-header.component.scss"
+  ],
+  templateUrl: './gov-header.component.html',
+  imports: [
+    CommonModule, GovDesignSystemModule, AsyncPipe
+  ],
+  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[] = [];
+
+  protected menuVisible = false;
+
+  tabsService = inject(SideMenuService);
+
+  toggleMenu() {
+    this.menuVisible = !this.menuVisible;
+  }
+}

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

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

package/src/lib/components/gov-loader/gov-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/gov-loader/gov-loader.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LoaderComponent } from './gov-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/gov-loader/gov-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,
+    GovSizePipe
+} from '@verisoft/ui-core';
+
+@Component({
+  selector: 'v-loader',
+  standalone: true,
+  imports: [
+    CommonModule, GovDesignSystemModule, GovSizePipe
+  ],
+  templateUrl: './gov-loader.component.html',
+  styleUrl: './gov-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/gov-loader/index.ts

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

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

@@ -0,0 +1,31 @@
+<div class="v-multiple-select">
+  <gov-form-control>
+    @if (ngControl && ngControl.errors) {
+      <gov-form-message
+          [slot]="errorSlot"
+          color="error"
+      >
+          {{ngControl.errors | error}}
+          <gov-icon 
+              type="components"
+              name="exclamation-triangle-fill" 
+              slot="icon" 
+          />
+      </gov-form-message>
+    } 
+    <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"
+    >
+    </gov-form-multi-select>
+  </gov-form-control>
+</div>

package/src/lib/components/gov-multiselect/gov-multiselect.component.spec.ts

@@ -0,0 +1,21 @@
+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/gov-multiselect/gov-multiselect.component.ts

@@ -0,0 +1,116 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Optional,
+  Output,
+  Self,
+  SimpleChanges,
+  inject,
+  ChangeDetectorRef
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  FilterEvent,
+  LazyLoadEvent,
+} from '@verisoft/core';
+import {
+  BaseFormInputComponent,
+  ErrorPipe,
+  MULTISELECT_COMPONENT_TOKEN,
+  MultiselectCore,
+  GovSizePipe,
+  FieldSize,
+  FieldSizeType,
+  SlotPositionType,
+  SlotPosition
+} from '@verisoft/ui-core';
+
+@Component({
+  selector: 'v-multiselect',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    ErrorPipe,
+    GovSizePipe,
+  ],
+  templateUrl: './gov-multiselect.component.html',
+  styleUrl: './gov-multiselect.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: MULTISELECT_COMPONENT_TOKEN,
+      useExisting: MultiselectComponent,
+    },
+  ],
+})
+export class MultiselectComponent<T>
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, OnChanges, MultiselectCore<T>
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+  
+  @Input() options: any[] = [];
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+  @Input() dropdownIcon: string | undefined;
+  @Input() floatLabel: string | undefined;
+  @Input() editable = true;
+  @Input() display!: 'flex' | 'block';
+  @Input() errorSlot: SlotPositionType = SlotPosition.top
+  @Input() lazy!: boolean;
+  @Input() filter!: boolean;
+  @Input() loading = false;
+  @Input() size: FieldSizeType = FieldSize.medium;
+
+  @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>();
+  @Output() lazyLoadEvent = new EventEmitter<LazyLoadEvent>();
+
+  lazyLoadOptions: LazyLoadEvent = {
+    limit: 50,
+    offset: 0,
+  };
+
+  cdRef = inject(ChangeDetectorRef);
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['options'] && !changes['options'].firstChange) {
+      this.cdRef.detectChanges();
+    }
+  }
+
+  onLazyLoad(event: any): void {
+    if (this.options.length - event.last <= 0) {
+      this.lazyLoadOptions.offset = event.last;
+      this.lazyLoadEvent.emit(this.lazyLoadOptions);
+    }
+  }
+
+  selectionChange(event: any): void {
+    this.cleared.emit(event);
+  }
+
+  onDropdownShow(): void {
+    this.showed.emit();
+  }
+
+  onDropdownClear(): void {
+    this.cleared.emit();
+  }
+}

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

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

package/src/lib/components/gov-password/gov-password.component.html

@@ -0,0 +1,21 @@
+<gov-form-control>
+  @if (ngControl && ngControl.errors) {
+  <gov-form-message color="error">
+    {{ ngControl.errors | error }}
+    <gov-icon type="components" name="exclamation-triangle-fill" slot="icon" />
+  </gov-form-message>
+  }
+  <gov-form-label [slot]="labelSlot">
+    {{ label }}
+  </gov-form-label>
+  <gov-form-group>
+    <gov-form-password-power *ngIf="feedback" [power]="passwordStrength - 1" />
+    <gov-form-input
+      [formControl]="formControl"
+      [attr.input-type]="type"
+      [placeholder]="placeholder"
+      [invalid]="ngControl?.errors"
+      (ngModelChange)="valueChange($event)"
+    />
+  </gov-form-group>
+</gov-form-control>

package/src/lib/components/gov-password/gov-password.component.spec.ts

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

package/src/lib/components/gov-password/gov-password.component.ts

@@ -0,0 +1,58 @@
+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,
+  FieldType,
+  PASSWORD_COMPONENT_TOKEN,
+  PasswordCore,
+  ErrorPipe
+} from '@verisoft/ui-core';
+import zxcvbn from 'zxcvbn';
+
+@Component({
+  selector: 'v-password',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    ErrorPipe
+  ],
+  templateUrl: './gov-password.component.html',
+  styleUrl: './gov-password.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: PASSWORD_COMPONENT_TOKEN,
+      useExisting: PasswordComponent
+    }
+  ],
+})
+
+export class PasswordComponent 
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, PasswordCore 
+{
+  @Input() toggleMask = true;
+  @Input() feedback = false;
+  @Input() labelSlot: 'top' | 'bottom' = 'top';
+
+  passwordStrength: 0 | 1 | 2 | 3 | 4 = 0;
+  type = FieldType.password;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  valueChange(value: string) {
+    if (!value) {
+      this.passwordStrength = 0;
+      return;
+    }
+
+    const result = zxcvbn(value);
+    this.passwordStrength = result.score;
+  }
+}

package/src/lib/components/gov-password/index.ts

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

package/src/lib/components/gov-radiobutton/gov-radiobutton.component.html

@@ -0,0 +1,25 @@
+<h6>{{ label }}</h6>
+<gov-form-control>
+  @if (ngControl?.errors) {
+  <gov-form-message [slot]="errorSlot" color="error">
+    {{ ngControl?.errors | error }}
+    <gov-icon type="components" name="exclamation-triangle-fill" slot="icon" />
+  </gov-form-message>
+  }
+  <gov-form-radio-group [formControl]="formControl">
+    @if (items) { @for(item of items; track item) {
+    <gov-form-radio
+      [size]="size"
+      [value]="item.value"
+      [required]="required"
+      [identifier]="item.id"
+      [name]="radioGroupName"
+      [invalid]="ngControl?.errors"
+    >
+      <gov-form-label [size]="size" slot="label">
+        {{ item.value }}
+      </gov-form-label>
+    </gov-form-radio>
+    } }
+  </gov-form-radio-group>
+</gov-form-control>

package/src/lib/components/gov-radiobutton/gov-radiobutton.component.ts

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  BaseFormInputComponent,
+  ErrorPipe,
+  RADIOBUTTON_COMPONENT_TOKEN,
+  RadiobuttonCore,
+  RadioButtonItem,
+} from '@verisoft/ui-core';
+
+@Component({
+  selector: "v-radiobutton",
+  standalone: true,
+  styleUrls: [
+    "./gov-radiobutton.component.scss"
+  ],
+  templateUrl: './gov-radiobutton.component.html',
+  imports: [
+    CommonModule, GovDesignSystemModule, RouterModule, ReactiveFormsModule, ErrorPipe
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: RADIOBUTTON_COMPONENT_TOKEN,
+      useExisting: RadioButtonComponent,
+    },
+  ],
+})
+
+export class RadioButtonComponent<T>
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, RadiobuttonCore<T>
+{
+  @Input() radioGroupName = Math.random().toString();
+
+  @Input() items: RadioButtonItem<T>[] = [];
+
+  @Input() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';
+
+  @Input() errorSlot: 'top' | 'bottom' = 'top';
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

package/src/lib/components/gov-radiobutton/index.ts

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

package/src/lib/components/gov-switch/gov-switch.component.html

@@ -0,0 +1,21 @@
+<gov-form-control>
+  @if (ngControl && ngControl.errors) {
+  <gov-form-message *ngIf="ngControl?.errors" [slot]="errorSlot" color="error">
+    {{ ngControl.errors | error }}
+    <gov-icon type="components" name="exclamation-triangle-fill" slot="icon" />
+  </gov-form-message>
+  }
+  <gov-form-switch
+    [formControl]="formControl"
+    [size]="size"
+    [required]="required"
+    [name]="name"
+    [invalid]="ngControl?.errors"
+  >
+    @if (label && !noLabel) {
+    <gov-form-label [size]="size" slot="label">
+      {{ label }}
+    </gov-form-label>
+    }
+  </gov-form-switch>
+</gov-form-control>

package/src/lib/components/gov-switch/gov-switch.component.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, Input, Optional, Self } from "@angular/core";
+import { ReactiveFormsModule, NgControl } from "@angular/forms";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { SWITCH_COMPONENT_TOKEN, SwitchCore, ErrorPipe, BaseFormInputComponent } from "@verisoft/ui-core";
+
+@Component({
+  selector: "v-switch",
+  standalone: true,
+  styleUrls: [
+    "./gov-switch.component.scss"
+  ],
+  templateUrl: './gov-switch.component.html',
+  imports: [
+    CommonModule, GovDesignSystemModule, ErrorPipe, ReactiveFormsModule
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: SWITCH_COMPONENT_TOKEN,
+    useExisting: SwitchComponent,
+  }],
+})
+export class SwitchComponent
+  extends BaseFormInputComponent
+  implements SwitchCore
+{
+  @Input() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';
+  @Input() errorSlot: "top" | "bottom" = "top";
+  @Input() noLabel = false;
+  @Input() name!: string;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

package/src/lib/components/gov-switch/index.ts

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