From 0afc6affb67f8b73543660548fdd10e6991ff83a Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 17 Mar 2017 14:33:05 +0000
Subject: [PATCH] support for setting CSS classes in the designer (#1737)

- provides support for `className` field that Angular 1 designer allows
to define for Forms and Form Fields
---
 .../src/components/activiti-form.component.html                | 2 +-
 .../src/components/widgets/amount/amount.widget.html           | 2 +-
 .../src/components/widgets/attach/attach.widget.html           | 3 +--
 .../src/components/widgets/checkbox/checkbox.widget.html       | 2 +-
 .../src/components/widgets/core/form.model.ts                  | 2 ++
 .../src/components/widgets/date/date.widget.html               | 2 +-
 .../components/widgets/display-text/display-text.widget.html   | 2 +-
 .../components/widgets/display-value/display-value.widget.html | 2 +-
 .../src/components/widgets/dropdown/dropdown.widget.html       | 2 +-
 .../components/widgets/dynamic-table/dynamic-table.widget.html | 2 +-
 .../widgets/functional-group/functional-group.widget.html      | 2 +-
 .../src/components/widgets/hyperlink/hyperlink.widget.html     | 2 +-
 .../widgets/multiline-text/multiline-text.widget.html          | 2 +-
 .../src/components/widgets/number/number.widget.html           | 2 +-
 .../src/components/widgets/people/people.widget.html           | 2 +-
 .../components/widgets/radio-buttons/radio-buttons.widget.html | 2 +-
 .../src/components/widgets/text/text.widget.html               | 2 +-
 .../src/components/widgets/typeahead/typeahead.widget.html     | 2 +-
 .../src/components/widgets/upload/upload.widget.html           | 2 +-
 19 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.html b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.html
index e6cbc5d8e9..2b00b52c76 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.html
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.html
@@ -3,7 +3,7 @@
         <h3 style="text-align: center">Please select a Task</h3>
     </div>
     <div *ngIf="hasForm()">
-        <div class="mdl-card mdl-shadow--2dp activiti-form-container">
+        <div class="mdl-card mdl-shadow--2dp activiti-form-container {{form.className}}">
             <div class="mdl-card__title">
                 <i *ngIf="showValidationIcon" class="material-icons">{{ form.isValid ? 'event_available' : 'event_busy' }}</i>
                 <h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.html
index 6a62e11ceb..f7934c9810 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.html
@@ -1,4 +1,4 @@
-<div class="mdl-textfield mdl-js-textfield amount-widget"
+<div class="mdl-textfield mdl-js-textfield amount-widget {{field.className}}"
      [class.amount-widget__invalid]="!field.isValid">
     <label [attr.for]="field.id">{{field.name}}, {{currency}}</label>
     <input class="mdl-textfield__input"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html
index 286748a802..a17ed43ed3 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html
@@ -1,5 +1,4 @@
-<div class="attach-widget">
-
+<div class="attach-widget {{field.className}}">
     <label [attr.for]="field.id">{{field.name}}</label>
     <div>
         <span *ngIf="hasFile()" class="attach-widget__file mdl-chip"><span class="mdl-chip__text">{{getLinkedFileName()}}</span></span>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.html
index ce27102000..671dec0ad9 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.html
@@ -1,4 +1,4 @@
-<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="field.id">
+<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect {{field.className}}" [attr.for]="field.id">
     <input type="checkbox"
            [attr.id]="field.id"
            [attr.required]="isRequired()"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts
index 8741224b54..6af8d97b08 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts
@@ -44,6 +44,7 @@ export class FormModel {
         return this._isValid;
     }
 
+    className: string;
     readOnly: boolean = false;
     tabs: TabModel[] = [];
     /** Stores root containers */
@@ -81,6 +82,7 @@ export class FormModel {
             this.processDefinitionId = json.processDefinitionId;
             this.customFieldTemplates = json.customFieldTemplates || {};
             this.selectedOutcome = json.selectedOutcome || {};
+            this.className = json.className || '';
 
             let tabCache: FormWidgetModelCache<TabModel> = {};
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html
index 781b956ccf..b63954862d 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html
@@ -1,4 +1,4 @@
-<div class="mdl-grid mdl-grid__date-widget" *ngIf="field?.isVisible" id="data-widget">
+<div class="mdl-grid mdl-grid__date-widget {{field.className}}" *ngIf="field?.isVisible" id="data-widget">
     <div class="mdl-cell mdl-cell--11-col">
         <div class="mdl-textfield mdl-js-textfield date-widget"
              [class.date-widget__invalid]="!field.isValid">
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.html
index cc784e807d..a674317306 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.html
@@ -1,3 +1,3 @@
-<div class="display-text-widget">
+<div class="display-text-widget {{field.className}}">
     <span>{{field.value}}</span>
 </div>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html
index e3b3379f68..161beaab36 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html
@@ -1,4 +1,4 @@
-<div [ngSwitch]="fieldType" class="display-value-widget" *ngIf="field?.isVisible">
+<div [ngSwitch]="fieldType" class="display-value-widget {{field.className}}" *ngIf="field?.isVisible">
     <div *ngSwitchCase="'boolean'">
         <label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id" >
             <input type="checkbox"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html
index b03d64ebde..dd8b4eb258 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.html
@@ -1,4 +1,4 @@
-<div class="dropdown-widget"
+<div class="dropdown-widget {{field.className}}"
      [class.dropdown-widget__invalid]="!field.isValid" *ngIf="field?.isVisible">
     <label class="dropdown-widget__label" [attr.for]="field.id">{{field.name}}</label>
     <select class="dropdown-widget__select"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
index c0cc903953..cb78fcb0e8 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
@@ -1,4 +1,4 @@
-<div class="dynamic-table-widget"
+<div class="dynamic-table-widget {{field.className}}"
     [class.dynamic-table-widget__invalid]="!isValid()" *ngIf="field?.isVisible">
      <div class="dynamic-table-widget__label">{{content.name}}</div>
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html
index b52c1eee0e..1a0d5aa0cf 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html
@@ -1,4 +1,4 @@
-<div class="mdl-textfield mdl-js-textfield functional-group-widget"
+<div class="mdl-textfield mdl-js-textfield functional-group-widget {{field.className}}"
      [class.functional-group-widget__invalid]="!field.isValid">
     <label [attr.for]="field.id">{{field.name}}</label>
     <input class="mdl-textfield__input"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.html
index f6bc91987a..4d522b8df1 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.html
@@ -1,4 +1,4 @@
-<div class="hyperlink-widget">
+<div class="hyperlink-widget {{field.className}}">
     <div>
         <span>{{field.name}}</span>
     </div>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html
index b591a27a79..a25e47df10 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html
@@ -1,4 +1,4 @@
-<div class="mdl-textfield mdl-js-textfield multiline-text-widget"
+<div class="mdl-textfield mdl-js-textfield multiline-text-widget {{field.className}}"
      [class.multiline-text-widget__invalid]="!field.isValid">
     <label [attr.for]="field.id">{{field.name}}</label>
     <textarea class="mdl-textfield__input"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.html
index d97bf9dc3e..14fd50ee8d 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.html
@@ -1,4 +1,4 @@
-<div class="mdl-textfield mdl-js-textfield number-widget"
+<div class="mdl-textfield mdl-js-textfield number-widget {{field.className}}"
      [class.number-widget__invalid]="!field.isValid">
     <label [attr.for]="field.id">{{field.name}}</label>
     <input class="mdl-textfield__input"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html
index 6e30337b1e..17d43c27af 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html
@@ -1,4 +1,4 @@
-<div class="mdl-textfield mdl-js-textfield people-widget"
+<div class="mdl-textfield mdl-js-textfield people-widget {{field.className}}"
      [class.people-widget__invalid]="!field.isValid">
     <label [attr.for]="field.id">{{field.name}}</label>
     <input class="mdl-textfield__input"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html
index ea4bf5924f..859016ff53 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html
@@ -1,4 +1,4 @@
-<div class="radio-buttons-widget"
+<div class="radio-buttons-widget {{field.className}}"
      [class.radio-buttons-widget__invalid]="!field.isValid" [id]="field.id" *ngIf="field?.isVisible">
     <label class="radio-buttons-widget__label" [attr.for]="field.id">{{field.name}}</label>
     <div *ngFor="let opt of field.options">
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
index 608227cba4..57e221fbce 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
@@ -1,4 +1,4 @@
-<div class="mdl-textfield mdl-js-textfield text-widget"
+<div class="mdl-textfield mdl-js-textfield text-widget {{field.className}}"
      [class.text-widget__invalid]="!field.isValid">
     <label [attr.for]="field.id">{{field.name}}</label>
     <input class="mdl-textfield__input"
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html
index e0b89d3472..05d74ad03c 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html
@@ -1,4 +1,4 @@
-<div class="mdl-textfield mdl-js-textfield typeahead-widget"
+<div class="mdl-textfield mdl-js-textfield typeahead-widget {{field.className}}"
      [class.is-dirty]="value"
      [class.typeahead-widget__invalid]="!field.isValid" id="typehead-div" *ngIf="field.isVisible">
     <label [attr.for]="field.id">{{field.name}}</label>
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html
index 855f76a252..172e9b0d57 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html
@@ -1,4 +1,4 @@
-<div class="upload-widget"
+<div class="upload-widget {{field.className}}"
      [class.upload-widget__invalid]="!field.isValid">
     <label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
     <div>