@verisoft/ui-govcz 18.6.2 → 18.6.3

package/package.json

@@ -1,39 +1,24 @@
-{
-  "name": "@verisoft/ui-govcz",
-  "version": "18.6.2",
-  "main": "dist/index.js",
-  "module": "fesm2022/verisoft-ui-govcz.mjs",
-  "types": "src/Verisoft.Frontend/src/dist/src/libs/ui-govcz/index.d.ts",
-  "peerDependencies": {
-    "@angular/common": "^18.2.8",
-    "@angular/core": "^18.2.8",
-    "@angular/router": "18.2.8",
-    "@gov-design-system-ce/angular": "^1.1.1",
-    "@verisoft/ui-core": "18.3.1",
-    "@gov-design-system-ce/components": "^4.1.3-BETA-10",
-    "@angular/forms": "18.2.8",
-    "uuid": "^10.0.0",
-    "@verisoft/core": "18.3.1",
-    "zxcvbn": "^4.4.2",
-    "rxjs": "~7.8.0",
-    "@angular/cdk": "^18.2.14",
-    "@ngx-translate/core": "^15.0.0",
-    "@verisoft/security-core": "18.3.1"
-  },
-  "sideEffects": false,
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/verisoft-ui-govcz.mjs",
-      "esm": "./esm2022/verisoft-ui-govcz.mjs",
-      "default": "./fesm2022/verisoft-ui-govcz.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
+{
+  "name": "@verisoft/ui-govcz",
+  "version": "18.6.3",
+  "main": "dist/index.js",
+  "module": "src/Verisoft.Frontend/src/dist/src/libs/ui-govcz/fesm2022/verisoft-ui-govcz.mjs",
+  "types": "src/Verisoft.Frontend/src/dist/src/libs/ui-govcz/index.d.ts",
+  "peerDependencies": {
+    "@angular/common": "^18.2.8",
+    "@angular/core": "^18.2.8",
+    "@angular/router": "18.2.8",
+    "@gov-design-system-ce/angular": "^1.1.1",
+    "@verisoft/ui-core": "18.3.1",
+    "@gov-design-system-ce/components": "^4.1.3-BETA-10",
+    "@angular/forms": "18.2.8",
+    "uuid": "^10.0.0",
+    "@verisoft/core": "18.3.1",
+    "zxcvbn": "^4.4.2",
+    "rxjs": "~7.8.0",
+    "@angular/cdk": "^18.2.14",
+    "@ngx-translate/core": "^15.0.0",
+    "@verisoft/security-core": "18.3.1"
+  },
+  "sideEffects": false
 }

package/project.json

@@ -0,0 +1,49 @@
+{
+  "name": "ui-govcz",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "src/libs/ui-govcz/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "src/libs/ui-govcz/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "src/libs/ui-govcz/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "src/libs/ui-govcz/tsconfig.lib.json"
+        }
+      },
+      "dependsOn": [
+        "sync-shared",
+        {
+          "target": "build",
+          "projects": ["core", "store", "ui-core"]
+        }
+      ],
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "src/libs/ui-govcz/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "sync-shared": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "cpx \"src/libs/ui-primeng/src/lib/components/shared-components/**/*.*\" \"src/libs/ui-govcz/src/lib/components/shared-components\" --update"
+      }
+    }
+  }
+}

package/src/assets/main.css

@@ -0,0 +1,18 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 1 | @import 'node_modules/bootstrap/scss/bootstrap-grid.scss';
+ *   |         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   src\libs\ui-govcz\src\sass\vendors\_bootstrap.scss 1:9  @import
+ *   src\libs\ui-govcz\src\sass\main.scss 3:9                root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 1 \2502  @import 'node_modules/bootstrap/scss/bootstrap-grid.scss';\d\a   \2502          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   src\\libs\\ui-govcz\\src\\sass\\vendors\\_bootstrap.scss 1:9  @import\a   src\\libs\\ui-govcz\\src\\sass\\main.scss 3:9                root stylesheet";
+}

package/src/config.d.ts

@@ -0,0 +1,10 @@
+declare global {
+    interface Window {
+        GOV_DS_CONFIG?: {
+            canValidateWcagOnRender?: boolean;
+            iconsPath?: string;
+        };
+    }
+}
+
+window.GOV_DS_CONFIG ??= { canValidateWcagOnRender: true, iconsPath: '/assets/govcz/icons' };

package/src/index.ts

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

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

@@ -0,0 +1,23 @@
+<div class="gov-breadcrums mt-3 mb-3">
+  <gov-breadcrumbs accessible-label="gov-breadcrums">
+    <ul>
+      <li *ngIf="useHomeRoute">
+        <gov-icon [name]="icons.house" />
+        <a [routerLink]="'/'">Home</a>
+      </li>
+      @if (items) { @for (item of items; track item; let index = $index) {
+      <li>
+        @if (index > 0 || useHomeRoute) {
+        <gov-icon [name]="icons.chevronRight" />
+        }
+        @if (item.icon) {
+        <gov-icon [name]="item.icon" />
+        }
+        <a [routerLink]="item.routerLink">
+          {{ item.label }}
+        </a>
+      </li>
+      } }
+    </ul>
+  </gov-breadcrumbs>
+</div>

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

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

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

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  BREADCRUMB_COMPONENT_TOKEN,
+  BreadcrumbCoreComponent
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+
+@Component({
+  selector: 'v-breadcrumb',
+  standalone: true,
+  imports: [
+    CommonModule,
+    GovDesignSystemModule,
+    RouterModule
+  ],
+  templateUrl: './breadcrumb.component.html',
+  styleUrl: './breadcrumb.component.scss',
+  providers: [
+    {
+      provide: BREADCRUMB_COMPONENT_TOKEN,
+      useExisting: BreadcrumbComponent
+    },
+  ],
+})
+export class BreadcrumbComponent extends BreadcrumbCoreComponent { 
+  icons = Icons;
+}

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

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

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

@@ -0,0 +1,26 @@
+<div class="g-button">
+    <a
+        [routerLink]="routerLink ? routerLink : undefined"
+        [queryParams]="queryParams ? queryParams : undefined"
+    >
+        <gov-button
+            [type]="outlined === true ? 'outlined' : type"
+            [color]="severity | govColor"
+            [disabled]="disabled"
+            [size]="size | govSize"
+            [name]="name"
+            [expanded]="expanded"
+            (gov-click)="handleClick($event)"
+            (click)="handleClick($event)"
+        >
+            @if (icon) {
+                <gov-icon 
+                    [name]="icon"
+                    [slot]="iconPos === 'left' ? 'icon-start' : 'icon-end'"
+                />
+            } @if (label) {
+                {{ label | translate }}
+            }
+        </gov-button>
+    </a>
+</div>

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

@@ -0,0 +1,72 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from "@angular/core";
+import { Params, RouterModule } from "@angular/router";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { ButtonEvent, GovButtonCustomEvent } from "@gov-design-system-ce/components";
+import { TranslateModule } from "@ngx-translate/core";
+import {
+    BUTTON_COMPONENT_TOKEN,
+    ButtonCore,
+    IconPositionType,
+    IconPosition,
+    FieldSize,
+    FieldSizeType,
+    ControlSeverity,
+    ControlSeverityType,
+    GovButtonType,
+    GovButtonTypeType,
+} from "@verisoft/ui-core";
+import { GovColorPipe, GovSizePipe } from "../../pipes";
+
+@Component({
+    selector: "v-button",
+    standalone: true,
+    styleUrl: "./button.component.scss",
+    templateUrl: './button.component.html',
+    imports: [
+        GovDesignSystemModule, RouterModule, GovSizePipe, GovColorPipe, TranslateModule
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: BUTTON_COMPONENT_TOKEN,
+            useExisting: ButtonComponent,
+        }
+    ],
+})
+export class ButtonComponent
+    implements ButtonCore
+{
+    @Input() label: string | undefined;
+    @Input() icon: string | undefined;
+    @Input() badge!: string;
+    @Input() iconPos: IconPositionType = IconPosition.left;
+    @Input() disabled = false;
+    @Input() rounded!: boolean;
+    @Input() outlined!: boolean;
+    @Input() raised!: boolean;
+    @Input() routerLink!: any[];
+    @Input() size: FieldSizeType | undefined = FieldSize.medium;
+    @Input() queryParams!: Params;
+    @Input() severity: ControlSeverityType | undefined = ControlSeverity.primary;
+    @Input() type: GovButtonTypeType = GovButtonType.solid;
+    @Input() expanded = false;
+    @Input() name!: string;
+
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    @Output() click = new EventEmitter<any>();
+
+    handleClick(event: GovButtonCustomEvent<ButtonEvent> | MouseEvent) {
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+
+        this.click.emit(event);
+    }
+}

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

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

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

@@ -0,0 +1,28 @@
+<gov-form-control class="mb-3">
+    @if (label) {
+    <gov-form-label [slot]="labelSlot" [size]="size | govSize">
+        {{ label | translate}}
+    </gov-form-label>
+    }
+    <gov-form-group>
+        <gov-form-input
+            [formControl]="formControl"
+            [attr.input-type]="type"
+            [invalid]="ngControl?.errors ? true : false"
+            [size]="size | govSize"
+            [required]="required"
+            [readonly]="readonly"
+            [attr.disabled]="readonly ? 'true' : 'false'"
+            [name]="name"
+        />
+    </gov-form-group>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+    @if (message) {
+    <gov-form-message 
+        [slot]="messageSlot" 
+        color="neutral"
+        >
+        {{ message }}
+    </gov-form-message>
+    }
+</gov-form-control>

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

@@ -0,0 +1,79 @@
+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 { TranslateModule } from '@ngx-translate/core';
+import {
+  BaseFormInputComponent,
+  CalendarCore,
+  CALENDAR_COMPONENT_TOKEN,
+  FieldType,
+  FieldSizeType,
+  FieldSize,
+  SlotPosition,
+  SlotPositionType,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+
+@Component({
+  selector: 'v-calendar',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    GovSizePipe,
+    ErrorComponent,
+    TranslateModule
+  ],
+  templateUrl: './calendar.component.html',
+  styleUrl: './calendar.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: CALENDAR_COMPONENT_TOKEN,
+      useExisting: CalendarComponent
+    }
+  ],
+})
+
+export class CalendarComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, CalendarCore
+{
+  @Input() icon!: string;
+
+  @Input() floatLabel: string | undefined;
+
+  @Input() maxDate!: Date;
+
+  @Input() minDate!: Date;
+
+  @Input() header!: string;
+
+  @Input() footer!: string;
+
+  @Input() selectionMode: 'single' | 'multiple' | 'range' | undefined;
+
+  @Input() size: FieldSizeType = FieldSize.medium;
+
+  @Input() errorSlot: SlotPositionType = SlotPosition.bottom;
+
+  @Input() labelSlot: SlotPositionType = SlotPosition.top;
+
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom;
+
+  @Input() message!: string;
+
+  @Input() name!: string;
+
+  type = FieldType.date;
+
+  icons = Icons;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

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

package/src/lib/components/checkbox/checkbox.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'"
+        [identifier]="id"
+        [indeterminate]="indeterminate"
+        [name]="name"
+        [invalid]="ngControl?.errors"
+        [noLabel]="noLabel"
+        [disabled]="disabled"
+    >   
+        <gov-form-label
+            [size]="size"
+            slot="label"
+        >
+            {{ label ?? '' | translate }}
+        </gov-form-label>
+    </gov-form-checkbox>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+</gov-form-control>

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

@@ -0,0 +1,62 @@
+import { CommonModule } from "@angular/common";
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Optional,
+    Self,
+    Input,
+} from "@angular/core";
+import { ControlValueAccessor, NgControl, ReactiveFormsModule } from "@angular/forms";
+import { RouterModule } from "@angular/router";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { TranslateModule } from "@ngx-translate/core";
+import {
+    BaseFormInputComponent,
+    CHECKBOX_COMPONENT_TOKEN,
+    CheckboxCore,
+    FieldSize,
+    FieldSizeType,
+} from "@verisoft/ui-core";
+import { v4 as uuidv4 } from 'uuid';
+import { Icons } from "../../icons";
+import { GovSizePipe } from "../../pipes";
+import { ErrorComponent } from "../errors";
+
+@Component({
+    selector: "v-checkbox",
+    standalone: true,
+    styleUrl: "./checkbox.component.scss",
+    templateUrl: './checkbox.component.html',
+    imports: [
+        CommonModule,
+        GovDesignSystemModule,
+        RouterModule,
+        ReactiveFormsModule,
+        GovSizePipe,
+        ErrorComponent,
+        TranslateModule
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{
+        provide: CHECKBOX_COMPONENT_TOKEN,
+        useExisting: CheckboxComponent,
+    }],
+})
+export class CheckboxComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, CheckboxCore
+{
+    @Input() size: FieldSizeType = FieldSize.medium;
+    @Input() value!: string;
+    @Input() name!: string;
+    @Input() indeterminate = false;
+    @Input() noLabel = false;
+    
+    protected readonly icons = Icons;
+
+    constructor(@Optional() @Self() ngControl: NgControl) {
+        super(ngControl);
+    }
+
+    id = uuidv4();
+}

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

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

package/src/lib/components/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,50 @@
+<gov-dialog
+    [open]="visible"
+    [attr.block-close]="data.closable !== undefined ? !data.closable : false"
+    [attr.block-backdrop-close]="data.closable !== undefined ? !data.closable : false" 
+    [style.--dialog-max-width]="data.width"
+    [style.--dialog-max-height]="data.height"
+    role="dialog"
+    accessible-close-label="Close dialog box with more information"
+    (gov-close)="data.cancelButtonFn ? dialogClick(false) : (visible = false)"
+>
+    <gov-icon
+        type="components"
+        [name]="data.headerIcon"
+        slot="icon"
+        [color]="data.severity | govColor"
+    />
+    
+    <h2 slot="title">{{ data.title ?? 'Title' }}</h2>
+
+    @if (data && data.innerHTML) {
+    <div [innerHTML]="data.innerHTML"></div>
+    } @else if (data.componentType) {
+    <v-dynamic-component
+        [componentType]="data.componentType"
+        [data]="$any(data.data)"
+    ></v-dynamic-component>
+    }
+
+    <gov-button
+        color="primary"
+        size="m"
+        type="solid"
+        slot="footer"
+        (gov-click)="data.confirmButtonFn ? dialogClick(true) : (visible = false)"
+    >
+        {{ data.confirmButtonText ?? 'Yes'}}
+    </gov-button>
+    
+    <gov-button
+        [ngClass]="!data.showCancelButton ? 'd-none' : ''"
+        color="primary"
+        size="m"
+        type="outlined"
+        slot="footer"
+        [disabled]="!data.showCancelButton"
+        (gov-click)="data.cancelButtonFn ? dialogClick(false) : (visible = false)"
+    >
+        {{ data.cancelButtonText ?? 'No' }}
+    </gov-button>
+</gov-dialog>

package/src/lib/components/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,4 @@
+:host ::ng-deep dialog {
+  max-width: var(--dialog-max-width, 95%); // default 52.5rem
+  max-height: var(--dialog-max-height, 95%); // default 100%
+}