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

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

@@ -0,0 +1,249 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,87 @@
+
+.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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,243 @@
+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

@@ -0,0 +1,14 @@
+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';
+}