feat(Description) adding new example for new FieldInteractionAPI func…

…tionality

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 if 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/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 if 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';