@verisoft/ui-govcz 18.6.2 → 18.6.4

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

@@ -0,0 +1,114 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormControl,
+  NgControl,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  TextfieldCore,
+  TEXTFIELD_COMPONENT_TOKEN,
+  FieldType,
+  BaseFormInputComponent,
+  FieldSizeType,
+  FieldSize,
+  IconPositionType,
+  IconPosition,
+  SlotPositionType,
+  SlotPosition,
+  FieldTypeType,
+} from '@verisoft/ui-core';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+import { TooltipComponent } from '../tooltip';
+@Component({
+  selector: 'v-textfield',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    TooltipComponent,
+    GovSizePipe,
+    TranslateModule,
+    ErrorComponent,
+  ],
+  templateUrl: './textfield.component.html',
+  styleUrl: './textfield.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: TEXTFIELD_COMPONENT_TOKEN,
+      useExisting: TextfieldComponent,
+    },
+  ],
+})
+export class TextfieldComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, TextfieldCore, OnInit
+{
+  @Input() floatLabel!: boolean;
+  @Input() type: FieldTypeType = FieldType.text;
+  @Input() minlength = 0;
+  @Input() maxlength = 524288;
+  @Input() min = -2147483648;
+  @Input() max = 2147483647;
+  @Input() prefix!: string;
+  @Input() sufix!: string;
+  @Input() message!: string;
+  @Input() name!: string;
+  @Input() role!: string;
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
+  @Input() icon!: string;
+  @Input() iconPos: IconPositionType = IconPosition.right;
+  @Input() labelSlot: SlotPositionType = SlotPosition.top;
+  @Input() errorSlot: SlotPositionType = SlotPosition.bottom;
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+    if (ngControl) {
+      ngControl.valueAccessor = this;
+    }
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+
+    if (!this.formControl && this.ngControl) {
+      this.formControl = this.ngControl.control as FormControl;
+    }
+
+    if (this.formControl && this.type === FieldType.number) {
+      this.setMinMaxNumberInputValidators();
+    }
+  }
+
+  private setMinMaxNumberInputValidators(): void {
+    if (!this.formControl) {
+      return;
+    }
+
+    const validators = [];
+    if (this.min !== undefined && this.min !== null) {
+      validators.push(Validators.min(this.min));
+    }
+    if (this.max !== undefined && this.max !== null) {
+      validators.push(Validators.max(this.max));
+    }
+
+    this.formControl.addValidators(validators);
+    this.formControl.updateValueAndValidity({ onlySelf: true, emitEvent: true });
+  }
+}

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

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

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

@@ -0,0 +1,10 @@
+<gov-tooltip
+    class="ms-2"
+    [color]="color"
+    [size]="size | govSize"
+    [position]="position"
+    [message]="message"
+    (click)="toggleTooltip()"
+>
+    {{ label }}
+</gov-tooltip>

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

@@ -0,0 +1,57 @@
+import { Component, Input, ElementRef, Renderer2, AfterViewInit } from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { GovSizePipe } from "../../pipes";
+
+@Component({
+    standalone: true,
+    selector: "v-tooltip",
+    templateUrl: './tooltip.component.html',
+    styleUrl: "./tooltip.component.scss",
+    imports: [
+        GovDesignSystemModule,
+        GovSizePipe
+    ],
+})
+export class TooltipComponent implements AfterViewInit {
+    @Input() color: 'primary' | 'secondary' = 'primary';
+
+    @Input() size: 'small' | 'medium' | 'large' = 'medium';
+
+    @Input() position: 'top' | 'right' | 'bottom' | 'left' = 'top';
+
+    @Input({ required: true }) message!: string;
+
+    @Input() label = '?';
+
+    isVisible = false;
+    tooltipId: string | null = null;
+
+    constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+    ngAfterViewInit() {
+        const scrollContainer = document.querySelector('.gov-main-container-content');
+        if (scrollContainer) {
+            this.renderer.listen(scrollContainer, 'scroll', () => {
+                if (this.isVisible && this.tooltipId) {
+                    const tooltipContent = document.querySelector(`[parent-id="${this.tooltipId}"]`);
+                    if (tooltipContent) {
+                        this.renderer.setStyle(tooltipContent, 'visibility', 'hidden');
+                        this.isVisible = false;
+                    }
+                }
+            });
+        }
+    }
+
+    toggleTooltip() {
+        this.isVisible = !this.isVisible;
+        const tooltip = this.el.nativeElement.querySelector('gov-tooltip');
+        if (tooltip && !this.tooltipId) {
+            this.tooltipId = tooltip.getAttribute('id');
+        }
+        const tooltipContent = document.querySelector(`[parent-id="${this.tooltipId}"]`);
+        if (tooltipContent) {
+            this.renderer.setStyle(tooltipContent, 'visibility', this.isVisible ? 'visible' : 'hidden');
+        }
+    }
+}

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

@@ -1 +1 @@
-export * from './tristatecheckbox.component';
+export * from './tristatecheckbox.component';

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

@@ -0,0 +1,23 @@
+<gov-form-control class="mt-3">
+    <gov-form-checkbox 
+        [formControl]="formControl"
+        [size]="size | govSize"
+        [value]="value"
+        [required]="required"
+        [attr.disabled]="disabled ? 'true' : 'false'"
+        [checked]="checked"
+        [indeterminate]="isChecked === 0"
+        [name]="name"
+        [invalid]="ngControl?.errors"
+        [noLabel]="noLabel"
+        (gov-change)="toggleCheckbox()"
+    > 
+        <gov-form-label
+            [size]="size | govSize"
+            slot="label"
+        >
+            {{ label }}
+        </gov-form-label>
+    </gov-form-checkbox>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+</gov-form-control>

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

@@ -0,0 +1,103 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Optional,
+  Self,
+  Input,
+  OnInit,
+  ChangeDetectorRef,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  BaseFormInputComponent,
+  TRISTATE_CHECKBOX_COMPONENT_TOKEN,
+  TristateCheckboxCore,
+  SlotPositionType,
+  SlotPosition,
+  FieldSizeType,
+  FieldSize,
+} from '@verisoft/ui-core';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+
+enum States {
+  None = -1,
+  False = 0,
+  True = 1,
+}
+
+@Component({
+  selector: 'v-tristatecheckbox',
+  standalone: true,
+  styleUrls: ['./tristatecheckbox.component.scss'],
+  templateUrl: './tristatecheckbox.component.html',
+  imports: [
+    CommonModule,
+    GovDesignSystemModule,
+    ReactiveFormsModule,
+    ErrorComponent,
+    GovSizePipe,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: TRISTATE_CHECKBOX_COMPONENT_TOKEN,
+      useExisting: TristatecheckboxComponent,
+    },
+  ],
+})
+export class TristatecheckboxComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, TristateCheckboxCore, OnInit {
+
+  @Input() size: FieldSizeType = FieldSize.medium;
+
+  @Input() value!: string;
+
+  @Input() name!: string;
+
+  @Input() noLabel = false;
+
+  @Input() errorSlot: SlotPositionType = SlotPosition.bottom;
+
+  @Input() checked!: boolean;
+
+  protected isChecked = States.None;
+
+  constructor(
+    @Optional() @Self() ngControl: NgControl,
+    protected changeDetectorRef: ChangeDetectorRef
+  ) {
+    super(ngControl);
+  }
+
+  override writeValue(value: any): void {
+    this.isChecked = value === true ? States.True : value === false ? States.False : States.None;
+    this.changeDetectorRef.markForCheck();
+  }
+
+  protected toggleCheckbox(): void {
+    this.isChecked = this.isChecked === States.False
+      ? States.None
+      : this.isChecked === States.None
+        ? States.True
+        : States.False;
+    this.updateControlValue();
+    this.changeDetectorRef.markForCheck();
+  }
+
+  private updateControlValue(): void {
+    const newValue = this.getCurrentValue();
+    this.formControl.setValue(newValue, { emitEvent: true });
+  }
+
+  private getCurrentValue(): boolean | null {
+    return this.isChecked === States.True ? true : this.isChecked === States.False ? false : null;
+  }
+}

package/src/lib/icons.ts

@@ -0,0 +1,36 @@
+import { CommonIcons } from '@verisoft/ui-core';
+
+export const Icons: CommonIcons = {
+  add: 'plus-lg',
+  minus: 'dash',
+  delete: 'trash',
+  filter: 'filter',
+  download: 'upload',
+  save: 'download',
+  print: 'print-fill',
+  edit: 'pencil',
+  calendar: 'calendar',
+  settings: 'gear',
+  house: 'house-door-fill',
+  chevronRight: 'chevron-right',
+  chevronDown: 'chevron-down',
+  chevronLeft: 'chevron-left',
+  chevronUp: 'chevron-up',
+  checkbox: 'check-square',
+  warning: 'exclamation-triangle-fill',
+  search: 'search',
+  action: 'bars',
+  user: 'user',
+  logout: 'logout',
+  crossCircle: 'x-circle',
+  infoCircle: 'info-circle',
+  cross: 'x-lg',
+  arrowLeft: 'arrow-left',
+  arrowRight: 'arrow-right',
+  questionCircle: 'question-circle',
+  checkCircle: 'check-circle',
+  sitemap: 'diagram',
+  check: 'check-lg',
+  envelope: 'envelope',
+  loader: 'loader',
+};

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

@@ -1,5 +1,5 @@
-export * from './components';
-export * from './pipes';
-export * from './init.service';
-export * from './pages';
-export * from './icons';
+export * from './components';
+export * from './pipes';
+export * from './init.service';
+export * from './pages';
+export * from './icons';

package/src/lib/init.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { defineCustomElements } from "@gov-design-system-ce/components/loader";
+
+@Injectable({
+    providedIn: 'root',
+})
+export class GovInitService {
+    constructor() {
+        defineCustomElements(window);
+    }
+}

package/src/lib/interceptors/http-error-message.interceptor.ts

@@ -0,0 +1,45 @@
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+} from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { catchError, Observable, throwError } from 'rxjs';
+import { SnackbarService } from '../components';
+
+@Injectable()
+export class HttpErrorMessageInterceptor implements HttpInterceptor {
+
+  snackbarService = inject(SnackbarService);
+
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    return next.handle(req).pipe(
+      catchError((errorResponse: HttpErrorResponse) => {
+        if (!errorResponse.ok) {
+
+          if (errorResponse.status === 400) {
+            console.error('Bad request');
+          } if (errorResponse.status === 403) {
+            this.snackbarService.showError('Unauthorized request');
+            console.error('Unauthorized request');
+          } if (errorResponse.status === 404) {
+            console.error('Entity not found');
+          } if (errorResponse.status === 422) {
+            console.error('Error occured during validation');
+            console.log(errorResponse);
+          } else {
+            this.snackbarService.showError(errorResponse.message);
+            console.error(errorResponse);
+          }
+        }
+
+        return throwError(() => errorResponse);
+      })
+    );
+  }
+}

package/src/lib/pages/bad-request-page/bad-request-page.component.html

@@ -0,0 +1,5 @@
+<gov-error-code>
+    <gov-icon type="complex" name="card-400" slot="icon"></gov-icon>
+    <p>Sorry, the server cannot or will not process the request</p>
+    <gov-button color="primary" size="m" type="solid" (gov-click)="navigationBack()">Go back</gov-button>
+</gov-error-code>

package/src/lib/pages/bad-request-page/bad-request-page.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+@Component({
+  selector: 'v-bad-request-page',
+  standalone: true,
+  imports: [CommonModule, GovDesignSystemModule],
+  templateUrl: './bad-request-page.component.html',
+  styleUrl: './bad-request-page.component.scss'
+})
+export class BadRequestPageComponent {
+  navigationBack() {
+    history.back();
+  }
+}

package/src/lib/pages/error-page/error-page.component.html

@@ -0,0 +1,5 @@
+<gov-error-code>
+    <gov-icon type="complex" [name]="errorDetails.iconName" slot="icon"></gov-icon>
+    <p>{{errorDetails.message}}</p>
+    <gov-button color="primary" size="m" type="solid" (gov-click)="navigateToUrl()">Go back</gov-button>
+</gov-error-code>

package/src/lib/pages/error-page/error-page.component.ts

@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { ErrorDetails, ERROR_MAP } from './error-page.constants';
+
+@Component({
+  selector: 'v-error-page',
+  standalone: true,
+  imports: [CommonModule, GovDesignSystemModule],
+  templateUrl: './error-page.component.html',
+  styleUrl: './error-page.component.scss'
+})
+export class ErrorPageComponent {
+  @Input() url!: string;
+  @Input() code = 404;
+
+  constructor(private router: Router) {}
+
+  get errorDetails(): ErrorDetails {
+    return ERROR_MAP[this.code];
+  }
+
+  navigateToUrl() {
+    if (this.url) {
+      this.router.navigate([this.url]);
+    }
+    else {
+      history.back();
+    }
+  }
+}

package/src/lib/pages/error-page/error-page.constants.ts

@@ -0,0 +1,19 @@
+export interface ErrorDetails {
+  message: string;
+  iconName: string;
+}
+
+export const ERROR_MAP: Record<number, ErrorDetails> = {
+  400: {
+    message: 'Sorry, the server cannot or will not process the request.',
+    iconName: 'card-400'
+  },
+  404: {
+    message: 'Sorry, the page you are looking for does not exist or has been moved.',
+    iconName: 'card-404'
+  },
+  500: {
+    message: 'Sorry, an unexpected condition was encountered.',
+    iconName: 'card-500'
+  }
+};

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

@@ -1,3 +1,3 @@
-export * from './not-authenticated';
-export * from './not-authorized';
-export * from './not-found';
+export * from './not-authenticated';
+export * from './not-authorized';
+export * from './not-found';

package/src/lib/pages/internal-server-error-page/internal-server-error-page.component.html

@@ -0,0 +1,5 @@
+<gov-error-code>
+    <gov-icon type="complex" name="card-500" slot="icon"></gov-icon>
+    <p>Sorry, an unexpected condition was encountered</p>
+    <gov-button color="primary" size="m" type="solid" (gov-click)="navigationBack()">Go back</gov-button>
+</gov-error-code>

package/src/lib/pages/internal-server-error-page/internal-server-error-page.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+
+@Component({
+  selector: 'v-internal-server-error-page',
+  standalone: true,
+  imports: [CommonModule, GovDesignSystemModule],
+  templateUrl: './internal-server-error-page.component.html',
+  styleUrl: './internal-server-error-page.component.scss',
+})
+export class InternalServerErrorPageComponent {
+  navigationBack() {
+    history.back();
+  }
+}

package/{lib/pages/not-authenticated/index.d.ts → src/lib/pages/not-authenticated/index.ts}

@@ -1 +1 @@
-export * from './not-authenticated.component';
+export * from './not-authenticated.component';

package/src/lib/pages/not-authenticated/not-authenticated.component.html

@@ -0,0 +1,5 @@
+<gov-error-code>
+    <gov-icon type="complex" name="card-401" slot="icon"></gov-icon>
+    <p>You are not logged in, please do so.</p>
+    <v-button color="primary" size="medium" type="solid" label="Login" [routerLink]="['/login']" />
+</gov-error-code>

package/src/lib/pages/not-authenticated/not-authenticated.component.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { ButtonComponent } from "./../../components";
+
+@Component({
+    standalone: true,
+    selector: 'v-not-authenticated',
+    templateUrl: "./not-authenticated.component.html",
+    imports: [
+        GovDesignSystemModule,
+        ButtonComponent,
+    ],
+})
+export class NotAuthenticatedComponent { }

package/{lib/pages/not-authorized/index.d.ts → src/lib/pages/not-authorized/index.ts}

@@ -1 +1 @@
-export * from './not-authorized.component';
+export * from './not-authorized.component';

package/src/lib/pages/not-authorized/not-authorized.component.html

@@ -0,0 +1,5 @@
+<gov-error-code>
+    <gov-icon type="complex" name="card-403" slot="icon"></gov-icon>
+    <p>You are not authorized to view this content.</p>
+    <v-button color="primary" size="medium" type="solid" label="Go back" (click)="goBack()" />
+</gov-error-code>

package/src/lib/pages/not-authorized/not-authorized.component.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { ButtonComponent } from "../../components";
+
+@Component({
+    standalone: true,
+    selector: 'v-not-authorized',
+    templateUrl: "./not-authorized.component.html",
+    imports: [
+        GovDesignSystemModule,
+        ButtonComponent,
+    ],
+})
+export class NotAuthorizedComponent {
+    goBack(): void {
+        history.back();
+    }
+}

package/{lib/pages/not-found/index.d.ts → src/lib/pages/not-found/index.ts}

@@ -1 +1 @@
-export * from './not-found.component';
+export * from './not-found.component';

package/src/lib/pages/not-found/not-found.component.html

@@ -0,0 +1,5 @@
+<gov-error-code>
+    <gov-icon type="complex" name="card-404" slot="icon"></gov-icon>
+    <p>The item you are looking for does not exist.</p>
+    <v-button color="primary" size="medium" type="solid" label="Go back" (click)="goBack()" />
+</gov-error-code>

package/src/lib/pages/not-found/not-found.component.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { ButtonComponent } from "../../components";
+
+@Component({
+    standalone: true,
+    selector: 'v-not-found',
+    templateUrl: "./not-found.component.html",
+    imports: [
+        GovDesignSystemModule,
+        ButtonComponent
+    ],
+})
+export class NotFoundComponent {
+    goBack(): void {
+        history.back();
+    }
+}

package/src/lib/pages/not-found-page/not-found-page.component.html

@@ -0,0 +1,6 @@
+<gov-error-code>
+    <gov-icon type="complex" name="card-404" slot="icon"></gov-icon>
+    <p>This is not the page you are looking for.<br />Try searching for something
+        else.</p>
+    <gov-button color="primary" size="m" type="solid" (gov-click)="navigationBack()">Go back</gov-button>
+</gov-error-code>