Add fieldset to the preview

Author: babich-a

src/app/left-menu/left-menu.aliases.ts

@@ -194,6 +194,11 @@ export class LeftMenuAlias {
             equivalents: 'dxScrollView, dx-scroll-view',
             regs: [/scrollable-/i],
             route: 'scrollview'
+        }, {
+            name: 'FieldSet',
+            equivalents: 'field set',
+            regs: [/fieldset-/i],
+            route: 'fieldset'
         }
     ];
 

src/app/preview/fieldset/fieldset.component.css

@@ -0,0 +1,3 @@
+:host .dx-fieldset {
+    margin-left: 0;
+}

src/app/preview/fieldset/fieldset.component.html

@@ -0,0 +1,15 @@
+<div class="dx-fieldset">
+    <div class="dx-fieldset-header">Personal Data</div>
+    <div class="dx-field">
+        <div class="dx-field-label">First Name</div>
+        <div class="dx-field-value">
+            <dx-text-box value="John"></dx-text-box>
+        </div>
+    </div>
+    <div class="dx-field">
+        <div class="dx-field-label">Last Name</div>
+        <div class="dx-field-value">
+            <dx-text-box value="Heart"></dx-text-box>
+        </div>
+    </div>
+</div>

src/app/preview/fieldset/fieldset.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+    selector: 'app-fieldset',
+    templateUrl: './fieldset.component.html',
+    styleUrls: ['./fieldset.component.css']
+})
+export class FieldSetComponent {
+    widgetGroup = 'fieldset';
+    isExpanded = new Subject<boolean>();
+}

src/app/preview/preview.module.ts

@@ -9,6 +9,7 @@ import { DatagridComponent } from './datatgrid/datatgrid.component';
 import { DrawerComponent } from './drawer/drawer.component';
 import { EditorsComponent } from './editors/editors.component';
 import { FilterbuilderComponent } from './filterbuilder/filterbuilder.component';
+import { FieldSetComponent } from './fieldset/fieldset.component';
 import { FormComponent } from './form/form.component';
 import { GalleryComponent } from './gallery/gallery.component';
 import { ListComponent } from './list/list.component';
@@ -40,6 +41,7 @@ import { ButtonDetailedComponent } from './button-detailed/button-detailed.compo
         ButtonsComponent,
         EditorsComponent,
         FilterbuilderComponent,
+        FieldSetComponent,
         FormComponent,
         GalleryComponent,
         ListComponent,
@@ -66,6 +68,7 @@ import { ButtonDetailedComponent } from './button-detailed/button-detailed.compo
         ButtonsComponent,
         EditorsComponent,
         FilterbuilderComponent,
+        FieldSetComponent,
         FormComponent,
         GalleryComponent,
         ListComponent,

src/app/preview/preview/preview.component.html

@@ -158,6 +158,13 @@
                 <app-drawer #widget></app-drawer>
             </div>
         </div>
+        <div class="flex-item">
+            <app-button-detailed widget="fieldset" [currentWidget]="widgetName" (clicked)="buttonDetailedClick($event)"></app-button-detailed>
+            <div class="flex-label">FIELDSET</div>
+            <div class="flex-value">
+                <app-fieldset #widget></app-fieldset>
+            </div>
+        </div>
         <div class="flex-item empty"></div>
     </div>
 </dx-scroll-view>

src/app/preview/preview/preview.component.ts

@@ -23,7 +23,8 @@ export class PreviewComponent implements AfterViewInit, OnChanges {
         'progressbars',
         'sliders',
         'scrollview',
-        'filterbuilder'
+        'filterbuilder',
+        'fieldset'
     ];
 
     isWidgetClosed = true;