@verisoft/ui-govcz 0.0.1 → 18.3.0

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({
+  standalone: false,
+  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,61 @@
+import {
+  AfterContentInit,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  QueryList,
+  ViewEncapsulation,
+} from '@angular/core';
+import { TabViewItemCore } from '@verisoft/ui-core';
+import { TabViewItemComponent } from './tab-view-item.component';
+
+@Component({
+  selector: 'v-tab-view',
+  standalone: false,
+  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;
+}

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

@@ -0,0 +1,198 @@
+@if (selectionMode === 'multiple' && showActionButtons) {
+<gov-flex
+  class="gov-table-complex__actions mt-2"
+  justify-content="space-between"
+  align-items="center"
+>
+  <div class="gov-table-complex__records-selected">
+    {{ selectedCount }} {{ ('TABLES.CHOSEN_RECORDS' | translate) ?? 'chosen records'}}
+  </div>
+  <div>
+    <gov-button color="primary" size="s" type="solid" (gov-click)="delete.emit(selected)">
+      {{ ('BUTTONS.DELETE' | translate) ?? 'Delete'}}
+    </gov-button>
+    <gov-button color="primary" size="s" type="solid" (gov-click)="save.emit(selected)">
+      {{ ('BUTTONS.SAVE' | translate) ?? 'Save'}}
+    </gov-button>
+    <gov-button color="primary" size="s" type="solid" (gov-click)="download.emit(selected)">
+      {{ ('BUTTONS.DOWNLOAD' | translate) ?? 'Download'}}
+    </gov-button>
+    <gov-button color="primary" size="s" type="solid" (gov-click)="deselectAll()">
+      {{ ('BUTTONS.CANCEL' | translate) ?? 'Cancel'}}
+    </gov-button>
+  </div>
+</gov-flex>
+}
+
+<div
+  class=" v-table gov-table"
+  [attr.size]="size | govSize"
+>
+  <table class="v-table__table">
+    <thead class="v-table__head">
+      <tr class="v-table__header">
+        @if (this.rowDetailTemplate) {
+          <th></th>
+        } @if (selectionMode === 'multiple') {
+        <th scope="col">
+          <gov-form-checkbox
+            [checked]="allSelected"
+            (gov-change)="toggleAll($event)"
+          />
+        </th>
+        }
+        @for (column of tableColumns; track column; let index = $index) {
+        @if (column.visible && column.forceVisibility !== 'hidden') {
+        <th
+          scope="col"
+          [style]="{'text-align': column.textAlign}"
+        >
+          <span
+            class="gov-table--fit-width"
+            [class.v-table__sortable]="column.sortable"
+            [class.v-table__sortable--desc]="column.sortable && column.sortDirection === 'desc'"
+            [class.v-table__sortable--asc]="column.sortable && column.sortDirection === 'asc'"
+            (click)="sortColumn(column)"
+          >
+            {{ column.headerGetter(column.id, index) | translate }}
+          </span>
+        </th>
+        } @if (this.rowDetailButtonTemplate) {
+        <th></th>
+        }}
+      </tr>
+    </thead>
+    @if (loading) {
+      <v-loader />
+    } @else {
+    <tbody class="v-table__body">
+      @for (data of tableRowView; track data.id; let rowIndex = $index) {
+      <tr
+        class="v-table__row"
+        [class.gov-table--highlight]="data.selected && selectionMode"
+        (click)="selectRow(data, $event)"
+        (dblclick)="navigate(data, $event)"
+        (mousedown)="navigateNewWindow(data, $event)"
+      >
+        @if (this.rowDetailTemplate) {
+        <td>
+          <gov-button
+            [size]="size | govSize"
+            color="primary"
+            type="solid"
+            (gov-click)="toggleDetail(data)"
+          >
+            <gov-icon
+              [name]="data.expanded ? 'chevron-up' : 'chevron-down'"
+              [size]="size | govSize"
+              slot="icon-start"
+            ></gov-icon>
+          </gov-button>
+        </td>
+        } @if (selectionMode === 'multiple') {
+        <td class="gov-table--fit-content gov-table--border-right">
+          <gov-form-checkbox
+            no-label
+            [checked]="data.selected"
+            [size]="size | govSize"
+            (gov-change)="selectRowCheckbox(data, $event)"
+          ></gov-form-checkbox>
+        </td>
+        }
+        @for (column of tableColumns; track column; let columnIndex = $index) {
+        @if (column.visible && column.forceVisibility !== 'hidden') {
+        <td
+          [style]="{'text-align': column.textAlign}"
+          [class]="column.columnClass!"
+          [class.v-auto-cell]="column.template"
+        >
+          @if (column.template) {
+          <ng-container
+            *ngTemplateOutlet="
+              column.template;
+              context: { $implicit: data.row }
+            "
+          ></ng-container>
+          } @else {
+          <span
+            [queryParams]="column.queryParams ? column.queryParams : undefined"
+            [routerLink]="column.routerLink ? column.routerLink(data.row) : undefined"
+            [innerHTML]="truncate(column.valueGetter(data.row, rowIndex))"
+            [attr.title]="
+              column.valueGetter(data.row, rowIndex).length > maximumColumnLength
+                ? column.valueGetter(data.row, rowIndex)
+                : null
+            "
+          ></span>
+          }
+        </td>
+        @if (this.rowDetailButtonTemplate) {
+        <td scope="">
+          <ng-container
+            *ngTemplateOutlet="
+              this.rowDetailButtonTemplate;
+              context: { $implicit: data.row }
+            "
+          ></ng-container>
+        </td>
+        }}}
+      </tr>
+      @if (this.rowDetailTemplate && data.expanded) {
+      <tr>
+        <td [attr.colspan]="tableColumns.length + 1">
+          <ng-container
+            class="w-100"
+            *ngTemplateOutlet="
+              this.rowDetailTemplate;
+              context: { $implicit: data.row }
+            "
+          ></ng-container>
+        </td>
+      </tr>
+      } } @if (!tableRows.length && !loading){
+      <td [attr.colspan]="tableColumns.length">
+        <gov-empty align="center" [size]="size | govSize">
+          <gov-icon slot="icon" name="empty-file" type="colored"/>
+          <p slot="headline">
+            {{ ('TABLES.EMPTY' | translate) ?? 'No records were found!' }}
+          </p>
+        </gov-empty>
+      </td>
+      }
+    </tbody>
+  }
+  </table>
+  @if(showPaginator) {
+  <div class="v-table__paginator d-flex pt-3 pb-3">
+    @if (tableRows.length) {
+    <div class="mt-2">
+      <v-table-pagination-info
+        [showingText]="'TABLES.PAGINATION.SHOWING' | translate"
+        [toText]="'TABLES.PAGINATION.TO' | translate"
+        [ofText]="'TABLES.PAGINATION.OF' | translate"
+        [entriesText]="'TABLES.PAGINATION.ENTRIES' | translate"
+        [currentPage]="currentPage"
+        [pageSize]="pageSize"
+        [total]="total"
+      />
+    </div>
+    <div class="ms-4">
+      <gov-form-select
+        [options]="pageSizeOptions"
+        [value]="govPageSize"
+        (gov-change)="changePageSize($event)"
+      ></gov-form-select>
+    </div>
+    }
+    <div class="ms-4">
+      <gov-pagination
+        [current]="currentPage"
+        [pageSize]="pageSize"
+        [total]="total"
+        [type]="'button'"
+        (gov-page)="changePage($event)"
+      ></gov-pagination>
+    </div>
+  </div>
+  }
+</div>

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

@@ -0,0 +1,193 @@
+.v-table {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.v-table__sortable {
+  color: var(--text-primary-color);
+  text-decoration: underline;
+  transition: color 0.15s ease-in-out;
+  cursor: pointer;
+
+  &::after {
+    content: '\2191 \2193';
+    margin-left: 0.5rem;
+    text-decoration: none;
+    display: inline-block;
+  }
+}
+
+.v-table__sortable--asc {
+  &::after {
+    content: '\2191';
+  }
+}
+
+.v-table__sortable--desc {
+  &::after {
+    content: '\2193';
+  }
+}
+
+.v-table__header {
+  background-color: var(--background-block-primary);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.v-table__table {
+  width: 100%;
+}
+
+.v-table__paginator {
+  background-color: var(--background-neutral-white);
+  justify-content: end;
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+}
+
+.gov-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.gov-table table {
+  table-layout: auto;
+  min-width: 100%;
+  border-collapse: collapse
+}
+
+.gov-table table tr.gov-table--highlight td {
+  background-color: var(--background-primary-subtle)
+}
+
+.gov-table table th,
+.gov-table table td {
+  border-bottom: 1px solid var(--border-subtlest);
+  text-align: left
+}
+
+.gov-table table th.gov-table--align-right,
+.gov-table table td.gov-table--align-right {
+  text-align: right
+}
+
+.gov-table table th.gov-table--vertical-align-top,
+.gov-table table td.gov-table--vertical-align-top {
+  vertical-align: top
+}
+
+.gov-table table th.gov-table--border-right,
+.gov-table table td.gov-table--border-right {
+  border-right: 1px solid var(--border-subtlest)
+}
+
+.gov-table table th.gov-table--border-left,
+.gov-table table td.gov-table--border-left {
+  border-left: 1px solid var(--border-subtlest)
+}
+
+.gov-table table th.gov-table--border-bottom-none,
+.gov-table table td.gov-table--border-bottom-none {
+  border-bottom: none
+}
+
+.gov-table table th.gov-table--nowrap,
+.gov-table table td.gov-table--nowrap {
+  white-space: nowrap
+}
+
+.gov-table table th.gov-table--fit-width,
+.gov-table table td.gov-table--fit-width {
+  width: 1px
+}
+
+.gov-table table th {
+  color: var(--text-primary);
+  background-color: var(--background-neutral-subtlest);
+}
+
+.gov-table table td {
+  background-color: var(--background-neutral-white)
+}
+
+.gov-table table tr.open td {
+  padding: var(--spacing-s) var(--spacing-m)
+}
+
+.gov-table summary::-webkit-details-marker {
+  display: none
+}
+
+.gov-table[size=s] table {
+  border-bottom-left-radius: var(--corner-radius-s);
+  border-bottom-right-radius: var(--corner-radius-s)
+}
+
+.gov-table[size=s] table th,
+.gov-table[size=s] table td {
+  height: var(--height-2xl);
+  padding: 0 var(--spacing-s);
+  font-size: var(--font-size-body-s);
+  line-height: 150%;
+  font-weight: 400
+}
+
+.gov-table[size=s] table th {
+  font-weight: 700
+}
+
+.gov-table[size=m] table {
+  border-bottom-left-radius: var(--corner-radius-m);
+  border-bottom-right-radius: var(--corner-radius-m)
+}
+
+.gov-table[size=m] table th,
+.gov-table[size=m] table td {
+  height: var(--height-3xl);
+  padding: 0 var(--spacing-m);
+  font-size: var(--font-size-body-m);
+  line-height: 150%;
+  font-weight: 400
+}
+
+.gov-table[size=m] table th {
+  font-weight: 700
+}
+
+.gov-table[size=l] table {
+  border-bottom-left-radius: var(--corner-radius-l);
+  border-bottom-right-radius: var(--corner-radius-l)
+}
+
+.gov-table[size=l] table th,
+.gov-table[size=l] table td {
+  height: var(--height-4xl);
+  padding: 0 var(--spacing-l);
+  font-size: var(--font-size-body-l);
+  line-height: 150%;
+  font-weight: 400
+}
+
+.gov-table[size=l] table th {
+  font-weight: 700
+}
+
+.gov-table-complex__name,
+.gov-table-complex__description {
+  margin:0;
+  color:var(--text-primary)
+}
+.gov-table-complex__actions {
+  color:var(--text-white-fixed);
+  background-color:var(--background-primary);
+  padding:var(--spacing-xs) var(--spacing-s)
+}
+.gov-table-complex__per-page {
+  width:185px;
+  white-space:nowrap
+}