@verisoft/ui-govcz 18.0.0 → 18.3.0

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

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

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

@@ -7,9 +7,18 @@ import {
   FieldType,
   PASSWORD_COMPONENT_TOKEN,
   PasswordCore,
-  ErrorPipe
+  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',
@@ -18,10 +27,11 @@ import zxcvbn from 'zxcvbn';
     CommonModule,
     ReactiveFormsModule,
     GovDesignSystemModule,
-    ErrorPipe
+    GovSizePipe,
+    ErrorComponent,
   ],
-  templateUrl: './gov-password.component.html',
-  styleUrl: './gov-password.component.scss',
+  templateUrl: './password.component.html',
+  styleUrl: './password.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
@@ -37,9 +47,18 @@ export class PasswordComponent
 {
   @Input() toggleMask = true;
   @Input() feedback = false;
-  @Input() labelSlot: 'top' | 'bottom' = 'top';
+  @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;
 
-  passwordStrength: 0 | 1 | 2 | 3 | 4 = 0;
+  icons = Icons;
+  passwordStrength: PasswordStrength = PasswordStrength.None;
   type = FieldType.password;
 
   constructor(@Optional() @Self() ngControl: NgControl) {
@@ -54,5 +73,13 @@ export class PasswordComponent
 
     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/{gov-radiobutton/gov-radiobutton.component.html → radiobutton/radiobutton.component.html}

@@ -1,25 +1,23 @@
-<h6>{{ label }}</h6>
 <gov-form-control>
-  @if (ngControl?.errors) {
-  <gov-form-message [slot]="errorSlot" color="error">
-    {{ ngControl?.errors | error }}
-    <gov-icon type="components" name="exclamation-triangle-fill" slot="icon" />
-  </gov-form-message>
-  }
   <gov-form-radio-group [formControl]="formControl">
     @if (items) { @for(item of items; track item) {
     <gov-form-radio
-      [size]="size"
+      [size]="size | govSize"
       [value]="item.value"
       [required]="required"
       [identifier]="item.id"
       [name]="radioGroupName"
       [invalid]="ngControl?.errors"
+      [disabled]="formControl.disabled"
     >
-      <gov-form-label [size]="size" slot="label">
-        {{ item.value }}
+      <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/{gov-radiobutton/gov-radiobutton.component.ts → radiobutton/radiobutton.component.ts}

@@ -15,21 +15,23 @@ import { RouterModule } from '@angular/router';
 import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
 import {
   BaseFormInputComponent,
-  ErrorPipe,
+  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",
   standalone: true,
-  styleUrls: [
-    "./gov-radiobutton.component.scss"
-  ],
-  templateUrl: './gov-radiobutton.component.html',
+  styleUrl: "./radiobutton.component.scss",
+  templateUrl: './radiobutton.component.html',
   imports: [
-    CommonModule, GovDesignSystemModule, RouterModule, ReactiveFormsModule, ErrorPipe
+    CommonModule, GovDesignSystemModule, RouterModule, ReactiveFormsModule, GovSizePipe, ErrorComponent
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
@@ -45,12 +47,10 @@ export class RadioButtonComponent<T>
   implements ControlValueAccessor, RadiobuttonCore<T>
 {
   @Input() radioGroupName = Math.random().toString();
-
   @Input() items: RadioButtonItem<T>[] = [];
+  @Input() size: FieldSizeType = FieldSize.medium;
 
-  @Input() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';
-
-  @Input() errorSlot: 'top' | 'bottom' = 'top';
+  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,47 @@
+import { CommonModule } from '@angular/common';
+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',
+    standalone: true,
+    imports: [
+    CommonModule,
+    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,57 @@
+import { CommonModule } from '@angular/common';
+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',
+    standalone: true,
+    imports: [
+        CommonModule,
+        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/shared-components/action-button-group/action-button-group.component.html

@@ -0,0 +1,27 @@
+<div
+  class="v-action-button-group align-items-center justify-content-center justify-content-md-end"
+>
+  <div class="v-action-button-group__actions d-flex gap-2">
+    @for (action of visibleActions; track action) {
+    <v-action-button
+      [disabled]="action.disabled"
+      [icon]="action.icon"
+      [id]="action.id"
+      [outlined]="action.outlined"
+      [raised]="action.raised"
+      [toolTip]="action.toolTip || action.label"
+      [severity]="action.severity"
+      [size]="action.size"
+      (click)="fireClick(action, $event)"
+    ></v-action-button>
+    } @if (actions.length > visibleActions.length) {
+    <v-button
+      (click)="menu.toggle($event)"
+      [label]="label"
+      [iconPos]="menuIconPos"
+      [icon]="menuIcon"
+    />
+    }
+  </div>
+</div>
+<p-menu #menu [model]="menuItems" [popup]="true" appendTo="body" />

package/src/lib/components/shared-components/action-button-group/action-button-group.component.spec.ts

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

package/src/lib/components/shared-components/action-button-group/action-button-group.component.ts

@@ -0,0 +1,114 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+} from '@angular/core';
+import {
+  ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+  ActionButton,
+  ActionButtonGroupCore,
+  IconPositionType,
+  queryListChanged,
+  ScreenSizeService,
+  UnsubscribeComponent,
+  MenuItem,
+} from '@verisoft/ui-core';
+import { MenuModule } from 'primeng/menu';
+import {
+  combineLatestWith,
+  takeUntil,
+} from 'rxjs';
+import { Icons } from '../../../icons';
+import { ButtonComponent } from '../../button';
+import { ActionButtonComponent } from './components/action-button/action-button.component';
+
+@Component({
+  selector: 'v-action-button-group',
+  standalone: true,
+  imports: [MenuModule, ButtonComponent, ActionButtonComponent],
+  templateUrl: './action-button-group.component.html',
+  styleUrl: './action-button-group.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+      useExisting: ActionButtonGroupComponent,
+    },
+  ],
+})
+export class ActionButtonGroupComponent
+  extends UnsubscribeComponent
+  implements AfterContentInit, ActionButtonGroupCore
+{
+  @ContentChildren(ActionButtonComponent)
+  actions!: QueryList<ActionButtonComponent>;
+
+  @Input() maxItems = 3;
+
+  @Input() maxItemsMobile = 0;
+
+  @Input() items: ActionButton[] = [];
+
+  @Input() menuIconPos: IconPositionType = 'right';
+
+  @Input() menuIcon = Icons.action;
+
+  @Input() label?: string;
+
+  @Input() icon?: string;
+
+  icons = Icons;
+  allItems: ActionButton[] = [];
+  visibleActions: ActionButton[] = [];
+  menuItems: MenuItem[] = [];
+
+  constructor(
+    private readonly changeDetectorRef: ChangeDetectorRef,
+    readonly screenSizeService: ScreenSizeService
+  ) {
+    super();
+  }
+
+  ngAfterContentInit(): void {
+    this.subscribeItemChange();
+  }
+
+  fireClick(item: ActionButton, event: MouseEvent) {
+    event.stopPropagation();
+    item.click.emit();
+  }
+
+  private subscribeItemChange(): void {
+    const screenResize$ = this.screenSizeService.isMobileBlock;
+
+    const actions$ = queryListChanged(this.actions);
+
+    screenResize$
+      .pipe(takeUntil(this.destroyed$), combineLatestWith(actions$))
+      .subscribe(([isMobile, actions]) => {
+        this.computeItems(actions, isMobile);
+      });
+  }
+
+  private computeItems(actions: ActionButton[], isMobile: boolean) {
+    const allItems = [...(this.items ?? []), ...actions];
+    const maxItems = isMobile ? this.maxItemsMobile : this.maxItems;
+    this.visibleActions = allItems.slice(0, maxItems);
+    this.menuItems = allItems.slice(maxItems).map(this.convertToMenuItem);
+    this.changeDetectorRef.detectChanges();
+  }
+
+  private convertToMenuItem(item: ActionButton): MenuItem {
+    return {
+      label: item.label,
+      icon: item.icon,
+      command: () => {
+        item.click.emit();
+      },
+    };
+  }
+}

package/src/lib/components/shared-components/action-button-group/components/action-button/action-button.component.html

@@ -0,0 +1,11 @@
+<v-button
+  [label]="label"
+  [disabled]="disabled"
+  [icon]="icon"
+  [pTooltip]="toolTip"
+  [outlined]="outlined"
+  tooltipPosition="bottom"
+  [size]="size"
+  [severity]="severity"
+  (click)="handleClick($event)"
+></v-button>

package/src/lib/components/shared-components/action-button-group/components/action-button/action-button.component.spec.ts

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

package/src/lib/components/shared-components/action-button-group/components/action-button/action-button.component.ts

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+  ActionButton,
+  ActionButtonGroupCore,
+  ControlSeverityType,
+  FieldSizeType,
+} from '@verisoft/ui-core';
+import { TooltipModule } from 'primeng/tooltip';
+import { Observable, Subject } from 'rxjs';
+import { Icons } from '../../../../../icons';
+import { ButtonComponent } from '../../../../button';
+
+@Component({
+  selector: 'v-action-button',
+  standalone: true,
+  imports: [ButtonComponent, TooltipModule],
+  templateUrl: './action-button.component.html',
+  styleUrl: './action-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ActionButtonComponent implements ActionButton, OnChanges {
+  @Input() disabled = false;
+  @Input() toolTip?: string;
+  @Input() id?: string;
+  @Input() icon?: string;
+  @Input() outlined = false;
+  @Input() raised = false;
+  @Input() severity?: ControlSeverityType;
+  @Input() label?: string;
+  @Input() size?: FieldSizeType;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() click = new EventEmitter<MouseEvent>();
+
+  icons = Icons
+
+  private propertyChangeSubject = new Subject();
+
+  propertyChanged: Observable<unknown> =
+    this.propertyChangeSubject.asObservable();
+
+  buttonGroup: ActionButtonGroupCore | null = inject<ActionButtonGroupCore>(
+    ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+    {
+      optional: true,
+    }
+  );
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const isValueChange = Object.keys(changes).some(
+      (x) => !changes[x].firstChange
+    );
+    if (isValueChange) {
+      this.propertyChangeSubject.next(null);
+    }
+  }
+
+  handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.click.emit(event);
+  }
+}

package/src/lib/components/shared-components/action-button-group/index.ts

@@ -0,0 +1,2 @@
+export * from './action-button-group.component';
+export * from './components/action-button/action-button.component';