@ni/nimble-angular 33.4.8 → 33.4.10

package/fesm2022/ni-nimble-angular.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { signal, inject, ɵINTERNAL_APPLICATION_ERROR_HANDLER as _INTERNAL_APPLICATION_ERROR_HANDLER, booleanAttribute, HostListener, Input, HostBinding, Attribute, Inject, Directive, NgModule, EventEmitter, Output, forwardRef, Optional, Host, ApplicationRef, DestroyRef, ChangeDetectorRef, isDevMode, afterNextRender, Injectable } from '@angular/core';
-import * as i2 from '@angular/common';
-import { LocationStrategy, CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
+import { Input, Directive, NgModule, Inject, EventEmitter, HostListener, Output, forwardRef, Optional, Host, inject, ApplicationRef, DestroyRef, ChangeDetectorRef, isDevMode, afterNextRender, Injectable } from '@angular/core';
 import * as i1 from '@angular/router';
-import { UrlTree, ROUTER_CONFIGURATION, NavigationEnd, Router, ActivatedRoute } from '@angular/router';
+import { RouterLink, Router, ActivatedRoute } from '@angular/router';
 export { anchorTag } from '@ni/nimble-components/dist/esm/anchor';
 export { AnchorAppearance } from '@ni/nimble-components/dist/esm/anchor/types';
 import { toBooleanProperty, toNumberProperty, toBooleanAriaAttribute } from '@ni/nimble-angular/internal-utilities';
+import * as i2 from '@angular/common';
+import { CommonModule, LocationStrategy } from '@angular/common';
 export { anchorButtonTag } from '@ni/nimble-components/dist/esm/anchor-button';
 export { anchorMenuItemTag } from '@ni/nimble-components/dist/esm/anchor-menu-item';
 export { anchorTabTag } from '@ni/nimble-components/dist/esm/anchor-tab';
@@ -302,437 +301,6 @@ export { SpinnerAppearance } from '@ni/nimble-components/dist/esm/spinner/types'
 export { DropdownAppearance } from '@ni/nimble-components/dist/esm/patterns/dropdown/types';
 export { IconSeverity } from '@ni/nimble-components/dist/esm/icon-base/types';
 
-/**
- * [Nimble]
- * Copied from https://github.com/angular/angular/blob/20.3.15/packages/router/src/directives/router_link.ts
- * with the following modifications:
- * - Copy `isUrlTree` function from url_tree.ts into this file instead of importing
- * - Hardcode `isAnchorElement` to `true` so that the directive will correctly set the `href` on elements within nimble that represent anchors
- * - Make `href` a `@HostBindinding` to avoid using Angular's private sanitization APIs because `href` bindings automatically are sanitized by
- *   Angular (see https://angular.dev/best-practices/security#sanitization-and-security-contexts). Implementations leveraging RouterLink should have a test
- *   ensuring sanitization is called.
- * - Comment out uneccessary export of the deprecated `RouterLinkWithHref`
- */
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-// [Nimble] Copied from https://github.com/angular/angular/blob/18.2.13/packages/router/src/url_tree.ts
-function isUrlTree(v) {
-    return v instanceof UrlTree;
-}
-/**
- * @description
- *
- * When applied to an element in a template, makes that element a link
- * that initiates navigation to a route. Navigation opens one or more routed components
- * in one or more `<router-outlet>` locations on the page.
- *
- * Given a route configuration `[{ path: 'user/:name', component: UserCmp }]`,
- * the following creates a static link to the route:
- * `<a routerLink="/user/bob">link to user component</a>`
- *
- * You can use dynamic values to generate the link.
- * For a dynamic link, pass an array of path segments,
- * followed by the params for each segment.
- * For example, `['/team', teamId, 'user', userName, {details: true}]`
- * generates a link to `/team/11/user/bob;details=true`.
- *
- * Multiple static segments can be merged into one term and combined with dynamic segments.
- * For example, `['/team/11/user', userName, {details: true}]`
- *
- * The input that you provide to the link is treated as a delta to the current URL.
- * For instance, suppose the current URL is `/user/(box//aux:team)`.
- * The link `<a [routerLink]="['/user/jim']">Jim</a>` creates the URL
- * `/user/(jim//aux:team)`.
- * See {@link Router#createUrlTree} for more information.
- *
- * @usageNotes
- *
- * You can use absolute or relative paths in a link, set query parameters,
- * control how parameters are handled, and keep a history of navigation states.
- *
- * ### Relative link paths
- *
- * The first segment name can be prepended with `/`, `./`, or `../`.
- * * If the first segment begins with `/`, the router looks up the route from the root of the
- *   app.
- * * If the first segment begins with `./`, or doesn't begin with a slash, the router
- *   looks in the children of the current activated route.
- * * If the first segment begins with `../`, the router goes up one level in the route tree.
- *
- * ### Setting and handling query params and fragments
- *
- * The following link adds a query parameter and a fragment to the generated URL:
- *
- * ```html
- * <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
- *   link to user component
- * </a>
- * ```
- * By default, the directive constructs the new URL using the given query parameters.
- * The example generates the link: `/user/bob?debug=true#education`.
- *
- * You can instruct the directive to handle query parameters differently
- * by specifying the `queryParamsHandling` option in the link.
- * Allowed values are:
- *
- *  - `'merge'`: Merge the given `queryParams` into the current query params.
- *  - `'preserve'`: Preserve the current query params.
- *
- * For example:
- *
- * ```html
- * <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
- *   link to user component
- * </a>
- * ```
- *
- * `queryParams`, `fragment`, `queryParamsHandling`, `preserveFragment`, and `relativeTo`
- * cannot be used when the `routerLink` input is a `UrlTree`.
- *
- * See {@link UrlCreationOptions#queryParamsHandling}.
- *
- * ### Preserving navigation history
- *
- * You can provide a `state` value to be persisted to the browser's
- * [`History.state` property](https://developer.mozilla.org/en-US/docs/Web/API/History#Properties).
- * For example:
- *
- * ```html
- * <a [routerLink]="['/user/bob']" [state]="{tracingId: 123}">
- *   link to user component
- * </a>
- * ```
- *
- * Use {@link Router#getCurrentNavigation} to retrieve a saved
- * navigation-state value. For example, to capture the `tracingId` during the `NavigationStart`
- * event:
- *
- * ```ts
- * // Get NavigationStart events
- * router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {
- *   const navigation = router.getCurrentNavigation();
- *   tracingService.trace({id: navigation.extras.state.tracingId});
- * });
- * ```
- *
- * ### RouterLink compatible custom elements
- *
- * In order to make a custom element work with routerLink, the corresponding custom
- * element must implement the `href` attribute and must list `href` in the array of
- * the static property/getter `observedAttributes`.
- *
- * @ngModule RouterModule
- *
- * @publicApi
- */
-/* [Nimble] Remove all configuration from @Directive decorator
-@Directive({
-  selector: '[routerLink]',
-  host: {
-    '[attr.href]': 'reactiveHref()',
-  },
-})
-*/
-class RouterLink {
-    constructor(router, route, tabIndexAttribute, renderer, el, 
-    // [Nimble] Need Inject decorator
-    locationStrategy) {
-        this.router = router;
-        this.route = route;
-        this.tabIndexAttribute = tabIndexAttribute;
-        this.renderer = renderer;
-        this.el = el;
-        this.locationStrategy = locationStrategy;
-        /** @nodoc */
-        this.reactiveHref = signal(null, ...(ngDevMode ? [{ debugName: "reactiveHref" }] : []));
-        /**
-         * Represents an `href` attribute value applied to a host element,
-         * when a host element is an `<a>`/`<area>` tag or a compatible custom element.
-         * For other tags, the value is `null`.
-         */
-        // [Nimble] Make `href` a `@HostBinding`
-        this.href = null;
-        /** @internal */
-        this.onChanges = new Subject();
-        this.applicationErrorHandler = inject(_INTERNAL_APPLICATION_ERROR_HANDLER);
-        this.options = inject(ROUTER_CONFIGURATION, { optional: true });
-        /**
-         * Passed to {@link Router#createUrlTree} as part of the
-         * `UrlCreationOptions`.
-         * @see {@link UrlCreationOptions#preserveFragment}
-         * @see {@link Router#createUrlTree}
-         */
-        this.preserveFragment = false;
-        /**
-         * Passed to {@link Router#navigateByUrl} as part of the
-         * `NavigationBehaviorOptions`.
-         * @see {@link NavigationBehaviorOptions#skipLocationChange}
-         * @see {@link Router#navigateByUrl}
-         */
-        this.skipLocationChange = false;
-        /**
-         * Passed to {@link Router#navigateByUrl} as part of the
-         * `NavigationBehaviorOptions`.
-         * @see {@link NavigationBehaviorOptions#replaceUrl}
-         * @see {@link Router#navigateByUrl}
-         */
-        this.replaceUrl = false;
-        this.routerLinkInput = null;
-        // [Nimble] No need to initialize reactiveHref
-        // // Set the initial href value to whatever exists on the host element already
-        // this.reactiveHref.set(inject(new HostAttributeToken('href'), {optional: true}));
-        // [Nimble] Hard-coding `isAnchorElement` to `true`
-        this.isAnchorElement = true;
-        // const tagName = el.nativeElement.tagName?.toLowerCase();
-        // this.isAnchorElement =
-        //   tagName === 'a' ||
-        //   tagName === 'area' ||
-        //   !!(
-        //     // Avoid breaking in an SSR context where customElements might not be defined.
-        //     (
-        //       typeof customElements === 'object' &&
-        //       // observedAttributes is an optional static property/getter on a custom element.
-        //       // The spec states that this must be an array of strings.
-        //       (
-        //         customElements.get(tagName) as {observedAttributes?: string[]} | undefined
-        //       )?.observedAttributes?.includes?.('href')
-        //     )
-        //   );
-        /* [Nimble] There was a bug here in version 20.3.15 which was fixed in 21.0.9. I have backported the fix.
-           See: https://github.com/angular/angular/commit/41cd4a6af800cf7807c46862c99ae036457d8fa7
-        if (!this.isAnchorElement) {
-          this.subscribeToNavigationEventsIfNecessary();
-        } else {
-          this.setTabIndexIfNotOnNativeEl('0');
-        }
-        if (this.isAnchorElement) {
-          this.setTabIndexIfNotOnNativeEl('0');
-          this.subscribeToNavigationEventsIfNecessary();
-        }
-        */
-    }
-    subscribeToNavigationEventsIfNecessary() {
-        if (this.subscription !== undefined || !this.isAnchorElement) {
-            return;
-        }
-        /* [Nimble] Also part of backport
-        // preserving fragment in router state
-        let createSubcription = this.preserveFragment;
-        // preserving or merging with query params in router state
-        const dependsOnRouterState = (handling?: QueryParamsHandling | null) =>
-          handling === 'merge' || handling === 'preserve';
-        createSubcription ||= dependsOnRouterState(this.queryParamsHandling);
-        createSubcription ||=
-          !this.queryParamsHandling && !dependsOnRouterState(this.options?.defaultQueryParamsHandling);
-        if (!createSubcription) {
-          return;
-        }
-        */
-        this.subscription = this.router.events.subscribe((s) => {
-            if (s instanceof NavigationEnd) {
-                this.updateHref();
-            }
-        });
-    }
-    /**
-     * Modifies the tab index if there was not a tabindex attribute on the element during
-     * instantiation.
-     */
-    setTabIndexIfNotOnNativeEl(newTabIndex) {
-        if (this.tabIndexAttribute != null /* both `null` and `undefined` */ || this.isAnchorElement) {
-            return;
-        }
-        this.applyAttributeValue('tabindex', newTabIndex);
-    }
-    /** @docs-private */
-    // TODO(atscott): Remove changes parameter in major version as a breaking change.
-    ngOnChanges(changes) {
-        /* [Nimble] Comment out extra error handling that uses ngDevMode and RuntimeErrorCode
-        if (
-          ngDevMode &&
-          isUrlTree(this.routerLinkInput) &&
-          (this.fragment !== undefined ||
-            this.queryParams ||
-            this.queryParamsHandling ||
-            this.preserveFragment ||
-            this.relativeTo)
-        ) {
-          throw new RuntimeError(
-            RuntimeErrorCode.INVALID_ROUTER_LINK_INPUTS,
-            'Cannot configure queryParams or fragment when using a UrlTree as the routerLink input value.',
-          );
-        }
-        */
-        if (this.isAnchorElement) {
-            this.updateHref();
-            this.subscribeToNavigationEventsIfNecessary();
-        }
-        // This is subscribed to by `RouterLinkActive` so that it knows to update when there are changes
-        // to the RouterLinks it's tracking.
-        this.onChanges.next(this);
-    }
-    /**
-     * Commands to pass to {@link Router#createUrlTree} or a `UrlTree`.
-     *   - **array**: commands to pass to {@link Router#createUrlTree}.
-     *   - **string**: shorthand for array of commands with just the string, i.e. `['/route']`
-     *   - **UrlTree**: a `UrlTree` for this link rather than creating one from the commands
-     *     and other inputs that correspond to properties of `UrlCreationOptions`.
-     *   - **null|undefined**: effectively disables the `routerLink`
-     * @see {@link Router#createUrlTree}
-     */
-    set routerLink(commandsOrUrlTree) {
-        if (commandsOrUrlTree == null) {
-            this.routerLinkInput = null;
-            this.setTabIndexIfNotOnNativeEl(null);
-        }
-        else {
-            if (isUrlTree(commandsOrUrlTree)) {
-                this.routerLinkInput = commandsOrUrlTree;
-            }
-            else {
-                this.routerLinkInput = Array.isArray(commandsOrUrlTree)
-                    ? commandsOrUrlTree
-                    : [commandsOrUrlTree];
-            }
-            this.setTabIndexIfNotOnNativeEl('0');
-        }
-    }
-    /** @docs-private */
-    onClick(button, ctrlKey, shiftKey, altKey, metaKey) {
-        const urlTree = this.urlTree;
-        if (urlTree === null) {
-            return true;
-        }
-        if (this.isAnchorElement) {
-            if (button !== 0 || ctrlKey || shiftKey || altKey || metaKey) {
-                return true;
-            }
-            if (typeof this.target === 'string' && this.target != '_self') {
-                return true;
-            }
-        }
-        const extras = {
-            skipLocationChange: this.skipLocationChange,
-            replaceUrl: this.replaceUrl,
-            state: this.state,
-            info: this.info,
-        };
-        // navigateByUrl is mocked frequently in tests... Reduce breakages when adding `catch`
-        this.router.navigateByUrl(urlTree, extras)?.catch((e) => {
-            this.applicationErrorHandler(e);
-        });
-        // Return `false` for `<a>` elements to prevent default action
-        // and cancel the native behavior, since the navigation is handled
-        // by the Router.
-        return !this.isAnchorElement;
-    }
-    /** @docs-private */
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
-    }
-    updateHref() {
-        const urlTree = this.urlTree;
-        // [Nimble] Set `href` directly instead of using `reactiveHref` since we made `href` a `@HostBinding`
-        this.href =
-            // this.reactiveHref.set(
-            urlTree !== null && this.locationStrategy
-                ? (this.locationStrategy?.prepareExternalUrl(this.router.serializeUrl(urlTree)) ?? '')
-                : null;
-        //);
-    }
-    applyAttributeValue(attrName, attrValue) {
-        const renderer = this.renderer;
-        const nativeElement = this.el.nativeElement;
-        if (attrValue !== null) {
-            renderer.setAttribute(nativeElement, attrName, attrValue);
-        }
-        else {
-            renderer.removeAttribute(nativeElement, attrName);
-        }
-    }
-    get urlTree() {
-        if (this.routerLinkInput === null) {
-            return null;
-        }
-        else if (isUrlTree(this.routerLinkInput)) {
-            return this.routerLinkInput;
-        }
-        // [Nimble] Add type assertion to allow passing `readonly any[]` to `createUrlTree` which expects `any[]`
-        return this.router.createUrlTree(this.routerLinkInput, {
-            // If the `relativeTo` input is not defined, we want to use `this.route` by default.
-            // Otherwise, we should use the value provided by the user in the input.
-            relativeTo: this.relativeTo !== undefined ? this.relativeTo : this.route,
-            queryParams: this.queryParams,
-            fragment: this.fragment,
-            queryParamsHandling: this.queryParamsHandling,
-            preserveFragment: this.preserveFragment,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RouterLink, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: 'tabindex', attribute: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: LocationStrategy }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.27", type: RouterLink, isStandalone: true, inputs: { target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", state: "state", info: "info", relativeTo: "relativeTo", preserveFragment: ["preserveFragment", "preserveFragment", booleanAttribute], skipLocationChange: ["skipLocationChange", "skipLocationChange", booleanAttribute], replaceUrl: ["replaceUrl", "replaceUrl", booleanAttribute], routerLink: "routerLink" }, host: { listeners: { "click": "onClick($event.button,$event.ctrlKey,$event.shiftKey,$event.altKey,$event.metaKey)" }, properties: { "attr.href": "this.href", "attr.target": "this.target" } }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RouterLink, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['tabindex']
-                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.LocationStrategy, decorators: [{
-                    type: Inject,
-                    args: [LocationStrategy]
-                }] }], propDecorators: { href: [{
-                type: HostBinding,
-                args: ['attr.href']
-            }], target: [{
-                type: HostBinding,
-                args: ['attr.target']
-            }, {
-                type: Input
-            }], queryParams: [{
-                type: Input
-            }], fragment: [{
-                type: Input
-            }], queryParamsHandling: [{
-                type: Input
-            }], state: [{
-                type: Input
-            }], info: [{
-                type: Input
-            }], relativeTo: [{
-                type: Input
-            }], preserveFragment: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], skipLocationChange: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], replaceUrl: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], routerLink: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', [
-                        '$event.button',
-                        '$event.ctrlKey',
-                        '$event.shiftKey',
-                        '$event.altKey',
-                        '$event.metaKey',
-                    ]]
-            }] } });
-
-/**
- * Selectors used for built-in Angular RouterLink directives:
- * RouterLink: ':not(a):not(area)[routerLink]'
- * RouterLinkWithHref: 'a[routerLink],area[routerLink]'
- *
- * See https://github.com/angular/angular/blob/5957ff4163f55d814be2cf80b9909244f1ce5262/packages/router/src/directives/router_link.ts
- */
 /**
  * Directive to handle nimble-anchor RouterLink support.
  * Note: Clients need to use [nimbleRouterLink] instead of [routerLink], so that there
@@ -936,13 +504,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     args: [LocationStrategy]
                 }] }] });
 
-/**
- * Selectors used for built-in Angular RouterLink directives:
- * RouterLink: ':not(a):not(area)[routerLink]'
- * RouterLinkWithHref: 'a[routerLink],area[routerLink]'
- *
- * See https://github.com/angular/angular/blob/5957ff4163f55d814be2cf80b9909244f1ce5262/packages/router/src/directives/router_link.ts
- */
 /**
  * Directive to handle nimble-anchor-button RouterLink support.
  * Note: Clients need to use [nimbleRouterLink] instead of [routerLink], so that there
@@ -1051,13 +612,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 }]
         }] });
 
-/**
- * Selectors used for built-in Angular RouterLink directives:
- * RouterLink: ':not(a):not(area)[routerLink]'
- * RouterLinkWithHref: 'a[routerLink],area[routerLink]'
- *
- * See https://github.com/angular/angular/blob/5957ff4163f55d814be2cf80b9909244f1ce5262/packages/router/src/directives/router_link.ts
- */
 /**
  * Directive to handle nimble-anchor-menu-item RouterLink support.
  * Note: Clients need to use [nimbleRouterLink] instead of [routerLink], so that there
@@ -1140,13 +694,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 }]
         }] });
 
-/**
- * Selectors used for built-in Angular RouterLink directives:
- * RouterLink: ':not(a):not(area)[routerLink]'
- * RouterLinkWithHref: 'a[routerLink],area[routerLink]'
- *
- * See https://github.com/angular/angular/blob/5957ff4163f55d814be2cf80b9909244f1ce5262/packages/router/src/directives/router_link.ts
- */
 /**
  * Directive to handle nimble-anchor-tab RouterLink support.
  * Note: Clients need to use [nimbleRouterLink] instead of [routerLink], so that there
@@ -1273,13 +820,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 }]
         }] });
 
-/**
- * Selectors used for built-in Angular RouterLink directives:
- * RouterLink: ':not(a):not(area)[routerLink]'
- * RouterLinkWithHref: 'a[routerLink],area[routerLink]'
- *
- * See https://github.com/angular/angular/blob/5957ff4163f55d814be2cf80b9909244f1ce5262/packages/router/src/directives/router_link.ts
- */
 /**
  * Directive to handle nimble-anchor-tree-item RouterLink support.
  * Note: Clients need to use [nimbleRouterLink] instead of [routerLink], so that there
@@ -1489,13 +1029,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 }]
         }] });
 
-/**
- * Selectors used for built-in Angular RouterLink directives:
- * RouterLink: ':not(a):not(area)[routerLink]'
- * RouterLinkWithHref: 'a[routerLink],area[routerLink]'
- *
- * See https://github.com/angular/angular/blob/5957ff4163f55d814be2cf80b9909244f1ce5262/packages/router/src/directives/router_link.ts
- */
 /**
  * Directive to handle nimble-breadcrumb-item RouterLink support.
  * Note: Clients need to use [nimbleRouterLink] instead of [routerLink], so that there
@@ -10802,7 +10335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class NimbleSelectControlValueAccessorDirective extends SelectControlValueAccessor {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NimbleSelectControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleSelectControlValueAccessorDirective, isStandalone: false, selector: "nimble-select:not([multiple])[formControlName],nimble-select:not([multiple])[formControl],nimble-select:not([multiple])[ngModel]", host: { listeners: { "change": "onChange($event.target.value)", "blur": "onTouched()" } }, providers: [{
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleSelectControlValueAccessorDirective, isStandalone: false, selector: "nimble-select:not([multiple])[formControlName],nimble-select:not([multiple])[formControl],nimble-select:not([multiple])[ngModel]", host: { listeners: { "change": "onChange($any($event.target).value)", "blur": "onTouched()" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NimbleSelectControlValueAccessorDirective),
                 multi: true
@@ -10814,7 +10347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     selector: 'nimble-select:not([multiple])[formControlName],nimble-select:not([multiple])[formControl],nimble-select:not([multiple])[ngModel]',
                     // The following host metadata is duplicated from SelectControlValueAccessor
                     // eslint-disable-next-line @typescript-eslint/naming-convention
-                    host: { '(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
+                    host: { '(change)': 'onChange($any($event.target).value)', '(blur)': 'onTouched()' },
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NimbleSelectControlValueAccessorDirective),
@@ -11160,7 +10693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class NimbleNumberFieldControlValueAccessorDirective extends NumberValueAccessor {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NimbleNumberFieldControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleNumberFieldControlValueAccessorDirective, isStandalone: false, selector: "nimble-number-field[formControlName],nimble-number-field[formControl],nimble-number-field[ngModel]", host: { listeners: { "input": "onChange($event.target.value)", "blur": "onTouched()" } }, providers: [{
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleNumberFieldControlValueAccessorDirective, isStandalone: false, selector: "nimble-number-field[formControlName],nimble-number-field[formControl],nimble-number-field[ngModel]", host: { listeners: { "input": "onChange($any($event.target).value)", "blur": "onTouched()" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NimbleNumberFieldControlValueAccessorDirective),
                 multi: true
@@ -11172,7 +10705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     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 @typescript-eslint/naming-convention
-                    host: { '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
+                    host: { '(input)': 'onChange($any($event.target).value)', '(blur)': 'onTouched()' },
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NimbleNumberFieldControlValueAccessorDirective),
@@ -11608,7 +11141,7 @@ class NimbleRadioControlValueAccessorDirective extends RadioControlValueAccessor
         this.onChange = () => { };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NimbleRadioControlValueAccessorDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: RadioControlRegistry }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleRadioControlValueAccessorDirective, isStandalone: false, selector: "nimble-radio[formControlName],nimble-radio[formControl],nimble-radio[ngModel]", host: { listeners: { "change": "nimbleOnChange($event.target.checked)", "blur": "onTouched()" } }, providers: [{
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleRadioControlValueAccessorDirective, isStandalone: false, selector: "nimble-radio[formControlName],nimble-radio[formControl],nimble-radio[ngModel]", host: { listeners: { "change": "nimbleOnChange($any($event.target).checked)", "blur": "onTouched()" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NimbleRadioControlValueAccessorDirective),
                 multi: true
@@ -11620,7 +11153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     selector: 'nimble-radio[formControlName],nimble-radio[formControl],nimble-radio[ngModel]',
                     // The following host metadata is duplicated from RadioControlValueAccessor
                     // eslint-disable-next-line @typescript-eslint/naming-convention
-                    host: { '(change)': 'nimbleOnChange($event.target.checked)', '(blur)': 'onTouched()' },
+                    host: { '(change)': 'nimbleOnChange($any($event.target).checked)', '(blur)': 'onTouched()' },
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NimbleRadioControlValueAccessorDirective),
@@ -11923,7 +11456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class NimbleSwitchControlValueAccessorDirective extends CheckboxControlValueAccessor {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NimbleSwitchControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleSwitchControlValueAccessorDirective, isStandalone: false, selector: "nimble-switch[formControlName],nimble-switch[formControl],nimble-switch[ngModel]", host: { listeners: { "change": "onChange($event.target.checked)", "blur": "onTouched()" } }, providers: [{
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleSwitchControlValueAccessorDirective, isStandalone: false, selector: "nimble-switch[formControlName],nimble-switch[formControl],nimble-switch[ngModel]", host: { listeners: { "change": "onChange($any($event.target).checked)", "blur": "onTouched()" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NimbleSwitchControlValueAccessorDirective),
                 multi: true
@@ -11935,7 +11468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     selector: 'nimble-switch[formControlName],nimble-switch[formControl],nimble-switch[ngModel]',
                     // The following host metadata is duplicated from CheckboxControlValueAccessor
                     // eslint-disable-next-line @typescript-eslint/naming-convention
-                    host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
+                    host: { '(change)': 'onChange($any($event.target).checked)', '(blur)': 'onTouched()' },
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NimbleSwitchControlValueAccessorDirective),
@@ -12291,7 +11824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class NimbleTextAreaControlValueAccessorDirective extends DefaultValueAccessor {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NimbleTextAreaControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleTextAreaControlValueAccessorDirective, isStandalone: false, selector: "nimble-text-area[formControlName],nimble-text-area[formControl],nimble-text-area[ngModel]", host: { listeners: { "input": "$any(this)._handleInput($event.target.value)", "blur": "onTouched()", "compositionstart": "$any(this)._compositionStart()", "compositionend": "$any(this)._compositionEnd($event.target.value)" } }, providers: [{
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleTextAreaControlValueAccessorDirective, isStandalone: false, selector: "nimble-text-area[formControlName],nimble-text-area[formControl],nimble-text-area[ngModel]", host: { listeners: { "input": "$any(this)._handleInput($any($event.target).value)", "blur": "onTouched()", "compositionstart": "$any(this)._compositionStart()", "compositionend": "$any(this)._compositionEnd($any($event.target).value)" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NimbleTextAreaControlValueAccessorDirective),
                 multi: true
@@ -12304,10 +11837,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     // The following host metadata is duplicated from DefaultValueAccessor
                     host: {
                         /* eslint-disable @typescript-eslint/naming-convention */
-                        '(input)': '$any(this)._handleInput($event.target.value)',
+                        '(input)': '$any(this)._handleInput($any($event.target).value)',
                         '(blur)': 'onTouched()',
                         '(compositionstart)': '$any(this)._compositionStart()',
-                        '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
+                        '(compositionend)': '$any(this)._compositionEnd($any($event.target).value)'
                         /* eslint-enable @typescript-eslint/naming-convention */
                     },
                     providers: [{
@@ -12505,7 +12038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class NimbleTextFieldControlValueAccessorDirective extends DefaultValueAccessor {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NimbleTextFieldControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleTextFieldControlValueAccessorDirective, isStandalone: false, selector: "nimble-text-field[formControlName],nimble-text-field[formControl],nimble-text-field[ngModel]", host: { listeners: { "input": "$any(this)._handleInput($event.target.value)", "blur": "onTouched()", "compositionstart": "$any(this)._compositionStart()", "compositionend": "$any(this)._compositionEnd($event.target.value)" } }, providers: [{
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleTextFieldControlValueAccessorDirective, isStandalone: false, selector: "nimble-text-field[formControlName],nimble-text-field[formControl],nimble-text-field[ngModel]", host: { listeners: { "input": "$any(this)._handleInput($any($event.target).value)", "blur": "onTouched()", "compositionstart": "$any(this)._compositionStart()", "compositionend": "$any(this)._compositionEnd($any($event.target).value)" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NimbleTextFieldControlValueAccessorDirective),
                 multi: true
@@ -12518,10 +12051,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     // The following host metadata is duplicated from DefaultValueAccessor
                     host: {
                         /* eslint-disable @typescript-eslint/naming-convention */
-                        '(input)': '$any(this)._handleInput($event.target.value)',
+                        '(input)': '$any(this)._handleInput($any($event.target).value)',
                         '(blur)': 'onTouched()',
                         '(compositionstart)': '$any(this)._compositionStart()',
-                        '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
+                        '(compositionend)': '$any(this)._compositionEnd($any($event.target).value)'
                         /* eslint-enable @typescript-eslint/naming-convention */
                     },
                     providers: [{
@@ -12772,7 +12305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class NimbleToggleButtonControlValueAccessorDirective extends CheckboxControlValueAccessor {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NimbleToggleButtonControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleToggleButtonControlValueAccessorDirective, isStandalone: false, selector: "nimble-toggle-button[formControlName],nimble-toggle-button[formControl],nimble-toggle-button[ngModel]", host: { listeners: { "change": "onChange($event.target.checked)", "blur": "onTouched()" } }, providers: [{
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NimbleToggleButtonControlValueAccessorDirective, isStandalone: false, selector: "nimble-toggle-button[formControlName],nimble-toggle-button[formControl],nimble-toggle-button[ngModel]", host: { listeners: { "change": "onChange($any($event.target).checked)", "blur": "onTouched()" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NimbleToggleButtonControlValueAccessorDirective),
                 multi: true
@@ -12784,7 +12317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     selector: 'nimble-toggle-button[formControlName],nimble-toggle-button[formControl],nimble-toggle-button[ngModel]',
                     // The following host metadata is duplicated from CheckboxControlValueAccessor
                     // eslint-disable-next-line @typescript-eslint/naming-convention
-                    host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
+                    host: { '(change)': 'onChange($any($event.target).checked)', '(blur)': 'onTouched()' },
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NimbleToggleButtonControlValueAccessorDirective),