@verisoft/ui-govcz 20.0.1 → 20.1.0

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

@@ -0,0 +1,112 @@
+
+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',
+    imports: [
+    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,9 @@
+<gov-tooltip
+    class="ms-2"
+    [color]="color"
+    [size]="size() | govSize"
+    [position]="position()"
+    [message]="tooltipText()"
+>
+    <ng-content></ng-content>
+</gov-tooltip>

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

@@ -0,0 +1,19 @@
+import { Component, input } from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { ControlSeverityType, FieldSizeType, PositionType, TooltipCore } from "@verisoft/ui-core";
+import { GovSizePipe } from "../../pipes";
+
+@Component({
+    selector: "v-tooltip",
+    templateUrl: './tooltip.component.html',
+    imports: [
+        GovDesignSystemModule,
+        GovSizePipe
+    ]
+})
+export class TooltipComponent implements TooltipCore  {
+    color = input<ControlSeverityType | undefined>(undefined);
+    position = input<PositionType | undefined>(undefined);
+    size = input<FieldSizeType | undefined>(undefined);
+    tooltipText = input<string | undefined>(undefined);
+}

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/src/lib/index.ts

@@ -0,0 +1,5 @@
+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,14 @@
+
+import { Component } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+@Component({
+    selector: 'v-bad-request-page',
+    imports: [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,31 @@
+
+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',
+    imports: [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/src/lib/pages/index.ts

@@ -0,0 +1,3 @@
+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,15 @@
+
+import { Component } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+
+@Component({
+    selector: 'v-internal-server-error-page',
+    imports: [GovDesignSystemModule],
+    templateUrl: './internal-server-error-page.component.html',
+    styleUrl: './internal-server-error-page.component.scss'
+})
+export class InternalServerErrorPageComponent {
+  navigationBack() {
+    history.back();
+  }
+}

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

@@ -0,0 +1 @@
+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,13 @@
+import { Component } from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { ButtonComponent } from "./../../components";
+
+@Component({
+    selector: 'v-not-authenticated',
+    templateUrl: "./not-authenticated.component.html",
+    imports: [
+        GovDesignSystemModule,
+        ButtonComponent,
+    ]
+})
+export class NotAuthenticatedComponent { }

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

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

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

@@ -0,0 +1 @@
+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,17 @@
+import { Component } from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { ButtonComponent } from "../../components";
+
+@Component({
+    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>

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

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

package/src/lib/pipes/color/color.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { ControlSeverity, ControlSeverityType, GovControlSeverity } from "@verisoft/ui-core";
+
+@Pipe({
+    name: 'govColor',
+    standalone: true,
+})
+export class GovColorPipe implements PipeTransform {
+    transform(color: ControlSeverityType | undefined): string | undefined {
+        switch (color) {
+            case ControlSeverity.danger:
+                return GovControlSeverity.error;
+            
+            case ControlSeverity.info:
+                return GovControlSeverity.neutral;
+
+            case ControlSeverity.help:
+            case ControlSeverity.contrast:
+                return GovControlSeverity.primary;
+        }
+
+        return color;
+    }
+}

package/src/lib/pipes/index.ts

@@ -0,0 +1,3 @@
+export * from './color/color.pipe';
+export * from './multiselect/multiselect-options.pipe';
+export * from './size/size.pipe';

package/src/lib/pipes/multiselect/multiselect-options.pipe.ts

@@ -0,0 +1,61 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { GovFormMultiSelectItem } from '@gov-design-system-ce/components';
+
+@Pipe({
+  name: 'govMultiselectOptions',
+  standalone: true,
+})
+export class GovMultiselectOptionsPipe implements PipeTransform {
+  transform(
+    options: any[] | undefined,
+    optionLabel?: string,
+    optionValue?: string,
+    addEmptyOption = false,
+  ): GovFormMultiSelectItem[] {
+    if (!options?.length) return [];
+
+    return this.convertToGovOption(options, addEmptyOption, optionLabel, optionValue);
+  }
+
+  private convertToGovOption(
+    options: any[],
+    addEmptyOption: boolean,
+    optionLabel?: string,
+    optionValue?: string
+  ): GovFormMultiSelectItem[] {
+    const convertedOptions: GovFormMultiSelectItem[] = [];
+    options.forEach((obj) => {
+      let stringKey = '';
+      let numberKey = '';
+
+      if (optionLabel && optionValue) {
+        stringKey = optionLabel;
+        numberKey = optionValue;
+      } else {
+        const keys = Object.keys(obj);
+
+        keys.forEach((key) => {
+          if (typeof obj[key] === 'string') {
+            stringKey = key;
+          } else if (typeof obj[key] === 'number') {
+            numberKey = key;
+          }
+        });
+      }
+
+      convertedOptions.push({
+        label: obj[stringKey] as string,
+        value: (obj[numberKey] as string)?.toString() ?? 'VALUE NOT SET',
+      });
+    });
+
+    if (addEmptyOption) {
+      convertedOptions.unshift({
+        label: '',
+        value: 'null',
+      });
+    }
+
+    return convertedOptions;
+  }
+}

package/src/lib/pipes/size/size.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { FieldSize, FieldSizeType } from "@verisoft/ui-core";
+
+@Pipe({
+    name: 'govSize',
+    standalone: true,
+})
+export class GovSizePipe implements PipeTransform {
+    transform(size: FieldSizeType | undefined): string | undefined {
+        switch (size) {
+            case FieldSize.small:
+                return 's';
+            case FieldSize.medium:
+            case undefined:
+                return 'm';
+            case FieldSize.large:
+                return 'l';
+            case FieldSize.xl:
+                return 'xl';
+            default:
+                return size;
+        }
+    }
+}

package/src/sass/foundations/_colors.scss

@@ -0,0 +1,4 @@
+/* colors variables */
+:root {
+  --primary-rgb: 35, 98, 162;
+}

package/src/sass/foundations/index.scss

@@ -0,0 +1 @@
+@use './colors';

package/src/sass/integrations/_bootstrap.scss

@@ -0,0 +1,4 @@
+/* bootstrap overrides variables */
+:root {
+  --bs-primary-rgb: var(--primary-rgb);
+}

package/src/sass/integrations/index.scss

@@ -0,0 +1 @@
+@use './bootstrap';

package/src/sass/main.scss

@@ -0,0 +1,12 @@
+$version: '0.0.1';
+@use './vendors/bootstrap';
+@use './foundations/index' as foundations;
+@use './tokens/index' as tokens;
+@use './integrations/index' as integrations;
+@use './utils';
+@use './overrides/index' as overrides;
+
+@import "@gov-design-system-ce/styles/tokens.css";
+@import "@gov-design-system-ce/styles/styles.css";
+@import "@gov-design-system-ce/styles/layout.css";
+@import "@gov-design-system-ce/styles/components.css";

package/src/sass/overrides/_gov.scss

@@ -0,0 +1,4 @@
+.gov-backdrop__background,
+.gov-loading__content {
+  position: absolute;
+}

package/src/sass/overrides/index.scss

@@ -0,0 +1 @@
+@use './_gov';

package/src/sass/tokens/_theme-dark.scss

@@ -0,0 +1,18 @@
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --v-filter-background: var(--background-block-primary);
+    --v-filter-header-background: var(--background-block-secondary);
+    --v-table-filter-background: var(--background-block-primary);
+    --v-filter-border: var(--border-subtlest);
+    --v-filter-records-text-color: var(--color-neutral-0);
+  }
+}
+
+:root[data-theme="dark"] {
+  --v-filter-background: var(--background-block-primary);
+  --v-filter-header-background: var(--background-block-secondary);
+  --v-table-filter-background: var(--background-block-primary);
+  --v-filter-border: var(--border-subtlest);
+  --v-filter-records-text-color: var(--color-neutral-0);
+}
+