@verisoft/ui-govcz 18.6.2 → 18.6.4

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,68 @@
+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 if (control && control.value !== field.value) {
+      control.setValue(field.value);
+      control.setValidators(field.validator ?? null);
+    }
+    else {
+      control.setValidators(field.validator ?? null);
+    }
+
+    if (field.readonly && (control || formGroup.get(field.name))) {
+      formGroup.get(field.name)?.disable();
+    }
+  });
+  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/{lib/components/shared-components/generic-form/index.d.ts → src/lib/components/shared-components/generic-form/index.ts}

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

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

@@ -1,6 +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';
+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/{lib/components/side-menu/index.d.ts → src/lib/components/side-menu/index.ts}

@@ -1,2 +1,2 @@
-export * from './side-menu.component';
-export * from './side-menu.module';
+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,64 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import {
+  MENU_TOKEN,
+  MenuItem,
+  SIDE_MENU_COMPONENT_TOKEN,
+  SIDE_MENU_STATE_TOKEN,
+  SideMenuModuleConfig,
+  SideMenuProviderService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { SideMenuComponent } from './side-menu.component';
+
+@NgModule({
+  providers: [
+    SideMenuProviderService,
+    {
+      provide: SIDE_MENU_COMPONENT_TOKEN,
+      useExisting: SideMenuComponent,
+    },
+    {
+      provide: SIDE_MENU_STATE_TOKEN,
+      useValue: localStorage.getItem('SideMenuStateToken') ?? {
+        expanded: [],
+        minimalized: false,
+      },
+    },
+  ],
+})
+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/{lib/components/snackbar/index.d.ts → src/lib/components/snackbar/index.ts}

@@ -1,2 +1,2 @@
-export * from './services/snackbar.service';
-export * from './snackbar.component';
+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/{lib/components/snackbar/snackbar.model.d.ts → src/lib/components/snackbar/snackbar.model.ts}

@@ -1,10 +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";
-}
+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/switch/switch.component.html

@@ -0,0 +1,16 @@
+<gov-form-control>
+  <gov-form-switch
+    [formControl]="formControl"
+    [size]="size | govSize"
+    [required]="required"
+    [name]="name"
+    [invalid]="ngControl?.errors"
+  >
+    @if (label && !noLabel) {
+    <gov-form-label [size]="size" slot="label">
+      {{ label }}
+    </gov-form-label>
+    }
+  </gov-form-switch>
+  <v-validation-message [ngControl]="ngControl"></v-validation-message>
+</gov-form-control>