@verisoft/ui-govcz 20.0.1 → 20.1.0

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

@@ -0,0 +1,14 @@
+<gov-toast
+    [closeLabel]="config.closeLabel ?? closeLabel"
+    [color]="config.color || color"
+    [gravity]="config.gravity || gravity"
+    [position]="config.position || position"
+    [time]="config.time ?? time"
+    [type]="config.type || type"
+>
+    @if (config.icon || icon) {
+    <gov-icon
+        [name]="config.icon || icon"
+    />
+    } {{ config.message || message }}
+</gov-toast>

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

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

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

@@ -0,0 +1,44 @@
+
+import { Component, Inject, Input, Optional } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { SNACKBAR_COMPONENT_TOKEN, SnackbarCore } from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { SnackbarConfig } from './snackbar.model';
+
+@Component({
+    selector: 'v-snackbar',
+    imports: [GovDesignSystemModule],
+    templateUrl: './snackbar.component.html',
+    styleUrl: './snackbar.component.scss',
+    providers: [
+        {
+            provide: SNACKBAR_COMPONENT_TOKEN,
+            useExisting: SnackbarComponent,
+        },
+    ]
+})
+export class SnackbarComponent 
+  implements SnackbarCore
+{
+  @Input({required: true}) message!: string;
+
+  @Input() icon!: string;
+
+  @Input() closeLabel!: string;
+
+  @Input() color: "error" | "neutral" | "primary" | "success" | "warning" = "primary";
+
+  @Input() gravity: "bottom" | "top" = "top";
+
+  @Input() position: "center" | "left" | "right" = "right";
+
+  @Input() time = 4000;
+
+  @Input() type: "bold" | "subtle" = "subtle";
+
+  icons = Icons;
+
+  constructor(
+    @Optional() @Inject('TOAST_CONFIG') public config: SnackbarConfig,
+  ) { }
+}

package/src/lib/components/snackbar/snackbar.model.ts

@@ -0,0 +1,10 @@
+export interface SnackbarConfig {
+    message: string;
+    icon?: string;
+    closeLabel?: string;
+    color?: "error" | "neutral" | "primary" | "success" | "warning";
+    gravity?: "bottom" | "top";
+    position?: "center" | "left" | "right";
+    time?: number;
+    type?: "bold" | "subtle";
+}

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

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

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

@@ -0,0 +1,35 @@
+<gov-stepper 
+  [ngClass]="layout === 'vertical' ? 'd-block' : 'd-flex justify-content-between'"
+  [size]="size | govSize"
+>
+  @for (item of items; track item; let index = $index) {
+  <gov-stepper-item
+    [ngClass]="{ 'active-step': index === currentStep }"
+  >
+    <span 
+      slot="prefix"
+      [ngStyle]="{ 'background-color': index === currentStep ? 'var(--color-primary-300)' : 'var(--color-primary-600)' }"
+    >
+      {{ item.prefix }}
+    </span>
+    <p slot="headline">{{ item.header }}</p>
+    <p slot="annotation">{{ item.annotation }}</p>
+  </gov-stepper-item>
+  }
+</gov-stepper>
+<div class="d-flex pt-4 justify-content-between">
+  @if (currentStep > 0) {
+  <v-button
+    [label]="'Back'"
+    [size]="size"
+    (click)="previousStep()"
+  />
+  }
+  @if (currentStep < steps - 1) {
+  <v-button
+    [label]="'Next'"
+    [size]="size"
+    (click)="nextStep()"
+  />
+  }
+</div>

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

@@ -0,0 +1,9 @@
+gov-stepper-item, .gov-stepper-item {
+    width: auto !important;
+}
+
+.active-step {
+    background-color: var(--color-primary-300);
+    border: 1px solid var(--color-primary-600);
+    border-radius: 0.5rem;
+}

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

@@ -0,0 +1,60 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  StepperCore,
+  STEPPER_COMPONENT_TOKEN,
+  StepperItem,
+  FieldSizeType,
+  FieldSize,
+  LayoutType,
+  LayoutTypeType,
+} from '@verisoft/ui-core';
+import { GovSizePipe } from '../../pipes';
+import { ButtonComponent } from '../button';
+@Component({
+    selector: 'v-stepper',
+    imports: [
+        CommonModule,
+        ButtonComponent,
+        GovDesignSystemModule,
+        GovSizePipe,
+    ],
+    templateUrl: './stepper.component.html',
+    styleUrl: './stepper.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        { provide: STEPPER_COMPONENT_TOKEN, useExisting: StepperComponent },
+    ]
+})
+export class StepperComponent
+  implements StepperCore, OnInit
+{
+  @Input() items: StepperItem[] = [];
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
+  @Input() icon!: string;
+  @Input() prefix!: string;
+  @Input() annotation!: string;
+  @Input() label!: string;
+  @Input() layout: LayoutTypeType = LayoutType.horizontal;
+  @Output() activeIndexChange = new EventEmitter<number>();
+
+  steps = 0;
+  currentStep = 0;
+
+  ngOnInit(): void {
+    this.steps = this.items.length;
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 0) {
+      this.currentStep--;
+    }
+  }
+
+  nextStep(): void {
+    if (this.currentStep < this.items.length - 1) {
+      this.currentStep++;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,16 @@
+<gov-form-control>
+  <gov-form-switch
+    [formControl]="formControl"
+    [size]="size | govSize"
+    [required]="required"
+    [name]="name"
+    [invalid]="ngControl?.errors"
+  >
+    @if (label && !noLabel) {
+    <gov-form-label [size]="size" slot="label">
+      {{ label }}
+    </gov-form-label>
+    }
+  </gov-form-switch>
+  <v-validation-message [ngControl]="ngControl"></v-validation-message>
+</gov-form-control>

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

@@ -0,0 +1,39 @@
+
+import { ChangeDetectionStrategy, Component, Input, Optional, Self } from "@angular/core";
+import { ReactiveFormsModule, NgControl } from "@angular/forms";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { SWITCH_COMPONENT_TOKEN, SwitchCore, BaseFormInputComponent, FieldSizeType, FieldSize } from "@verisoft/ui-core";
+import { Icons } from "../../icons";
+import { GovSizePipe } from "../../pipes";
+import { ErrorComponent } from "../errors";
+
+@Component({
+    selector: "v-switch",
+    styleUrl: "./switch.component.scss",
+    templateUrl: './switch.component.html',
+    imports: [
+    GovDesignSystemModule,
+    ReactiveFormsModule,
+    GovSizePipe,
+    ErrorComponent
+],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{
+            provide: SWITCH_COMPONENT_TOKEN,
+            useExisting: SwitchComponent,
+        }]
+})
+export class SwitchComponent
+  extends BaseFormInputComponent
+  implements SwitchCore
+{
+  @Input() size: FieldSizeType = FieldSize.medium;
+  @Input() noLabel = false;
+  @Input() name!: string;
+
+  icons = Icons;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

package/src/lib/components/tab-view/index.ts

@@ -0,0 +1,2 @@
+export * from './tab-view.component';
+export * from './tab-view-item.component';

package/src/lib/components/tab-view/tab-view-item.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, ViewChild, TemplateRef } from '@angular/core';
+import { TabViewItemCore } from '@verisoft/ui-core';
+
+@Component({
+  
+  selector: 'v-tab-view-item',
+  template: `<ng-template #contentTemplate>
+    <ng-content></ng-content>
+  </ng-template>`
+  })
+export class TabViewItemComponent 
+implements TabViewItemCore {
+
+  @Input() id?: string;
+  @Input() index?: number;
+  @Input() disabled = false;
+  @Input() title!: string;
+  @Input() content?: string;
+  @Input() url?: string;
+
+  @ViewChild('contentTemplate', { static: true })
+  contentTemplate!: TemplateRef<any>;
+}

package/src/lib/components/tab-view/tab-view.component.html

@@ -0,0 +1,51 @@
+<div class="gov-tabs">
+  <div class="gov-tabs__tabs" role="tablist">
+    @for (item of items; track item; let index = $index) {
+    @if (useRouting) {
+      <button
+        [attr.index]="index"
+        class="gov-tabs__btn"
+        [routerLink]="item.url"
+        [routerLinkActive]="'active'"
+        #rls="routerLinkActive"
+        [attr.aria-selected]="rls.isActive"
+        [disabled]="item.disabled"
+        role="tab"
+        [attr.activeIndex]="activeIndex"
+        (click)="changeTabIndex(index)"
+      >
+        {{ item.title | translate }}
+      </button>
+    } @else {
+      <button
+        [attr.index]="index"
+        class="gov-tabs__btn"
+        [attr.aria-selected]="activeIndex === index"
+        [disabled]="item.disabled"
+        role="tab"
+        [attr.activeIndex]="activeIndex"
+        (click)="changeTabIndex(index)"
+      >
+        {{ item.title | translate }}
+      </button>}
+    }
+  </div>
+  <div class="gov-tabs__tabs">
+    @for (item of items; track item; let index = $index) {
+      <div class="gov-tabs__tab" [class.active]="activeIndex === index" >
+        <div class="gov-tabs__list">
+          <div class="gov-tabs__content">
+            @if (item.contentTemplate) {
+              <ng-container *ngTemplateOutlet="item.contentTemplate"></ng-container>
+            } @else if (item.content) {
+              {{ item.content }}
+            }
+          </div>
+        </div>
+      </div>
+    }
+    @if (useRouting) {
+      <router-outlet class="gov-tabs__content"></router-outlet>
+    }
+  </div>
+</div>

package/src/lib/components/tab-view/tab-view.component.scss

@@ -0,0 +1,43 @@
+.gov-tabs__tabs {
+  position: relative;
+  width: 100%;
+  margin-bottom: 0%;
+  overflow-x: clip;
+}
+
+.gov-tabs__tab {
+  display: none;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.gov-tabs__tab.active {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.gov-tabs__btn {
+  font-size: medium;
+  padding: 10px 20px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-weight: 700;
+}
+
+.gov-tabs__btn[aria-selected=true]:after {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: var(--border-primary);
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+}
+
+.gov-tabs__content {
+  margin-top: var(--spacing-m-nudge);
+  flex-wrap: wrap;
+  width: 100%;
+}

package/src/lib/components/tab-view/tab-view.component.ts

@@ -0,0 +1,64 @@
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  AfterContentInit,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  QueryList,
+  ViewEncapsulation,
+} from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { TabViewItemCore } from '@verisoft/ui-core';
+import { TabViewItemComponent } from './tab-view-item.component';
+
+@Component({
+  selector: 'v-tab-view',
+  imports: [NgTemplateOutlet, RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe],
+  templateUrl: './tab-view.component.html',
+  styleUrls: ['./tab-view.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class TabViewComponent implements AfterContentInit {
+
+  @ContentChildren(TabViewItemComponent) tabs!: QueryList<TabViewItemComponent>;
+
+  @Input() highlight = false;
+  @Input() useRouting = false;
+  @Input() items: TabViewItemCore[] = [];
+  @Input() activeIndex = 0;
+
+  @Output() activeIndexChange = new EventEmitter<number>();
+
+  private readonly cd = inject(ChangeDetectorRef);
+
+  ngAfterContentInit(): void {
+    this.initTabs();
+  }
+
+  initTabs(): void {
+    this.items = [...this.tabs.toArray(), ...this.items];
+    this.cd.detectChanges();
+  }
+
+  changeTabIndex(index: number) {
+    if (this.activeIndex !== index) {
+      this.activeIndex = index;
+      this.activeIndexChange.emit(this.activeIndex);
+    }
+
+    this.activeIndexChange.emit(index);
+    this.cd.detectChanges();
+  }
+
+  setTabActive(options: TabViewItemComponent[]): void {
+    options.forEach((_, index) => {
+      index === this.activeIndex;
+    });
+    this.cd.detectChanges();
+  }
+}

package/src/lib/components/tab-view/tab-view.module.ts

@@ -0,0 +1,25 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { TAB_VIEW_COMPONENT_TOKEN } from '@verisoft/ui-core';
+import { TabViewItemComponent } from './tab-view-item.component';
+import { TabViewComponent } from './tab-view.component';
+
+@NgModule({
+  imports: [
+    RouterOutlet,
+    NgTemplateOutlet,
+    GovDesignSystemModule,
+    RouterLinkActive,
+    RouterLink,
+    TranslateModule
+  ],
+  declarations: [TabViewComponent, TabViewItemComponent],
+  exports: [TabViewComponent, TabViewItemComponent],
+  providers: [
+    { provide: TAB_VIEW_COMPONENT_TOKEN, useExisting: TabViewComponent },
+  ],
+})
+export class TabViewModule {}

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

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

package/src/lib/components/table/table-pagination-info.component.html

@@ -0,0 +1,9 @@
+<span>
+  {{ showingText }} {{ (currentPage - 1) * pageSize + 1 }} {{ toText }}
+  {{
+    currentPage * pageSize < total
+      ? currentPage * pageSize
+      : total
+  }}
+  {{ ofText }} {{ total }} {{ entriesText }}
+</span>

package/src/lib/components/table/table-pagination-info.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "v-table-pagination-info",
+  templateUrl: "./table-pagination-info.component.html",
+})
+export class TablePaginationInfoComponent {
+  @Input() showingText = 'Showing'
+
+  @Input() toText = 'to';
+
+  @Input() ofText = 'of';
+
+  @Input() entriesText = 'entries'
+
+  @Input() currentPage = 0;
+
+  @Input() pageSize = 0;
+
+  @Input() total = 0;
+}