@ni/nimble-angular 2.1.2 → 2.2.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@ni/nimble-components/dist/esm/breadcrumb'), require('@angular/router'), require('@ni/nimble-components/dist/esm/breadcrumb-item'), require('@ni/nimble-components/dist/esm/button/types'), 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/toggle-button'), 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', '@angular/common', '@ni/nimble-components/dist/esm/breadcrumb', '@angular/router', '@ni/nimble-components/dist/esm/breadcrumb-item', '@ni/nimble-components/dist/esm/button/types', '@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/toggle-button', '@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.ng.common, null, global.ng.router, null, global.types, 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, null, global.types$4, null, global.asyncHelpers));
-})(this, (function (exports, core, common, breadcrumb, router, breadcrumbItem, types, button, forms, checkbox, types$1, drawer, listboxOption, menu, menuItem, numberField, select, tab, tabPanel, tabs, tabsToolbar, types$2, textField, types$3, themeProvider, toggleButton, treeItem, types$4, treeView, asyncHelpers) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@ni/nimble-components/dist/esm/breadcrumb'), require('@angular/router'), require('@ni/nimble-components/dist/esm/breadcrumb-item'), require('@ni/nimble-components/dist/esm/button/types'), 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-area'), 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/toggle-button'), 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', '@angular/common', '@ni/nimble-components/dist/esm/breadcrumb', '@angular/router', '@ni/nimble-components/dist/esm/breadcrumb-item', '@ni/nimble-components/dist/esm/button/types', '@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-area', '@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/toggle-button', '@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.ng.common, null, global.ng.router, null, global.types, null, global.ng.forms, null, global.types$1, null, null, null, null, null, null, null, null, null, null, null, global.types$2, null, global.types$3, null, null, null, global.types$4, null, global.asyncHelpers));
+})(this, (function (exports, core, common, breadcrumb, router, breadcrumbItem, types, button, forms, checkbox, types$1, drawer, listboxOption, menu, menuItem, numberField, select, tab, tabPanel, tabs, tabsToolbar, textArea, types$2, textField, types$3, themeProvider, toggleButton, treeItem, types$4, treeView, asyncHelpers) { 'use strict';
 
     /**
      * Directive to provide Angular integration for the breadcrumb.
@@ -1217,6 +1217,222 @@
                 },] }
     ];
 
+    /**
+     * Extension of Angular's DefaultValueAccessor to target the text-based inputs.
+     *
+     * Directive decorator based on DefaultValueAccessor decorator
+     * https://github.com/angular/angular/blob/235bffc5f9a0faf00b9aeb4ef5f15c696ad4b522/packages/forms/src/directives/default_value_accessor.ts#L72
+     */
+    var NimbleTextAreaControlValueAccessorDirective = /** @class */ (function (_super) {
+        __extends(NimbleTextAreaControlValueAccessorDirective, _super);
+        function NimbleTextAreaControlValueAccessorDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return NimbleTextAreaControlValueAccessorDirective;
+    }(forms.DefaultValueAccessor));
+    NimbleTextAreaControlValueAccessorDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: 'nimble-text-area[formControlName],nimble-text-area[formControl],nimble-text-area[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 NimbleTextAreaControlValueAccessorDirective; }),
+                            multi: true
+                        }]
+                },] }
+    ];
+
+    /**
+     * Directive to provide Angular integration for the text area
+     */
+    var NimbleTextAreaDirective = /** @class */ (function () {
+        function NimbleTextAreaDirective(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+        }
+        Object.defineProperty(NimbleTextAreaDirective.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(NimbleTextAreaDirective.prototype, "readOnly", {
+            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-area/text-area.ts#L22
+            // 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(NimbleTextAreaDirective.prototype, "resize", {
+            get: function () {
+                return this.elementRef.nativeElement.resize;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'resize', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTextAreaDirective.prototype, "autofocus", {
+            get: function () {
+                return this.elementRef.nativeElement.autofocus;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'autofocus', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTextAreaDirective.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(NimbleTextAreaDirective.prototype, "required", {
+            get: function () {
+                return this.elementRef.nativeElement.required;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'required', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTextAreaDirective.prototype, "formId", {
+            get: function () {
+                return this.elementRef.nativeElement.formId;
+            },
+            // formId property maps to the form attribute
+            // See: https://github.com/microsoft/fast/blob/46bb6d9aab2c37105f4434db3795e176c2354a4f/packages/web-components/fast-foundation/src/text-area/text-area.ts#L63
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'formId', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTextAreaDirective.prototype, "maxlength", {
+            get: function () {
+                return this.elementRef.nativeElement.maxlength;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'maxlength', toNumberProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTextAreaDirective.prototype, "minlength", {
+            get: function () {
+                return this.elementRef.nativeElement.minlength;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'minlength', toNumberProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTextAreaDirective.prototype, "placeholder", {
+            get: function () {
+                return this.elementRef.nativeElement.placeholder;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'placeholder', value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTextAreaDirective.prototype, "cols", {
+            get: function () {
+                return this.elementRef.nativeElement.cols;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'cols', toNumberProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTextAreaDirective.prototype, "rows", {
+            get: function () {
+                return this.elementRef.nativeElement.rows;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'rows', toNumberProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NimbleTextAreaDirective.prototype, "spellcheck", {
+            get: function () {
+                return this.elementRef.nativeElement.spellcheck;
+            },
+            set: function (value) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'spellcheck', toBooleanProperty(value));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NimbleTextAreaDirective;
+    }());
+    NimbleTextAreaDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: 'nimble-text-area'
+                },] }
+    ];
+    NimbleTextAreaDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    NimbleTextAreaDirective.propDecorators = {
+        appearance: [{ type: core.Input }],
+        readOnly: [{ type: core.Input, args: ['readonly',] }],
+        resize: [{ type: core.Input }],
+        autofocus: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        required: [{ type: core.Input }],
+        formId: [{ type: core.Input, args: ['form',] }],
+        maxlength: [{ type: core.Input }],
+        minlength: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        cols: [{ type: core.Input }],
+        rows: [{ type: core.Input }],
+        spellcheck: [{ type: core.Input }]
+    };
+
+    var NimbleTextAreaModule = /** @class */ (function () {
+        function NimbleTextAreaModule() {
+        }
+        return NimbleTextAreaModule;
+    }());
+    NimbleTextAreaModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [NimbleTextAreaDirective, NimbleTextAreaControlValueAccessorDirective],
+                    imports: [common.CommonModule],
+                    exports: [NimbleTextAreaDirective, NimbleTextAreaControlValueAccessorDirective]
+                },] }
+    ];
+
     /**
      * Extension of Angular's DefaultValueAccessor to target the text-based inputs.
      *
@@ -1667,6 +1883,9 @@
     exports.NimbleTabsModule = NimbleTabsModule;
     exports.NimbleTabsToolbarDirective = NimbleTabsToolbarDirective;
     exports.NimbleTabsToolbarModule = NimbleTabsToolbarModule;
+    exports.NimbleTextAreaControlValueAccessorDirective = NimbleTextAreaControlValueAccessorDirective;
+    exports.NimbleTextAreaDirective = NimbleTextAreaDirective;
+    exports.NimbleTextAreaModule = NimbleTextAreaModule;
     exports.NimbleTextFieldControlValueAccessorDirective = NimbleTextFieldControlValueAccessorDirective;
     exports.NimbleTextFieldDirective = NimbleTextFieldDirective;
     exports.NimbleTextFieldModule = NimbleTextFieldModule;