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

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

@@ -0,0 +1,317 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import {
+  AfterContentInit,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Optional,
+  Output,
+  QueryList,
+  Self,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+import { IconType } from '../icon/icon.types';
+import { FwMenuComponent } from '../menu/menu.component';
+import { FwMenuItemComponent } from '../menu/menu-item/menu-item.component';
+
+@Component({
+  selector: 'fw-select',
+  templateUrl: './select-menu.component.html',
+  styleUrls: ['./select-menu.component.scss'],
+})
+export class FwSelectMenuComponent implements OnChanges, AfterContentInit, OnDestroy, ControlValueAccessor {
+  @HostListener('document:click', ['$event.target']) outsideClick(evt: any): void {
+    if (this._isOpen && evt.nodeName !== 'INPUT') {
+      this.onTouched();
+      this.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() staticIcon?: IconType;
+  @Input() descriptionProperty?: string = 'description';
+  @Input() showFilter?: boolean = false;
+  @Input() showReset?: boolean = false;
+  @Input() disabled?: boolean = false;
+  @Input() errored?: boolean = false;
+  @Input() width: string = '200px';
+  @Input() optionsWidth?: string;
+  @Input() minOptionsHeight?: string;
+  @Input() maxOptionsHeight?: string;
+  @Input() size?: 'small' | 'medium' | 'large' = 'medium';
+  @Input() placeholder: string = 'Select something...';
+  @ViewChild(CdkMenuTrigger) trigger: CdkMenuTrigger;
+  @ViewChild(FwMenuComponent) menu: FwMenuComponent;
+  @ContentChildren(FwMenuItemComponent, { descendants: true }) menuItems: QueryList<FwMenuItemComponent>;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() change = new EventEmitter<any>();
+  @Output() readonly filterChanged = new EventEmitter<string>();
+  selectValue: string = '';
+  selectTitle: string = '';
+  selectIcon: string = '';
+  filterValue: string = '';
+  private subscriptions: Subscription[] = [];
+  private _isOpen = false;
+  focused = 0;
+  inFocusOpen = false;
+  preFocusValue: any;
+
+  @Input()
+  get value(): any {
+    return this._value;
+  }
+
+  set value(newValue: any) {
+    this._valueType = typeof newValue;
+    this.updateValue(newValue);
+  }
+
+  private _value: any;
+  private _valueType: string;
+
+  constructor(
+    protected _changeDetectorRef: ChangeDetectorRef,
+    @Optional() @Self() private ngControl: NgControl,
+  ) {
+    // this is just a different way of binding the controlValueAccessor
+    // it can be accessed in the component this way
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const currentOptions = changes.options?.currentValue;
+
+    // if the options change check if the title we should be displaying has changed
+    if (currentOptions && currentOptions !== changes.options?.previousValue) {
+      const selectedOption = currentOptions.find(item => item['value']?.toString() === this.selectValue);
+
+      if (selectedOption) {
+        this.selectTitle = selectedOption['title'];
+      }
+    }
+  }
+
+  ngAfterContentInit(): void {
+    if (!this.options || (this.options.length === 0 && this.menuItems && this.menuItems.length > 0)) {
+      this.options = [];
+      this.menuItems.forEach(item => {
+        this.options.push({
+          value: item.value.toString(),
+          title: item.title.toString(),
+          icon: item.icon,
+          description: item.description,
+        });
+        const sub = item.click.subscribe(value => this.menu.writeValue(value));
+        this.subscriptions.push(sub);
+        if (item.value.toString() === this.selectValue) {
+          this.selectTitle = item.title.toString();
+          this.selectIcon = item.icon;
+        }
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
+  }
+
+  get invalid(): boolean {
+    return this.ngControl?.invalid;
+  }
+
+  get touched(): boolean {
+    return this.ngControl?.touched;
+  }
+
+  onChange?: (value: any) => void;
+
+  onTouched = (): void => {
+  };
+
+  registerOnChange(fn: (value: any) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => {}): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
+    this._changeDetectorRef.markForCheck();
+  }
+
+  writeValue(value: any): void {
+    this.updateValue(value);
+  }
+
+  handleClick(e: string): void {
+    this.onTouched();
+    if (this.selectValue !== e) {
+      this.options.forEach(item => {
+        if (item[this.valueProperty].toString() === e) {
+          if (this._valueType === 'object') {
+            this.updateValue(item);
+          } else {
+            this.updateValue(item[this.valueProperty]);
+          }
+        }
+      });
+    }
+    this.close();
+  }
+
+  moveFocused(direction: string): void {
+    switch (direction) {
+      case 'down': {
+        this.focused++;
+        if (this.focused >= this.options.length) {
+          this.focused = 0;
+        }
+        break;
+      }
+      case 'up': {
+        this.focused--;
+        if (this.focused < 0) {
+          this.focused = this.options.length - 1;
+        }
+        break;
+      }
+      default: {
+        this.focused = 0;
+        break;
+      }
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent): void {
+    if (this.trigger.isOpen()) {
+      if (this.inFocusOpen) {
+        if (event.key === 'ArrowDown') {
+          this.moveFocused('down');
+          if (this._valueType === 'object') {
+            this.updateValue(this.options[this.focused]);
+          } else {
+            this.updateValue(this.options[this.focused][this.valueProperty]);
+          }
+        }
+        if (event.key === 'ArrowUp') {
+          this.moveFocused('up');
+          if (this._valueType === 'object') {
+            this.updateValue(this.options[this.focused]);
+          } else {
+            this.updateValue(this.options[this.focused][this.valueProperty]);
+          }
+        }
+        if (event.key === 'Tab') {
+          this.close();
+          this.inFocusOpen = false;
+          this.updateValue(this.preFocusValue);
+        }
+      } else {
+        this.inFocusOpen = true;
+        this.preFocusValue = this.value;
+      }
+    } else {
+      if (event.key === 'Enter') {
+        this.inFocusOpen = false;
+        this.preFocusValue = this.value;
+      }
+    }
+  }
+
+  handleKeyUp(event: KeyboardEvent): void {
+    if (this.trigger.isOpen()) {
+      if (event.key === 'Escape') {
+        this.close();
+        this.inFocusOpen = false;
+        this.updateValue(this.preFocusValue);
+      }
+    } else {
+      if (this.showReset) {
+        if (event.key === 'Escape') {
+          this.handleReset();
+        }
+      }
+    }
+  }
+
+
+  updateValue(value: any): void {
+    this._value = value;
+    if (value && this._valueType === 'object' && typeof value === 'object') {
+      this.selectValue = value[this.valueProperty].toString();
+      this.selectTitle = value[this.titleProperty].toString();
+      this.selectIcon = value[this.iconProperty];
+    } else {
+      let selectedOption: object;
+      if (this.options && this.options.length > 0 && this.valueProperty && this.value) {
+        selectedOption = this.options.find(option => option[this.valueProperty] === value[this.valueProperty]);
+      }
+      if (selectedOption) {
+        this.selectValue = selectedOption[this.valueProperty].toString();
+        this.selectTitle = selectedOption[this.titleProperty].toString();
+        this.selectIcon = selectedOption[this.iconProperty];
+      } else {
+        this.selectValue = value ? value.toString() : '';
+        this.selectTitle = value ? value.toString() : '';
+      }
+      if (this.options && this.options.length) {
+        this.options.forEach((opt, index) => {
+          if (opt[this.valueProperty] === value) {
+            this.selectTitle = opt[this.titleProperty]?.toString();
+            this.selectIcon = opt[this.iconProperty];
+            this.focused = index;
+          }
+        });
+      }
+    }
+
+    this.onTouched();
+    this.onChange?.(value);
+    this.change.emit(value);
+  }
+
+  handleReset(): void {
+    if (this.showReset) {
+      if (this._valueType === 'object') {
+        this.updateValue(null);
+      } else {
+        this.updateValue('');
+      }
+    }
+  }
+
+  close(): void {
+    this.trigger.close();
+    this.filterValue = '';
+    this.filterChanged.emit(this.filterValue);
+  }
+
+  onFilterChanged(value: string): void {
+    this.filterValue = value;
+    this.filterChanged.emit(value);
+  }
+}

package/src/components/select-menu/select-menu.mdx

@@ -0,0 +1,210 @@
+import {Canvas, Meta} from '@storybook/addon-docs';
+import * as SelectStories from './select-menu.stories'
+import * as MultiSelectStories from './multi-select-menu/multi-select-menu.stories'
+
+<Meta of={SelectStories}/>
+
+# Select
+
+The Vision **Select** `<fw-select>` is a form control for selecting a value from a set of options, similar to the native html `<select>` element.
+
+- it is a **single** option select dropdown. for multiple select see [MultiSelect](#multiselect)
+- the select options can be populated via the `[options]` data model array.
+- the default properties it uses from the array are `value, title, icon`
+- defaults can be changed via `[valueProperty], [titleProperty], [iconProperty]`
+- selecting an option will automatically close the window and set the `ngModel` with the full object from the `[options]` array.
+- the selected option title and optional icon will be shown in the text box field selector
+- has the optional [inputs](/story/vision-select--select) of `showFilter, disabled, placeholder, width, optionsWidth, maxOptionsHeight`
+
+## Usage
+
+First import the module into your `app.module.ts`
+
+```ts filename="app.module.ts"
+// app.module.ts
+
+import {FwSelectMenuModule} from '@flywheel-io/vision';
+
+@NgModule({
+  imports: [
+      FwSelectMenuModule
+  ]
+})
+```
+
+and then in your layout code add the component
+
+```html
+<!--- your.component.ts --->
+    options: [
+      { title: '1-One', value: 1 },
+      { title: '2-Two', value: 2 },
+      { title: '3-Three', value: 3 },
+      { title: '4-Four', value: 4 },
+    ],
+
+    selectedValue = 2;
+
+<!--- your.component.html --->
+
+<fw-select [options]="options" [value]="selectedValue">
+</fw-select>
+```
+
+<Canvas of={SelectStories.SelectNumber}></Canvas>
+
+## Complex Object Usage
+
+```html
+<!--- your.component.ts --->
+rolePermissions: [
+  { roleName: 'Owner', roleId: 'owner', roleDescription: 'Owner description', roleIcon: 'icon-placeholder' },
+  { roleName: 'Admin', roleId: 'admin', roleDescription: 'Admin description', roleIcon: 'icon-placeholder' },
+  { roleName: 'Developer', roleId: 'developer', roleDescription: 'Developer description', roleIcon: 'icon-placeholder' },
+  { roleName: 'Member', roleId: 'member', roleDescription: 'Member description', roleIcon: 'icon-placeholder' },
+],
+
+selectedPermission = { roleName: 'Developer', roleId: 'developer', roleIcon: 'icon-placeholder' };
+
+<!--- your.component.html --->
+
+<fw-select
+    [options]="rolePermissions"
+    [(ngModel)]="selectedPermission"
+    [valueProperty]="roleId"
+    [titleProperty]="roleName"
+    [iconProperty]="roleIcon"
+    placeholder="Select Role...">
+</fw-select>
+```
+
+<Canvas of={SelectStories.Select}></Canvas>
+
+## Alternate Usage
+
+If you prefer you can also alternatively define your collection of [MenuItem](/story/vision-menu--menu-item) directly in your layout code.
+
+```html
+<!--- your.component.html --->
+
+<fw-select placeholder="Pick a Topic" width="220px" value="release">
+  <fw-menu-item value="release" title="Release Notes" icon="notebook-pen-edit"></fw-menu-item>
+  <fw-menu-item value="documentation" title="Browse Documentation" icon="files"></fw-menu-item>
+  <fw-menu-item value="forum" title="User Forum" icon="message-chat-question-support"></fw-menu-item>
+  <fw-menu-item value="feedback" title="Give Us Feedback" icon="message-question-checkmark"></fw-menu-item>
+  <fw-menu-separator></fw-menu-separator>
+  <fw-menu-item value="bookmark" title="Add Bookmark" icon="add-new-create"></fw-menu-item>
+  <fw-menu-separator></fw-menu-separator>
+  <fw-menu-item value="flywheel" title="Flywheel Enterprise" description="Version 18.22.1"></fw-menu-item>
+</fw-select>
+
+or even in a for loop like so:
+
+<fw-select placeholder="Pick a Topic..." width="100%" [(ngModel)]="selectedItem">
+  <fw-menu-item *ngFor="let item of items" [value]="item.choice" [title]="item.name">
+  </fw-menu-item>
+</fw-select>
+```
+
+<Canvas of={SelectStories.SelectCustom}></Canvas>
+
+## Managing state directly
+```html
+<fw-select [options]="options" [value]="value" (change)="handleChange($event)"></fw-select>
+```
+
+## Using with ngModel
+```html
+<fw-select [options]="options" [(ngModel)]="selected" (ngModelChange)="handleChange($event)"></fw-select>
+```
+
+## With a FormGroup
+
+```html
+<!--- your.component.ts --->
+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' },
+],
+
+const formGroup = new FormGroup({
+  role: new FormControl('developer'),
+});
+
+<!--- your.component.html --->
+
+<form [formGroup]="formGroup">
+  <fw-select
+    placeholder="Pick a Role"
+    width="220px"
+    [options]="options"
+    formControlName="role">
+  </fw-select>
+</form>
+```
+
+## With a Content Projection
+
+```html
+<!--- your.component.ts --->
+  filterValue = '',
+  options:[
+    { title: 'Superman', value: 'superman'},
+    { title: 'Batman', value: 'batman'},
+    { title: 'Iron Man', value: 'ironman'},
+    { title: 'Spider-Man', value: 'spiderman'}
+  ];
+
+<!--- your.component.html --->
+
+<fw-select
+   placeholder="Pick a Hero"
+   width="220px"
+   [showFilter]="true"
+   (filterChanged)="filterValue = $event" >
+       <fw-menu-item
+           *ngFor="let option of options"
+           [value]="option.value"
+           [title]="option.title"
+           [hidden]="!option.title.toLowerCase().includes(filterValue.toLowerCase())"
+       ></fw-menu-item>
+</fw-select>
+```
+
+<Canvas of={SelectStories.SelectInAForm}></Canvas>
+
+# MultiSelect
+
+The Vision **MutliSelect** `<fw-multi-select>` is a form control for selecting values from a set of options, similar to the native html `<select multiple="true">` element with the multiple option enabled.
+
+- selected results will be shown in a chip grid instead of a `<fw-text-input>`.
+- you have a few additional properties `minHeight, maxHeight, useCheckbox, closeOnSelect, filterItemsOnSelect, maxSelectedShown`
+- __value__ will always be an array of strings, you also have __selectedOptions__ if you need the array of selected options objects
+
+much like the single [Select](#) tag your layout code looks almost identical except now you are using the `<fw-multi-select>` tag and your bound `[ngModel]` will be an **array** of strings instead of a single string/object.
+
+```html
+<!--- your.component.ts --->
+permissionOptions: [
+  { 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' },
+],
+
+<!--- your.component.html --->
+
+<fw-multi-select
+    [(ngModel)]="permissions"
+    [options]="permissionOptions"
+    placeholder="Select Something...">
+</fw-multi-select>
+```
+
+<Canvas of={MultiSelectStories.MultiSelect}></Canvas>
+
+## MultiSelect Examples
+
+<Canvas of={MultiSelectStories.MultiSelectExamples}></Canvas>

package/src/components/select-menu/select-menu.module.ts

@@ -0,0 +1,33 @@
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { FwChipModule } from '../chip/chip.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwMenuModule } from '../menu/menu.module';
+import { FwTextInputModule } from '../text-input/text-input.module';
+import { FwMultiSelectMenuComponent } from './multi-select-menu/multi-select-menu.component';
+import { FwSelectMenuComponent } from './select-menu.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CdkMenuModule,
+    FormsModule,
+    FwChipModule,
+    FwIconModule,
+    FwMenuModule,
+    FwTextInputModule,
+  ],
+  exports: [
+    FwMultiSelectMenuComponent,
+    FwSelectMenuComponent,
+  ],
+  declarations: [
+    FwMultiSelectMenuComponent,
+    FwSelectMenuComponent,
+  ],
+})
+export class FwSelectMenuModule {
+}