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

package/src/components/layouts/sidebar/sidebar.mdx

@@ -1,18 +0,0 @@
-import {Canvas, Controls, Meta, Primary} from '@storybook/addon-docs';
-import * as LayoutSidebarStories from './sidebar.component.stories';
-
-<Meta of={LayoutSidebarStories} title="Layout/Sidebar"/>
-
-# Sidebar Layout `<fw-layout-sidebar>`
-
-```ts
-import { FwLayoutsModule } from '@flywheel-io/vision';
-```
-
-A simple layout pattern for 2-up displays of information. Especially for a list with detail information next to it.
-
-<Controls/>
-<Primary/>
-
-### Example of a list panel with a sidebar detail layout
-<Canvas of={LayoutSidebarStories.TableDetail}/>

package/src/components/layouts/toolbar/toolbar.component.scss

@@ -1,11 +0,0 @@
-:host {
-  display: flex;
-  box-sizing: border-box;
-  gap: 16px;
-  align-items: center;
-  font-size: 22px;
-
-  &.dense {
-    gap: 8px;
-  }
-}

package/src/components/layouts/toolbar/toolbar.component.spec.ts

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

package/src/components/layouts/toolbar/toolbar.component.stories.ts

@@ -1,59 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwAvatarModule } from '../../avatar/avatar.module';
-import { FwButtonModule } from '../../button/button.module';
-import { FwIconButtonModule } from '../../icon-button/icon-button.module';
-import { FwLayoutsModule } from '../layouts.module';
-import { FwLayoutToolbarComponent } from './toolbar.component';
-
-const meta: Meta = {
-  title: 'Layout/Toolbar',
-  component: FwLayoutToolbarComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=4957%3A72544&mode=dev',
-    },
-  },
-  decorators: [
-    applicationConfig({
-      providers: [importProvidersFrom([
-        BrowserAnimationsModule,
-      ])],
-    }),
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAvatarModule,
-        FwButtonModule,
-        FwIconButtonModule,
-        FwLayoutsModule,
-      ],
-    }),
-  ],
-};
-export default meta;
-
-type Story = StoryObj<FwLayoutToolbarComponent>;
-
-export const ToolbarLayout: Story = {
-  args: {
-    dense: false,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <fw-layout-toolbar [dense]="dense">
-          <fw-button leftIcon="add-new-create" size="small">Add Things</fw-button>
-          <fw-icon-button color="primary" icon="grid-layout" size="small"></fw-icon-button>
-          <fw-icon-button color="primary" icon="question-circle" size="small"></fw-icon-button>
-          <fw-avatar content="initial" initial="JD" size="medium"></fw-avatar>
-        </fw-layout-toolbar>
-    `,
-  }),
-};

package/src/components/layouts/toolbar/toolbar.component.ts

@@ -1,15 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-@Component({
-  selector: 'fw-layout-toolbar',
-  template: '<ng-content></ng-content>',
-  styleUrls: ['./toolbar.component.scss'],
-})
-export class FwLayoutToolbarComponent {
-  @Input() dense?: boolean;
-
-  @HostBinding('attr.class') get classes(): string {
-    const classes = ['fw-layout-toolbar', this.dense ? 'dense' : ''];
-    return classes.join(' ');
-  };
-}

package/src/components/layouts/toolbar/toolbar.mdx

@@ -1,16 +0,0 @@
-import {Controls, Meta, Primary} from '@storybook/addon-docs';
-import * as LayoutToolbarStories from './toolbar.component.stories';
-
-<Meta of={LayoutToolbarStories} title="Layout/Toolbar"/>
-
-# Toolbar Layout `<fw-layout-toolbar>`
-
-```ts
-import { FwLayoutsModule } from '@flywheel-io/vision';
-```
-
-- Flex row layout of items with gap and icon button font sizes
-- Accepts all component as Child Components and will lay them out in a flew row with gap of 16px and a default font size of 22px.
-
-<Controls/>
-<Primary/>

package/src/components/menu/menu-close-triggers.directive.ts

@@ -1,27 +0,0 @@
-import { CdkMenuTrigger } from '@angular/cdk/menu';
-import { ContentChildren, Directive, HostListener, QueryList } from '@angular/core';
-
-@Directive({
-  selector: '[fwMenuCloseTriggers]',
-})
-export class FwMenuCloseTriggersDirective {
-  @HostListener('document:click') outsideClick(): void {
-    if (this._isOpen && this.triggers && this.triggers.length > 0) {
-      this.triggers.forEach(trigger => {
-        trigger.close();
-      });
-      this._isOpen = false;
-    }
-    if (this.triggers && this.triggers.length > 0) {
-      this.triggers.forEach(trigger => {
-        if (trigger.isOpen()) {
-          this._isOpen = true;
-        }
-      });
-    }
-  }
-
-  @ContentChildren(CdkMenuTrigger, { descendants: true }) triggers?: QueryList<CdkMenuTrigger>;
-
-  private _isOpen = false;
-}

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

@@ -1,15 +0,0 @@
-<div #filterBox *ngIf="showFilter" class="filter-box" cdkMenuBar>
-  <fw-text-input
-    (click)="handleFilterClick($event)"
-    #menuFilter
-    (keydown)="keyHandler?.($event)"
-    placeholder="Search" leftIcon="search" autofocus
-    [value]="filterText" (input)="handleFilterInput($event)">
-  </fw-text-input>
-  <ng-content select=".filter-content"></ng-content>
-</div>
-<div class="menu-wrapper">
-  <fw-menu-item *ngIf="noResults()" [title]="emptyText()" [disabled]="true"></fw-menu-item>
-  <ng-content></ng-content>
-  <ng-content select="custom-menu-items"></ng-content>
-</div>

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

@@ -1,32 +0,0 @@
-.fw-menu-container {
-  display: flex;
-  flex-direction: column;
-  border-radius: 8px;
-  background: var(--card-background);
-  position: relative;
-
-  &.border-default {
-    border: 1px solid var(--separations-border);
-  }
-
-  .filter-box {
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    padding: 8px;
-    border-bottom: 1px solid var(--separations-base);
-    background-color: var(--card-background);
-    max-width: calc(100% - 16px);
-    height: fit-content;
-  }
-
-  .menu-wrapper {
-    flex: 1;
-    padding: 6px 4px;
-    overflow: hidden auto;
-    margin-bottom: 4px;
-  }
-
-  fw-menu-separator {
-    margin: 6px -8px;
-  }
-}

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

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

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

@@ -1,125 +0,0 @@
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import {
-  AfterViewInit,
-  Component,
-  computed,
-  ContentChild,
-  contentChildren,
-  HostBinding,
-  Input,
-  input,
-  output,
-  signal,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
-
-import { FwTextInputComponent } from '../../text-input/text-input.component';
-import { FwMenuComponent } from '../menu.component';
-import { FwMenuItemComponent } from '../menu-item/menu-item.component';
-
-@Component({
-  selector: 'fw-menu-container, fw-menu-filter',
-  templateUrl: './menu-container.component.html',
-  styleUrls: ['./menu-container.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class FwMenuContainerComponent implements AfterViewInit {
-
-  @Input() width?: string = 'inherit';
-  @Input() maxHeight?: string = 'auto';
-  @Input() minHeight?: string = 'auto';
-  @Input() border?: 'none' | 'default' = 'default';
-  @Input() shadow?: 'none' | 'small' | 'medium' | 'large' | 'extra-large' | 'inner' = 'large';
-  @Input({ transform: (val: BooleanInput) => coerceBooleanProperty(val) }) showFilter: boolean = false;
-  @Input() filterText?: string = '';
-  @Input({ transform: (val: BooleanInput) => coerceBooleanProperty(val) }) focusFilterOnMount: boolean = false;
-  @Input() offset?: string = '0px';
-  emptyText = input('No results')
-
-  filteredMenuItems: FwMenuItemComponent[];
-  filteredMenuItemChange = output<FwMenuItemComponent[]>();
-
-  private defaultFilterFn = (filter: string, menuItems: FwMenuItemComponent[]): FwMenuItemComponent[] => {
-    return menuItems.filter(menuItem => menuItem.title.toLowerCase().includes(filter.toLowerCase()));
-  }
-
-  filterFn = input(this.defaultFilterFn);
-
-  filterChanged = output<string>();
-  @ViewChild('menuFilter') filterRef: FwTextInputComponent;
-
-  @ContentChild(FwMenuComponent) menu: FwMenuComponent;
-
-  // for passing menu items for the container to filter
-  // works around a problem with nested content children
-  // @see https://stackoverflow.com/questions/62886613/angular-9-nested-ng-content-and-contentchildren
-  additionalMenuItems = input<FwMenuItemComponent[]>([]);
-  childMenuItems = contentChildren(FwMenuItemComponent, { descendants: true });
-  private combinedMenuItems = computed(() => {
-    return [...this.childMenuItems(), ...this.additionalMenuItems()];
-  });
-
-  @Input() keyHandler: (event: KeyboardEvent) => void;
-
-  @HostBinding('attr.class') get classes(): string {
-    return [
-      'fw-menu-container',
-      `vision-shadow-${this.shadow}`,
-      `border-${this.border}`,
-    ].join(' ');
-  };
-
-  @HostBinding('style') get style(): SafeStyle {
-    return this.sanitizer.bypassSecurityTrustStyle(`
-      width: ${this.width};
-      max-height: ${this.maxHeight};
-      min-height: ${this.minHeight};
-      margin-top: ${this.offset};
-    `);
-  }
-
-  constructor(private sanitizer: DomSanitizer) {}
-
-  ngAfterViewInit(): void {
-    if (this.focusFilterOnMount && this.showFilter) {
-      // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
-      this.filterRef?.focus();
-    }
-
-    // we need to run the filter on init in case the custom filter is filtering things
-    this.onFilterChange('');
-  }
-
-  noResults = signal(false);
-
-  handleFilterClick(event: Event): void{
-    // stops filters in menus from closing the parent menu
-    event.stopPropagation();
-  }
-
-  handleFilterInput(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    const filterValue = input.value;
-    this.onFilterChange(filterValue);
-  }
-
-  onFilterChange(filter: string): void {
-    const allMenuItems = this.combinedMenuItems();
-
-    this.filterChanged.emit(filter);
-    const filterFn = this.filterFn();
-
-    this.filteredMenuItems = filterFn(filter, allMenuItems);
-
-    allMenuItems.forEach(menuItem => {
-      const shouldBeHidden = !this.filteredMenuItems.includes(menuItem);
-      menuItem.hidden = shouldBeHidden;
-    })
-
-    this.noResults.set(allMenuItems.every(item => item.hidden));
-
-    this.filteredMenuItemChange.emit(this.filteredMenuItems);
-  }
-}

package/src/components/menu/menu-container/menu-container.stories.ts

@@ -1,105 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-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 { FwButtonModule } from '../../button/button.module';
-import { FwDialogsModule } from '../../dialog/dialogs.module';
-import { FwIconModule } from '../../icon/icon.module';
-import { FwMenuModule } from '../menu.module';
-import { FwMenuContainerComponent } from './menu-container.component';
-
-export default {
-  title: 'Components/Menu',
-  component: FwMenuContainerComponent,
-  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',
-    },
-  },
-  argTypes: {
-    collapsed: {
-      description: 'DEPRECATED',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAvatarModule,
-        FwButtonModule,
-        FwDialogsModule,
-        FwIconModule,
-        FwMenuModule,
-      ],
-    }),
-    applicationConfig({
-      providers: [
-        importProvidersFrom(BrowserModule),
-        importProvidersFrom(BrowserAnimationsModule),
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwMenuContainerComponent>;
-
-export const MenuContainer: Story = {
-  args: {
-    shadow: 'large',
-    border: 'default',
-    width: '414px',
-    maxHeight: '400px',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <fw-menu-container [width]="width" [maxHeight]="maxHeight" [shadow]="shadow" [border]="border">
-            <fw-menu [multiSelect]="true" [useCheckbox]="true">
-              <fw-menu-item title="Owner" value="owner" description="This is the highest level of permissions. They have access to plan and billing information and settings as well as all permissions an Admin has.">
-              </fw-menu-item>
-              <fw-menu-item title="Admin" value="admin" description="They can create new Users and Groups, and modify user roles and permissions site-wide. ">
-              </fw-menu-item>
-              <fw-menu-item title="Developer" value="developer" description="They can upload gears and restrict their availability to specific projects or users. Admins must assign Developers permissions to Groups and Projects to be able to see data.">
-              </fw-menu-item>
-              <fw-menu-item title="Member" value="member" description="They have no special permissions and must be assigned to specific Groups and Projects by an Admin.">
-              </fw-menu-item>
-            </fw-menu>
-        </fw-menu-container>
-    `,
-  }),
-};
-
-export const MenuContainerFilter: Story = {
-  args: {
-    shadow: 'large',
-    border: 'default',
-    width: '200px',
-    maxHeight: '400px',
-    showFilter: true,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <fw-menu-container [width]="width" [maxHeight]="maxHeight" [shadow]="shadow" [border]="border" [showFilter]="showFilter">
-            <fw-menu value="developer">
-              <fw-menu-item title="Owner" value="owner">
-              </fw-menu-item>
-              <fw-menu-item title="Admin" value="admin">
-              </fw-menu-item>
-              <fw-menu-item title="Developer" value="developer">
-              </fw-menu-item>
-              <fw-menu-item title="Member" value="member">
-              </fw-menu-item>
-            </fw-menu>
-        </fw-menu-container>
-    `,
-  }),
-};

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

@@ -1,5 +0,0 @@
-<h3 class="vision-h3">
-  <ng-content></ng-content>
-</h3>
-<ng-content select="fw-icon-button"></ng-content>
-<ng-content select="fw-badge"></ng-content>

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

@@ -1,20 +0,0 @@
-:host {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  overflow: hidden;
-  container-name: menuheader;
-  container-type: size;
-
-  h3 {
-    padding: 8px;
-    margin: 0 4px;
-    width: 100%;
-  }
-}
-
-@container menuheader (max-width: 100px) {
-  h3 {
-    opacity: 0;
-  }
-}

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

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

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

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'fw-menu-header',
-  templateUrl: './menu-header.component.html',
-  styleUrls: ['./menu-header.component.scss'],
-})
-export class FwMenuHeaderComponent {
-
-}

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

@@ -1,42 +0,0 @@
-<div (click)="handleClick($event)" *ngIf="!hidden">
-  <div
-    [ngClass]="['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']"
-    [class.disabled]="disabled">
-    <div class="item-checkbox" *ngIf="showCheckbox && multiSelect">
-      <fw-checkbox
-        [disabled]="disabled"
-        [color]="checkboxColor"
-        [checked]="selected">
-      </fw-checkbox>
-    </div>
-    <div class="item-radiobutton" *ngIf="showCheckbox && !multiSelect">
-      <fw-radio-button
-        [value]="value"
-        [color]="checkboxColor"
-        [disabled]="disabled"
-        [checked]="selected">
-      </fw-radio-button>
-    </div>
-    <fw-icon [color]="iconColor" *ngIf="icon" class="menu-icon {{iconColor}}">{{ icon }}</fw-icon>
-    <ng-content select="fw-avatar"></ng-content>
-    <div class="menu-text" *ngIf="title">
-      <h4 class="vision-h4">{{ title }}</h4>
-      <p *ngIf="description" class="vision-p4 description">{{ description }}</p>
-    </div>
-    <div class="key-text vision-p2">
-      <ng-content select="p"></ng-content>
-      <ng-content select="fw-badge"></ng-content>
-      <ng-content select="fw-icon"></ng-content>
-      <ng-content select="fw-icon-button"></ng-content>
-      <fw-icon-button
-        [size]="'small'"
-        [icon]="subItemsOpen?'chevron-up':'chevron-down'"
-        *ngIf="subItems.length>0"
-        (click)="toggleSubItemsView()">
-      </fw-icon-button>
-    </div>
-  </div>
-</div>
-<div class="item-subitems">
-  <ng-content select="fw-menu-sub-item"></ng-content>
-</div>