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

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

@@ -1,249 +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 { FwButtonModule } from '../../button/button.module';
-import { FwDialogsModule } from '../../dialog/dialogs.module';
-import { FwFormHeadingModule } from '../../form-heading/form-heading.module';
-import { FwIconModule } from '../../icon/icon.module';
-import { FwIconButtonModule } from '../../icon-button/icon-button.module';
-import { FwSwitchModule } from '../../switch/switch.module';
-import { FwTextInputModule } from '../../text-input/text-input.module';
-import { FwLayoutsModule } from '../layouts.module';
-import { FwLayoutPanelComponent } from './panel.component';
-
-const meta: Meta = {
-  title: 'Layout/Panel',
-  component: FwLayoutPanelComponent,
-  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,
-        FwButtonModule,
-        FwDialogsModule,
-        FwIconModule,
-        FwIconButtonModule,
-        FwLayoutsModule,
-        FwFormHeadingModule,
-        FwSwitchModule,
-        FwTextInputModule,
-      ],
-    }),
-  ],
-};
-export default meta;
-
-type Story = StoryObj<FwLayoutPanelComponent & {
-  children?: string,
-}>;
-
-const smallText: string = `
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-    est laborum.
-  </p>
-  `;
-
-const largeText: string = `
-  <div>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-    est laborum.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-    est laborum.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-    est laborum.
-  </p>
-  </div>
-`;
-
-export const PanelLayout: Story = {
-  args: {
-    fitted: false,
-    height: '',
-    border: 'all',
-    rounded: true,
-    margin: true,
-    padded: true,
-    children: `${largeText}`,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <div style="display: flex; width: 100%; background-color: var(--page-shaded)">
-        <fw-layout-panel [fitted]="fitted" [height]="height" [rounded]="rounded" [border]="border" [margin]="margin" [padded]="padded">
-            ${args.children}
-        </fw-layout-panel>
-        </div>
-    `,
-  }),
-};
-
-export const WithHeaderFooter: Story = {
-  args: {
-    fitted: true,
-    height: '500px;',
-    border: 'all',
-    rounded: true,
-    margin: false,
-    padded: true,
-    children: `
-        <header><h4>Panel Header (&lt;header&gt;)</h4><fw-icon-button size="medium" icon="open"></fw-icon-button></header>
-        ${largeText}
-        <footer>
-          <div style="flex: 1"><h4>Panel Footer (&lt;footer&gt;)</h4></div>
-          <fw-button variant="outline" color="slate">Cancel</fw-button>
-          <fw-button color="success">Approve</fw-button>
-        </footer>
-      `,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <div style="display: flex; width: 100%;">
-        <fw-layout-panel [fitted]="fitted" [height]="height" [rounded]="rounded" [border]="border" [margin]="margin" [padded]="padded">
-            ${args.children}
-        </fw-layout-panel>
-        </div>
-    `,
-  }),
-};
-
-export const Variations: Story = {
-  args: {},
-  render: (args) => ({
-    template: `
-        <div style="background-color: var(--page-shaded); display: flex; padding: 16px; gap: 16px; flex-wrap: wrap; flex: 3">
-        <fw-layout-panel style="flex: 1 1 30%;">
-            ${smallText}
-        </fw-layout-panel>
-        <fw-layout-panel border="all" style="flex: 1 1 30%;">
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-            commodo consequat.
-          </p>
-          <hr>
-          <p>
-            Duis aute irure dolor in reprehenderit in voluptate
-            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-            est laborum.
-          </p>
-        </fw-layout-panel>
-        <fw-layout-panel border="all" [rounded]="false" style="flex: 1 1 30%;">
-            ${smallText}
-            <footer><h4>Footer</h4></footer>
-        </fw-layout-panel>
-        <fw-layout-panel border="none" [rounded]="true" style="flex: 1 1 30%;">
-            <header><h4>Header</h4></header>
-            ${smallText}
-        </fw-layout-panel>
-        <fw-layout-panel border="all" [rounded]="false" [fitted]="true" style="flex: 1 1 30%;">
-            ${smallText}
-            <footer><h4>Fitted with Footer</h4></footer>
-        </fw-layout-panel>
-          <fw-layout-panel border="all" [rounded]="false" [fitted]="true" style="flex: 1 1 30%;">
-            <header><h4>Fitted with Header</h4><fw-icon-button size="medium" icon="open"></fw-icon-button></header>
-            ${smallText}
-            <footer>
-              <div style="flex: 1"><h4>Footer</h4></div>
-              <fw-button variant="outline" color="slate">Cancel</fw-button>
-              <fw-button color="success">Approve</fw-button>
-            </footer>
-          </fw-layout-panel>
-        </div>
-    `,
-    props: args,
-    controls: { disabled: false },
-  }),
-};
-
-export const ComplexPanel: Story = {
-  args: {},
-  render: (args) => ({
-    template: `
-        <div style="background-color: var(--page-shaded); display: flex; padding: 16px; gap: 16px; flex-wrap: wrap; flex: 3">
-            <fw-dialog title="Copy" width="medium">
-                <fw-dialog-content [padded]="true">
-                    <fw-layout-panel border="all" rounded="true">
-                        <fw-form-heading title="Destination" description="Create a new project for destination or merge into an existing project."></fw-form-heading>
-                        <fw-text-input leftIcon="folder-blank" placeholder="Project Path"></fw-text-input>
-                    </fw-layout-panel>
-                    <fw-layout-panel border="all" rounded="true">
-                        <fw-form-heading title="Include" description="If ANY of the following conditions are true, the file will be copied."></fw-form-heading>
-                        <fw-layout-group [padded]="false" justify="flex-start">
-                            <fw-text-input placeholder="Field"></fw-text-input>
-                            <p>is</p>
-                            <fw-text-input placeholder="Label" style="flex: 1"></fw-text-input>
-                            <fw-layout-toolbar [dense]="true">
-                              <fw-switch title="Regex"></fw-switch>
-                              <fw-icon-button icon="minus" color="slate"></fw-icon-button>
-                              <fw-icon-button icon="add-circle"></fw-icon-button>
-                            </fw-layout-toolbar>
-                        </fw-layout-group>
-                        <hr>
-                        <fw-form-heading title="Exclude" description="If ANY of these conditions are true, the file will NOT be copied. This has priority over inclusion criteria (above)"></fw-form-heading>
-                        <fw-layout-group [padded]="false" justify="flex-start">
-                            <fw-text-input placeholder="Field"></fw-text-input>
-                            <p>is</p>
-                            <fw-text-input placeholder="Label" style="flex: 1"></fw-text-input>
-                            <fw-layout-toolbar [dense]="true">
-                              <fw-switch title="Regex"></fw-switch>
-                              <fw-icon-button icon="minus" color="slate" size="small"></fw-icon-button>
-                              <fw-icon-button icon="add-circle" color="primary" size="small"></fw-icon-button>
-                            </fw-layout-toolbar>
-                        </fw-layout-group>
-                    </fw-layout-panel>
-                </fw-dialog-content>
-                <fw-dialog-actions>
-                    <fw-button variant="outline">Cancel</fw-button>
-                    <fw-button variant="solid">Save</fw-button>
-                </fw-dialog-actions>
-            </fw-dialog>
-        </div>
-    `,
-    props: args,
-    controls: { disabled: false },
-  }),
-};

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

@@ -1,16 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'fw-layout-panel',
-  templateUrl: './panel.component.html',
-  styleUrls: ['./panel.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class FwLayoutPanelComponent {
-  @Input() height?: string = '100%';
-  @Input() fitted?: boolean = false;
-  @Input() border?: 'all' | 'left' | 'right' | 'none' = 'none';
-  @Input() rounded?: boolean = true;
-  @Input() margin?: boolean = false;
-  @Input() padded?: boolean = true;
-}

package/src/components/layouts/panel/panel.mdx

@@ -1,28 +0,0 @@
-import {Canvas, Controls, Meta, Primary} from '@storybook/addon-docs';
-import * as LayoutPanelStories from './panel.component.stories';
-import * as LayoutSidebarStories from '../sidebar/sidebar.component.stories';
-
-<Meta of={LayoutPanelStories} title="Layout/Panel"/>
-
-# Panel Layout `<fw-layout-panel>`
-
-```ts
-import { FwLayoutsModule } from '@flywheel-io/vision';
-```
-
-A very useful component for basic layout of padded, bordered, grouped data sets, also very useful in conjunction with the [`Sidebar`](/docs/layout-sidebar--docs)
-
-<Controls/>
-<Primary/>
-
-### Example With Header Footer
-<Canvas of={LayoutPanelStories.WithHeaderFooter}/>
-
-### Example of different variations
-<Canvas of={LayoutPanelStories.Variations}/>
-
-### Example of being used as a grouping panel within a dialog
-<Canvas of={LayoutPanelStories.ComplexPanel}/>
-
-### Example of a fitted panel within a sidebar layout
-<Canvas of={LayoutSidebarStories.TableDetail}/>

package/src/components/layouts/sidebar/sidebar.component.html

@@ -1,14 +0,0 @@
-<div
-  [ngClass]="[
-        outlined?'outlined':'',
-        rounded?'rounded':'',
-        direction,
-        'container'
-        ]">
-  <div class="main" [ngStyle]="{width: 'calc( 100% - '+width+' )'}">
-    <ng-content></ng-content>
-  </div>
-  <div class="aside" [ngStyle]="{width: width}">
-    <ng-content select="aside"></ng-content>
-  </div>
-</div>

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

@@ -1,87 +0,0 @@
-
-.container {
-  display: flex;
-  width: 100%;
-  overflow: hidden;
-  height: 100%;
-  flex-flow: row nowrap;
-
-  .aside {
-    display: flex;
-    overflow: auto;
-
-    aside {
-      flex: 1;
-    }
-  }
-
-  .main {
-    overflow: auto;
-  }
-
-  &.outlined {
-    border: 1px var(--separations-divider) solid;
-
-    .main {
-      border-right: 1px var(--separations-divider) solid;
-    }
-  }
-
-  &.row-reverse {
-    flex-direction: row-reverse;
-
-    &.outlined {
-      .main {
-        border-right: 0;
-        border-left: 1px var(--separations-divider) solid;
-      }
-    }
-  }
-
-  &.rounded {
-    border-radius: 10px;
-  }
-
-  &.third {
-    .main {
-      width: 66.6%;
-    }
-
-    .aside {
-      width: 33.3%;
-    }
-  }
-
-  &.half {
-    .main {
-      width: 50%;
-    }
-
-    .aside {
-      width: 50%;
-    }
-  }
-
-  &.fourth {
-    .main {
-      width: 75%;
-    }
-
-    .aside {
-      width: 25%;
-    }
-  }
-
-  &.closed {
-    .main {
-      width: 100%;
-      border-right: none;
-    }
-
-    .aside {
-      width: 0;
-      padding: 0;
-    }
-  }
-}
-

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

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

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

@@ -1,243 +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 { FwCheckboxModule } from '../../checkbox/checkbox.module';
-import { FwIconModule } from '../../icon/icon.module';
-import { FwIconButtonModule } from '../../icon-button/icon-button.module';
-import { FwNumberInputModule } from '../../number-input/number-input.module';
-import { FwTableModule } from '../../table/table.module';
-import { FwTextInputModule } from '../../text-input/text-input.module';
-import { FwWrappedInputModule } from '../../wrapped-input/wrapped-input.module';
-import { FwLayoutsModule } from '../layouts.module';
-import { FwLayoutSidebarComponent } from './sidebar.component';
-
-const meta: Meta = {
-  title: 'Layout/Sidebar',
-  component: FwLayoutSidebarComponent,
-  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,
-        FwCheckboxModule,
-        FwIconModule,
-        FwIconButtonModule,
-        FwLayoutsModule,
-        FwNumberInputModule,
-        FwTableModule,
-        FwTextInputModule,
-        FwWrappedInputModule,
-      ],
-    }),
-  ],
-};
-export default meta;
-
-type Story = StoryObj<FwLayoutSidebarComponent & {
-  children?: string,
-}>;
-
-const smallText = `
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-    est laborum.
-  </p>
-  `;
-
-const largeText = `
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-    est laborum.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-    est laborum.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-    est laborum.
-  </p>
-`;
-
-export const SidebarLayout: Story = {
-  args: {
-    outlined: true,
-    rounded: true,
-    width: '65%',
-    direction: 'row',
-    children: `
-
-    <fw-layout-panel>
-        <h3>Main Panel (No Header or Footer)</h3>
-        ${smallText}
-    </fw-layout-panel>
-    <aside>
-      <fw-layout-panel [fitted]="true">
-        <header>
-          <h3>Aside Detail (Fitted Layout)</h3>
-          <fw-icon-button size="medium" icon="open"></fw-icon-button>
-        </header>
-        ${largeText}
-        <footer>
-          <fw-button variant="outline" color="slate">Cancel</fw-button>
-          <fw-button color="success">Approve</fw-button>
-        </footer>
-      </fw-layout-panel>
-    </aside>
-
-    `,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <fw-layout-sidebar [outlined]="outlined" [rounded]="rounded" [direction]="direction" [width]="width">
-            ${args.children}
-        </fw-layout-sidebar>
-    `,
-  }),
-};
-
-const dataSet = [
-  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', gas: true },
-  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', gas: true },
-  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', gas: false },
-  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be', gas: false },
-  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', gas: false },
-  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', gas: false },
-  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', gas: true },
-  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', gas: true },
-  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', gas: true },
-  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', gas: true },
-];
-
-
-export const TableDetail: Story = {
-  args: {
-    outlined: true,
-    rounded: true,
-    width: '35%',
-    direction: 'row',
-    children: '',
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      dataSource: dataSet,
-      displayedColumns: ['position', 'name', 'weight', 'symbol'],
-      selected: dataSet[0],
-    },
-    controls: { disabled: false },
-    template: `
-        <div style="background-color: var(--page-shaded); display: block; padding: 16px;">
-        <fw-layout-sidebar [outlined]="outlined" [rounded]="rounded" [direction]="direction" [width]="width">
-            <fw-layout-panel [rounded]="false">
-                <table fw-table [dataSource]="dataSource">
-                  <!-- Position Column -->
-                  <ng-container fwColumnDef="position">
-                    <th fw-header-cell *fwHeaderCellDef> No. </th>
-                    <td fw-cell *fwCellDef="let element"> {{element.position}} </td>
-                  </ng-container>
-
-                  <!-- Name Column -->
-                  <ng-container fwColumnDef="name">
-                    <th fw-header-cell *fwHeaderCellDef> Name </th>
-                    <td fw-cell *fwCellDef="let element"> {{element.name}} </td>
-                  </ng-container>
-
-                  <!-- Weight Column -->
-                  <ng-container fwColumnDef="weight">
-                    <th fw-header-cell *fwHeaderCellDef> Weight </th>
-                    <td fw-cell *fwCellDef="let element"> {{element.weight}} </td>
-                  </ng-container>
-
-                  <!-- Symbol Column -->
-                  <ng-container fwColumnDef="symbol">
-                    <th fw-header-cell *fwHeaderCellDef> Symbol </th>
-                    <td fw-cell *fwCellDef="let element"> {{element.symbol}} </td>
-                  </ng-container>
-                  <tr fw-header-row *fwHeaderRowDef="displayedColumns"></tr>
-                  <tr fw-row *fwRowDef="let row; columns: displayedColumns; index as i" (click)="selected=row" [ngStyle]="{fontWeight: selected===row?'bold':'normal'}">
-                  </tr>
-                </table>
-            </fw-layout-panel>
-            <aside>
-              <fw-layout-panel [fitted]="true" [rounded]="false">
-                <header>
-                  <h3>{{selected.name}}</h3>
-                </header>
-                <fw-grid>
-                    <fw-grid-item [cols]="12">
-                      <fw-wrapped-input title="Position">
-                      <fw-number-input [value]="selected.position"></fw-number-input>
-                      </fw-wrapped-input>
-                    </fw-grid-item>
-                    <fw-grid-item [cols]="12">
-                      <fw-wrapped-input title="Name">
-                      <fw-text-input [value]="selected.name"></fw-text-input>
-                      </fw-wrapped-input>
-                    </fw-grid-item>
-                    <fw-grid-item [cols]="12">
-                      <fw-wrapped-input title="Weight">
-                      <fw-number-input [value]="selected.weight" numberType="float"></fw-number-input>
-                      </fw-wrapped-input>
-                    </fw-grid-item>
-                    <fw-grid-item [cols]="12">
-                      <fw-wrapped-input title="Symbol">
-                      <fw-text-input [value]="selected.symbol"></fw-text-input>
-                      </fw-wrapped-input>
-                    </fw-grid-item>
-                     <fw-grid-item [cols]="12">
-                      <fw-wrapped-input title="Is Gaseous">
-                      <fw-checkbox [checked]="selected.gas"></fw-checkbox>
-                      </fw-wrapped-input>
-                    </fw-grid-item>
-                </fw-grid>
-                <footer>
-                  <fw-button variant="outline" color="slate">Cancel</fw-button>
-                  <fw-button color="success">Save</fw-button>
-                </footer>
-              </fw-layout-panel>
-            </aside>
-        </fw-layout-sidebar>
-        </div>
-    `,
-  }),
-};

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

@@ -1,14 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'fw-layout-sidebar',
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class FwLayoutSidebarComponent {
-  @Input() outlined: boolean = true;
-  @Input() rounded: boolean = true;
-  @Input() width?: string = '65%';
-  @Input() direction?: 'row' | 'row-reverse' = 'row';
-}