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

package/fesm2015/ni-nimble-angular.js

@@ -1,172 +1,210 @@
-import { Directive, HostBinding, Input, NgModule, forwardRef, ElementRef, Renderer2, Optional, Host, EventEmitter, Output, HostListener } from '@angular/core';
+import { Directive, Renderer2, ElementRef, Input, NgModule, forwardRef, EventEmitter, Output, HostListener, Optional, Host } from '@angular/core';
 import { CommonModule } from '@angular/common';
-export { NimbleTheme } from '@ni/nimble-components/dist/esm/theme-provider/themes';
-import '@ni/nimble-components/dist/esm/theme-provider';
-import { DefaultValueAccessor, NG_VALUE_ACCESSOR, NumberValueAccessor, SelectControlValueAccessor, NgSelectOption, CheckboxControlValueAccessor } from '@angular/forms';
-import '@ni/nimble-components/dist/esm/text-field';
-import '@ni/nimble-components/dist/esm/number-field';
-import '@ni/nimble-components/dist/esm/select';
-import '@ni/nimble-components/dist/esm/listbox-option';
 import '@ni/nimble-components/dist/esm/button';
-import '@ni/nimble-components/dist/esm/tree-view';
-export { SelectionMode } from '@ni/nimble-components/dist/esm/tree-view/types';
-import '@ni/nimble-components/dist/esm/tree-item';
+import { CheckboxControlValueAccessor, NG_VALUE_ACCESSOR, SelectControlValueAccessor, NgSelectOption, NumberValueAccessor, DefaultValueAccessor } from '@angular/forms';
 import '@ni/nimble-components/dist/esm/checkbox';
 import '@ni/nimble-components/dist/esm/drawer';
-import { DrawerLocation, DrawerState } from '@ni/nimble-components/dist/esm/drawer/types';
+import { DrawerState } from '@ni/nimble-components/dist/esm/drawer/types';
 export { DrawerLocation, DrawerState } from '@ni/nimble-components/dist/esm/drawer/types';
+import '@ni/nimble-components/dist/esm/listbox-option';
 import '@ni/nimble-components/dist/esm/menu';
 import '@ni/nimble-components/dist/esm/menu-item';
-import '@ni/nimble-components/dist/esm/tabs';
+import '@ni/nimble-components/dist/esm/number-field';
+import '@ni/nimble-components/dist/esm/select';
 import '@ni/nimble-components/dist/esm/tab';
 import '@ni/nimble-components/dist/esm/tab-panel';
+import '@ni/nimble-components/dist/esm/tabs';
 import '@ni/nimble-components/dist/esm/tabs-toolbar';
+import '@ni/nimble-components/dist/esm/text-field';
+export { NimbleTheme } from '@ni/nimble-components/dist/esm/theme-provider/themes';
+import '@ni/nimble-components/dist/esm/theme-provider';
+import '@ni/nimble-components/dist/esm/tree-item';
+import '@ni/nimble-components/dist/esm/tree-view';
+export { SelectionMode } from '@ni/nimble-components/dist/esm/tree-view/types';
 
 /**
- * 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
  */
-class NimbleThemeProviderDirective {
+/**
+ * Converts values from templates (empty string or null) or boolean bindings to a boolean property representation
+ */
+const toBooleanProperty = (value) => {
+    if (value === false || value === null) {
+        return false;
+    }
+    // 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")
+ */
+const toBooleanAriaAttribute = (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
+ */
+const toNumberProperty = (value) => {
+    return Number(value);
+};
+
+/**
+ * Directive to provide Angular integration for the button.
+ */
+class NimbleButtonDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    get appearance() {
+        return this.elementRef.nativeElement.appearance;
+    }
+    set appearance(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'appearance', value);
+    }
+    get disabled() {
+        return this.elementRef.nativeElement.disabled;
+    }
+    set disabled(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+    }
 }
-NimbleThemeProviderDirective.decorators = [
+NimbleButtonDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-theme-provider'
+                selector: 'nimble-button'
             },] }
 ];
-NimbleThemeProviderDirective.propDecorators = {
-    theme: [{ type: HostBinding, args: ['attr.theme',] }, { type: Input }]
+NimbleButtonDirective.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+NimbleButtonDirective.propDecorators = {
+    appearance: [{ type: Input }],
+    disabled: [{ type: Input }]
 };
 
-class NimbleThemeProviderModule {
+class NimbleButtonModule {
 }
-NimbleThemeProviderModule.decorators = [
+NimbleButtonModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleThemeProviderDirective],
+                declarations: [NimbleButtonDirective],
                 imports: [CommonModule],
-                exports: [NimbleThemeProviderDirective]
-            },] }
-];
-
-/**
- * Directive to provide Angular integration for the text field
- */
-class NimbleTextFieldDirective {
-}
-NimbleTextFieldDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'nimble-text-field'
+                exports: [NimbleButtonDirective]
             },] }
 ];
-NimbleTextFieldDirective.propDecorators = {
-    readonly: [{ type: HostBinding, args: ['attr.readonly',] }, { type: Input }]
-};
 
 /**
- * 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
  */
-class NimbleDefaultControlValueAccessorDirective extends DefaultValueAccessor {
+class NimbleCheckboxControlValueAccessorDirective extends CheckboxControlValueAccessor {
 }
-NimbleDefaultControlValueAccessorDirective.decorators = [
+NimbleCheckboxControlValueAccessorDirective.decorators = [
     { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => NimbleDefaultControlValueAccessorDirective),
+                        useExisting: forwardRef(() => 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.
  */
-class NimbleNumberControlValueAccessorDirective extends NumberValueAccessor {
+class NimbleCheckboxDirective {
 }
-NimbleNumberControlValueAccessorDirective.decorators = [
+NimbleCheckboxDirective.decorators = [
     { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => NimbleNumberControlValueAccessorDirective),
-                        multi: true
-                    }]
+                selector: 'nimble-checkbox'
             },] }
 ];
 
-class NimbleControlValueAccessorModule {
+class NimbleCheckboxModule {
 }
-NimbleControlValueAccessorModule.decorators = [
+NimbleCheckboxModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleDefaultControlValueAccessorDirective, NimbleNumberControlValueAccessorDirective],
+                declarations: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective],
                 imports: [CommonModule],
-                exports: [NimbleDefaultControlValueAccessorDirective, NimbleNumberControlValueAccessorDirective]
-            },] }
-];
-
-class NimbleTextFieldModule {
-}
-NimbleTextFieldModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [NimbleTextFieldDirective],
-                imports: [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.
  */
-class NimbleNumberFieldDirective {
+class NimbleDrawerDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.stateChange = new EventEmitter();
+    }
+    get location() {
+        return this.elementRef.nativeElement.location;
+    }
+    set location(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'location', value);
+    }
+    get state() {
+        return this.elementRef.nativeElement.state;
+    }
+    set state(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'state', value);
+    }
+    get modal() {
+        return this.elementRef.nativeElement.modal;
+    }
+    set modal(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'modal', toBooleanProperty(value));
+    }
+    show() {
+        this.state = DrawerState.Opening;
+    }
+    hide() {
+        this.state = DrawerState.Closing;
+    }
+    onStateChanged($event) {
+        if ($event.target === this.elementRef.nativeElement) {
+            this.stateChange.emit(this.state);
+        }
+    }
 }
-NimbleNumberFieldDirective.decorators = [
+NimbleDrawerDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-number-field'
+                selector: 'nimble-drawer'
             },] }
 ];
-NimbleNumberFieldDirective.propDecorators = {
-    readonly: [{ type: HostBinding, args: ['attr.readonly',] }, { type: Input }],
-    min: [{ type: HostBinding, args: ['attr.min',] }, { type: Input }],
-    max: [{ type: HostBinding, args: ['attr.max',] }, { type: Input }],
-    step: [{ type: HostBinding, args: ['attr.step',] }, { type: Input }],
-    placeholder: [{ type: HostBinding, args: ['attr.placeholder',] }, { type: Input }]
+NimbleDrawerDirective.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+NimbleDrawerDirective.propDecorators = {
+    location: [{ type: Input }],
+    state: [{ type: Input }],
+    modal: [{ type: Input }],
+    stateChange: [{ type: Output }],
+    onStateChanged: [{ type: HostListener, args: ['state-change', ['$event'],] }]
 };
 
-class NimbleNumberFieldModule {
+class NimbleDrawerModule {
 }
-NimbleNumberFieldModule.decorators = [
+NimbleDrawerModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleNumberFieldDirective],
-                imports: [CommonModule, NimbleControlValueAccessorModule],
-                providers: [],
-                exports: [NimbleNumberFieldDirective, NimbleControlValueAccessorModule]
-            },] }
-];
-
-/**
- * Directive for Nimble select control Angular integration
- */
-class NimbleSelectDirective {
-}
-NimbleSelectDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'nimble-select',
+                declarations: [NimbleDrawerDirective],
+                imports: [CommonModule],
+                exports: [NimbleDrawerDirective]
             },] }
 ];
 
@@ -194,22 +232,20 @@ NimbleSelectControlValueAccessorDirective.decorators = [
             },] }
 ];
 
-class NimbleSelectModule {
-}
-NimbleSelectModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective],
-                imports: [CommonModule],
-                exports: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective]
-            },] }
-];
-
 /**
  * Directive to provide Angular integration for the listbox option.
  */
 class NimbleListboxOptionDirective extends NgSelectOption {
-    constructor(element, renderer, select) {
-        super(element, renderer, select);
+    constructor(elementRef, renderer, select) {
+        super(elementRef, renderer, select);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    get disabled() {
+        return this.elementRef.nativeElement.disabled;
+    }
+    set disabled(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
     }
 }
 NimbleListboxOptionDirective.decorators = [
@@ -223,7 +259,7 @@ NimbleListboxOptionDirective.ctorParameters = () => [
     { type: NimbleSelectControlValueAccessorDirective, decorators: [{ type: Optional }, { type: Host }] }
 ];
 NimbleListboxOptionDirective.propDecorators = {
-    disabled: [{ type: HostBinding, args: ['attr.disabled',] }, { type: Input }]
+    disabled: [{ type: Input }]
 };
 
 class NimbleListboxOptionModule {
@@ -237,335 +273,499 @@ NimbleListboxOptionModule.decorators = [
 ];
 
 /**
- * Directive to provide Angular integration for the button.
+ * Directive to provide Angular integration for the menu.
  */
-class NimbleButtonDirective {
+class NimbleMenuDirective {
 }
-NimbleButtonDirective.decorators = [
+NimbleMenuDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-button'
+                selector: 'nimble-menu'
             },] }
 ];
-NimbleButtonDirective.propDecorators = {
-    disabled: [{ type: HostBinding, args: ['disabled',] }, { type: Input }],
-    appearance: [{ type: HostBinding, args: ['appearance',] }, { type: Input }]
-};
 
-class NimbleButtonModule {
+class NimbleMenuModule {
 }
-NimbleButtonModule.decorators = [
+NimbleMenuModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleButtonDirective],
+                declarations: [NimbleMenuDirective],
                 imports: [CommonModule],
-                exports: [NimbleButtonDirective]
+                exports: [NimbleMenuDirective]
             },] }
 ];
 
 /**
- * Directive to provide Angular integration for the tree view.
+ * Directive to provide Angular integration for the menu.
  */
-class NimbleTreeViewDirective {
+class NimbleMenuItemDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    get disabled() {
+        return this.elementRef.nativeElement.disabled;
+    }
+    set disabled(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+    }
 }
-NimbleTreeViewDirective.decorators = [
+NimbleMenuItemDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-tree-view'
+                selector: 'nimble-menu-item'
             },] }
 ];
-NimbleTreeViewDirective.propDecorators = {
-    selectionMode: [{ type: HostBinding, args: ['attr.selection-mode',] }, { type: Input }]
+NimbleMenuItemDirective.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+NimbleMenuItemDirective.propDecorators = {
+    disabled: [{ type: Input }]
 };
 
-class NimbleTreeViewModule {
+class NimbleMenuItemModule {
 }
-NimbleTreeViewModule.decorators = [
+NimbleMenuItemModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleTreeViewDirective],
+                declarations: [NimbleMenuItemDirective],
                 imports: [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
  */
-class NimbleTreeItemDirective {
-    constructor(treeItemReference) {
-        this.treeItemReference = treeItemReference;
-        this.expandedChange = new EventEmitter();
-    }
-    onExpandedChange($event) {
-        const treeItemElement = this.treeItemReference.nativeElement;
-        if ($event.target === treeItemElement) {
-            this.expanded = treeItemElement.expanded;
-            this.expandedChange.emit(treeItemElement.expanded);
-        }
-    }
+class NimbleNumberFieldControlValueAccessorDirective extends NumberValueAccessor {
 }
-NimbleTreeItemDirective.decorators = [
+NimbleNumberFieldControlValueAccessorDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-tree-item'
-            },] }
-];
-NimbleTreeItemDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-NimbleTreeItemDirective.propDecorators = {
-    disabled: [{ type: HostBinding, args: ['disabled',] }, { type: Input }],
-    expanded: [{ type: HostBinding, args: ['expanded',] }, { type: Input }],
-    selected: [{ type: HostBinding, args: ['selected',] }, { type: HostBinding, args: ['attr.aria-selected', // Needed because fast-foundation TreeView sets initial selection with an aria-selected query
-            ] }, { type: Input }],
-    expandedChange: [{ type: Output }],
-    onExpandedChange: [{ type: HostListener, args: ['expanded-change', ['$event'],] }]
-};
-
-class NimbleTreeItemModule {
-}
-NimbleTreeItemModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [NimbleTreeItemDirective],
-                imports: [CommonModule],
-                exports: [NimbleTreeItemDirective]
+                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: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => NimbleNumberFieldControlValueAccessorDirective),
+                        multi: true
+                    }]
             },] }
 ];
 
 /**
- * Directive to provide Angular integration for the checkbox.
+ * Directive to provide Angular integration for the number field.
  */
-class NimbleCheckboxDirective {
+class NimbleNumberFieldDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    get readOnly() {
+        return this.elementRef.nativeElement.readOnly;
+    }
+    set readOnly(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'readOnly', toBooleanProperty(value));
+    }
+    get min() {
+        return this.elementRef.nativeElement.min;
+    }
+    set min(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'min', toNumberProperty(value));
+    }
+    get max() {
+        return this.elementRef.nativeElement.max;
+    }
+    set max(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'max', toNumberProperty(value));
+    }
+    get step() {
+        return this.elementRef.nativeElement.step;
+    }
+    set step(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'step', toNumberProperty(value));
+    }
+    get placeholder() {
+        return this.elementRef.nativeElement.placeholder;
+    }
+    set placeholder(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'placeholder', value);
+    }
 }
-NimbleCheckboxDirective.decorators = [
+NimbleNumberFieldDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-checkbox'
+                selector: 'nimble-number-field'
+            },] }
+];
+NimbleNumberFieldDirective.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+NimbleNumberFieldDirective.propDecorators = {
+    readOnly: [{ type: Input }],
+    min: [{ type: Input }],
+    max: [{ type: Input }],
+    step: [{ type: Input }],
+    placeholder: [{ type: Input }]
+};
+
+class NimbleNumberFieldModule {
+}
+NimbleNumberFieldModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [NimbleNumberFieldDirective, NimbleNumberFieldControlValueAccessorDirective],
+                imports: [CommonModule],
+                exports: [NimbleNumberFieldDirective, NimbleNumberFieldControlValueAccessorDirective]
             },] }
 ];
 
 /**
- * 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 for Nimble select control Angular integration
  */
-class NimbleCheckboxControlValueAccessorDirective extends CheckboxControlValueAccessor {
+class NimbleSelectDirective {
 }
-NimbleCheckboxControlValueAccessorDirective.decorators = [
+NimbleSelectDirective.decorators = [
     { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => NimbleCheckboxControlValueAccessorDirective),
-                        multi: true
-                    }]
+                selector: 'nimble-select',
             },] }
 ];
 
-class NimbleCheckboxModule {
+class NimbleSelectModule {
 }
-NimbleCheckboxModule.decorators = [
+NimbleSelectModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective],
+                declarations: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective],
                 imports: [CommonModule],
-                exports: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective]
+                exports: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective]
             },] }
 ];
 
 /**
- * Directive to provide Angular integration for the drawer.
+ * Directive to provide Angular integration for the tab element.
  */
-class NimbleDrawerDirective {
-    constructor(drawerReference) {
-        this.drawerReference = drawerReference;
-        this.location = DrawerLocation.Left;
-        this.state = DrawerState.Closed;
-        this.modal = true;
-        this.stateChange = new EventEmitter();
-    }
-    show() {
-        this.state = DrawerState.Opening;
+class NimbleTabDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
     }
-    hide() {
-        this.state = DrawerState.Closing;
+    get disabled() {
+        return this.elementRef.nativeElement.disabled;
     }
-    onStateChanged($event) {
-        const drawer = this.drawerReference.nativeElement;
-        if ($event.target === drawer) {
-            this.state = drawer.state;
-            this.stateChange.emit(this.state);
-        }
+    set disabled(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
     }
 }
-NimbleDrawerDirective.decorators = [
+NimbleTabDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-drawer'
+                selector: 'nimble-tab'
             },] }
 ];
-NimbleDrawerDirective.ctorParameters = () => [
+NimbleTabDirective.ctorParameters = () => [
+    { type: Renderer2 },
     { type: ElementRef }
 ];
-NimbleDrawerDirective.propDecorators = {
-    location: [{ type: HostBinding, args: ['location',] }, { type: Input }],
-    state: [{ type: HostBinding, args: ['state',] }, { type: Input }],
-    modal: [{ type: HostBinding, args: ['modal',] }, { type: Input }],
-    stateChange: [{ type: Output }],
-    onStateChanged: [{ type: HostListener, args: ['state-change', ['$event'],] }]
+NimbleTabDirective.propDecorators = {
+    disabled: [{ type: Input }]
 };
 
-class NimbleDrawerModule {
+class NimbleTabModule {
 }
-NimbleDrawerModule.decorators = [
+NimbleTabModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleDrawerDirective],
+                declarations: [NimbleTabDirective],
                 imports: [CommonModule],
-                exports: [NimbleDrawerDirective]
+                exports: [NimbleTabDirective]
             },] }
 ];
 
 /**
- * Directive to provide Angular integration for the menu.
+ * Directive to provide Angular integration for the tab panel.
  */
-class NimbleMenuDirective {
+class NimbleTabPanelDirective {
 }
-NimbleMenuDirective.decorators = [
+NimbleTabPanelDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-menu'
+                selector: 'nimble-tab-panel'
             },] }
 ];
 
-class NimbleMenuModule {
+class NimbleTabPanelModule {
 }
-NimbleMenuModule.decorators = [
+NimbleTabPanelModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleMenuDirective],
+                declarations: [NimbleTabPanelDirective],
                 imports: [CommonModule],
-                exports: [NimbleMenuDirective]
+                exports: [NimbleTabPanelDirective]
             },] }
 ];
 
 /**
- * Directive to provide Angular integration for the menu.
+ * Directive to provide Angular integration for the tabs element.
  */
-class NimbleMenuItemDirective {
+class NimbleTabsDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.activeidChange = new EventEmitter();
+    }
+    get activeid() {
+        return this.elementRef.nativeElement.activeid;
+    }
+    set activeid(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'activeid', value);
+    }
+    onChange($event) {
+        if ($event.target === this.elementRef.nativeElement) {
+            this.activeidChange.emit(this.activeid);
+        }
+    }
 }
-NimbleMenuItemDirective.decorators = [
+NimbleTabsDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-menu-item'
+                selector: 'nimble-tabs'
             },] }
 ];
-NimbleMenuItemDirective.propDecorators = {
-    disabled: [{ type: HostBinding, args: ['disabled',] }, { type: Input }]
+NimbleTabsDirective.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+NimbleTabsDirective.propDecorators = {
+    activeid: [{ type: Input }],
+    activeidChange: [{ type: Output }],
+    onChange: [{ type: HostListener, args: ['change', ['$event'],] }]
 };
 
-class NimbleMenuItemModule {
+class NimbleTabsModule {
 }
-NimbleMenuItemModule.decorators = [
+NimbleTabsModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleMenuItemDirective],
+                declarations: [NimbleTabsDirective],
                 imports: [CommonModule],
-                exports: [NimbleMenuItemDirective]
+                exports: [NimbleTabsDirective]
             },] }
 ];
 
 /**
- * Directive to provide Angular integration for the tabs element.
+ * Directive to provide Angular integration for the tabs toolbar.
  */
-class NimbleTabsDirective {
-    constructor(tabs) {
-        this.tabs = tabs;
-        this.activeidChange = new EventEmitter();
+class NimbleTabsToolbarDirective {
+}
+NimbleTabsToolbarDirective.decorators = [
+    { type: Directive, args: [{
+                selector: 'nimble-tabs-toolbar'
+            },] }
+];
+
+class NimbleTabsToolbarModule {
+}
+NimbleTabsToolbarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [NimbleTabsToolbarDirective],
+                imports: [CommonModule],
+                exports: [NimbleTabsToolbarDirective]
+            },] }
+];
+
+/**
+ * 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
+ */
+class NimbleTextFieldControlValueAccessorDirective extends DefaultValueAccessor {
+}
+NimbleTextFieldControlValueAccessorDirective.decorators = [
+    { type: 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: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => NimbleTextFieldControlValueAccessorDirective),
+                        multi: true
+                    }]
+            },] }
+];
+
+/**
+ * Directive to provide Angular integration for the text field
+ */
+class NimbleTextFieldDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    get readOnly() {
+        return this.elementRef.nativeElement.readOnly;
     }
-    onChange() {
-        this.activeidChange.emit(this.tabs.nativeElement.activeid);
+    set readOnly(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'readOnly', toBooleanProperty(value));
     }
 }
-NimbleTabsDirective.decorators = [
+NimbleTextFieldDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-tabs'
+                selector: 'nimble-text-field'
             },] }
 ];
-NimbleTabsDirective.ctorParameters = () => [
+NimbleTextFieldDirective.ctorParameters = () => [
+    { type: Renderer2 },
     { type: ElementRef }
 ];
-NimbleTabsDirective.propDecorators = {
-    activeid: [{ type: HostBinding, args: ['attr.activeid',] }, { type: Input }],
-    activeidChange: [{ type: Output }],
-    onChange: [{ type: HostListener, args: ['change',] }]
+NimbleTextFieldDirective.propDecorators = {
+    readOnly: [{ type: Input }]
 };
 
-class NimbleTabsModule {
+class NimbleTextFieldModule {
 }
-NimbleTabsModule.decorators = [
+NimbleTextFieldModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleTabsDirective],
+                declarations: [NimbleTextFieldDirective, NimbleTextFieldControlValueAccessorDirective],
                 imports: [CommonModule],
-                exports: [NimbleTabsDirective]
+                exports: [NimbleTextFieldDirective, NimbleTextFieldControlValueAccessorDirective]
             },] }
 ];
 
 /**
- * Directive to provide Angular integration for the tab element.
+ * Directive for Angular integration for the theme provider
  */
-class NimbleTabDirective {
+class NimbleThemeProviderDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    get theme() {
+        return this.elementRef.nativeElement.theme;
+    }
+    set theme(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'theme', value);
+    }
 }
-NimbleTabDirective.decorators = [
+NimbleThemeProviderDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-tab'
+                selector: 'nimble-theme-provider'
             },] }
 ];
-NimbleTabDirective.propDecorators = {
-    disabled: [{ type: HostBinding, args: ['attr.disabled',] }, { type: Input }]
+NimbleThemeProviderDirective.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+NimbleThemeProviderDirective.propDecorators = {
+    theme: [{ type: Input }]
 };
 
-class NimbleTabModule {
+class NimbleThemeProviderModule {
 }
-NimbleTabModule.decorators = [
+NimbleThemeProviderModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleTabDirective],
+                declarations: [NimbleThemeProviderDirective],
                 imports: [CommonModule],
-                exports: [NimbleTabDirective]
+                exports: [NimbleThemeProviderDirective]
             },] }
 ];
 
 /**
- * Directive to provide Angular integration for the tab panel.
+ * Directive to provide Angular integration for the tree item.
  */
-class NimbleTabPanelDirective {
+class NimbleTreeItemDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.expandedChange = new EventEmitter();
+    }
+    get disabled() {
+        return this.elementRef.nativeElement.disabled;
+    }
+    set disabled(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+    }
+    get expanded() {
+        return this.elementRef.nativeElement.expanded;
+    }
+    set expanded(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'expanded', toBooleanProperty(value));
+    }
+    get selected() {
+        return this.elementRef.nativeElement.selected;
+    }
+    set selected(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));
+    }
+    onExpandedChange($event) {
+        if ($event.target === this.elementRef.nativeElement) {
+            this.expandedChange.emit(this.expanded);
+        }
+    }
 }
-NimbleTabPanelDirective.decorators = [
+NimbleTreeItemDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-tab-panel'
+                selector: 'nimble-tree-item'
             },] }
 ];
+NimbleTreeItemDirective.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+NimbleTreeItemDirective.propDecorators = {
+    disabled: [{ type: Input }],
+    expanded: [{ type: Input }],
+    selected: [{ type: Input }],
+    expandedChange: [{ type: Output }],
+    onExpandedChange: [{ type: HostListener, args: ['expanded-change', ['$event'],] }]
+};
 
-class NimbleTabPanelModule {
+class NimbleTreeItemModule {
 }
-NimbleTabPanelModule.decorators = [
+NimbleTreeItemModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleTabPanelDirective],
+                declarations: [NimbleTreeItemDirective],
                 imports: [CommonModule],
-                exports: [NimbleTabPanelDirective]
+                exports: [NimbleTreeItemDirective]
             },] }
 ];
 
 /**
- * Directive to provide Angular integration for the tabs toolbar.
+ * Directive to provide Angular integration for the tree view.
  */
-class NimbleTabsToolbarDirective {
+class NimbleTreeViewDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    get selectionMode() {
+        return this.elementRef.nativeElement.selectionMode;
+    }
+    set selectionMode(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'selectionMode', value);
+    }
 }
-NimbleTabsToolbarDirective.decorators = [
+NimbleTreeViewDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'nimble-tabs-toolbar'
+                selector: 'nimble-tree-view'
             },] }
 ];
+NimbleTreeViewDirective.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+NimbleTreeViewDirective.propDecorators = {
+    selectionMode: [{ type: Input }]
+};
 
-class NimbleTabsToolbarModule {
+class NimbleTreeViewModule {
 }
-NimbleTabsToolbarModule.decorators = [
+NimbleTreeViewModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [NimbleTabsToolbarDirective],
+                declarations: [NimbleTreeViewDirective],
                 imports: [CommonModule],
-                exports: [NimbleTabsToolbarDirective]
+                exports: [NimbleTreeViewDirective]
             },] }
 ];
 
@@ -577,5 +777,5 @@ NimbleTabsToolbarModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { NimbleButtonDirective, NimbleButtonModule, NimbleCheckboxControlValueAccessorDirective, NimbleCheckboxDirective, NimbleCheckboxModule, NimbleControlValueAccessorModule, NimbleDefaultControlValueAccessorDirective, NimbleDrawerDirective, NimbleDrawerModule, NimbleListboxOptionDirective, NimbleListboxOptionModule, NimbleMenuDirective, NimbleMenuItemDirective, NimbleMenuItemModule, NimbleMenuModule, NimbleNumberControlValueAccessorDirective, NimbleNumberFieldDirective, NimbleNumberFieldModule, NimbleSelectControlValueAccessorDirective, NimbleSelectDirective, NimbleSelectModule, NimbleTabDirective, NimbleTabModule, NimbleTabPanelDirective, NimbleTabPanelModule, NimbleTabsDirective, NimbleTabsModule, NimbleTabsToolbarDirective, NimbleTabsToolbarModule, NimbleTextFieldDirective, NimbleTextFieldModule, NimbleThemeProviderDirective, NimbleThemeProviderModule, NimbleTreeItemDirective, NimbleTreeItemModule, NimbleTreeViewDirective, NimbleTreeViewModule };
+export { NimbleButtonDirective, NimbleButtonModule, NimbleCheckboxControlValueAccessorDirective, NimbleCheckboxDirective, NimbleCheckboxModule, NimbleDrawerDirective, NimbleDrawerModule, NimbleListboxOptionDirective, NimbleListboxOptionModule, NimbleMenuDirective, NimbleMenuItemDirective, NimbleMenuItemModule, NimbleMenuModule, NimbleNumberFieldControlValueAccessorDirective, NimbleNumberFieldDirective, NimbleNumberFieldModule, NimbleSelectControlValueAccessorDirective, NimbleSelectDirective, NimbleSelectModule, NimbleTabDirective, NimbleTabModule, NimbleTabPanelDirective, NimbleTabPanelModule, NimbleTabsDirective, NimbleTabsModule, NimbleTabsToolbarDirective, NimbleTabsToolbarModule, NimbleTextFieldControlValueAccessorDirective, NimbleTextFieldDirective, NimbleTextFieldModule, NimbleThemeProviderDirective, NimbleThemeProviderModule, NimbleTreeItemDirective, NimbleTreeItemModule, NimbleTreeViewDirective, NimbleTreeViewModule };
 //# sourceMappingURL=ni-nimble-angular.js.map