@verisoft/ui-govcz 20.0.1 → 20.1.0

package/src/lib/components/page-header/page-header.component.spec.ts

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

package/src/lib/components/page-header/page-header.component.ts

@@ -0,0 +1,27 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+} from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { PageHeaderCore } from '@verisoft/ui-core';
+
+@Component({
+    selector: 'v-page-header',
+    imports: [
+    GovDesignSystemModule,
+    TranslateModule
+],
+    templateUrl: './page-header.component.html',
+    styleUrl: './page-header.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PageHeaderComponent implements PageHeaderCore {
+  @Input() title = '';
+
+  @Input() subtitle: string | undefined;
+
+  @Input() showBackButton: boolean | undefined;
+}

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

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

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

@@ -0,0 +1,31 @@
+<gov-form-control class="mb-3">
+    @if (label) {
+    <gov-form-label 
+      [slot]="labelSlot"
+      [size]="size | govSize"
+    >
+      {{ label }}
+    </gov-form-label>
+    }
+  <gov-form-group>
+    @if (feedback) {
+    <gov-form-password-power [power]="passwordStrength - 1" />
+    }
+    <gov-form-input
+      [formControl]="formControl"
+      [attr.input-type]="type"
+      [placeholder]="placeholder"
+      [invalid]="ngControl?.errors"
+      (ngModelChange)="valueChange($event)"
+    />
+  </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/password/password.component.spec.ts

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

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

@@ -0,0 +1,83 @@
+
+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 { 
+  BaseFormInputComponent,
+  FieldType,
+  PASSWORD_COMPONENT_TOKEN,
+  PasswordCore,
+  SlotPosition,
+  SlotPositionType,
+  IconPosition,
+  IconPositionType,
+  FieldSize,
+  FieldSizeType,
+  PasswordStrength,
+} from '@verisoft/ui-core';
+import zxcvbn from 'zxcvbn';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+
+@Component({
+    selector: 'v-password',
+    imports: [
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    GovSizePipe,
+    ErrorComponent
+],
+    templateUrl: './password.component.html',
+    styleUrl: './password.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: PASSWORD_COMPONENT_TOKEN,
+            useExisting: PasswordComponent
+        }
+    ]
+})
+
+export class PasswordComponent 
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, PasswordCore 
+{
+  @Input() toggleMask = true;
+  @Input() feedback = false;
+  @Input() labelSlot: SlotPositionType = SlotPosition.top;
+  @Input() requiredStrength: PasswordStrength = PasswordStrength.None;
+  @Input() message!: string;
+  @Input() name! : string;
+  @Input() role! : string;
+  @Input() icon!: string;
+  @Input() iconPos: IconPositionType = IconPosition.right;
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom;
+
+  icons = Icons;
+  passwordStrength: PasswordStrength = PasswordStrength.None;
+  type = FieldType.password;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  valueChange(value: string) {
+    if (!value) {
+      this.passwordStrength = 0;
+      return;
+    }
+
+    const result = zxcvbn(value);
+    this.passwordStrength = result.score;
+
+    if (!this.formControl) {
+      return;
+    }
+
+    if (result.score < this.requiredStrength) {
+      this.formControl.setErrors({passwordLowStrength: true}, {emitEvent: false})
+    }
+  }
+}

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

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

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

@@ -0,0 +1,23 @@
+<gov-form-control>
+  <gov-form-radio-group [formControl]="formControl">
+    @if (items) { @for(item of items; track item) {
+    <gov-form-radio
+      [size]="size | govSize"
+      [value]="item.value"
+      [required]="required"
+      [identifier]="item.id"
+      [name]="radioGroupName"
+      [invalid]="ngControl?.errors"
+      [disabled]="formControl.disabled"
+    >
+      <gov-form-label
+        [size]="size | govSize"
+        slot="label"
+      >
+        {{ label }}
+      </gov-form-label>
+    </gov-form-radio>
+    } }
+  </gov-form-radio-group>
+  <v-validation-message [ngControl]="ngControl"></v-validation-message>
+</gov-form-control>

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

@@ -0,0 +1,61 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  BaseFormInputComponent,
+  FieldSize,
+  FieldSizeType,
+  RADIOBUTTON_COMPONENT_TOKEN,
+  RadiobuttonCore,
+  RadioButtonItem,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+
+@Component({
+    selector: "v-radiobutton",
+    styleUrl: "./radiobutton.component.scss",
+    templateUrl: './radiobutton.component.html',
+    imports: [
+    GovDesignSystemModule,
+    RouterModule,
+    ReactiveFormsModule,
+    GovSizePipe,
+    ErrorComponent
+],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: RADIOBUTTON_COMPONENT_TOKEN,
+            useExisting: RadioButtonComponent,
+        },
+    ]
+})
+
+export class RadioButtonComponent<T>
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, RadiobuttonCore<T>
+{
+  @Input() radioGroupName = Math.random().toString();
+  @Input() items: RadioButtonItem<T>[] = [];
+  @Input() size: FieldSizeType = FieldSize.medium;
+
+  icons = Icons;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

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

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

@@ -0,0 +1,23 @@
+<gov-form-control>
+    <gov-form-group>
+        <gov-form-search color="neutral">
+            <gov-form-input 
+                [placeholder]="placeholder"
+                [size]="size | govSize"
+                slot="input"
+                (gov-input)="setValue($event)"
+            />
+            <gov-button
+                [size]="size | govSize"
+                color="primary"
+                type="solid"
+                slot="button"
+                (gov-click)="search()"
+            >
+                <gov-icon
+                    [name]="icons.search"
+                />
+            </gov-button>
+        </gov-form-search>
+    </gov-form-group>
+</gov-form-control>

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

@@ -0,0 +1,45 @@
+
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { FieldSizeType, FieldSize } from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+
+@Component({
+    selector: 'v-search',
+    imports: [
+    GovDesignSystemModule,
+    GovSizePipe,
+    ReactiveFormsModule
+],
+    templateUrl: './search.component.html',
+    styleUrl: './search.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SearchComponent {
+
+    @Input() placeholder!: string;
+
+    @Input() size: FieldSizeType = FieldSize.medium;
+
+    @Output() searchTerm = new EventEmitter<string>();
+
+    value!: string;
+
+    icons = Icons
+
+    setValue(event: any) {
+        this.value = event.detail.value;
+    }
+
+    search() {
+        this.searchTerm.emit(this.value);
+    }
+}

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

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

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

@@ -0,0 +1,26 @@
+<gov-accordion>
+    <gov-accordion-item 
+        [size]="size | govSize"
+        [identifier]="identifier"
+        [open]="open"
+    >
+        @if (icon) {
+            <gov-icon
+                [name]="icons.chevronDown"
+            />
+        } @if (title) {
+            <h2 slot="label">{{ title | translate }}</h2>
+        } @if (badge) {
+            <gov-badge 
+                inverse="true"
+                size="s"
+                [slot]="badgeSlot"
+            >
+                {{ badge }}
+            </gov-badge>
+        } @if (annotation) {
+            <p slot="annotation">{{ annotation | translate }}</p>
+        }
+        <ng-content></ng-content>
+    </gov-accordion-item>
+</gov-accordion>

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

@@ -0,0 +1,55 @@
+
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Input,
+    NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+    FieldSizeType,
+    FieldSize,
+    SECTION_COMPONENT_TOKEN,
+    SectionCore,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+
+@Component({
+    selector: 'v-section',
+    imports: [
+    GovDesignSystemModule,
+    GovSizePipe,
+    TranslateModule
+],
+    templateUrl: './section.component.html',
+    styleUrl: './section.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: SECTION_COMPONENT_TOKEN,
+            useExisting: SectionComponent,
+        },
+    ],
+    schemas: [
+        NO_ERRORS_SCHEMA
+    ]
+})
+export class SectionComponent
+    implements SectionCore
+{
+    @Input() title!: string;
+    @Input() badge!: string;
+    @Input() showContent = false;
+    @Input() backgroundColor!: string;
+    @Input() annotation!: string;
+    @Input() identifier!: string;
+    @Input() icon!: string;
+    @Input() iconType!: string;
+    @Input() size: FieldSizeType = FieldSize.medium;
+    @Input() badgeSlot: 'prefix' | 'sufix' = 'sufix';
+    @Input() open = false;
+
+    icons = Icons;
+}

package/src/lib/components/side-menu/index.ts

@@ -0,0 +1,2 @@
+export * from './side-menu.component';
+export * from './side-menu.module';

package/src/lib/components/side-menu/side-menu.component.html

@@ -0,0 +1,22 @@
+<div class="v-side-menu">
+    <div class="gov-category-list__col gov-category-list__categories">
+        <div class="gov-category-list__col-inner">
+            <ul class="main-nav  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">
+                    <a class="gov-category-list__nav-link p-2 d-flex align-items-center" [routerLink]="child.url"
+                        routerLinkActive="is-active" title="{{child.label}}">
+                        <p class="gov-text--body-s">{{child.label}}
+                            @if (child.children) {
+                            <gov-icon [name]="icons.chevronDown" />
+                            }
+                        </p>
+                    </a>
+                </li>
+                }
+                }
+            </ul>
+        </div>
+    </div>
+</div>

package/src/lib/components/side-menu/side-menu.component.scss

@@ -0,0 +1,17 @@
+.v-side-menu {
+    a {
+        &:hover {
+            background-color: var(--background-primary-subtle);
+            text-decoration: underline;
+        }
+
+        &.is-active {
+            background-color: var(--background-primary);
+            color: var(--text-white);
+
+            & > * {
+                color: var(--text-white);
+            }
+        }
+    }
+}

package/src/lib/components/side-menu/side-menu.component.ts

@@ -0,0 +1,42 @@
+
+import { Component, EventEmitter, inject, Input, Output, ViewEncapsulation } 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',
+    imports: [RouterModule, GovDesignSystemModule],
+    templateUrl: './side-menu.component.html',
+    styleUrl: './side-menu.component.scss',
+    providers: [
+        {
+            provide: SIDE_MENU_COMPONENT_TOKEN,
+            useExisting: SideMenuComponent,
+        },
+    ],
+    encapsulation: ViewEncapsulation.None,
+})
+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,56 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import {
+  MENU_TOKEN,
+  MenuItem,
+  SIDE_MENU_COMPONENT_TOKEN,
+  SideMenuModuleConfig,
+  SideMenuProviderService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { SideMenuComponent } from './side-menu.component';
+
+@NgModule({
+  providers: [
+    SideMenuProviderService,
+    {
+      provide: SIDE_MENU_COMPONENT_TOKEN,
+      useExisting: SideMenuComponent,
+    }
+  ],
+})
+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/snackbar/index.ts

@@ -0,0 +1,2 @@
+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,
+    });
+  }
+}