@flywheel-io/vision 2.0.0-beta.9 → 2.1.0-beta.0

package/src/components/table/table-dense.component.scss

@@ -0,0 +1,178 @@
+@use "../../scss/config/typography";
+
+.fw-table-dense {
+  background-color: var(--card-background);
+  max-height: 100%;
+  width: 100%;
+  overflow: auto;
+  border-collapse: separate;
+  border-spacing: 0;
+  display: block;
+  position: relative;
+
+  .fw-cell-div {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    fw-avatar {
+      margin: -10px 0;
+    }
+
+    fw-checkbox {
+      margin: -10px 0;
+    }
+  }
+
+  .fw-header-row {
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+
+    .fw-header-cell {
+      @extend .vision-h5 !optional;
+
+      display: flex;
+      align-items: center;
+      flex: 1;
+      box-sizing: border-box;
+      padding: 6px 8px 6px 16px;
+      text-align: left;
+      border-bottom: 1px solid var(--separations-base);
+      height: 36px;
+      overflow: hidden;
+
+      fw-icon {
+        font-size: 16px;
+        color: var(--typography-light)
+      }
+    }
+
+    &.fw-table-sticky {
+      position: sticky;
+      top: 0;
+      background: inherit;
+      z-index: 100;
+    }
+  }
+
+  .fw-footer-row {
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+
+    .fw-footer-cell {
+      @extend .vision-h4 !optional;
+
+      border-top: 1px solid var(--separations-base);
+      display: flex;
+      align-items: center;
+      flex: 1;
+      box-sizing: border-box;
+      padding: 6px 8px 6px 16px;
+      text-align: left;
+      height: 32px;
+      margin-top: -1px;
+      overflow: hidden;
+
+      fw-icon {
+        font-size: 16px;
+        color: var(--typography-light)
+      }
+    }
+
+    &.fw-table-sticky {
+      position: sticky;
+      bottom: 0;
+      background: inherit;
+      z-index: 100;
+    }
+  }
+
+  .fw-row {
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--typography-muted);
+
+    &:hover {
+      background-color: var(--slate-hover);
+    }
+
+    &.selected {
+      background-color: var(--primary-hover);
+    }
+
+    .fw-cell {
+      @extend .vision-p3 !optional;
+
+      display: flex;
+      align-items: center;
+      flex: 1;
+      color: var(--typography-muted);
+      border-bottom: 1px solid var(--separations-base);
+      border-top: 1px solid transparent;
+      cursor: pointer;
+      padding: 6px 8px 6px 16px;
+      box-sizing: border-box;
+      height: 32px;
+      overflow: hidden;
+
+      &.no-wrap {
+        white-space: nowrap;
+      }
+
+      &.flex-cell {
+        flex: 1;
+      }
+
+      p {
+        align-items: center;
+        color: var(--typography-muted);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .link {
+        color: var(--primary-base);
+        display: block;
+        align-items: center;
+      }
+
+      fw-avatar {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+
+table.fw-table-dense {
+  display: table;
+
+  tr.fw-header-row {
+    display: table-row;
+
+    th.fw-header-cell {
+      display: table-cell;
+    }
+  }
+
+  tr.fw-row {
+    display: table-row;
+
+    td.fw-cell {
+      display: table-cell;
+    }
+  }
+
+  tr.fw-footer-row {
+    display: table-row;
+
+    td.fw-footer-cell {
+      display: table-cell;
+    }
+  }
+}
+

package/src/components/table/table-dense.component.ts

@@ -0,0 +1,36 @@
+import { _DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY } from '@angular/cdk/collections';
+import {
+  _COALESCED_STYLE_SCHEDULER,
+  _CoalescedStyleScheduler,
+  CDK_TABLE,
+  CdkTable,
+  STICKY_POSITIONING_LISTENER,
+} from '@angular/cdk/table';
+import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'fw-table-dense, table[fw-table-dense]',
+  exportAs: 'fwTableDense',
+  templateUrl: 'table.component.html',
+  styleUrls: ['table-dense.component.scss'],
+  providers: [
+    { provide: CdkTable, useExisting: FwTableDenseComponent },
+    { provide: CDK_TABLE, useExisting: FwTableDenseComponent },
+    { provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler },
+    { provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
+    // Prevent nested tables from seeing this table's StickyPositioningListener.
+    { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+  ],
+  encapsulation: ViewEncapsulation.None,
+  // See note on CdkTable for explanation on why this uses the default change detection strategy.
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
+})
+export class FwTableDenseComponent<T> extends CdkTable<T> {
+  @HostBinding() class: string = ['fw-table-dense', this.fixedLayout ? 'fixedLayout' : ''].join(' ');
+  /** Overrides the sticky CSS class set by the `CdkTable`. */
+  protected override stickyCssClass = 'fw-table-sticky';
+
+  /** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */
+  protected override needsPositionStickyOnElement = false;
+}

package/src/components/table/table-dense.stories.ts

@@ -0,0 +1,105 @@
+import { CdkTableModule } from '@angular/cdk/table';
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwAvatarModule } from '../avatar/avatar.module';
+import { FwCheckboxModule } from '../checkbox/checkbox.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwTableModule } from './table.module';
+import { FwTableDenseComponent } from './table-dense.component';
+
+export default {
+  title: 'Components/Table',
+  component: FwTableDenseComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4964-73403&mode=design&t=kKJ9B1V6klFufk0T-11',
+    },
+  },
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom([
+        BrowserAnimationsModule,
+      ])],
+    }),
+    moduleMetadata({
+      imports: [
+        CdkTableModule,
+        CommonModule,
+        FwTableModule,
+        FwAvatarModule,
+        FwCheckboxModule,
+        FwIconModule,
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwTableDenseComponent<never>>;
+
+
+const dataSet = [
+  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
+  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+];
+
+export const DenseTable: Story = {
+  render: (args) => {
+    return ({
+      props: {
+        ...args,
+        dataSource: dataSet,
+        displayedColumns: ['position', 'name', 'weight', 'symbol'],
+      },
+      controls: { disabled: false },
+      template: `
+        <table fw-table-dense [dataSource]="dataSource">
+          <!-- Position Column -->
+          <ng-container fwColumnDef="position">
+            <th fw-header-cell *fwHeaderCellDef> Number </th>
+            <td fw-cell *fwCellDef="let element">
+                <div class="fw-cell-div">
+                  <fw-checkbox size="compact"></fw-checkbox>
+                  <span>Cell-{{element.position}}</span>
+                </div>
+            </td>
+          </ng-container>
+
+          <!-- Name Column -->
+          <ng-container fwColumnDef="name">
+            <th fw-header-cell *fwHeaderCellDef> Name </th>
+            <td fw-cell *fwCellDef="let element"> {{element.name}} </td>
+          </ng-container>
+
+          <!-- Weight Column -->
+          <ng-container fwColumnDef="weight">
+            <th fw-header-cell *fwHeaderCellDef> Weight </th>
+            <td fw-cell *fwCellDef="let element"> {{element.weight}} </td>
+          </ng-container>
+
+          <!-- Symbol Column -->
+          <ng-container fwColumnDef="symbol">
+            <th fw-header-cell *fwHeaderCellDef> Symbol </th>
+            <td fw-cell *fwCellDef="let element"> {{element.symbol}} </td>
+          </ng-container>
+          <tr fw-header-row *fwHeaderRowDef="displayedColumns"></tr>
+          <tr fw-row *fwRowDef="let row; columns: displayedColumns; index as i">
+          </tr>
+        </table>
+    `,
+    });
+  },
+};

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

@@ -0,0 +1,4 @@
+<ng-container headerRowOutlet></ng-container>
+<ng-container rowOutlet></ng-container>
+<ng-container noDataRowOutlet></ng-container>
+<ng-container footerRowOutlet></ng-container>

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

@@ -0,0 +1,186 @@
+@use "../../scss/config/typography";
+
+.fw-table {
+  background-color: var(--card-background);
+  max-height: 100%;
+  width: 100%;
+  overflow: auto;
+  border-collapse: separate;
+  border-spacing: 0;
+  display: block;
+  position: relative;
+
+  .fw-cell-div {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    fw-avatar {
+      margin: -10px 0;
+    }
+
+    fw-checkbox {
+      margin: -10px 0;
+    }
+  }
+
+  .fw-header-row {
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+
+    .fw-header-cell {
+      @extend .vision-h4 !optional;
+
+      display: flex;
+      align-items: center;
+      flex: 1;
+      box-sizing: border-box;
+      padding: 19px 8px 19px 16px;
+      text-align: left;
+      border-bottom: 1px solid var(--separations-base);
+      height: 56px;
+      overflow: hidden;
+
+      fw-icon {
+        font-size: 18px;
+        width: 18px;
+        max-width: 18px;
+        color: var(--typography-light)
+      }
+    }
+
+    &.fw-table-sticky {
+      position: sticky;
+      top: 0;
+      background: inherit;
+      z-index: 100;
+    }
+  }
+
+  .fw-footer-row {
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+
+    .fw-footer-cell {
+      @extend .vision-h4 !optional;
+
+      border-top: 1px solid var(--separations-base);
+      display: flex;
+      align-items: center;
+      flex: 1;
+      box-sizing: border-box;
+      padding: 19px 8px 19px 16px;
+      text-align: left;
+      height: 52px;
+      margin-top: -1px;
+      overflow: hidden;
+
+      fw-icon {
+        font-size: 18px;
+        width: 18px;
+        max-width: 18px;
+        color: var(--typography-light)
+      }
+    }
+
+    &.fw-table-sticky {
+      position: sticky;
+      bottom: 0;
+      background: inherit;
+      z-index: 100;
+    }
+  }
+
+  .fw-row {
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--typography-muted);
+
+    &:hover {
+      background-color: var(--slate-hover);
+    }
+
+    &.selected {
+      background-color: var(--primary-hover);
+    }
+
+    .fw-cell {
+      @extend .vision-p2 !optional;
+
+      display: flex;
+      align-items: center;
+      flex: 1;
+      color: var(--typography-muted);
+      border-bottom: 1px solid var(--separations-base);
+      border-top: 1px solid transparent;
+      cursor: pointer;
+      padding: 16px 8px 16px 16px;
+      box-sizing: border-box;
+      height: 52px;
+      overflow: hidden;
+
+      &.no-wrap {
+        white-space: nowrap;
+      }
+
+      &.flex-cell {
+        flex: 1;
+      }
+
+      p {
+        align-items: center;
+        color: var(--typography-muted);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .link {
+        color: var(--primary-base);
+        display: block;
+        align-items: center;
+      }
+
+      fw-avatar {
+        margin-right: 8px;
+      }
+    }
+
+    &:last-child {
+      .fw-cell {
+        border-bottom: 1px solid transparent;
+      }
+    }
+  }
+}
+
+table.fw-table {
+  display: table;
+
+  tr.fw-header-row {
+    display: table-row;
+
+    th.fw-header-cell {
+      display: table-cell;
+    }
+  }
+
+  tr.fw-row {
+    display: table-row;
+
+    td.fw-cell {
+      display: table-cell;
+    }
+  }
+
+  tr.fw-footer-row {
+    display: table-row;
+
+    td.fw-footer-cell {
+      display: table-cell;
+    }
+  }
+}

package/src/components/table/table.component.ts

@@ -0,0 +1,36 @@
+import { _DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY } from '@angular/cdk/collections';
+import {
+  _COALESCED_STYLE_SCHEDULER,
+  _CoalescedStyleScheduler,
+  CDK_TABLE,
+  CdkTable,
+  STICKY_POSITIONING_LISTENER,
+} from '@angular/cdk/table';
+import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'fw-table, table[fw-table]',
+    exportAs: 'fwTable',
+    templateUrl: 'table.component.html',
+    styleUrls: ['table.component.scss'],
+    providers: [
+        { provide: CdkTable, useExisting: FwTableComponent },
+        { provide: CDK_TABLE, useExisting: FwTableComponent },
+        { provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler },
+        { provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
+        // Prevent nested tables from seeing this table's StickyPositioningListener.
+        { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+    ],
+    encapsulation: ViewEncapsulation.None,
+    // See note on CdkTable for explanation on why this uses the default change detection strategy.
+    // tslint:disable-next-line:validate-decorators
+    changeDetection: ChangeDetectionStrategy.Default,
+})
+export class FwTableComponent<T> extends CdkTable<T> {
+    @HostBinding() class: string = ['fw-table', this.fixedLayout ? 'fixedLayout' : ''].join(' ');
+    /** Overrides the sticky CSS class set by the `CdkTable`. */
+    protected override stickyCssClass = 'fw-table-sticky';
+
+    /** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */
+    protected override needsPositionStickyOnElement = false;
+}

package/src/components/table/table.mdx

@@ -0,0 +1,83 @@
+import {Canvas, Description, Meta, Subtitle, Title} from '@storybook/blocks';
+
+import * as TableStories from './table.stories'
+import * as TableDenseStories from './table-dense.stories';
+
+<Meta of={TableStories}/>
+<Title/>
+
+```ts
+import FwTableModule from '@flywheel-io/vision';
+
+<table fw-table [dataSource]="dataSource">
+    ...
+</table>
+
+<table fw-table-dense [dataSource]="dataSource">
+    ...
+</table>
+```
+
+This works with any components that use [CdkTable](https://v17.material.angular.io/cdk/table/overview)
+as their base such as [MatTable](https://v17.material.angular.io/components/table/overview)
+so for example in the above example **[dataSource]** can be anything that is compatible with
+an '@angular/cdk/collections' DataSource, such as an Array of Objects or a MatTableDataSource.
+
+Similarly anything that inherits Cdk Definitions can be used interchangeably with `fw-table`, `fw-row, fw-header-row, fw-footer-row`, `fw-cell, fw-header-cell, fw-footer-cell`.
+
+```ts
+// using vision only
+<ng-container fwColumnDef="name">
+  <th fw-header-cell *fwHeaderCellDef> Name </th>
+  <td fw-cell *fwCellDef="let element"> {{element.name}} </td>
+</ng-container>
+
+// using cdkTable data
+<ng-container cdkColumnDef="name">
+  <th fw-header-cell *cdkHeaderCellDef> Name </th>
+  <td fw-cell *cdkCellDef="let element"> {{element.name}} </td>
+</ng-container>
+
+// using matTable data
+<ng-container matColumnDef="name">
+  <th fw-header-cell *matHeaderCellDef> Name </th>
+  <td fw-cell *matCellDef="let element"> {{element.name}} </td>
+</ng-container>
+
+// alternative use without table tags
+<ng-container fwColumnDef="name">
+  <fw-header-cell *fwHeaderCellDef> Name </fw-header-cell>
+  <fw-cell *fwCellDef="let element"> {{element.name}} </fw-cell>
+</ng-container>
+```
+
+```ts
+// using vision only
+<tr fw-header-row *fwHeaderRowDef="displayedColumns"></tr>
+<tr fw-row *fwRowDef="let row; columns: displayedColumns; index as i"></tr>
+
+// using cdkTable data
+<tr fw-header-row *cdkHeaderRowDef="displayedColumns"></tr>
+<tr fw-row *cdkRowDef="let row; columns: displayedColumns; index as i"></tr>
+
+// using matTable data
+<tr fw-header-row *matHeaderRowDef="displayedColumns"></tr>
+<tr fw-row *matRowDef="let row; columns: displayedColumns; index as i"></tr>
+
+// alternative use without table tags
+<fw-header-row *fwHeaderRowDef="displayedColumns"></fw-header-row>
+<fw-row *fwRowDef="let row; columns: displayedColumns; index as i"></fw-row>
+```
+
+
+<Subtitle/>
+<Description/>
+
+### Default Table
+<Canvas of={TableStories.DefaultTable}/>
+
+### Dense Table
+<Canvas of={TableDenseStories.DenseTable}/>
+
+### Full Example
+<Canvas of={TableStories.FullExample}/>

package/src/components/table/table.module.ts

@@ -0,0 +1,53 @@
+import { CdkTableModule } from '@angular/cdk/table';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FwCell, FwCellDef, FwColumnDef, FwFooterCell, FwFooterCellDef, FwHeaderCell, FwHeaderCellDef } from './cell';
+import { FwFooterRow, FwFooterRowDef, FwHeaderRow, FwHeaderRowDef, FwNoDataRow, FwRow, FwRowDef } from './row';
+import { FwTableComponent } from './table.component';
+import { FwTableDenseComponent } from './table-dense.component';
+
+@NgModule({
+  imports: [
+    CdkTableModule,
+    CommonModule,
+    FwCell,
+    FwCellDef,
+    FwColumnDef,
+    FwFooterCell,
+    FwFooterCellDef,
+    FwHeaderCell,
+    FwHeaderCellDef,
+  ],
+  exports: [
+    FwCell,
+    FwCellDef,
+    FwColumnDef,
+    FwFooterCell,
+    FwFooterCellDef,
+    FwFooterRow,
+    FwFooterRowDef,
+    FwHeaderCell,
+    FwHeaderCellDef,
+    FwHeaderRow,
+    FwHeaderRowDef,
+    FwNoDataRow,
+    FwRow,
+    FwRowDef,
+    FwTableComponent,
+    FwTableDenseComponent,
+  ],
+  declarations: [
+    FwTableComponent,
+    FwTableDenseComponent,
+    FwRow,
+    FwRowDef,
+    FwFooterRow,
+    FwFooterRowDef,
+    FwHeaderRow,
+    FwHeaderRowDef,
+    FwNoDataRow,
+  ],
+})
+export class FwTableModule {
+}