@ni/nimble-angular 12.1.1 → 12.1.2

package/fesm2015/ni-nimble-angular.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, forwardRef, HostListener, Inject, Optional, Host, EventEmitter, Output } from '@angular/core';
+import { Directive, Input, NgModule, forwardRef, HostListener, Inject, Optional, Host, EventEmitter, Output, Injectable } from '@angular/core';
 export { BreadcrumbAppearance } from '@ni/nimble-components/dist/esm/breadcrumb/types';
 import { CommonModule } from '@angular/common';
 import '@ni/nimble-components/dist/esm/breadcrumb';
@@ -8,8 +8,7 @@ import '@ni/nimble-components/dist/esm/breadcrumb-item';
 export { ButtonAppearanceVariant } from '@ni/nimble-components/dist/esm/button/types';
 import '@ni/nimble-components/dist/esm/button';
 import '@ni/nimble-components/dist/esm/card-button';
-import * as i1 from '@angular/forms';
-import { CheckboxControlValueAccessor, NG_VALUE_ACCESSOR, SelectControlValueAccessor, NgSelectOption, NumberValueAccessor, RadioControlValueAccessor, DefaultValueAccessor } from '@angular/forms';
+import { CheckboxControlValueAccessor, NG_VALUE_ACCESSOR, SelectControlValueAccessor, NgSelectOption, NumberValueAccessor, NgControl, DefaultValueAccessor } from '@angular/forms';
 import '@ni/nimble-components/dist/esm/checkbox';
 export { ComboboxAutocomplete } from '@ni/nimble-components/dist/esm/combobox/types';
 import '@ni/nimble-components/dist/esm/combobox';
@@ -5860,12 +5859,402 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 }]
         }] });
 
+/**
+ * [Nimble]
+ * Copied from https://github.com/angular/angular/blob/14.2.6/packages/forms/src/directives/control_value_accessor.ts
+ * with the following modifications:
+ * - Commented out ControlValueAccessor which is exported from @angular/forms
+ * - Commented out NG_VALUE_ACCESSOR which is exported from @angular/forms
+ */
+/**
+ * @description
+ * Defines an interface that acts as a bridge between the Angular forms API and a
+ * native element in the DOM.
+ *
+ * Implement this interface to create a custom form control directive
+ * that integrates with Angular forms.
+ *
+ * @see DefaultValueAccessor
+ *
+ * @publicApi
+ */
+/* [Nimble] Commenting out public interface
+export interface ControlValueAccessor {
+  /**
+   * @description
+   * Writes a new value to the element.
+   *
+   * This method is called by the forms API to write to the view when programmatic
+   * changes from model to view are requested.
+   *
+   * @usageNotes
+   * ### Write a value to the element
+   *
+   * The following example writes a value to the native DOM element.
+   *
+   * ```ts
+   * writeValue(value: any): void {
+   *   this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
+   * }
+   * ```
+   *
+   * @param obj The new value for the element
+   *
+  writeValue(obj: any): void;
+
+  /**
+   * @description
+   * Registers a callback function that is called when the control's value
+   * changes in the UI.
+   *
+   * This method is called by the forms API on initialization to update the form
+   * model when values propagate from the view to the model.
+   *
+   * When implementing the `registerOnChange` method in your own value accessor,
+   * save the given function so your class calls it at the appropriate time.
+   *
+   * @usageNotes
+   * ### Store the change function
+   *
+   * The following example stores the provided function as an internal method.
+   *
+   * ```ts
+   * registerOnChange(fn: (_: any) => void): void {
+   *   this._onChange = fn;
+   * }
+   * ```
+   *
+   * When the value changes in the UI, call the registered
+   * function to allow the forms API to update itself:
+   *
+   * ```ts
+   * host: {
+   *    '(change)': '_onChange($event.target.value)'
+   * }
+   * ```
+   *
+   * @param fn The callback function to register
+   *
+  registerOnChange(fn: any): void;
+
+  /**
+   * @description
+   * Registers a callback function that is called by the forms API on initialization
+   * to update the form model on blur.
+   *
+   * When implementing `registerOnTouched` in your own value accessor, save the given
+   * function so your class calls it when the control should be considered
+   * blurred or "touched".
+   *
+   * @usageNotes
+   * ### Store the callback function
+   *
+   * The following example stores the provided function as an internal method.
+   *
+   * ```ts
+   * registerOnTouched(fn: any): void {
+   *   this._onTouched = fn;
+   * }
+   * ```
+   *
+   * On blur (or equivalent), your class should call the registered function to allow
+   * the forms API to update itself:
+   *
+   * ```ts
+   * host: {
+   *    '(blur)': '_onTouched()'
+   * }
+   * ```
+   *
+   * @param fn The callback function to register
+   *
+  registerOnTouched(fn: any): void;
+
+  /**
+   * @description
+   * Function that is called by the forms API when the control status changes to
+   * or from 'DISABLED'. Depending on the status, it enables or disables the
+   * appropriate DOM element.
+   *
+   * @usageNotes
+   * The following is an example of writing the disabled property to a native DOM element:
+   *
+   * ```ts
+   * setDisabledState(isDisabled: boolean): void {
+   *   this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+   * }
+   * ```
+   *
+   * @param isDisabled The disabled status to set on the element
+   *
+  setDisabledState?(isDisabled: boolean): void;
+}
+*/
+/**
+ * Base class for all ControlValueAccessor classes defined in Forms package.
+ * Contains common logic and utility functions.
+ *
+ * Note: this is an *internal-only* class and should not be extended or used directly in
+ * applications code.
+ */
+class BaseControlValueAccessor {
+    constructor(_renderer, _elementRef) {
+        this._renderer = _renderer;
+        this._elementRef = _elementRef;
+        /**
+         * The registered callback function called when a change or input event occurs on the input
+         * element.
+         * @nodoc
+         */
+        this.onChange = (_) => { };
+        /**
+         * The registered callback function called when a blur event occurs on the input element.
+         * @nodoc
+         */
+        this.onTouched = () => { };
+    }
+    /**
+     * Helper method that sets a property on a target element using the current Renderer
+     * implementation.
+     * @nodoc
+     */
+    setProperty(key, value) {
+        this._renderer.setProperty(this._elementRef.nativeElement, key, value);
+    }
+    /**
+     * Registers a function called when the control is touched.
+     * @nodoc
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Registers a function called when the control value changes.
+     * @nodoc
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Sets the "disabled" property on the range input element.
+     * @nodoc
+     */
+    setDisabledState(isDisabled) {
+        this.setProperty('disabled', isDisabled);
+    }
+}
+BaseControlValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: BaseControlValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseControlValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: BaseControlValueAccessor, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: BaseControlValueAccessor, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
+/**
+ * Base class for all built-in ControlValueAccessor classes (except DefaultValueAccessor, which is
+ * used in case no other CVAs can be found). We use this class to distinguish between default CVA,
+ * built-in CVAs and custom CVAs, so that Forms logic can recognize built-in CVAs and treat custom
+ * ones with higher priority (when both built-in and custom CVAs are present).
+ *
+ * Note: this is an *internal-only* class and should not be extended or used directly in
+ * applications code.
+ */
+class BuiltInControlValueAccessor extends BaseControlValueAccessor {
+}
+BuiltInControlValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: BuiltInControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+BuiltInControlValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: BuiltInControlValueAccessor, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: BuiltInControlValueAccessor, decorators: [{
+            type: Directive
+        }] });
+
+/**
+ * [Nimble]
+ * Copied from https://github.com/angular/angular/blob/14.2.6/packages/forms/src/directives/radio_control_value_accessor.ts
+ * with the following modifications:
+ * - Changed throwNameError() to throw Error instead of RuntimeError. This makes the file compile with Angular version 12.
+ * - Removed now-unused import for RuntimeErrorCode and RuntimeError
+ * - Updated import of ControlValueAccessor, NgControl, and NG_VALUE_ACCESSOR to pull from package export
+ */
+const RADIO_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => RadioControlValueAccessor),
+    multi: true
+};
+function throwNameError() {
+    /* [Nimble] RuntimeErrorCode is not exported from @angular/forms in version 12; falling back to version 12 behavior
+    throw new RuntimeError(RuntimeErrorCode.NAME_AND_FORM_CONTROL_NAME_MUST_MATCH, `
+    */
+    throw new Error(`
+      If you define both a name and a formControlName attribute on your radio button, their values
+      must match. Ex: <input type="radio" formControlName="food" name="food">
+    `);
+}
+/**
+ * Internal-only NgModule that works as a host for the `RadioControlRegistry` tree-shakable
+ * provider. Note: the `InternalFormsSharedModule` can not be used here directly, since it's
+ * declared *after* the `RadioControlRegistry` class and the `providedIn` doesn't support
+ * `forwardRef` logic.
+ */
+class RadioControlRegistryModule {
+}
+RadioControlRegistryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: RadioControlRegistryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RadioControlRegistryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: RadioControlRegistryModule });
+RadioControlRegistryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: RadioControlRegistryModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: RadioControlRegistryModule, decorators: [{
+            type: NgModule
+        }] });
+/**
+ * @description
+ * Class used by Angular to track radio buttons. For internal use only.
+ */
+class RadioControlRegistry {
+    constructor() {
+        this._accessors = [];
+    }
+    /**
+     * @description
+     * Adds a control to the internal registry. For internal use only.
+     */
+    add(control, accessor) {
+        this._accessors.push([control, accessor]);
+    }
+    /**
+     * @description
+     * Removes a control from the internal registry. For internal use only.
+     */
+    remove(accessor) {
+        for (let i = this._accessors.length - 1; i >= 0; --i) {
+            if (this._accessors[i][1] === accessor) {
+                this._accessors.splice(i, 1);
+                return;
+            }
+        }
+    }
+    /**
+     * @description
+     * Selects a radio button. For internal use only.
+     */
+    select(accessor) {
+        this._accessors.forEach((c) => {
+            if (this._isSameGroup(c, accessor) && c[1] !== accessor) {
+                c[1].fireUncheck(accessor.value);
+            }
+        });
+    }
+    _isSameGroup(controlPair, accessor) {
+        if (!controlPair[0].control)
+            return false;
+        // @ts-expect-error: [Nimble] Use of internal NgControl member _parent
+        return controlPair[0]._parent === accessor._control._parent &&
+            controlPair[1].name === accessor.name;
+    }
+}
+RadioControlRegistry.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: RadioControlRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RadioControlRegistry.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: RadioControlRegistry, providedIn: RadioControlRegistryModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: RadioControlRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: RadioControlRegistryModule }]
+        }] });
+/**
+ * @description
+ * The `ControlValueAccessor` for writing radio control values and listening to radio control
+ * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
+ * `NgModel` directives.
+ *
+ * @usageNotes
+ *
+ * ### Using radio buttons with reactive form directives
+ *
+ * The follow example shows how to use radio buttons in a reactive form. When using radio buttons in
+ * a reactive form, radio buttons in the same group should have the same `formControlName`.
+ * Providing a `name` attribute is optional.
+ *
+ * {@example forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts region='Reactive'}
+ *
+ * @ngModule ReactiveFormsModule
+ * @ngModule FormsModule
+ * @publicApi
+ */
+class RadioControlValueAccessor extends BuiltInControlValueAccessor {
+    constructor(renderer, elementRef, _registry, _injector) {
+        super(renderer, elementRef);
+        this._registry = _registry;
+        this._injector = _injector;
+        /**
+         * The registered callback function called when a change event occurs on the input element.
+         * Note: we declare `onChange` here (also used as host listener) as a function with no arguments
+         * to override the `onChange` function (which expects 1 argument) in the parent
+         * `BaseControlValueAccessor` class.
+         * @nodoc
+         */
+        this.onChange = () => { };
+    }
+    /** @nodoc */
+    ngOnInit() {
+        this._control = this._injector.get(NgControl);
+        this._checkName();
+        this._registry.add(this._control, this);
+    }
+    /** @nodoc */
+    ngOnDestroy() {
+        this._registry.remove(this);
+    }
+    /**
+     * Sets the "checked" property value on the radio input element.
+     * @nodoc
+     */
+    writeValue(value) {
+        this._state = value === this.value;
+        this.setProperty('checked', this._state);
+    }
+    /**
+     * Registers a function called when the control value changes.
+     * @nodoc
+     */
+    registerOnChange(fn) {
+        this._fn = fn;
+        this.onChange = () => {
+            fn(this.value);
+            this._registry.select(this);
+        };
+    }
+    /**
+     * Sets the "value" on the radio input element and unchecks it.
+     *
+     * @param value
+     */
+    fireUncheck(value) {
+        this.writeValue(value);
+    }
+    _checkName() {
+        if (this.name && this.formControlName && this.name !== this.formControlName &&
+            // @ts-expect-error: [Nimble] ngDevMode is not defined
+            (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throwNameError();
+        }
+        if (!this.name && this.formControlName)
+            this.name = this.formControlName;
+    }
+}
+RadioControlValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: RadioControlValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: RadioControlRegistry }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+RadioControlValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: { name: "name", formControlName: "formControlName", value: "value" }, host: { listeners: { "change": "onChange()", "blur": "onTouched()" } }, providers: [RADIO_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: RadioControlValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]',
+                    host: { '(change)': 'onChange()', '(blur)': 'onTouched()' },
+                    providers: [RADIO_VALUE_ACCESSOR]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: RadioControlRegistry }, { type: i0.Injector }]; }, propDecorators: { name: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
 /**
  * Control Value Accessor implementation for the radio group.
  */
 class NimbleRadioControlValueAccessorDirective extends RadioControlValueAccessor {
-    // Type ɵangular_packages_forms_forms_r from base class isn't in camelcase
-    // eslint-disable-next-line camelcase
     constructor(renderer, elementRef, _registry, _injector) {
         super(renderer, elementRef, _registry, _injector);
         this.elementRef = elementRef;
@@ -5876,6 +6265,7 @@ class NimbleRadioControlValueAccessorDirective extends RadioControlValueAccessor
         return id;
     }
     ngOnInit() {
+        super.ngOnInit();
         // We need each button element to have a unique string value, because the FAST radio group looks at
         // these values when trying to manage the checked state.
         this.elementRef.nativeElement.value = NimbleRadioControlValueAccessorDirective.allocateId();
@@ -5919,7 +6309,7 @@ class NimbleRadioControlValueAccessorDirective extends RadioControlValueAccessor
     }
 }
 NimbleRadioControlValueAccessorDirective._nextOpenId = 0;
-NimbleRadioControlValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleRadioControlValueAccessorDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.ɵangular_packages_forms_forms_r }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+NimbleRadioControlValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleRadioControlValueAccessorDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: RadioControlRegistry }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
 NimbleRadioControlValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleRadioControlValueAccessorDirective, selector: "nimble-radio[formControlName],nimble-radio[formControl],nimble-radio[ngModel]", host: { listeners: { "change": "nimbleOnChange($event.target.checked)", "blur": "onTouched()" } }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => NimbleRadioControlValueAccessorDirective),
@@ -5938,7 +6328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                             multi: true
                         }]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.ɵangular_packages_forms_forms_r }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: RadioControlRegistry }, { type: i0.Injector }]; } });
 
 /**
  * Directive to provide Angular integration for the radio button.
@@ -5969,13 +6359,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
 class NimbleRadioModule {
 }
 NimbleRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NimbleRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleRadioModule, declarations: [NimbleRadioControlValueAccessorDirective, NimbleRadioDirective], imports: [CommonModule], exports: [NimbleRadioControlValueAccessorDirective, NimbleRadioDirective] });
-NimbleRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleRadioModule, imports: [[CommonModule]] });
+NimbleRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleRadioModule, declarations: [NimbleRadioControlValueAccessorDirective, NimbleRadioDirective], imports: [CommonModule, RadioControlRegistryModule], exports: [NimbleRadioControlValueAccessorDirective, NimbleRadioDirective] });
+NimbleRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleRadioModule, imports: [[CommonModule, RadioControlRegistryModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NimbleRadioControlValueAccessorDirective, NimbleRadioDirective],
-                    imports: [CommonModule],
+                    imports: [CommonModule, RadioControlRegistryModule],
                     exports: [NimbleRadioControlValueAccessorDirective, NimbleRadioDirective]
                 }]
         }] });