@skyux/forms 5.5.0-beta.0 → 5.6.1

package/fesm2015/skyux-forms.js

@@ -1,9 +1,9 @@
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Component, ChangeDetectionStrategy, Directive, Input, forwardRef, EventEmitter, Self, Optional, Output, Injectable, ViewChild, ContentChildren, Pipe, ViewEncapsulation, ContentChild, HostListener, ElementRef } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, CheckboxRequiredValidator, FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i0 from '@angular/core';
-import { NgModule, Component, ChangeDetectionStrategy, Directive, Input, EventEmitter, Self, Optional, Output, forwardRef, Injectable, ViewChild, ContentChildren, Pipe, ViewEncapsulation, ContentChild, HostListener, ElementRef } from '@angular/core';
 import * as i2 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i2$1 from '@skyux/indicators';
@@ -257,6 +257,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class SkyCheckboxChange {
 }
 
+/**
+ * Specifies a label for the checkbox.
+ */
+class SkyCheckboxLabelComponent {
+}
+SkyCheckboxLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyCheckboxLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxLabelComponent, selector: "sky-checkbox-label", ngImport: i0, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-checkbox-label',
+                    templateUrl: './checkbox-label.component.html',
+                }]
+        }] });
+
+// tslint:disable:no-forward-ref
+const SKY_CHECKBOX_REQUIRED_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SkyCheckboxRequiredValidatorDirective),
+    multi: true,
+};
+// tslint:enable
+/**
+ * Validator support for the `required` input on `sky-checkbox`.
+ * Angular's `CheckboxRequiredValidator` only works with `input type=checkbox`. This directive
+ * extends the angular validator to work with `sky-checkbox` tags.
+ * This is based on Angular Material's similar implementation:
+ * https://github.com/angular/components/blob/a415b52ead2ec202ba37edb7d7866b29dd790394/src/material/checkbox/checkbox-required-validator.ts
+ * @internal
+ */
+class SkyCheckboxRequiredValidatorDirective extends CheckboxRequiredValidator {
+}
+SkyCheckboxRequiredValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SkyCheckboxRequiredValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxRequiredValidatorDirective, selector: "sky-checkbox[required][formControlName],\n             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]", providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxRequiredValidatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: `sky-checkbox[required][formControlName],
+             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]`,
+                    providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR],
+                }]
+        }] });
+
 // Need to add the following to classes which contain static methods.
 // See: https://github.com/ng-packagr/ng-packagr/issues/641
 // @dynamic
@@ -389,7 +433,7 @@ class SkyCheckboxComponent {
     /**
      * Indicates whether the input is required for form validation.
      * When you set this property to `true`, the component adds `aria-required` and `required`
-     * attributes to the input element so that forms display an invalid state until the input element
+     * attributes to the input element so that forms display an invalid state until the input element
      * is complete.
      * @default false
      */
@@ -460,7 +504,7 @@ class SkyCheckboxComponent {
         this.onTouched();
     }
     _emitChangeEvent() {
-        let event = new SkyCheckboxChange();
+        const event = new SkyCheckboxChange();
         event.source = this;
         event.checked = this._checked;
         this._controlValueAccessorChangeFn(this._checked);
@@ -514,50 +558,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
-/**
- * Specifies a label for the checkbox.
- */
-class SkyCheckboxLabelComponent {
-}
-SkyCheckboxLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyCheckboxLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxLabelComponent, selector: "sky-checkbox-label", ngImport: i0, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-checkbox-label',
-                    templateUrl: './checkbox-label.component.html',
-                }]
-        }] });
-
-// tslint:disable:no-forward-ref
-const SKY_CHECKBOX_REQUIRED_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => SkyCheckboxRequiredValidatorDirective),
-    multi: true,
-};
-// tslint:enable
-/**
- * Validator support for the `required` input on `sky-checkbox`.
- * Angular's `CheckboxRequiredValidator` only works with `input type=checkbox`. This directive
- * extends the angular validator to work with `sky-checkbox` tags.
- * This is based on Angular Material's similar implementation:
- * https://github.com/angular/components/blob/a415b52ead2ec202ba37edb7d7866b29dd790394/src/material/checkbox/checkbox-required-validator.ts
- * @internal
- */
-class SkyCheckboxRequiredValidatorDirective extends CheckboxRequiredValidator {
-}
-SkyCheckboxRequiredValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SkyCheckboxRequiredValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxRequiredValidatorDirective, selector: "sky-checkbox[required][formControlName],\n             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]", providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxRequiredValidatorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: `sky-checkbox[required][formControlName],
-             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]`,
-                    providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR],
-                }]
-        }] });
-
 class SkyCheckboxModule {
 }
 SkyCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -606,9 +606,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SkyFileAttachmentService {
     checkFiles(files, minFileSize, maxFileSize, acceptedTypes, validateFn) {
-        let fileResults = [];
+        const fileResults = [];
         for (let index = 0; index < files.length; index++) {
-            let fileItem = {
+            const fileItem = {
                 file: files.item(index),
             };
             if (fileItem.file.size < minFileSize) {
@@ -627,8 +627,8 @@ class SkyFileAttachmentService {
                 fileResults.push(fileItem);
             }
             else if (validateFn) {
-                let errorParam = validateFn(fileItem);
-                if (!!errorParam) {
+                const errorParam = validateFn(fileItem);
+                if (errorParam) {
                     fileItem.errorType = 'validate';
                     fileItem.errorParam = errorParam;
                 }
@@ -661,8 +661,8 @@ class SkyFileAttachmentService {
         if (!fileType) {
             return true;
         }
-        let acceptedTypesUpper = acceptedTypes.toUpperCase();
-        let typeArray = acceptedTypesUpper.split(',');
+        const acceptedTypesUpper = acceptedTypes.toUpperCase();
+        const typeArray = acceptedTypesUpper.split(',');
         return !this.fileTypeInArray(typeArray, fileType.toUpperCase());
     }
     fileTypeInArray(typeArray, fileType) {
@@ -698,7 +698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SkyFileItemService {
     isFile(fileItem) {
-        let file = fileItem.file;
+        const file = fileItem.file;
         /* tslint:disable */
         return (file &&
             file !== undefined &&
@@ -708,8 +708,8 @@ class SkyFileItemService {
         /* tslint:enable */
     }
     isImage(fileItem) {
-        let fileTypeUpper = this.getFileTypeUpper(fileItem), slashIndex;
-        slashIndex = fileTypeUpper.indexOf('/');
+        const fileTypeUpper = this.getFileTypeUpper(fileItem);
+        const slashIndex = fileTypeUpper.indexOf('/');
         if (slashIndex >= 0) {
             switch (fileTypeUpper.substr(fileTypeUpper.indexOf('/') + 1)) {
                 case 'BMP':
@@ -728,7 +728,7 @@ class SkyFileItemService {
         /* istanbul ignore else */
         /* sanity check */
         if (fileItem) {
-            let file = fileItem.file;
+            const file = fileItem.file;
             if (file) {
                 /* istanbul ignore next */
                 name = file.name || '';
@@ -746,7 +746,7 @@ class SkyFileItemService {
         /* istanbul ignore else */
         /* sanity check */
         if (fileItem) {
-            let file = fileItem.file;
+            const file = fileItem.file;
             if (file) {
                 fileType = file.type || '';
             }
@@ -796,7 +796,7 @@ class SkyFileAttachmentComponent {
         /**
          * Indicates whether the input is required for form validation.
          * When you set this property to `true`, the component adds `aria-required` and `required`
-         * attributes to the input element so that forms display an invalid state until the input element
+         * attributes to the input element so that forms display an invalid state until the input element
          * is complete.
          */
         this.required = false;
@@ -955,7 +955,7 @@ class SkyFileAttachmentComponent {
     getFileName(truncate = true) {
         if (this.value) {
             // tslint:disable-next-line: max-line-length
-            let dropName = this.fileItemService.isFile(this.value) && this.value.file.name
+            const dropName = this.fileItemService.isFile(this.value) && this.value.file.name
                 ? this.value.file.name
                 : this.value.url;
             if (truncate && dropName.length > 26) {
@@ -1023,8 +1023,8 @@ class SkyFileAttachmentComponent {
     }
     handleFiles(files) {
         // tslint:disable-next-line: max-line-length
-        let processedFiles = this.fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
-        for (let file of processedFiles) {
+        const processedFiles = this.fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
+        for (const file of processedFiles) {
             if (file.errorType) {
                 this.emitFileChangeEvent(file);
             }
@@ -1237,18 +1237,17 @@ class SkyFileDropComponent {
         reader.readAsDataURL(file.file);
     }
     handleFiles(files) {
-        let validFileArray = [];
-        let rejectedFileArray = [];
-        let totalFiles = files.length;
-        let fileDrop = this;
+        const validFileArray = [];
+        const rejectedFileArray = [];
+        const totalFiles = files.length;
         // tslint:disable-next-line: max-line-length
-        let processedFiles = this.fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
-        for (let file of processedFiles) {
+        const processedFiles = this.fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
+        for (const file of processedFiles) {
             if (file.errorType) {
                 this.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
             }
             else {
-                this.loadFile(fileDrop, file, validFileArray, rejectedFileArray, totalFiles);
+                this.loadFile(this, file, validFileArray, rejectedFileArray, totalFiles);
             }
         }
     }
@@ -1301,7 +1300,7 @@ class SkyFileSizePipe {
         this.resourcesService = resourcesService;
     }
     transform(input) {
-        let decimalPlaces = 0, dividend = 1, formattedSize, roundedSize, template;
+        let decimalPlaces = 0, dividend = 1, template;
         /* tslint:disable */
         if (input === null || input === undefined) {
             return '';
@@ -1327,10 +1326,9 @@ class SkyFileSizePipe {
             dividend = 1e9;
             decimalPlaces = 1;
         }
-        roundedSize =
-            Math.floor(input / (dividend / Math.pow(10, decimalPlaces))) /
-                Math.pow(10, decimalPlaces);
-        formattedSize = this.decimalPipe.transform(roundedSize, '.0-3');
+        const roundedSize = Math.floor(input / (dividend / Math.pow(10, decimalPlaces))) /
+            Math.pow(10, decimalPlaces);
+        const formattedSize = this.decimalPipe.transform(roundedSize, '.0-3');
         return this.getString(template, formattedSize);
     }
     getString(key, ...args) {
@@ -1368,9 +1366,11 @@ class SkyFileItemComponent {
         return this.fileItem.url;
     }
     ngDoCheck() {
-        let changes = this.differ.diff(this.fileItem);
+        const changes = this.differ.diff(this.fileItem);
         if (changes) {
-            let cls, extensionUpper = this.fileItemService.getFileExtensionUpper(this.fileItem), fileTypeUpper;
+            let cls;
+            const extensionUpper = this.fileItemService.getFileExtensionUpper(this.fileItem);
+            let fileTypeUpper;
             switch (extensionUpper) {
                 case '.PDF':
                     cls = 'pdf';
@@ -1914,30 +1914,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
-/**
- * Specifies a label for the radio button.
- */
-class SkyRadioLabelComponent {
-    // When clicking on a checkbox label, Angular registers two click events.
-    // This handler ignores all events except for those that deal
-    // with the checkbox input explicitly.
-    onClick(event) {
-        event.stopPropagation();
-    }
-}
-SkyRadioLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyRadioLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-radio-label',
-                    templateUrl: './radio-label.component.html',
-                }]
-        }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 let nextUniqueId = 0;
 /**
  * Organizes radio buttons into a group. It is required for radio
@@ -1952,7 +1928,7 @@ class SkyRadioGroupComponent {
         /**
          * Indicates whether the input is required for form validation.
          * When you set this property to `true`, the component adds `aria-required` and `required`
-         * attributes to the input element so that forms display an invalid state until the input element
+         * attributes to the input element so that forms display an invalid state until the input element
          * is complete.
          * @default false
          */
@@ -2153,6 +2129,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [SkyRadioComponent, { descendants: true }]
             }] } });
 
+/**
+ * Specifies a label for the radio button.
+ */
+class SkyRadioLabelComponent {
+    // When clicking on a checkbox label, Angular registers two click events.
+    // This handler ignores all events except for those that deal
+    // with the checkbox input explicitly.
+    onClick(event) {
+        event.stopPropagation();
+    }
+}
+SkyRadioLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyRadioLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-radio-label',
+                    templateUrl: './radio-label.component.html',
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class SkyRadioModule {
 }
 SkyRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2308,21 +2308,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-/**
- * Specifies the header to display in a selection box.
- */
-class SkySelectionBoxHeaderComponent {
-}
-SkySelectionBoxHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkySelectionBoxHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content></ng-content>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-selection-box-header',
-                    templateUrl: './selection-box-header.component.html',
-                }]
-        }] });
-
 /**
  * Creates a button to present users with a choice or question before proceeding with a one-time process.
  */
@@ -2542,6 +2527,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['window:resize']
             }] } });
 
+/**
+ * Specifies the header to display in a selection box.
+ */
+class SkySelectionBoxHeaderComponent {
+}
+SkySelectionBoxHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySelectionBoxHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-selection-box-header',
+                    templateUrl: './selection-box-header.component.html',
+                }]
+        }] });
+
 class SkySelectionBoxModule {
 }
 SkySelectionBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySelectionBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });