@verisoft/ui-govcz 18.6.4 → 18.7.0

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

@@ -1,51 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-.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

@@ -1,61 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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/table-pagination-info.component.html

@@ -1,9 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-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

@@ -1,198 +0,0 @@
-@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

@@ -1,193 +0,0 @@
-.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
-}