@flywheel-io/vision 1.17.0 → 2.0.0-beta-1

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 {
+}

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

@@ -0,0 +1,198 @@
+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 { FwLayoutsModule } from '../layouts/layouts.module';
+import { FwPaginatorModule } from '../paginator/paginator.module';
+import { FwTableComponent } from './table.component';
+import { FwTableModule } from './table.module';
+
+export default {
+  title: 'Components/Table',
+  component: FwTableComponent,
+  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,
+        FwLayoutsModule,
+        FwPaginatorModule,
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwTableComponent<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' },
+];
+
+const pageSize = 5;
+const tableData = dataSet.slice(0, pageSize < dataSet.length ? pageSize : dataSet.length);
+
+
+export const DefaultTable: Story = {
+  render: (args) => {
+    return ({
+      props: {
+        ...args,
+        dataSource: dataSet,
+        displayedColumns: ['position', 'name', 'weight', 'symbol'],
+      },
+      controls: { disabled: false },
+      template: `
+        <table fw-table [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-avatar content="initial" initial="JD" size="medium"></fw-avatar>
+                  Cell-{{element.position}}
+                </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>
+    `,
+    });
+  },
+};
+
+export const FullExample: Story = {
+  render: (args) => {
+    return ({
+      props: {
+        ...args,
+        dataSource: tableData,
+        displayedColumns: ['position', 'name', 'weight', 'symbol'],
+        selected: tableData[1],
+      },
+      controls: { disabled: false },
+      template: `
+        <fw-layout-panel border="all" rounded="true" [padded]="false" [margin]="true">
+          <fw-table [dataSource]="dataSource">
+            <!-- Position Column -->
+            <ng-container fwColumnDef="position">
+              <fw-header-cell *fwHeaderCellDef>
+                <div class="fw-cell-div">
+                  <fw-checkbox></fw-checkbox>
+                  <span style="padding: 0 8px 0 8px; display: flex;">
+                  <fw-icon size="small">list-test-lab-flask</fw-icon>
+                  </span>
+                  Number
+                </div>
+              </fw-header-cell>
+              <fw-cell *fwCellDef="let element">
+                  <div class="fw-cell-div">
+                    <fw-checkbox [checked]="element.position === selected.position"></fw-checkbox>
+                    <fw-avatar content="initial" initial="JD" size="medium"></fw-avatar>
+                    Cell-{{element.position}}
+                  </div>
+              </fw-cell>
+              <fw-footer-cell *fwFooterCellDef>
+                  <span style="padding: 0 8px 0 8px; display: flex;">
+                  <fw-icon size="small">list-test-lab-flask</fw-icon>
+                  </span>
+                  Number
+              </fw-footer-cell>
+            </ng-container>
+
+            <!-- Name Column -->
+            <ng-container fwColumnDef="name">
+              <fw-header-cell *fwHeaderCellDef fw-sort-header> Name </fw-header-cell>
+              <fw-cell *fwCellDef="let element"> {{element.name}} </fw-cell>
+              <fw-footer-cell *fwFooterCellDef> Name </fw-footer-cell>
+            </ng-container>
+
+            <!-- Weight Column -->
+            <ng-container fwColumnDef="weight">
+              <fw-header-cell *fwHeaderCellDef fw-sort-header> Weight </fw-header-cell>
+              <fw-cell *fwCellDef="let element"> {{element.weight}} </fw-cell>
+              <fw-footer-cell *fwFooterCellDef> Weight </fw-footer-cell>
+            </ng-container>
+
+            <!-- Symbol Column -->
+            <ng-container fwColumnDef="symbol">
+              <fw-header-cell *fwHeaderCellDef fw-sort-header> Symbol </fw-header-cell>
+              <fw-cell *fwCellDef="let element"> {{element.symbol}} </fw-cell>
+              <fw-footer-cell *fwFooterCellDef> Symbol </fw-footer-cell>
+            </ng-container>
+            <fw-header-row *fwHeaderRowDef="displayedColumns"></fw-header-row>
+            <fw-row
+              *fwRowDef="let row; columns: displayedColumns; index as i"
+              [ngClass]='row.position === selected.position ? "selected":""'
+              (click)="selected = row">
+            ></fw-row>
+            <fw-footer-row *fwFooterRowDef="displayedColumns"></fw-footer-row>
+          </fw-table>
+        </fw-layout-panel>
+        <fw-layout-panel [padded]="false" [margin]="true">
+          <fw-layout-group justify="space-between" [padded]="false">
+            <p>&nbsp;1 row selected</p>
+            <fw-paginator-advanced
+              alignment="end"
+              [length]="10"
+              [pageIndex]="0"
+              [pageSize]="5"
+              (page)="page = $event">
+            </fw-paginator-advanced>
+          </fw-layout-group>
+        </fw-layout-panel>
+    `,
+    });
+  },
+};

package/src/components/tabs/tab/tab.component.html

@@ -0,0 +1,3 @@
+<fw-icon *ngIf="icon" size="medium">{{ icon }}</fw-icon>
+<h4 class="vision-h4">{{ title }}</h4>
+<ng-content select="fw-badge"></ng-content>