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

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

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

@@ -1,259 +0,0 @@
-@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;
-  }
-}