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

package/src/components/switch/switch.component.ts

@@ -0,0 +1,58 @@
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'fw-switch',
+  templateUrl: './switch.component.html',
+  styleUrls: ['./switch.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FwSwitchComponent),
+      multi: true,
+    },
+  ],
+})
+export class FwSwitchComponent implements ControlValueAccessor {
+  @Input() name?: string;
+  @Input() title?: string;
+  @Input() titlePosition?: 'start' | 'end' = 'end';
+  @Input() size?: 'small' | 'medium' = 'medium';
+  @Input() color?: 'default' | 'primary' | 'secondary' = 'primary';
+  @Input() disabled?: boolean;
+  @Input() checked: boolean = false;
+
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() change = new EventEmitter<boolean>();
+
+  onChange: (value: boolean) => void;
+  onTouched = (): void => {
+  };
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  writeValue(checked: boolean): void {
+    this.checked = checked;
+  }
+
+  handleClick(): void {
+    this.onTouched();
+    if (!this.disabled) {
+      this.checked = !this.checked;
+      if (this.onChange) {
+        this.onChange(this.checked);
+      }
+      this.change.emit(this.checked);
+    }
+  }
+}

package/src/components/switch/switch.mdx

@@ -0,0 +1,39 @@
+import {Controls, Description, Meta, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
+
+import * as SwitchStories from './switch.stories';
+
+<Meta of={SwitchStories}/>
+<Title/>
+
+```ts
+import FwSwitchModule from '@flywheel-io/vision';
+```
+
+## Managing state directly
+```html
+<fw-switch title="Title" [checked]="switchChecked" (change)="switchChanged($event)"></fw-switch>
+```
+
+## Using with ngModel
+```html
+<fw-switch title="Title" [(ngModel)]="switchChecked"></fw-switch>
+```
+
+## Using with a FormControl
+
+This component implements [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor). So it will work with Angular's reactive forms and template-driven forms. Simply use it as you would any other form element, for example:
+```html
+<fw-switch title="Title" [formControl]="myFormControl"></fw-switch>
+
+// or
+
+<form [formGroup]="form">
+  <fw-switch title="Title" formControlName="myFormControl"></fw-switch>
+</form>
+```
+
+<Subtitle/>
+<Description/>
+<Primary/>
+<Controls/>
+<Stories/>

package/src/components/switch/switch.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FwSwitchComponent } from './switch.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    FwSwitchComponent,
+  ],
+  declarations: [
+    FwSwitchComponent,
+  ],
+})
+export class FwSwitchModule {
+}

package/src/components/switch/switch.stories.ts

@@ -0,0 +1,117 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwSwitchComponent } from './switch.component';
+import { FwSwitchModule } from './switch.module';
+
+export default {
+  title: 'Form Controls/Switch',
+  component: FwSwitchComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=1676-61160&mode=dev',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwSwitchModule,
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwSwitchComponent>;
+
+export const Playground: Story = {
+  args: {
+    title: 'Switch',
+    checked: true,
+    disabled: false,
+    color: 'primary',
+    titlePosition: 'end',
+    size: 'medium',
+  },
+};
+
+export const Overview: Story = {
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <div>
+          <style> tr, td { padding: 16px; font-family: Inter } </style>
+          <table>
+              <tr>
+                  <th></th>
+                  <th>checked<br/>false</th>
+                  <th>checked<br/>true</th>
+                  <th>disabled<br/>true</th>
+                  <th>with<br/>title</th>
+                  <th>size<br/>small</th>
+              </tr>
+              <tr>
+                  <th>default</th>
+                  <td>
+                      <fw-switch></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch [checked]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch [disabled]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch title="Title"></fw-switch>
+                  </td>
+                  <td>
+                     <fw-switch size="small" [checked]="true" title="Title"></fw-switch>
+                  </td>
+              </tr>
+              <tr>
+                  <th>primary</th>
+                  <td>
+                      <fw-switch color="primary"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="primary" [checked]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="primary" [disabled]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="primary" title="Title"></fw-switch>
+                  </td>
+                  <td>
+                     <fw-switch color="primary" size="small" [checked]="true" title="Title"></fw-switch>
+                  </td>
+              </tr>
+              <tr>
+                  <th>secondary</th>
+                  <td>
+                      <fw-switch color="secondary"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="secondary" [checked]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="secondary" [disabled]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="secondary" title="Title"></fw-switch>
+                  </td>
+                  <td>
+                     <fw-switch color="secondary" size="small" [checked]="true" title="Title"></fw-switch>
+                  </td>
+              </tr>
+
+          </table>
+      </div>
+
+    `,
+  }),
+};

package/src/components/table/cell.ts

@@ -0,0 +1,111 @@
+/* eslint @angular-eslint/directive-class-suffix: 0 */
+/* eslint  @angular-eslint/directive-selector: 0 */
+
+import {
+  CdkCell,
+  CdkCellDef,
+  CdkColumnDef,
+  CdkFooterCell,
+  CdkFooterCellDef,
+  CdkHeaderCell,
+  CdkHeaderCellDef,
+} from '@angular/cdk/table';
+import { Directive, HostBinding, Input } from '@angular/core';
+
+/**
+ * Cell definition for the fw-table.
+ * Captures the template of a column's data row cell as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[fwCellDef]',
+  providers: [{ provide: CdkCellDef, useExisting: FwCellDef }],
+  standalone: true,
+})
+export class FwCellDef extends CdkCellDef {
+}
+
+/**
+ * Header cell definition for the fw-table.
+ * Captures the template of a column's header cell and as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[fwHeaderCellDef]',
+  providers: [{ provide: CdkHeaderCellDef, useExisting: FwHeaderCellDef }],
+  standalone: true,
+})
+export class FwHeaderCellDef extends CdkHeaderCellDef {
+}
+
+/**
+ * Footer cell definition for the fw-table.
+ * Captures the template of a column's footer cell and as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[fwFooterCellDef]',
+  providers: [{ provide: CdkFooterCellDef, useExisting: FwFooterCellDef }],
+  standalone: true,
+})
+export class FwFooterCellDef extends CdkFooterCellDef {
+}
+
+/**
+ * Column definition for the fw-table.
+ * Defines a set of cells available for a table column.
+ */
+@Directive({
+  selector: '[fwColumnDef]',
+  providers: [
+    { provide: CdkColumnDef, useExisting: FwColumnDef },
+  ],
+  standalone: true,
+})
+export class FwColumnDef extends CdkColumnDef {
+  /** Unique name for this column. */
+  @Input('fwColumnDef')
+  override get name(): string {
+    return this._name;
+  }
+
+  override set name(name: string) {
+    this._setNameInput(name);
+  }
+
+  /**
+   * Add "fw-column-" prefix in addition to "cdk-column-" prefix.
+   * In the future, this will only add "fw-column-" and columnCssClassName
+   * will change from type string[] to string.
+   * @docs-private
+   */
+  protected override _updateColumnCssClassName(): void {
+    super._updateColumnCssClassName();
+    this._columnCssClassName!.push(`fw-column-${this.cssClassFriendlyName}`);
+  }
+}
+
+/** Header cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'fw-header-cell, th[fw-header-cell]',
+  standalone: true,
+})
+export class FwHeaderCell extends CdkHeaderCell {
+  @HostBinding() class: string = 'fw-header-cell';
+  @HostBinding() role: string = 'columnheader';
+}
+
+/** Footer cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'fw-footer-cell, td[fw-footer-cell]',
+  standalone: true,
+})
+export class FwFooterCell extends CdkFooterCell {
+  @HostBinding() class: string = 'fw-footer-cell';
+}
+
+/** Cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'fw-cell, td[fw-cell]',
+  standalone: true,
+})
+export class FwCell extends CdkCell {
+  @HostBinding() class: string = 'fw-cell';
+}

package/src/components/table/row.ts

@@ -0,0 +1,113 @@
+/* eslint @angular-eslint/directive-class-suffix: 0 */
+/* eslint @angular-eslint/directive-selector: 0 */
+/* eslint @angular-eslint/component-class-suffix:0 */
+
+import {
+  CdkFooterRow,
+  CdkFooterRowDef,
+  CdkHeaderRow,
+  CdkHeaderRowDef,
+  CdkNoDataRow,
+  CdkRow,
+  CdkRowDef,
+} from '@angular/cdk/table';
+import { ChangeDetectionStrategy, Component, Directive, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+
+const ROW_TEMPLATE = '<ng-container cdkCellOutlet></ng-container>';
+
+/**
+ * Header row definition for the fw-table.
+ * Captures the header row's template and other header properties such as the columns to display.
+ */
+@Directive({
+  selector: '[fwHeaderRowDef]',
+  providers: [{ provide: CdkHeaderRowDef, useExisting: FwHeaderRowDef }],
+})
+export class FwHeaderRowDef extends CdkHeaderRowDef {
+  @Input('fwHeaderRowDef') columns: string[];
+  @Input('fwHeaderRowDefSticky') sticky: boolean;
+}
+
+/**
+ * Footer row definition for the fw-table.
+ * Captures the footer row's template and other footer properties such as the columns to display.
+ */
+@Directive({
+  selector: '[fwFooterRowDef]',
+  providers: [{ provide: CdkFooterRowDef, useExisting: FwFooterRowDef }],
+})
+export class FwFooterRowDef extends CdkFooterRowDef {
+  @Input('fwFooterRowDef') columns: string[];
+  @Input('fwFooterRowDefSticky') sticky: boolean;
+}
+
+/**
+ * Data row definition for the fw-table.
+ * Captures the data row's template and other properties such as the columns to display and
+ * a when predicate that describes when this row should be used.
+ */
+@Directive({
+  selector: '[fwRowDef]',
+  providers: [{ provide: CdkRowDef, useExisting: FwRowDef }],
+})
+export class FwRowDef<T> extends CdkRowDef<T> {
+  @Input('fwRowDefColumns') columns: string[];
+  @Input('fwRowDefWhen') when: (index: number, rowData: T) => boolean;
+}
+
+/** Header template container that contains the cell outlet. Adds the right class and role. */
+@Component({
+  selector: 'fw-header-row, tr[fw-header-row]',
+  template: ROW_TEMPLATE,
+  // See note on CdkTable for explanation on why this uses the default change detection strategy.
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'fwHeaderRow',
+  providers: [{ provide: CdkHeaderRow, useExisting: FwHeaderRow }],
+})
+export class FwHeaderRow extends CdkHeaderRow {
+  @HostBinding() class = 'fw-header-row';
+  @HostBinding() role = 'row';
+}
+
+/** Footer template container that contains the cell outlet. Adds the right class and role. */
+@Component({
+  selector: 'fw-footer-row, tr[fw-footer-row]',
+  template: ROW_TEMPLATE,
+  // See note on CdkTable for explanation on why this uses the default change detection strategy.
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'fwFooterRow',
+  providers: [{ provide: CdkFooterRow, useExisting: FwFooterRow }],
+})
+export class FwFooterRow extends CdkFooterRow {
+  @HostBinding() class = 'fw-footer-row';
+  @HostBinding() role = 'row';
+}
+
+/** Data row template container that contains the cell outlet. Adds the right class and role. */
+@Component({
+  selector: 'fw-row, tr[fw-row]',
+  template: ROW_TEMPLATE,
+  // See note on CdkTable for explanation on why this uses the default change detection strategy.
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'fwRow',
+  providers: [{ provide: CdkRow, useExisting: FwRow }],
+})
+export class FwRow extends CdkRow {
+  @HostBinding() class = 'fw-row';
+  @HostBinding() role = 'row';
+}
+
+/** Row that can be used to display a message when no data is shown in the table. */
+@Directive({
+  selector: 'ng-template[fwNoDataRow]',
+  providers: [{ provide: CdkNoDataRow, useExisting: FwNoDataRow }],
+})
+export class FwNoDataRow extends CdkNoDataRow {
+  override _contentClassName = 'fw-no-data-row';
+}

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