[AAE-10219] Add css to align according to alignment property in RadioField (#7750)

* [AAE-10219] Add css to align according to alignment property in RadioField

* [AAE-10219] Add css to align according to alignment property in RadioField

* trigger travis

* Fix nx build core

* reduce dependsOn config

* update demoshell cspell path

* [AAE-10460] fix storybook config (#7785)

* [AAE-10460] fix storybook config

* trigger travis

* trigger travis

Co-authored-by: Rafal Szmit <rafal.szmit@hyland.com>
Co-authored-by: Tomasz <tomasz.gnyp@hyland.com>
Co-authored-by: Tomasz Gnyp <49343696+tomgny@users.noreply.github.com>

angular.json

@@ -260,7 +260,7 @@
               "options": {
               "commands": [
                   {
-                      "command": "$(npm bin)/cspell 'lib/demo-shell/**/*.ts'"
+                      "command": "$(npm bin)/cspell 'demo-shell/**/*.ts'"
                   }
               ]
           }
@@ -306,7 +306,7 @@
             "tsConfig": "lib/core/tsconfig.lib.json",
             "project": "lib/core/ng-package.json"
           },
-          "dependsOn": ["license"],
+          "dependsOn": ["license", "^build"],
           "configurations": {
             "production": {
               "project": "lib/core/ng-package.json",
@@ -339,11 +339,7 @@
               "lib/core/api/**/*.ts",
               "lib/core/api/**/*.html"
             ]
-          },
+          }
-          "dependsOn": [
-            "spellcheck",
-            "stylelint"
-          ]
         },
         "storybook": {
           "builder": "@storybook/angular:start-storybook",
@@ -454,11 +450,7 @@
               "lib/content-services/**/*.ts",
               "lib/content-services/**/*.html"
             ]
-          },
+          }
-          "dependsOn": [
-            "spellcheck",
-            "stylelint"
-          ]
         },
         "storybook": {
           "builder": "@storybook/angular:start-storybook",
@@ -559,11 +551,7 @@
               "lib/process-services/**/*.ts",
               "lib/process-services/**/*.html"
             ]
-          },
+          }
-          "dependsOn": [
-            "spellcheck",
-            "stylelint"
-          ]
         },
         "spellcheck": {
           "executor": "nx:run-commands",
@@ -632,11 +620,7 @@
               "lib/process-services-cloud/**/*.ts",
               "lib/process-services-cloud/**/*.html"
             ]
-          },
+          }
-          "dependsOn": [
-            "spellcheck",
-            "stylelint"
-          ]
         },
         "storybook": {
           "builder": "@storybook/angular:start-storybook",
@@ -737,11 +721,7 @@
               "lib/insights/**/*.ts",
               "lib/insights/**/*.html"
             ]
-          },
+          }
-          "dependsOn": [
-            "spellcheck",
-            "stylelint"
-          ]
         },
         "spellcheck": {
           "executor": "nx:run-commands",

lib/core/src/lib/form/components/widgets/core/form-field.model.ts

@@ -76,6 +76,7 @@ export class FormFieldModel extends FormWidgetModel {
     currency: string = null;
     dateDisplayFormat: string = this.defaultDateFormat;
     selectionType: 'single' | 'multiple' = null;
+    alignmentType: 'vertical' | 'horizontal' = null;
     rule?: FormFieldRule;
     selectLoggedUser: boolean;
     groupsRestriction: string[];
@@ -189,6 +190,7 @@ export class FormFieldModel extends FormWidgetModel {
             this.validationSummary = new ErrorMessageModel();
             this.tooltip = json.tooltip;
             this.selectionType = json.selectionType;
+            this.alignmentType = json.alignmentType;
             this.rule = json.rule;
             this.selectLoggedUser = json.selectLoggedUser;
             this.groupsRestriction = json.groupsRestriction?.groups;

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html

@@ -1,8 +1,8 @@
 <div class="adf-radio-buttons-widget-cloud {{field.className}}"
     [class.adf-readonly]="field.readOnly" [id]="field.id">
-    <div class="adf-radio-button-container">
+    <div [ngClass]="(field.alignmentType === 'vertical') ? 'adf-radio-button-container': 'adf-radio-button-container-horizontal'">
         <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
-        <mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
+        <mat-radio-group [ngClass]="(field.alignmentType === 'vertical') ? 'adf-radio-group': 'adf-radio-group-horizontal'" class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
             <mat-radio-button
                 [matTooltip]="field.tooltip"
                 matTooltipPosition="above"

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss

@@ -5,6 +5,12 @@
         flex-direction: column;
     }
 
+    &-radio-button-container-horizontal {
+        margin-bottom: 15px;
+        display: flex;
+        flex-direction: row;
+    }
+
     &-radio-group {
         margin-top: 15px;
         margin-left: 5px;
@@ -12,6 +18,13 @@
         flex-direction: column;
     }
 
+    &-radio-group-horizontal {
+        margin-top: 0;
+        margin-left: 25%;
+        display: inline-flex;
+        display: table-column-group;
+    }
+
     &-radio-button {
         margin: 5px;
     }

nx.json

@@ -30,6 +30,12 @@
   "targetDefaults": {
     "build": {
       "dependsOn": ["^build"]
+    },
+    "lint": {
+      "dependsOn": [
+            "spellcheck",
+            "stylelint"
+      ]
     }
   },
   "tasksRunnerOptions": {