@verisoft/ui-govcz 18.0.0 → 18.3.1

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

@@ -0,0 +1,91 @@
+import { AsyncPipe, CommonModule } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  inject,
+  Input,
+  TemplateRef,
+} from "@angular/core";
+import { Router, RouterModule } from "@angular/router";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { HasPermissionDirective } from '@verisoft/security-core';
+import {
+  HEADER_COMPONENT_TOKEN,
+  HeaderCore,
+  MenuItem,
+  SideMenuService,
+} from "@verisoft/ui-core";
+import { Icons } from "../../icons";
+
+@Component({
+  selector: "v-header",
+  standalone: true,
+  styleUrl: "./header.component.scss",
+  templateUrl: './header.component.html',
+  imports: [
+    CommonModule,
+    GovDesignSystemModule,
+    AsyncPipe,
+    RouterModule,
+    HasPermissionDirective,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: HEADER_COMPONENT_TOKEN,
+      useExisting: HeaderComponent
+    }
+  ],
+})
+export class HeaderComponent
+  implements HeaderCore {
+
+  @Input() title!: string;
+
+  @Input() userName!: string;
+
+  @Input() logoUrl!: string;
+
+  @Input() userRole!: any;
+
+  @Input() menuRef!: HTMLDivElement;
+
+  @Input() items: MenuItem[] = [];
+
+  @ContentChild('action', { static: false })
+  actionTemplate!: TemplateRef<{ $implicit: any }>;
+
+  protected icons = Icons;
+  protected menuVisible = false;
+  private openedIndexes: number[] = [];
+
+  protected readonly tabsService = inject(SideMenuService);
+  private readonly router = inject(Router);
+
+  toggleMenu() {
+    this.menuVisible = !this.menuVisible;
+  }
+
+  protected canRedirect(url?: string, canRedirect?: boolean) {
+    if (url && canRedirect) {
+      this.router.navigateByUrl(url);
+    }
+  }
+
+  protected showOrHide(index: number, children?: number): void {
+    if (children === 0) {
+      return;
+    }
+
+    if (!this.openedIndexes.includes(index)) {
+      this.openedIndexes = [...[], index];
+    } else if (this.openedIndexes.includes(index)) {
+      this.openedIndexes = this.openedIndexes.filter(x => x !== index);
+    }
+  }
+
+  protected canBeShown(index: number) {
+    return this.openedIndexes.includes(index);
+  }
+}

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

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

package/src/lib/components/index.ts

@@ -1,11 +1,33 @@
-export * from './gov-button';
-export * from './gov-checkbox';
-export * from './gov-breadcrumb';
-export * from './gov-header';
-export * from './gov-checkbox';
-export * from './gov-password';
-export * from './gov-radiobutton';
-export * from './gov-switch';
-export * from './gov-multiselect';
-export * from './gov-text-field';
-export * from './gov-loader';
+export * from './button';
+export * from './breadcrumb';
+export * from './calendar';
+export * from './checkbox';
+export * from './confirm-dialog';
+export * from './dropdown';
+export * from './header';
+export * from './checkbox';
+export * from './password';
+export * from './shared-components';
+export * from './radiobutton';
+export * from './switch';
+export * from './multiselect';
+export * from './search';
+export * from './section';
+export * from './side-menu';
+export * from './snackbar';
+export * from './table';
+export * from './textarea';
+export * from './textfield';
+export * from './tooltip';
+export * from './loader';
+export * from './tristatecheckbox';
+export * from './form-field';
+export * from './input-group';
+export * from './number-input';
+export * from './tooltip';
+export * from './snackbar';
+export * from './section';
+export * from './page-header';
+export * from './section'
+export * from './stepper';
+export * from './tab-view';

package/src/lib/components/input-group/index.ts

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

package/src/lib/components/input-group/input-group.component.html

@@ -0,0 +1,41 @@
+<gov-form-control>
+    @if (label) {
+    <gov-form-label 
+        [slot]="labelSlot"
+        [size]="size | govSize"
+    >
+        {{ label }}
+    </gov-form-label>
+    }
+        @if(prefix) {
+            <gov-icon
+                [name]="name"
+            />
+        }
+        <gov-form-input 
+            input-type="input-type"
+            [formControl]="formControl"
+            [minlength]="minlength" 
+            [maxlength]="maxlength" 
+            [size]='size | govSize'  
+            [name]='name' 
+            [role]='role'
+            [required]="required"
+            [readonly]="readonly"
+            [invalid]="ngControl?.errors ? true : false"
+        />
+        @if(sufix) {
+            <gov-icon
+                [name]="name"
+            />
+        }
+        <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/input-group/input-group.component.ts

@@ -0,0 +1,77 @@
+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 {
+  BaseFormInputComponent,
+  INPUT_GROUP_COMPONENT_TOKEN,
+  InputGroupCore,
+  InputGroupItem,
+  FieldSizeType,
+  FieldSize,
+  IconPositionType,
+  IconPosition,
+  SlotPositionType,
+  SlotPosition,
+  FieldTypeType,
+  FieldType,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+
+@Component({
+  selector: 'v-input-group',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    GovSizePipe,
+    ErrorComponent,
+  ],
+  templateUrl: './input-group.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: INPUT_GROUP_COMPONENT_TOKEN,
+      useExisting: InputGroupComponent,
+    },
+  ],
+})
+export class InputGroupComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, InputGroupCore
+{
+  @Input() floatLabel!: boolean;
+  @Input() type: FieldTypeType = FieldType.text;
+  @Input() minlength = 0;
+  @Input() items!: InputGroupItem[];
+  @Input() prefix!: string;
+  @Input() sufix!: string;
+  @Input() maxlength = 524288;
+  @Input() name! : string;
+  @Input() role! : string;
+  @Input() message! : string;
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
+  @Input() icon!: string;
+  @Input() iconPos: IconPositionType = IconPosition.right;
+  @Input() labelSlot: SlotPositionType = SlotPosition.top;
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom;
+
+  icons = Icons;
+    
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

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

package/src/lib/components/{gov-loader/gov-loader.component.spec.ts → loader/loader.component.spec.ts}

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { LoaderComponent } from './gov-loader.component';
+import { LoaderComponent } from './loader.component';
 
 describe('LoaderComponent', () => {
   let component: LoaderComponent;

package/src/lib/components/{gov-loader/gov-loader.component.ts → loader/loader.component.ts}

@@ -6,8 +6,8 @@ import {
     LoaderCore,
     FieldSize,
     FieldSizeType,
-    GovSizePipe
 } from '@verisoft/ui-core';
+import { GovSizePipe } from '../../pipes';
 
 @Component({
   selector: 'v-loader',
@@ -15,8 +15,8 @@ import {
   imports: [
     CommonModule, GovDesignSystemModule, GovSizePipe
   ],
-  templateUrl: './gov-loader.component.html',
-  styleUrl: './gov-loader.component.scss',
+  templateUrl: './loader.component.html',
+  styleUrl: './loader.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { 

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

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

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

@@ -0,0 +1,21 @@
+<gov-form-control>
+  <gov-form-label 
+    [slot]="label"
+    [size]="size | govSize"
+  >
+    {{ label }}
+  </gov-form-label>
+  <gov-form-multi-select
+    [size]="size | govSize"
+    [formControl]="formControl"
+    [required]="required"
+    [invalid]="ngControl && ngControl.errors"
+    [options]="options | govMultiselectOptions : optionLabel : optionValue"
+    [placeholder]="placeholder ?? ''"
+    (gov-focus)="onDropdownShow()"
+    (gov-remove)="onDropdownClear()"
+    (gov-change)="selectionChange($event)"
+    (lazyLoadEvent)="onLazyLoad($any($event))"
+  />
+  <v-validation-message [ngControl]="ngControl"></v-validation-message>
+</gov-form-control>

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

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

package/src/lib/components/{gov-multiselect/gov-multiselect.component.ts → multiselect/multiselect.component.ts}

@@ -10,7 +10,7 @@ import {
   Self,
   SimpleChanges,
   inject,
-  ChangeDetectorRef
+  ChangeDetectorRef,
 } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -24,15 +24,16 @@ import {
 } from '@verisoft/core';
 import {
   BaseFormInputComponent,
-  ErrorPipe,
   MULTISELECT_COMPONENT_TOKEN,
   MultiselectCore,
-  GovSizePipe,
   FieldSize,
   FieldSizeType,
+  SlotPosition,
   SlotPositionType,
-  SlotPosition
 } from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovMultiselectOptionsPipe, GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
 
 @Component({
   selector: 'v-multiselect',
@@ -41,11 +42,12 @@ import {
     CommonModule,
     ReactiveFormsModule,
     GovDesignSystemModule,
-    ErrorPipe,
     GovSizePipe,
+    GovMultiselectOptionsPipe,
+    ErrorComponent,
   ],
-  templateUrl: './gov-multiselect.component.html',
-  styleUrl: './gov-multiselect.component.scss',
+  templateUrl: './multiselect.component.html',
+  styleUrl: './multiselect.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
@@ -61,15 +63,15 @@ export class MultiselectComponent<T>
   constructor(@Optional() @Self() ngControl: NgControl) {
     super(ngControl);
   }
-  
-  @Input() options: any[] = [];
-  @Input() optionLabel!: string;
-  @Input() optionValue!: string;
+
+  @Input() options: T[] | undefined = [];
+  @Input() optionLabel!: string | undefined;
+  @Input() optionValue!: string | undefined;
   @Input() dropdownIcon: string | undefined;
   @Input() floatLabel: string | undefined;
   @Input() editable = true;
   @Input() display!: 'flex' | 'block';
-  @Input() errorSlot: SlotPositionType = SlotPosition.top
+  @Input() errorSlot: SlotPositionType = SlotPosition.bottom;
   @Input() lazy!: boolean;
   @Input() filter!: boolean;
   @Input() loading = false;
@@ -80,7 +82,8 @@ export class MultiselectComponent<T>
   @Output() cleared = new EventEmitter<any>();
   @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
   @Output() filtered = new EventEmitter<FilterEvent>();
-  @Output() lazyLoadEvent = new EventEmitter<LazyLoadEvent>();
+
+  icons = Icons;
 
   lazyLoadOptions: LazyLoadEvent = {
     limit: 50,
@@ -96,9 +99,9 @@ export class MultiselectComponent<T>
   }
 
   onLazyLoad(event: any): void {
-    if (this.options.length - event.last <= 0) {
+    if (this.options && this.options.length - event.last <= 0) {
       this.lazyLoadOptions.offset = event.last;
-      this.lazyLoadEvent.emit(this.lazyLoadOptions);
+      this.lazyLoad.emit(this.lazyLoadOptions);
     }
   }
 
@@ -113,4 +116,4 @@ export class MultiselectComponent<T>
   onDropdownClear(): void {
     this.cleared.emit();
   }
-}
+}

package/src/lib/components/number-input/index.ts

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

package/src/lib/components/number-input/number-input.component.html

@@ -0,0 +1,48 @@
+<gov-form-control>
+    @if (label) {
+    <gov-form-label 
+        [slot]="labelSlot"
+        [size]="size | govSize"
+    >
+        {{ label }}
+    </gov-form-label>
+    }
+    <gov-form-group>
+        <gov-form-input 
+            [attr.input-type]="type"
+            [formControl]="formControl"
+            [minlength]="minlength" 
+            [maxlength]="maxlength" 
+            [size]='size | govSize'  
+            [name]='name' 
+            [role]='role'
+            [required]="required"
+            [readonly]="readonly"
+            [invalid]="ngControl?.errors ? true : false"
+        >
+            @if (icon) {
+            <gov-icon
+                [name]="icon"
+                [slot]="iconPos === 'left' ? 'icon-start' : 'icon-end'"
+            />
+            } @if (prefix) {
+            <p slot="prefix">
+                {{ prefix }}
+            </p>
+            } @if (sufix) {
+            <p slot="sufix">
+                {{ sufix }}
+            </p>
+            }
+        </gov-form-input>
+        <v-validation-message [ngControl]="ngControl"></v-validation-message>
+        @if (message) {
+        <gov-form-message 
+            [slot]="messageSlot" 
+            color="neutral"
+            >
+            {{ message }}
+        </gov-form-message>
+        }
+    </gov-form-group>
+</gov-form-control>

package/src/lib/components/number-input/number-input.component.ts

@@ -0,0 +1,82 @@
+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 {
+  NumberInputCore,
+  NUMBER_INPUT_COMPONENT_TOKEN,
+  FieldType,
+  BaseFormInputComponent,
+  FieldSizeType,
+  FieldSize,
+  IconPositionType,
+  IconPosition,
+  SlotPositionType,
+  SlotPosition,
+  FieldTypeType,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+@Component({
+  selector: 'v-number-input',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    GovSizePipe,
+    ErrorComponent,
+  ],
+  templateUrl: './number-input.component.html',
+  styleUrl: './number-input.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NUMBER_INPUT_COMPONENT_TOKEN,
+      useExisting: NumberInputComponent,
+    },
+  ],
+})
+
+export class NumberInputComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, NumberInputCore
+{  
+  @Input() mode!: string;
+  @Input() currency!: string;
+  @Input() min!: number;
+  @Input() max!: number;
+  @Input() step = 1;
+  @Input() floatLabel!: boolean;
+  @Input() type: FieldTypeType = FieldType.number;
+  @Input() minlength = 0;
+  @Input() maxlength = 524288;
+  @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;
+
+  icons = Icons;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

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

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

@@ -0,0 +1,3 @@
+<div class="d-flex gap-3 align-items-center">
+  <h2>{{ title | translate }}</h2>
+</div>

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

@@ -0,0 +1,11 @@
+h2 {
+  font-size: 1.5rem;
+  color: var(--color-neutral-700);
+  margin: 0;
+}
+
+.d-flex {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}

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,29 @@
+import { CommonModule } from '@angular/common';
+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',
+  standalone: true,
+  imports: [
+    CommonModule,
+    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>