@one-paragon/angular-utilities 2.8.2 → 2.8.4

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.scss

@@ -0,0 +1,57 @@
+.show-hide {
+  margin-right: 15px;
+  height: 24px;
+  width: 24px;
+  padding: 4px;
+}
+
+.label {
+    color: var(tb-col-display-name);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: left;
+    margin: 0;
+    font-size: 17px;
+    font-weight: 700;
+    display: inline-block;
+    width: 66%;
+}
+
+.row {
+    margin: 0;
+    padding: 0;
+}
+
+.isHidden {
+    background-color: lightgrey;
+    color: darkgray;
+    font-weight: 700;
+    font-size: 17px;
+    white-space: nowrap;
+}
+
+.filter-button {
+    margin-top: 10px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.mdc-list-item__primary-text{
+  display: inline-block;
+  width: 100%;
+}
+

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.ts

@@ -0,0 +1,44 @@
+import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';
+import { DisplayCol } from '../../classes/display-col';
+import { TableStore } from '../../classes/table-store';
+import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
+
+@Component({
+  selector: 'tb-col-displayer',
+  templateUrl: './gen-col-displayer.component.html',
+  styleUrls: ['./gen-col-displayer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
+    DragDropModule, SpaceCasePipe
+  ]
+})
+export class GenColDisplayerComponent {
+  private tableState = inject(TableStore);
+  $columns = computed(() => this.tableState.$orderedCodeVisibleMetaDatas().map( md => ({
+    key: md.key,
+    displayName: md.displayName,
+    isVisible: !this.tableState.$hiddenKeys().includes(md.key)
+  })));
+
+  reset(displayCols: DisplayCol[]) {
+    displayCols.forEach(c => c.isVisible = true);
+    this.emit(displayCols);
+  }
+  drop(event: CdkDragDrop<string[]>) {
+    this.tableState.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex })
+  }
+  unset(displayCols: DisplayCol[]) {
+    displayCols.forEach(c => c.isVisible = false);
+    this.emit(displayCols);
+  }
+
+  emit(displayCols: DisplayCol[]) {
+    this.tableState.setHiddenColumns(displayCols.map( c => ({ key: c.key, visible: c.isVisible })));
+  }
+}

package/src/table-builder/components/generic-table/generic-table.component.html

@@ -0,0 +1,140 @@
+<mat-table
+  #table
+  cdkDropList
+  cdkDropListLockAxis='x'
+  cdkDropListOrientation="horizontal"
+  class="table-drag-list"
+  [dataSource]="$dataSource()"
+  [trackBy]="$trackByFunction()"
+  [style]="$tableWidth()"
+  (cdkDropListDropped)="drop($event)"
+>
+
+  <!-- select column -->
+  <ng-container matColumnDef="select">
+    @let selection = $selection();
+    <mat-header-cell *matHeaderCellDef  class="select-column" [style]="$selectionColumnWidth()">
+      <mat-checkbox [checked]="!!($masterToggleChecked())"
+                    [indeterminate]="$masterToggleIndeterminate()"
+                    [matTooltip]="$selectAllMessage()"
+                    (change)="$event ? masterToggle() : null" />
+      <button mat-icon-button class="open-menu-icon-button" disableRipple [matMenuTriggerFor]="menu" [matMenuTriggerRestoreFocus]="false">
+        <mat-icon class="menu-icon">more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu" >
+        <button mat-menu-item>
+          <mat-slide-toggle [checked]="$hasSelectFilter()" (change)="addSelectFilter($event.checked)">
+            Show Only Selected
+          </mat-slide-toggle>
+        </button>
+        @if(this.$selection().selected.length)
+        {
+          <button mat-menu-item (click)="$selection().clear()">
+            Clear Selection
+          </button>
+        }
+        <button mat-menu-item (click)="selectTop(+i.value)">
+          Select top 
+              <input #i class="input" stop-propagation type="number" 
+                placeholder="Set Size"
+                [value]="10"
+                [min]="1"
+                [max]="dataStore.state().sortedFilteredDataLength" />
+        </button>
+      </mat-menu>
+    </mat-header-cell>
+
+    <mat-cell *matCellDef="let row" class="select-column" [style]="$selectionColumnWidth()">
+      <mat-checkbox
+        [checked]="selection.isSelected(row)"
+        (click)="$event.stopPropagation()"
+        (change)="$event ? selection.toggle(row) : null"/>
+    </mat-cell>
+
+    <mat-footer-cell *matFooterCellDef class="select-column" [style]="$selectionColumnWidth()">
+      {{ selection.selected.length }}
+    </mat-footer-cell>
+  </ng-container>
+
+
+  <!-- index column -->
+  <ng-container matColumnDef="index">
+    <mat-header-cell *matHeaderCellDef class="f-mat-header-cell index-column" [style]="$indexColumnWidth()">
+    </mat-header-cell>
+    <mat-cell *matCellDef="let i = index; let t" class="index-column" [style]="$indexColumnWidth()">
+      {{ 1 + i + $offsetIndex() }}
+    </mat-cell>
+    <mat-footer-cell *matFooterCellDef class="index-column" [style]="$indexColumnWidth()"/>
+  </ng-container>
+
+  <!-- Grouping -->
+  <ng-container matColumnDef="groupHeader">
+    <mat-cell *matCellDef="let row">
+      @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );
+      @let customTemplate = (getCustomGroupRowTemplate | func : row.key)();
+
+      <!-- Default group row template -->
+      <div [style.paddingLeft]="row.padding + 'px !important'" [class]="'group-cell'">
+        @if($hasSelectColumn())
+        {
+          @let contains = (allOfGroupSelected | func : row.uniqueName)();
+          <mat-checkbox [checked]="!!contains.containsAll"
+            [indeterminate]="!!contains.containsSome && !contains.containsAll"
+            [matTooltip]="toggleGroupMessage | func : contains.length : contains.containsAll"
+            (change)="$event ? toggleGroup(row.uniqueName, contains.containsAll) : null" />
+        }
+        <button mat-icon-button (click)="setExpanded(row.key, row.uniqueName, !expanded());">
+          @if (!expanded())
+          {
+            <mat-icon>chevron_right</mat-icon>
+          }
+          @else
+          {
+            <mat-icon>expand_more</mat-icon>
+          }
+        </button>
+        {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}
+      </div>
+      @if(customTemplate)
+      {
+        <ng-container *ngTemplateOutlet="customTemplate; context: { 
+          $implicit: row, 
+          element: row, 
+          expanded: expanded(), 
+          level: row.level, 
+          key: row.key, 
+          uniqueName: row.uniqueName, 
+          groupHeaderDisplay: row.groupHeaderDisplay, 
+          length: row.length, 
+          padding: row.padding 
+        }" />
+      }
+      @else
+      {
+        <ng-container *ngTemplateOutlet="state.$props().groupHeaderTemplate!; context: { element: row }" />
+      }
+    </mat-cell>
+  </ng-container>
+
+  <mat-row
+    *matRowDef="let row; columns: $keys(); let i = index"
+    [style.height]="$rowHeight()"
+    [style.min-height]="$rowHeight()"
+    [styler]="$rowStyles()"
+    [element]="row"
+    [conditionalClasses]="$rowClasses()"
+    (click)="rowClicked(row, $event)"
+  />
+
+  <!-- group row -->
+  <mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroupHeader"
+           style="background-color: unset;"
+           [style.height]="state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()"
+           [style.min-height]="state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()"/>
+</mat-table>
+
+<mat-header-row *matHeaderRowDef="$keys(); sticky: state.$props().isSticky" [style.height]="$headerHeight()"
+  [style.min-height]="$headerHeight()" [style.top.px]="($offset()! * -1)"/>
+<mat-footer-row *matFooterRowDef="$keys(); sticky: false " [style.height]="$footerHeight()" [class.sticky-footer]="$stickyFooter()"
+  [style.min-height]="$footerHeight()"
+  [style.bottom.px]="$stickyFooter() ? ($footerOffset()) : undefined"/>

package/src/table-builder/components/generic-table/generic-table.component.scss

@@ -0,0 +1,45 @@
+:host{
+  --mat-paginator-container-size: var(tb-paginator-container-size, initial);
+}
+.select-column {
+  min-width: var(--tb-min-select-column-width, 42px)
+}
+.page-amounts{
+  color: rgba(0, 0, 0, 0.54);
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-size: 12px;
+  margin-right: .2rem;
+}
+
+.group-cell{
+  display: flex;
+  align-items: center;
+  width: var(--tb-group-cell-width);
+  min-width: var(--tb-group-cell-min-width);
+  max-width: var(--tb-group-cell-max-width);
+}
+
+:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+:host::ng-deep{
+  & .mdc-data-table__cell, .mdc-data-table__header-cell, .mdc-data-table__cell, .mdc-data-table__header-cell{
+    padding: var(--tb-cell-padding, 0 0 0 .2rem);
+    line-height: var(--tb-cell-line-height, normal);
+  }
+}
+
+::ng-deep .op-date-time-input{
+  line-height: 3rem;
+  font-size: .9rem;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  padding-left: 0.2rem;
+  width: 12rem;
+
+}
+
+.sticky-footer{
+  position: sticky;
+  z-index: 10;
+}