@verisoft/ui-govcz 18.0.0 → 18.3.0

package/src/lib/components/shared-components/generic-form/generic-form.model.spec.ts

@@ -0,0 +1,82 @@
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { generateFormGroup, GenericFieldDefinition } from './generic-form.model';
+
+describe('GenericFormModel', () => {
+  describe('generateFormGroup', () => {
+    const fields = [{ name: 'name' }, { name: 'age' }];
+
+    const containsField = (formGroup: UntypedFormGroup, field: GenericFieldDefinition) => expect(formGroup.get(field.name)).toBeDefined();
+
+    test('Should create a new group when no group was provided', () => {
+      const formGroup = generateFormGroup([], undefined, undefined, false);
+
+      expect(formGroup).toBeDefined();
+    });
+
+    test('Should create a new group when no fields are provided', () => {
+      const formGroup = generateFormGroup(
+        undefined,
+        undefined,
+        undefined,
+        false
+      );
+
+      expect(formGroup).toBeDefined();
+    });
+
+    test('Should create a new group with defined control when fields are provided', () => {
+      const formGroup = generateFormGroup(fields, undefined, undefined, false);
+
+      expect(formGroup).toBeDefined();
+      containsField(formGroup, fields[0]);
+      containsField(formGroup, fields[1]);
+    });
+
+    test('Should used input group and creates control when fields are provided and formgroup does not have a controls', () => {
+      const inputGroup = new UntypedFormGroup({});
+
+      const formGroup = generateFormGroup(fields, undefined, inputGroup, false);
+
+      expect(formGroup).toBe(inputGroup);
+      containsField(formGroup, fields[0]);
+    });
+
+    test('Should not remove control from input group when input group is provided and fields does not contain control definition.', () => {
+      const inputGroup = new UntypedFormGroup({
+        student: new UntypedFormControl(),
+      });
+
+      const formGroup = generateFormGroup(fields, undefined, inputGroup, false);
+
+      expect(formGroup.get('student')).toBeDefined();
+    });
+
+    test('Should use existing group when input group is provided but have already defined group.', () => {
+      const inputGroup = new UntypedFormGroup({
+        student: new UntypedFormControl(),
+      });
+
+      const lastGroup = new UntypedFormGroup({
+      });
+
+      const formGroup = generateFormGroup(fields, lastGroup, inputGroup, false);
+
+      expect(formGroup).toBe(lastGroup);
+      containsField(formGroup, fields[0]);
+    });
+
+    test('Should use existing a new input group when last form group exists, but input group was changed.', () => {
+      const inputGroup = new UntypedFormGroup({
+        student: new UntypedFormControl(),
+      });
+
+      const lastGroup = new UntypedFormGroup({
+      });
+
+      const formGroup = generateFormGroup(fields, lastGroup, inputGroup, true);
+
+      expect(formGroup).toBe(inputGroup);
+      containsField(formGroup, fields[0]);
+    });
+  });
+});

package/src/lib/components/shared-components/generic-form/generic-form.model.ts

@@ -0,0 +1,60 @@
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
+import { GenericFieldDefinition } from '@verisoft/ui-core';
+
+export function generateFormGroup(
+  fields: GenericFieldDefinition[] | undefined,
+  lastGroupValue: UntypedFormGroup | undefined,
+  inputGroup: UntypedFormGroup | undefined,
+  inputGroupChanged = false
+): UntypedFormGroup {
+  const formGroup =
+    (inputGroupChanged
+      ? inputGroup ?? lastGroupValue
+      : lastGroupValue ?? inputGroup) ?? new UntypedFormGroup({});
+
+  fields?.forEach((field) => {
+    const control = formGroup.get(field.name);
+    if (!control) {
+      formGroup.addControl(
+        field.name,
+        new UntypedFormControl(field.value, field.validator)
+      );
+    } else {
+      control.setValidators(field.validator ?? null);
+    }
+  });
+  if (!inputGroupChanged) {
+    for (const field in formGroup.controls) {
+      const control = fields?.find((x) => x.name == field);
+      if (!control) {
+        formGroup.removeControl(field);
+      }
+    }
+  }
+
+  return formGroup;
+}
+
+export function getColumnClass(value?: number): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  switch (value) {
+    case 1:
+      return 'col-12';
+    case 2:
+      return 'col-12 col-md-6';
+    case 3:
+      return 'col-12 col-md-4';
+    case 4:
+      return 'col-12 col-md-3';
+    case 6:
+      return 'col-12 col-md-2';
+  }
+  
+  return 'col-12 col-md-1';
+}

package/src/lib/components/shared-components/generic-form/index.ts

@@ -0,0 +1,2 @@
+export * from './generic-form.component';
+export * from './generic-form.model';

package/src/lib/components/shared-components/index.ts

@@ -0,0 +1,6 @@
+export * from './action-button-group';
+export * from './filter';
+export * from './feature-list';
+export * from './generic-field';
+export * from './generic-form';
+export * from './dynamic-component';

package/src/lib/components/side-menu/index.ts

@@ -0,0 +1,2 @@
+export * from './side-menu.component';
+export * from './side-menu.module';

package/src/lib/components/side-menu/side-menu.component.html

@@ -0,0 +1,25 @@
+<div class="gov-sidemenu-inner">
+    <div class="gov-category-list__col gov-category-list__categories">
+        <div class="gov-category-list__col-inner">
+            <ul class="gov-list--plain gov-category-list__nav">
+            @for (item of items; track item) {
+                @for (child of item.children; track child) {
+                    <li class="gov-category-list__nav-item">
+                        <a 
+                            class="gov-category-list__nav-link"
+                            [routerLink]="child.url"
+                            routerLinkActive="gov-category-list__nav-active"
+                            title="{{child.label}}"
+                        >
+                            <span class="gov-link gov-link--standalone">{{child.label}}</span>
+                            @if (child.children) {
+                            <gov-icon [name]="icons.chevronDown" />
+                            }
+                        </a>
+                    </li>
+                }
+            }
+            </ul>
+        </div>
+    </div>
+</div>

package/src/lib/components/side-menu/side-menu.component.scss

@@ -0,0 +1,23 @@
+.gov-category-list__nav-link gov-icon {
+    display: block;
+    position: absolute;
+    right: .625rem;
+    top: 1rem;
+    font-size: 1.5rem;
+    
+    &-:hover {
+        color: (--color-neutral-0);
+    }
+}
+
+.gov-link {
+    text-decoration: none;
+}
+
+.gov-category-list__nav-active {
+    background-color: var(--color-primary-600);
+    
+    & span {
+        color: var(--color-neutral-0);
+    }
+}

package/src/lib/components/side-menu/side-menu.component.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  MenuItem,
+  SIDE_MENU_COMPONENT_TOKEN,
+  SideMenuCore,
+  SideMenuService,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+
+@Component({
+  selector: 'v-side-menu',
+  standalone: true,
+  imports: [CommonModule, RouterModule, GovDesignSystemModule],
+  templateUrl: './side-menu.component.html',
+  styleUrl: './side-menu.component.scss',
+  providers: [
+    {
+      provide: SIDE_MENU_COMPONENT_TOKEN,
+      useExisting: SideMenuComponent,
+    },
+  ],
+})
+export class SideMenuComponent implements SideMenuCore {
+  menuService = inject(SideMenuService);
+
+  @Input() items: MenuItem[] = [];
+
+  @Input() logoUrl = '';
+
+  @Input() userName!: string;
+
+  @Input() userRole!: any | any[] | undefined;
+
+  @Output() minimalized = new EventEmitter<boolean>();
+
+  @Output() itemSelected = new EventEmitter<MenuItem>();
+
+  icons = Icons;
+}

package/src/lib/components/side-menu/side-menu.module.ts

@@ -0,0 +1,56 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import {
+  MENU_TOKEN,
+  MenuItem,
+  SIDE_MENU_COMPONENT_TOKEN,
+  SideMenuModuleConfig,
+  SideMenuProviderService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { SideMenuComponent } from './side-menu.component';
+
+@NgModule({
+  providers: [
+    SideMenuProviderService,
+    {
+      provide: SIDE_MENU_COMPONENT_TOKEN,
+      useExisting: SideMenuComponent,
+    }
+  ],
+})
+export class SideMenuModule extends UnsubscribeComponent {
+  constructor(private readonly service: SideMenuProviderService) {
+    super();
+  }
+
+  static forRoot(
+    config?: SideMenuModuleConfig
+  ): ModuleWithProviders<SideMenuModule> {
+    const moduleWithProvider: ModuleWithProviders<SideMenuModule> = {
+      ngModule: SideMenuModule,
+    };
+
+    if (config?.items) {
+      moduleWithProvider.providers = [
+        {
+          provide: MENU_TOKEN,
+          useValue: config.items,
+        },
+      ];
+    }
+
+    return moduleWithProvider;
+  }
+
+  static forChild(menu: MenuItem[]): ModuleWithProviders<SideMenuModule> {
+    return {
+      ngModule: SideMenuModule,
+      providers: [
+        {
+          provide: MENU_TOKEN,
+          useValue: menu,
+        },
+      ],
+    };
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './side-menu.component';
+export * from './side-menu.module';

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

@@ -0,0 +1,2 @@
+export * from './services/snackbar.service';
+export * from './snackbar.component';

package/src/lib/components/snackbar/services/snackbar.service.ts

@@ -0,0 +1,73 @@
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import * as portal from '@angular/cdk/portal';
+import { Injectable, Injector } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { SnackbarComponent } from '../snackbar.component';
+import { SnackbarConfig } from '../snackbar.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SnackbarService {
+  constructor(
+    private overlay: Overlay,
+    private translate: TranslateService,
+    private injector: Injector
+  ) {}
+
+  showSuccess(message: string, icon?: string) {
+    this.showToast({
+      message: this.translate.instant(message),
+      icon: icon,
+      color: 'success',
+    });
+  }
+
+  showInfo(message: string, icon?: string) {
+    this.showToast({
+      message: this.translate.instant(message),
+      icon: icon,
+      color: 'primary',
+    });
+  }
+
+  showWarn(message: string, icon?: string) {
+    this.showToast({
+      message: this.translate.instant(message),
+      icon: icon,
+      color: 'warning',
+    });
+  }
+
+  showError(message: string, icon?: string) {
+    this.showToast({
+      message: this.translate.instant(message),
+      icon: icon,
+      color: 'error',
+    });
+  }
+
+  private showToast(config: SnackbarConfig) {
+    const positionStrategy = this.overlay
+      .position()
+      .global();
+
+    const overlayRef: OverlayRef = this.overlay.create({
+      positionStrategy,
+      hasBackdrop: false,
+      scrollStrategy: this.overlay.scrollStrategies.noop(),
+    });
+
+    const toastPortal = new portal.ComponentPortal(SnackbarComponent, null, this.createInjector(config));
+    overlayRef.attach(toastPortal);
+  }
+
+  private createInjector(config: any) {
+    return Injector.create({
+      providers: [
+        { provide: 'TOAST_CONFIG', useValue: config },
+      ],
+      parent: this.injector,
+    });
+  }
+}

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

@@ -0,0 +1,14 @@
+<gov-toast
+    [closeLabel]="config.closeLabel ?? closeLabel"
+    [color]="config.color || color"
+    [gravity]="config.gravity || gravity"
+    [position]="config.position || position"
+    [time]="config.time ?? time"
+    [type]="config.type || type"
+>
+    @if (config.icon || icon) {
+    <gov-icon
+        [name]="config.icon || icon"
+    />
+    } {{ config.message || message }}
+</gov-toast>

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

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

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

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { Component, Inject, Input, Optional } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { SNACKBAR_COMPONENT_TOKEN, SnackbarCore } from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { SnackbarConfig } from './snackbar.model';
+
+@Component({
+  selector: 'v-snackbar',
+  standalone: true,
+  imports: [CommonModule, GovDesignSystemModule],
+  templateUrl: './snackbar.component.html',
+  styleUrl: './snackbar.component.scss',
+  providers: [
+    {
+      provide: SNACKBAR_COMPONENT_TOKEN,
+      useExisting: SnackbarComponent,
+    },
+  ],
+})
+export class SnackbarComponent 
+  implements SnackbarCore
+{
+  @Input({required: true}) message!: string;
+
+  @Input() icon!: string;
+
+  @Input() closeLabel!: string;
+
+  @Input() color: "error" | "neutral" | "primary" | "success" | "warning" = "primary";
+
+  @Input() gravity: "bottom" | "top" = "top";
+
+  @Input() position: "center" | "left" | "right" = "right";
+
+  @Input() time = 4000;
+
+  @Input() type: "bold" | "subtle" = "subtle";
+
+  icons = Icons;
+
+  constructor(
+    @Optional() @Inject('TOAST_CONFIG') public config: SnackbarConfig,
+  ) { }
+}

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

@@ -0,0 +1,10 @@
+export interface SnackbarConfig {
+    message: string;
+    icon?: string;
+    closeLabel?: string;
+    color?: "error" | "neutral" | "primary" | "success" | "warning";
+    gravity?: "bottom" | "top";
+    position?: "center" | "left" | "right";
+    time?: number;
+    type?: "bold" | "subtle";
+}

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

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

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

@@ -0,0 +1,35 @@
+<gov-stepper 
+  [ngClass]="layout === 'vertical' ? 'd-block' : 'd-flex justify-content-between'"
+  [size]="size | govSize"
+>
+  @for (item of items; track item; let index = $index) {
+  <gov-stepper-item
+    [ngClass]="{ 'active-step': index === currentStep }"
+  >
+    <span 
+      slot="prefix"
+      [ngStyle]="{ 'background-color': index === currentStep ? 'var(--gov-color-primary-300)' : 'var(--gov-color-primary)' }"
+    >
+      {{ item.prefix }}
+    </span>
+    <p slot="headline">{{ item.header }}</p>
+    <p slot="annotation">{{ item.annotation }}</p>
+  </gov-stepper-item>
+  }
+</gov-stepper>
+<div class="d-flex pt-4 justify-content-between">
+  @if (currentStep > 0) {
+  <v-button
+    [label]="'Back'"
+    [size]="size"
+    (click)="previousStep()"
+  />
+  }
+  @if (currentStep < steps - 1) {
+  <v-button
+    [label]="'Next'"
+    [size]="size"
+    (click)="nextStep()"
+  />
+  }
+</div>

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

@@ -0,0 +1,9 @@
+gov-stepper-item, .gov-stepper-item {
+    width: auto !important;
+}
+
+.active-step {
+    background-color: var(--color-primary-300);
+    border: 1px solid var(--color-primary-600);
+    border-radius: 0.5rem;
+}

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

@@ -0,0 +1,61 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  StepperCore,
+  STEPPER_COMPONENT_TOKEN,
+  StepperItem,
+  FieldSizeType,
+  FieldSize,
+  LayoutType,
+  LayoutTypeType,
+} from '@verisoft/ui-core';
+import { GovSizePipe } from '../../pipes';
+import { ButtonComponent } from '../button';
+@Component({
+  selector: 'v-stepper',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    GovDesignSystemModule,
+    GovSizePipe,
+],
+  templateUrl: './stepper.component.html',
+  styleUrl: './stepper.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: STEPPER_COMPONENT_TOKEN, useExisting: StepperComponent },
+  ],
+})
+export class StepperComponent
+  implements StepperCore, OnInit
+{
+  @Input() items: StepperItem[] = [];
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
+  @Input() icon!: string;
+  @Input() prefix!: string;
+  @Input() annotation!: string;
+  @Input() label!: string;
+  @Input() layout: LayoutTypeType = LayoutType.horizontal;
+  @Output() activeIndexChange = new EventEmitter<number>();
+
+  steps = 0;
+  currentStep = 0;
+
+  ngOnInit(): void {
+    this.steps = this.items.length;
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 0) {
+      this.currentStep--;
+    }
+  }
+
+  nextStep(): void {
+    if (this.currentStep < this.items.length - 1) {
+      this.currentStep++;
+    }
+  }
+}

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

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

package/src/lib/components/{gov-switch/gov-switch.component.html → switch/switch.component.html}

@@ -1,13 +1,7 @@
 <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"
+    [size]="size | govSize"
     [required]="required"
     [name]="name"
     [invalid]="ngControl?.errors"
@@ -18,4 +12,5 @@
     </gov-form-label>
     }
   </gov-form-switch>
+  <v-validation-message [ngControl]="ngControl"></v-validation-message>
 </gov-form-control>

package/src/lib/components/{gov-switch/gov-switch.component.ts → switch/switch.component.ts}

@@ -2,17 +2,18 @@ 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";
+import { SWITCH_COMPONENT_TOKEN, SwitchCore, BaseFormInputComponent, FieldSizeType, FieldSize } from "@verisoft/ui-core";
+import { Icons } from "../../icons";
+import { GovSizePipe } from "../../pipes";
+import { ErrorComponent } from "../errors";
 
 @Component({
   selector: "v-switch",
   standalone: true,
-  styleUrls: [
-    "./gov-switch.component.scss"
-  ],
-  templateUrl: './gov-switch.component.html',
+  styleUrl: "./switch.component.scss",
+  templateUrl: './switch.component.html',
   imports: [
-    CommonModule, GovDesignSystemModule, ErrorPipe, ReactiveFormsModule
+    CommonModule, GovDesignSystemModule, ReactiveFormsModule, GovSizePipe, ErrorComponent
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{
@@ -24,11 +25,12 @@ export class SwitchComponent
   extends BaseFormInputComponent
   implements SwitchCore
 {
-  @Input() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';
-  @Input() errorSlot: "top" | "bottom" = "top";
+  @Input() size: FieldSizeType = FieldSize.medium;
   @Input() noLabel = false;
   @Input() name!: string;
 
+  icons = Icons;
+
   constructor(@Optional() @Self() ngControl: NgControl) {
     super(ngControl);
   }

package/src/lib/components/tab-view/index.ts

@@ -0,0 +1,3 @@
+export * from './tab-view.component';
+export * from './tab-view-item.component';
+export * from './tab-view.module';