@ni/nimble-angular 1.0.0-beta.124 → 1.0.0-beta.128

package/bundles/ni-nimble-angular.umd.js

@@ -1,55 +1,97 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@ni/nimble-components/dist/esm/theme-provider/themes'), require('@ni/nimble-components/dist/esm/theme-provider'), require('@angular/forms'), require('@ni/nimble-components/dist/esm/text-field'), require('@ni/nimble-components/dist/esm/number-field'), require('@ni/nimble-components/dist/esm/select'), require('@ni/nimble-components/dist/esm/listbox-option'), require('@ni/nimble-components/dist/esm/button'), require('@ni/nimble-components/dist/esm/tree-view/types'), require('@ni/nimble-components/dist/esm/tree-view'), require('@ni/nimble-components/dist/esm/tree-item'), require('@ni/nimble-components/dist/esm/checkbox'), require('@ni/nimble-components/dist/esm/drawer/types'), require('@ni/nimble-components/dist/esm/drawer'), require('@ni/nimble-components/dist/esm/menu'), require('@ni/nimble-components/dist/esm/menu-item'), require('@ni/nimble-components/dist/esm/tabs'), require('@ni/nimble-components/dist/esm/tab'), require('@ni/nimble-components/dist/esm/tab-panel'), require('@ni/nimble-components/dist/esm/tabs-toolbar')) :
-    typeof define === 'function' && define.amd ? define('@ni/nimble-angular', ['exports', '@angular/core', '@angular/common', '@ni/nimble-components/dist/esm/theme-provider/themes', '@ni/nimble-components/dist/esm/theme-provider', '@angular/forms', '@ni/nimble-components/dist/esm/text-field', '@ni/nimble-components/dist/esm/number-field', '@ni/nimble-components/dist/esm/select', '@ni/nimble-components/dist/esm/listbox-option', '@ni/nimble-components/dist/esm/button', '@ni/nimble-components/dist/esm/tree-view/types', '@ni/nimble-components/dist/esm/tree-view', '@ni/nimble-components/dist/esm/tree-item', '@ni/nimble-components/dist/esm/checkbox', '@ni/nimble-components/dist/esm/drawer/types', '@ni/nimble-components/dist/esm/drawer', '@ni/nimble-components/dist/esm/menu', '@ni/nimble-components/dist/esm/menu-item', '@ni/nimble-components/dist/esm/tabs', '@ni/nimble-components/dist/esm/tab', '@ni/nimble-components/dist/esm/tab-panel', '@ni/nimble-components/dist/esm/tabs-toolbar'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ni = global.ni || {}, global.ni['nimble-angular'] = {}), global.ng.core, global.ng.common, global.themes, null, global.ng.forms, null, null, null, null, null, global.types, null, null, null, global.types$1));
-}(this, (function (exports, core, common, themes, themeProvider, forms, textField, numberField, select, listboxOption, button, types, treeView, treeItem, checkbox, types$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@ni/nimble-components/dist/esm/button'), require('@angular/forms'), require('@ni/nimble-components/dist/esm/checkbox'), require('@ni/nimble-components/dist/esm/drawer/types'), require('@ni/nimble-components/dist/esm/drawer'), require('@ni/nimble-components/dist/esm/listbox-option'), require('@ni/nimble-components/dist/esm/menu'), require('@ni/nimble-components/dist/esm/menu-item'), require('@ni/nimble-components/dist/esm/number-field'), require('@ni/nimble-components/dist/esm/select'), require('@ni/nimble-components/dist/esm/tab'), require('@ni/nimble-components/dist/esm/tab-panel'), require('@ni/nimble-components/dist/esm/tabs'), require('@ni/nimble-components/dist/esm/tabs-toolbar'), require('@ni/nimble-components/dist/esm/text-field'), require('@ni/nimble-components/dist/esm/theme-provider/themes'), require('@ni/nimble-components/dist/esm/theme-provider'), require('@ni/nimble-components/dist/esm/tree-item'), require('@ni/nimble-components/dist/esm/tree-view/types'), require('@ni/nimble-components/dist/esm/tree-view')) :
+    typeof define === 'function' && define.amd ? define('@ni/nimble-angular', ['exports', '@angular/core', '@angular/common', '@ni/nimble-components/dist/esm/button', '@angular/forms', '@ni/nimble-components/dist/esm/checkbox', '@ni/nimble-components/dist/esm/drawer/types', '@ni/nimble-components/dist/esm/drawer', '@ni/nimble-components/dist/esm/listbox-option', '@ni/nimble-components/dist/esm/menu', '@ni/nimble-components/dist/esm/menu-item', '@ni/nimble-components/dist/esm/number-field', '@ni/nimble-components/dist/esm/select', '@ni/nimble-components/dist/esm/tab', '@ni/nimble-components/dist/esm/tab-panel', '@ni/nimble-components/dist/esm/tabs', '@ni/nimble-components/dist/esm/tabs-toolbar', '@ni/nimble-components/dist/esm/text-field', '@ni/nimble-components/dist/esm/theme-provider/themes', '@ni/nimble-components/dist/esm/theme-provider', '@ni/nimble-components/dist/esm/tree-item', '@ni/nimble-components/dist/esm/tree-view/types', '@ni/nimble-components/dist/esm/tree-view'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ni = global.ni || {}, global.ni['nimble-angular'] = {}), global.ng.core, global.ng.common, null, global.ng.forms, null, global.types, null, null, null, null, null, null, null, null, null, null, null, global.themes, null, null, global.types$1));
+}(this, (function (exports, core, common, button, forms, checkbox, types, drawer, listboxOption, menu, menuItem, numberField, select, tab, tabPanel, tabs, tabsToolbar, textField, themes, themeProvider, treeItem, types$1) { 'use strict';
 
     /**
-     * Directive for Angular integration for the theme provider
+     * Conversion helpers for values coming from Angular templates via
+     * strings specified in templates or via property bindings
      */
-    var NimbleThemeProviderDirective = /** @class */ (function () {
-        function NimbleThemeProviderDirective() {
+    /**
+     * Converts values from templates (empty string or null) or boolean bindings to a boolean property representation
+     */
+    var toBooleanProperty = function (value) {
+        if (value === false || value === null) {
+            return false;
         }
-        return NimbleThemeProviderDirective;
+        // For boolean attributes the empty string value is true
+        return true;
+    };
+    /**
+     * Converts values from templates (empty string or null) or boolean bindings to an Aria boolean
+     * attribute representation (the strings "true" or "false")
+     */
+    var toBooleanAriaAttribute = function (value) {
+        if (value === false || value === null) {
+            return 'false';
+        }
+        // For boolean attributes the empty string value is true
+        return 'true';
+    };
+    /**
+     * Converts values from templates (number representation as a string) or number bindings to a number property representation
+     */
+    var toNumberProperty = function (value) {
+        return Number(value);
+    };
+
+    /**
+     * Directive to provide Angular integration for the button.
+     */
+    var NimbleButtonDirective = /** @class */ (function () {
+        function NimbleButtonDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+        }
+        Object.defineProperty(NimbleButtonDirective.prototype, "appearance", {
+            get: function () {
+                return this.elementRef.nativeElement.appearance;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'appearance', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleButtonDirective.prototype, "disabled", {
+            get: function () {
+                return this.elementRef.nativeElement.disabled;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NimbleButtonDirective;
     }());
-    NimbleThemeProviderDirective.decorators = [
+    NimbleButtonDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-theme-provider'
+                    selector: 'nimble-button'
                 },] }
     ];
-    NimbleThemeProviderDirective.propDecorators = {
-        theme: [{ type: core.HostBinding, args: ['attr.theme',] }, { type: core.Input }]
+    NimbleButtonDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    NimbleButtonDirective.propDecorators = {
+        appearance: [{ type: core.Input }],
+        disabled: [{ type: core.Input }]
     };
 
-    var NimbleThemeProviderModule = /** @class */ (function () {
-        function NimbleThemeProviderModule() {
+    var NimbleButtonModule = /** @class */ (function () {
+        function NimbleButtonModule() {
         }
-        return NimbleThemeProviderModule;
+        return NimbleButtonModule;
     }());
-    NimbleThemeProviderModule.decorators = [
+    NimbleButtonModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleThemeProviderDirective],
+                    declarations: [NimbleButtonDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleThemeProviderDirective]
-                },] }
-    ];
-
-    /**
-     * Directive to provide Angular integration for the text field
-     */
-    var NimbleTextFieldDirective = /** @class */ (function () {
-        function NimbleTextFieldDirective() {
-        }
-        return NimbleTextFieldDirective;
-    }());
-    NimbleTextFieldDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: 'nimble-text-field'
+                    exports: [NimbleButtonDirective]
                 },] }
     ];
-    NimbleTextFieldDirective.propDecorators = {
-        readonly: [{ type: core.HostBinding, args: ['attr.readonly',] }, { type: core.Input }]
-    };
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -370,137 +412,138 @@
     }
 
     /**
-     * Extension of Angular's DefaultValueAccessor to target the text-based inputs.
+     * Extension of Angular's CheckboxControlValueAccessor to target the Nimble checkbox control.
      *
-     * Directive decorator based on DefaultValueAccessor decorator
-     * https://github.com/angular/angular/blob/master/packages/forms/src/directives/default_value_accessor.ts#L72
+     * Directive decorator based on CheckboxControlValueAccessor decorator
+     * https://github.com/angular/angular/blob/master/packages/forms/src/directives/checkbox_value_accessor.ts#L42
      */
-    var NimbleDefaultControlValueAccessorDirective = /** @class */ (function (_super) {
-        __extends(NimbleDefaultControlValueAccessorDirective, _super);
-        function NimbleDefaultControlValueAccessorDirective() {
+    var NimbleCheckboxControlValueAccessorDirective = /** @class */ (function (_super) {
+        __extends(NimbleCheckboxControlValueAccessorDirective, _super);
+        function NimbleCheckboxControlValueAccessorDirective() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        return NimbleDefaultControlValueAccessorDirective;
-    }(forms.DefaultValueAccessor));
-    NimbleDefaultControlValueAccessorDirective.decorators = [
+        return NimbleCheckboxControlValueAccessorDirective;
+    }(forms.CheckboxControlValueAccessor));
+    NimbleCheckboxControlValueAccessorDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-text-field[formControlName],nimble-text-field[formControl],nimble-text-field[ngModel]',
-                    // The following host metadata is duplicated from DefaultValueAccessor
+                    selector: 'nimble-checkbox[formControlName],nimble-checkbox[formControl],nimble-checkbox[ngModel]',
+                    // The following host metadata is duplicated from CheckboxControlValueAccessor
                     // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-                    host: {
-                        '(input)': '$any(this)._handleInput($event.target.value)',
-                        '(blur)': 'onTouched()',
-                        '(compositionstart)': '$any(this)._compositionStart()',
-                        '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
-                    },
+                    host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
                     providers: [{
                             provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: core.forwardRef(function () { return NimbleDefaultControlValueAccessorDirective; }),
+                            useExisting: core.forwardRef(function () { return NimbleCheckboxControlValueAccessorDirective; }),
                             multi: true
                         }]
                 },] }
     ];
 
     /**
-     * Extension of Angular's NumberValueAccessor to target the number-based inputs.
-     *
-     * Directive decorator based on NumberValueAccessor decorator
-     * https://github.com/angular/angular/blob/master/packages/forms/src/directives/number_value_accessor.ts#L43
+     * Directive to provide Angular integration for the checkbox.
      */
-    var NimbleNumberControlValueAccessorDirective = /** @class */ (function (_super) {
-        __extends(NimbleNumberControlValueAccessorDirective, _super);
-        function NimbleNumberControlValueAccessorDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    var NimbleCheckboxDirective = /** @class */ (function () {
+        function NimbleCheckboxDirective() {
         }
-        return NimbleNumberControlValueAccessorDirective;
-    }(forms.NumberValueAccessor));
-    NimbleNumberControlValueAccessorDirective.decorators = [
+        return NimbleCheckboxDirective;
+    }());
+    NimbleCheckboxDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-number-field[formControlName],nimble-number-field[formControl],nimble-number-field[ngModel]',
-                    // The following host metadata is duplicated from NumberValueAccessor
-                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-                    host: { '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
-                    providers: [{
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: core.forwardRef(function () { return NimbleNumberControlValueAccessorDirective; }),
-                            multi: true
-                        }]
+                    selector: 'nimble-checkbox'
                 },] }
     ];
 
-    var NimbleControlValueAccessorModule = /** @class */ (function () {
-        function NimbleControlValueAccessorModule() {
+    var NimbleCheckboxModule = /** @class */ (function () {
+        function NimbleCheckboxModule() {
         }
-        return NimbleControlValueAccessorModule;
+        return NimbleCheckboxModule;
     }());
-    NimbleControlValueAccessorModule.decorators = [
+    NimbleCheckboxModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleDefaultControlValueAccessorDirective, NimbleNumberControlValueAccessorDirective],
+                    declarations: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleDefaultControlValueAccessorDirective, NimbleNumberControlValueAccessorDirective]
-                },] }
-    ];
-
-    var NimbleTextFieldModule = /** @class */ (function () {
-        function NimbleTextFieldModule() {
-        }
-        return NimbleTextFieldModule;
-    }());
-    NimbleTextFieldModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [NimbleTextFieldDirective],
-                    imports: [common.CommonModule, NimbleControlValueAccessorModule],
-                    providers: [],
-                    exports: [NimbleTextFieldDirective, NimbleControlValueAccessorModule]
+                    exports: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the number field.
+     * Directive to provide Angular integration for the drawer.
      */
-    var NimbleNumberFieldDirective = /** @class */ (function () {
-        function NimbleNumberFieldDirective() {
+    var NimbleDrawerDirective = /** @class */ (function () {
+        function NimbleDrawerDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+            this.stateChange = new core.EventEmitter();
         }
-        return NimbleNumberFieldDirective;
+        Object.defineProperty(NimbleDrawerDirective.prototype, "location", {
+            get: function () {
+                return this.elementRef.nativeElement.location;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'location', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleDrawerDirective.prototype, "state", {
+            get: function () {
+                return this.elementRef.nativeElement.state;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'state', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleDrawerDirective.prototype, "modal", {
+            get: function () {
+                return this.elementRef.nativeElement.modal;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'modal', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NimbleDrawerDirective.prototype.show = function () {
+            this.state = types.DrawerState.Opening;
+        };
+        NimbleDrawerDirective.prototype.hide = function () {
+            this.state = types.DrawerState.Closing;
+        };
+        NimbleDrawerDirective.prototype.onStateChanged = function ($event) {
+            if ($event.target === this.elementRef.nativeElement) {
+                this.stateChange.emit(this.state);
+            }
+        };
+        return NimbleDrawerDirective;
     }());
-    NimbleNumberFieldDirective.decorators = [
+    NimbleDrawerDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-number-field'
+                    selector: 'nimble-drawer'
                 },] }
     ];
-    NimbleNumberFieldDirective.propDecorators = {
-        readonly: [{ type: core.HostBinding, args: ['attr.readonly',] }, { type: core.Input }],
-        min: [{ type: core.HostBinding, args: ['attr.min',] }, { type: core.Input }],
-        max: [{ type: core.HostBinding, args: ['attr.max',] }, { type: core.Input }],
-        step: [{ type: core.HostBinding, args: ['attr.step',] }, { type: core.Input }],
-        placeholder: [{ type: core.HostBinding, args: ['attr.placeholder',] }, { type: core.Input }]
+    NimbleDrawerDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    NimbleDrawerDirective.propDecorators = {
+        location: [{ type: core.Input }],
+        state: [{ type: core.Input }],
+        modal: [{ type: core.Input }],
+        stateChange: [{ type: core.Output }],
+        onStateChanged: [{ type: core.HostListener, args: ['state-change', ['$event'],] }]
     };
 
-    var NimbleNumberFieldModule = /** @class */ (function () {
-        function NimbleNumberFieldModule() {
+    var NimbleDrawerModule = /** @class */ (function () {
+        function NimbleDrawerModule() {
         }
-        return NimbleNumberFieldModule;
+        return NimbleDrawerModule;
     }());
-    NimbleNumberFieldModule.decorators = [
+    NimbleDrawerModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleNumberFieldDirective],
-                    imports: [common.CommonModule, NimbleControlValueAccessorModule],
-                    providers: [],
-                    exports: [NimbleNumberFieldDirective, NimbleControlValueAccessorModule]
-                },] }
-    ];
-
-    /**
-     * Directive for Nimble select control Angular integration
-     */
-    var NimbleSelectDirective = /** @class */ (function () {
-        function NimbleSelectDirective() {
-        }
-        return NimbleSelectDirective;
-    }());
-    NimbleSelectDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: 'nimble-select',
+                    declarations: [NimbleDrawerDirective],
+                    imports: [common.CommonModule],
+                    exports: [NimbleDrawerDirective]
                 },] }
     ];
 
@@ -533,27 +576,27 @@
                 },] }
     ];
 
-    var NimbleSelectModule = /** @class */ (function () {
-        function NimbleSelectModule() {
-        }
-        return NimbleSelectModule;
-    }());
-    NimbleSelectModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective],
-                    imports: [common.CommonModule],
-                    exports: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective]
-                },] }
-    ];
-
     /**
      * Directive to provide Angular integration for the listbox option.
      */
     var NimbleListboxOptionDirective = /** @class */ (function (_super) {
         __extends(NimbleListboxOptionDirective, _super);
-        function NimbleListboxOptionDirective(element, renderer, select) {
-            return _super.call(this, element, renderer, select) || this;
+        function NimbleListboxOptionDirective(elementRef, renderer, select) {
+            var _this = _super.call(this, elementRef, renderer, select) || this;
+            _this.elementRef = elementRef;
+            _this.renderer = renderer;
+            return _this;
         }
+        Object.defineProperty(NimbleListboxOptionDirective.prototype, "disabled", {
+            get: function () {
+                return this.elementRef.nativeElement.disabled;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
         return NimbleListboxOptionDirective;
     }(forms.NgSelectOption));
     NimbleListboxOptionDirective.decorators = [
@@ -567,7 +610,7 @@
         { type: NimbleSelectControlValueAccessorDirective, decorators: [{ type: core.Optional }, { type: core.Host }] }
     ]; };
     NimbleListboxOptionDirective.propDecorators = {
-        disabled: [{ type: core.HostBinding, args: ['attr.disabled',] }, { type: core.Input }]
+        disabled: [{ type: core.Input }]
     };
 
     var NimbleListboxOptionModule = /** @class */ (function () {
@@ -584,400 +627,621 @@
     ];
 
     /**
-     * Directive to provide Angular integration for the button.
+     * Directive to provide Angular integration for the menu.
      */
-    var NimbleButtonDirective = /** @class */ (function () {
-        function NimbleButtonDirective() {
+    var NimbleMenuDirective = /** @class */ (function () {
+        function NimbleMenuDirective() {
         }
-        return NimbleButtonDirective;
+        return NimbleMenuDirective;
     }());
-    NimbleButtonDirective.decorators = [
+    NimbleMenuDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-button'
+                    selector: 'nimble-menu'
                 },] }
     ];
-    NimbleButtonDirective.propDecorators = {
-        disabled: [{ type: core.HostBinding, args: ['disabled',] }, { type: core.Input }],
-        appearance: [{ type: core.HostBinding, args: ['appearance',] }, { type: core.Input }]
-    };
 
-    var NimbleButtonModule = /** @class */ (function () {
-        function NimbleButtonModule() {
+    var NimbleMenuModule = /** @class */ (function () {
+        function NimbleMenuModule() {
         }
-        return NimbleButtonModule;
+        return NimbleMenuModule;
     }());
-    NimbleButtonModule.decorators = [
+    NimbleMenuModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleButtonDirective],
+                    declarations: [NimbleMenuDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleButtonDirective]
+                    exports: [NimbleMenuDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the tree view.
+     * Directive to provide Angular integration for the menu.
      */
-    var NimbleTreeViewDirective = /** @class */ (function () {
-        function NimbleTreeViewDirective() {
+    var NimbleMenuItemDirective = /** @class */ (function () {
+        function NimbleMenuItemDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
         }
-        return NimbleTreeViewDirective;
+        Object.defineProperty(NimbleMenuItemDirective.prototype, "disabled", {
+            get: function () {
+                return this.elementRef.nativeElement.disabled;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NimbleMenuItemDirective;
     }());
-    NimbleTreeViewDirective.decorators = [
+    NimbleMenuItemDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-tree-view'
+                    selector: 'nimble-menu-item'
                 },] }
     ];
-    NimbleTreeViewDirective.propDecorators = {
-        selectionMode: [{ type: core.HostBinding, args: ['attr.selection-mode',] }, { type: core.Input }]
+    NimbleMenuItemDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    NimbleMenuItemDirective.propDecorators = {
+        disabled: [{ type: core.Input }]
     };
 
-    var NimbleTreeViewModule = /** @class */ (function () {
-        function NimbleTreeViewModule() {
+    var NimbleMenuItemModule = /** @class */ (function () {
+        function NimbleMenuItemModule() {
         }
-        return NimbleTreeViewModule;
+        return NimbleMenuItemModule;
     }());
-    NimbleTreeViewModule.decorators = [
+    NimbleMenuItemModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleTreeViewDirective],
+                    declarations: [NimbleMenuItemDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleTreeViewDirective]
+                    exports: [NimbleMenuItemDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the tree item.
+     * Extension of Angular's NumberValueAccessor to target the number-based inputs.
+     *
+     * Directive decorator based on NumberValueAccessor decorator
+     * https://github.com/angular/angular/blob/master/packages/forms/src/directives/number_value_accessor.ts#L43
      */
-    var NimbleTreeItemDirective = /** @class */ (function () {
-        function NimbleTreeItemDirective(treeItemReference) {
-            this.treeItemReference = treeItemReference;
-            this.expandedChange = new core.EventEmitter();
+    var NimbleNumberFieldControlValueAccessorDirective = /** @class */ (function (_super) {
+        __extends(NimbleNumberFieldControlValueAccessorDirective, _super);
+        function NimbleNumberFieldControlValueAccessorDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        NimbleTreeItemDirective.prototype.onExpandedChange = function ($event) {
-            var treeItemElement = this.treeItemReference.nativeElement;
-            if ($event.target === treeItemElement) {
-                this.expanded = treeItemElement.expanded;
-                this.expandedChange.emit(treeItemElement.expanded);
-            }
-        };
-        return NimbleTreeItemDirective;
-    }());
-    NimbleTreeItemDirective.decorators = [
+        return NimbleNumberFieldControlValueAccessorDirective;
+    }(forms.NumberValueAccessor));
+    NimbleNumberFieldControlValueAccessorDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-tree-item'
+                    selector: 'nimble-number-field[formControlName],nimble-number-field[formControl],nimble-number-field[ngModel]',
+                    // The following host metadata is duplicated from NumberValueAccessor
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: { '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
+                    providers: [{
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return NimbleNumberFieldControlValueAccessorDirective; }),
+                            multi: true
+                        }]
                 },] }
     ];
-    NimbleTreeItemDirective.ctorParameters = function () { return [
+
+    /**
+     * Directive to provide Angular integration for the number field.
+     */
+    var NimbleNumberFieldDirective = /** @class */ (function () {
+        function NimbleNumberFieldDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+        }
+        Object.defineProperty(NimbleNumberFieldDirective.prototype, "readOnly", {
+            get: function () {
+                return this.elementRef.nativeElement.readOnly;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'readOnly', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleNumberFieldDirective.prototype, "min", {
+            get: function () {
+                return this.elementRef.nativeElement.min;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'min', toNumberProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleNumberFieldDirective.prototype, "max", {
+            get: function () {
+                return this.elementRef.nativeElement.max;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'max', toNumberProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleNumberFieldDirective.prototype, "step", {
+            get: function () {
+                return this.elementRef.nativeElement.step;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'step', toNumberProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleNumberFieldDirective.prototype, "placeholder", {
+            get: function () {
+                return this.elementRef.nativeElement.placeholder;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'placeholder', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NimbleNumberFieldDirective;
+    }());
+    NimbleNumberFieldDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: 'nimble-number-field'
+                },] }
+    ];
+    NimbleNumberFieldDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
         { type: core.ElementRef }
     ]; };
-    NimbleTreeItemDirective.propDecorators = {
-        disabled: [{ type: core.HostBinding, args: ['disabled',] }, { type: core.Input }],
-        expanded: [{ type: core.HostBinding, args: ['expanded',] }, { type: core.Input }],
-        selected: [{ type: core.HostBinding, args: ['selected',] }, { type: core.HostBinding, args: ['attr.aria-selected', // Needed because fast-foundation TreeView sets initial selection with an aria-selected query
-                ] }, { type: core.Input }],
-        expandedChange: [{ type: core.Output }],
-        onExpandedChange: [{ type: core.HostListener, args: ['expanded-change', ['$event'],] }]
+    NimbleNumberFieldDirective.propDecorators = {
+        readOnly: [{ type: core.Input }],
+        min: [{ type: core.Input }],
+        max: [{ type: core.Input }],
+        step: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }]
     };
 
-    var NimbleTreeItemModule = /** @class */ (function () {
-        function NimbleTreeItemModule() {
+    var NimbleNumberFieldModule = /** @class */ (function () {
+        function NimbleNumberFieldModule() {
         }
-        return NimbleTreeItemModule;
+        return NimbleNumberFieldModule;
     }());
-    NimbleTreeItemModule.decorators = [
+    NimbleNumberFieldModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleTreeItemDirective],
+                    declarations: [NimbleNumberFieldDirective, NimbleNumberFieldControlValueAccessorDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleTreeItemDirective]
+                    exports: [NimbleNumberFieldDirective, NimbleNumberFieldControlValueAccessorDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the checkbox.
+     * Directive for Nimble select control Angular integration
      */
-    var NimbleCheckboxDirective = /** @class */ (function () {
-        function NimbleCheckboxDirective() {
+    var NimbleSelectDirective = /** @class */ (function () {
+        function NimbleSelectDirective() {
         }
-        return NimbleCheckboxDirective;
+        return NimbleSelectDirective;
     }());
-    NimbleCheckboxDirective.decorators = [
+    NimbleSelectDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-checkbox'
+                    selector: 'nimble-select',
+                },] }
+    ];
+
+    var NimbleSelectModule = /** @class */ (function () {
+        function NimbleSelectModule() {
+        }
+        return NimbleSelectModule;
+    }());
+    NimbleSelectModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective],
+                    imports: [common.CommonModule],
+                    exports: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective]
                 },] }
     ];
 
     /**
-     * Extension of Angular's CheckboxControlValueAccessor to target the Nimble checkbox control.
-     *
-     * Directive decorator based on CheckboxControlValueAccessor decorator
-     * https://github.com/angular/angular/blob/master/packages/forms/src/directives/checkbox_value_accessor.ts#L42
+     * Directive to provide Angular integration for the tab element.
      */
-    var NimbleCheckboxControlValueAccessorDirective = /** @class */ (function (_super) {
-        __extends(NimbleCheckboxControlValueAccessorDirective, _super);
-        function NimbleCheckboxControlValueAccessorDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    var NimbleTabDirective = /** @class */ (function () {
+        function NimbleTabDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
         }
-        return NimbleCheckboxControlValueAccessorDirective;
-    }(forms.CheckboxControlValueAccessor));
-    NimbleCheckboxControlValueAccessorDirective.decorators = [
+        Object.defineProperty(NimbleTabDirective.prototype, "disabled", {
+            get: function () {
+                return this.elementRef.nativeElement.disabled;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NimbleTabDirective;
+    }());
+    NimbleTabDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-checkbox[formControlName],nimble-checkbox[formControl],nimble-checkbox[ngModel]',
-                    // The following host metadata is duplicated from CheckboxControlValueAccessor
-                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-                    host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
-                    providers: [{
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: core.forwardRef(function () { return NimbleCheckboxControlValueAccessorDirective; }),
-                            multi: true
-                        }]
+                    selector: 'nimble-tab'
                 },] }
     ];
+    NimbleTabDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    NimbleTabDirective.propDecorators = {
+        disabled: [{ type: core.Input }]
+    };
 
-    var NimbleCheckboxModule = /** @class */ (function () {
-        function NimbleCheckboxModule() {
+    var NimbleTabModule = /** @class */ (function () {
+        function NimbleTabModule() {
         }
-        return NimbleCheckboxModule;
+        return NimbleTabModule;
     }());
-    NimbleCheckboxModule.decorators = [
+    NimbleTabModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective],
+                    declarations: [NimbleTabDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective]
+                    exports: [NimbleTabDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the drawer.
+     * Directive to provide Angular integration for the tab panel.
      */
-    var NimbleDrawerDirective = /** @class */ (function () {
-        function NimbleDrawerDirective(drawerReference) {
-            this.drawerReference = drawerReference;
-            this.location = types$1.DrawerLocation.Left;
-            this.state = types$1.DrawerState.Closed;
-            this.modal = true;
-            this.stateChange = new core.EventEmitter();
+    var NimbleTabPanelDirective = /** @class */ (function () {
+        function NimbleTabPanelDirective() {
         }
-        NimbleDrawerDirective.prototype.show = function () {
-            this.state = types$1.DrawerState.Opening;
-        };
-        NimbleDrawerDirective.prototype.hide = function () {
-            this.state = types$1.DrawerState.Closing;
-        };
-        NimbleDrawerDirective.prototype.onStateChanged = function ($event) {
-            var drawer = this.drawerReference.nativeElement;
-            if ($event.target === drawer) {
-                this.state = drawer.state;
-                this.stateChange.emit(this.state);
-            }
-        };
-        return NimbleDrawerDirective;
+        return NimbleTabPanelDirective;
     }());
-    NimbleDrawerDirective.decorators = [
+    NimbleTabPanelDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-drawer'
+                    selector: 'nimble-tab-panel'
                 },] }
     ];
-    NimbleDrawerDirective.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-    NimbleDrawerDirective.propDecorators = {
-        location: [{ type: core.HostBinding, args: ['location',] }, { type: core.Input }],
-        state: [{ type: core.HostBinding, args: ['state',] }, { type: core.Input }],
-        modal: [{ type: core.HostBinding, args: ['modal',] }, { type: core.Input }],
-        stateChange: [{ type: core.Output }],
-        onStateChanged: [{ type: core.HostListener, args: ['state-change', ['$event'],] }]
-    };
 
-    var NimbleDrawerModule = /** @class */ (function () {
-        function NimbleDrawerModule() {
+    var NimbleTabPanelModule = /** @class */ (function () {
+        function NimbleTabPanelModule() {
         }
-        return NimbleDrawerModule;
+        return NimbleTabPanelModule;
     }());
-    NimbleDrawerModule.decorators = [
+    NimbleTabPanelModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleDrawerDirective],
+                    declarations: [NimbleTabPanelDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleDrawerDirective]
+                    exports: [NimbleTabPanelDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the menu.
+     * Directive to provide Angular integration for the tabs element.
      */
-    var NimbleMenuDirective = /** @class */ (function () {
-        function NimbleMenuDirective() {
+    var NimbleTabsDirective = /** @class */ (function () {
+        function NimbleTabsDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+            this.activeidChange = new core.EventEmitter();
         }
-        return NimbleMenuDirective;
+        Object.defineProperty(NimbleTabsDirective.prototype, "activeid", {
+            get: function () {
+                return this.elementRef.nativeElement.activeid;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'activeid', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NimbleTabsDirective.prototype.onChange = function ($event) {
+            if ($event.target === this.elementRef.nativeElement) {
+                this.activeidChange.emit(this.activeid);
+            }
+        };
+        return NimbleTabsDirective;
     }());
-    NimbleMenuDirective.decorators = [
+    NimbleTabsDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-menu'
+                    selector: 'nimble-tabs'
                 },] }
     ];
+    NimbleTabsDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    NimbleTabsDirective.propDecorators = {
+        activeid: [{ type: core.Input }],
+        activeidChange: [{ type: core.Output }],
+        onChange: [{ type: core.HostListener, args: ['change', ['$event'],] }]
+    };
 
-    var NimbleMenuModule = /** @class */ (function () {
-        function NimbleMenuModule() {
+    var NimbleTabsModule = /** @class */ (function () {
+        function NimbleTabsModule() {
         }
-        return NimbleMenuModule;
+        return NimbleTabsModule;
     }());
-    NimbleMenuModule.decorators = [
+    NimbleTabsModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleMenuDirective],
+                    declarations: [NimbleTabsDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleMenuDirective]
+                    exports: [NimbleTabsDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the menu.
+     * Directive to provide Angular integration for the tabs toolbar.
      */
-    var NimbleMenuItemDirective = /** @class */ (function () {
-        function NimbleMenuItemDirective() {
+    var NimbleTabsToolbarDirective = /** @class */ (function () {
+        function NimbleTabsToolbarDirective() {
         }
-        return NimbleMenuItemDirective;
+        return NimbleTabsToolbarDirective;
     }());
-    NimbleMenuItemDirective.decorators = [
+    NimbleTabsToolbarDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-menu-item'
+                    selector: 'nimble-tabs-toolbar'
                 },] }
     ];
-    NimbleMenuItemDirective.propDecorators = {
-        disabled: [{ type: core.HostBinding, args: ['disabled',] }, { type: core.Input }]
-    };
 
-    var NimbleMenuItemModule = /** @class */ (function () {
-        function NimbleMenuItemModule() {
+    var NimbleTabsToolbarModule = /** @class */ (function () {
+        function NimbleTabsToolbarModule() {
         }
-        return NimbleMenuItemModule;
+        return NimbleTabsToolbarModule;
     }());
-    NimbleMenuItemModule.decorators = [
+    NimbleTabsToolbarModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleMenuItemDirective],
+                    declarations: [NimbleTabsToolbarDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleMenuItemDirective]
+                    exports: [NimbleTabsToolbarDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the tabs element.
+     * Extension of Angular's DefaultValueAccessor to target the text-based inputs.
+     *
+     * Directive decorator based on DefaultValueAccessor decorator
+     * https://github.com/angular/angular/blob/master/packages/forms/src/directives/default_value_accessor.ts#L72
      */
-    var NimbleTabsDirective = /** @class */ (function () {
-        function NimbleTabsDirective(tabs) {
-            this.tabs = tabs;
-            this.activeidChange = new core.EventEmitter();
+    var NimbleTextFieldControlValueAccessorDirective = /** @class */ (function (_super) {
+        __extends(NimbleTextFieldControlValueAccessorDirective, _super);
+        function NimbleTextFieldControlValueAccessorDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        NimbleTabsDirective.prototype.onChange = function () {
-            this.activeidChange.emit(this.tabs.nativeElement.activeid);
-        };
-        return NimbleTabsDirective;
+        return NimbleTextFieldControlValueAccessorDirective;
+    }(forms.DefaultValueAccessor));
+    NimbleTextFieldControlValueAccessorDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: 'nimble-text-field[formControlName],nimble-text-field[formControl],nimble-text-field[ngModel]',
+                    // The following host metadata is duplicated from DefaultValueAccessor
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: {
+                        '(input)': '$any(this)._handleInput($event.target.value)',
+                        '(blur)': 'onTouched()',
+                        '(compositionstart)': '$any(this)._compositionStart()',
+                        '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
+                    },
+                    providers: [{
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return NimbleTextFieldControlValueAccessorDirective; }),
+                            multi: true
+                        }]
+                },] }
+    ];
+
+    /**
+     * Directive to provide Angular integration for the text field
+     */
+    var NimbleTextFieldDirective = /** @class */ (function () {
+        function NimbleTextFieldDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+        }
+        Object.defineProperty(NimbleTextFieldDirective.prototype, "readOnly", {
+            get: function () {
+                return this.elementRef.nativeElement.readOnly;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'readOnly', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NimbleTextFieldDirective;
     }());
-    NimbleTabsDirective.decorators = [
+    NimbleTextFieldDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-tabs'
+                    selector: 'nimble-text-field'
                 },] }
     ];
-    NimbleTabsDirective.ctorParameters = function () { return [
+    NimbleTextFieldDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
         { type: core.ElementRef }
     ]; };
-    NimbleTabsDirective.propDecorators = {
-        activeid: [{ type: core.HostBinding, args: ['attr.activeid',] }, { type: core.Input }],
-        activeidChange: [{ type: core.Output }],
-        onChange: [{ type: core.HostListener, args: ['change',] }]
+    NimbleTextFieldDirective.propDecorators = {
+        readOnly: [{ type: core.Input }]
     };
 
-    var NimbleTabsModule = /** @class */ (function () {
-        function NimbleTabsModule() {
+    var NimbleTextFieldModule = /** @class */ (function () {
+        function NimbleTextFieldModule() {
         }
-        return NimbleTabsModule;
+        return NimbleTextFieldModule;
     }());
-    NimbleTabsModule.decorators = [
+    NimbleTextFieldModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleTabsDirective],
+                    declarations: [NimbleTextFieldDirective, NimbleTextFieldControlValueAccessorDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleTabsDirective]
+                    exports: [NimbleTextFieldDirective, NimbleTextFieldControlValueAccessorDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the tab element.
+     * Directive for Angular integration for the theme provider
      */
-    var NimbleTabDirective = /** @class */ (function () {
-        function NimbleTabDirective() {
+    var NimbleThemeProviderDirective = /** @class */ (function () {
+        function NimbleThemeProviderDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
         }
-        return NimbleTabDirective;
+        Object.defineProperty(NimbleThemeProviderDirective.prototype, "theme", {
+            get: function () {
+                return this.elementRef.nativeElement.theme;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'theme', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NimbleThemeProviderDirective;
     }());
-    NimbleTabDirective.decorators = [
+    NimbleThemeProviderDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-tab'
+                    selector: 'nimble-theme-provider'
                 },] }
     ];
-    NimbleTabDirective.propDecorators = {
-        disabled: [{ type: core.HostBinding, args: ['attr.disabled',] }, { type: core.Input }]
+    NimbleThemeProviderDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    NimbleThemeProviderDirective.propDecorators = {
+        theme: [{ type: core.Input }]
     };
 
-    var NimbleTabModule = /** @class */ (function () {
-        function NimbleTabModule() {
+    var NimbleThemeProviderModule = /** @class */ (function () {
+        function NimbleThemeProviderModule() {
         }
-        return NimbleTabModule;
+        return NimbleThemeProviderModule;
     }());
-    NimbleTabModule.decorators = [
+    NimbleThemeProviderModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleTabDirective],
+                    declarations: [NimbleThemeProviderDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleTabDirective]
+                    exports: [NimbleThemeProviderDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the tab panel.
+     * Directive to provide Angular integration for the tree item.
      */
-    var NimbleTabPanelDirective = /** @class */ (function () {
-        function NimbleTabPanelDirective() {
+    var NimbleTreeItemDirective = /** @class */ (function () {
+        function NimbleTreeItemDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+            this.expandedChange = new core.EventEmitter();
         }
-        return NimbleTabPanelDirective;
+        Object.defineProperty(NimbleTreeItemDirective.prototype, "disabled", {
+            get: function () {
+                return this.elementRef.nativeElement.disabled;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTreeItemDirective.prototype, "expanded", {
+            get: function () {
+                return this.elementRef.nativeElement.expanded;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'expanded', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTreeItemDirective.prototype, "selected", {
+            get: function () {
+                return this.elementRef.nativeElement.selected;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'selected', toBooleanProperty(value));
+                // Needed because fast-foundation TreeView sets initial selection with an aria-selected query
+                this.renderer.setAttribute(this.elementRef.nativeElement, 'selected', toBooleanAriaAttribute(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NimbleTreeItemDirective.prototype.onExpandedChange = function ($event) {
+            if ($event.target === this.elementRef.nativeElement) {
+                this.expandedChange.emit(this.expanded);
+            }
+        };
+        return NimbleTreeItemDirective;
     }());
-    NimbleTabPanelDirective.decorators = [
+    NimbleTreeItemDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-tab-panel'
+                    selector: 'nimble-tree-item'
                 },] }
     ];
+    NimbleTreeItemDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    NimbleTreeItemDirective.propDecorators = {
+        disabled: [{ type: core.Input }],
+        expanded: [{ type: core.Input }],
+        selected: [{ type: core.Input }],
+        expandedChange: [{ type: core.Output }],
+        onExpandedChange: [{ type: core.HostListener, args: ['expanded-change', ['$event'],] }]
+    };
 
-    var NimbleTabPanelModule = /** @class */ (function () {
-        function NimbleTabPanelModule() {
+    var NimbleTreeItemModule = /** @class */ (function () {
+        function NimbleTreeItemModule() {
         }
-        return NimbleTabPanelModule;
+        return NimbleTreeItemModule;
     }());
-    NimbleTabPanelModule.decorators = [
+    NimbleTreeItemModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleTabPanelDirective],
+                    declarations: [NimbleTreeItemDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleTabPanelDirective]
+                    exports: [NimbleTreeItemDirective]
                 },] }
     ];
 
     /**
-     * Directive to provide Angular integration for the tabs toolbar.
+     * Directive to provide Angular integration for the tree view.
      */
-    var NimbleTabsToolbarDirective = /** @class */ (function () {
-        function NimbleTabsToolbarDirective() {
+    var NimbleTreeViewDirective = /** @class */ (function () {
+        function NimbleTreeViewDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
         }
-        return NimbleTabsToolbarDirective;
+        Object.defineProperty(NimbleTreeViewDirective.prototype, "selectionMode", {
+            get: function () {
+                return this.elementRef.nativeElement.selectionMode;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'selectionMode', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NimbleTreeViewDirective;
     }());
-    NimbleTabsToolbarDirective.decorators = [
+    NimbleTreeViewDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'nimble-tabs-toolbar'
+                    selector: 'nimble-tree-view'
                 },] }
     ];
+    NimbleTreeViewDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    NimbleTreeViewDirective.propDecorators = {
+        selectionMode: [{ type: core.Input }]
+    };
 
-    var NimbleTabsToolbarModule = /** @class */ (function () {
-        function NimbleTabsToolbarModule() {
+    var NimbleTreeViewModule = /** @class */ (function () {
+        function NimbleTreeViewModule() {
         }
-        return NimbleTabsToolbarModule;
+        return NimbleTreeViewModule;
     }());
-    NimbleTabsToolbarModule.decorators = [
+    NimbleTreeViewModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [NimbleTabsToolbarDirective],
+                    declarations: [NimbleTreeViewDirective],
                     imports: [common.CommonModule],
-                    exports: [NimbleTabsToolbarDirective]
+                    exports: [NimbleTreeViewDirective]
                 },] }
     ];
 
@@ -989,28 +1253,28 @@
      * Generated bundle index. Do not edit.
      */
 
-    Object.defineProperty(exports, 'NimbleTheme', {
+    Object.defineProperty(exports, 'DrawerLocation', {
         enumerable: true,
         get: function () {
-            return themes.NimbleTheme;
+            return types.DrawerLocation;
         }
     });
-    Object.defineProperty(exports, 'SelectionMode', {
+    Object.defineProperty(exports, 'DrawerState', {
         enumerable: true,
         get: function () {
-            return types.SelectionMode;
+            return types.DrawerState;
         }
     });
-    Object.defineProperty(exports, 'DrawerLocation', {
+    Object.defineProperty(exports, 'NimbleTheme', {
         enumerable: true,
         get: function () {
-            return types$1.DrawerLocation;
+            return themes.NimbleTheme;
         }
     });
-    Object.defineProperty(exports, 'DrawerState', {
+    Object.defineProperty(exports, 'SelectionMode', {
         enumerable: true,
         get: function () {
-            return types$1.DrawerState;
+            return types$1.SelectionMode;
         }
     });
     exports.NimbleButtonDirective = NimbleButtonDirective;
@@ -1018,8 +1282,6 @@
     exports.NimbleCheckboxControlValueAccessorDirective = NimbleCheckboxControlValueAccessorDirective;
     exports.NimbleCheckboxDirective = NimbleCheckboxDirective;
     exports.NimbleCheckboxModule = NimbleCheckboxModule;
-    exports.NimbleControlValueAccessorModule = NimbleControlValueAccessorModule;
-    exports.NimbleDefaultControlValueAccessorDirective = NimbleDefaultControlValueAccessorDirective;
     exports.NimbleDrawerDirective = NimbleDrawerDirective;
     exports.NimbleDrawerModule = NimbleDrawerModule;
     exports.NimbleListboxOptionDirective = NimbleListboxOptionDirective;
@@ -1028,7 +1290,7 @@
     exports.NimbleMenuItemDirective = NimbleMenuItemDirective;
     exports.NimbleMenuItemModule = NimbleMenuItemModule;
     exports.NimbleMenuModule = NimbleMenuModule;
-    exports.NimbleNumberControlValueAccessorDirective = NimbleNumberControlValueAccessorDirective;
+    exports.NimbleNumberFieldControlValueAccessorDirective = NimbleNumberFieldControlValueAccessorDirective;
     exports.NimbleNumberFieldDirective = NimbleNumberFieldDirective;
     exports.NimbleNumberFieldModule = NimbleNumberFieldModule;
     exports.NimbleSelectControlValueAccessorDirective = NimbleSelectControlValueAccessorDirective;
@@ -1042,6 +1304,7 @@
     exports.NimbleTabsModule = NimbleTabsModule;
     exports.NimbleTabsToolbarDirective = NimbleTabsToolbarDirective;
     exports.NimbleTabsToolbarModule = NimbleTabsToolbarModule;
+    exports.NimbleTextFieldControlValueAccessorDirective = NimbleTextFieldControlValueAccessorDirective;
     exports.NimbleTextFieldDirective = NimbleTextFieldDirective;
     exports.NimbleTextFieldModule = NimbleTextFieldModule;
     exports.NimbleThemeProviderDirective = NimbleThemeProviderDirective;