From 72b075b4f8fb3a16b44244ccf2cbf85f081b5c9e Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Fri, 13 May 2016 11:26:05 +0300
Subject: [PATCH] form layout component

---
 .../basicForm/basicForm.component.ts          | 11 ++++++
 .../components/basicForm/basicForm.html       | 17 ++++++++
 .../layouts/components/basicForm/index.ts     |  1 +
 .../blockForm/blockForm.component.ts          | 11 ++++++
 .../components/blockForm/blockForm.html       | 29 ++++++++++++++
 .../layouts/components/blockForm/index.ts     |  1 +
 .../horizontalForm.component.ts               | 11 ++++++
 .../horizontalForm/horizontalForm.html        | 29 ++++++++++++++
 .../components/horizontalForm/index.ts        |  1 +
 .../layouts/components/inlineForm/index.ts    |  1 +
 .../inlineForm/inlineForm.component.ts        | 11 ++++++
 .../components/inlineForm/inlineForm.html     | 15 +++++++
 .../components/withoutLabelsForm/index.ts     |  1 +
 .../withoutLabelsForm.component.ts            | 11 ++++++
 .../withoutLabelsForm/withoutLabelsForm.html  | 12 ++++++
 .../components/layouts/layouts.component.ts   |  8 +++-
 .../forms/components/layouts/layouts.html     | 39 ++++++++++++++++++-
 .../components/sidebar/sidebar.service.ts     |  2 +-
 18 files changed, 208 insertions(+), 3 deletions(-)
 create mode 100644 src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/basicForm/basicForm.html
 create mode 100644 src/app/pages/forms/components/layouts/components/basicForm/index.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/blockForm/blockForm.component.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/blockForm/blockForm.html
 create mode 100644 src/app/pages/forms/components/layouts/components/blockForm/index.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.html
 create mode 100644 src/app/pages/forms/components/layouts/components/horizontalForm/index.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/inlineForm/index.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.html
 create mode 100644 src/app/pages/forms/components/layouts/components/withoutLabelsForm/index.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.component.ts
 create mode 100644 src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.html

diff --git a/src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts b/src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts
new file mode 100644
index 00000000..3a3d60a0
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'basic-form',
+  template: require('./basicForm.html'),
+})
+export class BasicForm {
+
+  constructor() {
+  }
+}
diff --git a/src/app/pages/forms/components/layouts/components/basicForm/basicForm.html b/src/app/pages/forms/components/layouts/components/basicForm/basicForm.html
new file mode 100644
index 00000000..e44e368f
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/basicForm/basicForm.html
@@ -0,0 +1,17 @@
+<form>
+  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+  </div>
+  <div class="checkbox">
+    <label class="custom-checkbox">
+      <input type="checkbox">
+      <span>Check me out</span>
+    </label>
+  </div>
+  <button type="submit" class="btn btn-danger">Submit</button>
+</form>
diff --git a/src/app/pages/forms/components/layouts/components/basicForm/index.ts b/src/app/pages/forms/components/layouts/components/basicForm/index.ts
new file mode 100644
index 00000000..ce43283f
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/basicForm/index.ts
@@ -0,0 +1 @@
+export * from './basicForm.component';
diff --git a/src/app/pages/forms/components/layouts/components/blockForm/blockForm.component.ts b/src/app/pages/forms/components/layouts/components/blockForm/blockForm.component.ts
new file mode 100644
index 00000000..aa85aeca
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/blockForm/blockForm.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'block-form',
+  template: require('./blockForm.html'),
+})
+export class BlockForm {
+
+  constructor() {
+  }
+}
diff --git a/src/app/pages/forms/components/layouts/components/blockForm/blockForm.html b/src/app/pages/forms/components/layouts/components/blockForm/blockForm.html
new file mode 100644
index 00000000..1cf76c65
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/blockForm/blockForm.html
@@ -0,0 +1,29 @@
+<div class="row">
+  <div class="col-sm-6">
+    <div class="form-group">
+      <label for="inputFirstName">First Name</label>
+      <input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="form-group">
+      <label for="inputLastName">Last Name</label>
+      <input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
+    </div>
+  </div>
+</div>
+<div class="row">
+  <div class="col-sm-6">
+    <div class="form-group">
+      <label for="inputFirstName">Email</label>
+      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="form-group">
+      <label for="inputWebsite">Website</label>
+      <input type="text" class="form-control" id="inputWebsite" placeholder="Website">
+    </div>
+  </div>
+</div>
+<button type="submit" class="btn btn-primary">Submit</button>
diff --git a/src/app/pages/forms/components/layouts/components/blockForm/index.ts b/src/app/pages/forms/components/layouts/components/blockForm/index.ts
new file mode 100644
index 00000000..87f470b8
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/blockForm/index.ts
@@ -0,0 +1 @@
+export * from './blockForm.component';
diff --git a/src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts b/src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts
new file mode 100644
index 00000000..4eec8323
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'horizontal-form',
+  template: require('./horizontalForm.html'),
+})
+export class HorizontalForm {
+
+  constructor() {
+  }
+}
diff --git a/src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.html b/src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.html
new file mode 100644
index 00000000..1823aab1
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.html
@@ -0,0 +1,29 @@
+<form class="form-horizontal">
+  <div class="form-group row">
+    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
+    <div class="col-sm-10">
+      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+    </div>
+  </div>
+  <div class="form-group row">
+    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
+    <div class="col-sm-10">
+      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+    </div>
+  </div>
+  <div class="form-group row">
+    <div class="col-sm-offset-2 col-sm-10">
+      <div class="checkbox">
+        <label class="custom-checkbox">
+          <input type="checkbox">
+          <span>Remember me</span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="form-group row">
+    <div class="col-sm-offset-2 col-sm-10">
+      <button type="submit" class="btn btn-warning">Sign in</button>
+    </div>
+  </div>
+</form>
diff --git a/src/app/pages/forms/components/layouts/components/horizontalForm/index.ts b/src/app/pages/forms/components/layouts/components/horizontalForm/index.ts
new file mode 100644
index 00000000..9856ff75
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/horizontalForm/index.ts
@@ -0,0 +1 @@
+export * from './horizontalForm.component';
diff --git a/src/app/pages/forms/components/layouts/components/inlineForm/index.ts b/src/app/pages/forms/components/layouts/components/inlineForm/index.ts
new file mode 100644
index 00000000..8104f6b6
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/inlineForm/index.ts
@@ -0,0 +1 @@
+export * from './inlineForm.component';
diff --git a/src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts b/src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts
new file mode 100644
index 00000000..029f4422
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'inline-form',
+  template: require('./inlineForm.html'),
+})
+export class InlineForm {
+
+  constructor() {
+  }
+}
diff --git a/src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.html b/src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.html
new file mode 100644
index 00000000..eb466ec1
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.html
@@ -0,0 +1,15 @@
+<form class="row form-inline">
+  <div class="form-group col-sm-3 col-xs-6">
+    <input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
+  </div>
+  <div class="form-group col-sm-3 col-xs-6">
+    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
+  </div>
+  <div class="checkbox">
+    <label class="custom-checkbox">
+      <input type="checkbox">
+      <span>Remember me</span>
+    </label>
+  </div>
+  <button type="submit" class="btn btn-primary">Send invitation</button>
+</form>
diff --git a/src/app/pages/forms/components/layouts/components/withoutLabelsForm/index.ts b/src/app/pages/forms/components/layouts/components/withoutLabelsForm/index.ts
new file mode 100644
index 00000000..6e3a1d65
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/withoutLabelsForm/index.ts
@@ -0,0 +1 @@
+export * from './withoutLabelsForm.component';
diff --git a/src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.component.ts b/src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.component.ts
new file mode 100644
index 00000000..c5cfab74
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'without-labels-form',
+  template: require('./withoutLabelsForm.html'),
+})
+export class WithoutLabelsForm {
+
+  constructor() {
+  }
+}
diff --git a/src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.html b/src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.html
new file mode 100644
index 00000000..f8f1f07d
--- /dev/null
+++ b/src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.html
@@ -0,0 +1,12 @@
+<form>
+  <div class="form-group">
+    <input type="text" class="form-control" placeholder="Recipients">
+  </div>
+  <div class="form-group">
+    <input type="text" class="form-control" placeholder="Subject">
+  </div>
+  <div class="form-group">
+    <textarea class="form-control" placeholder="Message"></textarea>
+  </div>
+  <button type="submit" class="btn btn-success">Send</button>
+</form>
diff --git a/src/app/pages/forms/components/layouts/layouts.component.ts b/src/app/pages/forms/components/layouts/layouts.component.ts
index 5f9d3c36..b8d59856 100644
--- a/src/app/pages/forms/components/layouts/layouts.component.ts
+++ b/src/app/pages/forms/components/layouts/layouts.component.ts
@@ -2,10 +2,16 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 import {BaCard} from '../../../../theme/components';
 
+import {InlineForm} from './components/inlineForm';
+import {BlockForm} from './components/blockForm';
+import {HorizontalForm} from './components/horizontalForm';
+import {BasicForm} from './components/basicForm';
+import {WithoutLabelsForm} from './components/withoutLabelsForm';
+
 @Component({
   selector: 'layouts',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard],
+  directives: [BaCard, InlineForm, BlockForm, HorizontalForm, BasicForm, WithoutLabelsForm],
   styles: [require('./layouts.scss')],
   template: require('./layouts.html'),
 })
diff --git a/src/app/pages/forms/components/layouts/layouts.html b/src/app/pages/forms/components/layouts/layouts.html
index ce013625..5ba46e97 100644
--- a/src/app/pages/forms/components/layouts/layouts.html
+++ b/src/app/pages/forms/components/layouts/layouts.html
@@ -1 +1,38 @@
-hello
+<div class="widgets">
+
+  <div class="row">
+    <div class="col-md-12">
+      <ba-card title="Inline Form" baCardClass="with-scroll">
+        <inline-form></inline-form>
+      </ba-card>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-6">
+      <div>
+        <ba-card title="Basic Form" baCardClass="with-scroll">
+          <basic-form></basic-form>
+        </ba-card>
+      </div>
+
+      <div>
+        <ba-card title="Horizontal Form" baCardClass="with-scroll">
+          <horizontal-form></horizontal-form>
+        </ba-card>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div>
+        <ba-card title="Form Without Labels" baCardClass="with-scroll">
+          <without-labels-form></without-labels-form>
+        </ba-card>
+      </div>
+      <div>
+        <ba-card title="Block Form" baCardClass="with-scroll">
+          <block-form></block-form>
+        </ba-card>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/theme/components/sidebar/sidebar.service.ts b/src/app/theme/components/sidebar/sidebar.service.ts
index a8f87493..749adda3 100644
--- a/src/app/theme/components/sidebar/sidebar.service.ts
+++ b/src/app/theme/components/sidebar/sidebar.service.ts
@@ -95,7 +95,7 @@ export class SidebarService {
           name: 'Inputs',
         },
         {
-          title: 'Form Elements',
+          title: 'Form Layouts',
           name: 'Layouts',
         },
       ]