feat(Description): add ability for control description to handle html

package.json

@@ -114,7 +114,7 @@
     "prettier": "^2.2.1",
     "prettier-plugin-organize-imports": "^1.1.1",
     "pretty-quick": "^2.0.1",
-    "semantic-release": "^19.0.2",
+    "semantic-release": "^19.0.3",
     "standard-version": "^9.1.0",
     "stylelint": "~13.2.1",
     "stylelint-config-prettier": "^8.0.1",

projects/novo-elements/src/elements/form/Control.ts

@@ -181,9 +181,8 @@ export class NovoAutoSize implements AfterContentInit {
                 </span>
               </span>
               <!--Field Hint-->
-              <span class="description" *ngIf="form.controls[control.key].description">
-                {{ form.controls[control.key].description }}
-              </span>
+              <div class="description" *ngIf="form.controls[control.key].description" [innerHTML]="form.controls[control.key].description">
+              </div>
               <span class="warning-text" *ngIf="form.controls[control.key].warning">{{ form.controls[control.key].warning }}</span>
             </div>
             <span

projects/novo-elements/src/elements/form/FieldInteractionApi.ts

@@ -255,6 +255,14 @@ export class FieldInteractionApi {
     }
   }
 
+  setDescription(key: string, description: string, otherForm?: NovoFormGroup): void {
+    const control = this.getControl(key, otherForm);
+    if (control && !control.restrictFieldInteractions) {
+      control.description = description;
+      this.triggerEvent({ controlKey: key, prop: 'description', value: description }, otherForm);
+    }
+  }
+
   highlight(key: string, isHighlighted: boolean, otherForm?: NovoFormGroup): void {
     const control = this.getControl(key, otherForm);
     if (control && !control.restrictFieldInteractions) {

projects/novo-examples/src/examples.routes.ts

@@ -6106,6 +6106,9 @@ export class May2022Page {
 <h5>Add Tooltip</h5>
 <p>You are able to dynamically change a field's tooltip.</p>
 <p><code-example example="fi-tooltip"></code-example></p>
+<h5>Modify Description</h5>
+<p>You are able to dynamically change the description of a field, potentially adding in custom HTML.</p>
+<p><code-example example="fi-description"></code-example></p>
 <h5>Interacting with Nested Forms</h5>
 <p>Field Interactions can navigate nested forms to interact with parent and child forms. This example uses the Form Group component which contains an array of nested forms that are kept in sync by field interactions.</p>
 <p><code-example example="fi-nested"></code-example></p>

projects/novo-examples/src/form-controls/form/MockMeta.ts

@@ -64,6 +64,7 @@ export const MockMeta = {
       label: 'Float',
       required: true,
       sortOrder: 50,
+      description: '<span><b>BOLD</b> description with a <a target="_blank" href="https://www.google.com">Google</a> Link</span>'
     },
     {
       name: 'currency',

projects/novo-examples/src/utils/field-interactions/fi-description/fi-description-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

projects/novo-examples/src/utils/field-interactions/fi-description/fi-description-example.html

@@ -0,0 +1,11 @@
+<novo-form [form]="form" layout="vertical">
+    <div class="novo-form-row">
+        <novo-control [form]="form" [control]="controls.descriptionControl"></novo-control>
+    </div>
+    <div class="novo-form-row">
+        <novo-control [form]="form" [control]="controls.toggleControl"></novo-control>
+    </div>
+</novo-form>
+<div class="final-value">Form Value - {{ form.value | json }}</div>
+<div class="final-value">Form Dirty - {{ form.dirty | json }}</div>
+<div class="final-value">Is Form Valid? - {{ form.valid | json }}</div>

projects/novo-examples/src/utils/field-interactions/fi-description/fi-description-example.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+// Vendor
+import { CheckboxControl, FieldInteractionApi, FormUtils, TextBoxControl } from 'novo-elements';
+
+/**
+ * @title Fi Required Example
+ */
+@Component({
+  selector: 'fi-required-example',
+  templateUrl: 'fi-description-example.html',
+  styleUrls: ['fi-description-example.css'],
+})
+export class FiDescriptionExample {
+  public form: any = {};
+  public controls: any = {};
+
+  constructor(formUtils: FormUtils) {
+    const standardDescription = 'Toggle the checkbox below to toggle between an HTML description and a plain text description!';
+    const htmlDescription = '<span><b>BOLD</b> description with a <a target="_blank" href="https://www.google.com">Google</a> Link</span>';
+
+    const descriptionFunction = (API: FieldInteractionApi) => {
+      console.log('[FieldInteractionDemo] - descriptionFunction'); // tslint:disable-line
+      const activeValue = API.getActiveValue();
+
+      if (activeValue) {
+        API.setDescription('description', htmlDescription);
+      } else {
+        API.setDescription('description', standardDescription);
+      }
+    };
+
+    // Required Field Interactions
+    this.controls.descriptionControl = new TextBoxControl({
+      type: 'text',
+      key: 'description',
+      label: 'Test',
+      description: standardDescription,
+    });
+    this.controls.toggleControl = new CheckboxControl({
+      key: 'toggle',
+      label: 'Description has HTML?',
+      interactions: [{ event: 'change', script: descriptionFunction }],
+    });
+    this.form = formUtils.toFormGroup([this.controls.descriptionControl, this.controls.toggleControl]);
+  }
+}

projects/novo-examples/src/utils/field-interactions/fi-description/index.ts

@@ -0,0 +1 @@
+export * from './fi-description-example';

projects/novo-examples/src/utils/field-interactions/field-interactions.md

@@ -145,6 +145,12 @@ You are able to dynamically change a field's tooltip.
 
 <code-example example="fi-tooltip"></code-example>
 
+##### Modify Description
+
+You are able to dynamically change the description of a field, potentially adding in custom HTML.
+
+<code-example example="fi-description"></code-example>
+
 ##### Interacting with Nested Forms
 
 Field Interactions can navigate nested forms to interact with parent and child forms. This example uses the Form Group component which contains an array of nested forms that are kept in sync by field interactions.

projects/novo-examples/src/utils/field-interactions/index.ts

@@ -2,6 +2,7 @@ export * from './fi-adding-removing';
 export * from './fi-async';
 export * from './fi-calculation';
 export * from './fi-confirm';
+export * from './fi-description';
 export * from './fi-enable-disable';
 export * from './fi-globals';
 export * from './fi-hide-show';