feat: (core) Add [state] to all input-group related components. Adapt…

… forms (#1613) * Add [state] @input to all input-group related components Solve conflicts, Change FormState type file Add new forms styling Add input group examples Add datepicker form example Add multiple addons on input group Adapt new forms from styles, add form usage example in input-group components Change input group multiple addons * Add semantic toggle, beautify forms examples * Fix cursor pointer, remove old help message examples * Remove [isCheck], remove fd-form-control class, change fd-form-set to fd-fieldset * Solve rebase conflicts, fix tests * Adapt newest RC.21 version with new input groups * Adapt 0.4.0v styles * Remove multi addons, fix localization editor compact mode * Fix documentation, playground, optimize class adding * Fix datepicker and datetimepickers examples state, remove leftovers * Change bracket on comments * Fix stackblitz, remove scss imports, change fd-fieldset to body-less component, remove brs * Add dynamic states to datepickers * Add example of dynamic state to multi input
SAP · Jan 6, 2020 · adabbc7 · adabbc7
1 parent 4adbf80
commit adabbc7
Show file tree

Hide file tree

Showing 115 changed files with 965 additions and 690 deletions.
diff --git a/apps/docs/src/app/core/api-files.ts b/apps/docs/src/app/core/api-files.ts
@@ -103,7 +103,6 @@ export const API_FILES = {
     inputGroup: [
         'InputGroupComponent',
         'InputGroupNumberComponent',
-        'InputGroupSearchComponent'
     ],
     layoutGrid: [
         'LayoutGridComponent',

diff --git a/apps/docs/src/app/core/component-docs/checkbox/examples/checkbox-example.component.html b/apps/docs/src/app/core/component-docs/checkbox/examples/checkbox-example.component.html
@@ -1,86 +1,114 @@
-<fieldset fd-form-set>
+<fieldset fd-fieldset>
     <legend fd-form-legend>Checkboxes</legend>
-    <div fd-form-item [isCheck]="true">
-        <label fd-form-label for="checkbox-1">
+    <div fd-form-item>
+        <label fd-form-label for="checkbox-1" [checkbox]="true">
             <input fd-form-control type="checkbox" id="checkbox-1" name="checkbox-name-1" checked>
             Option One
         </label>
     </div>
-    <div fd-form-item [isCheck]="true">
-        <label fd-form-label for="checkbox-2">
+    <div fd-form-item>
+        <label fd-form-label for="checkbox-2" [checkbox]="true">
             <input fd-form-control type="checkbox" id="checkbox-2" name="checkbox-name-1">
             Option Two
         </label>
     </div>
-    <div fd-form-item [isCheck]="true">
-        <label fd-form-label for="checkbox-3">
+    <div fd-form-item>
+        <label fd-form-label for="checkbox-3" [checkbox]="true">
             <input fd-form-control type="checkbox" id="checkbox-3" name="checkbox-name-1">
             Option Three
         </label>
     </div>
 </fieldset>
 
-<fieldset fd-form-set>
+<fieldset fd-fieldset>
+    <legend fd-form-legend>Compact Checkboxes</legend>
+    <div fd-form-item>
+        <label fd-form-label for="checkbox-13" [checkbox]="true">
+            <input fd-form-control [compact]="true" type="checkbox" id="checkbox-13" name="checkbox-name-6" checked>
+            Option One
+        </label>
+    </div>
+    <div fd-form-item>
+        <label fd-form-label for="checkbox-14" [checkbox]="true">
+            <input fd-form-control [compact]="true" type="checkbox" id="checkbox-14" name="checkbox-name-6">
+            Option Two
+        </label>
+    </div>
+    <div fd-form-item>
+        <label fd-form-label for="checkbox-15" [checkbox]="true">
+            <input fd-form-control [compact]="true" type="checkbox" id="checkbox-15" name="checkbox-name-6">
+            Option Three
+        </label>
+    </div>
+</fieldset>
+
+<fieldset fd-fieldset>
     <legend fd-form-legend>Checkboxes disabled</legend>
-    <div fd-form-item [isCheck]="true">
-        <label fd-form-label for="checkbox-4">
+    <div fd-form-item>
+        <label fd-form-label for="checkbox-4" [checkbox]="true">
             <input fd-form-control type="checkbox" id="checkbox-4" name="checkbox-name-2" disabled>
             Option One
         </label>
     </div>
-    <div fd-form-item [isCheck]="true">
-        <label fd-form-label for="checkbox-5">
+    <div fd-form-item>
+        <label fd-form-label for="checkbox-5" [checkbox]="true">
             <input fd-form-control type="checkbox" id="checkbox-5" name="checkbox-name-2" checked disabled>
             Option Two
         </label>
     </div>
-    <div fd-form-item [isCheck]="true">
-        <label fd-form-label for="checkbox-6">
+    <div fd-form-item>
+        <label fd-form-label for="checkbox-6" [checkbox]="true">
             <input fd-form-control type="checkbox" id="checkbox-6" name="checkbox-name-2" disabled>
             Option Three
         </label>
     </div>
 </fieldset>
-<fieldset fd-form-set>
+<fieldset fd-fieldset>
     <legend fd-form-legend>Checkboxes inline</legend>
     <fd-form-group>
-        <div fd-form-item [isInline]="true" [isCheck]="true">
-            <label fd-form-label for="checkbox-7">
+        <div fd-form-item [isInline]="true">
+            <label fd-form-label for="checkbox-7" [checkbox]="true">
                 <input fd-form-control type="checkbox" id="checkbox-7" name="checkbox-name-3" checked> Option One
             </label>
         </div>
-        <div fd-form-item [isInline]="true" [isCheck]="true">
-            <label fd-form-label for="checkbox-8">
+        <div fd-form-item [isInline]="true">
+            <label fd-form-label for="checkbox-8" [checkbox]="true">
                 <input fd-form-control type="checkbox" id="checkbox-8" name="checkbox-name-3"> Option Two
             </label>
         </div>
-        <div fd-form-item [isInline]="true" [isCheck]="true">
-            <label fd-form-label for="checkbox-9">
+        <div fd-form-item [isInline]="true">
+            <label fd-form-label for="checkbox-9" [checkbox]="true">
                 <input fd-form-control type="checkbox" id="checkbox-9" name="checkbox-name-3"> Option Three
             </label>
         </div>
     </fd-form-group>
 </fieldset>
-<fieldset fd-form-set>
+<fieldset fd-fieldset>
     <legend fd-form-legend>Checkbox States</legend>
     <fd-form-group>
-        <div fd-form-item [isCheck]="true">
-            <label fd-form-label for="checkbox-10">
+        <div fd-form-item>
+            <label fd-form-label for="checkbox-10" [checkbox]="true">
                 <input fd-form-control type="checkbox" id="checkbox-10" name="checkbox-name-3" [state]="'valid'">
                 Valid Option
             </label>
         </div>
-        <div fd-form-item [isCheck]="true">
-            <label fd-form-label for="checkbox-11">
+        <div fd-form-item>
+            <label fd-form-label for="checkbox-11" [checkbox]="true">
                 <input fd-form-control type="checkbox" id="checkbox-11" name="checkbox-name-4" [state]="'warning'">
                 Warning Option
             </label>
         </div>
-        <div fd-form-item [isCheck]="true">
-            <label fd-form-label for="checkbox-12">
+        <div fd-form-item>
+            <label fd-form-label for="checkbox-12" [checkbox]="true">
                 <input fd-form-control type="checkbox" id="checkbox-12" name="checkbox-name-5" [state]="'invalid'">
                 Invalid Option
             </label>
         </div>
+        <div fd-form-item>
+            <label fd-form-label for="checkbox-16" [checkbox]="true">
+                <input fd-form-control type="checkbox" id="checkbox-16" name="checkbox-name-5" [state]="'information'">
+                Information Option
+            </label>
+        </div>
     </fd-form-group>
 </fieldset>
diff --git a/.../src/app/core/component-docs/checkbox/examples/checkbox-form-group-example.component.html b/.../src/app/core/component-docs/checkbox/examples/checkbox-form-group-example.component.html
@@ -1,28 +1,28 @@
 <p>Checkboxes</p>
 <form [formGroup]="customForm">
-    <div fd-form-set>
-        <div fd-form-item [isCheck]="true">
-            <label fd-form-label for="checkbox-13">
-                <input fd-form-control formControlName="firstOption" type="checkbox" id="checkbox-13"
-                       name="checkbox-name-6">
+    <fieldset fd-fieldset>
+        <div fd-form-item>
+            <label fd-form-label for="checkbox-17" [checkbox]="true">
+                <input fd-form-control formControlName="firstOption" type="checkbox" id="checkbox-17"
+                       name="checkbox-name-7">
                 Option 1
             </label>
         </div>
-        <div fd-form-item [isCheck]="true">
-            <label fd-form-label for="checkbox-14">
-                <input fd-form-control formControlName="secondOption" type="checkbox" id="checkbox-14"
-                       name="checkbox-name-6">
+        <div fd-form-item>
+            <label fd-form-label for="checkbox-18" [checkbox]="true">
+                <input fd-form-control formControlName="secondOption" type="checkbox" id="checkbox-18"
+                       name="checkbox-name-7">
                 Option 2
             </label>
         </div>
-        <div fd-form-item [isCheck]="true">
-            <label fd-form-label for="checkbox-15">
-                <input fd-form-control formControlName="thirdOption" type="checkbox" id="checkbox-15"
-                       name="checkbox-name-6">
+        <div fd-form-item>
+            <label fd-form-label for="checkbox-19" [checkbox]="true">
+                <input fd-form-control formControlName="thirdOption" type="checkbox" id="checkbox-19"
+                       name="checkbox-name-7">
                 Option 3
             </label>
         </div>
-    </div>
+    </fieldset>
 </form>
 <br>
 Option 1 Value: {{ customForm.controls.firstOption.value }} Disabled: {{ customForm.controls.firstOption.disabled }} <br>

diff --git a/...cs/src/app/core/component-docs/combobox/examples/combobox-disabled-example.component.html b/...cs/src/app/core/component-docs/combobox/examples/combobox-disabled-example.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="customForm">
-    <div fd-form-set class="flex-form">
+    <fieldset fd-fieldset class="flex-form">
         <div fd-form-item>
             <label fd-form-label for="form-combo-1">Select Fruit:</label>
             <fd-combobox
@@ -19,7 +19,7 @@
             Disabled: {{ customForm.controls.disabledComboControl.disabled }}<br/>
             Selected Value: {{ customForm.controls.disabledComboControl.value }}
         </div>
-    </div>
+    </fieldset>
 </form>
 
 
diff --git a/.../docs/src/app/core/component-docs/combobox/examples/combobox-forms-example.component.html b/.../docs/src/app/core/component-docs/combobox/examples/combobox-forms-example.component.html
@@ -1,11 +1,15 @@
 <form [formGroup]="customForm">
-    Combobox with communication via Objects
-    <fd-combobox [dropdownValues]="dropdownValues"
-                 [placeholder]="'Type some text...'"
-                 [displayFn]="myDisplayFunction"
-                 [communicateByObject]="true"
-                 formControlName="itemOnDropdownMode">
-    </fd-combobox>
+    <div fd-form-item>
+        <label fd-form-label>Combobox with communication via Objects</label>
+        <fd-combobox [dropdownValues]="dropdownValues"
+                     [state]="'information'"
+                     [placeholder]="'Type some text...'"
+                     [displayFn]="myDisplayFunction"
+                     [communicateByObject]="true"
+                     formControlName="itemOnDropdownMode">
+        </fd-combobox>
+        <fd-form-message [type]="'information'">More information</fd-form-message>
+    </div>
 </form><br/>
 
 Touched: {{customForm.controls.itemOnDropdownMode.touched}}<br/>
@@ -14,12 +18,16 @@
 <br/><br/>
 
 <form [formGroup]="customForm">
-    Combobox with communication via displayed value
-    <fd-combobox [dropdownValues]="dropdownValues"
-                 [placeholder]="'Type some text...'"
-                 [displayFn]="myDisplayFunction"
-                 formControlName="item">
-    </fd-combobox>
+    <div fd-form-item>
+        <label fd-form-label>Combobox with communication via displayed value</label>
+        <fd-combobox [dropdownValues]="dropdownValues"
+                     [state]="'information'"
+                     [placeholder]="'Type some text...'"
+                     [displayFn]="myDisplayFunction"
+                     formControlName="item">
+        </fd-combobox>
+        <fd-form-message [type]="'information'">More information</fd-form-message>
+    </div>
 </form><br/>
 
 Touched: {{customForm.controls.item.touched}}<br/>

diff --git a/.../app/core/component-docs/date-picker/examples/date-picker-allow-null-example.component.ts b/.../app/core/component-docs/date-picker/examples/date-picker-allow-null-example.component.ts
@@ -1,15 +1,21 @@
-import { Component } from '@angular/core';
-import { FdDate } from '@fundamental-ngx/core';
+import { Component, ViewChild } from '@angular/core';
+import { DatePickerComponent, FdDate } from '@fundamental-ngx/core';
 
 @Component({
     selector: 'fd-date-picker-allow-null-example',
     template: `
-        <fd-date-picker [allowNull]="false" [type]="'single'" [(ngModel)]="date"></fd-date-picker>
+        <fd-date-picker [allowNull]="false" [type]="'single'" [(ngModel)]="date" [state]="isInvalid() ? 'invalid' : 'valid'"></fd-date-picker>
         <br/>
         <div>Selected Date: {{date ? date.toDateString() : 'null'}}</div>`
 })
 export class DatePickerAllowNullExampleComponent {
 
+    @ViewChild(DatePickerComponent, { static: false }) datePicker: DatePickerComponent;
+
     date = FdDate.getToday();
 
+    isInvalid(): boolean {
+        return !this.datePicker || !this.datePicker.isModelValid()
+    }
+
 }
diff --git a/...examples/date-picker-complex-i18n-example/date-picker-complex-i18n-example.component.html b/...examples/date-picker-complex-i18n-example/date-picker-complex-i18n-example.component.html
@@ -9,22 +9,23 @@
 </fd-button-group>
 
 <br/>
-<div fd-form-set>
+<fieldset fd-fieldset>
     <div fd-form-item>
         <label fd-form-label for="docs-date-picker-format">Date Format</label>
-        <fd-input-group id="docs-date-picker-format" [placeholder]="'Date Format'" [(ngModel)]="actualFormat" class="docs-example-fd-form-group">
-            <span fd-input-group-addon [button]="true">
-                <button fd-button
-                        (click)="refresh()">
-                    Refresh
-                </button>
-            </span>
+        <fd-input-group
+            id="docs-date-picker-format"
+            [placeholder]="'Date Format'"
+            [(ngModel)]="actualFormat"
+            class="docs-example-fd-form-group"
+            [button]="true"
+            (addOnButtonClicked)="refresh()"
+            [addOnText]="'Refresh'">
         </fd-input-group>
         <fd-form-message type="help">
             Full list of formats can be found in <a href="https://angular.io/api/common/DatePipe" target="_blank">
             Official Angular Documentation
         </a>
         </fd-form-message>
     </div>
-</div>
+</fieldset>
 <fd-date-picker [format]="actualFormat" [locale]="actualLocale" [(ngModel)]="date"></fd-date-picker>
diff --git a/...cs/src/app/core/component-docs/date-picker/examples/date-picker-form-example.component.ts b/...cs/src/app/core/component-docs/date-picker/examples/date-picker-form-example.component.ts
@@ -4,23 +4,34 @@ import { FdDate } from '@fundamental-ngx/core';
 
 @Component({
     selector: 'fd-date-picker-form-example',
-    styles: [`
-        .flex-form{
-            display:flex;
-            justify-content: space-between;
-        }
-    `],
     template: `
         <form [formGroup]="customForm" class="flex-form">
             <div>
-                <fd-date-picker formControlName="date"></fd-date-picker><br/>
+
+
+                <div fd-form-item>
+                    <label fd-form-label>Date Picker</label>
+                    <fd-date-picker [state]="isValid() ? 'valid' : 'invalid'" formControlName="date"></fd-date-picker>
+                    <fd-form-message *ngIf="isValid()" [type]="'success'">This is valid DatePicker</fd-form-message>
+                    <fd-form-message *ngIf="!isValid()" [type]="'error'">This is invalid DatePicker</fd-form-message>
+                </div>
+                <br/>
                 Touched: {{customForm.controls.date.touched}}<br/>
                 Dirty: {{customForm.controls.date.dirty}}<br/>
                 Valid: {{customForm.controls.date.valid}}<br/>
                 Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }}
             </div>
+            <br/>
+            <br/>
+
+            <div fd-form-item>
+                <label fd-form-label>Disabled Date Picker</label>
+                <fd-date-picker [state]="'information'" formControlName="disabledDate"></fd-date-picker>
+                <fd-form-message [type]="'information'">This is disabled DatePicker</fd-form-message>
+                <br/>
+            </div>
+            
             <div>
-                <fd-date-picker formControlName="disabledDate"></fd-date-picker><br/>
                 Touched: {{customForm.controls.disabledDate.touched}}<br/>
                 Dirty: {{customForm.controls.disabledDate.dirty}}<br/>
                 Valid: {{customForm.controls.disabledDate.valid}}<br/>
@@ -35,4 +46,8 @@ export class DatePickerFormExampleComponent {
         date: new FormControl(FdDate.getToday()),
         disabledDate: new FormControl({ value: FdDate.getToday(), disabled: true })
     });
+
+    isValid(): boolean {
+        return this.customForm.get('date').valid;
+    }
 }
diff --git a/...time-picker/examples/datetime-allow-null-example/datetime-allow-null-example.component.ts b/...time-picker/examples/datetime-allow-null-example/datetime-allow-null-example.component.ts
@@ -1,13 +1,20 @@
-import { Component } from '@angular/core';
-import { FdDatetime } from '@fundamental-ngx/core';
+import { Component, ViewChild } from '@angular/core';
+import { DatetimePickerComponent, FdDatetime } from '@fundamental-ngx/core';
 
 @Component({
     selector: 'fd-date-time-picker-allow-null-example',
-    template: ` <fd-datetime-picker [allowNull]="false" [(ngModel)]="selectedDay"></fd-datetime-picker>
-            <span style="padding-left: 20px;">Selected Date: {{selectedDay?.toLocaleDateString()}}</span>`
+    template: `
+        <fd-datetime-picker [allowNull]="false" [(ngModel)]="selectedDay" [state]="isValid() ? 'invalid' : 'valid'"></fd-datetime-picker>
+        <span style="padding-left: 20px;">Selected Date: {{selectedDay?.toLocaleDateString()}}</span>
+    `
 })
 export class DatetimePickerAllowNullExampleComponent {
 
+    @ViewChild(DatetimePickerComponent, { static: false }) datePicker: DatetimePickerComponent;
+
     selectedDay: FdDatetime = FdDatetime.getToday();
 
+    isValid(): boolean {
+        return this.datePicker && this.datePicker.isInvalidDateInput
+    }
 }