feat(components/text-editor): add inline help example for text editor (#502)

* feat(components/text-editor): add inline help example for text editor

* Use SkyTabIndex type

Author: johnhwhite

apps/code-examples/src/app/app-routing.module.ts

@@ -115,6 +115,13 @@ const routes: Routes = [
         (m) => m.DataManagerFeatureModule
       ),
   },
+  {
+    path: 'text-editor',
+    loadChildren: () =>
+      import('./features/text-editor.module').then(
+        (m) => m.TextEditorFeatureModule
+      ),
+  },
 ];
 
 @NgModule({

apps/code-examples/src/app/app.component.html

@@ -321,6 +321,22 @@
       </li>
     </ul>
   </li>
+
+  <li>
+    Text Editor
+    <ul>
+      <li>
+        <a routerLink="text-editor/rich-text-display">Rich text display</a>
+      </li>
+      <li><a routerLink="text-editor/text-editor">Text Editor</a></li>
+      <li>
+        <a routerLink="text-editor/text-editor-inline-help"
+          >Text Editor with inline help</a
+        >
+      </li>
+    </ul>
+  </li>
+
   <li>
     Tiles
     <ul>

apps/code-examples/src/app/code-examples/text-editor/text-editor-inline-help/text-editor-demo.component.html

@@ -0,0 +1,14 @@
+<form novalidate [formGroup]="myForm">
+  <sky-input-box>
+    <label skyId #textEditorLabel="skyId" class="sky-control-label">
+      Text editor demo
+    </label>
+    <sky-help-inline class="sky-control-help"></sky-help-inline>
+    <sky-text-editor
+      formControlName="myText"
+      [attr.aria-labelledby]="textEditorLabel.id"
+      class="sky-form-control"
+    >
+    </sky-text-editor>
+  </sky-input-box>
+</form>

apps/code-examples/src/app/code-examples/text-editor/text-editor-inline-help/text-editor-demo.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-text-editor-demo',
+  templateUrl: './text-editor-demo.component.html',
+})
+export class TextEditorDemoComponent implements OnInit {
+  public myForm: FormGroup;
+
+  private richText = `<font style="font-size: 18px" face="Arial" color="#a25353"><b>Exclusively committed to your impact</b></font><p>Since day one, Blackbaud has been 100% focused on driving impact for social good organizations.</p><p>We equip change agents with <b>cloud software</b>, <i>services</i>, <u>expertise</u>, and <font color="#a25353">data intelligence</font> designed with unmatched insight and supported with unparalleled commitment. Every day, our <b>customers</b> achieve unmatched impact as they advance their missions.</p><ul><li><a href="#">Build a better world</a></li><li><a href="#">Explore our solutions</a></li></ul>`;
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  public ngOnInit(): void {
+    this.myForm = this.formBuilder.group({
+      myText: new FormControl(this.richText),
+    });
+  }
+}

apps/code-examples/src/app/code-examples/text-editor/text-editor-inline-help/text-editor-demo.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { SkyIdModule } from '@skyux/core';
+import { SkyInputBoxModule } from '@skyux/forms';
+import { SkyHelpInlineModule } from '@skyux/indicators';
+import { SkyTextEditorModule } from '@skyux/text-editor';
+
+import { TextEditorDemoComponent } from './text-editor-demo.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    SkyInputBoxModule,
+    SkyIdModule,
+    SkyTextEditorModule,
+    SkyHelpInlineModule,
+  ],
+  declarations: [TextEditorDemoComponent],
+  exports: [TextEditorDemoComponent],
+})
+export class TextEditorDemoModule {}

apps/code-examples/src/app/features/text-editor.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { RichTextDisplayDemoComponent as RichTextDisplayRichTextDisplayDemoComponent } from '../code-examples/text-editor/rich-text-display/rich-text-display-demo.component';
+import { RichTextDisplayDemoModule as RichTextDisplayRichTextDisplayDemoModule } from '../code-examples/text-editor/rich-text-display/rich-text-display-demo.module';
+import { TextEditorDemoComponent as TextEditorInlineHelpTextEditorDemoComponent } from '../code-examples/text-editor/text-editor-inline-help/text-editor-demo.component';
+import { TextEditorDemoModule as TextEditorInlineHelpTextEditorDemoModule } from '../code-examples/text-editor/text-editor-inline-help/text-editor-demo.module';
+import { TextEditorDemoComponent as TextEditorTextEditorDemoComponent } from '../code-examples/text-editor/text-editor/text-editor-demo.component';
+import { TextEditorDemoModule as TextEditorTextEditorDemoModule } from '../code-examples/text-editor/text-editor/text-editor-demo.module';
+
+const routes: Routes = [
+  {
+    path: 'rich-text-display',
+    component: RichTextDisplayRichTextDisplayDemoComponent,
+  },
+  { path: 'text-editor', component: TextEditorTextEditorDemoComponent },
+  {
+    path: 'text-editor-inline-help',
+    component: TextEditorInlineHelpTextEditorDemoComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TextEditorFeatureRoutingModule {}
+
+@NgModule({
+  imports: [
+    RichTextDisplayRichTextDisplayDemoModule,
+    TextEditorInlineHelpTextEditorDemoModule,
+    TextEditorTextEditorDemoModule,
+    TextEditorFeatureRoutingModule,
+  ],
+})
+export class TextEditorFeatureModule {}

libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-modal.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { SkyModalInstance } from '@skyux/modals';
+import { SkyTabIndex } from '@skyux/tabs';
 import { SkyValidation } from '@skyux/validation';
 
 import { SkyUrlModalContext } from './text-editor-url-modal-context';
@@ -89,8 +90,8 @@ export class SkyTextEditorUrlModalComponent {
     }
   }
 
-  public activeTabChanged(value: number): void {
-    this.activeTab = value;
+  public activeTabChanged(value: SkyTabIndex): void {
+    this.activeTab = Number(value);
   }
 
   public save(): void {