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

package/src/components/select-menu/multi-select-menu/multi-select-menu.component.ts

@@ -0,0 +1,324 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import {
+  AfterContentInit,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  QueryList,
+  SimpleChanges,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+import { FwMenuComponent } from '../../menu/menu.component';
+import { FwMenuItemComponent } from '../../menu/menu-item/menu-item.component';
+
+@Component({
+  selector: 'fw-multi-select',
+  templateUrl: './multi-select-menu.component.html',
+  styleUrls: ['./multi-select-menu.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FwMultiSelectMenuComponent),
+      multi: true,
+    },
+  ],
+})
+export class FwMultiSelectMenuComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnDestroy {
+  @HostListener('document:click') outsideClick(): void {
+    if (this._isOpen) {
+      this.trigger.close();
+      this._isOpen = false;
+    }
+    if (this.trigger && this.trigger.isOpen()) {
+      this._isOpen = true;
+    }
+  }
+
+  @Input() options: object[] = [];
+  @Input() valueProperty?: string = 'value';
+  @Input() titleProperty?: string = 'title';
+  @Input() iconProperty?: string = 'icon';
+  @Input() disabled?: boolean = false;
+  @Input() useCheckbox?: boolean = false;
+  @Input() closeOnSelect?: boolean = true;
+  @Input() filterItemsOnSelect?: boolean = true;
+  @Input() maxSelectedShown: number = 100;
+  @Input() width: string = '200px';
+  @Input() minHeight: string = '';
+  @Input() maxHeight: string = '200px';
+  @Input() optionsWidth?: string;
+  @Input() minOptionsHeight?: string;
+  @Input() maxOptionsHeight?: string;
+  @Input() size?: 'small' | 'medium' | 'large' = 'medium';
+  @Input() placeholder: string = 'Select something...';
+  @Input() emptyText: string = 'No matches found...';
+  @ViewChild(CdkMenuTrigger) trigger: CdkMenuTrigger;
+  @ViewChild(FwMenuComponent) menu: FwMenuComponent;
+  @ViewChildren(FwMenuItemComponent) renderedMenuItems: QueryList<FwMenuItemComponent>;
+  @ContentChildren(FwMenuItemComponent) menuItems: QueryList<FwMenuItemComponent>;
+  selectedValues: string[] = [];
+  selectedOptions: object[] = [];
+  filteredOptions: object[] = [];
+  private subscriptions: Subscription[] = [];
+  @ViewChild('textInput') textInput: ElementRef<HTMLInputElement>;
+  @ViewChild('textInitialInput') textInitialInput: ElementRef<HTMLInputElement>;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() change = new EventEmitter<any>();
+  focused = 0;
+  private touched = false;
+  private _isOpen = false;
+
+  @Input()
+  get value(): any[] {
+    return this._value;
+  }
+
+  set value(newValue: any[]) {
+    this.updateValue(newValue);
+  }
+
+  private _value: any[] = [];
+
+  constructor(protected _changeDetectorRef: ChangeDetectorRef) {
+  }
+
+
+  onChange: (value: any[]) => void;
+  onTouched = (): void => {
+  };
+
+  registerOnChange(fn: (value: any[]) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  writeValue(value: any[]): void {
+    // this.updateValue(value);
+    this.value = value;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.options) {
+      this.filteredOptions = this.options;
+    }
+  }
+
+  ngOnDestroy(): void {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
+  }
+
+  ngAfterContentInit(): void {
+    if (this.menuItems && this.menuItems.length > 0) {
+      if (this.options && this.options.length === 0) {
+        this.options = [];
+        this.menuItems.forEach(item => {
+          const opt = {
+            value: item.value,
+            label: item.title,
+            icon: item.icon,
+          };
+          this.options.push(opt);
+          if (this.selectedValues.indexOf(item.value.toString()) >= 0) {
+            this.selectedOptions.push(opt);
+          }
+          const sub = item.click.subscribe(value => this.menu.writeValue(value));
+          this.subscriptions.push(sub);
+        });
+        this.updateFilteredItems();
+      }
+    }
+  }
+
+  handleTouched(): void {
+    this.touched = true;
+  }
+
+  handleClose(chip: object): void {
+    this.value.splice(this.value.indexOf(chip[this.valueProperty]), 1);
+    this.updateValue(this.value);
+    this.trigger.close();
+  }
+
+  handleChange(e: string[]): void {
+    if (Array.isArray(e)) {
+      if (e.toString() !== this.selectedValues.toString()) {
+        if (this.closeOnSelect) {
+          this.trigger.close();
+        }
+      }
+      this.updateValue(e);
+    }
+  }
+
+  updateFilteredItems(): void {
+    if (this.filterItemsOnSelect && this.options && this.value) {
+      this.filteredOptions = this.options.filter(i => !this.value.includes(i[this.valueProperty]));
+    }
+
+    if (this.value) {
+      if (this.value.length === 0) {
+        setTimeout(() => {
+          // this needs to be delayed to give time for element swap to happen
+          if (this.textInitialInput && this.textInitialInput.nativeElement && this.touched) {
+            // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+            this.textInitialInput.nativeElement.focus();
+          }
+        }, 100);
+      } else {
+        setTimeout(() => {
+          // this needs to be delayed to give time for element swap to happen
+          if (this.textInput && this.textInput.nativeElement && this.touched) {
+            // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+            this.textInput.nativeElement.focus();
+          }
+        }, 100);
+      }
+    }
+  }
+
+  updateValue(value: any[]): void {
+    this.selectedValues = [];
+    this.selectedOptions = [];
+    if (value) {
+      value.forEach(val => {
+        if (typeof val === 'object') {
+          this.selectedValues.push(val[this.valueProperty]);
+          this.selectedOptions.push(val);
+        } else {
+          this.selectedValues.push(val);
+          if (this.options && this.options.length) {
+            this.selectedOptions = [];
+            this.options.forEach(opt => {
+              if (value.indexOf(opt[this.valueProperty]) >= 0) {
+                this.selectedOptions.push(opt);
+              }
+            });
+          }
+        }
+      });
+    }
+    this._value = this.selectedValues;
+    this.updateFilteredItems();
+    if (this.onChange) {
+      this.onChange(value);
+    }
+    this.change.emit(value);
+    if (this.textInput && this.textInput.nativeElement) {
+      this.textInput.nativeElement.value = '';
+    }
+  }
+
+  moveFocused(direction: string): void {
+    switch (direction) {
+      case 'down': {
+        this.focused++;
+        if (this.focused >= this.filteredOptions.length) {
+          this.focused = 0;
+        }
+        break;
+      }
+      case 'up': {
+        this.focused--;
+        if (this.focused < 0) {
+          this.focused = this.filteredOptions.length - 1;
+        }
+        break;
+      }
+      default: {
+        this.focused = 0;
+        break;
+      }
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent): void {
+    if (this.trigger.isOpen()) {
+      if (event.key === 'ArrowDown') {
+        this.moveFocused('down');
+      } else if (event.key === 'ArrowUp') {
+        this.moveFocused('up');
+      } else if (event.key === 'Tab') {
+        this.trigger.close();
+        if (event.target) {
+          event.target['value'] = '';
+        }
+        this.filteredOptions = this.options;
+      } else if (event.key === 'Escape') {
+        this.trigger.close();
+        if (event.target) {
+          event.target['value'] = '';
+        }
+        this.filteredOptions = this.options;
+      } else if (event.key === 'Enter') {
+        if (this.filteredOptions.length > this.focused) {
+          if (!this.value.includes(this.filteredOptions[this.focused])) {
+            const newValue = [...this.value, this.filteredOptions[this.focused][this.valueProperty]];
+            if (event.target) {
+              event.target['value'] = '';
+            }
+            this.filteredOptions = this.options;
+            this.updateValue(newValue);
+            if (this.closeOnSelect) {
+              setTimeout(() => {
+                this.trigger.close();
+              }, 0);
+            } else {
+              setTimeout(() => {
+                this.trigger.open();
+              }, 0);
+
+            }
+          }
+        }
+      }
+    } else {
+      if (event.key === 'Backspace') {
+        if (this.value.length > 0 && event.target['value'].length === 0) {
+          this.value.splice(this.value.length - 1, 1);
+          this.updateValue(this.value);
+        }
+      }
+    }
+  }
+
+  handleInput(event: Event): void {
+    if (event.target['value'].length > 0) {
+      this.filteredOptions = this.options.filter(option => {
+        if (option[this.titleProperty].toLowerCase().includes(event.target['value'].toLowerCase())) {
+          return !this.value.includes(option);
+        } else {
+          return false;
+        }
+      });
+    } else {
+      this.filteredOptions = this.options;
+      this.updateFilteredItems();
+    }
+    if (!this.trigger.isOpen()) {
+      this.trigger.open();
+    }
+    this.moveFocused('zero');
+  }
+}

package/src/components/select-menu/multi-select-menu/multi-select-menu.stories.ts

@@ -0,0 +1,177 @@
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwIconModule } from '../../icon/icon.module';
+import { FwMenuModule } from '../../menu/menu.module';
+import { FwTextInputModule } from '../../text-input/text-input.module';
+import { FwSelectMenuModule } from '../select-menu.module';
+import { FwMultiSelectMenuComponent } from './multi-select-menu.component';
+
+export default {
+  title: 'Form Controls/Select',
+  component: FwMultiSelectMenuComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4959-73505&mode=design&t=oWH7ZDZej5cyHY4O-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwIconModule,
+        FwMenuModule,
+        FwSelectMenuModule,
+        FwTextInputModule,
+        FormsModule,
+      ],
+    }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwMultiSelectMenuComponent>;
+
+export const MultiSelect: Story = {
+  args: {
+    placeholder: 'Select something...',
+    emptyText: 'No matches found...',
+    closeOnSelect: true,
+    filterItemsOnSelect: true,
+    maxSelectedShown: 100,
+    titleProperty: 'title',
+    valueProperty: 'value',
+    iconProperty: 'icon',
+    disabled: false,
+    useCheckbox: false,
+    size: 'medium',
+    width: '200px',
+    maxHeight: '200px',
+    options: [
+      { title: 'Owner', value: 'owner', icon: 'icon-placeholder' },
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'icon-placeholder' },
+      { title: 'Member', value: 'member', icon: 'icon-placeholder' },
+    ],
+  },
+};
+
+export const MultiSelectChecked: Story = {
+  args: {
+    placeholder: 'Select role',
+    emptyText: 'No roles found...',
+    closeOnSelect: false,
+    filterItemsOnSelect: false,
+    useCheckbox: true,
+    size: 'medium',
+    width: '433px',
+    value: [],
+    options: [
+      { value: 'Contributor', title: 'Contributor' },
+      { value: 'Data Manager', title: 'Data Manager' },
+      { value: 'Data Scientist', title: 'Data Scientist' },
+      { value: 'ML Engineer', title: 'ML Engineer' },
+      { value: 'Principle Investigator', title: 'Principle Investigator' },
+      { value: 'Radiologist', title: 'Radiologist' },
+      { value: 'Research Coordinator', title: 'Research Coordinator' },
+      { value: 'Site Administrator', title: 'Site Administrator, IT' },
+      { value: 'Other', title: 'Other' },
+    ],
+  },
+};
+
+export const MultiSelectExamples: Story = {
+  args: {
+    options: [
+      { title: 'Owner', value: 'owner', icon: 'icon-placeholder' },
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'icon-placeholder' },
+      { title: 'Member', value: 'member', icon: 'icon-placeholder' },
+    ],
+    value: [
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'icon-placeholder' },
+    ],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      directValues: ['admin', 'developer'],
+    },
+    controls: { disabled: false },
+    template: `
+        <style>
+            th{
+            vertical-align: top;
+            text-align: left;
+            font-size: 12px;
+            padding-left: 10px;
+            font-family: Inter;
+            }
+        </style>
+        <table>
+          <tr>
+            <th>
+              MultiSelect
+              <li>maxSelectedShown: 100</li>
+              <li>filterItemsOnSelect: true</li>
+              <li>closeOnSelect: true</li>
+            </th>
+            <th>
+              MultiSelect
+              <li>maxSelectedShown: 1</li>
+              <li>filterItemsOnSelect: false</li>
+              <li>closeOnSelect: false</li>
+            </th>
+            <th>
+              Select
+              <li>shown for contrast</li>
+            </th>
+          </tr>
+           <tr>
+            <td>
+              <fw-multi-select
+                [(ngModel)]="directValues"
+                [options]="options"
+                [filterItemsOnSelect]="true"
+                width="260px"
+                placeholder="Select Permissions...">
+              </fw-multi-select>
+            </td>
+            <td>
+              <fw-multi-select
+                [(ngModel)]="value"
+                [options]="options"
+                [maxSelectedShown]="1"
+                [filterItemsOnSelect]="false"
+                [closeOnSelect]="false"
+                width="220px"
+                placeholder="Select Permissions...">
+              </fw-multi-select>
+            </td>
+            <td>
+                <fw-select
+                [value]="value[0]"
+                [options]="options"
+                width="220px"
+                placeholder="Select Permissions...">
+              </fw-select>
+            </td>
+          </tr>
+        </table>
+
+    `,
+  }),
+};

package/src/components/select-menu/select-menu.component.html

@@ -0,0 +1,39 @@
+<div [ngStyle]="{width: width, cursor: 'pointer'}">
+  <fw-text-input
+    [cdkMenuTriggerFor]="selectMenu"
+    [value]="selectTitle"
+    [leftIcon]="staticIcon || selectIcon"
+    [rightIcon]="(selectTitle&&showReset)?'close-circled':'chevron-down'"
+    (rightIconAction)="handleReset()"
+    [useActionableIcons]="true"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+    [size]="size"
+    [error]="errored || (invalid && touched)"
+    (keyup)="handleKeyUp($event)"
+    (keydown)="handleKeyDown($event)"
+    readOnly="true">
+  </fw-text-input>
+  <ng-template #selectMenu>
+    <fw-menu-container
+      [filterText]="filterValue"
+      *ngIf="!disabled" [showFilter]="showFilter" [width]="optionsWidth || width"
+      [maxHeight]="maxOptionsHeight" [minHeight]="minOptionsHeight" (filterChanged)="onFilterChanged($event)">
+      <fw-menu [disabled]="disabled" [value]="selectValue" (change)="handleClick($event)">
+        <ng-container *ngIf="menuItems.length===0">
+          <fw-menu-item
+            *ngFor="let item of options"
+            [title]="item[titleProperty]?.toString()"
+            [description]="item[descriptionProperty]"
+            [value]="item[valueProperty]?.toString()"
+            [icon]="item[iconProperty]"
+          >
+          </fw-menu-item>
+        </ng-container>
+        <div #menuContentWrapper>
+        <ng-content select="[fw-menu-item, fw-menu-separator, fw-menu-item-group]"></ng-content>
+        </div>
+      </fw-menu>
+    </fw-menu-container>
+  </ng-template>
+</div>

package/src/components/select-menu/select-menu.component.scss

@@ -0,0 +1,4 @@
+:host {
+  box-sizing: border-box;
+  max-width: 100%;
+}

package/src/components/select-menu/select-menu.component.spec.ts

@@ -0,0 +1,121 @@
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { FwIconModule } from '../icon/icon.module';
+import { FwMenuModule } from '../menu/menu.module';
+import { FwTextInputModule } from '../text-input/text-input.module';
+import { FwSelectMenuComponent } from './select-menu.component';
+
+describe('FwSelectMenuComponent', () => {
+  let component: FwSelectMenuComponent;
+  let fixture: ComponentFixture<FwSelectMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        FwSelectMenuComponent,
+      ],
+      imports: [
+        CdkMenuModule,
+        FormsModule,
+        FwTextInputModule,
+        FwIconModule,
+        FwMenuModule,
+        NoopAnimationsModule,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FwSelectMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should handle item click with value string', () => {
+    component.options = [{ value: "a" }, { value: "b" }, { value: "c" }];
+    component.titleProperty = 'value';
+    component.descriptionProperty = 'value';
+    expect(component.value).toBeUndefined();
+    component.handleClick("b");
+    expect(component.value).toEqual("b");
+  });
+
+  it('should handle item click with value object', () => {
+    component.options = [{ value: 'a' }, { value: 'b' }, { value: 'c' }];
+    component.titleProperty = 'value';
+    component.descriptionProperty = 'value';
+    component.value = { value: 'a' };
+    expect(component.value).toEqual({ value: 'a' });
+    component.handleClick("b");
+    expect(component.value).toEqual({ value: 'b' });
+  });
+
+  it('should handle item keydown with value string', () => {
+    component.options = [{ value: 'a' }, { value: 'b' }, { value: 'c' }];
+    component.titleProperty = 'value';
+    component.descriptionProperty = 'value';
+    component.value = 'a';
+    component.trigger.open();
+    component.inFocusOpen = true;
+    expect(component.value).toEqual('a');
+    component.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    expect(component.value).toEqual('b');
+    component.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(component.value).toEqual('b');
+  });
+
+  it('should handle item keydown with value object', () => {
+    component.options = [{ value: 'a' }, { value: 'b' }, { value: 'c' }];
+    component.titleProperty = 'value';
+    component.descriptionProperty = 'value';
+    component.value = { value: 'a' };
+    component.trigger.open();
+    component.inFocusOpen = true;
+    component.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    expect(component.value).toEqual({ value: 'b' });
+  });
+
+  it('should handle different value property name', () => {
+    component.options = [{ item: "a", title: "test value a" }, { item: "b" }, { item: "c" }];
+    component.valueProperty = 'item';
+    component.titleProperty = 'title';
+    component.descriptionProperty = 'item';
+    expect(component.value).toBeUndefined();
+    component.handleClick("b");
+    expect(component.value).toEqual("b");
+  });
+
+  it('should handle `writeValue` calls from the Angular Forms API and choose the right option to display', () => {
+    const options = [
+      {
+        title: 'Test Value A',
+        value: 'a',
+      },
+      {
+        title: 'Test Value B',
+        value: 'b',
+      },
+      {
+        title: 'Test Value C',
+        value: 'c',
+      },
+    ]
+
+    component.titleProperty = 'title';
+    component.valueProperty = 'value';
+    component.options = options;
+
+    expect(component.value).toEqual(undefined);
+    expect(component.selectTitle).toEqual('');
+
+    component.writeValue('b');
+
+    expect(component.value).toEqual('b');
+    expect(component.selectTitle).toEqual('Test Value B');
+  });
+});