@ni/nimble-angular 1.0.0-beta.131 → 1.0.0-beta.132

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() {

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')) :
+    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'], 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));
+}(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) { '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 () {
@@ -1253,28 +1288,40 @@
      * 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, 'SelectionMode', {
+    Object.defineProperty(exports, 'TreeViewSelectionMode', {
         enumerable: true,
         get: function () {
-            return types$1.SelectionMode;
+            return types$4.TreeViewSelectionMode;
         }
     });
     exports.NimbleButtonDirective = NimbleButtonDirective;