@verisoft/ui-govcz 20.1.0 → 20.1.2

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

@@ -1,199 +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}"
-          [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

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