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

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

@@ -1,415 +0,0 @@
-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 { FwAvatarModule } from '../../avatar/avatar.module';
-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/Multi-Select',
-  component: FwMultiSelectMenuComponent,
-  argTypes: {
-    options: { table: { subcategory: 'Option Handling' } },
-    titleProperty: { table: { subcategory: 'Option Handling' } },
-    valueProperty: { table: { subcategory: 'Option Handling' } },
-    iconProperty: { table: { subcategory: 'Option Handling' } },
-    width: { table: { subcategory: 'Sizing' } },
-    minHeight: { table: { subcategory: 'Sizing' } },
-    maxHeight:  { table: { subcategory: 'Sizing' } },
-    optionsWidth:  { table: { subcategory: 'Sizing' } },
-    minOptionsHeight:  { table: { subcategory: 'Sizing' } },
-    maxOptionsHeight:  { table: { subcategory: 'Sizing' } },
-    size:  { table: { subcategory: 'Sizing' } },
-    emptyText:  { table: { subcategory: 'Behavior' } },
-    showFilter: {
-      type: 'boolean',
-      description: 'Whether or not to display a filter within the dropdown',
-      table: {
-        defaultValue: {
-          summary: 'true',
-        },
-        subcategory: 'Behavior',
-        category: 'inputs',
-      },
-    },
-    showClear:  {
-      type: 'boolean',
-      description: 'display a clear all x, inline in the select',
-      table: {
-        defaultValue: {
-          summary: 'false',
-        },
-        subcategory: 'Behavior',
-        category: 'inputs',
-      },
-    },
-    placeholder: { table: { subcategory: 'Behavior' } },
-    disabled: { table: { subcategory: 'Behavior' } },
-    useCheckbox: { table: { subcategory: 'Behavior' } },
-    closeOnSelect: { table: { subcategory: 'Behavior' } },
-    maxSelectedShown: { table: { subcategory: 'Behavior' } },
-    showSelectionInfo: {
-      description: 'Show selection count and clear button within the dropdown',
-      type: 'boolean',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        subcategory: 'Behavior',
-        type: 'boolean',
-        defaultValue: {
-          summary: 'false',
-        },
-        category: 'inputs',
-      },
-    },
-    filterItemsOnSelect: {
-      description: 'Determines whether an option is displayed, while it is selected',
-      type: 'boolean',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: 'boolean',
-        defaultValue: {
-          summary: 'true',
-        },
-        category: 'inputs',
-        subcategory: 'Behavior',
-      },
-    },
-  },
-  parameters: {
-    controls: {
-      expanded: 'true',
-      exclude: [],
-    },
-    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,
-        FwAvatarModule,
-        FwIconModule,
-        FwMenuModule,
-        FwSelectMenuModule,
-        FwTextInputModule,
-        FormsModule,
-      ],
-    }),
-    applicationConfig({
-      providers: [importProvidersFrom(BrowserModule), importProvidersFrom(BrowserAnimationsModule)],
-    }),
-  ],
-} as Meta;
-
-type Story = StoryObj<FwMultiSelectMenuComponent>;
-
-export const Primary: Story = {
-  parameters: {
-    argTypes: {
-      options: {
-        description: 'BBBBBBB',
-      },
-    },
-  },
-  args: {
-    options: [
-      { title: 'Owner', value: 'owner', icon: 'crown-style-circle' },
-      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
-      { title: 'Developer', value: 'developer', icon: 'code-text' },
-      { title: 'Member', value: 'member', icon: 'user' },
-    ],
-  },
-};
-
-export const NoChips: Story = {
-  args: {
-    placeholder: 'Select something...',
-    emptyText: 'No matches found...',
-    closeOnSelect: true,
-    filterItemsOnSelect: true,
-    maxSelectedShown: 0,
-    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' },
-    ],
-
-    showClear: true,
-  },
-};
-
-export const WithDetailsPane: Story = {
-  args: {
-    placeholder: 'Select something...',
-    emptyText: 'No matches found...',
-    closeOnSelect: false,
-    filterItemsOnSelect: true,
-    maxSelectedShown: 0,
-    titleProperty: 'title',
-    valueProperty: 'value',
-    showSelectionInfo: true,
-    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 WithCheckboxes: Story = {
-  args: {
-    placeholder: 'Select something...',
-    emptyText: 'No matches found...',
-    closeOnSelect: false,
-    maxSelectedShown: 0,
-    titleProperty: 'title',
-    valueProperty: 'value',
-    showFilter: false,
-    iconProperty: 'icon',
-    disabled: false,
-    useCheckbox: true,
-    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 WithCustomOptions: Story = {
-  args: {
-    placeholder: 'Select your favorite starters...',
-    emptyText: 'No matches found...',
-    closeOnSelect: false,
-    filterItemsOnSelect: true,
-    maxSelectedShown: 2,
-    titleProperty: 'title',
-    valueProperty: 'value',
-    iconProperty: 'icon',
-    disabled: false,
-    useCheckbox: false,
-    size: 'medium',
-    width: '400px',
-    maxHeight: '200px',
-    maxOptionsHeight: '400px',
-    optionsWidth: undefined,
-    minOptionsHeight: undefined,
-    options: [],
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      pokemon: {
-        gen1: [
-          {
-            name: 'Bulbasaur',
-            id: 1,
-            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png',
-          },
-          {
-            name: 'Charmander',
-            id: 4,
-            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png',
-          },
-          {
-            name: 'Squirtle',
-            id: 7,
-            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png',
-          },
-        ],
-        gen2: [
-          {
-            name: 'Chikorita',
-            id: 152,
-            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/152.png',
-          },
-          {
-            name: 'Cyndaquil',
-            id: 155,
-            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/155.png',
-          },
-          {
-            name: 'Totodile',
-            id: 158,
-            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/158.png',
-          },
-        ],
-      },
-    },
-    controls: { disabled: false },
-    template: `
-      <fw-multi-select
-        [emptyText]="emptyText"
-        [closeOnSelect]="closeOnSelect"
-        [filterItemsOnSelect]="filterItemsOnSelect"
-        [maxSelectedShown]="maxSelectedShown"
-        [titleProperty]="titleProperty"
-        [valueProperty]="valueProperty"
-        [iconProperty]="iconProperty"
-        [disabled]="disabled"
-        [useCheckbox]="useCheckbox"
-        [size]="size"
-        [width]="width"
-        [maxHeight]="maxHeight"
-        [maxOptionsHeight]="maxOptionsHeight"
-        [optionsWidth]="optionsWidth"
-        [minOptionsHeight]="minOptionsHeight"
-        [width]="width"
-        [maxOptionsHeight]="maxOptionsHeight"
-        [placeholder]="placeholder"
-        [showSelectionInfo]="showSelectionInfo"
-      >
-        <fw-menu-item-group title="Gen 1">
-          <fw-menu-item
-            *ngFor="let mon of pokemon.gen1"
-            [value]="mon.id"
-            [title]="mon.name"
-          >
-            <fw-avatar
-              color="slate"
-              variant="circular"
-              size="medium"
-              content="image"
-              [imageUrl]="mon.sprite || ''"
-            >
-            </fw-avatar>
-          </fw-menu-item>
-        </fw-menu-item-group>
-        <fw-menu-item-group title="Gen 2">
-          <fw-menu-item
-            *ngFor="let mon of pokemon.gen2"
-            [value]="mon.id"
-            [title]="mon.name"
-          >
-            <fw-avatar
-              color="slate"
-              variant="circular"
-              size="medium"
-              content="image"
-              [imageUrl]="mon.sprite || ''"
-            >
-            </fw-avatar>
-          </fw-menu-item>
-        </fw-menu-item-group>
-      </fw-multi-select>
-    `,
-  }),
-};
-
-export const Examples: 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

@@ -1,40 +0,0 @@
-<div #wrapper [ngStyle]="{width: width, cursor: 'pointer'}">
-  <fw-text-input
-    fwMenuRegister
-    [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 || wrapper.offsetWidth + 'px'"
-      [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]="useFullOptionAsValue ? JSON.stringify(item) : 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

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

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

@@ -1,242 +0,0 @@
-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();
-  });
-
-  describe('handleClick', () => {
-    it('should set the value to the clicked option', () => {
-
-      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 calls with stringified JSON when `useFullOptionsAsValue` is true', () => {
-      component.options = [{ value: "a" }, { value: "b" }, { value: "c" }];
-      component.titleProperty = 'value';
-      component.descriptionProperty = 'value';
-      component.useFullOptionAsValue = true;
-
-      const changeEmitterSpy = jasmine.createSpyObj('changeEmitter', ['emit']);
-      component.change = changeEmitterSpy;
-
-      const changeSpy = jasmine.createSpy('onChangeSpy');
-      component.registerOnChange(changeSpy);
-
-      expect(component.value).toBeUndefined();
-      component.handleClick(JSON.stringify({ value: "a" }));
-      expect(component.value)
-        .withContext('should set the internal value as the stringified object')
-        .toEqual(JSON.stringify({ value: "a" }));
-      expect(changeSpy)
-        .withContext('should call external onChanges with the object')
-        .toHaveBeenCalledWith({ value: 'a' });
-      expect(changeEmitterSpy.emit)
-        .withContext('should emit the object from the `changes` emitter')
-        .toHaveBeenCalledWith({ value: 'a' });
-    })
-  });
-
-
-  describe('handleKeyDown', () => {
-      it('should handle selecting an option', () => {
-        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 selecting an option with `useFullObjectAsValue` set to true', () => {
-        component.options = [{ value: 'a' }, { value: 'b' }, { value: 'c' }];
-        component.titleProperty = 'value';
-        component.descriptionProperty = 'value';
-        component.useFullOptionAsValue = true;
-        component.trigger.open();
-        component.inFocusOpen = true;
-        component.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
-
-        const changeSpy = jasmine.createSpy('onChangeSpy');
-        component.registerOnChange(changeSpy);
-
-        expect(component.value)
-          .withContext('should set the internal value as the stringified object')
-          .toEqual(JSON.stringify({ value: 'b' }));
-        expect(changeSpy)
-          .withContext('should not emit a change before they press enter')
-          .not.toHaveBeenCalled();
-
-        component.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }));
-
-        expect(component.value)
-          .withContext('enter key should not affect internal value')
-          .toEqual(JSON.stringify({ value: 'b' }));
-        expect(changeSpy)
-          .withContext('enter key should emit focussed value')
-          .toHaveBeenCalledWith({ 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");
-  });
-
-  describe('writeValue', () => {
-    it('should handle calls with a string value and map it to 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;
-
-      const changeSpy = jasmine.createSpy('onChangeSpy');
-      component.registerOnChange(changeSpy);
-
-      expect(component.value).toEqual(undefined);
-      expect(component.selectTitle).toEqual('');
-
-      component.writeValue('b');
-
-      expect(changeSpy).toHaveBeenCalledWith('b');
-      expect(component.selectTitle).toEqual('Test Value B');
-    });
-
-    it('should handle calls with an object and set value and display string according to its properties', () => {
-      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('');
-
-      const changeSpy = jasmine.createSpy('onChangeSpy');
-      component.registerOnChange(changeSpy);
-
-      component.writeValue({
-          title: 'Test Value D',
-          value: 'd',
-        });
-
-      expect(changeSpy).toHaveBeenCalledWith('d');
-      expect(component.selectTitle).toEqual('Test Value D');
-    });
-
-    it('should set the value as the full passed object when `useFullOptionAsValue` is true', () => {
-      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.useFullOptionAsValue = true;
-      component.options = options;
-
-      expect(component.value).toEqual(undefined);
-      expect(component.selectTitle).toEqual('');
-
-      const changeSpy = jasmine.createSpy('onChangeSpy');
-      component.registerOnChange(changeSpy);
-
-      component.writeValue({
-          title: 'Test Value C',
-          value: 'c',
-      });
-
-      expect(changeSpy).toHaveBeenCalledWith({
-          title: 'Test Value C',
-          value: 'c',
-      });
-      expect(component.selectTitle).toEqual('Test Value C');
-    });
-  });
-
-
-});