From 63c7d04b6021dc2fd67f3605fd8cd7860e6c0f6f Mon Sep 17 00:00:00 2001
From: Paul Crowder <paul.crowder@blackbaud.com>
Date: Thu, 3 Nov 2022 17:15:18 -0400
Subject: [PATCH] fix(components/modals): remove leading and trailing
 whitespace from confirm elements when `preserveWhiteSpace` is `true`

---
 .../modules/confirm/confirm.component.html    |  22 ++-
 .../modules/confirm/confirm.component.spec.ts |   5 +
 .../lib/modules/confirm/confirm.component.ts  | 137 +++++++-----------
 3 files changed, 74 insertions(+), 90 deletions(-)

diff --git a/libs/components/modals/src/lib/modules/confirm/confirm.component.html b/libs/components/modals/src/lib/modules/confirm/confirm.component.html
index 38e61ee420..a5bf6f0e96 100644
--- a/libs/components/modals/src/lib/modules/confirm/confirm.component.html
+++ b/libs/components/modals/src/lib/modules/confirm/confirm.component.html
@@ -1,6 +1,13 @@
 <div class="sky-confirm" [ngClass]="{ 'sky-confirm-type-ok': isOkType }">
   <sky-modal ariaRole="alertdialog">
     <sky-modal-content class="sky-confirm-content">
+      <!--
+        The following "magic comment" keeps Prettier from adding line breaks
+        inside the div and causing leading and trailing whitespace when
+        `preserveWhiteSpace` is `true`.
+        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
+      -->
+      <!-- display: inline -->
       <div
         class="sky-confirm-message"
         [ngClass]="{
@@ -10,26 +17,31 @@
           'sky-emphasized': 'default',
           'sky-font-heading-1 sky-font-display-3': 'modern'
         }"
+        >{{ message }}</div
       >
-        {{ message }}
-      </div>
 
+      <!--
+        The following "magic comment" keeps Prettier from adding line breaks
+        inside the div and causing leading and trailing whitespace when
+        `preserveWhiteSpace` is `true`.
+        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
+      -->
+      <!-- display: inline -->
       <div
         *ngIf="body"
         class="sky-confirm-body"
         [ngClass]="{
           'sky-confirm-preserve-white-space': preserveWhiteSpace
         }"
+        >{{ body }}</div
       >
-        {{ body }}
-      </div>
 
       <div class="sky-confirm-buttons">
         <button
           *ngFor="let button of buttons"
           type="button"
           class="sky-btn"
-          [ngClass]="['sky-btn-' + button.styleType]"
+          [ngClass]="'sky-btn-' + button.styleType"
           [skyThemeClass]="{
             'sky-margin-inline-sm': 'modern',
             'sky-margin-inline-compact': 'default'
diff --git a/libs/components/modals/src/lib/modules/confirm/confirm.component.spec.ts b/libs/components/modals/src/lib/modules/confirm/confirm.component.spec.ts
index 8de35203aa..9188a2ffa0 100644
--- a/libs/components/modals/src/lib/modules/confirm/confirm.component.spec.ts
+++ b/libs/components/modals/src/lib/modules/confirm/confirm.component.spec.ts
@@ -334,6 +334,11 @@ describe('Confirm component', () => {
     expect(messageElem.classList).toContain('sky-confirm-preserve-white-space');
     expect(bodyElem.classList).toContain('sky-confirm-preserve-white-space');
 
+    // Check innerHTML directly instead of using `toHaveText()` to ensure
+    // extra whitespace is not added to the beginning or end of the content.
+    expect(messageElem.innerHTML).toBe('confirm message');
+    expect(bodyElem.innerHTML).toBe('additional text');
+
     buttons[0].click();
   });
 });
diff --git a/libs/components/modals/src/lib/modules/confirm/confirm.component.ts b/libs/components/modals/src/lib/modules/confirm/confirm.component.ts
index 67478a63e3..e8958fe088 100644
--- a/libs/components/modals/src/lib/modules/confirm/confirm.component.ts
+++ b/libs/components/modals/src/lib/modules/confirm/confirm.component.ts
@@ -1,7 +1,7 @@
-import { Component, Inject, Optional } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { SkyLibResourcesService } from '@skyux/i18n';
 
-import { Observable, ReplaySubject, zip as observableZip } from 'rxjs';
+import { Observable, ReplaySubject } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { SkyModalInstance } from '../modal/modal-instance';
@@ -33,11 +33,11 @@ export class SkyConfirmComponent {
     @Inject(SKY_CONFIRM_CONFIG)
     config: SkyConfirmConfig,
     modal: SkyModalInstance,
-    @Optional() resourcesService: SkyLibResourcesService
+    resourcesService: SkyLibResourcesService
   ) {
     this.#config = config;
     this.#modal = modal;
-    this.#resourcesService = resourcesService!;
+    this.#resourcesService = resourcesService;
 
     if (
       config.type === SkyConfirmType.Custom &&
@@ -59,7 +59,7 @@ export class SkyConfirmComponent {
     this.isOkType = config.type === SkyConfirmType.OK;
   }
 
-  public close(button: SkyConfirmButton) {
+  public close(button: SkyConfirmButton): void {
     const result: SkyConfirmCloseEventArgs = {
       action: button.action,
     };
@@ -70,81 +70,51 @@ export class SkyConfirmComponent {
   #getPresetButtons(): Observable<SkyConfirmButton[]> {
     const emitter = new ReplaySubject<SkyConfirmButton[]>(1);
 
-    switch (this.#config.type) {
-      default:
-      case SkyConfirmType.OK:
-        this.#resourcesService
-          .getString('skyux_confirm_dialog_default_ok_text')
-          .subscribe((value: string) => {
-            emitter.next([
-              {
-                text: value,
-                autofocus: true,
-                styleType: 'primary',
-                action: 'ok',
-              },
-            ]);
-          });
-        break;
-
-      case SkyConfirmType.YesNoCancel:
-        observableZip(
-          this.#resourcesService.getString(
-            'skyux_confirm_dialog_default_yes_text'
-          ),
-          this.#resourcesService.getString(
-            'skyux_confirm_dialog_default_no_text'
-          ),
-          this.#resourcesService.getString(
-            'skyux_confirm_dialog_default_cancel_text'
-          )
-        ).subscribe((values: any) => {
-          emitter.next([
-            {
-              text: values[0],
+    this.#resourcesService
+      .getStrings({
+        cancel: 'skyux_confirm_dialog_default_cancel_text',
+        no: 'skyux_confirm_dialog_default_no_text',
+        ok: 'skyux_confirm_dialog_default_ok_text',
+        yes: 'skyux_confirm_dialog_default_yes_text',
+      })
+      .subscribe((values) => {
+        const confirmButtons: SkyConfirmButton[] = [];
+
+        switch (this.#config.type) {
+          case SkyConfirmType.YesNoCancel:
+          case SkyConfirmType.YesCancel:
+            confirmButtons.push({
+              text: values.yes,
               autofocus: true,
               styleType: 'primary',
               action: 'yes',
-            },
-            {
-              text: values[1],
-              styleType: 'default',
-              action: 'no',
-            },
-            {
-              text: values[2],
+            });
+
+            if (this.#config.type === SkyConfirmType.YesNoCancel) {
+              confirmButtons.push({
+                text: values.no,
+                styleType: 'default',
+                action: 'no',
+              });
+            }
+
+            confirmButtons.push({
+              text: values.cancel,
               styleType: 'link',
               action: 'cancel',
-            },
-          ]);
-        });
-        break;
-
-      case SkyConfirmType.YesCancel:
-        observableZip(
-          this.#resourcesService.getString(
-            'skyux_confirm_dialog_default_yes_text'
-          ),
-          this.#resourcesService.getString(
-            'skyux_confirm_dialog_default_cancel_text'
-          )
-        ).subscribe((values: any) => {
-          emitter.next([
-            {
-              text: values[0],
+            });
+            break;
+          default:
+            confirmButtons.push({
+              text: values.ok,
               autofocus: true,
               styleType: 'primary',
-              action: 'yes',
-            },
-            {
-              text: values[1],
-              styleType: 'link',
-              action: 'cancel',
-            },
-          ]);
-        });
-        break;
-    }
+              action: 'ok',
+            });
+        }
+
+        emitter.next(confirmButtons);
+      });
 
     return emitter.asObservable();
   }
@@ -152,17 +122,14 @@ export class SkyConfirmComponent {
   #getCustomButtons(
     buttonConfig: SkyConfirmButtonConfig[]
   ): SkyConfirmButton[] {
-    const buttons: SkyConfirmButton[] = [];
-
-    buttonConfig.forEach((config: SkyConfirmButtonConfig) => {
-      buttons.push({
-        text: config.text,
-        action: config.action,
-        styleType: config.styleType || 'default',
-        autofocus: config.autofocus || false,
-      } as SkyConfirmButton);
-    });
-
-    return buttons;
+    return buttonConfig.map(
+      (config) =>
+        ({
+          text: config.text,
+          action: config.action,
+          styleType: config.styleType || 'default',
+          autofocus: config.autofocus || false,
+        } as SkyConfirmButton)
+    );
   }
 }