@verisoft/ui-govcz 20.0.1 → 20.1.0

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

@@ -0,0 +1,199 @@
+@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}"
+          [class]="column.columnClass"
+        >
+          <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)"
+          />
+        </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)"
+      />
+    </div>
+    }
+    <div class="ms-4">
+      <gov-pagination
+        [current]="currentPage"
+        [pageSize]="pageSize"
+        [total]="total"
+        [type]="'button'"
+        (gov-page)="changePage($event)"
+      />
+    </div>
+  </div>
+  }
+</div>

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

@@ -0,0 +1,192 @@
+.v-table {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.v-table__sortable {
+  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
+}
+