@ifsworld/granite-components 3.0.0-beta.5 → 3.0.0

package/README.md

@@ -1,27 +1,7 @@
-# Granite UI Component Library
+# granite-components
 
-A collection of Angular UI components used by the IFS client framework.
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.12.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ui`.
-
-> Note: Don't forget to add `--project ui` or else it will be added to the default project in your `angular.json` file.
-
-## Build
-
-Run `ng build ui` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build ui`, go to the dist folder `cd dist/ui` and run `npm publish`.
+This library was generated with [Nx](https://nx.dev).
 
 ## Running unit tests
 
-Run `ng test ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Run `nx test granite-components` to execute the unit tests.

package/bundles/ifsworld-granite-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/testing'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/a11y'), require('@angular/cdk/keycodes'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/platform'), require('@angular/cdk/collections')) :
-    typeof define === 'function' && define.amd ? define('@ifsworld/granite-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular/cdk/testing', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/a11y', '@angular/cdk/keycodes', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/platform', '@angular/cdk/collections'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ifsworld = global.ifsworld || {}, global.ifsworld['granite-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.cdk.testing, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.cdk.keycodes, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.platform, global.ng.cdk.collections));
-}(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform, collections) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/testing'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/a11y'), require('@angular/cdk/keycodes'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/platform')) :
+    typeof define === 'function' && define.amd ? define('@ifsworld/granite-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular/cdk/testing', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/a11y', '@angular/cdk/keycodes', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/platform'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ifsworld = global.ifsworld || {}, global.ifsworld['granite-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.cdk.testing, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.cdk.keycodes, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.platform));
+}(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform) { 'use strict';
 
     var GraniteArrangeGridItemComponent = /** @class */ (function () {
         function GraniteArrangeGridItemComponent(element) {
@@ -1160,6 +1160,7 @@
         },
     };
     /** Base class with all of the menu functionality. */
+    // eslint-disable-next-line @angular-eslint/directive-class-suffix
     var _MenuBaseComponent = /** @class */ (function () {
         function _MenuBaseComponent(_changeDetectorRef) {
             this._changeDetectorRef = _changeDetectorRef;
@@ -1501,7 +1502,7 @@
                     providers: [
                         { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
                     ],
-                    styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));min-width:calc(var(--granite-spacing-m) * 7)}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs);max-height:calc(100% - var(--granite-spacing-m) * 7)}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.close:not(:empty).ng-animating{pointer-events:none}"]
+                    styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));min-width:calc(var(--granite-spacing-m) * 7);overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-xs)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-m) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs);max-height:calc(100% - var(--granite-spacing-m) * 7)}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.close:not(:empty).ng-animating{pointer-events:none}"]
                 },] }
     ];
 
@@ -2570,8 +2571,7 @@
             this.ariaLabelledby = null;
             this.valueChange = new core.EventEmitter();
             this.toggleChange = new core.EventEmitter();
-            // eslint-disable-next-line @angular-eslint/no-output-native
-            this.blur = new core.EventEmitter();
+            this.toggleBlur = new core.EventEmitter();
             this._positionBefore = false;
             this._toggleSwitchDisabled = false;
         }
@@ -2600,7 +2600,7 @@
             this._focusMonitor.focusVia(this._getInputElement(), origin, options);
         };
         GraniteToggleSwitchComponent.prototype._onBlur = function () {
-            this.blur.emit();
+            this.toggleBlur.emit();
         };
         GraniteToggleSwitchComponent.prototype._toggleSwitchChange = function () {
             this.checked = this._getInputElement().checked;
@@ -2643,7 +2643,7 @@
         ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
         valueChange: [{ type: core.Output }],
         toggleChange: [{ type: core.Output }],
-        blur: [{ type: core.Output }],
+        toggleBlur: [{ type: core.Output }],
         _inputElement: [{ type: core.ViewChild, args: ['input',] }]
     };
 
@@ -2659,118 +2659,6 @@
                 },] }
     ];
 
-    var GraniteRadioButtonComponent = /** @class */ (function () {
-        function GraniteRadioButtonComponent(_focusMonitor, _radioDispatcher) {
-            var _this = this;
-            this._focusMonitor = _focusMonitor;
-            this._radioDispatcher = _radioDispatcher;
-            this.id = null;
-            this.checked = false;
-            this.required = false;
-            this.disabled = false;
-            this.readonly = false;
-            this.labelPosition = 'after';
-            this.radioChanged = new core.EventEmitter();
-            this._positionBefore = false;
-            this._radioButtonDisabled = false;
-            this._removeUniqueSelectionListener = function () {
-                // Function used to deregister listener
-            };
-            this._removeUniqueSelectionListener = _radioDispatcher.listen(function (id, name) {
-                if (id !== _this.id && name === _this.name) {
-                    _this.checked = false;
-                }
-            });
-        }
-        GraniteRadioButtonComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.checked) {
-                this.checked = coercion.coerceBooleanProperty(changes.checked.currentValue);
-            }
-            if (changes.required) {
-                this.required = coercion.coerceBooleanProperty(changes.required.currentValue);
-            }
-            if (changes.readonly) {
-                this.readonly = coercion.coerceBooleanProperty(changes.readonly.currentValue);
-            }
-            if (changes.disabled) {
-                this.disabled = coercion.coerceBooleanProperty(changes.disabled.currentValue);
-            }
-            if (changes.labelPosition != null) {
-                this._positionBefore =
-                    changes.labelPosition.currentValue != null &&
-                        changes.labelPosition.currentValue === 'before';
-            }
-            if ((changes.disabled || changes.readonly) &&
-                (this.disabled || this.readonly)) {
-                this._radioButtonDisabled = true;
-            }
-        };
-        GraniteRadioButtonComponent.prototype.ngOnDestroy = function () {
-            this._removeUniqueSelectionListener();
-        };
-        // Focuses the radio button.
-        GraniteRadioButtonComponent.prototype.focus = function (origin, options) {
-            if (origin === void 0) { origin = 'program'; }
-            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-        };
-        GraniteRadioButtonComponent.prototype._radioButtonClick = function (targetValue) {
-            this.radioChanged.emit(targetValue);
-        };
-        GraniteRadioButtonComponent.prototype._radioButtonChange = function () {
-            this.checked = this._getInputElement().checked;
-            // Notify all radio buttons with the same name to un-check
-            this._radioDispatcher.notify(this.id, this.name);
-        };
-        GraniteRadioButtonComponent.prototype._getInputElement = function () {
-            return this._inputElement.nativeElement;
-        };
-        return GraniteRadioButtonComponent;
-    }());
-    GraniteRadioButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'granite-radio-button',
-                    exportAs: 'graniteRadioButton',
-                    host: {
-                        class: 'granite-radio-button',
-                        '[class.granite-radio-button-disabled]': 'disabled',
-                        '[class.granite-radio-button-label-before]': '_positionBefore',
-                        '[class.granite-radio-button-checked]': 'checked',
-                        '[class.granite-radio-button-readonly]': 'readonly',
-                    },
-                    template: "<label class=\"granite-radio-button-label\">\n  <div class=\"granite-radio-button-outer-circle\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"cdk-visually-hidden\"\n      type=\"radio\"\n      [attr.name]=\"name\"\n      [disabled]=\"_radioButtonDisabled\"\n      [checked]=\"checked\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [value]=\"value\"\n      (click)=\"_radioButtonClick($event.target.value)\"\n      (change)=\"_radioButtonChange()\"\n    />\n    <div class=\"granite-radio-button-inner-circle\"></div>\n  </div>\n  <span class=\"granite-radio-button-text\">\n    <ng-content></ng-content>\n  </span>\n</label>\n",
-                    styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:1px solid var(--granite-color-focus)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before).granite-radio-button-text{-webkit-margin-end:var(--granite-spacing-tiny);margin-inline-end:var(--granite-spacing-tiny)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;-webkit-animation:growAnimation .1s;animation:growAnimation .1s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:1px solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:1px solid var(--granite-color-text)}.granite-radio-button-text{-webkit-margin-start:var(--granite-spacing-tiny);margin-inline-start:var(--granite-spacing-tiny)}.granite-radio-button-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;-webkit-margin-end:32px;margin-inline-end:32px}:host(.granite-radio-button-readonly) *{cursor:default}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6;color:var(--granite-color-text)}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-radio-button-disabled) *{cursor:default}.granite-radio-button-outer-circle{height:var(--granite-spacing-small);width:var(--granite-spacing-small);border-radius:50%;box-sizing:border-box;border:1px solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:calc(var(--granite-spacing-tiny) * 1.25);height:calc(var(--granite-spacing-tiny) * 1.25);visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@-webkit-keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}"]
-                },] }
-    ];
-    GraniteRadioButtonComponent.ctorParameters = function () { return [
-        { type: a11y.FocusMonitor },
-        { type: collections.UniqueSelectionDispatcher }
-    ]; };
-    GraniteRadioButtonComponent.propDecorators = {
-        value: [{ type: core.Input }],
-        id: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        checked: [{ type: core.Input }],
-        required: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        labelPosition: [{ type: core.Input }],
-        radioChanged: [{ type: core.Output }],
-        _inputElement: [{ type: core.ViewChild, args: ['input',] }]
-    };
-
-    var GraniteRadioButtonModule = /** @class */ (function () {
-        function GraniteRadioButtonModule() {
-        }
-        return GraniteRadioButtonModule;
-    }());
-    GraniteRadioButtonModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteRadioButtonComponent],
-                    exports: [GraniteRadioButtonComponent],
-                    imports: [common.CommonModule],
-                },] }
-    ];
-
     var disabledMixin = function (Base) {
         if (Base === void 0) { Base = /** @class */ (function () {
             function class_1() {
@@ -2917,110 +2805,6 @@
                 },] }
     ];
 
-    var GraniteCheckboxComponent = /** @class */ (function () {
-        function GraniteCheckboxComponent(_focusMonitor) {
-            this._focusMonitor = _focusMonitor;
-            this.id = null;
-            this.checked = false;
-            this.disabled = false;
-            this.readonly = false;
-            this.labelPosition = 'after';
-            this.ariaLabel = null;
-            this.ariaLabelledby = null;
-            this.valueChange = new core.EventEmitter();
-            this.checkboxChange = new core.EventEmitter();
-            // eslint-disable-next-line @angular-eslint/no-output-native
-            this.blur = new core.EventEmitter();
-            this._positionBefore = false;
-            this._checkboxDisabled = false;
-            this._unchecked = false;
-        }
-        GraniteCheckboxComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.checked) {
-                this.checked = coercion.coerceBooleanProperty(changes.checked.currentValue);
-            }
-            if (changes.disabled) {
-                this.disabled = coercion.coerceBooleanProperty(changes.disabled.currentValue);
-            }
-            if (changes.readonly) {
-                this.readonly = coercion.coerceBooleanProperty(changes.readonly.currentValue);
-            }
-            if (changes.labelPosition != null) {
-                this._positionBefore =
-                    changes.labelPosition.currentValue != null &&
-                        changes.labelPosition.currentValue === 'before';
-            }
-            if ((changes.disabled || changes.readonly) &&
-                (this.disabled || this.readonly)) {
-                this._checkboxDisabled = true;
-            }
-        };
-        GraniteCheckboxComponent.prototype.focus = function (origin, options) {
-            if (origin === void 0) { origin = 'program'; }
-            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
-        };
-        GraniteCheckboxComponent.prototype._onBlur = function () {
-            this.blur.emit();
-        };
-        GraniteCheckboxComponent.prototype._checkboxChange = function () {
-            this._unchecked = this.checked ? true : false;
-            this.checked = this._getInputElement().checked;
-            this.valueChange.emit(this.checked);
-        };
-        GraniteCheckboxComponent.prototype._checkboxClick = function () {
-            this.checkboxChange.emit();
-        };
-        GraniteCheckboxComponent.prototype._getInputElement = function () {
-            return this._inputElement.nativeElement;
-        };
-        return GraniteCheckboxComponent;
-    }());
-    GraniteCheckboxComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'granite-checkbox',
-                    exportAs: 'graniteCheckbox',
-                    host: {
-                        class: 'granite-checkbox',
-                        '[class.granite-checkbox-checked]': 'checked',
-                        '[class.granite-checkbox-disabled]': 'disabled',
-                        '[class.granite-checkbox-readonly]': 'readonly',
-                        '[class.granite-checkbox-label-before]': '_positionBefore',
-                        '[class.granite-checkbox-unchecked]': '_unchecked',
-                    },
-                    template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n  <div class=\"granite-checkbox-box\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-checkbox-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_checkboxDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_checkboxClick()\"\n      (change)=\"_checkboxChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-checkbox-check\"></div>\n  </div>\n  <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box:hover{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box:hover{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{-webkit-animation:fadeInAnimation .2s;animation:fadeInAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(.granite-checkbox-unchecked) .granite-checkbox-box{-webkit-animation:fadeOutAnimation .2s;animation:fadeOutAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *,:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-tiny);padding-inline-end:var(--granite-spacing-tiny)}.granite-checkbox-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.granite-checkbox-box{width:var(--granite-spacing-small);height:var(--granite-spacing-small);border:solid var(--granite-color-background-inactive);border-width:calc(var(--granite-spacing-micro) / 4);border-radius:var(--granite-spacing-micro);display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:calc(var(--granite-spacing-micro) / 4) solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:calc(var(--granite-spacing-tiny) + (var(--granite-spacing-micro) / 4));height:calc(var(--granite-spacing-micro) + (var(--granite-spacing-micro) / 4));background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-micro);border-left-width:calc(var(--granite-spacing-micro) / 2);border-bottom-width:calc(var(--granite-spacing-micro) / 2);border-right-width:0;border-top-width:0}.granite-checkbox-text{-webkit-padding-start:var(--granite-spacing-tiny);padding-inline-start:var(--granite-spacing-tiny)}.granite-checkbox-text:empty{display:none}@-webkit-keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}"]
-                },] }
-    ];
-    GraniteCheckboxComponent.ctorParameters = function () { return [
-        { type: a11y.FocusMonitor }
-    ]; };
-    GraniteCheckboxComponent.propDecorators = {
-        id: [{ type: core.Input }],
-        checked: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        labelPosition: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
-        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
-        valueChange: [{ type: core.Output }],
-        checkboxChange: [{ type: core.Output }],
-        blur: [{ type: core.Output }],
-        _inputElement: [{ type: core.ViewChild, args: ['input',] }]
-    };
-
-    var GraniteCheckboxModule = /** @class */ (function () {
-        function GraniteCheckboxModule() {
-        }
-        return GraniteCheckboxModule;
-    }());
-    GraniteCheckboxModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [GraniteCheckboxComponent],
-                    exports: [GraniteCheckboxComponent],
-                },] }
-    ];
-
     var ɵ0 = deviceDesktop.output;
     /**
      * Directive used to tell components and their sub components that client output
@@ -3155,8 +2939,6 @@
     exports.GraniteBadgeModule = GraniteBadgeModule;
     exports.GraniteButtonComponent = GraniteButtonComponent;
     exports.GraniteButtonModule = GraniteButtonModule;
-    exports.GraniteCheckboxComponent = GraniteCheckboxComponent;
-    exports.GraniteCheckboxModule = GraniteCheckboxModule;
     exports.GraniteCoreModule = GraniteCoreModule;
     exports.GraniteDividerDirective = GraniteDividerDirective;
     exports.GraniteGridComponent = GraniteGridComponent;
@@ -3172,8 +2954,6 @@
     exports.GraniteMenuTouchCloseComponent = GraniteMenuTouchCloseComponent;
     exports.GraniteMenuTouchTitleItemComponent = GraniteMenuTouchTitleItemComponent;
     exports.GraniteMenuTriggerForDirective = GraniteMenuTriggerForDirective;
-    exports.GraniteRadioButtonComponent = GraniteRadioButtonComponent;
-    exports.GraniteRadioButtonModule = GraniteRadioButtonModule;
     exports.GraniteToggleSwitchComponent = GraniteToggleSwitchComponent;
     exports.GraniteToggleSwitchModule = GraniteToggleSwitchModule;
     exports._MenuBaseComponent = _MenuBaseComponent;