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

package/src/components/switch/switch.component.scss

@@ -1,179 +0,0 @@
-.fw-switch {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  margin-left: 12px;
-  margin-right: 8px;
-  height: 22px;
-  box-sizing: border-box;
-
-  p {
-    margin: 0;
-  }
-
-  input {
-    display: none;
-  }
-
-  label {
-    margin-left: 8px;
-    margin-right: 8px;
-    cursor: pointer;
-  }
-
-  .switch-track {
-    position: relative;
-    width: 34px;
-    height: 14px;
-    transition: all .4s ease;
-
-    .switch-slide {
-      width: 34px;
-      height: 14px;
-      border-radius: 10px;
-      opacity: 0.1;
-      background: var(--slate-dark);
-      position: absolute;
-      top: 0;
-      left: 0;
-      transition: background-color 200ms linear, opacity 200ms linear;
-    }
-
-    .switch-knob {
-      width: 20px;
-      height: 20px;
-      background-color: var(--slate-light);
-      border-radius: 10px;
-      filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.20));
-      position: absolute;
-      top: -3px;
-      left: -3px;
-      transition: left .5s cubic-bezier(0.175, 0.885, 0.320, 1.275), padding .3s ease, margin .3s ease;
-
-      &:hover {
-        outline: 9px solid var(--slate-hover);
-      }
-    }
-
-    &.checked {
-      .switch-slide {
-        background-color: var(--slate-dark);
-        opacity: .6;
-        transition: background-color 200ms linear, opacity 200ms linear;
-      }
-
-      .switch-knob {
-        transition: background-color 200ms linear, opacity 200ms linear,
-        left .5s cubic-bezier(0.175, 0.885, 0.320, 1.275),
-        padding .3s ease, margin .3s ease;
-        left: 16px;
-      }
-    }
-  }
-
-  &.primary {
-    .switch-track {
-      &.checked {
-        .switch-slide {
-          background-color: var(--primary-base);
-          transition: background-color 200ms linear, opacity 200ms linear;
-        }
-
-        .switch-knob {
-          background-color: var(--primary-base);
-
-          &:hover {
-            outline: 9px solid var(--primary-hover);
-          }
-        }
-      }
-    }
-  }
-
-  &.secondary {
-    .switch-track {
-      &.checked {
-        .switch-slide {
-          background-color: var(--secondary-base);
-        }
-
-        .switch-knob {
-          background-color: var(--secondary-base);
-
-          &:hover {
-            outline: 9px solid var(--secondary-hover);
-          }
-        }
-      }
-    }
-  }
-
-  &.title-start {
-    flex-direction: row-reverse;
-
-    label {
-      margin-right: 10px;
-      margin-left: 0;
-    }
-  }
-
-  &.size-small {
-    height: 20px;
-    
-    .switch-track {
-      position: relative;
-      width: 26px;
-      height: 10px;
-
-      .switch-slide {
-        width: 26px;
-        height: 10px;
-        border-radius: 10px;
-      }
-
-      .switch-knob {
-        width: 16px;
-        height: 16px;
-        border-radius: 8px;
-
-        &:hover {
-          outline-width: 7px;
-        }
-      }
-
-      &.checked {
-        .switch-knob {
-          left: 13px;
-        }
-      }
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    p {
-      color: var(--typography-light);
-    }
-
-    .switch-track {
-      opacity: .5;
-
-      &.checked {
-        .switch-slide {
-          background-color: var(--slate-base);
-        }
-
-        .switch-knob {
-          background-color: var(--slate-light);
-
-          &:hover {
-            outline: 9px solid transparent;
-          }
-        }
-      }
-    }
-  }
-
-
-}

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

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FwSwitchComponent } from './switch.component';
-
-describe('FwSwitchComponent', () => {
-  let component: FwSwitchComponent;
-  let fixture: ComponentFixture<FwSwitchComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FwSwitchComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FwSwitchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

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

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

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

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

@@ -1,111 +0,0 @@
-/* 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

@@ -1,113 +0,0 @@
-/* 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';
-}