Adopt SkyLibResourcesProvider

package.json

@@ -29,10 +29,8 @@
     "@angular/common": "^4.3.6",
     "@angular/core": "^4.3.6",
     "@angular/forms": "^4.3.6",
-    "@skyux/core": "^3.1.0",
-    "@skyux/i18n": "^3.0.1",
-    "@skyux/indicators": ">=3.0.0-rc.0",
-    "rxjs": "^5.4.3"
+    "@skyux/i18n": "^3.2.0",
+    "@skyux/indicators": "^3.0.0-rc.0"
   },
   "dependencies": {},
   "devDependencies": {
@@ -43,9 +41,9 @@
     "@angular/forms": "4.3.6",
     "@angular/platform-browser": "4.3.6",
     "@blackbaud/skyux": "2.26.0",
-    "@blackbaud/skyux-builder": "1.24.0",
-    "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.0",
-    "@skyux/indicators": "3.0.0-rc.0",
+    "@blackbaud/skyux-builder": "1.25.0",
+    "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.3",
+    "@skyux/indicators": "3.0.0-rc.2",
     "core-js": "2.4.1",
     "rxjs": "5.4.3",
     "ts-node": "3.0.4",

src/app/public/modules/file-attachment/file-attachments.module.ts

@@ -9,24 +9,30 @@ import {
   FormsModule
 } from '@angular/forms';
 
+import {
+  SkyI18nModule
+} from '@skyux/i18n';
+
 import {
   SkyIconModule
 } from '@skyux/indicators';
 
+import {
+  SkyFormsResourcesModule
+} from '../shared';
+
 import {
   SkyFileDropComponent
 } from './file-drop.component';
+
 import {
   SkyFileItemComponent
 } from './file-item.component';
+
 import {
   SkyFileSizePipe
 } from './file-size.pipe';
 
-import {
-  SkyI18nModule
-} from '@skyux/i18n/modules/i18n/i18n.module';
-
 @NgModule({
   declarations: [
     SkyFileDropComponent,
@@ -36,6 +42,7 @@ import {
   imports: [
     CommonModule,
     FormsModule,
+    SkyFormsResourcesModule,
     SkyIconModule,
     SkyI18nModule
   ],

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

@@ -12,7 +12,7 @@
       (dragenter)="fileDragEnter($event)"
       (dragleave)="fileDragLeave($event)"
       (drop)="fileDrop($event)"
-      [attr.aria-label]="'skyux_file_attachment_file_upload_drag_or_click' | skyAppResources">
+      [attr.aria-label]="'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources">
     </button>
 
     <input
@@ -28,26 +28,26 @@
     <div class="sky-file-drop-contents sky-padding-even-default" *ngIf="customEl.children.length === 0">
       <div class="sky-file-drop-contents-not-over">
         <div class="sky-file-drop-text-header sky-headline">
-          {{ 'skyux_file_attachment_file_upload_drag_file_here' | skyAppResources }}
+          {{ 'skyux_file_attachment_file_upload_drag_file_here' | skyLibResources }}
         </div>
         <div class="sky-file-drop-text">
-          {{ 'skyux_file_attachment_file_upload_or_click_to_browse' | skyAppResources }}
+          {{ 'skyux_file_attachment_file_upload_or_click_to_browse' | skyLibResources }}
         </div>
         <sky-icon icon="cloud-upload" class="sky-file-upload-icon"></sky-icon>
       </div>
 
       <!-- This will appear when file is dragged over and is valid -->
       <div class="sky-file-drop-contents-accept" >
         <div class="sky-file-drop-text-header sky-headline">
-          {{ 'skyux_file_attachment_file_upload_drop_files_here' | skyAppResources }}
+          {{ 'skyux_file_attachment_file_upload_drop_files_here' | skyLibResources }}
         </div>
         <sky-icon icon="bullseye" class="sky-file-upload-icon"></sky-icon>
       </div>
 
       <!-- This will appear when file is dragged over and is invalid -->
       <div class="sky-file-drop-contents-reject" >
         <div class="sky-file-drop-text-header sky-headline">
-          {{ 'skyux_file_attachment_file_upload_invalid_file' | skyAppResources }}
+          {{ 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources }}
         </div>
         <sky-icon icon="times-circle" class="sky-file-upload-icon"></sky-icon>
       </div>
@@ -62,24 +62,24 @@
       <div class="sky-file-drop-link">
         <div class="sky-file-drop-link-header">
           <div class="sky-file-drop-text-header sky-headline">
-            {{ 'skyux_file_attachment_file_upload_paste_link' | skyAppResources }}
+            {{ 'skyux_file_attachment_file_upload_paste_link' | skyLibResources }}
           </div>
         </div>
         <div class="sky-form-group">
           <input
             type="text"
             class="sky-form-control"
-            [attr.placeholder]="'skyux_file_attachment_file_upload_link_placeholder' | skyAppResources"
+            [attr.placeholder]="'skyux_file_attachment_file_upload_link_placeholder' | skyLibResources"
             [(ngModel)]="linkUrl"
             (keyup)="addLinkEnter($event)"
-            [attr.aria-label]="'skyux_file_attachment_file_upload_link_input' | skyAppResources">
+            [attr.aria-label]="'skyux_file_attachment_file_upload_link_input' | skyLibResources">
         </div>
         <button
           type="button"
           class="sky-btn sky-btn-primary"
           [disabled]="!linkUrl"
           (click)="addLink($event)">
-          {{ 'skyux_file_attachment_file_upload_paste_link_done' | skyAppResources }}
+          {{ 'skyux_file_attachment_file_upload_paste_link_done' | skyLibResources }}
         </button>
       </div>
     </div>

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

@@ -10,7 +10,7 @@
             </div>
         </div>
         <div class="sky-pull-right">
-          <button type="button" class="sky-btn sky-btn-default sky-file-item-btn-delete" [attr.aria-label]="'skyux_file_attachment_file_item_delete' | skyAppResources" (click)="itemDelete()">
+          <button type="button" class="sky-btn sky-btn-default sky-file-item-btn-delete" [attr.aria-label]="'skyux_file_attachment_file_item_delete' | skyLibResources" (click)="itemDelete()">
             <sky-icon icon="trash-o" size="lg"></sky-icon>
           </button>
         </div>
@@ -21,7 +21,7 @@
               <img
                 class="sky-file-item-preview-img"
                 [src]="fileItem.url"
-                [alt]="'skyux_file_attachment_file_upload_image_preview_alt_text' | skyAppResources" />
+                [alt]="'skyux_file_attachment_file_upload_image_preview_alt_text' | skyLibResources" />
             </div>
             <div *ngIf="!isImg()" class="sky-file-item-preview-other">
               <sky-icon [icon]="icon"></sky-icon>

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

@@ -8,6 +8,14 @@ import {
   expect
 } from '@skyux-sdk/testing';
 
+import {
+  SkyLibResourcesService
+} from '@skyux/i18n';
+
+import {
+  SkyLibResourcesTestService
+} from '@skyux/i18n/testing';
+
 import {
   SkyFileAttachmentsModule
 } from './file-attachments.module';
@@ -36,6 +44,12 @@ describe('File item component', () => {
     TestBed.configureTestingModule({
       imports: [
         SkyFileAttachmentsModule
+      ],
+      providers: [
+        {
+          provide: SkyLibResourcesService,
+          useClass: SkyLibResourcesTestService
+        }
       ]
     });
   });

src/app/public/modules/file-attachment/file-size.pipe.spec.ts

@@ -1,11 +1,18 @@
 import {
   DecimalPipe
 } from '@angular/common';
-import { SkyFileSizePipe } from './file-size.pipe';
+
+import {
+  SkyLibResourcesTestService
+} from '@skyux/i18n/testing';
+
+import {
+  SkyFileSizePipe
+} from './file-size.pipe';
 
 describe('File size pipe', () => {
-  let fileSizePipe: SkyFileSizePipe,
-    decimalPipe: DecimalPipe;
+  let fileSizePipe: SkyFileSizePipe;
+  let decimalPipe: DecimalPipe;
 
   function validateFormatted(value: number, expected: string, newFileSizePipe: SkyFileSizePipe) {
     let result = newFileSizePipe.transform(value);
@@ -15,7 +22,10 @@ describe('File size pipe', () => {
 
   beforeEach(function() {
     decimalPipe = new DecimalPipe('en');
-    fileSizePipe = new SkyFileSizePipe(decimalPipe);
+    fileSizePipe = new SkyFileSizePipe(
+      decimalPipe,
+      new SkyLibResourcesTestService() as any
+    );
   });
 
   it('should format bytes', function () {

src/app/public/modules/file-attachment/file-size.pipe.ts

@@ -8,20 +8,18 @@ import {
 } from '@angular/common';
 
 import {
-  SkyFormat
-} from '@skyux/core/modules/format/format';
+  SkyLibResourcesService
+} from '@skyux/i18n';
 
 @Pipe({
   name: 'skyFileSize'
 })
 export class SkyFileSizePipe implements PipeTransform {
 
-  // TODO: The following require statement is not recommended, but was done
-  // to avoid a breaking change (SkyResources is synchronous, but SkyAppResources is asynchronous).
-  // We should switch to using SkyAppResources in the next major release.
-  private resources: any = require('!json-loader!.skypageslocales/resources_en_US.json');
-
-  public constructor(private decimalPipe: DecimalPipe) {}
+  constructor(
+    private decimalPipe: DecimalPipe,
+    private resourcesService: SkyLibResourcesService
+  ) { }
 
   public transform(input: number): string {
 
@@ -38,18 +36,18 @@ export class SkyFileSizePipe implements PipeTransform {
     /* tslint:enable */
 
     if (Math.abs(input) === 1) {
-      template = this.getString('skyux_file_attachment_file_size_b_singular');
+      template = 'skyux_file_attachment_file_size_b_singular';
     } else if (input < 1000) {
-      template = this.getString('skyux_file_attachment_file_size_b_plural');
+      template = 'skyux_file_attachment_file_size_b_plural';
     } else if (input < 1e6) {
-      template = this.getString('skyux_file_attachment_file_size_kb');
+      template = 'skyux_file_attachment_file_size_kb';
       dividend = 1000;
     } else if (input < 1e9) {
-      template = this.getString('skyux_file_attachment_file_size_mb');
+      template = 'skyux_file_attachment_file_size_mb';
       dividend = 1e6;
       decimalPlaces = 1;
     } else {
-      template = this.getString('skyux_file_attachment_file_size_gb');
+      template = 'skyux_file_attachment_file_size_gb';
       dividend = 1e9;
       decimalPlaces = 1;
     }
@@ -59,15 +57,15 @@ export class SkyFileSizePipe implements PipeTransform {
 
     formattedSize = this.decimalPipe.transform(roundedSize, '.0-3');
 
-    return SkyFormat.formatText(template, formattedSize);
+    return this.getString(template, formattedSize);
   }
 
-  /**
-   * This method is a stand-in for the old SkyResources service from skyux2.
-   * TODO: We should consider using Builder's resources service instead.
-   * @param key
-   */
-  private getString(key: string): string {
-    return this.resources[key].message;
+  private getString(key: string, ...args: any[]): string {
+    // TODO: Need to implement the async `getString` method in a breaking change.
+    return this.resourcesService.getStringForLocale(
+      { locale: 'en-US' },
+      key,
+      ...args
+    );
   }
 }

src/app/public/modules/shared/forms-resources.module.ts

@@ -0,0 +1,20 @@
+import {
+  NgModule
+} from '@angular/core';
+
+import {
+  SKY_LIB_RESOURCES_PROVIDERS
+} from '@skyux/i18n';
+
+import {
+  SkyFormsResourcesProvider
+} from '../../plugin-resources/forms-resources-provider';
+
+@NgModule({
+  providers: [{
+    provide: SKY_LIB_RESOURCES_PROVIDERS,
+    useClass: SkyFormsResourcesProvider,
+    multi: true
+  }]
+})
+export class SkyFormsResourcesModule { }

src/app/public/modules/shared/index.ts

@@ -0,0 +1 @@
+export * from './forms-resources.module';

src/app/public/plugin-resources/forms-resources-provider.ts

@@ -0,0 +1,8 @@
+import {
+  SkyAppLocaleInfo,
+  SkyLibResourcesProvider
+} from '@skyux/i18n';
+
+export class SkyFormsResourcesProvider implements SkyLibResourcesProvider {
+  public getString: (localeInfo: SkyAppLocaleInfo, name: string) => string;
+}