@verisoft/ui-govcz 20.0.1 → 20.1.0

package/.eslintrc.json

@@ -0,0 +1,60 @@
+{
+  "extends": ["../../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "v",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "v",
+            "style": "kebab-case"
+          }
+        ],
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "primeng",
+                "message": "Import PrimeNG není povolen v @verisoft/ui-govcz."
+              }
+            ],
+            "patterns": ["primeng/*", "@verisoft/ui-primeng"]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"]
+          }
+        ]
+      }
+    }
+  ]
+}

package/assets/i18n/cs.json

@@ -5,6 +5,8 @@
         "PATTERN": "Input neodpovídá vzoru!",
         "MIN_LENGTH": "Hodnota nemá dostatek znaků!",
         "MAX_LENGTH": "Hodnota přesahuje maximum znaků!"
+    }, "FILTER": {
+        "RECORDS": "{{count}} záznamů"
     }, "TABLES": {
         "NO_DATA": "Žádná data k zobrazení",
         "LOADING": "Načítání dat...",

package/assets/i18n/en.json

@@ -5,6 +5,8 @@
         "PATTERN": "Input doesn't match the pattern",
         "MIN_LENGTH": "Value doesn't have enough characters",
         "MAX_LENGTH": "Value exceeds the maximum amount of characters"
+    }, "FILTER": {
+        "RECORDS": "{{count}} records"
     }, "TABLES": {
         "EMPTY": "No data to display",
         "PAGINATION": {

package/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'ui-govcz',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/src/libs/ui-govcz',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/src/libs/ui-govcz",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "./src/sass/",
+      "output": "/styles/sass"
+    },
+    {
+      "glob": "**/*",
+      "input": "./styles/dist/",
+      "output": "/styles/dist"
+    },
+    "./assets/",
+    "README.md"
+  ],
+  "allowedNonPeerDependencies": [
+    "@gov-design-system-ce/angular",
+    "@gov-design-system-ce/components",
+    "@gov-design-system-ce/styles",
+    "uuid",
+    "zxcvbn"
+  ]
+}

package/package.json

@@ -1,35 +1,25 @@
 {
   "name": "@verisoft/ui-govcz",
-  "version": "20.0.1",
+  "version": "20.1.0",
   "peerDependencies": {
-    "@verisoft/security-core": "~20.0.0",
-    "@verisoft/core": "~20.0.0",
-    "@verisoft/ui-core": "~20.0.0",
+    "@verisoft/security-core": "~20.1.0",
+    "@verisoft/core": "~20.1.0",
+    "@verisoft/ui-core": "~20.1.0",
     "@angular/core": "~20.2.0",
     "@angular/common": "~20.2.0",
     "@angular/forms": "~20.2.0",
     "@angular/router": "~20.2.0",
     "@angular/cdk": "~20.2.0",
     "@ngx-translate/core": "^17.0.0",
+    "bootstrap-icons": "^1.11.0",
     "rxjs": "~7.8.0"
   },
   "dependencies": {
     "@gov-design-system-ce/angular": "^1.3.1",
     "@gov-design-system-ce/components": "^4.2.6",
+    "@gov-design-system-ce/styles": "^4.2.6",
     "uuid": "^11.0.0",
-    "zxcvbn": "^4.4.2",
-    "tslib": "^2.3.0"
+    "zxcvbn": "^4.4.2"
   },
-  "sideEffects": false,
-  "module": "fesm2022/verisoft-ui-govcz.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/verisoft-ui-govcz.mjs"
-    }
-  }
-}
+  "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", "compile-sass", "^build"],
+      "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"
+      }
+    },
+    "compile-sass": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "sass src/libs/ui-govcz/src/sass/main.scss src/libs/ui-govcz/styles/dist/main.css --style=compressed --source-map --load-path=node_modules"
+      }
+    }
+  }
+}

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,25 @@
+<div class="gov-breadcrums mt-3 mb-3">
+  <gov-breadcrumbs accessible-label="gov-breadcrums">
+    <ul>
+      @if (useHomeRoute) {
+        <li>
+          <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,28 @@
+
+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',
+    imports: [
+    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/src/lib/components/breadcrumb/index.ts

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

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

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

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

@@ -0,0 +1,21 @@
+:host {
+    display: inline-block;
+}
+
+.v-button {
+    display: inline-block;
+}
+
+:host.v-button--expanded {
+    display: block;
+    width: 100%;
+}
+
+.v-button--expanded {
+    display: block;
+    width: 100%;
+}
+
+.v-button--rounded {
+    border-radius: 5rem;
+}

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

@@ -0,0 +1,77 @@
+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,
+    IconLibraryType,
+} from "@verisoft/ui-core";
+import { GovColorPipe, GovSizePipe } from "../../pipes";
+import { IconComponent } from "../icon";
+
+@Component({
+    selector: "v-button",
+    styleUrl: "./button.component.scss",
+    templateUrl: './button.component.html',
+    imports: [
+        GovDesignSystemModule, RouterModule, GovSizePipe, GovColorPipe, TranslateModule, IconComponent
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[class.v-button--expanded]': 'expanded'
+    },
+    providers: [
+        {
+            provide: BUTTON_COMPONENT_TOKEN,
+            useExisting: ButtonComponent,
+        }
+    ]
+})
+export class ButtonComponent
+    implements ButtonCore
+{
+    @Input() label: string | undefined;
+    @Input() icon: string | undefined;
+    @Input() library: IconLibraryType = 'native';
+    @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,77 @@
+
+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',
+    imports: [
+    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,61 @@
+
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Optional,
+    Self,
+    Input,
+    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",
+    styleUrl: "./checkbox.component.scss",
+    templateUrl: './checkbox.component.html',
+    imports: [
+    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;
+    readonly indeterminate = input(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';