@verisoft/ui-govcz 0.0.1 → 18.3.0

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/{gov-checkbox/gov-checkbox.component.ts → checkbox/checkbox.component.ts}

@@ -1,54 +1,62 @@
 import { CommonModule } from "@angular/common";
-import { 
+import {
     ChangeDetectionStrategy,
     Component,
     Optional,
     Self,
-    ViewEncapsulation,
-    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 { 
-    BaseFormInputComponent, 
-    CHECKBOX_COMPONENT_TOKEN, 
-    CheckboxCore, 
-    ErrorPipe
+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,
-    styleUrls: [
-        "./gov-checkbox.component.scss"
-    ],
-    templateUrl: './gov-checkbox.component.html',
+    styleUrl: "./checkbox.component.scss",
+    templateUrl: './checkbox.component.html',
     imports: [
-        CommonModule, GovDesignSystemModule, RouterModule, ReactiveFormsModule, ErrorPipe
+        CommonModule,
+        GovDesignSystemModule,
+        RouterModule,
+        ReactiveFormsModule,
+        GovSizePipe,
+        ErrorComponent,
+        TranslateModule
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
     providers: [{
         provide: CHECKBOX_COMPONENT_TOKEN,
         useExisting: CheckboxComponent,
     }],
 })
 export class CheckboxComponent
-    extends BaseFormInputComponent
-    implements ControlValueAccessor, CheckboxCore
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, CheckboxCore
 {
-    @Input() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';
+    @Input() size: FieldSizeType = FieldSize.medium;
     @Input() value!: string;
     @Input() name!: string;
     @Input() indeterminate = false;
     @Input() noLabel = false;
-    @Input() errorSlot: 'top' | 'bottom' = 'top';
+    
+    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%
+}

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

@@ -0,0 +1,80 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  CONFIRM_DIALOG_COMPONENT_TOKEN,
+  ConfirmDialogCore,
+  DialogData,
+  DialogService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { takeUntil } from 'rxjs';
+import { GovColorPipe } from '../../pipes';
+import { DynamicComponent } from '../shared-components';
+
+@Component({
+  selector: 'v-confirm-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    GovDesignSystemModule,
+    GovColorPipe,
+    DynamicComponent,
+  ],
+  templateUrl: './confirm-dialog.component.html',
+  styleUrl: './confirm-dialog.component.scss',
+  providers: [
+    {
+      provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
+      useExisting: ConfirmDialogComponent,
+    },
+  ],
+})
+export class ConfirmDialogComponent
+  extends UnsubscribeComponent
+  implements OnInit, ConfirmDialogCore
+{
+  constructor(
+    private readonly dialogService: DialogService,
+    private readonly cdr: ChangeDetectorRef
+  ) {
+    super();
+  }
+
+  visible = false;
+  protected closable = false;
+  data: DialogData = { severity: 'primary', headerIcon: 'info-circle' };
+
+  ngOnInit(): void {
+    this.dialogService.showEvent
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((x: DialogData) => {
+        this.data = x;
+        this.visible = true;
+        this.cdr.detectChanges();
+      });
+
+    this.dialogService.closeEvent
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe(() => {
+        this.data = {};
+        this.visible = false;
+        this.cdr.detectChanges();
+      })
+  }
+
+  protected dialogClick(confirm: boolean) {
+    const { confirmButtonFn, cancelButtonFn } = this.data;
+
+    if (confirm && confirmButtonFn) {
+      confirmButtonFn();
+    }
+
+    if (!confirm && cancelButtonFn) {
+      cancelButtonFn();
+    }
+
+    this.visible = false;
+    this.cdr.detectChanges();
+  }
+}

package/src/lib/components/confirm-dialog/index.ts

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

package/src/lib/components/dropdown/dropdown-item.component.html

@@ -0,0 +1,8 @@
+<li
+    role="option"
+    class="v-dropdown__item"
+    [attr.aria-selected]="item?.selected"
+    [class.is-active]="item?.selected"
+>
+    {{item?.label}}
+</li>

package/src/lib/components/dropdown/dropdown-item.component.ts

@@ -0,0 +1,18 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DropDownItemData } from './dropdown.model';
+
+@Component({
+  selector: 'v-dropdown-item',
+  standalone: true,
+  templateUrl: './dropdown-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class DropdownItemComponent<T> {
+  @Input() item : DropDownItemData<T> | undefined;
+}

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

@@ -0,0 +1,90 @@
+<div
+  class="v-dropdown mb-3"
+  (keydown)="onKeyDown($event)"
+>
+  <gov-form-control [disabled]="this.ngControl?.disabled">
+    <gov-form-label
+      [slot]="label"
+      [ngClass]="labelClasses"
+    >
+      <span [ngClass]="labelClasses">
+        {{ label ?? '' | translate }}
+        @if (tooltip) {
+        <v-tooltip [message]="tooltip | translate" />
+        }
+      </span>
+    </gov-form-label>
+    <div
+      class="gov-form-input"
+      [ngStyle]="forceMinWidth ? {'min-width': '16rem'} : {}"
+      [ngClass]="inputClasses"
+    >
+      <div
+        class="element d-flex gov-form-input-child"
+        [ngClass]="labelClasses"
+        (click)="toggleDropdown()"
+      >
+        <div class="v-dropdown__value flex-grow-1 me-1">{{ selectedItem?.label ?? placeholder }}</div>
+        @if (clearable && ngControl?.enabled && selectedItem !== undefined && selectedItem !== null) {
+          <gov-icon
+            [name]="icons.cross"
+            size="m"
+            class="v-dropdown__clear me-1"
+            color="error"
+            (click)="clearSelection($event)"
+          />
+        }
+        @if (loading) {
+        <div class="v-dropdown__loader">
+          <gov-icon [name]="icons.loader" />
+        </div>
+        }
+        <div class="v-dropdown__trigger">
+          <gov-icon [name]="opened ? icons.chevronUp : icons.chevronDown" />
+        </div>
+      </div>
+    </div>
+    <div class="position-relative">
+      @if (opened) {
+      <div class="v-dropdown__container">
+        @if (showFilter) {
+        <div
+          class="v-dropdown__filter"
+          #filterTextField
+          (keydown)="onKeyDown($event)"
+        >
+          <v-textfield
+            placeholder="Search"
+            [formControl]="filterControl"
+            iconPos="right"
+            [icon]="icons.search"
+          />
+        </div>
+        }
+        @if (!dropdownOptions?.length) {
+        <div class="v-dropdown__no-item">No option was found.</div>
+        } @else {
+        <ul
+          role="listbox"
+          class="v-dropdown__list"
+        >
+          <cdk-virtual-scroll-viewport
+            [itemSize]="30"
+            class="v-dropdown__scroll"
+            (scrolledIndexChange)="onScroll($event)"
+          >
+            <v-dropdown-item
+              *cdkVirtualFor="let option of dropdownOptions;"
+              [item]="option"
+              (click)="selectItem(option, true)"
+            >
+            </v-dropdown-item>
+          </cdk-virtual-scroll-viewport>
+        </ul>
+        }
+      </div>
+      }
+    </div>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </gov-form-control>
+</div>

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

@@ -0,0 +1,108 @@
+.v-dropdown__container {
+  position: absolute;
+  z-index: 100;
+  background-color: var(--button-outlined-primary-hover);
+  min-width: 100%;
+  border-radius: var(--border-radius, var(--corner-radius-s));
+  border: var(--border-width, 0.0625rem) solid var(--form-border-color, var(--border-neutral));
+}
+
+.v-dropdown__trigger {
+  min-height: 1.5rem;
+  display: flex;
+}
+
+.disabled {
+  color: var(--form-state-value-disabled, var(--text-disabled));
+  cursor: default !important;
+  pointer-events: none;
+
+  &-input {
+    border-color: var(--form-state-border-disabled, var(--border-subtlest)) !important;
+    background: var(--form-state-bg-disabled, transparent);
+  }
+}
+
+.error {
+  color: var(--form-state-label-error, var(--text-status-error));
+
+  &-input {
+    border-color: var(--form-state-border-error, var(--status-error)) !important;
+  }
+}
+
+.gov-form-input-child {
+  padding: 0.5rem 0.75rem;
+  border: 0px !important;
+}
+
+.v-dropdown__no-item {
+  padding: 0.5rem;
+}
+
+.v-dropdown__list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.v-dropdown__scroll {
+  height: 10rem;
+}
+
+.v-dropdown__filter {
+  padding: 0.5rem;
+}
+
+.v-dropdown__item {
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+
+  &.is-active {
+    background-color: var(--background-primary);
+    color: var(--text-white);
+
+    &:hover {
+      opacity: 0.8;
+
+    }
+  }
+
+  &:hover {
+    background-color: var(--background-primary);
+    ;
+    color: var(--text-white);
+  }
+}
+
+.v-dropdown__loader {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 1rem;
+  animation: rotate 1s linear infinite;
+  display: inline-block;
+  transform-origin: center;
+  color: var(--color-neutral-300)
+}
+
+.v-dropdown__clear {
+  z-index: 99;
+  cursor: pointer;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+::ng-deep .cdk-virtual-scrollable {
+  contain: none;
+}