@tacdaed/fragments 1.0.0-beta.3 → 1.0.0-beta.4

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

@@ -0,0 +1,438 @@
+@if (configTable.tTitleBar?.title) {
+  <frg-title-bar
+    [title]="configTable.tTitleBar?.title ?? ''"
+    [styleType]="styleType"
+  ></frg-title-bar>
+}
+@if (configTable.tBody.data && configTable.tBody.data.length > 0) {
+  <div class="frg-table-responsive">
+    <table
+      class="frg-table"
+      id="table1"
+      [ngClass]="{
+        'frg-table__primary': styleType === 'primary',
+        'frg-table__secondary': styleType === 'secondary',
+        'frg-table__tertiary': styleType === 'tertiary',
+        'frg-table__dark': styleType === 'dark',
+        'frg-table__light': styleType === 'light',
+        'frg-table--row-small': rowSize === 'small',
+        'frg-table--row-medium': rowSize === 'medium',
+        'frg-table--row-large': rowSize === 'large'
+      }"
+    >
+      @if (configTable.tCaption && configTable.tCaption.srOnly) {
+        <caption class="visually-hidden">
+          {{ configTable.tCaption.srOnly }}
+        </caption>
+      }
+      @if (configTable.tHead.columns.length > 0) {
+        <thead #tableHead>
+          <tr>
+            <!--Sort-->
+            @if (configTable.tHead) {
+              @for (hColumn of configTable.tHead.columns; track $index) {
+                @if (hColumn.fieldOrder) {
+                  <th
+                    scope="col"
+                    [tabindex]="hColumn.fieldOrder ? 0 : null"
+                    [attr.aria-sort]="
+                      !(hColumn.fieldOrder === configTable.tPagination.order)
+                        ? null
+                        : configTable.tPagination.direction ===
+                            EnumDirectionSortTable.asc
+                          ? 'ascending'
+                          : 'descending'
+                    "
+                    [ngClass]="{
+                      'frg-sorting': hColumn.fieldOrder,
+                      'frg-sorting-asc':
+                        configTable.tPagination.direction ===
+                          EnumDirectionSortTable.asc &&
+                        hColumn.fieldOrder === configTable.tPagination.order,
+                      'frg-sorting-desc':
+                        configTable.tPagination.direction ===
+                          EnumDirectionSortTable.desc &&
+                        hColumn.fieldOrder === configTable.tPagination.order
+                    }"
+                    (click)="
+                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null
+                    "
+                    (keydown.enter)="
+                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null
+                    "
+                  >
+                    <span>
+                      {{ hColumn.fieldLabel }}
+                    </span>
+                  </th>
+                } @else {
+                  <th scope="col">
+                    <span>
+                      {{ hColumn.fieldLabel }}
+                    </span>
+                  </th>
+                }
+              }
+            }
+            <!--End Sort-->
+            @if (configTable.tHead.action) {
+              <th
+                scope="col"
+                [ngClass]="configTable.tHead.action.customClass ?? ''"
+              >
+                {{ configTable.tHead.action.label }}
+              </th>
+            }
+          </tr>
+        </thead>
+      }
+      <tbody>
+        @for (item of configTable.tBody.data; let i = $index; track $index) {
+          <tr
+            [attr.id]="i === 0 ? idFirstTr : null"
+            [ngClass]="
+              configTable.tBody.rowClick?.behaviourAction?.clickEvent
+                ? 'cursor-pointer'
+                : ''
+            "
+            [routerLink]="
+              configTable.tBody.rowClick?.disabled &&
+              configTable.tBody.rowClick?.disabled(item)
+                ? null
+                : configTable.tBody.rowClick?.behaviourAction?.link
+                  ? [
+                      configTable.tBody.rowClick?.behaviourAction?.link
+                        ? configTable.tBody.rowClick?.behaviourAction?.link
+                        : './',
+                      configTable.tBody.rowClick?.behaviourAction
+                        ?.customParamsLink ||
+                        (item | fieldArrayPosition: configTable.tBody.uniqueField)
+                    ]
+                  : null
+            "
+            (click)="handleRowClick($event, item)"
+            (keyup.enter)="handleRowClick($event, item)"
+            (keydown)="handleRowClick($event, item)"
+          >
+            @for (column of configTable.tBody.columns; let i = $index; track $index) {
+              <td>
+                <div [ngClass]="column.customClass">
+                  <ng-container
+                    [ngTemplateOutlet]="
+                      (column.cells | typeOfArray) ? cellForTpl : cellTpl
+                    "
+                    [ngTemplateOutletContext]="{
+                      cells: column.cells,
+                      item: item
+                    }"
+                  ></ng-container>
+                </div>
+              </td>
+            }
+            @if (configTable.tBody.action ?? false) {
+              <td
+                class="table-action"
+                [ngClass]="configTable.tBody.action?.customClasses ?? ''"
+              >
+                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {
+                  @if (act.visible && act.visible(item) ? true : null) {
+                    <frg-button
+                      [ariaLabel]="act.ariaLabel || 'Azione'"
+                      [text]="''"
+                      [iconClass]="act.iconClass ? act.iconClass(item) : ''"
+                      [styleType]="'icon'"
+                      [size]="'small'"
+                      frgTooltip
+                      [tooltipConfig]="{
+                        apply:
+                          act.tooltip &&
+                          act.tooltip.apply &&
+                          act.visible &&
+                          act.visible(item)
+                            ? act.tooltip.apply
+                            : true,
+                        text:
+                          act.tooltip && act.tooltip.text
+                            ? act.tooltip.text(item)
+                            : '',
+                        textContent:
+                          act.tooltip && act.tooltip.textContent
+                            ? act.tooltip.textContent(item)
+                            : '',
+                        position:
+                          act.tooltip && act.tooltip.position
+                            ? act.tooltip.position
+                            : 'top',
+                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0
+                      }"
+                      [disabled]="act.disabled ? act.disabled(item) : null"
+                      [buttonRouterLink]="
+                        act.disabled && act.disabled(item)
+                          ? null
+                          : act.behaviourAction.link
+                            ? [
+                                act.behaviourAction.link
+                                  ? act.behaviourAction.link
+                                  : './',
+                                act.behaviourAction.customParamsLink ||
+                                  (item
+                                    | fieldArrayPosition
+                                      : configTable.tBody.uniqueField)
+                              ]
+                            : null
+                      "
+                      (clickEvent)="
+                        act.behaviourAction.clickEvent
+                          ? act.behaviourAction.clickEvent(item)
+                          : null
+                      "
+                      (click)="$event.stopPropagation()"
+                      (keydown)="$event.stopPropagation()"
+                      (keyup.enter)="$event.stopPropagation()"
+                    >
+                    </frg-button>
+                  }
+                }
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+
+  @if (configTable.tPagination) {
+    <frg-small-pagination
+      [hasElipsisPages]="configTable.tPagination.hasElipsisPages ?? false"
+      [pageSize]="configTable.tPagination.pageSize ?? 10"
+      [page]="configTable.tPagination.page ?? 0"
+      [totalItems]="configTable.tPagination.fullData?.length ?? 0"
+      [fullData]="configTable.tPagination.fullData ?? []"
+      [styleType]="styleType"
+      (pageChange)="updateCurrentPage($event)"
+    ></frg-small-pagination>
+  }
+} @else {
+  <div class="d-flex justify-content-center my-4">
+    <div class="text-center">No Elements</div>
+  </div>
+}
+
+<ng-template #cellForTpl let-cells="cells" let-item="item">
+  @for (cell of $any(cells); track $index) {
+    <ng-container
+      [ngTemplateOutlet]="cellTpl"
+      [ngTemplateOutletContext]="{
+        cell: cell,
+        item: item
+      }"
+    ></ng-container>
+    <br />
+  }
+</ng-template>
+
+<ng-template #cellTpl let-cell="cells" let-item="item">
+  @if (!cell.fieldPipe) {
+    @if (
+      cell.icon &&
+      cell.icon.position !== 'right' &&
+      cell.icon.action.visible &&
+      cell.icon.action.visible(item)
+    ) {
+      <frg-button
+        [ariaLabel]="cell.icon.ariaLabel || 'Azione'"
+        [text]="''"
+        [iconClass]="cell.icon.iconClass ? cell.icon.iconClass : ''"
+        [styleType]="'icon'"
+        [size]="'small'"
+        frgTooltip
+        [tooltipConfig]="{
+          apply:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.apply
+              ? cell.icon.action.tooltip.apply
+              : true,
+          text:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.text
+              ? cell.icon.action.tooltip.text(item)
+              : '',
+          textContent:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent
+              ? cell.icon.action.tooltip.textContent(item)
+              : '',
+          position:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.position
+              ? cell.icon.action.tooltip.position
+              : 'top',
+          gap:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.gap
+              ? cell.icon.action.tooltip.gap
+              : 0
+        }"
+        [disabled]="
+          cell.icon.action.disabled
+            ? cell.icon.action.disabled(item)
+            : null
+        "
+        (clickEvent)="handleIconClick(cell, item)"
+        (click)="$event.stopPropagation()"
+        (keydown)="$event.stopPropagation()"
+        (keyup.enter)="$event.stopPropagation()"
+      >
+      </frg-button>
+    }
+    <span [ngClass]="cell.customClass ? cell.customClass(item) : ''">
+      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}
+    </span>
+    @if (
+      cell.icon &&
+      cell.icon.position === 'right' &&
+      cell.icon.action.visible &&
+      cell.icon.action.visible(item)
+    ) {
+      <frg-button
+        [ariaLabel]="cell.icon.ariaLabel || 'Azione'"
+        [text]="''"
+        [iconClass]="cell.icon.iconClass ? cell.icon.iconClass : ''"
+        [styleType]="'icon'"
+        [size]="'small'"
+        frgTooltip
+        [tooltipConfig]="{
+          apply:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.apply
+              ? cell.icon.action.tooltip.apply
+              : true,
+          text:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.text
+              ? cell.icon.action.tooltip.text(item)
+              : '',
+          textContent:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent
+              ? cell.icon.action.tooltip.textContent(item)
+              : '',
+          position:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.position
+              ? cell.icon.action.tooltip.position
+              : 'top',
+          gap:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.gap
+              ? cell.icon.action.tooltip.gap
+              : 0
+        }"
+        [disabled]="
+          cell.icon.action.disabled
+            ? cell.icon.action.disabled(item)
+            : null
+        "
+        (clickEvent)="handleIconClick(cell, item)"
+        (click)="$event.stopPropagation()"
+        (keydown)="$event.stopPropagation()"
+        (keyup.enter)="$event.stopPropagation()"
+      >
+      </frg-button>
+    }
+  } @else {
+    @if (
+      cell.icon &&
+      cell.icon.position !== 'right' &&
+      cell.icon.action.visible &&
+      cell.icon.action.visible(item)
+    ) {
+      <frg-button
+        [ariaLabel]="cell.icon.ariaLabel || 'Azione'"
+        [text]="''"
+        [iconClass]="cell.icon.iconClass ? cell.icon.iconClass : ''"
+        [styleType]="'icon'"
+        [size]="'small'"
+        frgTooltip
+        [tooltipConfig]="{
+          apply:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.apply
+              ? cell.icon.action.tooltip.apply
+              : true,
+          text:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.text
+              ? cell.icon.action.tooltip.text(item)
+              : '',
+          textContent:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent
+              ? cell.icon.action.tooltip.textContent(item)
+              : '',
+          position:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.position
+              ? cell.icon.action.tooltip.position
+              : 'top',
+          gap:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.gap
+              ? cell.icon.action.tooltip.gap
+              : 0
+        }"
+        [disabled]="
+          cell.icon.action.disabled
+            ? cell.icon.action.disabled(item)
+            : null
+        "
+        (clickEvent)="handleIconClick(cell, item)"
+        (click)="$event.stopPropagation()"
+        (keydown)="$event.stopPropagation()"
+        (keyup.enter)="$event.stopPropagation()"
+      >
+      </frg-button>
+    }
+    <span
+      [innerHtml]="
+        item
+          | fieldArrayPosition: cell.fieldArrayPosition
+          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args
+          | safeHtml
+      "
+      [ngClass]="cell.customClass ? cell.customClass(item) : ''"
+    ></span>
+    @if (
+      cell.icon &&
+      cell.icon.position === 'right' &&
+      cell.icon.action.visible &&
+      cell.icon.action.visible(item)
+    ) {
+      <frg-button
+        [ariaLabel]="cell.icon.ariaLabel || 'Azione'"
+        [text]="''"
+        [iconClass]="cell.icon.iconClass ? cell.icon.iconClass : ''"
+        [styleType]="'icon'"
+        [size]="'small'"
+        frgTooltip
+        [tooltipConfig]="{
+          apply:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.apply
+              ? cell.icon.action.tooltip.apply
+              : true,
+          text:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.text
+              ? cell.icon.action.tooltip.text(item)
+              : '',
+          textContent:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent
+              ? cell.icon.action.tooltip.textContent(item)
+              : '',
+          position:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.position
+              ? cell.icon.action.tooltip.position
+              : 'top',
+          gap:
+            cell.icon.action.tooltip && cell.icon.action.tooltip.gap
+              ? cell.icon.action.tooltip.gap
+              : 0
+        }"
+        [disabled]="
+          cell.icon.action.disabled
+            ? cell.icon.action.disabled(item)
+            : null
+        "
+        (clickEvent)="handleIconClick(cell, item)"
+        (click)="$event.stopPropagation()"
+        (keydown)="$event.stopPropagation()"
+        (keyup.enter)="$event.stopPropagation()"
+      >
+      </frg-button>
+    }
+  }
+</ng-template>

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

@@ -0,0 +1,259 @@
+@use "sass:color";
+@use './../../../../assets/styles/scss/variables' as *;
+@use './../title-bar/title-bar.component.scss';
+
+.frg-filter,
+.frg-search {
+  & label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    font-family: $input-font-family;
+    text-transform: uppercase;
+    letter-spacing: 0.05rem;
+  }
+
+  & input {
+    display: block;
+    width: 100%;
+    padding: $table-input-padding;
+    font-size: $input-font-size;
+    font-family: $input-font-family;
+    line-height: 1.5;
+    color: $color-dark;
+    background-color: $input-background;
+    background-clip: padding-box;
+    border: 1px solid $input-border-color;
+    border-radius: $input-border-radius;
+    transition:
+      border-color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
+
+    &::placeholder {
+      color: $input-placeholder-color;
+      opacity: 1;
+    }
+
+    &:focus {
+      color: $color-dark;
+      background-color: $input-background;
+      border-color: $input-focus-border-color;
+      outline: 0;
+      box-shadow: 0 0 0 0.2rem rgba(46, 110, 166, 0.25);
+    }
+
+    &.is-invalid {
+      border-color: $input-error-border-color;
+      padding-right: calc($table-input-padding + 2rem);
+      background-image: url('data:image/svg+xml, ...');
+      background-repeat: no-repeat;
+      background-position: center right calc($table-input-padding / 2);
+      background-size: calc($table-input-padding / 1.5) calc($table-input-padding / 1.5);
+
+      &:focus {
+        border-color: $input-error-border-color;
+        box-shadow: 0 0 0 0.2rem rgba(218, 30, 40, 0.25);
+      }
+    }
+
+    &:disabled {
+      background-color: $input-disabled-background;
+      border-color: $input-disabled-border-color;
+    }
+  }
+}
+
+.frg-table-responsive {
+  border: 1px solid #e6e9ef;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background-color: $color-light;
+}
+
+frg-title-bar + .frg-table-responsive {
+  border-top: none;
+  border-radius: 0 0 0.25rem 0.25rem;
+}
+
+.frg-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.95rem;
+  background-color: $color-light;
+
+  &-responsive {
+    border-radius: 0 0 .25rem .25rem;
+    border: 1px solid #e6e9ef;
+    overflow: hidden;
+    background-color: $color-light;
+  }
+
+  & td,
+  & th {
+    text-align: left;
+    padding: 0.75rem 0.9rem;
+    border-bottom: 1px solid #e6e9ef;
+    vertical-align: middle;
+  }
+
+  &--row-small td,
+  &--row-small th {
+    padding: 0.35rem 0.6rem;
+  }
+
+  &--row-medium td,
+  &--row-medium th {
+    padding: 0.75rem 0.9rem;
+  }
+
+  &--row-large td,
+  &--row-large th {
+    padding: 1rem 1.2rem;
+  }
+
+  thead th {
+    background-color: #edf0f6;
+    font-weight: 600;
+    color: #1f252e;
+    letter-spacing: 0.01em;
+    border-bottom: 1px solid #e6e9ef;
+  }
+
+  tbody tr {
+    transition: background-color 0.18s ease;
+
+    &:hover {
+      background-color: #f1f4f9;
+    }
+  }
+
+  & .frg-sorting {
+    position: relative;
+    cursor: pointer;
+    padding-right: 1.4rem;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0.65rem;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      opacity: 0.5;
+    }
+
+    &::before {
+      top: calc(50% - 6px);
+      border-bottom: 5px solid currentColor;
+    }
+
+    &::after {
+      top: calc(50% + 2px);
+      border-top: 5px solid currentColor;
+    }
+  }
+
+  & .frg-sorting-asc::after {
+    opacity: 0.5;
+  }
+
+  & .frg-sorting-asc::before {
+    opacity: 1;
+  }
+
+  & .frg-sorting-desc::before {
+    opacity: 0.5;
+  }
+
+  & .frg-sorting-desc::after {
+    opacity: 1;
+  }
+
+  &__primary {
+    overflow: hidden;
+
+    & thead th,
+    &.frg-table thead th {
+      background-color: color.mix($color-primary, $color-light, 85%);
+      color: $color-light;
+      border-bottom-color: color.scale($color-primary, $lightness: 35%);
+    }
+
+    & tbody tr:hover {
+      background-color: color.mix($color-primary, $color-light, 15%);
+    }
+  }
+
+  &__secondary {
+    overflow: hidden;
+
+    & thead th,
+    &.frg-table thead th {
+      background-color: color.mix($color-secondary, $color-light, 85%);
+      color: $color-light;
+      border-bottom-color: color.scale($color-secondary, $lightness: 35%);
+    }
+
+    & tbody tr:hover {
+      background-color: color.mix($color-secondary, $color-light, 15%);
+    }
+  }
+
+  &__tertiary {
+    overflow: hidden;
+
+    & thead th,
+    &.frg-table thead th {
+      background-color: color.mix($color-tertiary, $color-light, 85%);
+      color: $color-light;
+      border-bottom-color: color.scale($color-tertiary, $lightness: 35%);
+    }
+
+    & tbody tr:hover {
+      background-color: color.mix($color-tertiary, $color-light, 15%);
+    }
+  }
+
+  &__dark {
+    background-color: $color-dark;
+    color: $color-light;
+
+    & td,
+    & th {
+      border-bottom-color: rgba($color-light, 0.12);
+    }
+
+    & thead th {
+      background-color: color.scale($color-dark, $lightness: 10%);
+      color: $color-light;
+      border-bottom-color: rgba($color-light, 0.16);
+    }
+
+    & tbody tr:hover {
+      background-color: color.scale($color-dark, $lightness: 8%);
+    }
+  }
+
+  &__light {
+    background-color: $color-light;
+    color: $color-dark;
+
+    & thead th {
+      background-color: $color-light;
+      color: $color-dark;
+    }
+
+    & tbody tr:hover {
+      background-color: #f1f4f9;
+    }
+  }
+}
+
+// Media query for responsiveness
+@media screen and (max-width: $screen-md-min) {
+  .frg-table-responsive {
+    overflow: auto;
+  }
+}