@skyux/forms 5.5.0 → 5.6.0

package/bundles/skyux-forms.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/forms'), require('@angular/core'), require('@skyux/i18n'), require('@skyux/indicators'), require('rxjs'), require('@skyux/theme'), require('rxjs/operators'), require('@skyux/core')) :
-    typeof define === 'function' && define.amd ? define('@skyux/forms', ['exports', '@angular/common', '@angular/forms', '@angular/core', '@skyux/i18n', '@skyux/indicators', 'rxjs', '@skyux/theme', 'rxjs/operators', '@skyux/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.forms = {}), global.ng.common, global.ng.forms, global.ng.core, global.i2, global.i2$1, global.rxjs, global.i1$1, global.rxjs.operators, global.i2$2));
-})(this, (function (exports, i1, i4, i0, i2, i2$1, rxjs, i1$1, operators, i2$2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@skyux/i18n'), require('@skyux/indicators'), require('rxjs'), require('@skyux/theme'), require('rxjs/operators'), require('@skyux/core')) :
+    typeof define === 'function' && define.amd ? define('@skyux/forms', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@skyux/i18n', '@skyux/indicators', 'rxjs', '@skyux/theme', 'rxjs/operators', '@skyux/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.forms = {}), global.ng.common, global.ng.core, global.ng.forms, global.i2, global.i2$1, global.rxjs, global.i1$1, global.rxjs.operators, global.i2$2));
+})(this, (function (exports, i1, i0, i4, i2, i2$1, rxjs, i1$1, operators, i2$2) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,8 +23,8 @@
     }
 
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
@@ -122,6 +122,48 @@
                     }]
             }] });
 
+    var SkyCharacterCounterIndicatorComponent = /** @class */ (function () {
+        function SkyCharacterCounterIndicatorComponent(changeDetector) {
+            this.changeDetector = changeDetector;
+            this.currentCharacterCountLimit = 0;
+            this.currentCharacterCount = 0;
+        }
+        Object.defineProperty(SkyCharacterCounterIndicatorComponent.prototype, "characterCount", {
+            get: function () {
+                return this.currentCharacterCount;
+            },
+            set: function (count) {
+                this.currentCharacterCount = count;
+                this.changeDetector.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyCharacterCounterIndicatorComponent.prototype, "characterCountLimit", {
+            get: function () {
+                return this.currentCharacterCountLimit;
+            },
+            set: function (limit) {
+                this.currentCharacterCountLimit = limit;
+                this.changeDetector.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SkyCharacterCounterIndicatorComponent;
+    }());
+    SkyCharacterCounterIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyCharacterCounterIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", ngImport: i0__namespace, template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  {{ characterCount }} {{ 'skyux_character_count_message' | skyLibResources }}\n  {{ characterCountLimit }}.\n  {{\n    characterCount > characterCountLimit\n      ? ('skyux_character_count_over_limit' | skyLibResources)\n      : ''\n  }}\n</span>\n", styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterIndicatorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-character-counter-indicator',
+                        template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  {{ characterCount }} {{ 'skyux_character_count_message' | skyLibResources }}\n  {{ characterCountLimit }}.\n  {{\n    characterCount > characterCountLimit\n      ? ('skyux_character_count_over_limit' | skyLibResources)\n      : ''\n  }}\n</span>\n",
+                        styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; } });
+
     /**
      * Creates an input field that validates the number of characters. Place this directive on
      * an `input` or `textarea` element. If users enter more characters than allowed, then the
@@ -206,48 +248,6 @@
                     type: i0.Input
                 }] } });
 
-    var SkyCharacterCounterIndicatorComponent = /** @class */ (function () {
-        function SkyCharacterCounterIndicatorComponent(changeDetector) {
-            this.changeDetector = changeDetector;
-            this.currentCharacterCountLimit = 0;
-            this.currentCharacterCount = 0;
-        }
-        Object.defineProperty(SkyCharacterCounterIndicatorComponent.prototype, "characterCount", {
-            get: function () {
-                return this.currentCharacterCount;
-            },
-            set: function (count) {
-                this.currentCharacterCount = count;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCharacterCounterIndicatorComponent.prototype, "characterCountLimit", {
-            get: function () {
-                return this.currentCharacterCountLimit;
-            },
-            set: function (limit) {
-                this.currentCharacterCountLimit = limit;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return SkyCharacterCounterIndicatorComponent;
-    }());
-    SkyCharacterCounterIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyCharacterCounterIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", ngImport: i0__namespace, template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  {{ characterCount }} {{ 'skyux_character_count_message' | skyLibResources }}\n  {{ characterCountLimit }}.\n  {{\n    characterCount > characterCountLimit\n      ? ('skyux_character_count_over_limit' | skyLibResources)\n      : ''\n  }}\n</span>\n", styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyLibResources": i2__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCharacterCounterIndicatorComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-character-counter-indicator',
-                        template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  {{ characterCount }} {{ 'skyux_character_count_message' | skyLibResources }}\n  {{ characterCountLimit }}.\n  {{\n    characterCount > characterCountLimit\n      ? ('skyux_character_count_over_limit' | skyLibResources)\n      : ''\n  }}\n</span>\n",
-                        styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; } });
-
     var SkyCharacterCounterModule = /** @class */ (function () {
         function SkyCharacterCounterModule() {
         }
@@ -298,297 +298,6 @@
         return SkyCheckboxChange;
     }());
 
-    // Need to add the following to classes which contain static methods.
-    // See: https://github.com/ng-packagr/ng-packagr/issues/641
-    // @dynamic
-    var SkyFormsUtility = /** @class */ (function () {
-        function SkyFormsUtility() {
-        }
-        /** Coerces a data-bound value (typically a string) to a boolean. */
-        SkyFormsUtility.coerceBooleanProperty = function (value) {
-            return value !== undefined && "" + value !== 'false';
-        };
-        /**
-         * Gets the required state of the checkbox.
-         * Currently, Angular doesn't offer a way to get this easily, so we have to create an empty
-         * control using the current validator to see if it throws a `required` validation error.
-         * https://github.com/angular/angular/issues/13461#issuecomment-340368046
-         */
-        SkyFormsUtility.hasRequiredValidation = function (ngControl) {
-            var abstractControl = ngControl.control;
-            if (abstractControl && abstractControl.validator) {
-                var validator = abstractControl.validator({});
-                if (validator && validator.required) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        return SkyFormsUtility;
-    }());
-
-    /**
-     * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
-     */
-    var nextId = 0;
-    /**
-     * Replaces the HTML input element with `type="checkbox"`. When users select a checkbox, its value
-     * is driven through an `ngModel` attribute that you specify on the `sky-checkbox` element.
-     */
-    var SkyCheckboxComponent = /** @class */ (function () {
-        function SkyCheckboxComponent(ngControl) {
-            this.ngControl = ngControl;
-            /**
-             * Specifies an ID for the checkbox.
-             * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`
-             */
-            this.id = "sky-checkbox-" + ++nextId;
-            /**
-             * Specifies an index for the checkbox. If not defined, the index is set to the position of the
-             * checkbox on load.
-             */
-            this.tabindex = 0;
-            /**
-             * Specifies a name for a group of checkboxes.
-             * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`
-             */
-            this.name = "sky-checkbox-" + ++nextId;
-            /**
-             * Fires when the selected value changes.
-             */
-            this.change = new i0.EventEmitter();
-            this.isFirstChange = true;
-            this._checked = false;
-            this._checkedChange = new rxjs.BehaviorSubject(this._checked);
-            this._disabled = false;
-            this._disabledChange = new rxjs.BehaviorSubject(this._disabled);
-            this._required = false;
-            /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
-            /*istanbul ignore next */
-            this.onTouched = function () { };
-            this._controlValueAccessorChangeFn = function (value) { };
-            if (this.ngControl) {
-                this.ngControl.valueAccessor = this;
-            }
-        }
-        Object.defineProperty(SkyCheckboxComponent.prototype, "disabled", {
-            /**
-             * Indicates whether the checkbox is disabled.
-             */
-            get: function () {
-                return this._disabled;
-            },
-            /**
-             * Indicates whether to disable the checkbox.
-             * @default false
-             */
-            set: function (value) {
-                var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
-                if (coercedValue !== this.disabled) {
-                    this._disabled = coercedValue;
-                    this._disabledChange.next(this._disabled);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "checkboxType", {
-            get: function () {
-                return this._checkboxType || 'info';
-            },
-            /**
-             * Specifies a type to set the background color after users select a checkbox where the
-             * `icon` property displays an icon in place of the checkbox. The valid options correspond to
-             * [the label component's](https://developer.blackbaud.com/skyux/components/label)
-             * label types. `"info"` creates a blue background, `"success"` creates a green
-             * background, `"warning"` creates an orange background, and `"danger"` creates a red background.
-             * @default "info"
-             */
-            set: function (value) {
-                if (value) {
-                    this._checkboxType = value.toLowerCase();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "inputId", {
-            get: function () {
-                return "input-" + this.id;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "checked", {
-            /**
-             * Indicates whether the checkbox is selected.
-             */
-            get: function () {
-                return this._checked;
-            },
-            /**
-             * Indicates whether the checkbox is selected.
-             * @default false
-             */
-            set: function (checked) {
-                if (checked !== this.checked) {
-                    this._checked = checked;
-                    this._controlValueAccessorChangeFn(checked);
-                    this._checkedChange.next(this._checked);
-                    // Do not mark the field as "dirty"
-                    // if the field has been initialized with a value.
-                    if (this.isFirstChange && this.ngControl && this.ngControl.control) {
-                        this.ngControl.control.markAsPristine();
-                        this.isFirstChange = false;
-                    }
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "required", {
-            get: function () {
-                return this._required;
-            },
-            /**
-             * 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
-             * is complete.
-             * @default false
-             */
-            set: function (value) {
-                this._required = SkyFormsUtility.coerceBooleanProperty(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "checkedChange", {
-            /**
-             * Fires when users select or deselect the checkbox.
-             */
-            get: function () {
-                return this._checkedChange;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyCheckboxComponent.prototype, "disabledChange", {
-            /**
-             * Fires when the selected value changes.
-             */
-            get: function () {
-                return this._disabledChange;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyCheckboxComponent.prototype.ngOnInit = function () {
-            if (this.ngControl) {
-                // Backwards compatibility support for anyone still using Validators.Required.
-                this.required =
-                    this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
-            }
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         */
-        SkyCheckboxComponent.prototype.writeValue = function (value) {
-            this.checked = !!value;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         */
-        SkyCheckboxComponent.prototype.registerOnChange = function (fn) {
-            this._controlValueAccessorChangeFn = fn;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         */
-        SkyCheckboxComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        /**
-         * Implemented as part of ControlValueAccessor.
-         */
-        SkyCheckboxComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-        };
-        /**
-         * Event handler for checkbox input element.
-         * Toggles checked state if element is not disabled.
-         */
-        SkyCheckboxComponent.prototype.onInteractionEvent = function (event) {
-            // We always have to stop propagation on the change event.
-            // Otherwise the change event, from the input element, will bubble up and
-            // emit its event object to the `change` output.
-            event.stopPropagation();
-            if (!this.disabled) {
-                this._toggle();
-                this._emitChangeEvent();
-            }
-        };
-        SkyCheckboxComponent.prototype.onInputBlur = function () {
-            this.onTouched();
-        };
-        SkyCheckboxComponent.prototype._emitChangeEvent = function () {
-            var event = new SkyCheckboxChange();
-            event.source = this;
-            event.checked = this._checked;
-            this._controlValueAccessorChangeFn(this._checked);
-            this.change.emit(event);
-        };
-        /**
-         * Toggles the `checked` value between true and false
-         */
-        SkyCheckboxComponent.prototype._toggle = function () {
-            this.checked = !this.checked;
-        };
-        return SkyCheckboxComponent;
-    }());
-    SkyCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxComponent, deps: [{ token: i4__namespace.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", required: "required" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, ngImport: i0__namespace, template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\n  }\"\n>\n  <input\n    class=\"sky-checkbox-input sky-switch-input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    (blur)=\"onInputBlur()\"\n    (change)=\"onInteractionEvent($event)\"\n  />\n  <span\n    class=\"sky-switch-control sky-rounded-corners\"\n    [ngClass]=\"{\n      'sky-switch-control-icon': icon,\n      'sky-switch-control-info': checkboxType === 'info',\n      'sky-switch-control-success': checkboxType === 'success',\n      'sky-switch-control-warning': checkboxType === 'warning',\n      'sky-switch-control-danger': checkboxType === 'danger'\n    }\"\n  >\n    <sky-icon\n      *ngIf=\"icon || checked\"\n      class=\"sky-checkbox-icon-default\"\n      fixedWidth=\"true\"\n      [icon]=\"icon || 'check'\"\n    >\n    </sky-icon>\n    <div class=\"sky-checkbox-icon-modern\">\n      <sky-icon\n        *ngIf=\"icon; else checkedTemplate\"\n        fixedWidth=\"true\"\n        [icon]=\"icon\"\n      >\n      </sky-icon>\n      <ng-template #checkedTemplate>\n        <sky-icon\n          *ngIf=\"checked\"\n          class=\"sky-checkbox-icon-modern-checked\"\n          fixedWidth=\"true\"\n          icon=\"check\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </ng-template>\n    </div>\n  </span>\n  <ng-content select=\"sky-checkbox-label\"> </ng-content>\n</label>\n", styles: [".sky-checkbox-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-default{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern{display:inline}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-default{display:none}.sky-theme-modern .sky-checkbox-icon-modern{display:inline}.sky-theme-modern .sky-checkbox-icon-modern-checked{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-checkbox',
-                        template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\n  }\"\n>\n  <input\n    class=\"sky-checkbox-input sky-switch-input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    (blur)=\"onInputBlur()\"\n    (change)=\"onInteractionEvent($event)\"\n  />\n  <span\n    class=\"sky-switch-control sky-rounded-corners\"\n    [ngClass]=\"{\n      'sky-switch-control-icon': icon,\n      'sky-switch-control-info': checkboxType === 'info',\n      'sky-switch-control-success': checkboxType === 'success',\n      'sky-switch-control-warning': checkboxType === 'warning',\n      'sky-switch-control-danger': checkboxType === 'danger'\n    }\"\n  >\n    <sky-icon\n      *ngIf=\"icon || checked\"\n      class=\"sky-checkbox-icon-default\"\n      fixedWidth=\"true\"\n      [icon]=\"icon || 'check'\"\n    >\n    </sky-icon>\n    <div class=\"sky-checkbox-icon-modern\">\n      <sky-icon\n        *ngIf=\"icon; else checkedTemplate\"\n        fixedWidth=\"true\"\n        [icon]=\"icon\"\n      >\n      </sky-icon>\n      <ng-template #checkedTemplate>\n        <sky-icon\n          *ngIf=\"checked\"\n          class=\"sky-checkbox-icon-modern-checked\"\n          fixedWidth=\"true\"\n          icon=\"check\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </ng-template>\n    </div>\n  </span>\n  <ng-content select=\"sky-checkbox-label\"> </ng-content>\n</label>\n",
-                        styles: [".sky-checkbox-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-default{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern{display:inline}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-default{display:none}.sky-theme-modern .sky-checkbox-icon-modern{display:inline}.sky-theme-modern .sky-checkbox-icon-modern-checked{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"],
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i4__namespace.NgControl, decorators: [{
-                            type: i0.Self
-                        }, {
-                            type: i0.Optional
-                        }] }];
-        }, propDecorators: { label: [{
-                    type: i0.Input
-                }], labelledBy: [{
-                    type: i0.Input
-                }], id: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], tabindex: [{
-                    type: i0.Input
-                }], name: [{
-                    type: i0.Input
-                }], change: [{
-                    type: i0.Output
-                }], icon: [{
-                    type: i0.Input
-                }], checkboxType: [{
-                    type: i0.Input
-                }], checked: [{
-                    type: i0.Input
-                }], required: [{
-                    type: i0.Input
-                }], checkedChange: [{
-                    type: i0.Output
-                }], disabledChange: [{
-                    type: i0.Output
-                }] } });
-
     /**
      * Specifies a label for the checkbox.
      */
@@ -952,11 +661,302 @@
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxRequiredValidatorDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
-                        // eslint-disable-next-line @angular-eslint/directive-selector
-                        selector: "sky-checkbox[required][formControlName],\n             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]",
-                        providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR],
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: "sky-checkbox[required][formControlName],\n             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
+    var SkyFormsUtility = /** @class */ (function () {
+        function SkyFormsUtility() {
+        }
+        /** Coerces a data-bound value (typically a string) to a boolean. */
+        SkyFormsUtility.coerceBooleanProperty = function (value) {
+            return value !== undefined && "" + value !== 'false';
+        };
+        /**
+         * Gets the required state of the checkbox.
+         * Currently, Angular doesn't offer a way to get this easily, so we have to create an empty
+         * control using the current validator to see if it throws a `required` validation error.
+         * https://github.com/angular/angular/issues/13461#issuecomment-340368046
+         */
+        SkyFormsUtility.hasRequiredValidation = function (ngControl) {
+            var abstractControl = ngControl.control;
+            if (abstractControl && abstractControl.validator) {
+                var validator = abstractControl.validator({});
+                if (validator && validator.required) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        return SkyFormsUtility;
+    }());
+
+    /**
+     * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
+     */
+    var nextId = 0;
+    /**
+     * Replaces the HTML input element with `type="checkbox"`. When users select a checkbox, its value
+     * is driven through an `ngModel` attribute that you specify on the `sky-checkbox` element.
+     */
+    var SkyCheckboxComponent = /** @class */ (function () {
+        function SkyCheckboxComponent(ngControl) {
+            this.ngControl = ngControl;
+            /**
+             * Specifies an ID for the checkbox.
+             * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`
+             */
+            this.id = "sky-checkbox-" + ++nextId;
+            /**
+             * Specifies an index for the checkbox. If not defined, the index is set to the position of the
+             * checkbox on load.
+             */
+            this.tabindex = 0;
+            /**
+             * Specifies a name for a group of checkboxes.
+             * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`
+             */
+            this.name = "sky-checkbox-" + ++nextId;
+            /**
+             * Fires when the selected value changes.
+             */
+            this.change = new i0.EventEmitter();
+            this.isFirstChange = true;
+            this._checked = false;
+            this._checkedChange = new rxjs.BehaviorSubject(this._checked);
+            this._disabled = false;
+            this._disabledChange = new rxjs.BehaviorSubject(this._disabled);
+            this._required = false;
+            /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
+            /*istanbul ignore next */
+            this.onTouched = function () { };
+            this._controlValueAccessorChangeFn = function (value) { };
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+            }
+        }
+        Object.defineProperty(SkyCheckboxComponent.prototype, "disabled", {
+            /**
+             * Indicates whether the checkbox is disabled.
+             */
+            get: function () {
+                return this._disabled;
+            },
+            /**
+             * Indicates whether to disable the checkbox.
+             * @default false
+             */
+            set: function (value) {
+                var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+                if (coercedValue !== this.disabled) {
+                    this._disabled = coercedValue;
+                    this._disabledChange.next(this._disabled);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyCheckboxComponent.prototype, "checkboxType", {
+            get: function () {
+                return this._checkboxType || 'info';
+            },
+            /**
+             * Specifies a type to set the background color after users select a checkbox where the
+             * `icon` property displays an icon in place of the checkbox. The valid options correspond to
+             * [the label component's](https://developer.blackbaud.com/skyux/components/label)
+             * label types. `"info"` creates a blue background, `"success"` creates a green
+             * background, `"warning"` creates an orange background, and `"danger"` creates a red background.
+             * @default "info"
+             */
+            set: function (value) {
+                if (value) {
+                    this._checkboxType = value.toLowerCase();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyCheckboxComponent.prototype, "inputId", {
+            get: function () {
+                return "input-" + this.id;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyCheckboxComponent.prototype, "checked", {
+            /**
+             * Indicates whether the checkbox is selected.
+             */
+            get: function () {
+                return this._checked;
+            },
+            /**
+             * Indicates whether the checkbox is selected.
+             * @default false
+             */
+            set: function (checked) {
+                if (checked !== this.checked) {
+                    this._checked = checked;
+                    this._controlValueAccessorChangeFn(checked);
+                    this._checkedChange.next(this._checked);
+                    // Do not mark the field as "dirty"
+                    // if the field has been initialized with a value.
+                    if (this.isFirstChange && this.ngControl && this.ngControl.control) {
+                        this.ngControl.control.markAsPristine();
+                        this.isFirstChange = false;
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyCheckboxComponent.prototype, "required", {
+            get: function () {
+                return this._required;
+            },
+            /**
+             * 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
+             * is complete.
+             * @default false
+             */
+            set: function (value) {
+                this._required = SkyFormsUtility.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyCheckboxComponent.prototype, "checkedChange", {
+            /**
+             * Fires when users select or deselect the checkbox.
+             */
+            get: function () {
+                return this._checkedChange;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyCheckboxComponent.prototype, "disabledChange", {
+            /**
+             * Fires when the selected value changes.
+             */
+            get: function () {
+                return this._disabledChange;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkyCheckboxComponent.prototype.ngOnInit = function () {
+            if (this.ngControl) {
+                // Backwards compatibility support for anyone still using Validators.Required.
+                this.required =
+                    this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
+            }
+        };
+        /**
+         * Implemented as part of ControlValueAccessor.
+         */
+        SkyCheckboxComponent.prototype.writeValue = function (value) {
+            this.checked = !!value;
+        };
+        /**
+         * Implemented as part of ControlValueAccessor.
+         */
+        SkyCheckboxComponent.prototype.registerOnChange = function (fn) {
+            this._controlValueAccessorChangeFn = fn;
+        };
+        /**
+         * Implemented as part of ControlValueAccessor.
+         */
+        SkyCheckboxComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        /**
+         * Implemented as part of ControlValueAccessor.
+         */
+        SkyCheckboxComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        /**
+         * Event handler for checkbox input element.
+         * Toggles checked state if element is not disabled.
+         */
+        SkyCheckboxComponent.prototype.onInteractionEvent = function (event) {
+            // We always have to stop propagation on the change event.
+            // Otherwise the change event, from the input element, will bubble up and
+            // emit its event object to the `change` output.
+            event.stopPropagation();
+            if (!this.disabled) {
+                this._toggle();
+                this._emitChangeEvent();
+            }
+        };
+        SkyCheckboxComponent.prototype.onInputBlur = function () {
+            this.onTouched();
+        };
+        SkyCheckboxComponent.prototype._emitChangeEvent = function () {
+            var event = new SkyCheckboxChange();
+            event.source = this;
+            event.checked = this._checked;
+            this._controlValueAccessorChangeFn(this._checked);
+            this.change.emit(event);
+        };
+        /**
+         * Toggles the `checked` value between true and false
+         */
+        SkyCheckboxComponent.prototype._toggle = function () {
+            this.checked = !this.checked;
+        };
+        return SkyCheckboxComponent;
+    }());
+    SkyCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxComponent, deps: [{ token: i4__namespace.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", required: "required" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, ngImport: i0__namespace, template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\n  }\"\n>\n  <input\n    class=\"sky-checkbox-input sky-switch-input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    (blur)=\"onInputBlur()\"\n    (change)=\"onInteractionEvent($event)\"\n  />\n  <span\n    class=\"sky-switch-control sky-rounded-corners\"\n    [ngClass]=\"{\n      'sky-switch-control-icon': icon,\n      'sky-switch-control-info': checkboxType === 'info',\n      'sky-switch-control-success': checkboxType === 'success',\n      'sky-switch-control-warning': checkboxType === 'warning',\n      'sky-switch-control-danger': checkboxType === 'danger'\n    }\"\n  >\n    <sky-icon\n      *ngIf=\"icon || checked\"\n      class=\"sky-checkbox-icon-default\"\n      fixedWidth=\"true\"\n      [icon]=\"icon || 'check'\"\n    >\n    </sky-icon>\n    <div class=\"sky-checkbox-icon-modern\">\n      <sky-icon\n        *ngIf=\"icon; else checkedTemplate\"\n        fixedWidth=\"true\"\n        [icon]=\"icon\"\n      >\n      </sky-icon>\n      <ng-template #checkedTemplate>\n        <sky-icon\n          *ngIf=\"checked\"\n          class=\"sky-checkbox-icon-modern-checked\"\n          fixedWidth=\"true\"\n          icon=\"check\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </ng-template>\n    </div>\n  </span>\n  <ng-content select=\"sky-checkbox-label\"> </ng-content>\n</label>\n", styles: [".sky-checkbox-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-default{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern{display:inline}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-default{display:none}.sky-theme-modern .sky-checkbox-icon-modern{display:inline}.sky-theme-modern .sky-checkbox-icon-modern-checked{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyCheckboxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-checkbox',
+                        template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\n  }\"\n>\n  <input\n    class=\"sky-checkbox-input sky-switch-input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    (blur)=\"onInputBlur()\"\n    (change)=\"onInteractionEvent($event)\"\n  />\n  <span\n    class=\"sky-switch-control sky-rounded-corners\"\n    [ngClass]=\"{\n      'sky-switch-control-icon': icon,\n      'sky-switch-control-info': checkboxType === 'info',\n      'sky-switch-control-success': checkboxType === 'success',\n      'sky-switch-control-warning': checkboxType === 'warning',\n      'sky-switch-control-danger': checkboxType === 'danger'\n    }\"\n  >\n    <sky-icon\n      *ngIf=\"icon || checked\"\n      class=\"sky-checkbox-icon-default\"\n      fixedWidth=\"true\"\n      [icon]=\"icon || 'check'\"\n    >\n    </sky-icon>\n    <div class=\"sky-checkbox-icon-modern\">\n      <sky-icon\n        *ngIf=\"icon; else checkedTemplate\"\n        fixedWidth=\"true\"\n        [icon]=\"icon\"\n      >\n      </sky-icon>\n      <ng-template #checkedTemplate>\n        <sky-icon\n          *ngIf=\"checked\"\n          class=\"sky-checkbox-icon-modern-checked\"\n          fixedWidth=\"true\"\n          icon=\"check\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </ng-template>\n    </div>\n  </span>\n  <ng-content select=\"sky-checkbox-label\"> </ng-content>\n</label>\n",
+                        styles: [".sky-checkbox-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-default{display:none}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern{display:inline}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-default{display:none}.sky-theme-modern .sky-checkbox-icon-modern{display:inline}.sky-theme-modern .sky-checkbox-icon-modern-checked{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"],
                     }]
-            }] });
+            }], ctorParameters: function () {
+            return [{ type: i4__namespace.NgControl, decorators: [{
+                            type: i0.Self
+                        }, {
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { label: [{
+                    type: i0.Input
+                }], labelledBy: [{
+                    type: i0.Input
+                }], id: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], tabindex: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], change: [{
+                    type: i0.Output
+                }], icon: [{
+                    type: i0.Input
+                }], checkboxType: [{
+                    type: i0.Input
+                }], checked: [{
+                    type: i0.Input
+                }], required: [{
+                    type: i0.Input
+                }], checkedChange: [{
+                    type: i0.Output
+                }], disabledChange: [{
+                    type: i0.Output
+                }] } });
 
     var SkyCheckboxModule = /** @class */ (function () {
         function SkyCheckboxModule() {
@@ -1036,7 +1036,7 @@
                 }
                 else if (validateFn) {
                     var errorParam = validateFn(fileItem);
-                    if (!!errorParam) {
+                    if (errorParam) {
                         fileItem.errorType = 'validate';
                         fileItem.errorParam = errorParam;
                     }
@@ -2455,33 +2455,6 @@
                     type: i0.Output
                 }] } });
 
-    /**
-     * Specifies a label for the radio button.
-     */
-    var SkyRadioLabelComponent = /** @class */ (function () {
-        function 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.
-        SkyRadioLabelComponent.prototype.onClick = function (event) {
-            event.stopPropagation();
-        };
-        return SkyRadioLabelComponent;
-    }());
-    SkyRadioLabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioLabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyRadioLabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0__namespace, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioLabelComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-radio-label',
-                        template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n",
-                    }]
-            }], propDecorators: { onClick: [{
-                    type: i0.HostListener,
-                    args: ['click', ['$event']]
-                }] } });
-
     var nextUniqueId = 0;
     /**
      * Organizes radio buttons into a group. It is required for radio
@@ -2722,6 +2695,33 @@
                     args: [SkyRadioComponent, { descendants: true }]
                 }] } });
 
+    /**
+     * Specifies a label for the radio button.
+     */
+    var SkyRadioLabelComponent = /** @class */ (function () {
+        function 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.
+        SkyRadioLabelComponent.prototype.onClick = function (event) {
+            event.stopPropagation();
+        };
+        return SkyRadioLabelComponent;
+    }());
+    SkyRadioLabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioLabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyRadioLabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0__namespace, template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRadioLabelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-radio-label',
+                        template: "<span class=\"sky-switch-label\">\n  <ng-content></ng-content>\n</span>\n",
+                    }]
+            }], propDecorators: { onClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
+
     var SkyRadioModule = /** @class */ (function () {
         function SkyRadioModule() {
         }
@@ -2884,24 +2884,6 @@
                     }]
             }] });
 
-    /**
-     * Specifies the header to display in a selection box.
-     */
-    var SkySelectionBoxHeaderComponent = /** @class */ (function () {
-        function SkySelectionBoxHeaderComponent() {
-        }
-        return SkySelectionBoxHeaderComponent;
-    }());
-    SkySelectionBoxHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySelectionBoxHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0__namespace, template: "<ng-content></ng-content>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxHeaderComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-selection-box-header',
-                        template: "<ng-content></ng-content>\n",
-                    }]
-            }] });
-
     /**
      * Creates a button to present users with a choice or question before proceeding with a one-time process.
      */
@@ -3144,6 +3126,24 @@
                     args: ['window:resize']
                 }] } });
 
+    /**
+     * Specifies the header to display in a selection box.
+     */
+    var SkySelectionBoxHeaderComponent = /** @class */ (function () {
+        function SkySelectionBoxHeaderComponent() {
+        }
+        return SkySelectionBoxHeaderComponent;
+    }());
+    SkySelectionBoxHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySelectionBoxHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0__namespace, template: "<ng-content></ng-content>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySelectionBoxHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-selection-box-header',
+                        template: "<ng-content></ng-content>\n",
+                    }]
+            }] });
+
     var SkySelectionBoxModule = /** @class */ (function () {
         function SkySelectionBoxModule() {
         }