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

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

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

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

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

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

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

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

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

@@ -1,53 +0,0 @@
-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 {
-}