added more controls

prettier.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 120,
+  printWidth: 80,
   tabWidth: 2,
   useTabs: false,
   semi: true,

projects/examples/src/app/app.module.ts

@@ -22,7 +22,8 @@ import { AutoCompleteComponent } from "./pages/auto-complete/auto-complete.compo
 import { DateComponent } from "./pages/date/date.component";
 import { MatInputModule } from "@angular/material/input";
 import { FormsModule } from "@angular/forms";
-import { ColorComponent } from './pages/color/color.component';
+import { ColorComponent } from "./pages/color/color.component";
+import { GridComponent } from './pages/grid/grid.component';
 
 @NgModule({
   declarations: [
@@ -39,7 +40,8 @@ import { ColorComponent } from './pages/color/color.component';
     NumberComponent,
     AutoCompleteComponent,
     DateComponent,
-    ColorComponent
+    ColorComponent,
+    GridComponent
   ],
   imports: [
     BrowserModule,
@@ -50,7 +52,8 @@ import { ColorComponent } from './pages/color/color.component';
     MatButtonModule,
     MatDividerModule,
     MatInputModule,
-    FormsModule
+    FormsModule,
+    FuiFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

projects/examples/src/app/pages/check-box/check-box.component.html

@@ -1 +1,4 @@
 <p>check-box works!</p>
+<fui-dynamic-form [formConfig]="inder"></fui-dynamic-form>
+<h1>Disabled</h1>
+<fui-dynamic-form [formConfig]="disabled"></fui-dynamic-form>

projects/examples/src/app/pages/check-box/check-box.component.ts

@@ -1,15 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { FuiFormBuilder as f } from "@fui/forms";
 
 @Component({
-  selector: 'app-check-box',
-  templateUrl: './check-box.component.html',
-  styleUrls: ['./check-box.component.scss']
+  selector: "app-check-box",
+  templateUrl: "./check-box.component.html",
+  styleUrls: ["./check-box.component.scss"]
 })
 export class CheckBoxComponent implements OnInit {
+  inder = f.form({ inder: f.checkbox().indeterminate() }).showDebug();
+  disabled = f
+    .form({
+      one: f
+        .checkbox()
+        .label("Disabled with defaultValue: true")
+        .defaultValue(true),
+      two: f.checkbox().label("Disabled with no default value")
+    })
+    .disable({
+      one: model => true,
+      two: model => true
+    })
+    .showDebug();
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }

projects/examples/src/app/pages/color/color.component.html

@@ -1 +1,2 @@
 <p>color works!</p>
+<fui-dynamic-form [formConfig]="plain"></fui-dynamic-form>

projects/examples/src/app/pages/color/color.component.ts

@@ -1,15 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { FuiFormBuilder as f } from "@fui/forms";
 
 @Component({
-  selector: 'app-color',
-  templateUrl: './color.component.html',
-  styleUrls: ['./color.component.scss']
+  selector: "app-color",
+  templateUrl: "./color.component.html",
+  styleUrls: ["./color.component.scss"]
 })
 export class ColorComponent implements OnInit {
+  plain = f
+    .form({
+      radius100: f.color().label("Border-color r:100").radius(100),
+      above: f
+        .color()
+        .label("Label-above")
+        .labelPos("above")
+        .hint("This is a hint"),
+      after: f.color().label("Label-right").labelPos("after"),
+      below: f.color().label("Label-below").labelPos("below"),
+      before: f.color().label("Label-left").labelPos("before"),
+      noLabel: f.color().labelPos("before").hint("No label")
+    })
+    .showDebug();
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }

projects/examples/src/app/pages/dialog-forms/forms.ts

@@ -2,8 +2,8 @@ import { FuiFormBuilder as f } from "@fui/forms";
 
 export const NameDialog = f
   .dialog({
-    name: f.textField().label("Name").label("Name").hint("Enter name"),
-    age: f.numberField().label("Age").min(0).max(100).placeholder("Your age")
+    name: f.text().label("Name").label("Name").hint("Enter name"),
+    age: f.number().label("Age").min(0).max(100).placeholder("Your age")
   })
   .cancelButtonText("Cancel")
   .saveButton("Save my name")

projects/examples/src/app/pages/form-examples/form-examples.ts

@@ -1,9 +1,13 @@
 import { FuiFormBuilder as f } from "@fui/forms";
 
 export const personalData = f.form({
-  firstName: f.textField().label("Firstname").minLength(1).hint("Name needs to be at least 1 character long"),
-  lastName: f.textField().label("Lastname"),
-  age: f.numberField().label("Age").min(0).max(100),
+  firstName: f
+    .text()
+    .label("Firstname")
+    .minLength(1)
+    .hint("Name needs to be at least 1 character long"),
+  lastName: f.text().label("Lastname"),
+  age: f.number().label("Age").min(0).max(100),
   lang: f
     .select([
       { label: "Norwegian", value: "no" },
@@ -15,14 +19,18 @@ export const personalData = f.form({
 export const disableForm = f
   .form({
     checkbox1: f.checkbox().label("Label"),
-    checkbox2: f.checkbox().label("Warn").color("warn").defaultValue(true),
-    checkbox3: f.checkbox().label("BeforePos").labelPos("before").defaultValue(true),
+    checkbox2: f.checkbox().label("Warn").theme("warn").defaultValue(true),
+    checkbox3: f
+      .checkbox()
+      .label("BeforePos")
+      .labelPos("before")
+      .defaultValue(true),
 
     disable: f.select([
       { label: "disable", value: "disable" },
       { label: "enable", value: "enable" }
     ]),
-    name: f.textField().label("Name").hint("Disable with select above")
+    name: f.text().label("Name").hint("Disable with select above")
   })
   .disable({
     name: model => {
@@ -43,8 +51,8 @@ const colorOptions: { label: string; value: string }[] = [
   { label: "Orange", value: "orange" }
 ];
 export const optionalForm = f.form({
-  text: f.textField().label("Text"),
-  textOptional: f.textField().label("TextOptional").optional(),
+  text: f.text().label("Text"),
+  textOptional: f.text().label("TextOptional").optional(),
   textArea: f.textArea().label("TextArea"),
   textAreaOptional: f.textArea().label("TextAreaOptional").optional(),
   select: f.select([...colorOptions]).label("Select"),
@@ -57,8 +65,8 @@ export const optionalForm = f.form({
     .label("SelectMultiOptional")
     .optional(),
   selectMulti: f.selectMulti([...colorOptions]).label("SelectMulti"),
-  number: f.numberField().label("Number"),
-  numberOptional: f.numberField().label("NumberOptional").optional()
+  number: f.number().label("Number"),
+  numberOptional: f.number().label("NumberOptional").optional()
 });
 
 export const textArea = f.form({

projects/examples/src/app/pages/grid/grid.component.html

@@ -0,0 +1 @@
+<p>grid works!</p>

projects/examples/src/app/pages/grid/grid.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-grid',
+  templateUrl: './grid.component.html',
+  styleUrls: ['./grid.component.scss']
+})
+export class GridComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/examples/src/app/pages/radio/radio.component.html

@@ -1 +1,2 @@
 <p>radio works!</p>
+<fui-dynamic-form [formConfig]="form1"></fui-dynamic-form>

projects/examples/src/app/pages/radio/radio.component.ts

@@ -1,15 +1,33 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { FuiFormBuilder as f } from "@fui/forms";
 
 @Component({
-  selector: 'app-radio',
-  templateUrl: './radio.component.html',
-  styleUrls: ['./radio.component.scss']
+  selector: "app-radio",
+  templateUrl: "./radio.component.html",
+  styleUrls: ["./radio.component.scss"]
 })
 export class RadioComponent implements OnInit {
+  form1 = f
+    .form({
+      horizontal: f
+        .radio([
+          { label: "ONE", value: "one" },
+          { label: "TWO", value: "two" },
+          { label: "THREE", value: "three" }
+        ])
+        .label("Dette er label"),
+      vertical: f
+        .radio([
+          { label: "ONE", value: "one" },
+          { label: "TWO", value: "two" },
+          { label: "THREE", value: "three" }
+        ])
+        .label("Vertical radio")
+        .direction("column")
+    })
+    .showDebug();
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }

projects/examples/src/app/pages/slide-toggle/slide-toggle.component.html

@@ -1 +1,2 @@
 <p>slide-toggle works!</p>
+<fui-dynamic-form [formConfig]="form1"></fui-dynamic-form>

projects/examples/src/app/pages/slide-toggle/slide-toggle.component.ts

@@ -1,15 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { FuiFormBuilder as f } from "@fui/forms";
 
 @Component({
-  selector: 'app-slide-toggle',
-  templateUrl: './slide-toggle.component.html',
-  styleUrls: ['./slide-toggle.component.scss']
+  selector: "app-slide-toggle",
+  templateUrl: "./slide-toggle.component.html",
+  styleUrls: ["./slide-toggle.component.scss"]
 })
 export class SlideToggleComponent implements OnInit {
+  form1 = f
+    .form({
+      checked: f.slideToggle().label("Label for true by default"),
+      mustBeTrue: f.slideToggle().label("Must be checked").mustBeTrue(),
+      labelBefore: f.slideToggle().label("Label before").labelPos("before")
+    })
+    .showDebug();
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }