Merge from master

CHANGELOG.md

@@ -1,3 +1,16 @@
+# 4.20.0 (2021-07-01)
+
+- Added a layout to the input box component that supports the search component in modern theme. [#273](https://github.com/blackbaud/skyux-forms/pull/273)
+- Fixed the input box component to have proper spacing within the country field component. [#273](https://github.com/blackbaud/skyux-forms/pull/273)
+
+# 4.19.1 (2021-06-23)
+
+- Fixed the single file attachment component to display the full file name in the anchor's title attribute. [#271](https://github.com/blackbaud/skyux-forms/pull/271)
+
+# 4.19.0 (2021-06-11)
+
+- Added support for inline help positioning inside the input box component. [#265](https://github.com/blackbaud/skyux-forms/pull/265)
+
 # 4.18.0 (2021-05-25)
 
 - Added support for inset icons to the input box component. [#266](https://github.com/blackbaud/skyux-forms/pull/266)

e2e/input-box.e2e-spec.ts

@@ -110,6 +110,23 @@ describe('Input box', () => {
       });
     });
 
+    it('should match previous input box screenshot with an inline help component', async (done) => {
+      await SkyHostBrowser.scrollTo('#input-box-help-inline');
+
+      expect('#input-box-help-inline').toMatchBaselineScreenshot(done, {
+        screenshotName: getScreenshotName('input-box-help-inline')
+      });
+    });
+
+    it(`should match previous input box screenshot with an inline help component
+        along side a character counter and required indicator`, async (done) => {
+      await SkyHostBrowser.scrollTo('#input-box-help-inline-required-with-character-counter');
+
+      expect('#input-box-help-inline-required-with-character-counter').toMatchBaselineScreenshot(done, {
+        screenshotName: getScreenshotName('input-box-help-inline-required-with-character-counter')
+      });
+    });
+
     it('should match previous textarea input box screenshot when focused', async (done) => {
       await SkyHostBrowser.scrollTo('#input-box-textarea');
 
@@ -568,6 +585,31 @@ describe('Input box', () => {
       }
     );
 
+    // Left inset icon
+    it(
+      'should match previous input box with a left inset icon',
+      async (done) => {
+        await SkyHostBrowser.scrollTo('#input-box-icon-inset-left');
+
+        expect('#input-box-icon-inset-left').toMatchBaselineScreenshot(done, {
+          screenshotName: getScreenshotName('input-box-icon-inset-left')
+        });
+      }
+    );
+
+    it(
+      'should match previous input box with a left inset button screenshot when input is focused',
+      async (done) => {
+        await SkyHostBrowser.scrollTo('#input-box-icon-inset-left');
+
+        await clickLabel('input-box-button-inset');
+
+        expect('#input-box-icon-inset-left').toMatchBaselineScreenshot(done, {
+          screenshotName: getScreenshotName('input-box-icon-inset-left-focused')
+        });
+      }
+    );
+
     // Placeholder text
     it(
       'should match previous input box with placeholder text',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/forms",
-  "version": "4.18.0",
+  "version": "4.20.0",
   "description": "SKY UX Forms",
   "scripts": {
     "build": "skyux build-public-library",
@@ -37,36 +37,36 @@
     "@angular/platform-browser": "9.1.13",
     "@angular/platform-browser-dynamic": "9.1.13",
     "@angular/router": "9.1.13",
-    "@blackbaud/auth-client": "2.47.0",
+    "@blackbaud/auth-client": "2.48.0",
     "@blackbaud/skyux-lib-clipboard": "4.0.0",
     "@blackbaud/skyux-lib-code-block": "4.0.2",
     "@blackbaud/skyux-lib-media": "4.0.0",
     "@blackbaud/skyux-lib-restricted-view": "4.2.1",
     "@blackbaud/skyux-lib-stache": "4.2.2",
     "@skyux-sdk/builder": "4.9.0",
-    "@skyux-sdk/builder-plugin-skyux": "4.1.4",
+    "@skyux-sdk/builder-plugin-skyux": "4.2.0",
     "@skyux-sdk/e2e": "4.0.2",
     "@skyux-sdk/testing": "4.2.3",
     "@skyux/animations": "4.0.1",
     "@skyux/assets": "4.0.1",
     "@skyux/config": "4.4.0",
-    "@skyux/core": "4.5.1",
-    "@skyux/datetime": "4.11.1",
-    "@skyux/docs-tools": "4.9.0",
-    "@skyux/forms": "4.18.0",
+    "@skyux/core": "4.6.0",
+    "@skyux/datetime": "4.12.0",
+    "@skyux/docs-tools": "4.9.1",
+    "@skyux/forms": "4.20.0",
     "@skyux/http": "4.2.0",
     "@skyux/i18n": "4.2.1",
-    "@skyux/indicators": "4.9.2",
+    "@skyux/indicators": "4.10.0",
     "@skyux/inline-form": "4.1.1",
-    "@skyux/layout": "4.6.2",
+    "@skyux/layout": "4.7.1",
     "@skyux/lists": "4.7.2",
-    "@skyux/lookup": "4.14.1",
-    "@skyux/modals": "4.5.3",
+    "@skyux/lookup": "4.16.0",
+    "@skyux/modals": "4.5.4",
     "@skyux/omnibar-interop": "4.0.1",
     "@skyux/popovers": "4.5.2",
-    "@skyux/router": "4.2.1",
-    "@skyux/tabs": "4.6.6",
-    "@skyux/theme": "4.16.3",
+    "@skyux/router": "4.2.2",
+    "@skyux/tabs": "4.6.7",
+    "@skyux/theme": "4.17.0",
     "codelyzer": "5.2.2",
     "rxjs": "6.6.7",
     "ts-node": "8.3.0",

src/app/app-extras.module.ts

@@ -21,6 +21,7 @@ import {
 } from '@skyux/http';
 
 import {
+  SkyHelpInlineModule,
   SkyIconModule,
   SkyStatusIndicatorModule
 } from '@skyux/indicators';
@@ -53,6 +54,7 @@ import {
     SkyDocsToolsModule,
     SkyFileAttachmentsModule,
     SkyFluidGridModule,
+    SkyHelpInlineModule,
     SkyIconModule,
     SkyIdModule,
     SkyInputBoxModule,

src/app/public/modules/file-attachment/file-attachment.component.html

@@ -61,6 +61,7 @@
       class="sky-file-attachment-name"
     >
       <a *ngIf="value; else noFile"
+        [attr.title]="getFileName(false)"
         (click)="emitClick()"
       >
         {{ getFileName() }}

src/app/public/modules/file-attachment/file-attachment.component.spec.ts

@@ -598,6 +598,13 @@ describe('File attachment', () => {
 
     expect(getFileNameText()).toBe('abcdefghijklmnopqrstuvwxyz...');
 
+    expect(el.querySelector('.sky-file-attachment-name > a')
+      .getAttribute('title'))
+      .toBe(
+        'abcdefghijklmnopqrstuvwxyz12345.png',
+        'Expected the anchor title to display the full file name.'
+      );
+
     // File with no name
     testFile = <SkyFileItem> {
       file: {

src/app/public/modules/file-attachment/file-attachment.component.ts

@@ -337,12 +337,12 @@ export class SkyFileAttachmentComponent implements AfterViewInit, AfterContentIn
     this.emitFileChangeEvent(this.value);
   }
 
-  public getFileName(): string | undefined {
+  public getFileName(truncate = true): string | undefined {
     if (this.value) {
       // tslint:disable-next-line: max-line-length
       let dropName = this.fileItemService.isFile(this.value) && this.value.file.name ? this.value.file.name : this.value.url;
 
-      if (dropName.length > 26) {
+      if (truncate && dropName.length > 26) {
         return dropName.slice(0, 26) + '...';
       } else {
         return dropName;

src/app/public/modules/input-box/fixtures/input-box.component.fixture.html

@@ -15,7 +15,34 @@
       skyId
       [disabled]="basicDisabled"
       #basicInput="skyId"
-    >f
+    >
+  </sky-input-box>
+</div>
+
+<div
+  class="input-inline-help"
+>
+  <sky-input-box>
+    <label
+      class="sky-control-label"
+      [for]="inlineHelp.id"
+    >
+      Basic input with inline help
+    </label>
+    <div
+      class="sky-control-help"
+    >
+      <button
+        type="button"
+      >
+        CUSTOM HELP WIDGET
+      </button>
+    </div>
+    <input
+      class="sky-form-control"
+      skyId
+      #inlineHelp="skyId"
+    >
   </sky-input-box>
 </div>
 
@@ -303,3 +330,30 @@
     </div>
   </sky-input-box>
 </div>
+
+<div
+  class="input-icon-inset-left"
+>
+  <sky-input-box>
+    <label
+      class="sky-control-label"
+      [for]="inputBoxIconInsetLeft.id"
+    >
+      Input with left inset icon
+    </label>
+    <input
+      class="sky-form-control"
+      skyId
+      type="text"
+      #inputBoxIconInsetLeft="skyId"
+    >
+    <div
+      class="sky-input-group-icon sky-input-box-icon-inset-left"
+    >
+      <sky-icon
+        class="test-icon-inset"
+        icon="search"
+      ></sky-icon>
+    </div>
+  </sky-input-box>
+</div>

src/app/public/modules/input-box/input-box-adapter.service.ts

@@ -18,4 +18,21 @@ import {
     }
   }
 
+  /**
+   * Returns the inline help element.
+   */
+  public getInlineHelpElement(elRef: ElementRef): HTMLElement {
+    return elRef.nativeElement.querySelector('.sky-control-help');
+  }
+
+  /**
+   * Returns true if the provided element contains the focused element.
+   */
+  public isFocusInElement(el: HTMLElement): boolean {
+    if (el) {
+      return el === document.activeElement || el.contains(document.activeElement);
+    }
+    return false;
+  }
+
  }

src/app/public/modules/input-box/input-box-populate-args.ts

@@ -17,4 +17,6 @@ export interface SkyInputBoxPopulateArgs {
 
   iconsInsetTemplate?: TemplateRef<any>;
 
+  iconsInsetLeftTemplate?: TemplateRef<any>;
+
 }

src/app/public/modules/input-box/input-box.component.html

@@ -7,9 +7,19 @@
     <div
       class="sky-form-group"
     >
-      <ng-container
-        *ngTemplateOutlet="labelTemplate"
-      ></ng-container>
+      <div
+        class="sky-input-box-label-wrapper"
+      >
+        <ng-container
+          *ngTemplateOutlet="labelTemplate"
+        ></ng-container>
+        <ng-container
+          *ngTemplateOutlet="inlineHelpTemplate"
+        ></ng-container>
+        <ng-container
+          *ngTemplateOutlet="characterCountTemplate"
+        ></ng-container>
+      </div>
       <div
         class="sky-input-group"
       >
@@ -25,6 +35,9 @@
           (focusin)="formControlFocusIn()"
           (focusout)="formControlFocusOut()"
         >
+          <ng-container
+            *ngTemplateOutlet="iconsInsetLeftTemplate"
+          ></ng-container>
           <ng-container
             *ngTemplateOutlet="inputTemplate"
           ></ng-container>
@@ -69,12 +82,25 @@
         <div
           class="sky-form-group"
         >
+          <ng-container
+            *ngTemplateOutlet="iconsInsetLeftTemplate"
+          ></ng-container>
           <div
             class="sky-input-box-form-group-inner"
           >
-            <ng-container
-              *ngTemplateOutlet="labelTemplate"
-            ></ng-container>
+            <div
+              class="sky-input-box-label-wrapper"
+            >
+              <ng-container
+                *ngTemplateOutlet="labelTemplate"
+              ></ng-container>
+              <ng-container
+                *ngTemplateOutlet="inlineHelpTemplate"
+              ></ng-container>
+              <ng-container
+                *ngTemplateOutlet="characterCountTemplate"
+              ></ng-container>
+            </div>
             <ng-container
               *ngTemplateOutlet="inputTemplate"
             ></ng-container>
@@ -102,6 +128,19 @@
   <ng-content
     select=".sky-control-label"
   ></ng-content>
+</ng-template>
+
+<ng-template
+  #inlineHelpTemplate
+>
+  <ng-content
+    select=".sky-control-help"
+  ></ng-content>
+</ng-template>
+
+<ng-template
+  #characterCountTemplate
+>
   <ng-content
     select="sky-character-counter-indicator"
   ></ng-content>
@@ -167,6 +206,22 @@
   </div>
 </ng-template>
 
+<ng-template
+  #iconsInsetLeftTemplate
+>
+  <div
+    class="sky-input-box-icon-inset-left-wrapper"
+    (click)="onInsetIconClick()"
+  >
+    <ng-content
+      select=".sky-input-group-icon.sky-input-box-icon-inset-left"
+    ></ng-content>
+    <ng-container
+      *ngTemplateOutlet="hostIconsInsetLeftTemplate"
+    ></ng-container>
+  </div>
+</ng-template>
+
 <ng-template
   #errorLabelTemplate
 >