@ni/nimble-angular 1.0.0-beta.130 → 1.0.0-beta.134

package/README.md

@@ -27,15 +27,14 @@ NI-styled UI components for Angular applications
         ```
    2. Add the component to your `app.component.html` (or to the template for another component in your application):
         ```html
-        <nimble-drawer #drawerReference [location]="location">This is a drawer</nimble-drawer>
+        <nimble-drawer #drawerReference location="right">This is a drawer</nimble-drawer>
         ```
    3. If needed, import the Nimble component's directive and types in `app.component.ts` (or the TypeScript file backing another component) to use its programmatic API: 
         ```ts
-        import { DrawerLocation, NimbleDrawerDirective } from '@ni/nimble-angular';
+        import { NimbleDrawerDirective } from '@ni/nimble-angular';
 
         @Component({ /* ... */ })
         class AppComponent {
-            @Input() public location: DrawerLocation = DrawerLocation.Right;
             @ViewChild('drawerReference', { read: NimbleDrawerDirective }) public drawer: NimbleDrawerDirective;
 
             public openDrawer() {
@@ -52,6 +51,12 @@ See the [README.md for the ni/nimble repository](/README.md) for documentation o
 
 For best results, always use `ngModel`, `formControl`, or `formControlName` bindings when integrating Nimble form controls in Angular. Binding to the control's native value property or event (e.g. `[value]` or `(change)`) is not supported, and can cause build failures and other issues. If a value change event is necessary, use `ngModel (ngModelChange)="onChange()"`.
 
+### Testing with Nimble elements and `fakeAsync`
+
+Angular's `fakeAsync` utility is useful for writing quickly-executing tests, but it can cause issues when testing components containing Nimble elements. Nimble uses an internal process queue to schedule work. If a `fakeAsync` test schedules work on the queue (by creating or interacting with Nimble elements) and the queue isn't processed by the end of the test, the queue will never be processed and subsequent tests may fail.
+
+To avoid this, call `processUpdates()` after each `fakeAsync` test. This will synchronously process the internal queue and put it in a good state for subsequent tests. The `processUpdates()` method can also be called mid-test to synchronously complete operations which would otherwise require waiting for an animation frame.
+
 ## Known Issues
 
 Currently the fast-animation library we depend on only exports CommonJS modules, which triggers an Angular project build warning (and potentially suboptimal bundle optimizations).

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

@@ -1,12 +1,11 @@
 (function (global, factory) {
-    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';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ni/nimble-components/dist/esm/button/types'), 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/types'), require('@ni/nimble-components/dist/esm/text-field'), require('@ni/nimble-components/dist/esm/theme-provider/types'), 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'), require('@ni/nimble-components/dist/esm/testing/async-helpers')) :
+    typeof define === 'function' && define.amd ? define('@ni/nimble-angular', ['exports', '@angular/core', '@ni/nimble-components/dist/esm/button/types', '@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/types', '@ni/nimble-components/dist/esm/text-field', '@ni/nimble-components/dist/esm/theme-provider/types', '@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', '@ni/nimble-components/dist/esm/testing/async-helpers'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ni = global.ni || {}, global.ni['nimble-angular'] = {}), global.ng.core, global.types, global.ng.common, null, global.ng.forms, null, global.types$1, null, null, null, null, null, null, null, null, null, null, global.types$2, null, global.types$3, null, null, global.types$4, null, global.asyncHelpers));
+}(this, (function (exports, core, types, common, button, forms, checkbox, types$1, drawer, listboxOption, menu, menuItem, numberField, select, tab, tabPanel, tabs, tabsToolbar, types$2, textField, types$3, themeProvider, treeItem, types$4, treeView, asyncHelpers) { 'use strict';
 
     /**
-     * Conversion helpers for values coming from Angular templates via
-     * strings specified in templates or via property bindings
+     * Conversion helpers for values coming from template attributes or property bindings
      */
     /**
      * Converts values from templates (empty string or null) or boolean bindings to a boolean property representation
@@ -33,6 +32,12 @@
      * Converts values from templates (number representation as a string) or number bindings to a number property representation
      */
     var toNumberProperty = function (value) {
+        // Angular: https://github.com/angular/angular/blob/2664bc2b3ef4ee5fd671f915828cfcc274a36c77/packages/forms/src/directives/number_value_accessor.ts#L67
+        // And Fast: https://github.com/microsoft/fast/blob/46bb6d9aab2c37105f4434db3795e176c2354a4f/packages/web-components/fast-element/src/components/attributes.ts#L100
+        // Handle numeric conversions from the view differently
+        // Since Number(val) https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-number-constructor-number-value
+        // and val * 1 https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-applystringornumericbinaryoperator
+        // Are identical (use ToNumeric algorithm), went with Number() for clarity
         return Number(value);
     };
 
@@ -64,6 +69,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(NimbleButtonDirective.prototype, "type", {
+            get: function () {
+                return this.elementRef.nativeElement.type;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'type', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         return NimbleButtonDirective;
     }());
     NimbleButtonDirective.decorators = [
@@ -77,7 +92,8 @@
     ]; };
     NimbleButtonDirective.propDecorators = {
         appearance: [{ type: core.Input }],
-        disabled: [{ type: core.Input }]
+        disabled: [{ type: core.Input }],
+        type: [{ type: core.Input }]
     };
 
     var NimbleButtonModule = /** @class */ (function () {
@@ -505,10 +521,10 @@
             configurable: true
         });
         NimbleDrawerDirective.prototype.show = function () {
-            this.state = types.DrawerState.Opening;
+            this.state = types$1.DrawerState.Opening;
         };
         NimbleDrawerDirective.prototype.hide = function () {
-            this.state = types.DrawerState.Closing;
+            this.state = types$1.DrawerState.Closing;
         };
         NimbleDrawerDirective.prototype.onStateChanged = function ($event) {
             if ($event.target === this.elementRef.nativeElement) {
@@ -607,7 +623,7 @@
     NimbleListboxOptionDirective.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: core.Renderer2 },
-        { type: NimbleSelectControlValueAccessorDirective, decorators: [{ type: core.Optional }, { type: core.Host }] }
+        { type: NimbleSelectControlValueAccessorDirective, decorators: [{ type: core.Inject, args: [NimbleSelectControlValueAccessorDirective,] }, { type: core.Optional }, { type: core.Host }] }
     ]; };
     NimbleListboxOptionDirective.propDecorators = {
         disabled: [{ type: core.Input }]
@@ -738,6 +754,9 @@
             get: function () {
                 return this.elementRef.nativeElement.readOnly;
             },
+            // readOnly property maps to the readonly attribute
+            // https://github.com/microsoft/fast/blob/46bb6d9aab2c37105f4434db3795e176c2354a4f/packages/web-components/fast-foundation/src/number-field/number-field.ts#L38
+            // eslint-disable-next-line @angular-eslint/no-input-rename
             set: function (value) {
                 this.renderer.setProperty(this.elementRef.nativeElement, 'readOnly', toBooleanProperty(value));
             },
@@ -796,7 +815,7 @@
         { type: core.ElementRef }
     ]; };
     NimbleNumberFieldDirective.propDecorators = {
-        readOnly: [{ type: core.Input }],
+        readOnly: [{ type: core.Input, args: ['readonly',] }],
         min: [{ type: core.Input }],
         max: [{ type: core.Input }],
         step: [{ type: core.Input }],
@@ -1041,12 +1060,25 @@
             get: function () {
                 return this.elementRef.nativeElement.readOnly;
             },
+            // readOnly property maps to the readonly attribute
+            // See: https://github.com/microsoft/fast/blob/46bb6d9aab2c37105f4434db3795e176c2354a4f/packages/web-components/fast-foundation/src/text-field/text-field.ts#L33
+            // eslint-disable-next-line @angular-eslint/no-input-rename
             set: function (value) {
                 this.renderer.setProperty(this.elementRef.nativeElement, 'readOnly', toBooleanProperty(value));
             },
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(NimbleTextFieldDirective.prototype, "type", {
+            get: function () {
+                return this.elementRef.nativeElement.type;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'type', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         return NimbleTextFieldDirective;
     }());
     NimbleTextFieldDirective.decorators = [
@@ -1059,7 +1091,8 @@
         { type: core.ElementRef }
     ]; };
     NimbleTextFieldDirective.propDecorators = {
-        readOnly: [{ type: core.Input }]
+        readOnly: [{ type: core.Input, args: ['readonly',] }],
+        type: [{ type: core.Input }]
     };
 
     var NimbleTextFieldModule = /** @class */ (function () {
@@ -1211,6 +1244,8 @@
             get: function () {
                 return this.elementRef.nativeElement.selectionMode;
             },
+            // selectionMode property intentionally maps to the selection-mode attribute
+            // eslint-disable-next-line @angular-eslint/no-input-rename
             set: function (value) {
                 this.renderer.setProperty(this.elementRef.nativeElement, 'selectionMode', value);
             },
@@ -1229,7 +1264,7 @@
         { type: core.ElementRef }
     ]; };
     NimbleTreeViewDirective.propDecorators = {
-        selectionMode: [{ type: core.Input }]
+        selectionMode: [{ type: core.Input, args: ['selection-mode',] }]
     };
 
     var NimbleTreeViewModule = /** @class */ (function () {
@@ -1245,6 +1280,16 @@
                 },] }
     ];
 
+    /**
+     * Immediately processes all updates in queue.
+     *
+     * Useful for synchronously testing Nimble elements. Call this in fakeAsync tests to
+     * immediately resolve tasks which otherwise would require waiting for an animation
+     * frame. This should also be called after every fakeAsync test to clear the internal
+     * process queue and allow subsequent tests to run normally.
+     */
+    var waitForUpdatesAsync = asyncHelpers.waitForUpdatesAsync;
+
     /*
      * Public API Surface of nimble-angular
      */
@@ -1253,28 +1298,46 @@
      * Generated bundle index. Do not edit.
      */
 
+    Object.defineProperty(exports, 'ButtonAppearance', {
+        enumerable: true,
+        get: function () {
+            return types.ButtonAppearance;
+        }
+    });
     Object.defineProperty(exports, 'DrawerLocation', {
         enumerable: true,
         get: function () {
-            return types.DrawerLocation;
+            return types$1.DrawerLocation;
         }
     });
     Object.defineProperty(exports, 'DrawerState', {
         enumerable: true,
         get: function () {
-            return types.DrawerState;
+            return types$1.DrawerState;
+        }
+    });
+    Object.defineProperty(exports, 'TextFieldType', {
+        enumerable: true,
+        get: function () {
+            return types$2.TextFieldType;
         }
     });
     Object.defineProperty(exports, 'NimbleTheme', {
         enumerable: true,
         get: function () {
-            return themes.NimbleTheme;
+            return types$3.NimbleTheme;
+        }
+    });
+    Object.defineProperty(exports, 'TreeViewSelectionMode', {
+        enumerable: true,
+        get: function () {
+            return types$4.TreeViewSelectionMode;
         }
     });
-    Object.defineProperty(exports, 'SelectionMode', {
+    Object.defineProperty(exports, 'processUpdates', {
         enumerable: true,
         get: function () {
-            return types$1.SelectionMode;
+            return asyncHelpers.processUpdates;
         }
     });
     exports.NimbleButtonDirective = NimbleButtonDirective;
@@ -1313,6 +1376,7 @@
     exports.NimbleTreeItemModule = NimbleTreeItemModule;
     exports.NimbleTreeViewDirective = NimbleTreeViewDirective;
     exports.NimbleTreeViewModule = NimbleTreeViewModule;
+    exports.waitForUpdatesAsync = waitForUpdatesAsync;
 
     Object.defineProperty(exports, '__esModule', { value: true });