@impartner/design-components 1.2.0 → 2.0.0

package/{fesm2020 → fesm2022}/impartner-design-components.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule, ViewEncapsulation, ViewChild, HostBinding, Directive, InjectionToken, EventEmitter, ChangeDetectionStrategy, Optional, Inject, Output, Host, SkipSelf, Injectable, ElementRef, Attribute, Self, ContentChildren, ContentChild, TemplateRef, HostListener, Pipe } from '@angular/core';
+import { Injectable, Component, Input, NgModule, ViewEncapsulation, ViewChild, HostBinding, Directive, InjectionToken, EventEmitter, ChangeDetectionStrategy, Optional, Inject, Output, Host, SkipSelf, ElementRef, Attribute, Self, ContentChildren, ContentChild, TemplateRef, HostListener, Pipe } from '@angular/core';
+import { BehaviorSubject, map, distinctUntilChanged, shareReplay, Subject, startWith, merge, switchMap, take, defer, takeUntil, filter, fromEvent, tap, debounceTime as debounceTime$1, combineLatest } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, PercentPipe, DecimalPipe } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -10,7 +11,6 @@ import { debounceTime } from 'rxjs/operators';
 import * as i4 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDropdownItem, NgbDropdown, NgbDropdownMenu, NgbDropdownModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { nanoid } from 'nanoid';
-import { Subject, defer, startWith, switchMap, merge, take, takeUntil, BehaviorSubject, debounceTime as debounceTime$1, distinctUntilChanged, combineLatest, map } from 'rxjs';
 
 const FontAwesomeIconThemes = ['solid', 'regular', 'light'];
 const FontAwesomeIcons = [
@@ -3058,6 +3058,91 @@ const ComponentThemesArr = [
     ComponentTheme.Dark
 ];
 
+class InteractionService {
+    constructor() {
+        this._interactables = [];
+        this._backdropQueueSubject = new BehaviorSubject([]);
+        this.showBackdrop$ = this._backdropQueueSubject
+            .asObservable()
+            .pipe(map(backdropQueue => backdropQueue.length > 0), distinctUntilChanged(), shareReplay(1));
+    }
+    get showBackdrop() {
+        return this._backdropQueueSubject.value.length > 0;
+    }
+    registerBackdrop(modalBackdrop) {
+        // WARNING: there should only be 1 backdrop component, preferably loaded in the body
+        if (!this._backdrop) {
+            this._backdrop = modalBackdrop;
+        }
+        else if (this._backdrop !== modalBackdrop) {
+            this._backdrop.invalidate();
+            this._backdrop = modalBackdrop;
+            if (!modalBackdrop.valid) {
+                // we invalidated and set backdrop to the same backdrop
+                modalBackdrop.validate();
+            }
+        }
+    }
+    unregisterBackdrop(modalBackdrop) {
+        if (this._backdrop === modalBackdrop) {
+            this._backdrop = undefined;
+        }
+    }
+    add(interactable) {
+        const interactableId = interactable.interactableId;
+        if (!this._interactables.some(i => i.interactableId === interactableId)) {
+            this._interactables.push(interactable);
+        }
+        return interactableId;
+    }
+    remove(interactableId) {
+        if (!interactableId) {
+            return;
+        }
+        const interactableIndex = this._interactables.findIndex(component => component.interactableId === interactableId);
+        if (interactableIndex >= 0) {
+            this._interactables.splice(interactableIndex, 1);
+            this.dequeueBackdrop(interactableId);
+        }
+    }
+    toggle(interactable) {
+        if (!interactable.interactableId || interactable.show) {
+            // other interactables don't need to be altered/notified
+            return false;
+        }
+        for (const otherInteractable of this._interactables.filter(oi => oi.show)) {
+            if (otherInteractable.hide) {
+                otherInteractable.hide();
+            }
+        }
+        return true;
+    }
+    queueBackdrop(interactableId) {
+        if (!this._backdropQueueSubject.value.includes(interactableId)) {
+            this._backdropQueueSubject.next([
+                ...this._backdropQueueSubject.value,
+                interactableId
+            ]);
+        }
+    }
+    dequeueBackdrop(interactableId) {
+        const interactableIdIndex = this._backdropQueueSubject.value.indexOf(interactableId);
+        if (interactableIdIndex !== -1) {
+            const newQueue = [...this._backdropQueueSubject.value];
+            newQueue.splice(interactableIdIndex, 1);
+            this._backdropQueueSubject.next(newQueue);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: InteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: InteractionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: InteractionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 /**
  * Coerces a value provided via data-binding (usually a string) to a boolean.
  */
@@ -3145,9 +3230,8 @@ class TextHighlightComponent {
         const regEx = new RegExp(`(${this.search})`, 'i');
         this.result = this.text.split(regEx);
     }
-}
-TextHighlightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextHighlightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TextHighlightComponent, selector: "impdc-text-highlight, [impdc-text-highlight]", inputs: { text: "text", search: "search", method: "method", exact: "exact" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TextHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: TextHighlightComponent, selector: "impdc-text-highlight, [impdc-text-highlight]", inputs: { text: "text", search: "search", method: "method", exact: "exact" }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngFor="let match of result">
       <ng-container *ngIf="checkMatch(match); else nomatch" [ngSwitch]="method">
         <mark *ngSwitchCase="'mark'">{{ match }}</mark>
@@ -3157,8 +3241,9 @@ TextHighlightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
       </ng-container>
       <ng-template #nomatch>{{ match }}</ng-template>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextHighlightComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TextHighlightComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'impdc-text-highlight, [impdc-text-highlight]',
@@ -3186,18 +3271,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class TextHighlightModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TextHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: TextHighlightModule, declarations: [TextHighlightComponent], imports: [CommonModule], exports: [TextHighlightComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TextHighlightModule, imports: [CommonModule] }); }
 }
-TextHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TextHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TextHighlightModule, declarations: [TextHighlightComponent], imports: [CommonModule], exports: [TextHighlightComponent] });
-TextHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextHighlightModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextHighlightModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TextHighlightModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
                     declarations: [TextHighlightComponent],
                     exports: [TextHighlightComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `IconComponent` (`<impdc-icon` or `<any impdc-icon`) is an icon wrapper utilizing Font Awesome 5.
@@ -3255,13 +3340,13 @@ class IconComponent {
             }
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: IconComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: { name: "name", theme: "theme", size: "size" }, viewQueries: [{ propertyName: "iconRef", first: true, predicate: ["icon"], descendants: true, static: true }], ngImport: i0, template: "<i\n  #icon\n  class=\"{{ typeClass }} fa-{{ name }}\"\n  [style.font-size]=\"computedSize\"></i>\n", encapsulation: i0.ViewEncapsulation.None }); }
 }
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IconComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: { name: "name", theme: "theme", size: "size" }, viewQueries: [{ propertyName: "iconRef", first: true, predicate: ["icon"], descendants: true, static: true }], ngImport: i0, template: "<i\n  #icon\n  class=\"{{ typeClass }} fa-{{ name }}\"\n  [style.font-size]=\"computedSize\"></i>\n", encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-icon, [impdc-icon]', encapsulation: ViewEncapsulation.None, template: "<i\n  #icon\n  class=\"{{ typeClass }} fa-{{ name }}\"\n  [style.font-size]=\"computedSize\"></i>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -3334,10 +3419,10 @@ class ButtonComponent {
     get attrAriaLabel() {
         return this.ariaLabel || this.titleText || this.text || undefined;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ButtonComponent, selector: "button[impdcButton]", inputs: { type: "type", theme: "theme", text: "text", disabled: "disabled", titleText: "titleText", ariaLabel: "ariaLabel" }, host: { properties: { "attr.type": "this.attrType", "class.btn": "this.classBtn", "class.btn-primary": "this.classBtnPrimary", "class.btn-danger": "this.classBtnDanger", "class.btn-outline-primary": "this.classBtnSecondary", "class.btn-outline-danger": "this.classBtnSecondaryDanger", "class.btn-close-fa": "this.classBtnClose", "attr.disabled": "this.attrDisabled", "attr.title": "this.attrTitle", "attr.aria-label": "this.attrAriaLabel" } }, ngImport: i0, template: "<ng-container *ngIf=\"theme !== 'close'\">\n  <ng-content></ng-content>{{ text }}\n  <ng-content select=\"[right]\"></ng-content>\n</ng-container>\n<span impdc-icon *ngIf=\"theme === 'close'\" name=\"times\" theme=\"light\"></span>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ButtonComponent, selector: "button[impdcButton]", inputs: { type: "type", theme: "theme", text: "text", disabled: "disabled", titleText: "titleText", ariaLabel: "ariaLabel" }, host: { properties: { "attr.type": "this.attrType", "class.btn": "this.classBtn", "class.btn-primary": "this.classBtnPrimary", "class.btn-danger": "this.classBtnDanger", "class.btn-outline-primary": "this.classBtnSecondary", "class.btn-outline-danger": "this.classBtnSecondaryDanger", "class.btn-close-fa": "this.classBtnClose", "attr.disabled": "this.attrDisabled", "attr.title": "this.attrTitle", "attr.aria-label": "this.attrAriaLabel" } }, ngImport: i0, template: "<ng-container *ngIf=\"theme !== 'close'\">\n  <ng-content></ng-content>{{ text }}\n  <ng-content select=\"[right]\"></ng-content>\n</ng-container>\n<span impdc-icon *ngIf=\"theme === 'close'\" name=\"times\" theme=\"light\"></span>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[impdcButton]', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"theme !== 'close'\">\n  <ng-content></ng-content>{{ text }}\n  <ng-content select=\"[right]\"></ng-content>\n</ng-container>\n<span impdc-icon *ngIf=\"theme === 'close'\" name=\"times\" theme=\"light\"></span>\n" }]
         }], propDecorators: { type: [{
@@ -3388,10 +3473,10 @@ class BrandedDirective {
     constructor() {
         this.brandedClass = true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BrandedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: BrandedDirective, selector: "[impdcBranded]", host: { properties: { "class.branded": "this.brandedClass" } }, ngImport: i0 }); }
 }
-BrandedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BrandedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BrandedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: BrandedDirective, selector: "[impdcBranded]", host: { properties: { "class.branded": "this.brandedClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BrandedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BrandedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[impdcBranded]'
@@ -3403,48 +3488,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class BrandingModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BrandingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: BrandingModule, declarations: [BrandedDirective], imports: [CommonModule], exports: [BrandedDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BrandingModule, imports: [CommonModule] }); }
 }
-BrandingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BrandingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BrandingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BrandingModule, declarations: [BrandedDirective], imports: [CommonModule], exports: [BrandedDirective] });
-BrandingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BrandingModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BrandingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BrandingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
                     declarations: [BrandedDirective],
                     exports: [BrandedDirective]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class IconModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: IconModule, imports: [CommonModule] }); }
 }
-IconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] });
-IconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IconModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: IconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
                     declarations: [IconComponent],
                     exports: [IconComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class ButtonModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, BrandingModule, IconModule], exports: [ButtonComponent, BrandingModule, IconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonModule, imports: [CommonModule, BrandingModule, IconModule, BrandingModule, IconModule] }); }
 }
-ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, BrandingModule, IconModule], exports: [ButtonComponent, BrandingModule, IconModule] });
-ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonModule, imports: [CommonModule, BrandingModule, IconModule, BrandingModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, BrandingModule, IconModule],
                     declarations: [ButtonComponent],
                     exports: [ButtonComponent, BrandingModule, IconModule]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 const DEFAULT_PAGE = 1;
 const ROWS_PER_PAGE = 10;
@@ -3490,6 +3575,7 @@ var TableColumnType;
     TableColumnType["Icon"] = "Icon";
     TableColumnType["Email"] = "Email";
     TableColumnType["Url"] = "Url";
+    TableColumnType["Actions"] = "Actions";
 })(TableColumnType || (TableColumnType = {}));
 
 class TableThemeHelper {
@@ -3511,9 +3597,9 @@ class TableThemeHelper {
     }
     static getCellColor(columnDefinition, currentRow) {
         const color = this.getTheme(columnDefinition, currentRow);
-        return TableThemeHelper._getCellColor(color);
+        return TableThemeHelper.getColor(color);
     }
-    static _getCellColor(color) {
+    static getColor(color) {
         if (!color) {
             return '';
         }
@@ -3530,20 +3616,6 @@ class SelectOptionSelectionChangeEvent {
     }
 }
 class SelectOptionComponent extends NgbDropdownItem {
-    constructor(_parent, _changeDetector, _elementRef, _renderer) {
-        super(_elementRef, _renderer);
-        this._parent = _parent;
-        this._changeDetector = _changeDetector;
-        /** @ignore */
-        this.stateChanges = new Subject();
-        this._selected = false;
-        this.__disabled = false;
-        this._label = '';
-        /** @ignore */
-        this.id = `impdc-option-${nanoid()}`;
-        /** @ignore */
-        this.onSelectionChange = new EventEmitter();
-    }
     /** @ignore */
     get multiple() {
         return this._parent && !!this._parent.multiple;
@@ -3571,6 +3643,20 @@ class SelectOptionComponent extends NgbDropdownItem {
     set disabled(value) {
         this.__disabled = coerceBooleanPropertyValue(value);
     }
+    constructor(_parent, _changeDetector) {
+        super();
+        this._parent = _parent;
+        this._changeDetector = _changeDetector;
+        /** @ignore */
+        this.stateChanges = new Subject();
+        this._selected = false;
+        this.__disabled = false;
+        this._label = '';
+        /** @ignore */
+        this.id = `impdc-option-${nanoid()}`;
+        /** @ignore */
+        this.onSelectionChange = new EventEmitter();
+    }
     /** @ignore */
     select() {
         if (!this._selected) {
@@ -3624,10 +3710,10 @@ class SelectOptionComponent extends NgbDropdownItem {
         }
         return true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectOptionComponent, deps: [{ token: IMPDC_SELECT_OPTION_PARENT_COMPONENT, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: SelectOptionComponent, selector: "impdc-select-option", inputs: { value: "value", label: "label", id: "id", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "_selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "class.impdc-select-option--single": "!multiple", "class.impdc-select-option--multiple": "multiple", "class.impdc-select-option--selected": "selected" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #singleSelectTemplate>\n  <span>{{ label || '&nbsp;' }}</span>\n  <span\n    *ngIf=\"selected\"\n    impdc-icon\n    name=\"check\"\n    class=\"selected-check ms-auto\"></span>\n</ng-template>\n\n<ng-template #multipleSelectTemplate>\n  <div class=\"d-flex align-items-center gap-5\">\n    <span>\n      <input\n        class=\"form-check-input opacity-100\"\n        type=\"checkbox\"\n        disabled\n        readonly=\"readonly\"\n        [attr.checked]=\"selected ? 'checked' : null\" />\n    </span>\n    <span>\n      {{ label }}\n    </span>\n  </div>\n</ng-template>\n\n<ng-template\n  [ngTemplateOutlet]=\"\n    multiple ? multipleSelectTemplate : singleSelectTemplate\n  \"></ng-template>\n", styles: [":host{background-color:var(--impd-color-white);color:var(--impd-color-gray-600);padding:var(--impd-size-2) var(--impd-size-3);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:flex!important;align-items:center;column-gap:var(--impd-size-2);cursor:pointer}:host:hover,:host:focus{background-color:var(--impd-color-gray-100);border:0;outline:0}:host.impdc-select-option--selected{font-weight:var(--impd-font-weight-semibold)}:host.impdc-select-option--single .selected-check{display:none}:host.impdc-select-option--single.impdc-select-option--selected{background-color:var(--impd-color-motion-blue-600);color:var(--impd-color-white)}:host.impdc-select-option--single.impdc-select-option--selected:hover,:host.impdc-select-option--single.impdc-select-option--selected:focus{background:linear-gradient(to top,rgba(0,0,0,.1),rgba(0,0,0,.1)) var(--impd-color-motion-blue-600);color:var(--impd-color-white);border:0;outline:0}:host.impdc-select-option--single.impdc-select-option--selected .selected-check{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-SelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectOptionComponent, deps: [{ token: IMPDC_SELECT_OPTION_PARENT_COMPONENT, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SelectOptionComponent, selector: "impdc-select-option", inputs: { value: "value", label: "label", id: "id", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "_selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "class.impdc-select-option--single": "!multiple", "class.impdc-select-option--multiple": "multiple", "class.impdc-select-option--selected": "selected" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #singleSelectTemplate>\n  <span>{{ label || '&nbsp;' }}</span>\n  <span\n    *ngIf=\"selected\"\n    impdc-icon\n    name=\"check\"\n    class=\"selected-check ms-auto\"></span>\n</ng-template>\n\n<ng-template #multipleSelectTemplate>\n  <div class=\"d-flex align-items-center gap-5\">\n    <span>\n      <input\n        class=\"form-check-input opacity-100\"\n        type=\"checkbox\"\n        disabled\n        readonly=\"readonly\"\n        [attr.checked]=\"selected ? 'checked' : null\" />\n    </span>\n    <span>\n      {{ label }}\n    </span>\n  </div>\n</ng-template>\n\n<ng-template\n  [ngTemplateOutlet]=\"\n    multiple ? multipleSelectTemplate : singleSelectTemplate\n  \"></ng-template>\n", styles: [":host{background-color:var(--impd-color-white);color:var(--impd-color-gray-600);padding:var(--impd-size-2) var(--impd-size-3);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:flex!important;align-items:center;column-gap:var(--impd-size-2);cursor:pointer}:host:hover,:host:focus{background-color:var(--impd-color-gray-100);border:0;outline:0}:host.impdc-select-option--selected{font-weight:var(--impd-font-weight-semibold)}:host.impdc-select-option--single .selected-check{display:none}:host.impdc-select-option--single.impdc-select-option--selected{background-color:var(--impd-color-motion-blue-600);color:var(--impd-color-white)}:host.impdc-select-option--single.impdc-select-option--selected:hover,:host.impdc-select-option--single.impdc-select-option--selected:focus{background:linear-gradient(to top,rgba(0,0,0,.1),rgba(0,0,0,.1)) var(--impd-color-motion-blue-600);color:var(--impd-color-white);border:0;outline:0}:host.impdc-select-option--single.impdc-select-option--selected .selected-check{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-select-option', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.impdc-select-option--single]': '!multiple',
@@ -3636,12 +3722,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         '(click)': '_selectViaInteraction()',
                         '(keydown)': '_handleKeydown($event)'
                     }, template: "<ng-template #singleSelectTemplate>\n  <span>{{ label || '&nbsp;' }}</span>\n  <span\n    *ngIf=\"selected\"\n    impdc-icon\n    name=\"check\"\n    class=\"selected-check ms-auto\"></span>\n</ng-template>\n\n<ng-template #multipleSelectTemplate>\n  <div class=\"d-flex align-items-center gap-5\">\n    <span>\n      <input\n        class=\"form-check-input opacity-100\"\n        type=\"checkbox\"\n        disabled\n        readonly=\"readonly\"\n        [attr.checked]=\"selected ? 'checked' : null\" />\n    </span>\n    <span>\n      {{ label }}\n    </span>\n  </div>\n</ng-template>\n\n<ng-template\n  [ngTemplateOutlet]=\"\n    multiple ? multipleSelectTemplate : singleSelectTemplate\n  \"></ng-template>\n", styles: [":host{background-color:var(--impd-color-white);color:var(--impd-color-gray-600);padding:var(--impd-size-2) var(--impd-size-3);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:flex!important;align-items:center;column-gap:var(--impd-size-2);cursor:pointer}:host:hover,:host:focus{background-color:var(--impd-color-gray-100);border:0;outline:0}:host.impdc-select-option--selected{font-weight:var(--impd-font-weight-semibold)}:host.impdc-select-option--single .selected-check{display:none}:host.impdc-select-option--single.impdc-select-option--selected{background-color:var(--impd-color-motion-blue-600);color:var(--impd-color-white)}:host.impdc-select-option--single.impdc-select-option--selected:hover,:host.impdc-select-option--single.impdc-select-option--selected:focus{background:linear-gradient(to top,rgba(0,0,0,.1),rgba(0,0,0,.1)) var(--impd-color-motion-blue-600);color:var(--impd-color-white);border:0;outline:0}:host.impdc-select-option--single.impdc-select-option--selected .selected-check{display:inline-block}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [IMPDC_SELECT_OPTION_PARENT_COMPONENT]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { value: [{
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -3654,10 +3740,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class CornerHintDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CornerHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: CornerHintDirective, selector: "impdc-corner-hint", ngImport: i0 }); }
 }
-CornerHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CornerHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CornerHintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: CornerHintDirective, selector: "impdc-corner-hint", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CornerHintDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CornerHintDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3670,10 +3756,10 @@ class ErrorDirective {
     constructor() {
         this.id = `impdc-form-error-${nanoid()}`;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: ErrorDirective, selector: "impdc-error, [impdc-error]", inputs: { id: "id" }, host: { properties: { "id": "id" } }, providers: [{ provide: IMPDC_ERROR, useExisting: ErrorDirective }], ngImport: i0 }); }
 }
-ErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ErrorDirective, selector: "impdc-error, [impdc-error]", inputs: { id: "id" }, host: { properties: { "id": "id" } }, providers: [{ provide: IMPDC_ERROR, useExisting: ErrorDirective }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3702,15 +3788,15 @@ class RootFormGroupDirective {
     get form() {
         return this._parentRoot ? this._parentRoot.form : this._formGroupDirective;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RootFormGroupDirective, deps: [{ token: i2.FormGroupDirective, host: true }, { token: IMPDC_FORM_ROOT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: RootFormGroupDirective, selector: "[formGroup]", providers: [
+            {
+                provide: IMPDC_FORM_ROOT,
+                useExisting: RootFormGroupDirective
+            }
+        ], ngImport: i0 }); }
 }
-RootFormGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootFormGroupDirective, deps: [{ token: i2.FormGroupDirective, host: true }, { token: IMPDC_FORM_ROOT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-RootFormGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RootFormGroupDirective, selector: "[formGroup]", providers: [
-        {
-            provide: IMPDC_FORM_ROOT,
-            useExisting: RootFormGroupDirective
-        }
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootFormGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RootFormGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3722,7 +3808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i2.FormGroupDirective, decorators: [{
+        }], ctorParameters: () => [{ type: i2.FormGroupDirective, decorators: [{
                     type: Host
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -3731,7 +3817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }, {
                     type: Inject,
                     args: [IMPDC_FORM_ROOT]
-                }] }]; } });
+                }] }] });
 class RootNgFormDirective {
     constructor(_ngForm, _parentRoot) {
         this._ngForm = _ngForm;
@@ -3745,15 +3831,15 @@ class RootNgFormDirective {
     get form() {
         return this._parentRoot ? this._parentRoot.form : this._ngForm;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RootNgFormDirective, deps: [{ token: i2.NgForm, host: true }, { token: IMPDC_FORM_ROOT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: RootNgFormDirective, selector: "[ngForm]", providers: [
+            {
+                provide: IMPDC_FORM_ROOT,
+                useExisting: RootNgFormDirective
+            }
+        ], ngImport: i0 }); }
 }
-RootNgFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootNgFormDirective, deps: [{ token: i2.NgForm, host: true }, { token: IMPDC_FORM_ROOT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-RootNgFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RootNgFormDirective, selector: "[ngForm]", providers: [
-        {
-            provide: IMPDC_FORM_ROOT,
-            useExisting: RootNgFormDirective
-        }
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootNgFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RootNgFormDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3765,7 +3851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i2.NgForm, decorators: [{
+        }], ctorParameters: () => [{ type: i2.NgForm, decorators: [{
                     type: Host
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -3774,16 +3860,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }, {
                     type: Inject,
                     args: [IMPDC_FORM_ROOT]
-                }] }]; } });
+                }] }] });
 
 class HintDirective {
     constructor() {
         this.id = `impdc-form-hint-${nanoid()}`;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: HintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: HintDirective, selector: "impdc-hint", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0 }); }
 }
-HintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-HintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: HintDirective, selector: "impdc-hint", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HintDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: HintDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3798,10 +3884,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class LabelDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: LabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: LabelDirective, selector: "impdc-label", ngImport: i0 }); }
 }
-LabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-LabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: LabelDirective, selector: "impdc-label", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: LabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3817,10 +3903,10 @@ class PrefixDirective {
     set isTextSelector(value) {
         this.isText = true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: PrefixDirective, selector: "[impdcPrefix], [impdcTextPrefix]", inputs: { isTextSelector: ["impdcTextPrefix", "isTextSelector"] }, providers: [{ provide: IMPDC_PREFIX, useExisting: PrefixDirective }], ngImport: i0 }); }
 }
-PrefixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-PrefixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: PrefixDirective, selector: "[impdcPrefix], [impdcTextPrefix]", inputs: { isTextSelector: ["impdcTextPrefix", "isTextSelector"] }, providers: [{ provide: IMPDC_PREFIX, useExisting: PrefixDirective }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[impdcPrefix], [impdcTextPrefix]',
@@ -3839,10 +3925,10 @@ class SuffixDirective {
     set isTextSelector(value) {
         this.isText = true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: SuffixDirective, selector: "[impdcSuffix], [impdcTextSuffix]", inputs: { isTextSelector: ["impdcTextSuffix", "isTextSelector"] }, providers: [{ provide: IMPDC_SUFFIX, useExisting: SuffixDirective }], ngImport: i0 }); }
 }
-SuffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SuffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: SuffixDirective, selector: "[impdcSuffix], [impdcTextSuffix]", inputs: { isTextSelector: ["impdcTextSuffix", "isTextSelector"] }, providers: [{ provide: IMPDC_SUFFIX, useExisting: SuffixDirective }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[impdcSuffix], [impdcTextSuffix]',
@@ -3855,26 +3941,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 function mixinDisabled(base) {
     return class extends base {
-        constructor(...args) {
-            super(...args);
-            this._disabled = false;
-        }
         get disabled() {
             return this._disabled;
         }
         set disabled(value) {
             this._disabled = !!value;
         }
+        constructor(...args) {
+            super(...args);
+            this._disabled = false;
+        }
     };
 }
 
 function mixinErrorState(base) {
     return class extends base {
-        constructor(...args) {
-            super(...args);
-            /** Whether the component is in an error state. */
-            this.errorState = false;
-        }
         /** Updates the error state based on the provided error state matcher. */
         updateErrorState() {
             const oldState = this.errorState;
@@ -3889,24 +3970,24 @@ function mixinErrorState(base) {
                 this.stateChanges.next();
             }
         }
+        constructor(...args) {
+            super(...args);
+            /** Whether the component is in an error state. */
+            this.errorState = false;
+        }
     };
 }
 
 class ImpdcFormFieldControl {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ImpdcFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: ImpdcFormFieldControl, ngImport: i0 }); }
 }
-ImpdcFormFieldControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImpdcFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ImpdcFormFieldControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ImpdcFormFieldControl, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImpdcFormFieldControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ImpdcFormFieldControl, decorators: [{
             type: Directive
         }] });
 
 function mixinTabIndex(base, defaultTabIndex = 0) {
     return class extends base {
-        constructor(...args) {
-            super(...args);
-            this._tabIndex = defaultTabIndex;
-            this.defaultTabIndex = defaultTabIndex;
-        }
         get tabIndex() {
             return this.disabled ? -1 : this._tabIndex;
         }
@@ -3915,6 +3996,11 @@ function mixinTabIndex(base, defaultTabIndex = 0) {
             this._tabIndex =
                 value != null ? coerceNumberPropertyValue(value) : this.defaultTabIndex;
         }
+        constructor(...args) {
+            super(...args);
+            this._tabIndex = defaultTabIndex;
+            this.defaultTabIndex = defaultTabIndex;
+        }
     };
 }
 
@@ -3922,6 +4008,12 @@ function getMultipleValuesInSingleSelectError() {
     return Error('Cannot pass multiple values into SelectModel in single-value mode.');
 }
 class SelectModel {
+    get selected() {
+        if (!this._selected) {
+            this._selected = Array.from(this._selection.values());
+        }
+        return this._selected;
+    }
     constructor(_multiple = false, initialSelectedValues, _emitChanges = true, compareFunc) {
         this._multiple = _multiple;
         this._emitChanges = _emitChanges;
@@ -3943,12 +4035,6 @@ class SelectModel {
             this._pendingSelectionsToEmit.length = 0;
         }
     }
-    get selected() {
-        if (!this._selected) {
-            this._selected = Array.from(this._selection.values());
-        }
-        return this._selected;
-    }
     select(...values) {
         this._verifyValueAssignment(values);
         values.forEach(value => this._markSelected(value));
@@ -4073,10 +4159,10 @@ class ShowOnDirtyErrorStateMatcher {
             control.invalid &&
             (control.dirty || (form && form.submitted)));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ShowOnDirtyErrorStateMatcher }); }
 }
-ShowOnDirtyErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ShowOnDirtyErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ShowOnDirtyErrorStateMatcher });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, decorators: [{
             type: Injectable
         }] });
 class ErrorStateMatcher {
@@ -4085,10 +4171,10 @@ class ErrorStateMatcher {
             control.invalid &&
             (control.touched || (form && form.submitted)));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
 }
-ErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ErrorStateMatcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4131,10 +4217,10 @@ class UniqueSelectionDispatcher {
     ngOnDestroy() {
         this._listeners = [];
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: UniqueSelectionDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: UniqueSelectionDispatcher, providedIn: 'root' }); }
 }
-UniqueSelectionDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UniqueSelectionDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UniqueSelectionDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UniqueSelectionDispatcher, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UniqueSelectionDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: UniqueSelectionDispatcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4191,43 +4277,6 @@ const _SelectComponentBase = mixinTabIndex(mixinDisabled(mixinErrorState(class {
  * To use, import `SelectModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class SelectComponent extends _SelectComponentBase {
-    constructor(_changeDetector, _ngZone, tabIndex, _defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl) {
-        super(_defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl);
-        this._changeDetector = _changeDetector;
-        this._ngZone = _ngZone;
-        /** @ignore */
-        this.optionSelectionChanges = defer(() => {
-            const options = this.options;
-            if (options) {
-                return options.changes.pipe(startWith(options), switchMap(() => merge(...options.map(option => option.onSelectionChange))));
-            }
-            return this._ngZone.onStable.pipe(take(1), switchMap(() => this.optionSelectionChanges));
-        });
-        this._uid = `impdc-select-${nanoid()}`;
-        this._ngDestroy = new Subject();
-        this._compareWith = (o1, o2) => o1 === o2;
-        this._cvaOnChange = () => { };
-        this._cvaOnTouched = () => { };
-        this._placeholder = '- Select -';
-        this._multiple = false;
-        /** Events fire when selection has been changed by the user. */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Events fire when raw value of select changes. Mainly exists to handle
-         * two-way binding of `value` input property.
-         * @ignore
-         */
-        this.valueChange = new EventEmitter();
-        /* ImpdcFormFieldControl */
-        this.controlType = 'impdc-select';
-        this.supportsAffixes = true;
-        this._focused = false;
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-        this.id = this.id;
-        this.tabIndex = parseInt(tabIndex) || 0;
-    }
     /**
      * The placeholder text that will be displayed when no selection has been made.
      *
@@ -4287,6 +4336,43 @@ class SelectComponent extends _SelectComponentBase {
     get dropdownOpen() {
         return this._ngbDropdown?.isOpen() ?? false;
     }
+    constructor(_changeDetector, _ngZone, tabIndex, _defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl) {
+        super(_defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl);
+        this._changeDetector = _changeDetector;
+        this._ngZone = _ngZone;
+        /** @ignore */
+        this.optionSelectionChanges = defer(() => {
+            const options = this.options;
+            if (options) {
+                return options.changes.pipe(startWith(options), switchMap(() => merge(...options.map(option => option.onSelectionChange))));
+            }
+            return this._ngZone.onStable.pipe(take(1), switchMap(() => this.optionSelectionChanges));
+        });
+        this._uid = `impdc-select-${nanoid()}`;
+        this._ngDestroy = new Subject();
+        this._compareWith = (o1, o2) => o1 === o2;
+        this._cvaOnChange = () => { };
+        this._cvaOnTouched = () => { };
+        this._placeholder = '- Select -';
+        this._multiple = false;
+        /** Events fire when selection has been changed by the user. */
+        this.selectionChange = new EventEmitter();
+        /**
+         * Events fire when raw value of select changes. Mainly exists to handle
+         * two-way binding of `value` input property.
+         * @ignore
+         */
+        this.valueChange = new EventEmitter();
+        /* ImpdcFormFieldControl */
+        this.controlType = 'impdc-select';
+        this.supportsAffixes = true;
+        this._focused = false;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        this.id = this.id;
+        this.tabIndex = parseInt(tabIndex) || 0;
+    }
     get empty() {
         return !this._selectionModel || this._selectionModel.isEmpty();
     }
@@ -4558,19 +4644,19 @@ class SelectComponent extends _SelectComponentBase {
     _buildChangeEvent(value) {
         return new SelectChangeEvent(this, value);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: 'tabindex', attribute: true }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: SelectComponent, selector: "impdc-select", inputs: { disabled: "disabled", tabIndex: "tabIndex", placeholder: "placeholder", required: "required", multiple: "multiple", compareWith: "compareWith", errorStateMatcher: "errorStateMatcher", value: "value", id: "id" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange" }, host: { listeners: { "focus": "_onFocus(); focus()" }, properties: { "attr.id": "id", "attr.tabindex": "tabIndex", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.form-select": "true", "class.is-invalid": "errorState", "class.impdc-form-field-control": "true", "class.impdc-select--required": "required", "class.impdc-select--disabled": "disabled", "class.impdc-select--invalid": "errorState", "class.impdc-select--empty": "empty", "class.impdc-select--multiple": "multiple" } }, providers: [
+            {
+                provide: ImpdcFormFieldControl,
+                useExisting: SelectComponent
+            },
+            {
+                provide: IMPDC_SELECT_OPTION_PARENT_COMPONENT,
+                useExisting: SelectComponent
+            }
+        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "_ngbDropdown", first: true, predicate: NgbDropdown, descendants: true }, { propertyName: "_ngbDropdownMenu", first: true, predicate: NgbDropdownMenu, descendants: true }, { propertyName: "_toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, static: true }], exportAs: ["impdcSelect"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  ngbDropdown\n  [autoClose]=\"multiple ? 'outside' : true\"\n  container=\"body\"\n  dropdownClass=\"impartner-hex\"\n  (openChange)=\"_handleOpenChange($event)\"\n  class=\"w-100\">\n  <button\n    #toggleButton\n    class=\"impdc-select--toggle btn border-0 text-start\"\n    type=\"button\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    (focus)=\"_onFocus()\"\n    (blur)=\"_onBlur()\"\n    ngbDropdownToggle>\n    <ng-container [ngSwitch]=\"empty\">\n      <span\n        class=\"impdc-select--text impdc-select--placeholder\"\n        *ngSwitchCase=\"true\"\n        >{{ placeholder }}</span\n      >\n      <span\n        class=\"impdc-select--text impdc-select--value-text\"\n        *ngSwitchCase=\"false\"\n        >{{ displayedValue }}</span\n      >\n    </ng-container>\n  </button>\n  <div\n    ngbDropdownMenu\n    class=\"w-100 bg-white text-gray-600\"\n    role=\"listbox\"\n    tabindex=\"-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{padding:0!important;position:relative}:host.impdc-select--disabled{background-color:var(--impd-color-gray-100)}.impdc-select--toggle{font-weight:inherit;padding-right:3.6rem;cursor:pointer;-webkit-user-select:none;user-select:none;width:100%}:host-context(.is-invalid) .impdc-select--toggle{padding-right:6.6rem}.impdc-select--toggle:disabled{cursor:default}.impdc-select--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}button[ngbDropdownToggle].dropdown-toggle:after{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: 'tabindex', attribute: true }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SelectComponent, selector: "impdc-select", inputs: { disabled: "disabled", tabIndex: "tabIndex", placeholder: "placeholder", required: "required", multiple: "multiple", compareWith: "compareWith", errorStateMatcher: "errorStateMatcher", value: "value", id: "id" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange" }, host: { listeners: { "focus": "_onFocus(); focus()" }, properties: { "attr.id": "id", "attr.tabindex": "tabIndex", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.form-select": "true", "class.is-invalid": "errorState", "class.impdc-form-field-control": "true", "class.impdc-select--required": "required", "class.impdc-select--disabled": "disabled", "class.impdc-select--invalid": "errorState", "class.impdc-select--empty": "empty", "class.impdc-select--multiple": "multiple" } }, providers: [
-        {
-            provide: ImpdcFormFieldControl,
-            useExisting: SelectComponent
-        },
-        {
-            provide: IMPDC_SELECT_OPTION_PARENT_COMPONENT,
-            useExisting: SelectComponent
-        }
-    ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "_ngbDropdown", first: true, predicate: NgbDropdown, descendants: true }, { propertyName: "_ngbDropdownMenu", first: true, predicate: NgbDropdownMenu, descendants: true }, { propertyName: "_toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, static: true }], exportAs: ["impdcSelect"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  ngbDropdown\n  [autoClose]=\"multiple ? 'outside' : true\"\n  container=\"body\"\n  dropdownClass=\"impartner-hex\"\n  (openChange)=\"_handleOpenChange($event)\"\n  class=\"w-100\">\n  <button\n    #toggleButton\n    class=\"impdc-select--toggle btn border-0 text-start\"\n    type=\"button\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    (focus)=\"_onFocus()\"\n    (blur)=\"_onBlur()\"\n    ngbDropdownToggle>\n    <ng-container [ngSwitch]=\"empty\">\n      <span\n        class=\"impdc-select--text impdc-select--placeholder\"\n        *ngSwitchCase=\"true\"\n        >{{ placeholder }}</span\n      >\n      <span\n        class=\"impdc-select--text impdc-select--value-text\"\n        *ngSwitchCase=\"false\"\n        >{{ displayedValue }}</span\n      >\n    </ng-container>\n  </button>\n  <div\n    ngbDropdownMenu\n    class=\"w-100 bg-white text-gray-600\"\n    role=\"listbox\"\n    tabindex=\"-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{padding:0!important;position:relative}:host.impdc-select--disabled{background-color:var(--impd-color-gray-100)}.impdc-select--toggle{font-weight:inherit;padding-right:3.6rem;cursor:pointer;-webkit-user-select:none;user-select:none;width:100%}:host-context(.is-invalid) .impdc-select--toggle{padding-right:6.6rem}.impdc-select--toggle:disabled{cursor:default}.impdc-select--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}button[ngbDropdownToggle].dropdown-toggle:after{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-select', exportAs: 'impdcSelect', inputs: ['disabled', 'tabIndex'], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.id]': 'id',
@@ -4597,7 +4683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             useExisting: SelectComponent
                         }
                     ], template: "<div\n  ngbDropdown\n  [autoClose]=\"multiple ? 'outside' : true\"\n  container=\"body\"\n  dropdownClass=\"impartner-hex\"\n  (openChange)=\"_handleOpenChange($event)\"\n  class=\"w-100\">\n  <button\n    #toggleButton\n    class=\"impdc-select--toggle btn border-0 text-start\"\n    type=\"button\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    (focus)=\"_onFocus()\"\n    (blur)=\"_onBlur()\"\n    ngbDropdownToggle>\n    <ng-container [ngSwitch]=\"empty\">\n      <span\n        class=\"impdc-select--text impdc-select--placeholder\"\n        *ngSwitchCase=\"true\"\n        >{{ placeholder }}</span\n      >\n      <span\n        class=\"impdc-select--text impdc-select--value-text\"\n        *ngSwitchCase=\"false\"\n        >{{ displayedValue }}</span\n      >\n    </ng-container>\n  </button>\n  <div\n    ngbDropdownMenu\n    class=\"w-100 bg-white text-gray-600\"\n    role=\"listbox\"\n    tabindex=\"-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{padding:0!important;position:relative}:host.impdc-select--disabled{background-color:var(--impd-color-gray-100)}.impdc-select--toggle{font-weight:inherit;padding-right:3.6rem;cursor:pointer;-webkit-user-select:none;user-select:none;width:100%}:host-context(.is-invalid) .impdc-select--toggle{padding-right:6.6rem}.impdc-select--toggle:disabled{cursor:default}.impdc-select--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}button[ngbDropdownToggle].dropdown-toggle:after{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']
                 }] }, { type: ErrorStateMatcher }, { type: undefined, decorators: [{
@@ -4613,7 +4699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { options: [{
+                }] }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [SelectOptionComponent, { descendants: true }]
             }], _ngbDropdown: [{
@@ -4652,6 +4738,12 @@ function getImpdcFormFieldMissingControlError() {
 
 const IMPDC_FORM_FIELD = new InjectionToken('FormFieldComponent');
 class FormFieldComponent {
+    get _control() {
+        return this._explicitFormFieldControl || this._formFieldControl;
+    }
+    set _control(value) {
+        this._explicitFormFieldControl = value;
+    }
     constructor(_elementRef, _changeDetectorRef) {
         this._elementRef = _elementRef;
         this._changeDetectorRef = _changeDetectorRef;
@@ -4661,12 +4753,6 @@ class FormFieldComponent {
         this._isFocused = null;
         this._labelId = `impdc-form-field-label-${nanoid()}`;
     }
-    get _control() {
-        return this._explicitFormFieldControl || this._formFieldControl;
-    }
-    set _control(value) {
-        this._explicitFormFieldControl = value;
-    }
     ngAfterViewInit() {
         this._updateFocusState();
         this._changeDetectorRef.detectChanges();
@@ -4737,10 +4823,10 @@ class FormFieldComponent {
             this._changeDetectorRef.markForCheck();
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: FormFieldComponent, selector: "impdc-form-field", host: { properties: { "class.impdc-form-field-focused": "_control.focused", "class.impdc-form-field-invalid": "_control.errorState", "class.impdc-form-field-disabled": "_control.disabled", "class.ng-untouched": "_shouldForwardControlState(\"untouched\")", "class.ng-touched": "_shouldForwardControlState(\"touched\")", "class.ng-pristine": "_shouldForwardControlState(\"pristine\")", "class.ng-dirty": "_shouldForwardControlState(\"dirty\")", "class.ng-valid": "_shouldForwardControlState(\"valid\")", "class.ng-invalid": "_shouldForwardControlState(\"invalid\")", "class.ng-pending": "_shouldForwardControlState(\"pending\")" }, classAttribute: "impdc-form-field" }, providers: [{ provide: IMPDC_FORM_FIELD, useExisting: FormFieldComponent }], queries: [{ propertyName: "_formFieldControl", first: true, predicate: ImpdcFormFieldControl, descendants: true }, { propertyName: "_prefixChildren", predicate: IMPDC_PREFIX, descendants: true }, { propertyName: "_suffixChildren", predicate: IMPDC_SUFFIX, descendants: true }, { propertyName: "_errorChildren", predicate: IMPDC_ERROR, descendants: true }], viewQueries: [{ propertyName: "_inputArea", first: true, predicate: ["inputArea"], descendants: true }], exportAs: ["impdcFormField"], ngImport: i0, template: "<ng-template #labelTemplate>\n  <label\n    class=\"form-label\"\n    [id]=\"_labelId\"\n    [attr.for]=\"_formFieldControl.id\"\n    [attr.aria-owns]=\"_formFieldControl.id\">\n    <ng-content select=\"impdc-label\"></ng-content>\n  </label>\n</ng-template>\n\n<ng-template #cornerHintTemplate>\n  <div class=\"flex-shrink-1 text-gray-400 fw-medium text-end\">\n    <ng-content select=\"impdc-corner-hint\"></ng-content>\n  </div>\n</ng-template>\n\n<div class=\"d-flex justify-content-between gap-4\">\n  <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n  <ng-template [ngTemplateOutlet]=\"cornerHintTemplate\"></ng-template>\n</div>\n\n<div\n  #inputArea\n  class=\"impdc-form-field-wrapper\"\n  [class.input-group]=\"_control.supportsAffixes\"\n  [class.impdc-form-field--text]=\"_control.supportsAffixes\"\n  [class.impdc-form-field--focused]=\"_control.focused\"\n  [class.impdc-form-field--disabled]=\"_control.disabled\"\n  [class.impdc-form-field--invalid]=\"_control.errorState\"\n  [class.impdc-form-field--text--has-text-prefix]=\"_hasTextPrefix\"\n  [class.impdc-form-field--text--has-text-suffix]=\"_hasTextSuffix\">\n  <ng-container *ngIf=\"_control.supportsAffixes\">\n    <ng-content select=\"[impdcPrefix]\"></ng-content>\n    <ng-content select=\"[impdcTextPrefix]\"></ng-content>\n  </ng-container>\n\n  <ng-content></ng-content>\n\n  <ng-container *ngIf=\"_control.supportsAffixes\">\n    <ng-content select=\"[impdcTextSuffix]\"></ng-content>\n    <ng-content select=\"[impdcSuffix]\"></ng-content>\n  </ng-container>\n</div>\n\n<div\n  class=\"impdc-form-field-feedback\"\n  [class.impdc-form-field-feedback--disabled]=\"false\">\n  <div class=\"impdc-form-field-hint-wrapper\">\n    <ng-content select=\"impdc-hint\"></ng-content>\n  </div>\n  <div *ngIf=\"_showErrors()\" class=\"impdc-form-field-error-wrapper\">\n    <ng-content select=\"impdc-error, [impdc-error]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{font-size:var(--impd-font-size-sm, 1.4rem)}.impdc-form-field-wrapper{--impdc-form-field-focus-color: var(--impd-color-motion-blue-500)}.impdc-form-field-wrapper.impdc-form-field--disabled{--impartner-hex-input-opacity: .5;--impartner-hex-input-group-bg: var(--impd-color-gray-100)}.impdc-form-field-wrapper.impdc-form-field--text{background-color:var(--impartner-hex-input-group-bg, var(--impd-color-white));border:1px solid var(--impartner-hex-gray-400);border-radius:var(--impd-border-radius-md);overflow-x:hidden}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--focused{border-color:var(--impdc-form-field-focus-color)}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--invalid{--impdc-form-field-focus-color: var(--impd-color-red-600);border-color:var(--impd-color-red-600)}.impdc-form-field-wrapper.impdc-form-field--text ::ng-deep>input::-webkit-outer-spin-button,.impdc-form-field-wrapper.impdc-form-field--text ::ng-deep>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.impdc-form-field-wrapper.impdc-form-field--text ::ng-deep>input[type=number]{-moz-appearance:textfield}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control{border-radius:0;border-top:none;border-bottom:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control:first-child{border-left:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control:last-child{border-right:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control:focus{box-shadow:none}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-suffix>::ng-deep [impdcTextSuffix],.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-prefix>::ng-deep [impdcTextPrefix]{opacity:var(--impartner-hex-input-opacity, 1);color:var(--impd-color-gray-500);display:flex;align-items:center;padding:.8rem .2rem;font-size:1.4rem;text-align:center;white-space:nowrap}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-prefix>::ng-deep [impdcTextPrefix]{padding-left:1.2rem}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-prefix>::ng-deep .impdc-form-field-control{border-left:none}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-suffix>::ng-deep [impdcTextSuffix]{padding-right:1.2rem}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-suffix>::ng-deep .impdc-form-field-control{border-right:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text.inset{background-color:unset;padding-left:8px;padding-right:8px;border:none}.impdc-form-field-feedback{font-size:1.4rem;margin-top:.4rem}.impdc-form-field--disabled+.impdc-form-field-feedback{opacity:.5}.impdc-form-field-feedback .impdc-form-field-error-wrapper{color:var(--impd-color-red-600)}.impdc-form-field-feedback .impdc-form-field-hint-wrapper{color:var(--impd-color-gray-500)}.impdc-form-field-feedback .impdc-form-field-error-wrapper ::ng-deep>*,.impdc-form-field-feedback .impdc-form-field-hint-wrapper ::ng-deep>*{display:block}.impdc-form-field-feedback .impdc-form-field-error-wrapper ::ng-deep>*+*,.impdc-form-field-feedback .impdc-form-field-hint-wrapper ::ng-deep>*+*{margin-top:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FormFieldComponent, selector: "impdc-form-field", host: { properties: { "class.impdc-form-field-focused": "_control.focused", "class.impdc-form-field-invalid": "_control.errorState", "class.impdc-form-field-disabled": "_control.disabled", "class.ng-untouched": "_shouldForwardControlState(\"untouched\")", "class.ng-touched": "_shouldForwardControlState(\"touched\")", "class.ng-pristine": "_shouldForwardControlState(\"pristine\")", "class.ng-dirty": "_shouldForwardControlState(\"dirty\")", "class.ng-valid": "_shouldForwardControlState(\"valid\")", "class.ng-invalid": "_shouldForwardControlState(\"invalid\")", "class.ng-pending": "_shouldForwardControlState(\"pending\")" }, classAttribute: "impdc-form-field" }, providers: [{ provide: IMPDC_FORM_FIELD, useExisting: FormFieldComponent }], queries: [{ propertyName: "_formFieldControl", first: true, predicate: ImpdcFormFieldControl, descendants: true }, { propertyName: "_prefixChildren", predicate: IMPDC_PREFIX, descendants: true }, { propertyName: "_suffixChildren", predicate: IMPDC_SUFFIX, descendants: true }, { propertyName: "_errorChildren", predicate: IMPDC_ERROR, descendants: true }], viewQueries: [{ propertyName: "_inputArea", first: true, predicate: ["inputArea"], descendants: true }], exportAs: ["impdcFormField"], ngImport: i0, template: "<ng-template #labelTemplate>\n  <label\n    class=\"form-label\"\n    [id]=\"_labelId\"\n    [attr.for]=\"_formFieldControl.id\"\n    [attr.aria-owns]=\"_formFieldControl.id\">\n    <ng-content select=\"impdc-label\"></ng-content>\n  </label>\n</ng-template>\n\n<ng-template #cornerHintTemplate>\n  <div class=\"flex-shrink-1 text-gray-400 fw-medium text-end\">\n    <ng-content select=\"impdc-corner-hint\"></ng-content>\n  </div>\n</ng-template>\n\n<div class=\"d-flex justify-content-between gap-4\">\n  <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n  <ng-template [ngTemplateOutlet]=\"cornerHintTemplate\"></ng-template>\n</div>\n\n<div\n  #inputArea\n  class=\"impdc-form-field-wrapper\"\n  [class.input-group]=\"_control.supportsAffixes\"\n  [class.impdc-form-field--text]=\"_control.supportsAffixes\"\n  [class.impdc-form-field--focused]=\"_control.focused\"\n  [class.impdc-form-field--disabled]=\"_control.disabled\"\n  [class.impdc-form-field--invalid]=\"_control.errorState\"\n  [class.impdc-form-field--text--has-text-prefix]=\"_hasTextPrefix\"\n  [class.impdc-form-field--text--has-text-suffix]=\"_hasTextSuffix\">\n  <ng-container *ngIf=\"_control.supportsAffixes\">\n    <ng-content select=\"[impdcPrefix]\"></ng-content>\n    <ng-content select=\"[impdcTextPrefix]\"></ng-content>\n  </ng-container>\n\n  <ng-content></ng-content>\n\n  <ng-container *ngIf=\"_control.supportsAffixes\">\n    <ng-content select=\"[impdcTextSuffix]\"></ng-content>\n    <ng-content select=\"[impdcSuffix]\"></ng-content>\n  </ng-container>\n</div>\n\n<div\n  class=\"impdc-form-field-feedback\"\n  [class.impdc-form-field-feedback--disabled]=\"false\">\n  <div class=\"impdc-form-field-hint-wrapper\">\n    <ng-content select=\"impdc-hint\"></ng-content>\n  </div>\n  <div *ngIf=\"_showErrors()\" class=\"impdc-form-field-error-wrapper\">\n    <ng-content select=\"impdc-error, [impdc-error]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{font-size:var(--impd-font-size-sm, 1.4rem)}.impdc-form-field-wrapper{--impdc-form-field-focus-color: var(--impd-color-motion-blue-500)}.impdc-form-field-wrapper.impdc-form-field--disabled{--impartner-hex-input-opacity: .5;--impartner-hex-input-group-bg: var(--impd-color-gray-100)}.impdc-form-field-wrapper.impdc-form-field--text{background-color:var(--impartner-hex-input-group-bg, var(--impd-color-white));border:1px solid var(--impartner-hex-gray-400);border-radius:var(--impd-border-radius-md);overflow-x:hidden}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--focused{border-color:var(--impdc-form-field-focus-color)}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--invalid{--impdc-form-field-focus-color: var(--impd-color-red-600);border-color:var(--impd-color-red-600)}.impdc-form-field-wrapper.impdc-form-field--text ::ng-deep>input::-webkit-outer-spin-button,.impdc-form-field-wrapper.impdc-form-field--text ::ng-deep>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.impdc-form-field-wrapper.impdc-form-field--text ::ng-deep>input[type=number]{-moz-appearance:textfield}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control{border-radius:0;border-top:none;border-bottom:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control:first-child{border-left:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control:last-child{border-right:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control:focus{box-shadow:none}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-suffix>::ng-deep [impdcTextSuffix],.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-prefix>::ng-deep [impdcTextPrefix]{opacity:var(--impartner-hex-input-opacity, 1);color:var(--impd-color-gray-500);display:flex;align-items:center;padding:.8rem .2rem;font-size:1.4rem;text-align:center;white-space:nowrap}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-prefix>::ng-deep [impdcTextPrefix]{padding-left:1.2rem}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-prefix>::ng-deep .impdc-form-field-control{border-left:none}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-suffix>::ng-deep [impdcTextSuffix]{padding-right:1.2rem}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-suffix>::ng-deep .impdc-form-field-control{border-right:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text.inset{background-color:unset;padding-left:8px;padding-right:8px;border:none}.impdc-form-field-feedback{font-size:1.4rem;margin-top:.4rem}.impdc-form-field--disabled+.impdc-form-field-feedback{opacity:.5}.impdc-form-field-feedback .impdc-form-field-error-wrapper{color:var(--impd-color-red-600)}.impdc-form-field-feedback .impdc-form-field-hint-wrapper{color:var(--impd-color-gray-500)}.impdc-form-field-feedback .impdc-form-field-error-wrapper ::ng-deep>*,.impdc-form-field-feedback .impdc-form-field-hint-wrapper ::ng-deep>*{display:block}.impdc-form-field-feedback .impdc-form-field-error-wrapper ::ng-deep>*+*,.impdc-form-field-feedback .impdc-form-field-hint-wrapper ::ng-deep>*+*{margin-top:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-form-field', exportAs: 'impdcFormField', host: {
                         class: 'impdc-form-field',
@@ -4755,7 +4841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         '[class.ng-invalid]': '_shouldForwardControlState("invalid")',
                         '[class.ng-pending]': '_shouldForwardControlState("pending")'
                     }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: IMPDC_FORM_FIELD, useExisting: FormFieldComponent }], template: "<ng-template #labelTemplate>\n  <label\n    class=\"form-label\"\n    [id]=\"_labelId\"\n    [attr.for]=\"_formFieldControl.id\"\n    [attr.aria-owns]=\"_formFieldControl.id\">\n    <ng-content select=\"impdc-label\"></ng-content>\n  </label>\n</ng-template>\n\n<ng-template #cornerHintTemplate>\n  <div class=\"flex-shrink-1 text-gray-400 fw-medium text-end\">\n    <ng-content select=\"impdc-corner-hint\"></ng-content>\n  </div>\n</ng-template>\n\n<div class=\"d-flex justify-content-between gap-4\">\n  <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n  <ng-template [ngTemplateOutlet]=\"cornerHintTemplate\"></ng-template>\n</div>\n\n<div\n  #inputArea\n  class=\"impdc-form-field-wrapper\"\n  [class.input-group]=\"_control.supportsAffixes\"\n  [class.impdc-form-field--text]=\"_control.supportsAffixes\"\n  [class.impdc-form-field--focused]=\"_control.focused\"\n  [class.impdc-form-field--disabled]=\"_control.disabled\"\n  [class.impdc-form-field--invalid]=\"_control.errorState\"\n  [class.impdc-form-field--text--has-text-prefix]=\"_hasTextPrefix\"\n  [class.impdc-form-field--text--has-text-suffix]=\"_hasTextSuffix\">\n  <ng-container *ngIf=\"_control.supportsAffixes\">\n    <ng-content select=\"[impdcPrefix]\"></ng-content>\n    <ng-content select=\"[impdcTextPrefix]\"></ng-content>\n  </ng-container>\n\n  <ng-content></ng-content>\n\n  <ng-container *ngIf=\"_control.supportsAffixes\">\n    <ng-content select=\"[impdcTextSuffix]\"></ng-content>\n    <ng-content select=\"[impdcSuffix]\"></ng-content>\n  </ng-container>\n</div>\n\n<div\n  class=\"impdc-form-field-feedback\"\n  [class.impdc-form-field-feedback--disabled]=\"false\">\n  <div class=\"impdc-form-field-hint-wrapper\">\n    <ng-content select=\"impdc-hint\"></ng-content>\n  </div>\n  <div *ngIf=\"_showErrors()\" class=\"impdc-form-field-error-wrapper\">\n    <ng-content select=\"impdc-error, [impdc-error]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{font-size:var(--impd-font-size-sm, 1.4rem)}.impdc-form-field-wrapper{--impdc-form-field-focus-color: var(--impd-color-motion-blue-500)}.impdc-form-field-wrapper.impdc-form-field--disabled{--impartner-hex-input-opacity: .5;--impartner-hex-input-group-bg: var(--impd-color-gray-100)}.impdc-form-field-wrapper.impdc-form-field--text{background-color:var(--impartner-hex-input-group-bg, var(--impd-color-white));border:1px solid var(--impartner-hex-gray-400);border-radius:var(--impd-border-radius-md);overflow-x:hidden}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--focused{border-color:var(--impdc-form-field-focus-color)}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--invalid{--impdc-form-field-focus-color: var(--impd-color-red-600);border-color:var(--impd-color-red-600)}.impdc-form-field-wrapper.impdc-form-field--text ::ng-deep>input::-webkit-outer-spin-button,.impdc-form-field-wrapper.impdc-form-field--text ::ng-deep>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.impdc-form-field-wrapper.impdc-form-field--text ::ng-deep>input[type=number]{-moz-appearance:textfield}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control{border-radius:0;border-top:none;border-bottom:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text:first-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control:first-child{border-left:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text:last-child,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control:last-child{border-right:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-control:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .form-select:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .btn:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text:focus,.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .impdc-form-field-control:focus{box-shadow:none}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-suffix>::ng-deep [impdcTextSuffix],.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-prefix>::ng-deep [impdcTextPrefix]{opacity:var(--impartner-hex-input-opacity, 1);color:var(--impd-color-gray-500);display:flex;align-items:center;padding:.8rem .2rem;font-size:1.4rem;text-align:center;white-space:nowrap}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-prefix>::ng-deep [impdcTextPrefix]{padding-left:1.2rem}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-prefix>::ng-deep .impdc-form-field-control{border-left:none}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-suffix>::ng-deep [impdcTextSuffix]{padding-right:1.2rem}.impdc-form-field-wrapper.impdc-form-field--text.impdc-form-field--text--has-text-suffix>::ng-deep .impdc-form-field-control{border-right:none}.impdc-form-field-wrapper.impdc-form-field--text>::ng-deep .input-group-text.inset{background-color:unset;padding-left:8px;padding-right:8px;border:none}.impdc-form-field-feedback{font-size:1.4rem;margin-top:.4rem}.impdc-form-field--disabled+.impdc-form-field-feedback{opacity:.5}.impdc-form-field-feedback .impdc-form-field-error-wrapper{color:var(--impd-color-red-600)}.impdc-form-field-feedback .impdc-form-field-hint-wrapper{color:var(--impd-color-gray-500)}.impdc-form-field-feedback .impdc-form-field-error-wrapper ::ng-deep>*,.impdc-form-field-feedback .impdc-form-field-hint-wrapper ::ng-deep>*{display:block}.impdc-form-field-feedback .impdc-form-field-error-wrapper ::ng-deep>*+*,.impdc-form-field-feedback .impdc-form-field-hint-wrapper ::ng-deep>*+*{margin-top:.4rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _inputArea: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { _inputArea: [{
                 type: ViewChild,
                 args: ['inputArea']
             }], _formFieldControl: [{
@@ -4804,28 +4890,6 @@ const _InputDirectiveBase = mixinErrorState(class {
  * To use, import `ImpdcFormsModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class InputDirective extends _InputDirectiveBase {
-    constructor(_elementRef, ngControl, _formRoot, _parentForm, _parentFormGroup, _defaultErrorStateMatcher) {
-        super(_defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl);
-        this._elementRef = _elementRef;
-        this._uid = `impdc-input-${nanoid()}`;
-        this.focused = false;
-        this.controlType = 'impdc-input';
-        this.supportsAffixes = true;
-        this._disabled = false;
-        this._type = 'text';
-        this._readonly = false;
-        const { nativeElement } = this._elementRef;
-        const nodeName = nativeElement.nodeName.toLowerCase();
-        this._inputValueAccessor = nativeElement;
-        this.id = this.id;
-        this._isSelect = nodeName === 'select';
-        this._isTextarea = nodeName === 'textarea';
-        if (this._isSelect) {
-            this.controlType = nativeElement.multiple
-                ? 'impdc-native-select-multiple'
-                : 'impdc-native-select';
-        }
-    }
     get disabled() {
         return this._disabled;
     }
@@ -4896,26 +4960,48 @@ class InputDirective extends _InputDirectiveBase {
             this.stateChanges.next();
         }
     }
-    /** @ignore */
-    ngDoCheck() {
-        if (this.ngControl) {
-            this.updateErrorState();
-            if (this.ngControl.disabled !== null &&
-                this.ngControl.disabled !== this.disabled) {
-                this.disabled = this.ngControl.disabled;
-                this.stateChanges.next();
-            }
-        }
-    }
-    /** @ignore */
-    ngOnChanges() {
-        this.stateChanges.next();
-    }
-    /** @ignore */
-    ngOnDestroy() {
-        this.stateChanges.complete();
-    }
-    _focusChanged(isFocused) {
+    constructor(_elementRef, ngControl, _formRoot, _parentForm, _parentFormGroup, _defaultErrorStateMatcher) {
+        super(_defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl);
+        this._elementRef = _elementRef;
+        this._uid = `impdc-input-${nanoid()}`;
+        this.focused = false;
+        this.controlType = 'impdc-input';
+        this.supportsAffixes = true;
+        this._disabled = false;
+        this._type = 'text';
+        this._readonly = false;
+        const { nativeElement } = this._elementRef;
+        const nodeName = nativeElement.nodeName.toLowerCase();
+        this._inputValueAccessor = nativeElement;
+        this.id = this.id;
+        this._isSelect = nodeName === 'select';
+        this._isTextarea = nodeName === 'textarea';
+        if (this._isSelect) {
+            this.controlType = nativeElement.multiple
+                ? 'impdc-native-select-multiple'
+                : 'impdc-native-select';
+        }
+    }
+    /** @ignore */
+    ngDoCheck() {
+        if (this.ngControl) {
+            this.updateErrorState();
+            if (this.ngControl.disabled !== null &&
+                this.ngControl.disabled !== this.disabled) {
+                this.disabled = this.ngControl.disabled;
+                this.stateChanges.next();
+            }
+        }
+    }
+    /** @ignore */
+    ngOnChanges() {
+        this.stateChanges.next();
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    _focusChanged(isFocused) {
         if (isFocused !== this.focused) {
             this.focused = isFocused;
             this.stateChanges.next();
@@ -4932,10 +5018,10 @@ class InputDirective extends _InputDirectiveBase {
         // Listening to the input event wouldn't be necessary when the input is using the
         // FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: InputDirective, deps: [{ token: i0.ElementRef }, { token: i2.NgControl, optional: true, self: true }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: ErrorStateMatcher }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: { disabled: "disabled", id: "id", type: "type", required: "required", readonly: "readonly", errorStateMatcher: "errorStateMatcher", value: "value" }, host: { listeners: { "focus": "_focusChanged(true)", "blur": "_focusChanged(false)", "input": "_onInput()" }, properties: { "id": "id", "disabled": "disabled", "required": "required", "attr.id": "id", "attr.readonly": "readonly && !_isSelect || null", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.form-control": "!_isSelect", "class.form-control-color": "type === \"color\"", "class.form-select": "_isSelect", "class.impdc-form-field-control": "true", "class.is-invalid": "errorState", "class.impdc-input--invalid": "errorState", "class.impdc-input--disabled": "disabled", "class.impdc-input--required": "required" }, classAttribute: "impdc-input" }, providers: [{ provide: ImpdcFormFieldControl, useExisting: InputDirective }], exportAs: ["impdcInput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-InputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InputDirective, deps: [{ token: i0.ElementRef }, { token: i2.NgControl, optional: true, self: true }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: ErrorStateMatcher }], target: i0.ɵɵFactoryTarget.Directive });
-InputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: { disabled: "disabled", id: "id", type: "type", required: "required", readonly: "readonly", errorStateMatcher: "errorStateMatcher", value: "value" }, host: { listeners: { "focus": "_focusChanged(true)", "blur": "_focusChanged(false)", "input": "_onInput()" }, properties: { "id": "id", "disabled": "disabled", "required": "required", "attr.id": "id", "attr.readonly": "readonly && !_isSelect || null", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.form-control": "!_isSelect", "class.form-control-color": "type === \"color\"", "class.form-select": "_isSelect", "class.impdc-form-field-control": "true", "class.is-invalid": "errorState", "class.impdc-input--invalid": "errorState", "class.impdc-input--disabled": "disabled", "class.impdc-input--required": "required" }, classAttribute: "impdc-input" }, providers: [{ provide: ImpdcFormFieldControl, useExisting: InputDirective }], exportAs: ["impdcInput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: InputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]',
@@ -4965,7 +5051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     },
                     providers: [{ provide: ImpdcFormFieldControl, useExisting: InputDirective }]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -4978,7 +5064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     type: Optional
                 }] }, { type: i2.FormGroupDirective, decorators: [{
                     type: Optional
-                }] }, { type: ErrorStateMatcher }]; }, propDecorators: { disabled: [{
+                }] }, { type: ErrorStateMatcher }], propDecorators: { disabled: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -5023,15 +5109,15 @@ class SizeDetectorDirective {
         this._resizeObserver &&
             this._resizeObserver.unobserve(this._elementRef.nativeElement);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SizeDetectorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: SizeDetectorDirective, selector: "[impdcSizeDetector]", outputs: { resized: "resized" }, ngImport: i0 }); }
 }
-SizeDetectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SizeDetectorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-SizeDetectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: SizeDetectorDirective, selector: "[impdcSizeDetector]", outputs: { resized: "resized" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SizeDetectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SizeDetectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[impdcSizeDetector]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { resized: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { resized: [{
                 type: Output
             }] } });
 
@@ -5041,36 +5127,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * `ModalModule` imports and exports ImpdcFormsModule and [ButtonModule](./?path=/docs/design-components-button).
  */
 class PaginationComponent {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._summary = 'Showing {firstPageResult} to {lastPageResult} of {total} results';
-        /**
-         * The current page.
-         */
-        this.page = 0;
-        /**
-         * The number of items shown per page. Items are commonly displayed as rows in a table.
-         */
-        this.perPage = 10;
-        /**
-         * The total number of items.
-         */
-        this.total = 0;
-        /**
-         * The label text for the per page select input.
-         */
-        this.perPageLabel = '';
-        /**
-         * Emitted when the page number is changed, specifying the target page number.
-         */
-        this.goToPage = new EventEmitter();
-        /**
-         * Emitted when the per page is changed, specifying the new value.
-         */
-        this.perPageChange = new EventEmitter();
-        /** @ignore */
-        this.mobile = false;
-    }
     /**
      * A formattable text summary of pagination data. `{firstPageResult}` The first item within the current page.
      * `{lastPageResult}` The last item within the current page. `{total}` The total number of items.
@@ -5126,6 +5182,36 @@ class PaginationComponent {
             return this.perPage * page;
         }
     }
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._summary = 'Showing {firstPageResult} to {lastPageResult} of {total} results';
+        /**
+         * The current page.
+         */
+        this.page = 0;
+        /**
+         * The number of items shown per page. Items are commonly displayed as rows in a table.
+         */
+        this.perPage = 10;
+        /**
+         * The total number of items.
+         */
+        this.total = 0;
+        /**
+         * The label text for the per page select input.
+         */
+        this.perPageLabel = '';
+        /**
+         * Emitted when the page number is changed, specifying the target page number.
+         */
+        this.goToPage = new EventEmitter();
+        /**
+         * Emitted when the per page is changed, specifying the new value.
+         */
+        this.perPageChange = new EventEmitter();
+        /** @ignore */
+        this.mobile = false;
+    }
     handleResize(size) {
         this.mobile = size.width < 640;
         this._changeDetectorRef.detectChanges();
@@ -5177,13 +5263,13 @@ class PaginationComponent {
         }
         return page;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: PaginationComponent, selector: "impdc-pagination, div[impdc-pagination]", inputs: { page: "page", perPage: "perPage", total: "total", summary: "summary", perPageLabel: "perPageLabel" }, outputs: { goToPage: "goToPage", perPageChange: "perPageChange" }, ngImport: i0, template: "<div\n  class=\"pagination-container\"\n  impdcSizeDetector\n  (resized)=\"handleResize($event)\">\n  <div class=\"mobile-pagination\" [ngClass]=\"{ 'd-none': !mobile }\">\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPreviousPage()\">\n      <i impdc-icon name=\"chevron-left\"></i>\n    </button>\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page === totalPages\"\n      (click)=\"goToNextPage()\">\n      <i impdc-icon name=\"chevron-right\"></i>\n    </button>\n  </div>\n\n  <div class=\"desktop-pagination\" [ngClass]=\"{ 'd-none': mobile }\">\n    <div class=\"rows-per-page\">\n      <div>{{ perPageLabel }}</div>\n      <div>\n        <impdc-form-field>\n          <impdc-select\n            [(ngModel)]=\"perPage\"\n            (selectionChange)=\"handlePerPageChange()\">\n            <impdc-select-option [value]=\"10\" label=\"10\"></impdc-select-option>\n            <impdc-select-option [value]=\"25\" label=\"25\"></impdc-select-option>\n            <impdc-select-option [value]=\"50\" label=\"50\"></impdc-select-option>\n            <impdc-select-option\n              [value]=\"100\"\n              label=\"100\"></impdc-select-option>\n            <impdc-select-option\n              [value]=\"200\"\n              label=\"200\"></impdc-select-option>\n          </impdc-select>\n        </impdc-form-field>\n      </div>\n    </div>\n    <div class=\"pagination-rhs\">\n      <div>\n        <span class=\"summary\" [innerHTML]=\"summary\"></span>\n      </div>\n      <div class=\"pagination-actions\">\n        <button\n          impdcButton\n          theme=\"secondary\"\n          aria-label=\"First Page\"\n          class=\"pagination-first-last-btns\"\n          (click)=\"goToExactPage(1)\"\n          [disabled]=\"page <= 1\">\n          <i impdc-icon name=\"chevron-left first\"></i>\n          <i impdc-icon name=\"chevron-left\"></i>\n          <!-- 1 -->\n        </button>\n        <button\n          impdcButton\n          theme=\"secondary\"\n          class=\"previous\"\n          aria-label=\"Previous\"\n          (click)=\"goToPreviousPage()\"\n          [disabled]=\"page <= 1\">\n          <i impdc-icon name=\"chevron-left\"></i>\n        </button>\n        <div class=\"page-change\">\n          <input\n            impdcInput\n            [(ngModel)]=\"page\"\n            maxlength=\"4\"\n            (blur)=\"goToExactPageFromEvent($event)\"\n            (keydown.enter)=\"preventDefaultAndBlur($event)\" />\n          <span> / {{ totalPages }} </span>\n        </div>\n        <button\n          impdcButton\n          theme=\"secondary\"\n          aria-label=\"Next\"\n          (click)=\"goToNextPage()\"\n          [disabled]=\"page >= totalPages\">\n          <i impdc-icon name=\"chevron-right\"></i>\n        </button>\n        <button\n          impdcButton\n          theme=\"secondary\"\n          class=\"pagination-first-last-btns\"\n          aria-label=\"Last Page\"\n          (click)=\"goToExactPage(totalPages)\"\n          [disabled]=\"page === totalPages\">\n          <i impdc-icon name=\"chevron-right\"></i>\n          <i impdc-icon name=\"chevron-right last\"></i>\n          <!-- {{ totalPages }} -->\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-5);gap:1rem;color:var(--impd-color-gray-700, #374151)}.pagination-container .mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}.pagination-container .mobile-pagination button[impdcButton]{width:50%;justify-content:left}.pagination-container .desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}.pagination-container .desktop-pagination .rows-per-page{display:flex;flex-direction:row;align-items:center;gap:1rem;flex-grow:1;font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-container .desktop-pagination .pagination-rhs{display:flex;flex-direction:row;gap:2.4rem;flex-wrap:wrap;align-items:center}.pagination-container .desktop-pagination .pagination-rhs .summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-container .desktop-pagination .pagination-rhs .pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-container .desktop-pagination .pagination-rhs .pagination-actions ::ng-deep .first{margin-right:-1.2rem}.pagination-container .desktop-pagination .pagination-rhs .pagination-actions ::ng-deep .last{margin-left:-1.2rem}.pagination-container .desktop-pagination .pagination-rhs .page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.pagination-container .desktop-pagination .pagination-rhs .page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.pagination-container .desktop-pagination .pagination-rhs .pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectOptionComponent, selector: "impdc-select-option", inputs: ["value", "label", "id", "disabled"], outputs: ["onSelectionChange"] }, { kind: "component", type: SelectComponent, selector: "impdc-select", inputs: ["disabled", "tabIndex", "placeholder", "required", "multiple", "compareWith", "errorStateMatcher", "value", "id"], outputs: ["selectionChange", "valueChange"], exportAs: ["impdcSelect"] }, { kind: "component", type: FormFieldComponent, selector: "impdc-form-field", exportAs: ["impdcFormField"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }, { kind: "directive", type: SizeDetectorDirective, selector: "[impdcSizeDetector]", outputs: ["resized"] }] }); }
 }
-PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PaginationComponent, selector: "impdc-pagination, div[impdc-pagination]", inputs: { page: "page", perPage: "perPage", total: "total", summary: "summary", perPageLabel: "perPageLabel" }, outputs: { goToPage: "goToPage", perPageChange: "perPageChange" }, ngImport: i0, template: "<div\n  class=\"pagination-container\"\n  impdcSizeDetector\n  (resized)=\"handleResize($event)\">\n  <div class=\"mobile-pagination\" [ngClass]=\"{ 'd-none': !mobile }\">\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPreviousPage()\">\n      <i impdc-icon name=\"chevron-left\"></i>\n    </button>\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page === totalPages\"\n      (click)=\"goToNextPage()\">\n      <i impdc-icon name=\"chevron-right\"></i>\n    </button>\n  </div>\n\n  <div class=\"desktop-pagination\" [ngClass]=\"{ 'd-none': mobile }\">\n    <div class=\"rows-per-page\">\n      <div>{{ perPageLabel }}</div>\n      <div>\n        <impdc-form-field>\n          <impdc-select\n            [(ngModel)]=\"perPage\"\n            (selectionChange)=\"handlePerPageChange()\">\n            <impdc-select-option [value]=\"10\" label=\"10\"></impdc-select-option>\n            <impdc-select-option [value]=\"25\" label=\"25\"></impdc-select-option>\n            <impdc-select-option [value]=\"50\" label=\"50\"></impdc-select-option>\n            <impdc-select-option\n              [value]=\"100\"\n              label=\"100\"></impdc-select-option>\n            <impdc-select-option\n              [value]=\"200\"\n              label=\"200\"></impdc-select-option>\n          </impdc-select>\n        </impdc-form-field>\n      </div>\n    </div>\n    <div class=\"pagination-rhs\">\n      <div>\n        <span class=\"summary\" [innerHTML]=\"summary\"></span>\n      </div>\n      <div class=\"pagination-actions\">\n        <button\n          impdcButton\n          theme=\"secondary\"\n          aria-label=\"First Page\"\n          class=\"pagination-first-last-btns\"\n          (click)=\"goToExactPage(1)\"\n          [disabled]=\"page <= 1\">\n          <i impdc-icon name=\"chevron-left first\"></i>\n          <i impdc-icon name=\"chevron-left\"></i>\n          <!-- 1 -->\n        </button>\n        <button\n          impdcButton\n          theme=\"secondary\"\n          class=\"previous\"\n          aria-label=\"Previous\"\n          (click)=\"goToPreviousPage()\"\n          [disabled]=\"page <= 1\">\n          <i impdc-icon name=\"chevron-left\"></i>\n        </button>\n        <div class=\"page-change\">\n          <input\n            impdcInput\n            [(ngModel)]=\"page\"\n            maxlength=\"4\"\n            (blur)=\"goToExactPageFromEvent($event)\"\n            (keydown.enter)=\"preventDefaultAndBlur($event)\" />\n          <span> / {{ totalPages }} </span>\n        </div>\n        <button\n          impdcButton\n          theme=\"secondary\"\n          aria-label=\"Next\"\n          (click)=\"goToNextPage()\"\n          [disabled]=\"page >= totalPages\">\n          <i impdc-icon name=\"chevron-right\"></i>\n        </button>\n        <button\n          impdcButton\n          theme=\"secondary\"\n          class=\"pagination-first-last-btns\"\n          aria-label=\"Last Page\"\n          (click)=\"goToExactPage(totalPages)\"\n          [disabled]=\"page === totalPages\">\n          <i impdc-icon name=\"chevron-right\"></i>\n          <i impdc-icon name=\"chevron-right last\"></i>\n          <!-- {{ totalPages }} -->\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-5);gap:1rem;color:var(--impd-color-gray-700, #374151)}.pagination-container .mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}.pagination-container .mobile-pagination button[impdcButton]{width:50%;justify-content:left}.pagination-container .desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}.pagination-container .desktop-pagination .rows-per-page{display:flex;flex-direction:row;align-items:center;gap:1rem;flex-grow:1;font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-container .desktop-pagination .pagination-rhs{display:flex;flex-direction:row;gap:2.4rem;flex-wrap:wrap;align-items:center}.pagination-container .desktop-pagination .pagination-rhs .summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-container .desktop-pagination .pagination-rhs .pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-container .desktop-pagination .pagination-rhs .pagination-actions ::ng-deep .first{margin-right:-1.2rem}.pagination-container .desktop-pagination .pagination-rhs .pagination-actions ::ng-deep .last{margin-left:-1.2rem}.pagination-container .desktop-pagination .pagination-rhs .page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.pagination-container .desktop-pagination .pagination-rhs .page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.pagination-container .desktop-pagination .pagination-rhs .pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectOptionComponent, selector: "impdc-select-option", inputs: ["value", "label", "id", "disabled"], outputs: ["onSelectionChange"] }, { kind: "component", type: SelectComponent, selector: "impdc-select", inputs: ["disabled", "tabIndex", "placeholder", "required", "multiple", "compareWith", "errorStateMatcher", "value", "id"], outputs: ["selectionChange", "valueChange"], exportAs: ["impdcSelect"] }, { kind: "component", type: FormFieldComponent, selector: "impdc-form-field", exportAs: ["impdcFormField"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }, { kind: "directive", type: SizeDetectorDirective, selector: "[impdcSizeDetector]", outputs: ["resized"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-pagination, div[impdc-pagination]', template: "<div\n  class=\"pagination-container\"\n  impdcSizeDetector\n  (resized)=\"handleResize($event)\">\n  <div class=\"mobile-pagination\" [ngClass]=\"{ 'd-none': !mobile }\">\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPreviousPage()\">\n      <i impdc-icon name=\"chevron-left\"></i>\n    </button>\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page === totalPages\"\n      (click)=\"goToNextPage()\">\n      <i impdc-icon name=\"chevron-right\"></i>\n    </button>\n  </div>\n\n  <div class=\"desktop-pagination\" [ngClass]=\"{ 'd-none': mobile }\">\n    <div class=\"rows-per-page\">\n      <div>{{ perPageLabel }}</div>\n      <div>\n        <impdc-form-field>\n          <impdc-select\n            [(ngModel)]=\"perPage\"\n            (selectionChange)=\"handlePerPageChange()\">\n            <impdc-select-option [value]=\"10\" label=\"10\"></impdc-select-option>\n            <impdc-select-option [value]=\"25\" label=\"25\"></impdc-select-option>\n            <impdc-select-option [value]=\"50\" label=\"50\"></impdc-select-option>\n            <impdc-select-option\n              [value]=\"100\"\n              label=\"100\"></impdc-select-option>\n            <impdc-select-option\n              [value]=\"200\"\n              label=\"200\"></impdc-select-option>\n          </impdc-select>\n        </impdc-form-field>\n      </div>\n    </div>\n    <div class=\"pagination-rhs\">\n      <div>\n        <span class=\"summary\" [innerHTML]=\"summary\"></span>\n      </div>\n      <div class=\"pagination-actions\">\n        <button\n          impdcButton\n          theme=\"secondary\"\n          aria-label=\"First Page\"\n          class=\"pagination-first-last-btns\"\n          (click)=\"goToExactPage(1)\"\n          [disabled]=\"page <= 1\">\n          <i impdc-icon name=\"chevron-left first\"></i>\n          <i impdc-icon name=\"chevron-left\"></i>\n          <!-- 1 -->\n        </button>\n        <button\n          impdcButton\n          theme=\"secondary\"\n          class=\"previous\"\n          aria-label=\"Previous\"\n          (click)=\"goToPreviousPage()\"\n          [disabled]=\"page <= 1\">\n          <i impdc-icon name=\"chevron-left\"></i>\n        </button>\n        <div class=\"page-change\">\n          <input\n            impdcInput\n            [(ngModel)]=\"page\"\n            maxlength=\"4\"\n            (blur)=\"goToExactPageFromEvent($event)\"\n            (keydown.enter)=\"preventDefaultAndBlur($event)\" />\n          <span> / {{ totalPages }} </span>\n        </div>\n        <button\n          impdcButton\n          theme=\"secondary\"\n          aria-label=\"Next\"\n          (click)=\"goToNextPage()\"\n          [disabled]=\"page >= totalPages\">\n          <i impdc-icon name=\"chevron-right\"></i>\n        </button>\n        <button\n          impdcButton\n          theme=\"secondary\"\n          class=\"pagination-first-last-btns\"\n          aria-label=\"Last Page\"\n          (click)=\"goToExactPage(totalPages)\"\n          [disabled]=\"page === totalPages\">\n          <i impdc-icon name=\"chevron-right\"></i>\n          <i impdc-icon name=\"chevron-right last\"></i>\n          <!-- {{ totalPages }} -->\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-5);gap:1rem;color:var(--impd-color-gray-700, #374151)}.pagination-container .mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}.pagination-container .mobile-pagination button[impdcButton]{width:50%;justify-content:left}.pagination-container .desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}.pagination-container .desktop-pagination .rows-per-page{display:flex;flex-direction:row;align-items:center;gap:1rem;flex-grow:1;font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-container .desktop-pagination .pagination-rhs{display:flex;flex-direction:row;gap:2.4rem;flex-wrap:wrap;align-items:center}.pagination-container .desktop-pagination .pagination-rhs .summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-container .desktop-pagination .pagination-rhs .pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-container .desktop-pagination .pagination-rhs .pagination-actions ::ng-deep .first{margin-right:-1.2rem}.pagination-container .desktop-pagination .pagination-rhs .pagination-actions ::ng-deep .last{margin-left:-1.2rem}.pagination-container .desktop-pagination .pagination-rhs .page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.pagination-container .desktop-pagination .pagination-rhs .page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.pagination-container .desktop-pagination .pagination-rhs .pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { page: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { page: [{
                 type: Input
             }], perPage: [{
                 type: Input
@@ -5203,10 +5289,10 @@ class ToggleInputComponent {
     constructor() {
         this.classFormCheck = true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ToggleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ToggleInputComponent, selector: "input[impdc-toggle-input]", host: { properties: { "class.form-check-input": "this.classFormCheck" } }, ngImport: i0, template: '', isInline: true, styles: [""] }); }
 }
-ToggleInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToggleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ToggleInputComponent, selector: "input[impdc-toggle-input]", host: { properties: { "class.form-check-input": "this.classFormCheck" } }, ngImport: i0, template: '', isInline: true, styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToggleInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ToggleInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input[impdc-toggle-input]', template: '' }]
         }], propDecorators: { classFormCheck: [{
@@ -5215,19 +5301,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class ToggleComponent {
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
-        this._id = `impdc-toggle-${nanoid()}`;
-        this.isSwitch = false;
-        this.label = '';
-        this.description = '';
-        this.inline = false;
-        this.switchIcons = false;
-        // we don't want this to be brandable yet
-        // @Input()
-        this.branded = false;
-        this.classDefaults = 'impdc form-check';
-    }
     get classHasDescription() {
         return this.showDescription;
     }
@@ -5255,6 +5328,19 @@ class ToggleComponent {
     get showDescription() {
         return !this.inline && !!this.label && !!this.description;
     }
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this._id = `impdc-toggle-${nanoid()}`;
+        this.isSwitch = false;
+        this.label = '';
+        this.description = '';
+        this.inline = false;
+        this.switchIcons = false;
+        // we don't want this to be brandable yet
+        // @Input()
+        this.branded = false;
+        this.classDefaults = 'impdc form-check';
+    }
     ngAfterViewChecked() {
         if (this.inputRef) {
             if (!this.inputRef.nativeElement.id) {
@@ -5266,13 +5352,13 @@ class ToggleComponent {
         }
         this.changeDetectorRef.detectChanges();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ToggleComponent, selector: "impdc-toggle", inputs: { isSwitch: "isSwitch", label: "label", description: "description", inline: "inline", switchIcons: "switchIcons" }, host: { properties: { "class": "this.classDefaults", "class.impdc-toggle-has-description": "this.classHasDescription", "class.form-switch": "this.classFormSwitch", "class.form-check-inline": "this.classFormCheckInline", "class.form-switch-icons": "this.classFormSwitchIcons", "class.branded": "this.classBranded" } }, queries: [{ propertyName: "inputRef", first: true, predicate: ToggleInputComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"impdc-toggle-input\">\n  <ng-content select=\"[impdc-toggle-input]\"></ng-content>\n</div>\n<div *ngIf=\"label\" class=\"impdc-toggle-info\">\n  <label\n    *ngIf=\"label\"\n    class=\"form-check-label impdc-toggle-label\"\n    [attr.for]=\"id\"\n    >{{ label }}</label\n  >\n  <label\n    *ngIf=\"showDescription\"\n    class=\"impdc-toggle-description\"\n    [attr.for]=\"id\"\n    >{{ description }}</label\n  >\n</div>\n", styles: [":host(.impdc.form-check) .impdc-toggle-input{display:flex}:host(.impdc.form-check) .impdc-toggle-info{display:flex;flex-direction:column}:host(.impdc.form-check) .impdc-toggle-label,:host(.impdc.form-check) .impdc-toggle-description{font-size:var(--impd-font-size-sm, 1.4rem);line-height:var(--impd-size-5, 2rem)}:host(.impdc.form-check) .impdc-toggle-description{color:var(--impd-color-gray-500, #6b7280)}:host(.impdc.form-check).impdc-toggle-has-description .impdc-toggle-input{margin-top:.2rem;align-self:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ToggleComponent, selector: "impdc-toggle", inputs: { isSwitch: "isSwitch", label: "label", description: "description", inline: "inline", switchIcons: "switchIcons" }, host: { properties: { "class": "this.classDefaults", "class.impdc-toggle-has-description": "this.classHasDescription", "class.form-switch": "this.classFormSwitch", "class.form-check-inline": "this.classFormCheckInline", "class.form-switch-icons": "this.classFormSwitchIcons", "class.branded": "this.classBranded" } }, queries: [{ propertyName: "inputRef", first: true, predicate: ToggleInputComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"impdc-toggle-input\">\n  <ng-content select=\"[impdc-toggle-input]\"></ng-content>\n</div>\n<div *ngIf=\"label\" class=\"impdc-toggle-info\">\n  <label\n    *ngIf=\"label\"\n    class=\"form-check-label impdc-toggle-label\"\n    [attr.for]=\"id\"\n    >{{ label }}</label\n  >\n  <label\n    *ngIf=\"showDescription\"\n    class=\"impdc-toggle-description\"\n    [attr.for]=\"id\"\n    >{{ description }}</label\n  >\n</div>\n", styles: [":host(.impdc.form-check) .impdc-toggle-input{display:flex}:host(.impdc.form-check) .impdc-toggle-info{display:flex;flex-direction:column}:host(.impdc.form-check) .impdc-toggle-label,:host(.impdc.form-check) .impdc-toggle-description{font-size:var(--impd-font-size-sm, 1.4rem);line-height:var(--impd-size-5, 2rem)}:host(.impdc.form-check) .impdc-toggle-description{color:var(--impd-color-gray-500, #6b7280)}:host(.impdc.form-check).impdc-toggle-has-description .impdc-toggle-input{margin-top:.2rem;align-self:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-toggle', template: "<div class=\"impdc-toggle-input\">\n  <ng-content select=\"[impdc-toggle-input]\"></ng-content>\n</div>\n<div *ngIf=\"label\" class=\"impdc-toggle-info\">\n  <label\n    *ngIf=\"label\"\n    class=\"form-check-label impdc-toggle-label\"\n    [attr.for]=\"id\"\n    >{{ label }}</label\n  >\n  <label\n    *ngIf=\"showDescription\"\n    class=\"impdc-toggle-description\"\n    [attr.for]=\"id\"\n    >{{ description }}</label\n  >\n</div>\n", styles: [":host(.impdc.form-check) .impdc-toggle-input{display:flex}:host(.impdc.form-check) .impdc-toggle-info{display:flex;flex-direction:column}:host(.impdc.form-check) .impdc-toggle-label,:host(.impdc.form-check) .impdc-toggle-description{font-size:var(--impd-font-size-sm, 1.4rem);line-height:var(--impd-size-5, 2rem)}:host(.impdc.form-check) .impdc-toggle-description{color:var(--impd-color-gray-500, #6b7280)}:host(.impdc.form-check).impdc-toggle-has-description .impdc-toggle-input{margin-top:.2rem;align-self:flex-start}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isSwitch: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isSwitch: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -5332,6 +5418,44 @@ const _CheckboxComponentMixinBase = mixinTabIndex(mixinErrorState(CheckboxCompon
  * To use, import `CheckboxModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class CheckboxComponent extends _CheckboxComponentMixinBase {
+    /**
+     * Whether or not the checkbox input is checked.
+     */
+    get checked() {
+        return this.value;
+    }
+    set checked(value) {
+        this.value = value;
+        this._cvaOnChange(this.value);
+    }
+    /**
+     * Whether or not the checkbox input is in an `indeterminate` state.
+     */
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    set indeterminate(value) {
+        const coercedValue = coerceBooleanPropertyValue(value);
+        const isChange = coercedValue !== this._indeterminate;
+        this._indeterminate = coercedValue;
+        if (isChange) {
+            this.indeterminateChange.emit(this._indeterminate);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        const newDisabledState = coerceBooleanPropertyValue(value);
+        if (newDisabledState !== this._disabled) {
+            this._disabled = newDisabledState;
+            this._changeDetector.markForCheck();
+            this.stateChanges.next();
+        }
+    }
+    get inputId() {
+        return `${this.id || this._uid}-input`;
+    }
     constructor(_changeDetector, tabIndex, defaultErrorStateMatcher, formRoot, parentForm, parentFormGroup, ngControl) {
         super(defaultErrorStateMatcher, formRoot, parentForm, parentFormGroup, ngControl);
         this._changeDetector = _changeDetector;
@@ -5381,44 +5505,6 @@ class CheckboxComponent extends _CheckboxComponentMixinBase {
             });
         }
     }
-    /**
-     * Whether or not the checkbox input is checked.
-     */
-    get checked() {
-        return this.value;
-    }
-    set checked(value) {
-        this.value = value;
-        this._cvaOnChange(this.value);
-    }
-    /**
-     * Whether or not the checkbox input is in an `indeterminate` state.
-     */
-    get indeterminate() {
-        return this._indeterminate;
-    }
-    set indeterminate(value) {
-        const coercedValue = coerceBooleanPropertyValue(value);
-        const isChange = coercedValue !== this._indeterminate;
-        this._indeterminate = coercedValue;
-        if (isChange) {
-            this.indeterminateChange.emit(this._indeterminate);
-        }
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        const newDisabledState = coerceBooleanPropertyValue(value);
-        if (newDisabledState !== this._disabled) {
-            this._disabled = newDisabledState;
-            this._changeDetector.markForCheck();
-            this.stateChanges.next();
-        }
-    }
-    get inputId() {
-        return `${this.id || this._uid}-input`;
-    }
     /** @ignore */
     ngDoCheck() {
         const ngControl = this.ngControl;
@@ -5559,15 +5645,15 @@ class CheckboxComponent extends _CheckboxComponentMixinBase {
             event.stopPropagation();
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: CheckboxComponent, selector: "impdc-checkbox", inputs: { tabIndex: "tabIndex", id: "id", label: "label", description: "description", isSwitch: "isSwitch", switchIcons: "switchIcons", inline: "inline", checked: "checked", indeterminate: "indeterminate", disabled: "disabled", errorStateMatcher: "errorStateMatcher", required: "required" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "attr.id": "id", "attr.tabindex": "null", "class.impdc-checkbox--required": "required", "class.impdc-checkbox--disabled": "disabled", "class.impdc-checkbox--invalid": "errorState", "class.impdc-checkbox--inline": "inline" }, classAttribute: "impdc-checkbox" }, providers: [
+            {
+                provide: ImpdcFormFieldControl,
+                useExisting: CheckboxComponent
+            }
+        ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], exportAs: ["impdcCheckControl"], usesInheritance: true, ngImport: i0, template: "<impdc-toggle\n  [label]=\"label\"\n  [description]=\"description\"\n  [isSwitch]=\"isSwitch\"\n  [switchIcons]=\"switchIcons\"\n  [inline]=\"inline\"\n  (click)=\"_preventBubblingFromLabel($event)\">\n  <input\n    #nativeInput\n    impdc-toggle-input\n    type=\"checkbox\"\n    class=\"impdc-checkbox__native-control\"\n    [class.is-invalid]=\"errorState\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-required]=\"required\"\n    [attr.tabindex]=\"tabIndex\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [indeterminate]=\"indeterminate\"\n    (change)=\"_onInteractionEvent($event)\"\n    (click)=\"_handleCheckClick()\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\" />\n</impdc-toggle>\n", styles: [":host{display:block;opacity:var(--impartner-hex-input-opacity, 1)}:host.impdc-checkbox--inline{display:inline-block}:host.impdc-checkbox--inline:not(:last-of-type){margin-right:4rem}:host:not(.impdc-checkbox--inline):not(:last-of-type){margin-bottom:1.6rem}:host.impdc-checkbox--disabled{--impartner-hex-input-opacity: .5}:host.impdc-checkbox--invalid ::ng-deep .form-check-label{color:var(--impd-color-red-600)}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "impdc-toggle", inputs: ["isSwitch", "label", "description", "inline", "switchIcons"] }, { kind: "component", type: ToggleInputComponent, selector: "input[impdc-toggle-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CheckboxComponent, selector: "impdc-checkbox", inputs: { tabIndex: "tabIndex", id: "id", label: "label", description: "description", isSwitch: "isSwitch", switchIcons: "switchIcons", inline: "inline", checked: "checked", indeterminate: "indeterminate", disabled: "disabled", errorStateMatcher: "errorStateMatcher", required: "required" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "attr.id": "id", "attr.tabindex": "null", "class.impdc-checkbox--required": "required", "class.impdc-checkbox--disabled": "disabled", "class.impdc-checkbox--invalid": "errorState", "class.impdc-checkbox--inline": "inline" }, classAttribute: "impdc-checkbox" }, providers: [
-        {
-            provide: ImpdcFormFieldControl,
-            useExisting: CheckboxComponent
-        }
-    ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], exportAs: ["impdcCheckControl"], usesInheritance: true, ngImport: i0, template: "<impdc-toggle\n  [label]=\"label\"\n  [description]=\"description\"\n  [isSwitch]=\"isSwitch\"\n  [switchIcons]=\"switchIcons\"\n  [inline]=\"inline\"\n  (click)=\"_preventBubblingFromLabel($event)\">\n  <input\n    #nativeInput\n    impdc-toggle-input\n    type=\"checkbox\"\n    class=\"impdc-checkbox__native-control\"\n    [class.is-invalid]=\"errorState\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-required]=\"required\"\n    [attr.tabindex]=\"tabIndex\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [indeterminate]=\"indeterminate\"\n    (change)=\"_onInteractionEvent($event)\"\n    (click)=\"_handleCheckClick()\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\" />\n</impdc-toggle>\n", styles: [":host{display:block;opacity:var(--impartner-hex-input-opacity, 1)}:host.impdc-checkbox--inline{display:inline-block}:host.impdc-checkbox--inline:not(:last-of-type){margin-right:4rem}:host:not(.impdc-checkbox--inline):not(:last-of-type){margin-bottom:1.6rem}:host.impdc-checkbox--disabled{--impartner-hex-input-opacity: .5}:host.impdc-checkbox--invalid ::ng-deep .form-check-label{color:var(--impd-color-red-600)}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "impdc-toggle", inputs: ["isSwitch", "label", "description", "inline", "switchIcons"] }, { kind: "component", type: ToggleInputComponent, selector: "input[impdc-toggle-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-checkbox', host: {
                         class: 'impdc-checkbox',
@@ -5583,7 +5669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             useExisting: CheckboxComponent
                         }
                     ], template: "<impdc-toggle\n  [label]=\"label\"\n  [description]=\"description\"\n  [isSwitch]=\"isSwitch\"\n  [switchIcons]=\"switchIcons\"\n  [inline]=\"inline\"\n  (click)=\"_preventBubblingFromLabel($event)\">\n  <input\n    #nativeInput\n    impdc-toggle-input\n    type=\"checkbox\"\n    class=\"impdc-checkbox__native-control\"\n    [class.is-invalid]=\"errorState\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-required]=\"required\"\n    [attr.tabindex]=\"tabIndex\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [indeterminate]=\"indeterminate\"\n    (change)=\"_onInteractionEvent($event)\"\n    (click)=\"_handleCheckClick()\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\" />\n</impdc-toggle>\n", styles: [":host{display:block;opacity:var(--impartner-hex-input-opacity, 1)}:host.impdc-checkbox--inline{display:inline-block}:host.impdc-checkbox--inline:not(:last-of-type){margin-right:4rem}:host:not(.impdc-checkbox--inline):not(:last-of-type){margin-bottom:1.6rem}:host.impdc-checkbox--disabled{--impartner-hex-input-opacity: .5}:host.impdc-checkbox--invalid ::ng-deep .form-check-label{color:var(--impd-color-red-600)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']
                 }] }, { type: ErrorStateMatcher }, { type: undefined, decorators: [{
@@ -5599,7 +5685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { _inputElement: [{
+                }] }], propDecorators: { _inputElement: [{
                 type: ViewChild,
                 args: ['nativeInput', { read: ElementRef }]
             }], id: [{
@@ -5632,25 +5718,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class ToggleModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: ToggleModule, declarations: [ToggleComponent, ToggleInputComponent], imports: [CommonModule], exports: [ToggleComponent, ToggleInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ToggleModule, imports: [CommonModule] }); }
 }
-ToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ToggleModule, declarations: [ToggleComponent, ToggleInputComponent], imports: [CommonModule], exports: [ToggleComponent, ToggleInputComponent] });
-ToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToggleModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
                     declarations: [ToggleComponent, ToggleInputComponent],
                     exports: [ToggleComponent, ToggleInputComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class CheckboxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: CheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule, ToggleModule], exports: [CheckboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CheckboxModule, imports: [CommonModule, ToggleModule] }); }
 }
-CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule, ToggleModule], exports: [CheckboxComponent] });
-CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CheckboxModule, imports: [CommonModule, ToggleModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CheckboxComponent],
@@ -5678,35 +5764,6 @@ class RadioButtonComponentBase {
 }
 const _RadioButtonComponentMixinBase = mixinTabIndex(RadioButtonComponentBase);
 class RadioButtonComponent extends _RadioButtonComponentMixinBase {
-    constructor(_changeDetector, _radioDispatcher, tabIndex, _radioGroup) {
-        super();
-        this._changeDetector = _changeDetector;
-        this._radioDispatcher = _radioDispatcher;
-        this._radioGroup = _radioGroup;
-        this._uid = `impdc-radio-button-${nanoid()}`;
-        this._removeUniqueSelectionListener = () => { };
-        this.id = this._uid;
-        this._checked = false;
-        this._value = null;
-        this._disabled = false;
-        this._required = false;
-        /**
-         * The primary label text for the radio button.
-         */
-        this.label = '';
-        /**
-         * Text to provide additional description or context for the radio button. Does
-         * not display if `inline` is `true`.
-         */
-        this.description = '';
-        /**
-         * Event emitted when the radio button becomes selected/checked.
-         */
-        this.change = new EventEmitter();
-        if (tabIndex) {
-            this.tabIndex = coerceNumberPropertyValue(tabIndex, 0);
-        }
-    }
     /**
      * Whether or not the radio input is checked/selected.
      */
@@ -5785,6 +5842,35 @@ class RadioButtonComponent extends _RadioButtonComponentMixinBase {
     get _errorState() {
         return this._radioGroup ? this._radioGroup.errorState : false;
     }
+    constructor(_changeDetector, _radioDispatcher, tabIndex, _radioGroup) {
+        super();
+        this._changeDetector = _changeDetector;
+        this._radioDispatcher = _radioDispatcher;
+        this._radioGroup = _radioGroup;
+        this._uid = `impdc-radio-button-${nanoid()}`;
+        this._removeUniqueSelectionListener = () => { };
+        this.id = this._uid;
+        this._checked = false;
+        this._value = null;
+        this._disabled = false;
+        this._required = false;
+        /**
+         * The primary label text for the radio button.
+         */
+        this.label = '';
+        /**
+         * Text to provide additional description or context for the radio button. Does
+         * not display if `inline` is `true`.
+         */
+        this.description = '';
+        /**
+         * Event emitted when the radio button becomes selected/checked.
+         */
+        this.change = new EventEmitter();
+        if (tabIndex) {
+            this.tabIndex = coerceNumberPropertyValue(tabIndex, 0);
+        }
+    }
     /** @ignore */
     ngOnInit() {
         if (this._radioGroup) {
@@ -5855,15 +5941,15 @@ class RadioButtonComponent extends _RadioButtonComponentMixinBase {
             }
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: UniqueSelectionDispatcher }, { token: 'tabindex', attribute: true }, { token: IMPDC_RADIO_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: RadioButtonComponent, selector: "impdc-radio-button", inputs: { tabIndex: "tabIndex", id: "id", name: "name", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], checked: "checked", value: "value", inline: "inline", disabled: "disabled", required: "required", label: "label", description: "description" }, outputs: { change: "change" }, host: { properties: { "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "class.impdc-radio-button--required": "required", "class.impdc-radio-button--invalid": "_errorState", "class.impdc-radio-button--disabled": "disabled", "class.impdc-radio-button--inline": "inline" }, classAttribute: "impdc-radio-button" }, providers: [
+            {
+                provide: IMPDC_RADIO_BUTTON,
+                useExisting: RadioButtonComponent
+            }
+        ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], exportAs: ["impdcRadioButton"], usesInheritance: true, ngImport: i0, template: "<impdc-toggle [label]=\"label\" [description]=\"description\" [inline]=\"inline\">\n  <input\n    #nativeInput\n    impdc-toggle-input\n    type=\"radio\"\n    class=\"impdc-radio-button__native-control\"\n    [class.is-invalid]=\"_errorState\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [required]=\"required\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (change)=\"_onInputChange($event)\"\n    (blur)=\"_onBlur()\" />\n</impdc-toggle>\n", styles: [":host{display:block;opacity:var(--impartner-hex-input-opacity, 1)}:host.impdc-radio-button--inline{display:inline-block}:host.impdc-radio-button--inline:not(:last-of-type){margin-right:4rem}:host:not(.impdc-radio-button--inline):not(:last-of-type){margin-bottom:1.6rem}:host.impdc-radio-button--disabled{--impartner-hex-input-opacity: .5}:host.impdc-radio-button--invalid ::ng-deep .form-check-label{color:var(--impd-color-red-600)}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "impdc-toggle", inputs: ["isSwitch", "label", "description", "inline", "switchIcons"] }, { kind: "component", type: ToggleInputComponent, selector: "input[impdc-toggle-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: UniqueSelectionDispatcher }, { token: 'tabindex', attribute: true }, { token: IMPDC_RADIO_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RadioButtonComponent, selector: "impdc-radio-button", inputs: { tabIndex: "tabIndex", id: "id", name: "name", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], checked: "checked", value: "value", inline: "inline", disabled: "disabled", required: "required", label: "label", description: "description" }, outputs: { change: "change" }, host: { properties: { "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "class.impdc-radio-button--required": "required", "class.impdc-radio-button--invalid": "_errorState", "class.impdc-radio-button--disabled": "disabled", "class.impdc-radio-button--inline": "inline" }, classAttribute: "impdc-radio-button" }, providers: [
-        {
-            provide: IMPDC_RADIO_BUTTON,
-            useExisting: RadioButtonComponent
-        }
-    ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], exportAs: ["impdcRadioButton"], usesInheritance: true, ngImport: i0, template: "<impdc-toggle [label]=\"label\" [description]=\"description\" [inline]=\"inline\">\n  <input\n    #nativeInput\n    impdc-toggle-input\n    type=\"radio\"\n    class=\"impdc-radio-button__native-control\"\n    [class.is-invalid]=\"_errorState\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [required]=\"required\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (change)=\"_onInputChange($event)\"\n    (blur)=\"_onBlur()\" />\n</impdc-toggle>\n", styles: [":host{display:block;opacity:var(--impartner-hex-input-opacity, 1)}:host.impdc-radio-button--inline{display:inline-block}:host.impdc-radio-button--inline:not(:last-of-type){margin-right:4rem}:host:not(.impdc-radio-button--inline):not(:last-of-type){margin-bottom:1.6rem}:host.impdc-radio-button--disabled{--impartner-hex-input-opacity: .5}:host.impdc-radio-button--invalid ::ng-deep .form-check-label{color:var(--impd-color-red-600)}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "impdc-toggle", inputs: ["isSwitch", "label", "description", "inline", "switchIcons"] }, { kind: "component", type: ToggleInputComponent, selector: "input[impdc-toggle-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-radio-button', host: {
                         class: 'impdc-radio-button',
@@ -5882,7 +5968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             useExisting: RadioButtonComponent
                         }
                     ], template: "<impdc-toggle [label]=\"label\" [description]=\"description\" [inline]=\"inline\">\n  <input\n    #nativeInput\n    impdc-toggle-input\n    type=\"radio\"\n    class=\"impdc-radio-button__native-control\"\n    [class.is-invalid]=\"_errorState\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [required]=\"required\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (change)=\"_onInputChange($event)\"\n    (blur)=\"_onBlur()\" />\n</impdc-toggle>\n", styles: [":host{display:block;opacity:var(--impartner-hex-input-opacity, 1)}:host.impdc-radio-button--inline{display:inline-block}:host.impdc-radio-button--inline:not(:last-of-type){margin-right:4rem}:host:not(.impdc-radio-button--inline):not(:last-of-type){margin-bottom:1.6rem}:host.impdc-radio-button--disabled{--impartner-hex-input-opacity: .5}:host.impdc-radio-button--invalid ::ng-deep .form-check-label{color:var(--impd-color-red-600)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: UniqueSelectionDispatcher }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: UniqueSelectionDispatcher }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']
                 }] }, { type: undefined, decorators: [{
@@ -5890,7 +5976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     args: [IMPDC_RADIO_GROUP]
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { _inputElement: [{
+                }] }], propDecorators: { _inputElement: [{
                 type: ViewChild,
                 args: ['nativeInput', { read: ElementRef }]
             }], id: [{
@@ -5940,28 +6026,6 @@ const _RadioGroupDirectiveBase = mixinErrorState(class {
  * To use, import `RadioModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class RadioGroupDirective extends _RadioGroupDirectiveBase {
-    constructor(_changeDetector, _defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl) {
-        super(_defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl);
-        this._changeDetector = _changeDetector;
-        this._uid = `impdc-radio-group-${nanoid()}`;
-        this._initialized = false;
-        this._cvaOnChange = () => { };
-        this._cvaOnTouched = () => { };
-        this._name = this._uid;
-        this._inline = false;
-        this._selected = null;
-        /**
-         * Event emitted whenever a new radio option is selected.
-         */
-        this.change = new EventEmitter();
-        this._focused = false;
-        this._disabled = false;
-        this.controlType = 'impdc-radio-group';
-        this.supportsAffixes = false;
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
     /**
      * The unique name for the group of radio options; Autogenerated by default.
      */
@@ -5993,6 +6057,28 @@ class RadioGroupDirective extends _RadioGroupDirectiveBase {
         this.value = selected ? selected.value : null;
         this._checkSelectedRadioOption();
     }
+    constructor(_changeDetector, _defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl) {
+        super(_defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl);
+        this._changeDetector = _changeDetector;
+        this._uid = `impdc-radio-group-${nanoid()}`;
+        this._initialized = false;
+        this._cvaOnChange = () => { };
+        this._cvaOnTouched = () => { };
+        this._name = this._uid;
+        this._inline = false;
+        this._selected = null;
+        /**
+         * Event emitted whenever a new radio option is selected.
+         */
+        this.change = new EventEmitter();
+        this._focused = false;
+        this._disabled = false;
+        this.controlType = 'impdc-radio-group';
+        this.supportsAffixes = false;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
     /** @ignore */
     ngAfterContentInit() {
         this._initialized = true;
@@ -6128,19 +6214,19 @@ class RadioGroupDirective extends _RadioGroupDirectiveBase {
             });
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RadioGroupDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: RadioGroupDirective, selector: "impdc-radio-group", inputs: { name: "name", inline: "inline", selected: "selected", errorStateMatcher: "errorStateMatcher", value: "value", id: "id", disabled: "disabled", required: "required" }, outputs: { change: "change" }, host: { attributes: { "role": "radiogroup" }, properties: { "class.impdc-radio-group--required": "required", "class.impdc-radio-group--disabled": "disabled", "class.impdc-radio-group--invalid": "errorState", "class.impdc-radio-group--inline": "inline" }, classAttribute: "impdc-radio-group" }, providers: [
+            {
+                provide: ImpdcFormFieldControl,
+                useExisting: RadioGroupDirective
+            },
+            {
+                provide: IMPDC_RADIO_GROUP,
+                useExisting: RadioGroupDirective
+            }
+        ], queries: [{ propertyName: "_radioOptions", predicate: IMPDC_RADIO_BUTTON, descendants: true }], exportAs: ["impdcRadioGroup"], usesInheritance: true, ngImport: i0 }); }
 }
-RadioGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RadioGroupDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-RadioGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RadioGroupDirective, selector: "impdc-radio-group", inputs: { name: "name", inline: "inline", selected: "selected", errorStateMatcher: "errorStateMatcher", value: "value", id: "id", disabled: "disabled", required: "required" }, outputs: { change: "change" }, host: { attributes: { "role": "radiogroup" }, properties: { "class.impdc-radio-group--required": "required", "class.impdc-radio-group--disabled": "disabled", "class.impdc-radio-group--invalid": "errorState", "class.impdc-radio-group--inline": "inline" }, classAttribute: "impdc-radio-group" }, providers: [
-        {
-            provide: ImpdcFormFieldControl,
-            useExisting: RadioGroupDirective
-        },
-        {
-            provide: IMPDC_RADIO_GROUP,
-            useExisting: RadioGroupDirective
-        }
-    ], queries: [{ propertyName: "_radioOptions", predicate: IMPDC_RADIO_BUTTON, descendants: true }], exportAs: ["impdcRadioGroup"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RadioGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RadioGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -6166,7 +6252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         '[class.impdc-radio-group--inline]': 'inline'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ErrorStateMatcher }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ErrorStateMatcher }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -6179,7 +6265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { _radioOptions: [{
+                }] }], propDecorators: { _radioOptions: [{
                 type: ContentChildren,
                 args: [IMPDC_RADIO_BUTTON, { descendants: true }]
             }], name: [{
@@ -6203,11 +6289,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class RadioModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: RadioModule, declarations: [RadioButtonComponent, RadioGroupDirective], imports: [ReactiveFormsModule, ToggleModule], exports: [RadioButtonComponent, RadioGroupDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RadioModule, imports: [ReactiveFormsModule, ToggleModule] }); }
 }
-RadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RadioModule, declarations: [RadioButtonComponent, RadioGroupDirective], imports: [ReactiveFormsModule, ToggleModule], exports: [RadioButtonComponent, RadioGroupDirective] });
-RadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RadioModule, imports: [ReactiveFormsModule, ToggleModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RadioModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [RadioButtonComponent, RadioGroupDirective],
@@ -6217,15 +6303,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class SelectModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: SelectModule, declarations: [SelectOptionComponent, SelectComponent], imports: [CommonModule, NgbDropdownModule, IconModule], exports: [NgbDropdownModule,
+            IconModule,
+            SelectOptionComponent,
+            SelectComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectModule, imports: [CommonModule, NgbDropdownModule, IconModule, NgbDropdownModule,
+            IconModule] }); }
 }
-SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SelectModule, declarations: [SelectOptionComponent, SelectComponent], imports: [CommonModule, NgbDropdownModule, IconModule], exports: [NgbDropdownModule,
-        IconModule,
-        SelectOptionComponent,
-        SelectComponent] });
-SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectModule, imports: [CommonModule, NgbDropdownModule, IconModule, NgbDropdownModule,
-        IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, NgbDropdownModule, IconModule],
@@ -6240,34 +6326,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class ImpdcFormsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ImpdcFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: ImpdcFormsModule, declarations: [FormFieldComponent,
+            InputDirective,
+            CornerHintDirective,
+            ErrorDirective,
+            HintDirective,
+            LabelDirective,
+            PrefixDirective,
+            RootFormGroupDirective,
+            RootNgFormDirective,
+            SuffixDirective], imports: [CommonModule, CheckboxModule, RadioModule, SelectModule], exports: [CheckboxModule,
+            RadioModule,
+            SelectModule,
+            FormFieldComponent,
+            InputDirective,
+            CornerHintDirective,
+            ErrorDirective,
+            HintDirective,
+            LabelDirective,
+            PrefixDirective,
+            RootFormGroupDirective,
+            RootNgFormDirective,
+            SuffixDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ImpdcFormsModule, imports: [CommonModule, CheckboxModule, RadioModule, SelectModule, CheckboxModule,
+            RadioModule,
+            SelectModule] }); }
 }
-ImpdcFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImpdcFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ImpdcFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ImpdcFormsModule, declarations: [FormFieldComponent,
-        InputDirective,
-        CornerHintDirective,
-        ErrorDirective,
-        HintDirective,
-        LabelDirective,
-        PrefixDirective,
-        RootFormGroupDirective,
-        RootNgFormDirective,
-        SuffixDirective], imports: [CommonModule, CheckboxModule, RadioModule, SelectModule], exports: [CheckboxModule,
-        RadioModule,
-        SelectModule,
-        FormFieldComponent,
-        InputDirective,
-        CornerHintDirective,
-        ErrorDirective,
-        HintDirective,
-        LabelDirective,
-        PrefixDirective,
-        RootFormGroupDirective,
-        RootNgFormDirective,
-        SuffixDirective] });
-ImpdcFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImpdcFormsModule, imports: [CommonModule, CheckboxModule, RadioModule, SelectModule, CheckboxModule,
-        RadioModule,
-        SelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImpdcFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ImpdcFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -6302,11 +6388,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class SizeDetectionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SizeDetectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: SizeDetectionModule, declarations: [SizeDetectorDirective], imports: [CommonModule], exports: [SizeDetectorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SizeDetectionModule, imports: [CommonModule] }); }
 }
-SizeDetectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SizeDetectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SizeDetectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SizeDetectionModule, declarations: [SizeDetectorDirective], imports: [CommonModule], exports: [SizeDetectorDirective] });
-SizeDetectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SizeDetectionModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SizeDetectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SizeDetectionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SizeDetectorDirective],
@@ -6317,21 +6403,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class PaginationModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule,
+            ButtonModule,
+            FormsModule,
+            ImpdcFormsModule,
+            IconModule,
+            SizeDetectionModule], exports: [ButtonModule, ImpdcFormsModule, IconModule, PaginationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PaginationModule, imports: [CommonModule,
+            ButtonModule,
+            FormsModule,
+            ImpdcFormsModule,
+            IconModule,
+            SizeDetectionModule, ButtonModule, ImpdcFormsModule, IconModule] }); }
 }
-PaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule,
-        ButtonModule,
-        FormsModule,
-        ImpdcFormsModule,
-        IconModule,
-        SizeDetectionModule], exports: [ButtonModule, ImpdcFormsModule, IconModule, PaginationComponent] });
-PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule,
-        ButtonModule,
-        FormsModule,
-        ImpdcFormsModule,
-        IconModule,
-        SizeDetectionModule, ButtonModule, ImpdcFormsModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PaginationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6345,7 +6431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     declarations: [PaginationComponent],
                     exports: [ButtonModule, ImpdcFormsModule, IconModule, PaginationComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class ColumnHeadingComponent {
     constructor() {
@@ -6361,10 +6447,10 @@ class ColumnHeadingComponent {
     onSort() {
         this.sort.emit(this.columnIndex);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ColumnHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ColumnHeadingComponent, selector: "impdc-column-heading", inputs: { isSortable: "isSortable", columnIndex: "columnIndex", sortColumnIndex: "sortColumnIndex", direction: "direction", text: "text" }, outputs: { sort: "sort" }, ngImport: i0, template: "<a *ngIf=\"isSortable; else notClickable\" class=\"impdc-table-sort\">\n  <span>\n    {{ text }}\n  </span>\n  <span\n    [ngClass]=\"sortedColumn ? 'visible' : 'invisible'\"\n    impdc-icon\n    [name]=\"direction === 'asc' ? 'arrow-up' : 'arrow-down'\"></span>\n</a>\n<ng-template #notClickable>\n  {{ text }}\n</ng-template>\n", styles: [":host .impdc-table-sort{color:var(--impd-color-gray-500);display:flex;flex-direction:row;gap:.8rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] }); }
 }
-ColumnHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ColumnHeadingComponent, selector: "impdc-column-heading", inputs: { isSortable: "isSortable", columnIndex: "columnIndex", sortColumnIndex: "sortColumnIndex", direction: "direction", text: "text" }, outputs: { sort: "sort" }, ngImport: i0, template: "<a *ngIf=\"isSortable; else notClickable\" class=\"impdc-table-sort\">\n  <span>\n    {{ text }}\n  </span>\n  <span\n    [ngClass]=\"sortedColumn ? 'visible' : 'invisible'\"\n    impdc-icon\n    [name]=\"direction === 'asc' ? 'arrow-up' : 'arrow-down'\"></span>\n</a>\n<ng-template #notClickable>\n  {{ text }}\n</ng-template>\n", styles: [":host .impdc-table-sort{color:var(--impd-color-gray-500);display:flex;flex-direction:row;gap:.8rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnHeadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ColumnHeadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-column-heading', template: "<a *ngIf=\"isSortable; else notClickable\" class=\"impdc-table-sort\">\n  <span>\n    {{ text }}\n  </span>\n  <span\n    [ngClass]=\"sortedColumn ? 'visible' : 'invisible'\"\n    impdc-icon\n    [name]=\"direction === 'asc' ? 'arrow-up' : 'arrow-down'\"></span>\n</a>\n<ng-template #notClickable>\n  {{ text }}\n</ng-template>\n", styles: [":host .impdc-table-sort{color:var(--impd-color-gray-500);display:flex;flex-direction:row;gap:.8rem;align-items:center}\n"] }]
         }], propDecorators: { isSortable: [{
@@ -6382,14 +6468,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class TableBulkActionsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableBulkActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: TableBulkActionsComponent, selector: "impdc-table-bulk-actions", ngImport: i0, template: "<div class=\"table-bulk-actions\">\n  <div class=\"selected-total\">\n    <ng-content select=\"[selectedTotal]\"></ng-content>\n  </div>\n  <div class=\"bulk-actions\">\n    <ng-content select=\"[bulkAction]\"></ng-content>\n  </div>\n</div>\n", styles: [".table-bulk-actions{display:flex;flex-direction:row;align-items:center;font-weight:400}.table-bulk-actions .selected-total{border-right:1px solid var(--impd-color-gray-200, \"#e5e7eb\");padding-right:1.6rem}.table-bulk-actions .bulk-actions{padding-left:1.6rem;display:flex;flex-direction:row;gap:1.6rem}\n"] }); }
 }
-TableBulkActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableBulkActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableBulkActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableBulkActionsComponent, selector: "impdc-table-bulk-actions", ngImport: i0, template: "<div class=\"table-bulk-actions\">\n  <div class=\"selected-total\">\n    <ng-content select=\"[selectedTotal]\"></ng-content>\n  </div>\n  <div class=\"bulk-actions\">\n    <ng-content select=\"[bulkAction]\"></ng-content>\n  </div>\n</div>\n", styles: [".table-bulk-actions{display:flex;flex-direction:row;align-items:center;font-weight:400}.table-bulk-actions .selected-total{border-right:1px solid var(--impd-color-gray-200, \"#e5e7eb\");padding-right:1.6rem}.table-bulk-actions .bulk-actions{padding-left:1.6rem;display:flex;flex-direction:row;gap:1.6rem}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableBulkActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableBulkActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-table-bulk-actions', template: "<div class=\"table-bulk-actions\">\n  <div class=\"selected-total\">\n    <ng-content select=\"[selectedTotal]\"></ng-content>\n  </div>\n  <div class=\"bulk-actions\">\n    <ng-content select=\"[bulkAction]\"></ng-content>\n  </div>\n</div>\n", styles: [".table-bulk-actions{display:flex;flex-direction:row;align-items:center;font-weight:400}.table-bulk-actions .selected-total{border-right:1px solid var(--impd-color-gray-200, \"#e5e7eb\");padding-right:1.6rem}.table-bulk-actions .bulk-actions{padding-left:1.6rem;display:flex;flex-direction:row;gap:1.6rem}\n"] }]
         }] });
 
+class RowActionsComponent {
+    constructor(_branded) {
+        this.lastColumn = false;
+        this.actionClick = new EventEmitter();
+        /** @ignore */
+        this.branded = false;
+        this.branded = _branded ? true : false;
+    }
+    isVisible(action) {
+        if (!action.isVisible) {
+            return true;
+        }
+        return action.isVisible(this.rowItem);
+    }
+    handleActionClick(apiName) {
+        this.actionClick.emit(apiName);
+    }
+    getColor(action) {
+        return TableThemeHelper.getColor(action.theme);
+    }
+    getButtonThemeFromComponentTheme(componentTheme) {
+        switch (componentTheme) {
+            case ComponentTheme.Primary:
+                return 'primary';
+            case ComponentTheme.Danger:
+                return 'danger';
+            case ComponentTheme.Secondary:
+            default:
+                return 'secondary';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RowActionsComponent, deps: [{ token: BrandedDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.1", type: RowActionsComponent, selector: "impdc-row-actions", inputs: { columnDef: "columnDef", rowItem: "rowItem", lastColumn: "lastColumn" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "@if (columnDef.actions) { @if (columnDef.actions.length > 2) {\n<div [ngClass]=\"{ 'text-end': lastColumn }\">\n  <div\n    ngbDropdown\n    container=\"body\"\n    dropdownClass=\"impartner-hex\"\n    placement=\"bottom-end bottom-start top-end top-start\"\n    class=\"lh-1\"\n    #dropdown=\"ngbDropdown\">\n    <button\n      ngbDropdownToggle\n      type=\"button\"\n      class=\"row-actions-dropdown-toggle btn btn-link btn-sm no-caret p-0\">\n      <impdc-icon name=\"ellipsis-v\" size=\"16\" theme=\"solid\"></impdc-icon>\n    </button>\n    <div ngbDropdownMenu>\n      @for (action of columnDef.actions; track action.apiName) { @if\n      (isVisible(action)) {\n      <button\n        type=\"button\"\n        ngbDropdownItem\n        (click)=\"handleActionClick(action.apiName)\">\n        {{ action.text }}\n      </button>\n      } }\n    </div>\n  </div>\n</div>\n} @else {\n<div class=\"d-flex flex-row gap-2 justify-content-end\">\n  <ng-container *ngFor=\"let action of columnDef.actions\">\n    @if (isVisible(action)) { @if (columnDef.actionType === 'button') {\n    <button\n      impdcButton\n      theme=\"secondary\"\n      class=\"btn-xs\"\n      (click)=\"handleActionClick(action.apiName)\">\n      {{ action.text }}\n    </button>\n    } @else if (columnDef.actionType === 'link') {\n    <a *ngIf=\"!branded\" (click)=\"handleActionClick(action.apiName)\">\n      {{ action.text }}\n    </a>\n    <a *ngIf=\"branded\" impdcBranded (click)=\"handleActionClick(action.apiName)\">\n      {{ action.text }}\n    </a>\n    } @else {\n    <span\n      impdc-icon\n      [name]=\"action.iconName || 'edit'\"\n      [ngClass]=\"getColor(action)\"\n      class=\"row-actions-item\"\n      (click)=\"handleActionClick(action.apiName)\">\n    </span>\n    } }\n  </ng-container>\n</div>\n} }\n", styles: [".row-actions-item:hover{cursor:pointer}:host button.row-actions-dropdown-toggle{color:var(--impd-color-gray-400)}:host button.row-actions-dropdown-toggle:hover,:host button.row-actions-dropdown-toggle:active,:host button.row-actions-dropdown-toggle:focus,:host button.row-actions-dropdown-toggle:focus-visible,:host button.row-actions-dropdown-toggle.show{color:var(--impd-color-gray-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "directive", type: BrandedDirective, selector: "[impdcBranded]" }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "directive", type: i4.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i4.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i4.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: RowActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'impdc-row-actions', template: "@if (columnDef.actions) { @if (columnDef.actions.length > 2) {\n<div [ngClass]=\"{ 'text-end': lastColumn }\">\n  <div\n    ngbDropdown\n    container=\"body\"\n    dropdownClass=\"impartner-hex\"\n    placement=\"bottom-end bottom-start top-end top-start\"\n    class=\"lh-1\"\n    #dropdown=\"ngbDropdown\">\n    <button\n      ngbDropdownToggle\n      type=\"button\"\n      class=\"row-actions-dropdown-toggle btn btn-link btn-sm no-caret p-0\">\n      <impdc-icon name=\"ellipsis-v\" size=\"16\" theme=\"solid\"></impdc-icon>\n    </button>\n    <div ngbDropdownMenu>\n      @for (action of columnDef.actions; track action.apiName) { @if\n      (isVisible(action)) {\n      <button\n        type=\"button\"\n        ngbDropdownItem\n        (click)=\"handleActionClick(action.apiName)\">\n        {{ action.text }}\n      </button>\n      } }\n    </div>\n  </div>\n</div>\n} @else {\n<div class=\"d-flex flex-row gap-2 justify-content-end\">\n  <ng-container *ngFor=\"let action of columnDef.actions\">\n    @if (isVisible(action)) { @if (columnDef.actionType === 'button') {\n    <button\n      impdcButton\n      theme=\"secondary\"\n      class=\"btn-xs\"\n      (click)=\"handleActionClick(action.apiName)\">\n      {{ action.text }}\n    </button>\n    } @else if (columnDef.actionType === 'link') {\n    <a *ngIf=\"!branded\" (click)=\"handleActionClick(action.apiName)\">\n      {{ action.text }}\n    </a>\n    <a *ngIf=\"branded\" impdcBranded (click)=\"handleActionClick(action.apiName)\">\n      {{ action.text }}\n    </a>\n    } @else {\n    <span\n      impdc-icon\n      [name]=\"action.iconName || 'edit'\"\n      [ngClass]=\"getColor(action)\"\n      class=\"row-actions-item\"\n      (click)=\"handleActionClick(action.apiName)\">\n    </span>\n    } }\n  </ng-container>\n</div>\n} }\n", styles: [".row-actions-item:hover{cursor:pointer}:host button.row-actions-dropdown-toggle{color:var(--impd-color-gray-400)}:host button.row-actions-dropdown-toggle:hover,:host button.row-actions-dropdown-toggle:active,:host button.row-actions-dropdown-toggle:focus,:host button.row-actions-dropdown-toggle:focus-visible,:host button.row-actions-dropdown-toggle.show{color:var(--impd-color-gray-600)}\n"] }]
+        }], ctorParameters: () => [{ type: BrandedDirective, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { columnDef: [{
+                type: Input,
+                args: [{ required: true }]
+            }], rowItem: [{
+                type: Input,
+                args: [{ required: true }]
+            }], lastColumn: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
 /**
  * The `SpinnerComponent` (`<impdc-spinner` or `<div impdc-spinner`) is used when data is processing and content isn't ready to be interacted with yet.
  * To use, import `SpinnerModule` or another module that imports and exports that module from `@impartner/design-components`.
@@ -6401,10 +6538,10 @@ class SpinnerComponent {
          */
         this.accessibilityText = 'Loading...';
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: SpinnerComponent, selector: "impdc-spinner, div[impdc-spinner]", inputs: { accessibilityText: "accessibilityText" }, ngImport: i0, template: "<div class=\"spinner-border\" role=\"status\">\n  <span *ngIf=\"accessibilityText\" class=\"visually-hidden\">{{\n    accessibilityText\n  }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SpinnerComponent, selector: "impdc-spinner, div[impdc-spinner]", inputs: { accessibilityText: "accessibilityText" }, ngImport: i0, template: "<div class=\"spinner-border\" role=\"status\">\n  <span *ngIf=\"accessibilityText\" class=\"visually-hidden\">{{\n    accessibilityText\n  }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-spinner, div[impdc-spinner]', template: "<div class=\"spinner-border\" role=\"status\">\n  <span *ngIf=\"accessibilityText\" class=\"visually-hidden\">{{\n    accessibilityText\n  }}</span>\n</div>\n" }]
         }], propDecorators: { accessibilityText: [{
@@ -6469,7 +6606,10 @@ class BadgeComponent {
         return classes;
     }
     get classBadgeRounded() {
-        return this.rounded;
+        return this.rounded && !this.hideBg;
+    }
+    get classNoPadding() {
+        return this.hideBg;
     }
     handleDismiss(event) {
         if (!this.dismissable) {
@@ -6478,10 +6618,10 @@ class BadgeComponent {
         this._dismissed = true;
         this.dismiss.emit(event);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: BadgeComponent, selector: "impdc-badge, [impdc-badge]", inputs: { text: "text", icon: "icon", theme: "theme", size: "size", hideBg: "hideBg", rounded: "rounded", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.classBadge", "class.rounded-pill": "this.classBadgeRounded", "class.px-0": "this.classNoPadding", "hidden": "this._dismissed" } }, ngImport: i0, template: "<span *ngIf=\"icon\" impdc-icon [name]=\"icon === 'dot' ? 'circle' : icon\"></span>\n{{ text }}\n<a *ngIf=\"dismissable\" (click)=\"handleDismiss($event)\">\n  <span impdc-icon name=\"times\"></span>\n</a>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] }); }
 }
-BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BadgeComponent, selector: "impdc-badge, [impdc-badge]", inputs: { text: "text", icon: "icon", theme: "theme", size: "size", hideBg: "hideBg", rounded: "rounded", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.classBadge", "class.rounded-pill": "this.classBadgeRounded", "hidden": "this._dismissed" } }, ngImport: i0, template: "<span *ngIf=\"icon\" impdc-icon [name]=\"icon === 'dot' ? 'circle' : icon\"></span>\n{{ text }}\n<a *ngIf=\"dismissable\" (click)=\"handleDismiss($event)\">\n  <span impdc-icon name=\"times\"></span>\n</a>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-badge, [impdc-badge]', template: "<span *ngIf=\"icon\" impdc-icon [name]=\"icon === 'dot' ? 'circle' : icon\"></span>\n{{ text }}\n<a *ngIf=\"dismissable\" (click)=\"handleDismiss($event)\">\n  <span impdc-icon name=\"times\"></span>\n</a>\n" }]
         }], propDecorators: { text: [{
@@ -6506,6 +6646,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], classBadgeRounded: [{
                 type: HostBinding,
                 args: ['class.rounded-pill']
+            }], classNoPadding: [{
+                type: HostBinding,
+                args: ['class.px-0']
             }], _dismissed: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -6526,10 +6669,10 @@ class TableDirective {
     get classTableStriped() {
         return this.striped;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: TableDirective, selector: "table[impdcTable]", inputs: { striped: "striped" }, host: { properties: { "class.table": "this.classTable", "class.table-striped": "this.classTableStriped" } }, ngImport: i0 }); }
 }
-TableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TableDirective, selector: "table[impdcTable]", inputs: { striped: "striped" }, host: { properties: { "class.table": "this.classTable", "class.table-striped": "this.classTableStriped" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'table[impdcTable]'
@@ -6548,7 +6691,6 @@ class TableInjectComponentDirective {
     constructor(_viewContainerRef, _componentFactoryResolver) {
         this._viewContainerRef = _viewContainerRef;
         this._componentFactoryResolver = _componentFactoryResolver;
-        this.columnDef = { title: '' };
         this.value = '';
         this.rowItem = { id: 0 };
         this.customCellComponents = {};
@@ -6570,16 +6712,17 @@ class TableInjectComponentDirective {
         componentRef.instance.rowItem = item;
         componentRef.instance.params = cellRendererParams;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableInjectComponentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: TableInjectComponentDirective, selector: "[impdcTableInjectComponent]", inputs: { columnDef: "columnDef", value: "value", rowItem: "rowItem", customCellComponents: "customCellComponents" }, ngImport: i0 }); }
 }
-TableInjectComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableInjectComponentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-TableInjectComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TableInjectComponentDirective, selector: "[impdcTableInjectComponent]", inputs: { columnDef: "columnDef", value: "value", rowItem: "rowItem", customCellComponents: "customCellComponents" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableInjectComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableInjectComponentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[impdcTableInjectComponent]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { columnDef: [{
-                type: Input
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }], propDecorators: { columnDef: [{
+                type: Input,
+                args: [{ required: true }]
             }], value: [{
                 type: Input
             }], rowItem: [{
@@ -6593,6 +6736,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * To use, import `TableModule` from `@impartner/design-components`.
  */
 class TableComponent {
+    /**
+     * Whether individual rows can be selected. Will be `true` if explicitly set to `true` or `canSelectAllRows` is `true`.
+     */
+    set canSelectRows(value) {
+        this._canSelectRows = value;
+    }
+    get canSelectRows() {
+        return this.canSelectAllRows || this._canSelectRows || !!this.bulkActions;
+    }
+    /**
+     * Whether all rows can be selected at once. Will be `true` if explicitly set to `true` or if `TableBulkActionsComponent` is content projected.
+     */
+    set canSelectAllRows(value) {
+        this._canSelectAllRows = value;
+    }
+    get canSelectAllRows() {
+        return this._canSelectAllRows || !!this.bulkActions;
+    }
+    /**
+     * An array of currently selected IDs from the `tableData` input.  Array must be of type `(string | number)[]`.
+     */
+    set selectedRowIds(value) {
+        this._selectedRowIds = [...value];
+    }
+    get selectedRowIds() {
+        return [...this._selectedRowIds];
+    }
+    /** @ignore */
+    get someSelected() {
+        return (!!this._selectedRowIds &&
+            this._selectedRowIds.length > 0 &&
+            !!this.tableData &&
+            this.tableData.length > 0 &&
+            this._selectedRowIds.length < this.tableData.length);
+    }
+    /** @ignore */
+    get tableSpan() {
+        return this.canSelectRows
+            ? this.columnDefs.length + 1
+            : this.columnDefs.length;
+    }
     constructor(_datePipe, _percentPipe, _decmialPipe, _changeDetectorRef, _branded) {
         this._datePipe = _datePipe;
         this._percentPipe = _percentPipe;
@@ -6643,6 +6827,10 @@ class TableComponent {
          * Event emitted when a row link is clicked. Emits `ITableEventPayload` payload.
          */
         this.linkClick = new EventEmitter();
+        /**
+         * Event emitted when a row action is clicked. Emits an `ITableRowActionPayload` payload.
+         */
+        this.rowActionClick = new EventEmitter();
         /** @ignore */
         this.paginationComponent = undefined;
         /** @ignore */
@@ -6667,47 +6855,6 @@ class TableComponent {
             .pipe(debounceTime(DEBOUNCE_TIME))
             .subscribe(this.inputChange);
     }
-    /**
-     * Whether individual rows can be selected. Will be `true` if explicitly set to `true` or `canSelectAllRows` is `true`.
-     */
-    set canSelectRows(value) {
-        this._canSelectRows = value;
-    }
-    get canSelectRows() {
-        return this.canSelectAllRows || this._canSelectRows || !!this.bulkActions;
-    }
-    /**
-     * Whether all rows can be selected at once. Will be `true` if explicitly set to `true` or if `TableBulkActionsComponent` is content projected.
-     */
-    set canSelectAllRows(value) {
-        this._canSelectAllRows = value;
-    }
-    get canSelectAllRows() {
-        return this._canSelectAllRows || !!this.bulkActions;
-    }
-    /**
-     * An array of currently selected IDs from the `tableData` input.  Array must be of type `(string | number)[]`.
-     */
-    set selectedRowIds(value) {
-        this._selectedRowIds = [...value];
-    }
-    get selectedRowIds() {
-        return [...this._selectedRowIds];
-    }
-    /** @ignore */
-    get someSelected() {
-        return (!!this._selectedRowIds &&
-            this._selectedRowIds.length > 0 &&
-            !!this.tableData &&
-            this.tableData.length > 0 &&
-            this._selectedRowIds.length < this.tableData.length);
-    }
-    /** @ignore */
-    get tableSpan() {
-        return this.canSelectRows
-            ? this.columnDefs.length + 1
-            : this.columnDefs.length;
-    }
     ngOnChanges(changes) {
         if (changes['selectedRowIds'] || changes['tableData']) {
             if (!this.tableData ||
@@ -6887,6 +7034,16 @@ class TableComponent {
             columnIndex
         });
     }
+    handleActionClick(columnIndex, item, actionApiName) {
+        this.rowActionClick.emit({
+            item,
+            columnIndex,
+            actionApiName
+        });
+    }
+    columnDefIsActions(columnDef) {
+        return columnDef.columnType === TableColumnType.Actions;
+    }
     _getColumnDefByIndex(columnIndex) {
         return this.columnDefs[columnIndex];
     }
@@ -6902,17 +7059,17 @@ class TableComponent {
             return '';
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableComponent, deps: [{ token: i1.DatePipe }, { token: i1.PercentPipe }, { token: i1.DecimalPipe }, { token: i0.ChangeDetectorRef }, { token: BrandedDirective, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.1", type: TableComponent, selector: "impdc-table", inputs: { loading: "loading", columnDefs: "columnDefs", striped: "striped", canSelectRows: "canSelectRows", canSelectAllRows: "canSelectAllRows", selectPlaceholder: "selectPlaceholder", sortColumnIndex: "sortColumnIndex", sortDirection: "sortDirection", tableData: "tableData", selectedRowIds: "selectedRowIds", customCellComponents: "customCellComponents" }, outputs: { rowSelect: "rowSelect", sortBy: "sortBy", linkClick: "linkClick", rowActionClick: "rowActionClick", inputChange: "inputChange" }, queries: [{ propertyName: "paginationComponent", first: true, predicate: PaginationComponent, descendants: true }, { propertyName: "bulkActions", first: true, predicate: TableBulkActionsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (tableData) {\n<table impdcTable [striped]=\"striped\">\n  <thead>\n    @if (!!bulkActions) {\n    <tr>\n      <th [attr.colspan]=\"tableSpan\" scope=\"col\" class=\"bulk-action-column\">\n        <ng-content select=\"impdc-table-bulk-actions\"></ng-content>\n        <ng-content select=\"[impdcTableBulkActions]\"></ng-content>\n      </th>\n    </tr>\n    }\n    <tr>\n      @if (canSelectRows) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'heading-below-bulk-actions': !!bulkActions\n        }\">\n        @if (canSelectAllRows) {\n        <div>\n          <impdc-checkbox\n            ngModel\n            [checked]=\"allSelected\"\n            [indeterminate]=\"someSelected\"\n            (change)=\"handleSelectAll($event)\"></impdc-checkbox>\n        </div>\n        }\n      </th>\n      } @for (columnDef of columnDefs; track columnDef; let columnIndex =\n      $index) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'sorted-column': isSortedColumn(columnIndex),\n          'sortable-column': columnDef.sorted,\n          'heading-below-bulk-actions': !!bulkActions\n        }\"\n        (click)=\"handleSort(columnIndex)\">\n        <impdc-column-heading\n          [isSortable]=\"columnDef.sorted || false\"\n          [columnIndex]=\"columnIndex\"\n          [sortColumnIndex]=\"sortColumnIndex\"\n          [direction]=\"sortDirection\"\n          [text]=\"columnDef.title\"\n          (sort)=\"handleSort($event)\">\n        </impdc-column-heading>\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (loading) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"data-loading\">\n        <impdc-spinner></impdc-spinner>\n      </td>\n    </tr>\n    } @else { @for (row of tableData; track row; let rowIndex = $index) {\n    <tr>\n      @if (canSelectRows) {\n      <td>\n        <div class=\"select-column\">\n          <impdc-checkbox\n            [ngModel]=\"isRowSelected(row.id)\"\n            (change)=\"handleRowSelect($event, row.id)\"></impdc-checkbox>\n        </div>\n      </td>\n      }\n      <td\n        *ngFor=\"let columnDef of columnDefs; index as colIndex; last as isLast\"\n        [ngClass]=\"{\n          'col-no-padding': !!columnDef.noPadding,\n          'actions-column': columnDef.columnType === cellType.Actions\n        }\">\n        <div>\n          @switch (columnDef.columnType) { @case (cellType.Badge) {\n          <span>\n            <impdc-badge\n              [text]=\"getStringValue(colIndex, row)\"\n              [theme]=\"getTheme(columnDef, row)\">\n            </impdc-badge>\n          </span>\n          } @case (cellType.Link) {\n          <span (click)=\"handleLinkClick(colIndex, row)\">\n            @if (!branded) {\n            <a>\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded>\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Url) {\n          <span>\n            @if (!branded) {\n            <a target=\"_blank\" [attr.href]=\"getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a\n              impdcBranded\n              target=\"_blank\"\n              [attr.href]=\"getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Email) {\n          <span>\n            @if (!branded) {\n            <a\n              target=\"_blank\"\n              [attr.href]=\"'mailto:' + getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded [attr.href]=\"getMailToValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Input) {\n          <span>\n            <input\n              impdcInput\n              type=\"text\"\n              class=\"{{ getCellColor(columnDef, row) }}\"\n              [ngModel]=\"getValue(colIndex, row)\"\n              (ngModelChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event)\n              \" />\n          </span>\n          } @case (cellType.Boolean) {\n          <span>\n            @if (columnDef.disabled && getValue(colIndex, row) === 'true') {\n            <span\n              impdc-icon\n              name=\"check\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n            } @else if (!columnDef.disabled) {\n            <impdc-checkbox\n              [checked]=\"getValue(colIndex, row) === 'true'\"\n              [isSwitch]=\"true\"\n              (change)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.checked)\n              \"></impdc-checkbox>\n            }\n          </span>\n          } @case (cellType.SingleSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \">\n              @if (selectPlaceholder) {\n              <impdc-select-option value [label]=\"selectPlaceholder\">\n              </impdc-select-option>\n              } @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.MultiSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              multiple=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.CellRender) {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            <ng-template\n              impdcTableInjectComponent\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [customCellComponents]=\"customCellComponents || {}\"\n              [value]=\"getRawValue(colIndex, row)\"></ng-template>\n          </span>\n          } @case (cellType.Icon) {\n          <span>\n            <span\n              impdc-icon\n              [name]=\"columnDef.iconName\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n          </span>\n          } @case (cellType.Actions) {\n          <span>\n            <!-- will always return 'true', but needed to satisfy the type engine -->\n            @if (columnDefIsActions(columnDef)) {\n            <impdc-row-actions\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [lastColumn]=\"isLast\"\n              (actionClick)=\"\n                handleActionClick(colIndex, row, $event)\n              \"></impdc-row-actions>\n            }\n          </span>\n          } @default {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            {{ getValue(colIndex, row) }}\n          </span>\n          } }\n        </div>\n      </td>\n    </tr>\n    } @empty {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"no-data\">\n        <ng-content select=\"[noData]\"></ng-content>\n      </td>\n    </tr>\n    } }\n  </tbody>\n  <tfoot>\n    @if (paginationComponent) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\">\n        <ng-content\n          select=\"impdc-pagination, div[impdc-pagination]\"></ng-content>\n      </td>\n    </tr>\n    }\n  </tfoot>\n</table>\n}\n", styles: [".bulk-action-container{display:flex;flex-direction:row;border:1px solid var(--impd-color-gray-200);border-top-left-radius:.6rem;border-top-right-radius:.6rem;border-bottom:0px}.bulk-action-container .bulk-action-checkbox{padding:1.6rem 2rem}.bulk-action-container .bulk-actions{display:flex;flex-direction:row;gap:.4rem}.col-no-padding{padding:0!important}.data-loading{height:var(--impd-size-80);vertical-align:middle;text-align:center}.no-data{vertical-align:middle;text-align:center}.select-row{display:flex;height:var(--impd-size-4);align-items:center;justify-items:end;border-radius:var(--impd-border-radius-default)}.heading-with-checkbox{padding-left:5px;padding-right:10px}.actions-column{width:.1%;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: BrandedDirective, selector: "[impdcBranded]" }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "component", type: CheckboxComponent, selector: "impdc-checkbox", inputs: ["tabIndex", "id", "label", "description", "isSwitch", "switchIcons", "inline", "checked", "indeterminate", "disabled", "errorStateMatcher", "required"], outputs: ["change", "indeterminateChange"], exportAs: ["impdcCheckControl"] }, { kind: "component", type: SelectOptionComponent, selector: "impdc-select-option", inputs: ["value", "label", "id", "disabled"], outputs: ["onSelectionChange"] }, { kind: "component", type: SelectComponent, selector: "impdc-select", inputs: ["disabled", "tabIndex", "placeholder", "required", "multiple", "compareWith", "errorStateMatcher", "value", "id"], outputs: ["selectionChange", "valueChange"], exportAs: ["impdcSelect"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SpinnerComponent, selector: "impdc-spinner, div[impdc-spinner]", inputs: ["accessibilityText"] }, { kind: "component", type: BadgeComponent, selector: "impdc-badge, [impdc-badge]", inputs: ["text", "icon", "theme", "size", "hideBg", "rounded", "dismissable"], outputs: ["dismiss"] }, { kind: "directive", type: TableDirective, selector: "table[impdcTable]", inputs: ["striped"] }, { kind: "component", type: ColumnHeadingComponent, selector: "impdc-column-heading", inputs: ["isSortable", "columnIndex", "sortColumnIndex", "direction", "text"], outputs: ["sort"] }, { kind: "directive", type: TableInjectComponentDirective, selector: "[impdcTableInjectComponent]", inputs: ["columnDef", "value", "rowItem", "customCellComponents"] }, { kind: "component", type: RowActionsComponent, selector: "impdc-row-actions", inputs: ["columnDef", "rowItem", "lastColumn"], outputs: ["actionClick"] }] }); }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableComponent, deps: [{ token: i1.DatePipe }, { token: i1.PercentPipe }, { token: i1.DecimalPipe }, { token: i0.ChangeDetectorRef }, { token: BrandedDirective, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableComponent, selector: "impdc-table", inputs: { loading: "loading", columnDefs: "columnDefs", striped: "striped", canSelectRows: "canSelectRows", canSelectAllRows: "canSelectAllRows", selectPlaceholder: "selectPlaceholder", sortColumnIndex: "sortColumnIndex", sortDirection: "sortDirection", tableData: "tableData", selectedRowIds: "selectedRowIds", customCellComponents: "customCellComponents" }, outputs: { rowSelect: "rowSelect", sortBy: "sortBy", linkClick: "linkClick", inputChange: "inputChange" }, queries: [{ propertyName: "paginationComponent", first: true, predicate: PaginationComponent, descendants: true }, { propertyName: "bulkActions", first: true, predicate: TableBulkActionsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table impdcTable *ngIf=\"tableData\" [striped]=\"striped\">\n  <thead>\n    <tr *ngIf=\"!!bulkActions\">\n      <th [attr.colspan]=\"tableSpan\" scope=\"col\" class=\"bulk-action-column\">\n        <ng-content select=\"impdc-table-bulk-actions\"></ng-content>\n        <ng-content select=\"[impdcTableBulkActions]\"></ng-content>\n      </th>\n    </tr>\n    <tr>\n      <th\n        *ngIf=\"canSelectRows\"\n        scope=\"col\"\n        [ngClass]=\"{\n          'heading-below-bulk-actions': !!bulkActions\n        }\">\n        <div *ngIf=\"canSelectAllRows\">\n          <impdc-checkbox\n            ngModel\n            [checked]=\"allSelected\"\n            [indeterminate]=\"someSelected\"\n            (change)=\"handleSelectAll($event)\"></impdc-checkbox>\n        </div>\n      </th>\n      <th\n        scope=\"col\"\n        *ngFor=\"let columnDef of columnDefs; index as columnIndex\"\n        [ngClass]=\"{\n          'sorted-column': isSortedColumn(columnIndex),\n          'sortable-column': columnDef.sorted,\n          'heading-below-bulk-actions': !!bulkActions\n        }\"\n        (click)=\"handleSort(columnIndex)\">\n        <impdc-column-heading\n          [isSortable]=\"columnDef.sorted || false\"\n          [columnIndex]=\"columnIndex\"\n          [sortColumnIndex]=\"sortColumnIndex\"\n          [direction]=\"sortDirection\"\n          [text]=\"columnDef.title\"\n          (sort)=\"handleSort($event)\">\n        </impdc-column-heading>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngIf=\"loading; else data\">\n      <td [attr.colspan]=\"tableSpan\" class=\"data-loading\">\n        <impdc-spinner></impdc-spinner>\n      </td>\n    </tr>\n    <ng-template #data>\n      <tr *ngIf=\"tableData.length === 0\">\n        <td [attr.colspan]=\"tableSpan\" class=\"no-data\">\n          <ng-content select=\"[noData]\"></ng-content>\n        </td>\n      </tr>\n      <tr *ngFor=\"let row of tableData; index as rowIndex\">\n        <td *ngIf=\"canSelectRows\">\n          <div class=\"select-column\">\n            <impdc-checkbox\n              [ngModel]=\"isRowSelected(row.id)\"\n              (change)=\"handleRowSelect($event, row.id)\"></impdc-checkbox>\n          </div>\n        </td>\n        <td\n          *ngFor=\"let columnDef of columnDefs; index as colIndex\"\n          [ngClass]=\"{\n            'col-no-padding': !!columnDef.noPadding\n          }\">\n          <div [ngSwitch]=\"columnDef.columnType\">\n            <span *ngSwitchCase=\"cellType.Badge\">\n              <impdc-badge\n                [text]=\"getStringValue(colIndex, row)\"\n                [theme]=\"getTheme(columnDef, row)\">\n              </impdc-badge>\n            </span>\n            <span\n              *ngSwitchCase=\"cellType.Link\"\n              class=\"cell-type-link\"\n              (click)=\"handleLinkClick(colIndex, row)\">\n              <a *ngIf=\"!branded\">\n                {{ getValue(colIndex, row) }}\n              </a>\n              <a *ngIf=\"branded\" impdcBranded>\n                {{ getValue(colIndex, row) }}\n              </a>\n            </span>\n            <span *ngSwitchCase=\"cellType.Url\" class=\"cell-type-link\">\n              <a\n                *ngIf=\"!branded\"\n                target=\"_blank\"\n                [attr.href]=\"getValue(colIndex, row)\">\n                {{ getValue(colIndex, row) }}\n              </a>\n              <a\n                *ngIf=\"branded\"\n                impdcBranded\n                target=\"_blank\"\n                [attr.href]=\"getValue(colIndex, row)\">\n                {{ getValue(colIndex, row) }}\n              </a>\n            </span>\n            <span *ngSwitchCase=\"cellType.Email\" class=\"cell-type-link\">\n              <a\n                *ngIf=\"!branded\"\n                target=\"_blank\"\n                [attr.href]=\"'mailto:' + getValue(colIndex, row)\">\n                {{ getValue(colIndex, row) }}\n              </a>\n              <a\n                *ngIf=\"branded\"\n                impdcBranded\n                [attr.href]=\"getMailToValue(colIndex, row)\">\n                {{ getValue(colIndex, row) }}\n              </a>\n            </span>\n            <span *ngSwitchCase=\"cellType.Input\">\n              <input\n                impdcInput\n                type=\"text\"\n                class=\"{{ getCellColor(columnDef, row) }}\"\n                [ngModel]=\"getValue(colIndex, row)\"\n                (ngModelChange)=\"\n                  handleCellValueChange(colIndex, rowIndex, $event)\n                \" />\n            </span>\n            <span *ngSwitchCase=\"cellType.Boolean\">\n              <span\n                *ngIf=\"columnDef.disabled && getValue(colIndex, row) === 'true'\"\n                impdc-icon\n                name=\"check\"\n                class=\"{{ getCellColor(columnDef, row) }}\"></span>\n              <impdc-checkbox\n                *ngIf=\"!columnDef.disabled\"\n                [checked]=\"getValue(colIndex, row) === 'true'\"\n                [isSwitch]=\"true\"\n                (change)=\"\n                  handleCellValueChange(colIndex, rowIndex, $event.checked)\n                \"></impdc-checkbox>\n            </span>\n            <span *ngSwitchCase=\"cellType.SingleSelect\">\n              <impdc-select\n                [ngModel]=\"getValue(colIndex, row)\"\n                [disabled]=\"columnDef.disabled || false\"\n                [placeholder]=\"selectPlaceholder\"\n                (selectionChange)=\"\n                  handleCellValueChange(colIndex, rowIndex, $event.value)\n                \">\n                <impdc-select-option\n                  *ngIf=\"selectPlaceholder\"\n                  value\n                  [label]=\"selectPlaceholder\">\n                </impdc-select-option>\n                <impdc-select-option\n                  *ngFor=\"let value of columnDef.values || []\"\n                  [value]=\"value.value\"\n                  [label]=\"value.label\"></impdc-select-option>\n              </impdc-select>\n            </span>\n            <span *ngSwitchCase=\"cellType.MultiSelect\">\n              <impdc-select\n                [ngModel]=\"getValue(colIndex, row)\"\n                [disabled]=\"columnDef.disabled || false\"\n                [placeholder]=\"selectPlaceholder\"\n                multiple=\"true\"\n                (selectionChange)=\"\n                  handleCellValueChange(colIndex, rowIndex, $event.value)\n                \">\n                <impdc-select-option\n                  *ngFor=\"let value of columnDef.values || []\"\n                  [value]=\"value.value\"\n                  [label]=\"value.label\"></impdc-select-option>\n              </impdc-select>\n            </span>\n            <span\n              *ngSwitchCase=\"cellType.CellRender\"\n              class=\"{{ getCellColor(columnDef, row) }}\">\n              <ng-template\n                impdcTableInjectComponent\n                [columnDef]=\"columnDef\"\n                [rowItem]=\"row\"\n                [customCellComponents]=\"customCellComponents || {}\"\n                [value]=\"getRawValue(colIndex, row)\"></ng-template>\n            </span>\n            <span *ngSwitchCase=\"cellType.Icon\">\n              <span\n                impdc-icon\n                [name]=\"columnDef.iconName\"\n                class=\"{{ getCellColor(columnDef, row) }}\"></span>\n            </span>\n            <span *ngSwitchDefault class=\"{{ getCellColor(columnDef, row) }}\">\n              {{ getValue(colIndex, row) }}\n            </span>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </tbody>\n  <tfoot>\n    <tr *ngIf=\"paginationComponent\">\n      <td [attr.colspan]=\"tableSpan\">\n        <ng-content\n          select=\"impdc-pagination, div[impdc-pagination]\"></ng-content>\n      </td>\n    </tr>\n  </tfoot>\n</table>\n", styles: [".bulk-action-container{display:flex;flex-direction:row;border:1px solid var(--impd-color-gray-200);border-top-left-radius:.6rem;border-top-right-radius:.6rem;border-bottom:0px}.bulk-action-container .bulk-action-checkbox{padding:1.6rem 2rem}.bulk-action-container .bulk-actions{display:flex;flex-direction:row;gap:.4rem}.col-no-padding{padding:0!important}.data-loading{height:var(--impd-size-80);vertical-align:middle;text-align:center}.no-data{vertical-align:middle;text-align:center}.select-row{display:flex;height:var(--impd-size-4);align-items:center;justify-items:end;border-radius:var(--impd-border-radius-default)}.heading-with-checkbox{padding-left:5px;padding-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: BrandedDirective, selector: "[impdcBranded]" }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "component", type: CheckboxComponent, selector: "impdc-checkbox", inputs: ["tabIndex", "id", "label", "description", "isSwitch", "switchIcons", "inline", "checked", "indeterminate", "disabled", "errorStateMatcher", "required"], outputs: ["change", "indeterminateChange"], exportAs: ["impdcCheckControl"] }, { kind: "component", type: SelectOptionComponent, selector: "impdc-select-option", inputs: ["value", "label", "id", "disabled"], outputs: ["onSelectionChange"] }, { kind: "component", type: SelectComponent, selector: "impdc-select", inputs: ["disabled", "tabIndex", "placeholder", "required", "multiple", "compareWith", "errorStateMatcher", "value", "id"], outputs: ["selectionChange", "valueChange"], exportAs: ["impdcSelect"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SpinnerComponent, selector: "impdc-spinner, div[impdc-spinner]", inputs: ["accessibilityText"] }, { kind: "component", type: BadgeComponent, selector: "impdc-badge, [impdc-badge]", inputs: ["text", "icon", "theme", "size", "hideBg", "rounded", "dismissable"], outputs: ["dismiss"] }, { kind: "directive", type: TableDirective, selector: "table[impdcTable]", inputs: ["striped"] }, { kind: "component", type: ColumnHeadingComponent, selector: "impdc-column-heading", inputs: ["isSortable", "columnIndex", "sortColumnIndex", "direction", "text"], outputs: ["sort"] }, { kind: "directive", type: TableInjectComponentDirective, selector: "[impdcTableInjectComponent]", inputs: ["columnDef", "value", "rowItem", "customCellComponents"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-table', template: "<table impdcTable *ngIf=\"tableData\" [striped]=\"striped\">\n  <thead>\n    <tr *ngIf=\"!!bulkActions\">\n      <th [attr.colspan]=\"tableSpan\" scope=\"col\" class=\"bulk-action-column\">\n        <ng-content select=\"impdc-table-bulk-actions\"></ng-content>\n        <ng-content select=\"[impdcTableBulkActions]\"></ng-content>\n      </th>\n    </tr>\n    <tr>\n      <th\n        *ngIf=\"canSelectRows\"\n        scope=\"col\"\n        [ngClass]=\"{\n          'heading-below-bulk-actions': !!bulkActions\n        }\">\n        <div *ngIf=\"canSelectAllRows\">\n          <impdc-checkbox\n            ngModel\n            [checked]=\"allSelected\"\n            [indeterminate]=\"someSelected\"\n            (change)=\"handleSelectAll($event)\"></impdc-checkbox>\n        </div>\n      </th>\n      <th\n        scope=\"col\"\n        *ngFor=\"let columnDef of columnDefs; index as columnIndex\"\n        [ngClass]=\"{\n          'sorted-column': isSortedColumn(columnIndex),\n          'sortable-column': columnDef.sorted,\n          'heading-below-bulk-actions': !!bulkActions\n        }\"\n        (click)=\"handleSort(columnIndex)\">\n        <impdc-column-heading\n          [isSortable]=\"columnDef.sorted || false\"\n          [columnIndex]=\"columnIndex\"\n          [sortColumnIndex]=\"sortColumnIndex\"\n          [direction]=\"sortDirection\"\n          [text]=\"columnDef.title\"\n          (sort)=\"handleSort($event)\">\n        </impdc-column-heading>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngIf=\"loading; else data\">\n      <td [attr.colspan]=\"tableSpan\" class=\"data-loading\">\n        <impdc-spinner></impdc-spinner>\n      </td>\n    </tr>\n    <ng-template #data>\n      <tr *ngIf=\"tableData.length === 0\">\n        <td [attr.colspan]=\"tableSpan\" class=\"no-data\">\n          <ng-content select=\"[noData]\"></ng-content>\n        </td>\n      </tr>\n      <tr *ngFor=\"let row of tableData; index as rowIndex\">\n        <td *ngIf=\"canSelectRows\">\n          <div class=\"select-column\">\n            <impdc-checkbox\n              [ngModel]=\"isRowSelected(row.id)\"\n              (change)=\"handleRowSelect($event, row.id)\"></impdc-checkbox>\n          </div>\n        </td>\n        <td\n          *ngFor=\"let columnDef of columnDefs; index as colIndex\"\n          [ngClass]=\"{\n            'col-no-padding': !!columnDef.noPadding\n          }\">\n          <div [ngSwitch]=\"columnDef.columnType\">\n            <span *ngSwitchCase=\"cellType.Badge\">\n              <impdc-badge\n                [text]=\"getStringValue(colIndex, row)\"\n                [theme]=\"getTheme(columnDef, row)\">\n              </impdc-badge>\n            </span>\n            <span\n              *ngSwitchCase=\"cellType.Link\"\n              class=\"cell-type-link\"\n              (click)=\"handleLinkClick(colIndex, row)\">\n              <a *ngIf=\"!branded\">\n                {{ getValue(colIndex, row) }}\n              </a>\n              <a *ngIf=\"branded\" impdcBranded>\n                {{ getValue(colIndex, row) }}\n              </a>\n            </span>\n            <span *ngSwitchCase=\"cellType.Url\" class=\"cell-type-link\">\n              <a\n                *ngIf=\"!branded\"\n                target=\"_blank\"\n                [attr.href]=\"getValue(colIndex, row)\">\n                {{ getValue(colIndex, row) }}\n              </a>\n              <a\n                *ngIf=\"branded\"\n                impdcBranded\n                target=\"_blank\"\n                [attr.href]=\"getValue(colIndex, row)\">\n                {{ getValue(colIndex, row) }}\n              </a>\n            </span>\n            <span *ngSwitchCase=\"cellType.Email\" class=\"cell-type-link\">\n              <a\n                *ngIf=\"!branded\"\n                target=\"_blank\"\n                [attr.href]=\"'mailto:' + getValue(colIndex, row)\">\n                {{ getValue(colIndex, row) }}\n              </a>\n              <a\n                *ngIf=\"branded\"\n                impdcBranded\n                [attr.href]=\"getMailToValue(colIndex, row)\">\n                {{ getValue(colIndex, row) }}\n              </a>\n            </span>\n            <span *ngSwitchCase=\"cellType.Input\">\n              <input\n                impdcInput\n                type=\"text\"\n                class=\"{{ getCellColor(columnDef, row) }}\"\n                [ngModel]=\"getValue(colIndex, row)\"\n                (ngModelChange)=\"\n                  handleCellValueChange(colIndex, rowIndex, $event)\n                \" />\n            </span>\n            <span *ngSwitchCase=\"cellType.Boolean\">\n              <span\n                *ngIf=\"columnDef.disabled && getValue(colIndex, row) === 'true'\"\n                impdc-icon\n                name=\"check\"\n                class=\"{{ getCellColor(columnDef, row) }}\"></span>\n              <impdc-checkbox\n                *ngIf=\"!columnDef.disabled\"\n                [checked]=\"getValue(colIndex, row) === 'true'\"\n                [isSwitch]=\"true\"\n                (change)=\"\n                  handleCellValueChange(colIndex, rowIndex, $event.checked)\n                \"></impdc-checkbox>\n            </span>\n            <span *ngSwitchCase=\"cellType.SingleSelect\">\n              <impdc-select\n                [ngModel]=\"getValue(colIndex, row)\"\n                [disabled]=\"columnDef.disabled || false\"\n                [placeholder]=\"selectPlaceholder\"\n                (selectionChange)=\"\n                  handleCellValueChange(colIndex, rowIndex, $event.value)\n                \">\n                <impdc-select-option\n                  *ngIf=\"selectPlaceholder\"\n                  value\n                  [label]=\"selectPlaceholder\">\n                </impdc-select-option>\n                <impdc-select-option\n                  *ngFor=\"let value of columnDef.values || []\"\n                  [value]=\"value.value\"\n                  [label]=\"value.label\"></impdc-select-option>\n              </impdc-select>\n            </span>\n            <span *ngSwitchCase=\"cellType.MultiSelect\">\n              <impdc-select\n                [ngModel]=\"getValue(colIndex, row)\"\n                [disabled]=\"columnDef.disabled || false\"\n                [placeholder]=\"selectPlaceholder\"\n                multiple=\"true\"\n                (selectionChange)=\"\n                  handleCellValueChange(colIndex, rowIndex, $event.value)\n                \">\n                <impdc-select-option\n                  *ngFor=\"let value of columnDef.values || []\"\n                  [value]=\"value.value\"\n                  [label]=\"value.label\"></impdc-select-option>\n              </impdc-select>\n            </span>\n            <span\n              *ngSwitchCase=\"cellType.CellRender\"\n              class=\"{{ getCellColor(columnDef, row) }}\">\n              <ng-template\n                impdcTableInjectComponent\n                [columnDef]=\"columnDef\"\n                [rowItem]=\"row\"\n                [customCellComponents]=\"customCellComponents || {}\"\n                [value]=\"getRawValue(colIndex, row)\"></ng-template>\n            </span>\n            <span *ngSwitchCase=\"cellType.Icon\">\n              <span\n                impdc-icon\n                [name]=\"columnDef.iconName\"\n                class=\"{{ getCellColor(columnDef, row) }}\"></span>\n            </span>\n            <span *ngSwitchDefault class=\"{{ getCellColor(columnDef, row) }}\">\n              {{ getValue(colIndex, row) }}\n            </span>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </tbody>\n  <tfoot>\n    <tr *ngIf=\"paginationComponent\">\n      <td [attr.colspan]=\"tableSpan\">\n        <ng-content\n          select=\"impdc-pagination, div[impdc-pagination]\"></ng-content>\n      </td>\n    </tr>\n  </tfoot>\n</table>\n", styles: [".bulk-action-container{display:flex;flex-direction:row;border:1px solid var(--impd-color-gray-200);border-top-left-radius:.6rem;border-top-right-radius:.6rem;border-bottom:0px}.bulk-action-container .bulk-action-checkbox{padding:1.6rem 2rem}.bulk-action-container .bulk-actions{display:flex;flex-direction:row;gap:.4rem}.col-no-padding{padding:0!important}.data-loading{height:var(--impd-size-80);vertical-align:middle;text-align:center}.no-data{vertical-align:middle;text-align:center}.select-row{display:flex;height:var(--impd-size-4);align-items:center;justify-items:end;border-radius:var(--impd-border-radius-default)}.heading-with-checkbox{padding-left:5px;padding-right:10px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: i1.PercentPipe }, { type: i1.DecimalPipe }, { type: i0.ChangeDetectorRef }, { type: BrandedDirective, decorators: [{
+            args: [{ selector: 'impdc-table', template: "@if (tableData) {\n<table impdcTable [striped]=\"striped\">\n  <thead>\n    @if (!!bulkActions) {\n    <tr>\n      <th [attr.colspan]=\"tableSpan\" scope=\"col\" class=\"bulk-action-column\">\n        <ng-content select=\"impdc-table-bulk-actions\"></ng-content>\n        <ng-content select=\"[impdcTableBulkActions]\"></ng-content>\n      </th>\n    </tr>\n    }\n    <tr>\n      @if (canSelectRows) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'heading-below-bulk-actions': !!bulkActions\n        }\">\n        @if (canSelectAllRows) {\n        <div>\n          <impdc-checkbox\n            ngModel\n            [checked]=\"allSelected\"\n            [indeterminate]=\"someSelected\"\n            (change)=\"handleSelectAll($event)\"></impdc-checkbox>\n        </div>\n        }\n      </th>\n      } @for (columnDef of columnDefs; track columnDef; let columnIndex =\n      $index) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'sorted-column': isSortedColumn(columnIndex),\n          'sortable-column': columnDef.sorted,\n          'heading-below-bulk-actions': !!bulkActions\n        }\"\n        (click)=\"handleSort(columnIndex)\">\n        <impdc-column-heading\n          [isSortable]=\"columnDef.sorted || false\"\n          [columnIndex]=\"columnIndex\"\n          [sortColumnIndex]=\"sortColumnIndex\"\n          [direction]=\"sortDirection\"\n          [text]=\"columnDef.title\"\n          (sort)=\"handleSort($event)\">\n        </impdc-column-heading>\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (loading) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"data-loading\">\n        <impdc-spinner></impdc-spinner>\n      </td>\n    </tr>\n    } @else { @for (row of tableData; track row; let rowIndex = $index) {\n    <tr>\n      @if (canSelectRows) {\n      <td>\n        <div class=\"select-column\">\n          <impdc-checkbox\n            [ngModel]=\"isRowSelected(row.id)\"\n            (change)=\"handleRowSelect($event, row.id)\"></impdc-checkbox>\n        </div>\n      </td>\n      }\n      <td\n        *ngFor=\"let columnDef of columnDefs; index as colIndex; last as isLast\"\n        [ngClass]=\"{\n          'col-no-padding': !!columnDef.noPadding,\n          'actions-column': columnDef.columnType === cellType.Actions\n        }\">\n        <div>\n          @switch (columnDef.columnType) { @case (cellType.Badge) {\n          <span>\n            <impdc-badge\n              [text]=\"getStringValue(colIndex, row)\"\n              [theme]=\"getTheme(columnDef, row)\">\n            </impdc-badge>\n          </span>\n          } @case (cellType.Link) {\n          <span (click)=\"handleLinkClick(colIndex, row)\">\n            @if (!branded) {\n            <a>\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded>\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Url) {\n          <span>\n            @if (!branded) {\n            <a target=\"_blank\" [attr.href]=\"getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a\n              impdcBranded\n              target=\"_blank\"\n              [attr.href]=\"getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Email) {\n          <span>\n            @if (!branded) {\n            <a\n              target=\"_blank\"\n              [attr.href]=\"'mailto:' + getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded [attr.href]=\"getMailToValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Input) {\n          <span>\n            <input\n              impdcInput\n              type=\"text\"\n              class=\"{{ getCellColor(columnDef, row) }}\"\n              [ngModel]=\"getValue(colIndex, row)\"\n              (ngModelChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event)\n              \" />\n          </span>\n          } @case (cellType.Boolean) {\n          <span>\n            @if (columnDef.disabled && getValue(colIndex, row) === 'true') {\n            <span\n              impdc-icon\n              name=\"check\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n            } @else if (!columnDef.disabled) {\n            <impdc-checkbox\n              [checked]=\"getValue(colIndex, row) === 'true'\"\n              [isSwitch]=\"true\"\n              (change)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.checked)\n              \"></impdc-checkbox>\n            }\n          </span>\n          } @case (cellType.SingleSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \">\n              @if (selectPlaceholder) {\n              <impdc-select-option value [label]=\"selectPlaceholder\">\n              </impdc-select-option>\n              } @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.MultiSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              multiple=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.CellRender) {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            <ng-template\n              impdcTableInjectComponent\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [customCellComponents]=\"customCellComponents || {}\"\n              [value]=\"getRawValue(colIndex, row)\"></ng-template>\n          </span>\n          } @case (cellType.Icon) {\n          <span>\n            <span\n              impdc-icon\n              [name]=\"columnDef.iconName\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n          </span>\n          } @case (cellType.Actions) {\n          <span>\n            <!-- will always return 'true', but needed to satisfy the type engine -->\n            @if (columnDefIsActions(columnDef)) {\n            <impdc-row-actions\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [lastColumn]=\"isLast\"\n              (actionClick)=\"\n                handleActionClick(colIndex, row, $event)\n              \"></impdc-row-actions>\n            }\n          </span>\n          } @default {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            {{ getValue(colIndex, row) }}\n          </span>\n          } }\n        </div>\n      </td>\n    </tr>\n    } @empty {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"no-data\">\n        <ng-content select=\"[noData]\"></ng-content>\n      </td>\n    </tr>\n    } }\n  </tbody>\n  <tfoot>\n    @if (paginationComponent) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\">\n        <ng-content\n          select=\"impdc-pagination, div[impdc-pagination]\"></ng-content>\n      </td>\n    </tr>\n    }\n  </tfoot>\n</table>\n}\n", styles: [".bulk-action-container{display:flex;flex-direction:row;border:1px solid var(--impd-color-gray-200);border-top-left-radius:.6rem;border-top-right-radius:.6rem;border-bottom:0px}.bulk-action-container .bulk-action-checkbox{padding:1.6rem 2rem}.bulk-action-container .bulk-actions{display:flex;flex-direction:row;gap:.4rem}.col-no-padding{padding:0!important}.data-loading{height:var(--impd-size-80);vertical-align:middle;text-align:center}.no-data{vertical-align:middle;text-align:center}.select-row{display:flex;height:var(--impd-size-4);align-items:center;justify-items:end;border-radius:var(--impd-border-radius-default)}.heading-with-checkbox{padding-left:5px;padding-right:10px}.actions-column{width:.1%;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DatePipe }, { type: i1.PercentPipe }, { type: i1.DecimalPipe }, { type: i0.ChangeDetectorRef }, { type: BrandedDirective, decorators: [{
                     type: Optional
                 }, {
                     type: Host
-                }] }]; }, propDecorators: { loading: [{
+                }] }], propDecorators: { loading: [{
                 type: Input
             }], columnDefs: [{
                 type: Input
@@ -6940,6 +7097,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }], linkClick: [{
                 type: Output
+            }], rowActionClick: [{
+                type: Output
             }], paginationComponent: [{
                 type: ContentChild,
                 args: [PaginationComponent]
@@ -6951,11 +7110,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class SpinnerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule], exports: [SpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
 }
-SpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule], exports: [SpinnerComponent] });
-SpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -6966,57 +7125,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class BadgeModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: BadgeModule, declarations: [BadgeComponent], imports: [CommonModule, IconModule], exports: [IconModule, BadgeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BadgeModule, imports: [CommonModule, IconModule, IconModule] }); }
 }
-BadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BadgeModule, declarations: [BadgeComponent], imports: [CommonModule, IconModule], exports: [IconModule, BadgeComponent] });
-BadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeModule, imports: [CommonModule, IconModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, IconModule],
                     declarations: [BadgeComponent],
                     exports: [IconModule, BadgeComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class TableModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: TableModule, declarations: [TableDirective,
+            TableComponent,
+            ColumnHeadingComponent,
+            TableInjectComponentDirective,
+            TableBulkActionsComponent,
+            RowActionsComponent], imports: [CommonModule,
+            ButtonModule,
+            PaginationModule,
+            IconModule,
+            ImpdcFormsModule,
+            FormsModule,
+            SpinnerModule,
+            BadgeModule,
+            BrandingModule,
+            NgbDropdownModule], exports: [ButtonModule,
+            TableDirective,
+            ColumnHeadingComponent,
+            TableBulkActionsComponent,
+            PaginationModule,
+            TableComponent,
+            IconModule,
+            TableInjectComponentDirective,
+            BrandingModule,
+            RowActionsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableModule, providers: [DatePipe, PercentPipe, DecimalPipe], imports: [CommonModule,
+            ButtonModule,
+            PaginationModule,
+            IconModule,
+            ImpdcFormsModule,
+            FormsModule,
+            SpinnerModule,
+            BadgeModule,
+            BrandingModule,
+            NgbDropdownModule, ButtonModule,
+            PaginationModule,
+            IconModule,
+            BrandingModule] }); }
 }
-TableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TableModule, declarations: [TableDirective,
-        TableComponent,
-        ColumnHeadingComponent,
-        TableInjectComponentDirective,
-        TableBulkActionsComponent], imports: [CommonModule,
-        ButtonModule,
-        PaginationModule,
-        IconModule,
-        ImpdcFormsModule,
-        FormsModule,
-        SpinnerModule,
-        BadgeModule,
-        BrandingModule], exports: [ButtonModule,
-        TableDirective,
-        ColumnHeadingComponent,
-        TableBulkActionsComponent,
-        PaginationModule,
-        TableComponent,
-        IconModule,
-        TableInjectComponentDirective,
-        BrandingModule] });
-TableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableModule, providers: [DatePipe, PercentPipe, DecimalPipe], imports: [CommonModule,
-        ButtonModule,
-        PaginationModule,
-        IconModule,
-        ImpdcFormsModule,
-        FormsModule,
-        SpinnerModule,
-        BadgeModule,
-        BrandingModule, ButtonModule,
-        PaginationModule,
-        IconModule,
-        BrandingModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7028,14 +7191,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         FormsModule,
                         SpinnerModule,
                         BadgeModule,
-                        BrandingModule
+                        BrandingModule,
+                        NgbDropdownModule
                     ],
                     declarations: [
                         TableDirective,
                         TableComponent,
                         ColumnHeadingComponent,
                         TableInjectComponentDirective,
-                        TableBulkActionsComponent
+                        TableBulkActionsComponent,
+                        RowActionsComponent
                     ],
                     exports: [
                         ButtonModule,
@@ -7046,11 +7211,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TableComponent,
                         IconModule,
                         TableInjectComponentDirective,
-                        BrandingModule
+                        BrandingModule,
+                        RowActionsComponent
                     ],
                     providers: [DatePipe, PercentPipe, DecimalPipe]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 const ModalComponentSizesArr = [
     ComponentSize.Small,
@@ -7079,9 +7245,26 @@ const ModalThemesArr = [
  * and [IconModule](./?path=/docs/design-components-icon).
  */
 class ModalComponent {
-    constructor(_interactionService) {
+    /**
+     * Determines if the Modal should be shown immediately.
+     */
+    set show(show) {
+        if (show) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
+    }
+    get show() {
+        return this._show;
+    }
+    constructor(_interactionService, _elementRef) {
         this._interactionService = _interactionService;
-        this._interactableId = 0;
+        this._elementRef = _elementRef;
+        this._interactableId = `impdc-modal-${nanoid()}`;
+        this._closed$ = new Subject();
+        this._initialized = false;
         this._show = false;
         /**
          * The theme of the Modal. Affects the layout of the Modal as well as some colors.
@@ -7125,22 +7308,11 @@ class ModalComponent {
          */
         this.accept = new EventEmitter();
     }
-    /**
-     * Determines if the Modal should be shown immediately.
-     */
-    set show(show) {
-        if (show) {
-            this.open();
-        }
-        else {
-            this.close();
-        }
-    }
     get interactableId() {
         return this._interactableId;
     }
     get valid() {
-        return this.interactableId > 0;
+        return this._initialized;
     }
     get shown() {
         return this.valid && this._show;
@@ -7158,17 +7330,18 @@ class ModalComponent {
         return !this.titleText && !this.dismissable;
     }
     ngOnInit() {
-        this._interactableId = this._interactionService.add(this);
+        this._interactionService.add(this);
         if (this.dismissable === undefined && this.theme === ModalTheme.Working) {
             this.dismissable = true;
         }
         if (this.iconName === undefined && this.theme === ModalTheme.Destructive) {
             this.iconName = 'exclamation-triangle';
         }
+        this._initialized = true;
     }
     ngOnDestroy() {
         this._interactionService.remove(this.interactableId);
-        this._interactableId = 0;
+        this._disableEventHandling();
     }
     handleDismiss(event) {
         if (!this.dismissable ||
@@ -7199,22 +7372,86 @@ class ModalComponent {
         if (this.backdrop) {
             this._interactionService.queueBackdrop(this.interactableId);
         }
-        this._show = true;
+        this._show = true;
+        this._setupEventHandling();
+    }
+    /**
+     * Closes/hides the modal. Can be used programmatically.
+     */
+    close() {
+        this._show = false;
+        this._interactionService.dequeueBackdrop(this.interactableId);
+        this._disableEventHandling();
+    }
+    _setupEventHandling() {
+        const { nativeElement } = this._elementRef;
+        fromEvent(nativeElement, 'keydown')
+            .pipe(takeUntil(this._closed$), filter(evt => evt.key === 'Escape'))
+            .subscribe(evt => {
+            if (this.dismissable && !evt.defaultPrevented) {
+                Promise.resolve().then(() => {
+                    this.handleDismiss(evt);
+                    evt.stopPropagation();
+                });
+            }
+        });
+        fromEvent(nativeElement, 'keydown')
+            .pipe(takeUntil(this._closed$), filter(evt => evt.key === 'Enter'))
+            .subscribe(evt => {
+            if (!evt.defaultPrevented) {
+                Promise.resolve().then(() => {
+                    this.handleAccept(evt);
+                    evt.stopPropagation();
+                });
+            }
+        });
+        let preventClose = false;
+        if (this._dialogElementRef) {
+            // listen to 'mousedown' and 'mouseup' to prevent dismissal when mouse is pressed inside
+            // of the dialog window and then released outside
+            fromEvent(this._dialogElementRef.nativeElement, 'mousedown')
+                .pipe(takeUntil(this._closed$), tap(() => {
+                preventClose = false;
+            }), switchMap(() => fromEvent(nativeElement, 'mouseup').pipe(takeUntil(this._closed$), take(1))), filter(({ target }) => nativeElement === target))
+                .subscribe(() => {
+                preventClose = true;
+            });
+        }
+        // listen to 'click' events to dismiss on component/container click, except when
+        // clicking inside the dialog window or when prevented by the above 'mousedown'
+        // and 'mouseup' handlers
+        fromEvent(nativeElement, 'click')
+            .pipe(takeUntil(this._closed$))
+            .subscribe(evt => {
+            if (nativeElement === evt.target && !preventClose) {
+                Promise.resolve().then(() => {
+                    this.handleDismiss(evt);
+                    evt.stopPropagation();
+                });
+            }
+            preventClose = false;
+        });
     }
-    /**
-     * Closes/hides the modal. Can be used programmatically.
-     */
-    close() {
-        this._show = false;
-        this._interactionService.dequeueBackdrop(this.interactableId);
+    _disableEventHandling() {
+        this._closed$.next();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ModalComponent, deps: [{ token: InteractionService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ModalComponent, selector: "impdc-modal", inputs: { show: "show", theme: "theme", size: "size", iconName: "iconName", iconTheme: "iconTheme", titleText: "titleText", acceptText: "acceptText", dismissable: "dismissable", fade: "fade", backdrop: "backdrop" }, outputs: { dismiss: "dismiss", deny: "deny", accept: "accept" }, host: { attributes: { "tabindex": "-1" }, properties: { "class.fade": "fade", "class.in": "fade && shown", "class.show": "shown", "class.dismissable": "dismissable" }, classAttribute: "impdc modal" }, viewQueries: [{ propertyName: "_dialogElementRef", first: true, predicate: ["dialogElement"], descendants: true }, { propertyName: "dismissEl", first: true, predicate: ["dismissEl"], descendants: true }, { propertyName: "denyEl", first: true, predicate: ["denyEl"], descendants: true }, { propertyName: "acceptEl", first: true, predicate: ["acceptEl"], descendants: true }], ngImport: i0, template: "<div\n  #dialogElement\n  *ngIf=\"valid\"\n  class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable modal-theme-{{\n    theme\n  }}\"\n  [class.modal-sm]=\"size === 'sm'\"\n  [class.modal-lg]=\"size === 'lg'\"\n  [class.modal-xl]=\"size === 'xl'\"\n  [class.modal-fullscreen]=\"size === 'fs'\"\n  [class.modal-fullscreen-lg-down]=\"size !== 'fs'\">\n  <div class=\"modal-content\">\n    <div *ngIf=\"showDestructiveIcon\" class=\"modal-icon\">\n      <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n    </div>\n    <div #header class=\"modal-header\" [class.hide]=\"hideHeader\">\n      <h3 class=\"modal-title\">\n        <span *ngIf=\"showWorkingIcon\" class=\"modal-icon\">\n          <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n        </span>\n        <span>{{ titleText }}</span>\n      </h3>\n      <button\n        impdcButton\n        *ngIf=\"dismissable\"\n        theme=\"close\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\"></button>\n    </div>\n    <div #bodyEl class=\"modal-body\">\n      <ng-content></ng-content>\n    </div>\n    <div #footer class=\"modal-footer\">\n      <span\n        #dismissEl\n        *ngIf=\"dismissable\"\n        [class.hide]=\"!dismissEl.children.length\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\">\n        <ng-content select=\"[dismiss]\"></ng-content>\n      </span>\n      <span\n        #denyEl\n        [class.hide]=\"!denyEl.children.length\"\n        (click)=\"handleDeny($event); $event.stopPropagation()\">\n        <ng-content select=\"[deny]\"></ng-content>\n      </span>\n      <span\n        #acceptEl\n        [class.hide]=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <ng-content select=\"[accept]\"></ng-content>\n      </span>\n      <span\n        #acceptFallbackEl\n        *ngIf=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <button\n          impdcButton\n          [text]=\"acceptText\"\n          [theme]=\"acceptFallbackTheme\"></button>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host .modal-icon{display:inline-flex;justify-content:center;align-items:center;height:40px;width:40px;color:var(--impd-color-gray-500);background:var(--impd-color-gray-100);border-radius:50%;flex-shrink:0}:host .modal-icon .fa,:host .modal-icon .fa-brands,:host .modal-icon .fa-duotone,:host .modal-icon .fa-light,:host .modal-icon .fa-regular,:host .modal-icon .fa-solid,:host .modal-icon .fa-thin,:host .modal-icon .fab,:host .modal-icon .fad,:host .modal-icon .fal,:host .modal-icon .far,:host .modal-icon .fas,:host .modal-icon .fat{line-height:var(--impartner-hex-modal-title-line-height)}:host.fade.in{background-color:transparent}:host.show{display:block;opacity:1}:host:not(.show),:host.hide,:host .hide{display:none}:host.dismissable{cursor:pointer}:host.dismissable .modal-dialog{cursor:default}:host .modal-dialog{cursor:default;-webkit-user-select:auto;user-select:auto}:host .modal-theme-simple .modal-header,:host .modal-theme-destructive .modal-header{border:0;padding-bottom:0}:host .modal-theme-simple .modal-body,:host .modal-theme-destructive .modal-body{padding:calc(var(--impartner-hex-modal-padding) * .5) var(--impartner-hex-modal-padding) var(--impartner-hex-modal-padding)}:host .modal-theme-simple .modal-footer,:host .modal-theme-destructive .modal-footer{border:0;padding-top:0}:host .modal-theme-working .modal-footer{padding:calc(var(--impartner-hex-modal-padding) * .5 - var(--impartner-hex-modal-footer-gap) * .5) calc(var(--impartner-hex-modal-padding) - var(--impartner-hex-modal-footer-gap) * .5)}:host .modal-theme-destructive .modal-content{display:grid;grid-template-areas:\"modal-icon modal-header\" \"modal-icon modal-body\" \"modal-footer modal-footer\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto}:host .modal-theme-destructive .modal-content>.modal-icon{grid-area:modal-icon;margin:var(--impartner-hex-modal-header-padding);margin-right:0;margin-bottom:0}:host .modal-theme-destructive .modal-content>.modal-header{grid-area:modal-header;padding-left:16px;margin-top:8px;justify-content:unset}:host .modal-theme-destructive .modal-content>.modal-body{grid-area:modal-body;padding-left:16px}:host .modal-theme-destructive .modal-content>.modal-footer{grid-area:modal-footer}:host .modal-theme-destructive .modal-icon{color:var(--impd-color-red-600);background:var(--impd-color-red-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] }); }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ModalComponent, selector: "impdc-modal", inputs: { show: "show", theme: "theme", size: "size", iconName: "iconName", iconTheme: "iconTheme", titleText: "titleText", acceptText: "acceptText", dismissable: "dismissable", fade: "fade", backdrop: "backdrop" }, outputs: { dismiss: "dismiss", deny: "deny", accept: "accept" }, viewQueries: [{ propertyName: "dismissEl", first: true, predicate: ["dismissEl"], descendants: true }, { propertyName: "denyEl", first: true, predicate: ["denyEl"], descendants: true }, { propertyName: "acceptEl", first: true, predicate: ["acceptEl"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"valid\"\n  class=\"impdc modal\"\n  [class.fade]=\"fade\"\n  [class.in]=\"fade && shown\"\n  [class.show]=\"shown\"\n  [class.dismissable]=\"dismissable\"\n  tabindex=\"-1\"\n  (click)=\"handleDismiss($event); $event.stopPropagation()\"\n  (keydown.escape)=\"handleDismiss($event); $event.stopPropagation()\"\n  (keydown.enter)=\"handleAccept($event); $event.stopPropagation()\">\n  <div\n    class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable modal-theme-{{\n      theme\n    }}\"\n    [class.modal-sm]=\"size === 'sm'\"\n    [class.modal-lg]=\"size === 'lg'\"\n    [class.modal-xl]=\"size === 'xl'\"\n    [class.modal-fullscreen]=\"size === 'fs'\"\n    [class.modal-fullscreen-lg-down]=\"size !== 'fs'\"\n    (click)=\"$event.stopPropagation()\">\n    <div class=\"modal-content\">\n      <div *ngIf=\"showDestructiveIcon\" class=\"modal-icon\">\n        <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n      </div>\n      <div #header class=\"modal-header\" [class.hide]=\"hideHeader\">\n        <h3 class=\"modal-title\">\n          <span *ngIf=\"showWorkingIcon\" class=\"modal-icon\">\n            <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n          </span>\n          <span>{{ titleText }}</span>\n        </h3>\n        <button\n          impdcButton\n          *ngIf=\"dismissable\"\n          theme=\"close\"\n          (click)=\"handleDismiss($event); $event.stopPropagation()\"></button>\n      </div>\n      <div #bodyEl class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div #footer class=\"modal-footer\">\n        <span\n          #dismissEl\n          *ngIf=\"dismissable\"\n          [class.hide]=\"!dismissEl.children.length\"\n          (click)=\"handleDismiss($event); $event.stopPropagation()\">\n          <ng-content select=\"[dismiss]\"></ng-content>\n        </span>\n        <span\n          #denyEl\n          [class.hide]=\"!denyEl.children.length\"\n          (click)=\"handleDeny($event); $event.stopPropagation()\">\n          <ng-content select=\"[deny]\"></ng-content>\n        </span>\n        <span\n          #acceptEl\n          [class.hide]=\"!acceptEl.children.length\"\n          (click)=\"handleAccept($event); $event.stopPropagation()\">\n          <ng-content select=\"[accept]\"></ng-content>\n        </span>\n        <span\n          #acceptFallbackEl\n          *ngIf=\"!acceptEl.children.length\"\n          (click)=\"handleAccept($event); $event.stopPropagation()\">\n          <button\n            impdcButton\n            [text]=\"acceptText\"\n            [theme]=\"acceptFallbackTheme\"></button>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".impdc.modal{-webkit-user-select:none;user-select:none}.impdc.modal .modal-icon{display:inline-flex;justify-content:center;align-items:center;height:40px;width:40px;color:var(--impd-color-gray-500);background:var(--impd-color-gray-100);border-radius:50%;flex-shrink:0}.impdc.modal .modal-icon .fa,.impdc.modal .modal-icon .fa-brands,.impdc.modal .modal-icon .fa-duotone,.impdc.modal .modal-icon .fa-light,.impdc.modal .modal-icon .fa-regular,.impdc.modal .modal-icon .fa-solid,.impdc.modal .modal-icon .fa-thin,.impdc.modal .modal-icon .fab,.impdc.modal .modal-icon .fad,.impdc.modal .modal-icon .fal,.impdc.modal .modal-icon .far,.impdc.modal .modal-icon .fas,.impdc.modal .modal-icon .fat{line-height:var(--impartner-hex-modal-title-line-height)}.impdc.modal.fade.in{background-color:transparent}.impdc.modal.show{display:block;opacity:1}.impdc.modal:not(.show),.impdc.modal.hide,.impdc.modal .hide{display:none}.impdc.modal.dismissable{cursor:pointer}.impdc.modal.dismissable .modal-dialog{cursor:default}.impdc.modal .modal-dialog{cursor:default;-webkit-user-select:auto;user-select:auto}.impdc.modal .modal-theme-simple .modal-header,.impdc.modal .modal-theme-destructive .modal-header{border:0;padding-bottom:0}.impdc.modal .modal-theme-simple .modal-body,.impdc.modal .modal-theme-destructive .modal-body{padding:calc(var(--impartner-hex-modal-padding) * .5) var(--impartner-hex-modal-padding) var(--impartner-hex-modal-padding)}.impdc.modal .modal-theme-simple .modal-footer,.impdc.modal .modal-theme-destructive .modal-footer{border:0;padding-top:0}.impdc.modal .modal-theme-working .modal-footer{padding:calc(var(--impartner-hex-modal-padding) * .5 - var(--impartner-hex-modal-footer-gap) * .5) calc(var(--impartner-hex-modal-padding) - var(--impartner-hex-modal-footer-gap) * .5)}.impdc.modal .modal-theme-destructive .modal-content{display:grid;grid-template-areas:\"modal-icon modal-header\" \"modal-icon modal-body\" \"modal-footer modal-footer\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto}.impdc.modal .modal-theme-destructive .modal-content>.modal-icon{grid-area:modal-icon;margin:var(--impartner-hex-modal-header-padding);margin-right:0;margin-bottom:0}.impdc.modal .modal-theme-destructive .modal-content>.modal-header{grid-area:modal-header;padding-left:16px;margin-top:8px;justify-content:unset}.impdc.modal .modal-theme-destructive .modal-content>.modal-body{grid-area:modal-body;padding-left:16px}.impdc.modal .modal-theme-destructive .modal-content>.modal-footer{grid-area:modal-footer}.impdc.modal .modal-theme-destructive .modal-icon{color:var(--impd-color-red-600);background:var(--impd-color-red-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-modal', template: "<div\n  *ngIf=\"valid\"\n  class=\"impdc modal\"\n  [class.fade]=\"fade\"\n  [class.in]=\"fade && shown\"\n  [class.show]=\"shown\"\n  [class.dismissable]=\"dismissable\"\n  tabindex=\"-1\"\n  (click)=\"handleDismiss($event); $event.stopPropagation()\"\n  (keydown.escape)=\"handleDismiss($event); $event.stopPropagation()\"\n  (keydown.enter)=\"handleAccept($event); $event.stopPropagation()\">\n  <div\n    class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable modal-theme-{{\n      theme\n    }}\"\n    [class.modal-sm]=\"size === 'sm'\"\n    [class.modal-lg]=\"size === 'lg'\"\n    [class.modal-xl]=\"size === 'xl'\"\n    [class.modal-fullscreen]=\"size === 'fs'\"\n    [class.modal-fullscreen-lg-down]=\"size !== 'fs'\"\n    (click)=\"$event.stopPropagation()\">\n    <div class=\"modal-content\">\n      <div *ngIf=\"showDestructiveIcon\" class=\"modal-icon\">\n        <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n      </div>\n      <div #header class=\"modal-header\" [class.hide]=\"hideHeader\">\n        <h3 class=\"modal-title\">\n          <span *ngIf=\"showWorkingIcon\" class=\"modal-icon\">\n            <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n          </span>\n          <span>{{ titleText }}</span>\n        </h3>\n        <button\n          impdcButton\n          *ngIf=\"dismissable\"\n          theme=\"close\"\n          (click)=\"handleDismiss($event); $event.stopPropagation()\"></button>\n      </div>\n      <div #bodyEl class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div #footer class=\"modal-footer\">\n        <span\n          #dismissEl\n          *ngIf=\"dismissable\"\n          [class.hide]=\"!dismissEl.children.length\"\n          (click)=\"handleDismiss($event); $event.stopPropagation()\">\n          <ng-content select=\"[dismiss]\"></ng-content>\n        </span>\n        <span\n          #denyEl\n          [class.hide]=\"!denyEl.children.length\"\n          (click)=\"handleDeny($event); $event.stopPropagation()\">\n          <ng-content select=\"[deny]\"></ng-content>\n        </span>\n        <span\n          #acceptEl\n          [class.hide]=\"!acceptEl.children.length\"\n          (click)=\"handleAccept($event); $event.stopPropagation()\">\n          <ng-content select=\"[accept]\"></ng-content>\n        </span>\n        <span\n          #acceptFallbackEl\n          *ngIf=\"!acceptEl.children.length\"\n          (click)=\"handleAccept($event); $event.stopPropagation()\">\n          <button\n            impdcButton\n            [text]=\"acceptText\"\n            [theme]=\"acceptFallbackTheme\"></button>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".impdc.modal{-webkit-user-select:none;user-select:none}.impdc.modal .modal-icon{display:inline-flex;justify-content:center;align-items:center;height:40px;width:40px;color:var(--impd-color-gray-500);background:var(--impd-color-gray-100);border-radius:50%;flex-shrink:0}.impdc.modal .modal-icon .fa,.impdc.modal .modal-icon .fa-brands,.impdc.modal .modal-icon .fa-duotone,.impdc.modal .modal-icon .fa-light,.impdc.modal .modal-icon .fa-regular,.impdc.modal .modal-icon .fa-solid,.impdc.modal .modal-icon .fa-thin,.impdc.modal .modal-icon .fab,.impdc.modal .modal-icon .fad,.impdc.modal .modal-icon .fal,.impdc.modal .modal-icon .far,.impdc.modal .modal-icon .fas,.impdc.modal .modal-icon .fat{line-height:var(--impartner-hex-modal-title-line-height)}.impdc.modal.fade.in{background-color:transparent}.impdc.modal.show{display:block;opacity:1}.impdc.modal:not(.show),.impdc.modal.hide,.impdc.modal .hide{display:none}.impdc.modal.dismissable{cursor:pointer}.impdc.modal.dismissable .modal-dialog{cursor:default}.impdc.modal .modal-dialog{cursor:default;-webkit-user-select:auto;user-select:auto}.impdc.modal .modal-theme-simple .modal-header,.impdc.modal .modal-theme-destructive .modal-header{border:0;padding-bottom:0}.impdc.modal .modal-theme-simple .modal-body,.impdc.modal .modal-theme-destructive .modal-body{padding:calc(var(--impartner-hex-modal-padding) * .5) var(--impartner-hex-modal-padding) var(--impartner-hex-modal-padding)}.impdc.modal .modal-theme-simple .modal-footer,.impdc.modal .modal-theme-destructive .modal-footer{border:0;padding-top:0}.impdc.modal .modal-theme-working .modal-footer{padding:calc(var(--impartner-hex-modal-padding) * .5 - var(--impartner-hex-modal-footer-gap) * .5) calc(var(--impartner-hex-modal-padding) - var(--impartner-hex-modal-footer-gap) * .5)}.impdc.modal .modal-theme-destructive .modal-content{display:grid;grid-template-areas:\"modal-icon modal-header\" \"modal-icon modal-body\" \"modal-footer modal-footer\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto}.impdc.modal .modal-theme-destructive .modal-content>.modal-icon{grid-area:modal-icon;margin:var(--impartner-hex-modal-header-padding);margin-right:0;margin-bottom:0}.impdc.modal .modal-theme-destructive .modal-content>.modal-header{grid-area:modal-header;padding-left:16px;margin-top:8px;justify-content:unset}.impdc.modal .modal-theme-destructive .modal-content>.modal-body{grid-area:modal-body;padding-left:16px}.impdc.modal .modal-theme-destructive .modal-content>.modal-footer{grid-area:modal-footer}.impdc.modal .modal-theme-destructive .modal-icon{color:var(--impd-color-red-600);background:var(--impd-color-red-100)}\n"] }]
-        }], ctorParameters: function () { return [{ type: InteractionService }]; }, propDecorators: { show: [{
+            args: [{ selector: 'impdc-modal', host: {
+                        class: 'impdc modal',
+                        '[class.fade]': 'fade',
+                        '[class.in]': 'fade && shown',
+                        '[class.show]': 'shown',
+                        '[class.dismissable]': 'dismissable',
+                        tabindex: '-1'
+                    }, template: "<div\n  #dialogElement\n  *ngIf=\"valid\"\n  class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable modal-theme-{{\n    theme\n  }}\"\n  [class.modal-sm]=\"size === 'sm'\"\n  [class.modal-lg]=\"size === 'lg'\"\n  [class.modal-xl]=\"size === 'xl'\"\n  [class.modal-fullscreen]=\"size === 'fs'\"\n  [class.modal-fullscreen-lg-down]=\"size !== 'fs'\">\n  <div class=\"modal-content\">\n    <div *ngIf=\"showDestructiveIcon\" class=\"modal-icon\">\n      <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n    </div>\n    <div #header class=\"modal-header\" [class.hide]=\"hideHeader\">\n      <h3 class=\"modal-title\">\n        <span *ngIf=\"showWorkingIcon\" class=\"modal-icon\">\n          <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n        </span>\n        <span>{{ titleText }}</span>\n      </h3>\n      <button\n        impdcButton\n        *ngIf=\"dismissable\"\n        theme=\"close\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\"></button>\n    </div>\n    <div #bodyEl class=\"modal-body\">\n      <ng-content></ng-content>\n    </div>\n    <div #footer class=\"modal-footer\">\n      <span\n        #dismissEl\n        *ngIf=\"dismissable\"\n        [class.hide]=\"!dismissEl.children.length\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\">\n        <ng-content select=\"[dismiss]\"></ng-content>\n      </span>\n      <span\n        #denyEl\n        [class.hide]=\"!denyEl.children.length\"\n        (click)=\"handleDeny($event); $event.stopPropagation()\">\n        <ng-content select=\"[deny]\"></ng-content>\n      </span>\n      <span\n        #acceptEl\n        [class.hide]=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <ng-content select=\"[accept]\"></ng-content>\n      </span>\n      <span\n        #acceptFallbackEl\n        *ngIf=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <button\n          impdcButton\n          [text]=\"acceptText\"\n          [theme]=\"acceptFallbackTheme\"></button>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host .modal-icon{display:inline-flex;justify-content:center;align-items:center;height:40px;width:40px;color:var(--impd-color-gray-500);background:var(--impd-color-gray-100);border-radius:50%;flex-shrink:0}:host .modal-icon .fa,:host .modal-icon .fa-brands,:host .modal-icon .fa-duotone,:host .modal-icon .fa-light,:host .modal-icon .fa-regular,:host .modal-icon .fa-solid,:host .modal-icon .fa-thin,:host .modal-icon .fab,:host .modal-icon .fad,:host .modal-icon .fal,:host .modal-icon .far,:host .modal-icon .fas,:host .modal-icon .fat{line-height:var(--impartner-hex-modal-title-line-height)}:host.fade.in{background-color:transparent}:host.show{display:block;opacity:1}:host:not(.show),:host.hide,:host .hide{display:none}:host.dismissable{cursor:pointer}:host.dismissable .modal-dialog{cursor:default}:host .modal-dialog{cursor:default;-webkit-user-select:auto;user-select:auto}:host .modal-theme-simple .modal-header,:host .modal-theme-destructive .modal-header{border:0;padding-bottom:0}:host .modal-theme-simple .modal-body,:host .modal-theme-destructive .modal-body{padding:calc(var(--impartner-hex-modal-padding) * .5) var(--impartner-hex-modal-padding) var(--impartner-hex-modal-padding)}:host .modal-theme-simple .modal-footer,:host .modal-theme-destructive .modal-footer{border:0;padding-top:0}:host .modal-theme-working .modal-footer{padding:calc(var(--impartner-hex-modal-padding) * .5 - var(--impartner-hex-modal-footer-gap) * .5) calc(var(--impartner-hex-modal-padding) - var(--impartner-hex-modal-footer-gap) * .5)}:host .modal-theme-destructive .modal-content{display:grid;grid-template-areas:\"modal-icon modal-header\" \"modal-icon modal-body\" \"modal-footer modal-footer\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto}:host .modal-theme-destructive .modal-content>.modal-icon{grid-area:modal-icon;margin:var(--impartner-hex-modal-header-padding);margin-right:0;margin-bottom:0}:host .modal-theme-destructive .modal-content>.modal-header{grid-area:modal-header;padding-left:16px;margin-top:8px;justify-content:unset}:host .modal-theme-destructive .modal-content>.modal-body{grid-area:modal-body;padding-left:16px}:host .modal-theme-destructive .modal-content>.modal-footer{grid-area:modal-footer}:host .modal-theme-destructive .modal-icon{color:var(--impd-color-red-600);background:var(--impd-color-red-100)}\n"] }]
+        }], ctorParameters: () => [{ type: InteractionService }, { type: i0.ElementRef }], propDecorators: { _dialogElementRef: [{
+                type: ViewChild,
+                args: ['dialogElement']
+            }], show: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -7257,21 +7494,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * To use, import `BackdropModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class BackdropComponent {
-    constructor(interactionService) {
-        this.interactionService = interactionService;
+    constructor(_interactionService, _changeDetector) {
+        this._interactionService = _interactionService;
+        this._changeDetector = _changeDetector;
+        this._ngDestroy = new Subject();
         this._valid = true;
+        this._showBackdrop = false;
     }
     get valid() {
         return this._valid;
     }
     get show() {
-        return this.valid && this.interactionService.showBackdrop;
+        return this.valid && this._showBackdrop;
     }
     ngOnInit() {
-        this.interactionService.registerBackdrop(this);
+        this._interactionService.registerBackdrop(this);
+        this._interactionService.showBackdrop$
+            .pipe(takeUntil(this._ngDestroy))
+            .subscribe(showBackdrop => {
+            this._showBackdrop = showBackdrop;
+            this._changeDetector.detectChanges();
+        });
     }
     ngOnDestroy() {
-        this.interactionService.unregisterBackdrop(this);
+        this._interactionService.unregisterBackdrop(this);
+        this._ngDestroy.next();
+        this._ngDestroy.complete();
     }
     invalidate() {
         this._valid = false;
@@ -7279,44 +7527,44 @@ class BackdropComponent {
     validate() {
         this._valid = true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BackdropComponent, deps: [{ token: InteractionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: BackdropComponent, selector: "impdc-backdrop", ngImport: i0, template: "<div *ngIf=\"valid\" class=\"impdc modal-backdrop fade\" [class.show]=\"show\"></div>\n", styles: [".impdc.modal-backdrop{position:fixed;left:0;top:0;width:100vw;height:100vh;-webkit-user-select:none;user-select:none}.impdc.modal-backdrop.fade{transition:opacity .3s linear}.impdc.modal-backdrop:not(.show){height:0;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-BackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BackdropComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
-BackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BackdropComponent, selector: "impdc-backdrop", ngImport: i0, template: "<div *ngIf=\"valid\" class=\"impdc modal-backdrop fade\" [class.show]=\"show\"></div>\n", styles: [".impdc.modal-backdrop{position:fixed;left:0;top:0;width:100vw;height:100vh;-webkit-user-select:none;user-select:none}.impdc.modal-backdrop.fade{transition:opacity .3s linear}.impdc.modal-backdrop:not(.show){height:0;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BackdropComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-backdrop', template: "<div *ngIf=\"valid\" class=\"impdc modal-backdrop fade\" [class.show]=\"show\"></div>\n", styles: [".impdc.modal-backdrop{position:fixed;left:0;top:0;width:100vw;height:100vh;-webkit-user-select:none;user-select:none}.impdc.modal-backdrop.fade{transition:opacity .3s linear}.impdc.modal-backdrop:not(.show){height:0;opacity:0;pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: InteractionService }]; } });
+            args: [{ selector: 'impdc-backdrop', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"valid\" class=\"impdc modal-backdrop fade\" [class.show]=\"show\"></div>\n", styles: [".impdc.modal-backdrop{position:fixed;left:0;top:0;width:100vw;height:100vh;-webkit-user-select:none;user-select:none}.impdc.modal-backdrop.fade{transition:opacity .3s linear}.impdc.modal-backdrop:not(.show){height:0;opacity:0;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: InteractionService }, { type: i0.ChangeDetectorRef }] });
 
 class BackdropModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BackdropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: BackdropModule, declarations: [BackdropComponent], imports: [CommonModule], exports: [BackdropComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BackdropModule, imports: [CommonModule] }); }
 }
-BackdropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BackdropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BackdropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BackdropModule, declarations: [BackdropComponent], imports: [CommonModule], exports: [BackdropComponent] });
-BackdropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BackdropModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BackdropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BackdropModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
                     declarations: [BackdropComponent],
                     exports: [BackdropComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class ModalModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule,
+            FormsModule,
+            BackdropModule,
+            ButtonModule,
+            IconModule], exports: [BackdropModule, ButtonModule, IconModule, ModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ModalModule, imports: [CommonModule,
+            FormsModule,
+            BackdropModule,
+            ButtonModule,
+            IconModule, BackdropModule, ButtonModule, IconModule] }); }
 }
-ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule,
-        FormsModule,
-        BackdropModule,
-        ButtonModule,
-        IconModule], exports: [BackdropModule, ButtonModule, IconModule, ModalComponent] });
-ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, imports: [CommonModule,
-        FormsModule,
-        BackdropModule,
-        ButtonModule,
-        IconModule, BackdropModule, ButtonModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7329,7 +7577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     declarations: [ModalComponent],
                     exports: [BackdropModule, ButtonModule, IconModule, ModalComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `ProgressBarComponent` (`<impdc-progress-bar`) is a display-only slider to show progress.
@@ -7350,13 +7598,13 @@ class ProgressBarComponent {
          */
         this.progressPercentage = 0;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ProgressBarComponent, selector: "impdc-progress-bar", inputs: { labelText: "labelText", statusText: "statusText", progressPercentage: "progressPercentage" }, ngImport: i0, template: "<div class=\"progress-container\">\n  <div class=\"progress-text\">\n    <div class=\"text-left\">\n      {{ labelText }}\n    </div>\n    <div class=\"text-right\">\n      {{ statusText }}\n    </div>\n  </div>\n  <div class=\"bar-bg\">\n    <div\n      class=\"bar\"\n      role=\"progressbar\"\n      [style.width.%]=\"progressPercentage\"\n      [attr.aria-valuenow]=\"progressPercentage\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"></div>\n  </div>\n</div>\n", styles: [".progress-container{min-width:50rem;width:100%;display:flex;flex-direction:column}.progress-container .progress-text{color:#000;display:flex;flex-direction:row;font-size:1.4rem}.progress-container .text-left{flex-grow:1}.progress-container .bar-bg{height:.6rem;overflow:hidden;border-top-right-radius:.6rem;border-bottom-right-radius:.6rem;background-color:#e5e7eb}.progress-container .bar{height:.6rem;overflow:hidden;background-color:#1d4ed8}\n"] }); }
 }
-ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ProgressBarComponent, selector: "impdc-progress-bar", inputs: { labelText: "labelText", statusText: "statusText", progressPercentage: "progressPercentage" }, ngImport: i0, template: "<div class=\"progress-container\">\n  <div class=\"progress-text\">\n    <div class=\"text-left\">\n      {{ labelText }}\n    </div>\n    <div class=\"text-right\">\n      {{ statusText }}\n    </div>\n  </div>\n  <div class=\"bar-bg\">\n    <div\n      class=\"bar\"\n      role=\"progressbar\"\n      [style.width.%]=\"progressPercentage\"\n      [attr.aria-valuenow]=\"progressPercentage\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"></div>\n  </div>\n</div>\n", styles: [".progress-container{min-width:50rem;width:100%;display:flex;flex-direction:column}.progress-container .progress-text{color:#000;display:flex;flex-direction:row;font-size:1.4rem}.progress-container .text-left{flex-grow:1}.progress-container .bar-bg{height:.6rem;overflow:hidden;border-top-right-radius:.6rem;border-bottom-right-radius:.6rem;background-color:#e5e7eb}.progress-container .bar{height:.6rem;overflow:hidden;background-color:#1d4ed8}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-progress-bar', template: "<div class=\"progress-container\">\n  <div class=\"progress-text\">\n    <div class=\"text-left\">\n      {{ labelText }}\n    </div>\n    <div class=\"text-right\">\n      {{ statusText }}\n    </div>\n  </div>\n  <div class=\"bar-bg\">\n    <div\n      class=\"bar\"\n      role=\"progressbar\"\n      [style.width.%]=\"progressPercentage\"\n      [attr.aria-valuenow]=\"progressPercentage\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"></div>\n  </div>\n</div>\n", styles: [".progress-container{min-width:50rem;width:100%;display:flex;flex-direction:column}.progress-container .progress-text{color:#000;display:flex;flex-direction:row;font-size:1.4rem}.progress-container .text-left{flex-grow:1}.progress-container .bar-bg{height:.6rem;overflow:hidden;border-top-right-radius:.6rem;border-bottom-right-radius:.6rem;background-color:#e5e7eb}.progress-container .bar{height:.6rem;overflow:hidden;background-color:#1d4ed8}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { labelText: [{
+        }], ctorParameters: () => [], propDecorators: { labelText: [{
                 type: Input
             }], statusText: [{
                 type: Input
@@ -7365,11 +7613,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class ProgressBarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent], imports: [CommonModule], exports: [ProgressBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ProgressBarModule, imports: [CommonModule] }); }
 }
-ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent], imports: [CommonModule], exports: [ProgressBarComponent] });
-ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -7385,10 +7633,10 @@ class DropdownItemComponent {
          */
         this.divider = false;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: DropdownItemComponent, selector: "impdc-dropdown-item", inputs: { divider: "divider" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
 }
-DropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownItemComponent, selector: "impdc-dropdown-item", inputs: { divider: "divider" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DropdownItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-dropdown-item', template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { divider: [{
@@ -7405,9 +7653,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * `DropdownModule` imports and exports [ButtonModule](./?path=/docs/design-components-button).
  */
 class DropdownComponent {
+    get classDropdown() {
+        return this.position === 'down';
+    }
+    get classDropend() {
+        return this.position === 'right';
+    }
+    get classDropstart() {
+        return this.position === 'left';
+    }
+    get classDropup() {
+        return this.position === 'up';
+    }
+    handleHostClick($event) {
+        $event.stopPropagation();
+    }
+    handleDocumentClick() {
+        if (this.show) {
+            this.hide();
+        }
+    }
     constructor(_interactionService) {
         this._interactionService = _interactionService;
-        this._interactableId = 0;
+        this._interactableId = `impdc-dropdown-${nanoid()}`;
+        this._initialized = false;
         /**
          * Whether or not the dropdown list is showing.
          */
@@ -7441,41 +7710,20 @@ class DropdownComponent {
         this.buttonClick = new EventEmitter();
         this.classBtnGroup = true;
     }
-    get classDropdown() {
-        return this.position === 'down';
-    }
-    get classDropend() {
-        return this.position === 'right';
-    }
-    get classDropstart() {
-        return this.position === 'left';
-    }
-    get classDropup() {
-        return this.position === 'up';
-    }
-    handleHostClick($event) {
-        $event.stopPropagation();
-    }
-    handleDocumentClick() {
-        if (this.show) {
-            this.hide();
-        }
-    }
     get interactableId() {
         return this._interactableId;
     }
     get valid() {
-        return this.interactableId > 0;
+        return this._initialized;
     }
     get shown() {
         return this.valid && this.show;
     }
     ngOnInit() {
-        this._interactableId = this._interactionService.add(this);
+        this._interactionService.add(this);
     }
     ngOnDestroy() {
         this._interactionService.remove(this.interactableId);
-        this._interactableId = 0;
     }
     handleToggle() {
         this.show = this._interactionService.toggle(this);
@@ -7488,13 +7736,13 @@ class DropdownComponent {
         this.show = false;
         this.toggle.emit(this.show);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DropdownComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: DropdownComponent, selector: "impdc-dropdown, [impdc-dropdown]", inputs: { show: "show", buttonTheme: "buttonTheme", buttonText: "buttonText", position: "position", split: "split" }, outputs: { toggle: "toggle", buttonClick: "buttonClick" }, host: { listeners: { "click": "handleHostClick()", "document:click": "handleDocumentClick()" }, properties: { "class.btn-group": "this.classBtnGroup", "class.dropdown": "this.classDropdown", "class.dropend": "this.classDropend", "class.dropstart": "this.classDropstart", "class.dropup": "this.classDropup" } }, queries: [{ propertyName: "items", predicate: DropdownItemComponent }], exportAs: ["impdcDropdown"], ngImport: i0, template: "<ng-container *ngIf=\"!linkEl.children.length\">\n  <button\n    *ngIf=\"!split; else splitTemplate\"\n    impdcButton\n    [theme]=\"buttonTheme\"\n    [text]=\"buttonText\"\n    class=\"dropdown-toggle\"\n    [class.show]=\"show\"\n    data-bs-toggle=\"dropdown\"\n    [attr.aria-expanded]=\"show\"\n    (click)=\"handleToggle(); $event.stopPropagation()\"></button>\n\n  <ng-template #splitTemplate>\n    <button\n      impdcButton\n      [theme]=\"buttonTheme\"\n      [text]=\"buttonText\"\n      (click)=\"handleButtonClick($event)\"></button>\n    <button\n      impdcButton\n      [theme]=\"buttonTheme\"\n      class=\"dropdown-toggle dropdown-toggle-split\"\n      [class.show]=\"show\"\n      [attr.aria-expanded]=\"show\"\n      (click)=\"handleToggle(); $event.stopPropagation()\">\n      <span class=\"visually-hidden\">Toggle Dropdown</span>\n    </button>\n  </ng-template>\n</ng-container>\n\n<ul\n  class=\"dropdown-menu\"\n  [class.dropdown-menu-end]=\"false\"\n  [class.show]=\"show\"\n  (click)=\"$event.stopPropagation()\">\n  <!-- <li *ngIf=\"headerText\">\n    <h6 class=\"dropdown-header\">{{ headerText }}</h6>\n  </li> -->\n  <li *ngFor=\"let item of items\">\n    <span *ngIf=\"!item.divider; else dividerTemplate\" class=\"dropdown-item\">\n      <ng-content *ngTemplateOutlet=\"item.template\"></ng-content>\n    </span>\n  </li>\n</ul>\n\n<ng-template #dividerTemplate>\n  <hr class=\"dropdown-divider\" />\n</ng-template>\n\n<a\n  #linkEl\n  class=\"impdc-dropdown-link\"\n  [class.hide]=\"!linkEl.children.length\"\n  [class.impdc-dropdown-open]=\"show\"\n  data-bs-toggle=\"dropdown\"\n  [attr.aria-expanded]=\"show\"\n  (click)=\"handleToggle(); $event.stopPropagation()\">\n  <ng-content select=\"[toggle]\"></ng-content>\n</a>\n", styles: [".impdc-dropdown-link{position:relative;padding:.8rem 1.6rem;border-radius:6px;font-size:14px;line-height:18px;font-weight:500}.impdc-dropdown-link.impdc-dropdown-open,.impdc-dropdown-link:active,.impdc-dropdown-link:focus{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.impdc-dropdown-link.hide{display:none}:host-context(.impdc-form-field-wrapper.input-group)>:host>.btn{border-top:none;border-bottom:none}:host-context(.impdc-form-field-wrapper.input-group)>:host:first-child>.btn:first-of-type{border-left:none}:host-context(.impdc-form-field-wrapper.input-group)>:host:last-child>.btn:last-of-type{border-right:none}:host-context(.input-group)>:host:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(.input-group:not(.has-validation))>:host:not(:last-child)>.btn,:host-context(.input-group:not(.has-validation))>:host:last-child>.btn:not(:last-of-type),:host-context(.input-group.has-validation)>:host:nth-last-child(n+3)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }] }); }
 }
-DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownComponent, selector: "impdc-dropdown, [impdc-dropdown]", inputs: { show: "show", buttonTheme: "buttonTheme", buttonText: "buttonText", position: "position", split: "split" }, outputs: { toggle: "toggle", buttonClick: "buttonClick" }, host: { listeners: { "click": "handleHostClick()", "document:click": "handleDocumentClick()" }, properties: { "class.btn-group": "this.classBtnGroup", "class.dropdown": "this.classDropdown", "class.dropend": "this.classDropend", "class.dropstart": "this.classDropstart", "class.dropup": "this.classDropup" } }, queries: [{ propertyName: "items", predicate: DropdownItemComponent }], ngImport: i0, template: "<ng-container *ngIf=\"!linkEl.children.length\">\n  <button\n    *ngIf=\"!split; else splitTemplate\"\n    impdcButton\n    [theme]=\"buttonTheme\"\n    [text]=\"buttonText\"\n    class=\"dropdown-toggle\"\n    [class.show]=\"show\"\n    data-bs-toggle=\"dropdown\"\n    [attr.aria-expanded]=\"show\"\n    (click)=\"handleToggle(); $event.stopPropagation()\"></button>\n\n  <ng-template #splitTemplate>\n    <button\n      impdcButton\n      [theme]=\"buttonTheme\"\n      [text]=\"buttonText\"\n      (click)=\"handleButtonClick($event)\"></button>\n    <button\n      impdcButton\n      [theme]=\"buttonTheme\"\n      class=\"dropdown-toggle dropdown-toggle-split\"\n      [class.show]=\"show\"\n      [attr.aria-expanded]=\"show\"\n      (click)=\"handleToggle(); $event.stopPropagation()\">\n      <span class=\"visually-hidden\">Toggle Dropdown</span>\n    </button>\n  </ng-template>\n</ng-container>\n\n<ul\n  class=\"dropdown-menu\"\n  [class.dropdown-menu-end]=\"false\"\n  [class.show]=\"show\"\n  (click)=\"$event.stopPropagation()\">\n  <!-- <li *ngIf=\"headerText\">\n    <h6 class=\"dropdown-header\">{{ headerText }}</h6>\n  </li> -->\n  <li *ngFor=\"let item of items\">\n    <span *ngIf=\"!item.divider; else dividerTemplate\" class=\"dropdown-item\">\n      <ng-content *ngTemplateOutlet=\"item.template\"></ng-content>\n    </span>\n  </li>\n</ul>\n\n<ng-template #dividerTemplate>\n  <hr class=\"dropdown-divider\" />\n</ng-template>\n\n<a\n  #linkEl\n  class=\"impdc-dropdown-link\"\n  [class.hide]=\"!linkEl.children.length\"\n  [class.impdc-dropdown-open]=\"show\"\n  data-bs-toggle=\"dropdown\"\n  [attr.aria-expanded]=\"show\"\n  (click)=\"handleToggle(); $event.stopPropagation()\">\n  <ng-content select=\"[toggle]\"></ng-content>\n</a>\n", styles: [".impdc-dropdown-link{position:relative;padding:.8rem 1.6rem;border-radius:6px;font-size:14px;line-height:18px;font-weight:500}.impdc-dropdown-link.impdc-dropdown-open,.impdc-dropdown-link:active,.impdc-dropdown-link:focus{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.impdc-dropdown-link.hide{display:none}:host-context(.impdc-form-field-wrapper.input-group)>:host>.btn{border-top:none;border-bottom:none}:host-context(.impdc-form-field-wrapper.input-group)>:host:first-child>.btn:first-of-type{border-left:none}:host-context(.impdc-form-field-wrapper.input-group)>:host:last-child>.btn:last-of-type{border-right:none}:host-context(.input-group)>:host:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(.input-group:not(.has-validation))>:host:not(:last-child)>.btn,:host-context(.input-group:not(.has-validation))>:host:last-child>.btn:not(:last-of-type),:host-context(.input-group.has-validation)>:host:nth-last-child(n+3)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-dropdown, [impdc-dropdown]', template: "<ng-container *ngIf=\"!linkEl.children.length\">\n  <button\n    *ngIf=\"!split; else splitTemplate\"\n    impdcButton\n    [theme]=\"buttonTheme\"\n    [text]=\"buttonText\"\n    class=\"dropdown-toggle\"\n    [class.show]=\"show\"\n    data-bs-toggle=\"dropdown\"\n    [attr.aria-expanded]=\"show\"\n    (click)=\"handleToggle(); $event.stopPropagation()\"></button>\n\n  <ng-template #splitTemplate>\n    <button\n      impdcButton\n      [theme]=\"buttonTheme\"\n      [text]=\"buttonText\"\n      (click)=\"handleButtonClick($event)\"></button>\n    <button\n      impdcButton\n      [theme]=\"buttonTheme\"\n      class=\"dropdown-toggle dropdown-toggle-split\"\n      [class.show]=\"show\"\n      [attr.aria-expanded]=\"show\"\n      (click)=\"handleToggle(); $event.stopPropagation()\">\n      <span class=\"visually-hidden\">Toggle Dropdown</span>\n    </button>\n  </ng-template>\n</ng-container>\n\n<ul\n  class=\"dropdown-menu\"\n  [class.dropdown-menu-end]=\"false\"\n  [class.show]=\"show\"\n  (click)=\"$event.stopPropagation()\">\n  <!-- <li *ngIf=\"headerText\">\n    <h6 class=\"dropdown-header\">{{ headerText }}</h6>\n  </li> -->\n  <li *ngFor=\"let item of items\">\n    <span *ngIf=\"!item.divider; else dividerTemplate\" class=\"dropdown-item\">\n      <ng-content *ngTemplateOutlet=\"item.template\"></ng-content>\n    </span>\n  </li>\n</ul>\n\n<ng-template #dividerTemplate>\n  <hr class=\"dropdown-divider\" />\n</ng-template>\n\n<a\n  #linkEl\n  class=\"impdc-dropdown-link\"\n  [class.hide]=\"!linkEl.children.length\"\n  [class.impdc-dropdown-open]=\"show\"\n  data-bs-toggle=\"dropdown\"\n  [attr.aria-expanded]=\"show\"\n  (click)=\"handleToggle(); $event.stopPropagation()\">\n  <ng-content select=\"[toggle]\"></ng-content>\n</a>\n", styles: [".impdc-dropdown-link{position:relative;padding:.8rem 1.6rem;border-radius:6px;font-size:14px;line-height:18px;font-weight:500}.impdc-dropdown-link.impdc-dropdown-open,.impdc-dropdown-link:active,.impdc-dropdown-link:focus{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.impdc-dropdown-link.hide{display:none}:host-context(.impdc-form-field-wrapper.input-group)>:host>.btn{border-top:none;border-bottom:none}:host-context(.impdc-form-field-wrapper.input-group)>:host:first-child>.btn:first-of-type{border-left:none}:host-context(.impdc-form-field-wrapper.input-group)>:host:last-child>.btn:last-of-type{border-right:none}:host-context(.input-group)>:host:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(.input-group:not(.has-validation))>:host:not(:last-child)>.btn,:host-context(.input-group:not(.has-validation))>:host:last-child>.btn:not(:last-of-type),:host-context(.input-group.has-validation)>:host:nth-last-child(n+3)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: InteractionService }]; }, propDecorators: { show: [{
+            args: [{ selector: 'impdc-dropdown, [impdc-dropdown]', exportAs: 'impdcDropdown', template: "<ng-container *ngIf=\"!linkEl.children.length\">\n  <button\n    *ngIf=\"!split; else splitTemplate\"\n    impdcButton\n    [theme]=\"buttonTheme\"\n    [text]=\"buttonText\"\n    class=\"dropdown-toggle\"\n    [class.show]=\"show\"\n    data-bs-toggle=\"dropdown\"\n    [attr.aria-expanded]=\"show\"\n    (click)=\"handleToggle(); $event.stopPropagation()\"></button>\n\n  <ng-template #splitTemplate>\n    <button\n      impdcButton\n      [theme]=\"buttonTheme\"\n      [text]=\"buttonText\"\n      (click)=\"handleButtonClick($event)\"></button>\n    <button\n      impdcButton\n      [theme]=\"buttonTheme\"\n      class=\"dropdown-toggle dropdown-toggle-split\"\n      [class.show]=\"show\"\n      [attr.aria-expanded]=\"show\"\n      (click)=\"handleToggle(); $event.stopPropagation()\">\n      <span class=\"visually-hidden\">Toggle Dropdown</span>\n    </button>\n  </ng-template>\n</ng-container>\n\n<ul\n  class=\"dropdown-menu\"\n  [class.dropdown-menu-end]=\"false\"\n  [class.show]=\"show\"\n  (click)=\"$event.stopPropagation()\">\n  <!-- <li *ngIf=\"headerText\">\n    <h6 class=\"dropdown-header\">{{ headerText }}</h6>\n  </li> -->\n  <li *ngFor=\"let item of items\">\n    <span *ngIf=\"!item.divider; else dividerTemplate\" class=\"dropdown-item\">\n      <ng-content *ngTemplateOutlet=\"item.template\"></ng-content>\n    </span>\n  </li>\n</ul>\n\n<ng-template #dividerTemplate>\n  <hr class=\"dropdown-divider\" />\n</ng-template>\n\n<a\n  #linkEl\n  class=\"impdc-dropdown-link\"\n  [class.hide]=\"!linkEl.children.length\"\n  [class.impdc-dropdown-open]=\"show\"\n  data-bs-toggle=\"dropdown\"\n  [attr.aria-expanded]=\"show\"\n  (click)=\"handleToggle(); $event.stopPropagation()\">\n  <ng-content select=\"[toggle]\"></ng-content>\n</a>\n", styles: [".impdc-dropdown-link{position:relative;padding:.8rem 1.6rem;border-radius:6px;font-size:14px;line-height:18px;font-weight:500}.impdc-dropdown-link.impdc-dropdown-open,.impdc-dropdown-link:active,.impdc-dropdown-link:focus{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.impdc-dropdown-link.hide{display:none}:host-context(.impdc-form-field-wrapper.input-group)>:host>.btn{border-top:none;border-bottom:none}:host-context(.impdc-form-field-wrapper.input-group)>:host:first-child>.btn:first-of-type{border-left:none}:host-context(.impdc-form-field-wrapper.input-group)>:host:last-child>.btn:last-of-type{border-right:none}:host-context(.input-group)>:host:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(.input-group:not(.has-validation))>:host:not(:last-child)>.btn,:host-context(.input-group:not(.has-validation))>:host:last-child>.btn:not(:last-of-type),:host-context(.input-group.has-validation)>:host:nth-last-child(n+3)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
+        }], ctorParameters: () => [{ type: InteractionService }], propDecorators: { show: [{
                 type: Input
             }], items: [{
                 type: ContentChildren,
@@ -7536,18 +7784,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class DropdownModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: DropdownModule, declarations: [DropdownItemComponent, DropdownComponent], imports: [CommonModule, ButtonModule], exports: [ButtonModule, DropdownItemComponent, DropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DropdownModule, imports: [CommonModule, ButtonModule, ButtonModule] }); }
 }
-DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DropdownModule, declarations: [DropdownItemComponent, DropdownComponent], imports: [CommonModule, ButtonModule], exports: [ButtonModule, DropdownItemComponent, DropdownComponent] });
-DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownModule, imports: [CommonModule, ButtonModule, ButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonModule],
                     declarations: [DropdownItemComponent, DropdownComponent],
                     exports: [ButtonModule, DropdownItemComponent, DropdownComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `AlertComponent` (`<impdc-alert` or `<any impdc-alert`) is intended to show information or feedback inline with content.
@@ -7620,10 +7868,10 @@ class AlertComponent {
         this.show = false;
         this.dismiss.emit();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText", bodyText: "bodyText", inline: "inline", hideIcon: "hideIcon", dismissible: "dismissible" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n  <ng-container *ngIf=\"!hideIcon\">\n    <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </span>\n    <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <span impdc-icon [name]=\"themeIconName\"></span>\n    </span>\n  </ng-container>\n\n  <div class=\"alert-content\">\n    <div class=\"alert-heading\">\n      <ng-content select=\"[heading]\"></ng-content>\n      <span *ngIf=\"headingText\">{{ headingText }}</span>\n    </div>\n\n    <div\n      #bodyContent\n      class=\"alert-body\"\n      [hidden]=\"!bodyContent.children.length\">\n      <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n      <ng-content></ng-content>\n\n      <div\n        #alertActions\n        [hidden]=\"!alertActions.children.length\"\n        class=\"alert-actions\">\n        <ng-content select=\"[action]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  <a\n    *ngIf=\"dismissible\"\n    class=\"close-icon\"\n    (click)=\"closeAlert()\"\n    data-bs-dismiss=\"alert\"\n    aria-label=\"Close\">\n    <span impdc-icon name=\"times\" theme=\"regular\"></span>\n  </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] }); }
 }
-AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText", bodyText: "bodyText", inline: "inline", hideIcon: "hideIcon", dismissible: "dismissible" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n  <ng-container *ngIf=\"!hideIcon\">\n    <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </span>\n    <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <span impdc-icon [name]=\"themeIconName\"></span>\n    </span>\n  </ng-container>\n\n  <div class=\"alert-content\">\n    <div class=\"alert-heading\">\n      <ng-content select=\"[heading]\"></ng-content>\n      <span *ngIf=\"headingText\">{{ headingText }}</span>\n    </div>\n\n    <div\n      #bodyContent\n      class=\"alert-body\"\n      [hidden]=\"!bodyContent.children.length\">\n      <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n      <ng-content></ng-content>\n\n      <div\n        #alertActions\n        [hidden]=\"!alertActions.children.length\"\n        class=\"alert-actions\">\n        <ng-content select=\"[action]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  <a\n    *ngIf=\"dismissible\"\n    class=\"close-icon\"\n    (click)=\"closeAlert()\"\n    data-bs-dismiss=\"alert\"\n    aria-label=\"Close\">\n    <span impdc-icon name=\"times\" theme=\"regular\"></span>\n  </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n  <ng-container *ngIf=\"!hideIcon\">\n    <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </span>\n    <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <span impdc-icon [name]=\"themeIconName\"></span>\n    </span>\n  </ng-container>\n\n  <div class=\"alert-content\">\n    <div class=\"alert-heading\">\n      <ng-content select=\"[heading]\"></ng-content>\n      <span *ngIf=\"headingText\">{{ headingText }}</span>\n    </div>\n\n    <div\n      #bodyContent\n      class=\"alert-body\"\n      [hidden]=\"!bodyContent.children.length\">\n      <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n      <ng-content></ng-content>\n\n      <div\n        #alertActions\n        [hidden]=\"!alertActions.children.length\"\n        class=\"alert-actions\">\n        <ng-content select=\"[action]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  <a\n    *ngIf=\"dismissible\"\n    class=\"close-icon\"\n    (click)=\"closeAlert()\"\n    data-bs-dismiss=\"alert\"\n    aria-label=\"Close\">\n    <span impdc-icon name=\"times\" theme=\"regular\"></span>\n  </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"] }]
         }], propDecorators: { theme: [{
@@ -7645,11 +7893,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class AlertModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule, IconModule], exports: [IconModule, AlertComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AlertModule, imports: [CommonModule, IconModule, IconModule] }); }
 }
-AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule, IconModule], exports: [IconModule, AlertComponent] });
-AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule, IconModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, IconModule],
@@ -7682,10 +7930,10 @@ class FileDropDirective {
             this.filesDropped.emit(fileList);
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: FileDropDirective, selector: "[impdcFileDrop]", outputs: { filesDropped: "filesDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "OnDrop($event)" }, properties: { "class.file-hover": "this.fileHovering" } }, ngImport: i0 }); }
 }
-FileDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FileDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: FileDropDirective, selector: "[impdcFileDrop]", outputs: { filesDropped: "filesDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "OnDrop($event)" }, properties: { "class.file-hover": "this.fileHovering" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[impdcFileDrop]'
@@ -7717,10 +7965,10 @@ class HumanReadableByteSizePipe {
         const display = round < 10 ? num.toFixed(2) : round < 100 ? num.toFixed(1) : round;
         return `${display}${'KMGTPEZY'[i - 1]}B`;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: HumanReadableByteSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: HumanReadableByteSizePipe, name: "humanReadableByteSize" }); }
 }
-HumanReadableByteSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HumanReadableByteSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-HumanReadableByteSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: HumanReadableByteSizePipe, name: "humanReadableByteSize" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HumanReadableByteSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: HumanReadableByteSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'humanReadableByteSize'
@@ -7742,6 +7990,24 @@ const _FileUploadComponentBase = mixinTabIndex(mixinDisabled(mixinErrorState(cla
  * To use, import `FileUploadModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class FileUploadComponent extends _FileUploadComponentBase {
+    get canUpload() {
+        return this.multiple || this._value.length === 0;
+    }
+    get acceptTypes() {
+        if (!this.accept || !this.accept.length) {
+            return [];
+        }
+        return this.accept
+            .split(',')
+            .map(a => a.trim())
+            .filter(a => !!a);
+    }
+    get empty() {
+        return this._value.length === 0;
+    }
+    get filesForDisplay() {
+        return this._value || [];
+    }
     constructor(_changeDetector, _defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl) {
         super(_defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl);
         this._changeDetector = _changeDetector;
@@ -7770,24 +8036,6 @@ class FileUploadComponent extends _FileUploadComponentBase {
         }
         this.id = this.id;
     }
-    get canUpload() {
-        return this.multiple || this._value.length === 0;
-    }
-    get acceptTypes() {
-        if (!this.accept || !this.accept.length) {
-            return [];
-        }
-        return this.accept
-            .split(',')
-            .map(a => a.trim())
-            .filter(a => !!a);
-    }
-    get empty() {
-        return this._value.length === 0;
-    }
-    get filesForDisplay() {
-        return this._value || [];
-    }
     /** @ignore */
     handleChange(event) {
         const fileList = (event.target || {})
@@ -7983,15 +8231,15 @@ class FileUploadComponent extends _FileUploadComponentBase {
         const acceptedByExtension = this.acceptTypes.some(type => fileExtensions.includes(type));
         return acceptedByExtension;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: FileUploadComponent, selector: "impdc-file-upload, [impdc-file-upload]", inputs: { disabled: "disabled", tabIndex: "tabIndex", multiple: "multiple", uploadText: "uploadText", accept: "accept", errorStateMatcher: "errorStateMatcher", value: "value", id: "id", required: "required" }, host: { listeners: { "focus": "_onFocus(); focus()" }, properties: { "attr.id": "id", "attr.tabindex": "tabIndex", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.impdc-file-upload--required": "required", "class.impdc-file-upload--disabled": "disabled", "class.impdc-file-upload--invalid": "errorState", "class.impdc-file-upload--multiple": "multiple", "class.impdc-file-upload--empty": "empty" }, classAttribute: "impdc-file-upload" }, providers: [
+            {
+                provide: ImpdcFormFieldControl,
+                useExisting: FileUploadComponent
+            }
+        ], viewQueries: [{ propertyName: "fileDropElementRef", first: true, predicate: FileDropDirective, descendants: true, read: ElementRef }, { propertyName: "fileUploadInputEltRef", first: true, predicate: ["fileUploadInputElt"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"impdc-file-upload-container\">\n  <div\n    class=\"impdc-file-upload-dropzone\"\n    [ngClass]=\"{\n      'hide-upload': !canUpload\n    }\"\n    impdcFileDrop\n    (filesDropped)=\"handleDrop($event)\"\n    (keyup.enter)=\"fileUploadInputElt.click()\"\n    (focus)=\"_onFocus()\"\n    (blur)=\"_onBlur()\"\n    [tabindex]=\"disabled ? '-1' : '0'\">\n    <input\n      class=\"file-upload-input\"\n      type=\"file\"\n      #fileUploadInputElt\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\"\n      [accept]=\"accept\"\n      (change)=\"handleChange($event)\"\n      tabindex=\"-1\" />\n    <span\n      impdc-icon\n      theme=\"regular\"\n      name=\"cloud-upload-alt\"\n      class=\"upload-icon\"></span>\n    <p class=\"upload-text\">{{ uploadText }}</p>\n  </div>\n  <div class=\"current-files\" *ngIf=\"filesForDisplay.length\">\n    <ng-container *ngFor=\"let file of filesForDisplay; let idx = index\">\n      <div class=\"current-file\">\n        <div class=\"current-file-details\">\n          <div class=\"name\">{{ file.name }}</div>\n          <div class=\"size\">{{ file.size | humanReadableByteSize }}</div>\n        </div>\n        <div *ngIf=\"!disabled\" class=\"current-file-actions\">\n          <button\n            impdcButton\n            theme=\"close\"\n            tabindex=\"0\"\n            (keyup.enter)=\"removeFile(idx)\"\n            (click)=\"removeFile(idx)\"></button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}:host.impdc-file-upload--invalid .impdc-file-upload-dropzone{color:var(--impd-color-red-500);border-color:var(--impd-color-red-500)}:host.impdc-file-upload--invalid .impdc-file-upload-dropzone .upload-text{color:var(--impd-color-red-900)}:host.impdc-file-upload--invalid .impdc-file-upload-container .current-files .current-file{border-color:var(--impd-color-red-500)}:host.impdc-file-upload--disabled .impdc-file-upload-dropzone{color:var(--impd-color-gray-300);background-color:var(--impd-color-gray-50)}:host:not(.impdc-file-upload--disabled) .impdc-file-upload-dropzone:focus,:host:not(.impdc-file-upload--disabled) .impdc-file-upload-dropzone:has(label>button:focus){background-color:var(--impd-color-gray-50);border:2px solid var(--impd-color-motion-blue-500);border-radius:var(--impd-border-radius-md);outline:none}.impdc-file-upload-container{display:flex;flex-direction:column;gap:var(--impd-size-2);width:100%}.impdc-file-upload-container .file-hover:not(.disabled){background-color:var(--impd-color-gray-50);border:2px solid var(--impd-color-motion-blue-500);border-radius:var(--impd-border-radius-md);outline:none}.impdc-file-upload-container .current-files{display:flex;flex-direction:column;gap:var(--impd-size-2)}.impdc-file-upload-container .current-files .current-file{display:inline-flex;background-color:var(--impd-color-gray-50);padding:var(--impd-size-4);gap:var(--impd-size-4);border-radius:var(--impd-border-radius-md);border:1px solid var(--impd-color-gray-200);justify-content:space-between;align-items:center;color:var(--impd-color-gray-600)}.impdc-file-upload-container .current-files .current-file .current-file-details{display:flex;flex-direction:column}.impdc-file-upload-container .current-files .current-file .current-file-details .name{color:var(--impd-color-gray-900);font-size:1.4rem;font-weight:500}.impdc-file-upload-container .current-files .current-file .current-file-details .size{font-size:1.4rem}.impdc-file-upload-container .current-files .current-file .current-file-actions .btn.btn-close-fa{color:var(--impd-color-gray-600)}.impdc-file-upload-dropzone{position:relative;display:flex;flex-direction:column;width:100%;min-height:10rem;padding:3.2rem 1.6rem;gap:2rem;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--impd-color-gray-200);color:var(--impd-color-motion-blue-600);border-radius:5px}.impdc-file-upload-dropzone.hide-upload{display:none}.impdc-file-upload-dropzone .upload-icon{font-size:33px;color:inherit}.impdc-file-upload-dropzone .upload-text{margin:0;font-size:14px;line-height:20px;color:inherit}.impdc-file-upload-dropzone .button-text{border-color:var(--impd-color-motion-blue-600);background-color:var(--impd-color-motion-blue-600);color:#fff}.impdc-file-upload-dropzone input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:2;cursor:pointer}.impdc-file-upload-dropzone input:disabled{cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "directive", type: FileDropDirective, selector: "[impdcFileDrop]", outputs: ["filesDropped"] }, { kind: "pipe", type: HumanReadableByteSizePipe, name: "humanReadableByteSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileUploadComponent, selector: "impdc-file-upload, [impdc-file-upload]", inputs: { disabled: "disabled", tabIndex: "tabIndex", multiple: "multiple", uploadText: "uploadText", accept: "accept", errorStateMatcher: "errorStateMatcher", value: "value", id: "id", required: "required" }, host: { listeners: { "focus": "_onFocus(); focus()" }, properties: { "attr.id": "id", "attr.tabindex": "tabIndex", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.impdc-file-upload--required": "required", "class.impdc-file-upload--disabled": "disabled", "class.impdc-file-upload--invalid": "errorState", "class.impdc-file-upload--multiple": "multiple", "class.impdc-file-upload--empty": "empty" }, classAttribute: "impdc-file-upload" }, providers: [
-        {
-            provide: ImpdcFormFieldControl,
-            useExisting: FileUploadComponent
-        }
-    ], viewQueries: [{ propertyName: "fileDropElementRef", first: true, predicate: FileDropDirective, descendants: true, read: ElementRef }, { propertyName: "fileUploadInputEltRef", first: true, predicate: ["fileUploadInputElt"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"impdc-file-upload-container\">\n  <div\n    class=\"impdc-file-upload-dropzone\"\n    [ngClass]=\"{\n      'hide-upload': !canUpload\n    }\"\n    impdcFileDrop\n    (filesDropped)=\"handleDrop($event)\"\n    (keyup.enter)=\"fileUploadInputElt.click()\"\n    (focus)=\"_onFocus()\"\n    (blur)=\"_onBlur()\"\n    [tabindex]=\"disabled ? '-1' : '0'\">\n    <input\n      class=\"file-upload-input\"\n      type=\"file\"\n      #fileUploadInputElt\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\"\n      [accept]=\"accept\"\n      (change)=\"handleChange($event)\"\n      tabindex=\"-1\" />\n    <span\n      impdc-icon\n      theme=\"regular\"\n      name=\"cloud-upload-alt\"\n      class=\"upload-icon\"></span>\n    <p class=\"upload-text\">{{ uploadText }}</p>\n  </div>\n  <div class=\"current-files\" *ngIf=\"filesForDisplay.length\">\n    <ng-container *ngFor=\"let file of filesForDisplay; let idx = index\">\n      <div class=\"current-file\">\n        <div class=\"current-file-details\">\n          <div class=\"name\">{{ file.name }}</div>\n          <div class=\"size\">{{ file.size | humanReadableByteSize }}</div>\n        </div>\n        <div *ngIf=\"!disabled\" class=\"current-file-actions\">\n          <button\n            impdcButton\n            theme=\"close\"\n            tabindex=\"0\"\n            (keyup.enter)=\"removeFile(idx)\"\n            (click)=\"removeFile(idx)\"></button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}:host.impdc-file-upload--invalid .impdc-file-upload-dropzone{color:var(--impd-color-red-500);border-color:var(--impd-color-red-500)}:host.impdc-file-upload--invalid .impdc-file-upload-dropzone .upload-text{color:var(--impd-color-red-900)}:host.impdc-file-upload--invalid .impdc-file-upload-container .current-files .current-file{border-color:var(--impd-color-red-500)}:host.impdc-file-upload--disabled .impdc-file-upload-dropzone{color:var(--impd-color-gray-300);background-color:var(--impd-color-gray-50)}:host:not(.impdc-file-upload--disabled) .impdc-file-upload-dropzone:focus,:host:not(.impdc-file-upload--disabled) .impdc-file-upload-dropzone:has(label > button:focus){background-color:var(--impd-color-gray-50);border:2px solid var(--impd-color-motion-blue-500);border-radius:var(--impd-border-radius-md);outline:none}.impdc-file-upload-container{display:flex;flex-direction:column;gap:var(--impd-size-2);width:100%}.impdc-file-upload-container .file-hover:not(.disabled){background-color:var(--impd-color-gray-50);border:2px solid var(--impd-color-motion-blue-500);border-radius:var(--impd-border-radius-md);outline:none}.impdc-file-upload-container .current-files{display:flex;flex-direction:column;gap:var(--impd-size-2)}.impdc-file-upload-container .current-files .current-file{display:inline-flex;background-color:var(--impd-color-gray-50);padding:var(--impd-size-4);gap:var(--impd-size-4);border-radius:var(--impd-border-radius-md);border:1px solid var(--impd-color-gray-200);justify-content:space-between;align-items:center;color:var(--impd-color-gray-600)}.impdc-file-upload-container .current-files .current-file .current-file-details{display:flex;flex-direction:column}.impdc-file-upload-container .current-files .current-file .current-file-details .name{color:var(--impd-color-gray-900);font-size:1.4rem;font-weight:500}.impdc-file-upload-container .current-files .current-file .current-file-details .size{font-size:1.4rem}.impdc-file-upload-container .current-files .current-file .current-file-actions .btn.btn-close-fa{color:var(--impd-color-gray-600)}.impdc-file-upload-dropzone{position:relative;display:flex;flex-direction:column;width:100%;min-height:10rem;padding:3.2rem 1.6rem;gap:2rem;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--impd-color-gray-200);color:var(--impd-color-motion-blue-600);border-radius:5px}.impdc-file-upload-dropzone.hide-upload{display:none}.impdc-file-upload-dropzone .upload-icon{font-size:33px;color:inherit}.impdc-file-upload-dropzone .upload-text{margin:0;font-size:14px;line-height:20px;color:inherit}.impdc-file-upload-dropzone .button-text{border-color:var(--impd-color-motion-blue-600);background-color:var(--impd-color-motion-blue-600);color:#fff}.impdc-file-upload-dropzone input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:2;cursor:pointer}.impdc-file-upload-dropzone input:disabled{cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "directive", type: FileDropDirective, selector: "[impdcFileDrop]", outputs: ["filesDropped"] }, { kind: "pipe", type: HumanReadableByteSizePipe, name: "humanReadableByteSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-file-upload, [impdc-file-upload]', inputs: ['disabled', 'tabIndex'], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'impdc-file-upload',
@@ -8011,8 +8259,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             provide: ImpdcFormFieldControl,
                             useExisting: FileUploadComponent
                         }
-                    ], template: "<div class=\"impdc-file-upload-container\">\n  <div\n    class=\"impdc-file-upload-dropzone\"\n    [ngClass]=\"{\n      'hide-upload': !canUpload\n    }\"\n    impdcFileDrop\n    (filesDropped)=\"handleDrop($event)\"\n    (keyup.enter)=\"fileUploadInputElt.click()\"\n    (focus)=\"_onFocus()\"\n    (blur)=\"_onBlur()\"\n    [tabindex]=\"disabled ? '-1' : '0'\">\n    <input\n      class=\"file-upload-input\"\n      type=\"file\"\n      #fileUploadInputElt\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\"\n      [accept]=\"accept\"\n      (change)=\"handleChange($event)\"\n      tabindex=\"-1\" />\n    <span\n      impdc-icon\n      theme=\"regular\"\n      name=\"cloud-upload-alt\"\n      class=\"upload-icon\"></span>\n    <p class=\"upload-text\">{{ uploadText }}</p>\n  </div>\n  <div class=\"current-files\" *ngIf=\"filesForDisplay.length\">\n    <ng-container *ngFor=\"let file of filesForDisplay; let idx = index\">\n      <div class=\"current-file\">\n        <div class=\"current-file-details\">\n          <div class=\"name\">{{ file.name }}</div>\n          <div class=\"size\">{{ file.size | humanReadableByteSize }}</div>\n        </div>\n        <div *ngIf=\"!disabled\" class=\"current-file-actions\">\n          <button\n            impdcButton\n            theme=\"close\"\n            tabindex=\"0\"\n            (keyup.enter)=\"removeFile(idx)\"\n            (click)=\"removeFile(idx)\"></button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}:host.impdc-file-upload--invalid .impdc-file-upload-dropzone{color:var(--impd-color-red-500);border-color:var(--impd-color-red-500)}:host.impdc-file-upload--invalid .impdc-file-upload-dropzone .upload-text{color:var(--impd-color-red-900)}:host.impdc-file-upload--invalid .impdc-file-upload-container .current-files .current-file{border-color:var(--impd-color-red-500)}:host.impdc-file-upload--disabled .impdc-file-upload-dropzone{color:var(--impd-color-gray-300);background-color:var(--impd-color-gray-50)}:host:not(.impdc-file-upload--disabled) .impdc-file-upload-dropzone:focus,:host:not(.impdc-file-upload--disabled) .impdc-file-upload-dropzone:has(label > button:focus){background-color:var(--impd-color-gray-50);border:2px solid var(--impd-color-motion-blue-500);border-radius:var(--impd-border-radius-md);outline:none}.impdc-file-upload-container{display:flex;flex-direction:column;gap:var(--impd-size-2);width:100%}.impdc-file-upload-container .file-hover:not(.disabled){background-color:var(--impd-color-gray-50);border:2px solid var(--impd-color-motion-blue-500);border-radius:var(--impd-border-radius-md);outline:none}.impdc-file-upload-container .current-files{display:flex;flex-direction:column;gap:var(--impd-size-2)}.impdc-file-upload-container .current-files .current-file{display:inline-flex;background-color:var(--impd-color-gray-50);padding:var(--impd-size-4);gap:var(--impd-size-4);border-radius:var(--impd-border-radius-md);border:1px solid var(--impd-color-gray-200);justify-content:space-between;align-items:center;color:var(--impd-color-gray-600)}.impdc-file-upload-container .current-files .current-file .current-file-details{display:flex;flex-direction:column}.impdc-file-upload-container .current-files .current-file .current-file-details .name{color:var(--impd-color-gray-900);font-size:1.4rem;font-weight:500}.impdc-file-upload-container .current-files .current-file .current-file-details .size{font-size:1.4rem}.impdc-file-upload-container .current-files .current-file .current-file-actions .btn.btn-close-fa{color:var(--impd-color-gray-600)}.impdc-file-upload-dropzone{position:relative;display:flex;flex-direction:column;width:100%;min-height:10rem;padding:3.2rem 1.6rem;gap:2rem;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--impd-color-gray-200);color:var(--impd-color-motion-blue-600);border-radius:5px}.impdc-file-upload-dropzone.hide-upload{display:none}.impdc-file-upload-dropzone .upload-icon{font-size:33px;color:inherit}.impdc-file-upload-dropzone .upload-text{margin:0;font-size:14px;line-height:20px;color:inherit}.impdc-file-upload-dropzone .button-text{border-color:var(--impd-color-motion-blue-600);background-color:var(--impd-color-motion-blue-600);color:#fff}.impdc-file-upload-dropzone input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:2;cursor:pointer}.impdc-file-upload-dropzone input:disabled{cursor:default}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ErrorStateMatcher }, { type: undefined, decorators: [{
+                    ], template: "<div class=\"impdc-file-upload-container\">\n  <div\n    class=\"impdc-file-upload-dropzone\"\n    [ngClass]=\"{\n      'hide-upload': !canUpload\n    }\"\n    impdcFileDrop\n    (filesDropped)=\"handleDrop($event)\"\n    (keyup.enter)=\"fileUploadInputElt.click()\"\n    (focus)=\"_onFocus()\"\n    (blur)=\"_onBlur()\"\n    [tabindex]=\"disabled ? '-1' : '0'\">\n    <input\n      class=\"file-upload-input\"\n      type=\"file\"\n      #fileUploadInputElt\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\"\n      [accept]=\"accept\"\n      (change)=\"handleChange($event)\"\n      tabindex=\"-1\" />\n    <span\n      impdc-icon\n      theme=\"regular\"\n      name=\"cloud-upload-alt\"\n      class=\"upload-icon\"></span>\n    <p class=\"upload-text\">{{ uploadText }}</p>\n  </div>\n  <div class=\"current-files\" *ngIf=\"filesForDisplay.length\">\n    <ng-container *ngFor=\"let file of filesForDisplay; let idx = index\">\n      <div class=\"current-file\">\n        <div class=\"current-file-details\">\n          <div class=\"name\">{{ file.name }}</div>\n          <div class=\"size\">{{ file.size | humanReadableByteSize }}</div>\n        </div>\n        <div *ngIf=\"!disabled\" class=\"current-file-actions\">\n          <button\n            impdcButton\n            theme=\"close\"\n            tabindex=\"0\"\n            (keyup.enter)=\"removeFile(idx)\"\n            (click)=\"removeFile(idx)\"></button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:block}:host.impdc-file-upload--invalid .impdc-file-upload-dropzone{color:var(--impd-color-red-500);border-color:var(--impd-color-red-500)}:host.impdc-file-upload--invalid .impdc-file-upload-dropzone .upload-text{color:var(--impd-color-red-900)}:host.impdc-file-upload--invalid .impdc-file-upload-container .current-files .current-file{border-color:var(--impd-color-red-500)}:host.impdc-file-upload--disabled .impdc-file-upload-dropzone{color:var(--impd-color-gray-300);background-color:var(--impd-color-gray-50)}:host:not(.impdc-file-upload--disabled) .impdc-file-upload-dropzone:focus,:host:not(.impdc-file-upload--disabled) .impdc-file-upload-dropzone:has(label>button:focus){background-color:var(--impd-color-gray-50);border:2px solid var(--impd-color-motion-blue-500);border-radius:var(--impd-border-radius-md);outline:none}.impdc-file-upload-container{display:flex;flex-direction:column;gap:var(--impd-size-2);width:100%}.impdc-file-upload-container .file-hover:not(.disabled){background-color:var(--impd-color-gray-50);border:2px solid var(--impd-color-motion-blue-500);border-radius:var(--impd-border-radius-md);outline:none}.impdc-file-upload-container .current-files{display:flex;flex-direction:column;gap:var(--impd-size-2)}.impdc-file-upload-container .current-files .current-file{display:inline-flex;background-color:var(--impd-color-gray-50);padding:var(--impd-size-4);gap:var(--impd-size-4);border-radius:var(--impd-border-radius-md);border:1px solid var(--impd-color-gray-200);justify-content:space-between;align-items:center;color:var(--impd-color-gray-600)}.impdc-file-upload-container .current-files .current-file .current-file-details{display:flex;flex-direction:column}.impdc-file-upload-container .current-files .current-file .current-file-details .name{color:var(--impd-color-gray-900);font-size:1.4rem;font-weight:500}.impdc-file-upload-container .current-files .current-file .current-file-details .size{font-size:1.4rem}.impdc-file-upload-container .current-files .current-file .current-file-actions .btn.btn-close-fa{color:var(--impd-color-gray-600)}.impdc-file-upload-dropzone{position:relative;display:flex;flex-direction:column;width:100%;min-height:10rem;padding:3.2rem 1.6rem;gap:2rem;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--impd-color-gray-200);color:var(--impd-color-motion-blue-600);border-radius:5px}.impdc-file-upload-dropzone.hide-upload{display:none}.impdc-file-upload-dropzone .upload-icon{font-size:33px;color:inherit}.impdc-file-upload-dropzone .upload-text{margin:0;font-size:14px;line-height:20px;color:inherit}.impdc-file-upload-dropzone .button-text{border-color:var(--impd-color-motion-blue-600);background-color:var(--impd-color-motion-blue-600);color:#fff}.impdc-file-upload-dropzone input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:2;cursor:pointer}.impdc-file-upload-dropzone input:disabled{cursor:default}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ErrorStateMatcher }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -8025,7 +8273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { fileDropElementRef: [{
+                }] }], propDecorators: { fileDropElementRef: [{
                 type: ViewChild,
                 args: [FileDropDirective, { read: ElementRef }]
             }], fileUploadInputEltRef: [{
@@ -8049,13 +8297,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class FileUploadModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: FileUploadModule, declarations: [FileDropDirective,
+            FileUploadComponent,
+            HumanReadableByteSizePipe], imports: [CommonModule, FormsModule, ButtonModule, IconModule], exports: [IconModule, FileDropDirective, FileUploadComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileUploadModule, imports: [CommonModule, FormsModule, ButtonModule, IconModule, IconModule] }); }
 }
-FileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: FileUploadModule, declarations: [FileDropDirective,
-        FileUploadComponent,
-        HumanReadableByteSizePipe], imports: [CommonModule, FormsModule, ButtonModule, IconModule], exports: [IconModule, FileDropDirective, FileUploadComponent] });
-FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadModule, imports: [CommonModule, FormsModule, ButtonModule, IconModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ButtonModule, IconModule],
@@ -8066,7 +8314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     ],
                     exports: [IconModule, FileDropDirective, FileUploadComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `AvatarComponent` (`<impdc-avatar`) is a rounded user avatar/icon with an optional status color.
@@ -8095,10 +8343,10 @@ class AvatarComponent {
     get avatarHasImg() {
         return this.imgSrc && this.imgSrc.length > 0 ? true : false;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: AvatarComponent, selector: "impdc-avatar", inputs: { imgSrc: "imgSrc", initials: "initials", status: "status", size: "size" }, ngImport: i0, template: "<div class=\"avatar-container\">\n  <span class=\"avatar-status\" *ngIf=\"status\" [ngClass]=\"[size, status]\"></span>\n\n  <img\n    class=\"avatar\"\n    *ngIf=\"avatarHasImg\"\n    [attr.src]=\"imgSrc\"\n    [ngClass]=\"size\" />\n  <div\n    class=\"avatar initials\"\n    *ngIf=\"!avatarHasImg && initials\"\n    [ngClass]=\"size\">\n    {{ initials.toUpperCase() }}\n  </div>\n\n  <div\n    class=\"avatar fallback\"\n    *ngIf=\"!avatarHasImg && !initials\"\n    [ngClass]=\"size\">\n    <span impdc-icon name=\"user\"></span>\n  </div>\n</div>\n", styles: [".avatar-container{display:flex;position:relative;align-items:center;justify-content:center}.avatar-right{margin-left:1.2rem}.avatar{border-radius:50%}.avatar.xs{height:2.4rem;width:2.4rem}.avatar.sm{height:3.2rem;width:3.2rem}.avatar.md{height:4rem;width:4rem}.avatar.lg{height:4.8rem;width:4.8rem}.avatar.xl{height:5.6rem;width:5.6rem}.avatar.xxl{height:6.4rem;width:6.4rem}.avatar.initials{background-color:var(--impd-color-gray-400);color:var(--impd-color-white)}.avatar.initials.xs{font-size:1.2rem}.avatar.initials.sm{font-size:1.4rem}.avatar.initials.md{font-size:1.6rem}.avatar.initials.lg{font-size:1.8rem}.avatar.initials.xl{font-size:2rem}.avatar.initials.xxl{font-size:2.2rem}.avatar.fallback{background:var(--impd-color-gray-100);color:var(--impd-color-gray-300)}.avatar.fallback.xs{font-size:1.2rem}.avatar.fallback.sm{font-size:1.7rem}.avatar.fallback.md{font-size:2.3rem}.avatar.fallback.lg{font-size:2.9rem}.avatar.fallback.xl{font-size:3.5rem}.avatar.fallback.xxl{font-size:3.9rem}.avatar.initials,.avatar.fallback{display:flex;align-items:center;justify-content:center}.avatar-status{border-radius:50%;border:.2rem solid var(--impd-color-white);position:absolute;top:0;right:0}.avatar-status.xs{height:.6rem;width:.6rem}.avatar-status.sm{height:.8rem;width:.8rem}.avatar-status.md{height:1rem;width:1rem}.avatar-status.lg{height:1.2rem;width:1.2rem}.avatar-status.xl{height:1.4rem;width:1.4rem}.avatar-status.xxl{height:1.6rem;width:1.6rem}.avatar-status.active{background-color:var(--impd-color-green-400)}.avatar-status.inactive{background-color:var(--impd-color-gray-300)}.avatar-status.busy{background-color:var(--impd-color-red-400)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] }); }
 }
-AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AvatarComponent, selector: "impdc-avatar", inputs: { imgSrc: "imgSrc", initials: "initials", status: "status", size: "size" }, ngImport: i0, template: "<div class=\"avatar-container\">\n  <span class=\"avatar-status\" *ngIf=\"status\" [ngClass]=\"[size, status]\"></span>\n\n  <img\n    class=\"avatar\"\n    *ngIf=\"avatarHasImg\"\n    [attr.src]=\"imgSrc\"\n    [ngClass]=\"size\" />\n  <div\n    class=\"avatar initials\"\n    *ngIf=\"!avatarHasImg && initials\"\n    [ngClass]=\"size\">\n    {{ initials.toUpperCase() }}\n  </div>\n\n  <div\n    class=\"avatar fallback\"\n    *ngIf=\"!avatarHasImg && !initials\"\n    [ngClass]=\"size\">\n    <span impdc-icon name=\"user\"></span>\n  </div>\n</div>\n", styles: [".avatar-container{display:flex;position:relative;align-items:center;justify-content:center}.avatar-right{margin-left:1.2rem}.avatar{border-radius:50%}.avatar.xs{height:2.4rem;width:2.4rem}.avatar.sm{height:3.2rem;width:3.2rem}.avatar.md{height:4rem;width:4rem}.avatar.lg{height:4.8rem;width:4.8rem}.avatar.xl{height:5.6rem;width:5.6rem}.avatar.xxl{height:6.4rem;width:6.4rem}.avatar.initials{background-color:var(--impd-color-gray-400);color:var(--impd-color-white)}.avatar.initials.xs{font-size:1.2rem}.avatar.initials.sm{font-size:1.4rem}.avatar.initials.md{font-size:1.6rem}.avatar.initials.lg{font-size:1.8rem}.avatar.initials.xl{font-size:2rem}.avatar.initials.xxl{font-size:2.2rem}.avatar.fallback{background:var(--impd-color-gray-100);color:var(--impd-color-gray-300)}.avatar.fallback.xs{font-size:1.2rem}.avatar.fallback.sm{font-size:1.7rem}.avatar.fallback.md{font-size:2.3rem}.avatar.fallback.lg{font-size:2.9rem}.avatar.fallback.xl{font-size:3.5rem}.avatar.fallback.xxl{font-size:3.9rem}.avatar.initials,.avatar.fallback{display:flex;align-items:center;justify-content:center}.avatar-status{border-radius:50%;border:.2rem solid var(--impd-color-white);position:absolute;top:0;right:0}.avatar-status.xs{height:.6rem;width:.6rem}.avatar-status.sm{height:.8rem;width:.8rem}.avatar-status.md{height:1rem;width:1rem}.avatar-status.lg{height:1.2rem;width:1.2rem}.avatar-status.xl{height:1.4rem;width:1.4rem}.avatar-status.xxl{height:1.6rem;width:1.6rem}.avatar-status.active{background-color:var(--impd-color-green-400)}.avatar-status.inactive{background-color:var(--impd-color-gray-300)}.avatar-status.busy{background-color:var(--impd-color-red-400)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-avatar', template: "<div class=\"avatar-container\">\n  <span class=\"avatar-status\" *ngIf=\"status\" [ngClass]=\"[size, status]\"></span>\n\n  <img\n    class=\"avatar\"\n    *ngIf=\"avatarHasImg\"\n    [attr.src]=\"imgSrc\"\n    [ngClass]=\"size\" />\n  <div\n    class=\"avatar initials\"\n    *ngIf=\"!avatarHasImg && initials\"\n    [ngClass]=\"size\">\n    {{ initials.toUpperCase() }}\n  </div>\n\n  <div\n    class=\"avatar fallback\"\n    *ngIf=\"!avatarHasImg && !initials\"\n    [ngClass]=\"size\">\n    <span impdc-icon name=\"user\"></span>\n  </div>\n</div>\n", styles: [".avatar-container{display:flex;position:relative;align-items:center;justify-content:center}.avatar-right{margin-left:1.2rem}.avatar{border-radius:50%}.avatar.xs{height:2.4rem;width:2.4rem}.avatar.sm{height:3.2rem;width:3.2rem}.avatar.md{height:4rem;width:4rem}.avatar.lg{height:4.8rem;width:4.8rem}.avatar.xl{height:5.6rem;width:5.6rem}.avatar.xxl{height:6.4rem;width:6.4rem}.avatar.initials{background-color:var(--impd-color-gray-400);color:var(--impd-color-white)}.avatar.initials.xs{font-size:1.2rem}.avatar.initials.sm{font-size:1.4rem}.avatar.initials.md{font-size:1.6rem}.avatar.initials.lg{font-size:1.8rem}.avatar.initials.xl{font-size:2rem}.avatar.initials.xxl{font-size:2.2rem}.avatar.fallback{background:var(--impd-color-gray-100);color:var(--impd-color-gray-300)}.avatar.fallback.xs{font-size:1.2rem}.avatar.fallback.sm{font-size:1.7rem}.avatar.fallback.md{font-size:2.3rem}.avatar.fallback.lg{font-size:2.9rem}.avatar.fallback.xl{font-size:3.5rem}.avatar.fallback.xxl{font-size:3.9rem}.avatar.initials,.avatar.fallback{display:flex;align-items:center;justify-content:center}.avatar-status{border-radius:50%;border:.2rem solid var(--impd-color-white);position:absolute;top:0;right:0}.avatar-status.xs{height:.6rem;width:.6rem}.avatar-status.sm{height:.8rem;width:.8rem}.avatar-status.md{height:1rem;width:1rem}.avatar-status.lg{height:1.2rem;width:1.2rem}.avatar-status.xl{height:1.4rem;width:1.4rem}.avatar-status.xxl{height:1.6rem;width:1.6rem}.avatar-status.active{background-color:var(--impd-color-green-400)}.avatar-status.inactive{background-color:var(--impd-color-gray-300)}.avatar-status.busy{background-color:var(--impd-color-red-400)}\n"] }]
         }], propDecorators: { imgSrc: [{
@@ -8112,11 +8360,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class AvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule, IconModule], exports: [IconModule, AvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarModule, imports: [CommonModule, IconModule, IconModule] }); }
 }
-AvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule, IconModule], exports: [IconModule, AvatarComponent] });
-AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarModule, imports: [CommonModule, IconModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, IconModule],
@@ -8131,20 +8379,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * `AvatarGroupModule` also imports and exports [AvatarModule](./?path=/docs/design-components-avatar--single)
  */
 class AvatarGroupComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: AvatarGroupComponent, selector: "impdc-avatar-group", ngImport: i0, template: "<div class=\"avatar-group\">\n  <ng-content select=\"impdc-avatar\"></ng-content>\n</div>\n", styles: [".avatar-group{display:flex}::ng-deep impdc-avatar-group .avatar{border:.2rem solid #fff}::ng-deep impdc-avatar:not(:first-of-type) .avatar.xs{margin-left:-1rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.sm{margin-left:-1.2rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.md{margin-left:-1.4rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.lg{margin-left:-1.6rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.xl{margin-left:-1.8rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.xxl{margin-left:-2rem}\n"] }); }
 }
-AvatarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AvatarGroupComponent, selector: "impdc-avatar-group", ngImport: i0, template: "<div class=\"avatar-group\">\n  <ng-content select=\"impdc-avatar\"></ng-content>\n</div>\n", styles: [".avatar-group{display:flex}::ng-deep impdc-avatar-group .avatar{border:.2rem solid #fff}::ng-deep impdc-avatar:not(:first-of-type) .avatar.xs{margin-left:-1rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.sm{margin-left:-1.2rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.md{margin-left:-1.4rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.lg{margin-left:-1.6rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.xl{margin-left:-1.8rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.xxl{margin-left:-2rem}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-avatar-group', template: "<div class=\"avatar-group\">\n  <ng-content select=\"impdc-avatar\"></ng-content>\n</div>\n", styles: [".avatar-group{display:flex}::ng-deep impdc-avatar-group .avatar{border:.2rem solid #fff}::ng-deep impdc-avatar:not(:first-of-type) .avatar.xs{margin-left:-1rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.sm{margin-left:-1.2rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.md{margin-left:-1.4rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.lg{margin-left:-1.6rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.xl{margin-left:-1.8rem}::ng-deep impdc-avatar:not(:first-of-type) .avatar.xxl{margin-left:-2rem}\n"] }]
         }] });
 
 class AvatarGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: AvatarGroupModule, declarations: [AvatarGroupComponent], imports: [CommonModule, AvatarModule], exports: [AvatarModule, AvatarGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarGroupModule, imports: [CommonModule, AvatarModule, AvatarModule] }); }
 }
-AvatarGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AvatarGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AvatarGroupModule, declarations: [AvatarGroupComponent], imports: [CommonModule, AvatarModule], exports: [AvatarModule, AvatarGroupComponent] });
-AvatarGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarGroupModule, imports: [CommonModule, AvatarModule, AvatarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AvatarGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AvatarGroupComponent],
@@ -8154,14 +8402,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class BreadcrumbItemComponent {
-}
-BreadcrumbItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BreadcrumbItemComponent, selector: "impdc-breadcrumb-item", viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, read: TemplateRef }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: BreadcrumbItemComponent, selector: "impdc-breadcrumb-item", viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, read: TemplateRef }], ngImport: i0, template: `
     <ng-template #content>
       <ng-content></ng-content>
     </ng-template>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'impdc-breadcrumb-item',
@@ -8193,13 +8441,13 @@ class BreadcrumbComponent {
     ngAfterViewInit() {
         this._changeDetectorRef.detectChanges();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: BreadcrumbComponent, selector: "impdc-breadcrumb, div[impdc-breadcrumb]", inputs: { label: "label" }, host: { properties: { "class.impdc-breadcrumb": "this.impdcBreadcrumb" } }, queries: [{ propertyName: "breadcrumbItems", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"impdc-breadcrumb\" [attr.aria-label]=\"label || 'breadcrumb'\">\n  <ol>\n    <li\n      *ngFor=\"let breadcrumbItem of breadcrumbItems; last as isLast\"\n      [attr.aria-current]=\"isLast ? 'page' : undefined\">\n      <ng-container\n        [ngTemplateOutlet]=\"breadcrumbItem.contentTemplate\"></ng-container>\n    </li>\n  </ol>\n</nav>\n", styles: [".impdc-breadcrumb{--impartner-hex-link-color: var(--impd-color-gray-500, #6b7280);--impartner-hex-link-hover-color: var(--impd-color-gray-700, #374151);font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-500, #6b7280);font-weight:500}.impdc-breadcrumb a:not([href]):not([class]){color:var(--impartner-hex-link-color)}.impdc-breadcrumb a:not([href]):not([class]):hover{color:var(--impartner-hex-link-hover-color)}.impdc-breadcrumb ol,.impdc-breadcrumb ol li.impdc-crumb{display:inline-flex;align-items:center;vertical-align:middle}.impdc-breadcrumb ol{margin:0;padding-left:0;list-style:none}.impdc-breadcrumb li+li:before{margin:0 .8rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;width:2rem;font-family:\"Font Awesome 6 Pro\",\"Font Awesome 6 Free\",\"Font Awesome 5 Pro\",\"Font Awesome 5 Free\";font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-400, #6b7280);font-weight:900;content:\"\\f054\";text-rendering:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BreadcrumbComponent, selector: "impdc-breadcrumb, div[impdc-breadcrumb]", inputs: { label: "label" }, host: { properties: { "class.impdc-breadcrumb": "this.impdcBreadcrumb" } }, queries: [{ propertyName: "breadcrumbItems", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"impdc-breadcrumb\" [attr.aria-label]=\"label || 'breadcrumb'\">\n  <ol>\n    <li\n      *ngFor=\"let breadcrumbItem of breadcrumbItems; last as isLast\"\n      [attr.aria-current]=\"isLast ? 'page' : undefined\">\n      <ng-container\n        [ngTemplateOutlet]=\"breadcrumbItem.contentTemplate\"></ng-container>\n    </li>\n  </ol>\n</nav>\n", styles: [".impdc-breadcrumb{--impartner-hex-link-color: var(--impd-color-gray-500, #6b7280);--impartner-hex-link-hover-color: var(--impd-color-gray-700, #374151);font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-500, #6b7280);font-weight:500}.impdc-breadcrumb a:not([href]):not([class]){color:var(--impartner-hex-link-color)}.impdc-breadcrumb a:not([href]):not([class]):hover{color:var(--impartner-hex-link-hover-color)}.impdc-breadcrumb ol,.impdc-breadcrumb ol li.impdc-crumb{display:inline-flex;align-items:center;vertical-align:middle}.impdc-breadcrumb ol{margin:0;padding-left:0;list-style:none}.impdc-breadcrumb li+li:before{margin:0 .8rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;width:2rem;font-family:\"Font Awesome 6 Pro\",\"Font Awesome 6 Free\",\"Font Awesome 5 Pro\",\"Font Awesome 5 Free\";font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-400, #6b7280);font-weight:900;content:\"\\f054\";text-rendering:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-breadcrumb, div[impdc-breadcrumb]', encapsulation: ViewEncapsulation.None, template: "<nav class=\"impdc-breadcrumb\" [attr.aria-label]=\"label || 'breadcrumb'\">\n  <ol>\n    <li\n      *ngFor=\"let breadcrumbItem of breadcrumbItems; last as isLast\"\n      [attr.aria-current]=\"isLast ? 'page' : undefined\">\n      <ng-container\n        [ngTemplateOutlet]=\"breadcrumbItem.contentTemplate\"></ng-container>\n    </li>\n  </ol>\n</nav>\n", styles: [".impdc-breadcrumb{--impartner-hex-link-color: var(--impd-color-gray-500, #6b7280);--impartner-hex-link-hover-color: var(--impd-color-gray-700, #374151);font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-500, #6b7280);font-weight:500}.impdc-breadcrumb a:not([href]):not([class]){color:var(--impartner-hex-link-color)}.impdc-breadcrumb a:not([href]):not([class]):hover{color:var(--impartner-hex-link-hover-color)}.impdc-breadcrumb ol,.impdc-breadcrumb ol li.impdc-crumb{display:inline-flex;align-items:center;vertical-align:middle}.impdc-breadcrumb ol{margin:0;padding-left:0;list-style:none}.impdc-breadcrumb li+li:before{margin:0 .8rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;width:2rem;font-family:\"Font Awesome 6 Pro\",\"Font Awesome 6 Free\",\"Font Awesome 5 Pro\",\"Font Awesome 5 Free\";font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-400, #6b7280);font-weight:900;content:\"\\f054\";text-rendering:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], impdcBreadcrumb: [{
                 type: HostBinding,
@@ -8210,11 +8458,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class BreadcrumbModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbItemComponent, BreadcrumbComponent], imports: [CommonModule], exports: [BreadcrumbItemComponent, BreadcrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule] }); }
 }
-BreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbItemComponent, BreadcrumbComponent], imports: [CommonModule], exports: [BreadcrumbItemComponent, BreadcrumbComponent] });
-BreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: BreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [BreadcrumbItemComponent, BreadcrumbComponent],
@@ -8224,67 +8472,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DesignComponentsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DesignComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: DesignComponentsModule, imports: [CommonModule,
+            FormsModule,
+            TextHighlightModule,
+            IconModule,
+            BadgeModule,
+            ProgressBarModule,
+            ButtonModule,
+            TableModule,
+            DropdownModule,
+            AlertModule,
+            ModalModule,
+            FileUploadModule,
+            AvatarModule,
+            AvatarGroupModule,
+            BreadcrumbModule,
+            BrandingModule], exports: [TextHighlightModule,
+            IconModule,
+            BadgeModule,
+            ProgressBarModule,
+            ButtonModule,
+            TableModule,
+            DropdownModule,
+            AlertModule,
+            ModalModule,
+            FileUploadModule,
+            AvatarModule,
+            AvatarGroupModule,
+            BreadcrumbModule,
+            BrandingModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DesignComponentsModule, imports: [CommonModule,
+            FormsModule,
+            TextHighlightModule,
+            IconModule,
+            BadgeModule,
+            ProgressBarModule,
+            ButtonModule,
+            TableModule,
+            DropdownModule,
+            AlertModule,
+            ModalModule,
+            FileUploadModule,
+            AvatarModule,
+            AvatarGroupModule,
+            BreadcrumbModule,
+            BrandingModule, TextHighlightModule,
+            IconModule,
+            BadgeModule,
+            ProgressBarModule,
+            ButtonModule,
+            TableModule,
+            DropdownModule,
+            AlertModule,
+            ModalModule,
+            FileUploadModule,
+            AvatarModule,
+            AvatarGroupModule,
+            BreadcrumbModule,
+            BrandingModule] }); }
 }
-DesignComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DesignComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DesignComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DesignComponentsModule, imports: [CommonModule,
-        FormsModule,
-        TextHighlightModule,
-        IconModule,
-        BadgeModule,
-        ProgressBarModule,
-        ButtonModule,
-        TableModule,
-        DropdownModule,
-        AlertModule,
-        ModalModule,
-        FileUploadModule,
-        AvatarModule,
-        AvatarGroupModule,
-        BreadcrumbModule,
-        BrandingModule], exports: [TextHighlightModule,
-        IconModule,
-        BadgeModule,
-        ProgressBarModule,
-        ButtonModule,
-        TableModule,
-        DropdownModule,
-        AlertModule,
-        ModalModule,
-        FileUploadModule,
-        AvatarModule,
-        AvatarGroupModule,
-        BreadcrumbModule,
-        BrandingModule] });
-DesignComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DesignComponentsModule, imports: [CommonModule,
-        FormsModule,
-        TextHighlightModule,
-        IconModule,
-        BadgeModule,
-        ProgressBarModule,
-        ButtonModule,
-        TableModule,
-        DropdownModule,
-        AlertModule,
-        ModalModule,
-        FileUploadModule,
-        AvatarModule,
-        AvatarGroupModule,
-        BreadcrumbModule,
-        BrandingModule, TextHighlightModule,
-        IconModule,
-        BadgeModule,
-        ProgressBarModule,
-        ButtonModule,
-        TableModule,
-        DropdownModule,
-        AlertModule,
-        ModalModule,
-        FileUploadModule,
-        AvatarModule,
-        AvatarGroupModule,
-        BreadcrumbModule,
-        BrandingModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DesignComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DesignComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -8350,10 +8598,10 @@ class ButtonGroupComponent {
     get attrAriaLabel() {
         return this.ariaLabel || undefined;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ButtonGroupComponent, selector: "impdc-button-group, [impdc-button-group]", inputs: { vertical: "vertical", ariaLabel: "ariaLabel" }, host: { properties: { "class.btn-group": "this.classBtnGroup", "class.btn-group-vertical": "this.classBtnGroupVertical", "attr.role": "this.attrRole", "attr.aria-label": "this.attrAriaLabel" } }, ngImport: i0, template: "<ng-content></ng-content>\n", encapsulation: i0.ViewEncapsulation.None }); }
 }
-ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ButtonGroupComponent, selector: "impdc-button-group, [impdc-button-group]", inputs: { vertical: "vertical", ariaLabel: "ariaLabel" }, host: { properties: { "class.btn-group": "this.classBtnGroup", "class.btn-group-vertical": "this.classBtnGroupVertical", "attr.role": "this.attrRole", "attr.aria-label": "this.attrAriaLabel" } }, ngImport: i0, template: "<ng-content></ng-content>\n", encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-button-group, [impdc-button-group]', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { vertical: [{
@@ -8376,18 +8624,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class ButtonGroupModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroupComponent], imports: [CommonModule, ButtonModule], exports: [ButtonModule, ButtonGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonGroupModule, imports: [CommonModule, ButtonModule, ButtonModule] }); }
 }
-ButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroupComponent], imports: [CommonModule, ButtonModule], exports: [ButtonModule, ButtonGroupComponent] });
-ButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonGroupModule, imports: [CommonModule, ButtonModule, ButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonModule],
                     declarations: [ButtonGroupComponent],
                     exports: [ButtonModule, ButtonGroupComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `CardHeadingComponent` (`<impdc-card-heading` or `<div impdc-card-heading`) is used to display projected content as a card with a consistent heading.
@@ -8404,13 +8652,13 @@ class CardHeadingComponent {
          */
         this.description = '';
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CardHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: CardHeadingComponent, selector: "impdc-card-heading, div[impdc-card-heading]", inputs: { title: "title", description: "description" }, ngImport: i0, template: "<div class=\"card-heading\">\n  <div class=\"heading\">\n    <div class=\"heading-left\">\n      <div class=\"heading-avatar\">\n        <ng-content select=\"impdc-avatar\"></ng-content>\n      </div>\n      <div class=\"heading-title\">\n        <h3 *ngIf=\"title\">{{ title }}</h3>\n        <span class=\"description\" *ngIf=\"description\">{{ description }}</span>\n      </div>\n    </div>\n    <div class=\"heading-actions\">\n      <ng-content select=\"button[impdcButton]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"card-heading-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card-heading{background-color:var(--impdc-color-white, #ffffff);border:.1rem solid;border-color:var(--impd-color-gray-200);border-radius:var(--impd-border-radius-md)}.card-heading .heading{display:flex;flex-direction:row;flex-wrap:wrap;padding:2rem 2.4rem;align-items:center;gap:1.5rem;justify-content:space-between}.card-heading .heading .heading-left{display:flex;flex-direction:row;align-items:center;gap:1.6rem;flex-grow:1}.card-heading .heading .heading-left .heading-avatar{display:none}.card-heading .heading .heading-left .heading-avatar:has(impdc-avatar){display:block}.card-heading .heading .heading-left .heading-title{align-content:center;display:flex;flex-direction:column;color:var(--impd-color-gray-900)}.card-heading .heading .heading-left .heading-title h3{margin-bottom:0}.card-heading .heading .heading-left .heading-title .description{color:var(--impd-color-gray-500);margin-bottom:0;margin-top:.4rem;font-size:var(--impd-font-size-sm);line-height:2rem}.card-heading .heading .heading-actions{display:flex;flex-direction:row;gap:1.2rem;flex-flow:wrap}.card-heading .card-heading-body{border-top:.1rem solid;border-top-color:var(--impd-color-gray-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-CardHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CardHeadingComponent, selector: "impdc-card-heading, div[impdc-card-heading]", inputs: { title: "title", description: "description" }, ngImport: i0, template: "<div class=\"card-heading\">\n  <div class=\"heading\">\n    <div class=\"heading-left\">\n      <div class=\"heading-avatar\">\n        <ng-content select=\"impdc-avatar\"></ng-content>\n      </div>\n      <div class=\"heading-title\">\n        <h3 *ngIf=\"title\">{{ title }}</h3>\n        <span class=\"description\" *ngIf=\"description\">{{ description }}</span>\n      </div>\n    </div>\n    <div class=\"heading-actions\">\n      <ng-content select=\"button[impdcButton]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"card-heading-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card-heading{background-color:var(--impdc-color-white, #ffffff);border:.1rem solid;border-color:var(--impd-color-gray-200);border-radius:var(--impd-border-radius-md)}.card-heading .heading{display:flex;flex-direction:row;flex-wrap:wrap;padding:2rem 2.4rem;align-items:center;gap:1.5rem;justify-content:space-between}.card-heading .heading .heading-left{display:flex;flex-direction:row;align-items:center;gap:1.6rem;flex-grow:1}.card-heading .heading .heading-left .heading-avatar{display:none}.card-heading .heading .heading-left .heading-avatar:has(impdc-avatar){display:block}.card-heading .heading .heading-left .heading-title{align-content:center;display:flex;flex-direction:column;color:var(--impd-color-gray-900)}.card-heading .heading .heading-left .heading-title h3{margin-bottom:0}.card-heading .heading .heading-left .heading-title .description{color:var(--impd-color-gray-500);margin-bottom:0;margin-top:.4rem;font-size:var(--impd-font-size-sm);line-height:2rem}.card-heading .heading .heading-actions{display:flex;flex-direction:row;gap:1.2rem;flex-flow:wrap}.card-heading .card-heading-body{border-top:.1rem solid;border-top-color:var(--impd-color-gray-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardHeadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CardHeadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-card-heading, div[impdc-card-heading]', template: "<div class=\"card-heading\">\n  <div class=\"heading\">\n    <div class=\"heading-left\">\n      <div class=\"heading-avatar\">\n        <ng-content select=\"impdc-avatar\"></ng-content>\n      </div>\n      <div class=\"heading-title\">\n        <h3 *ngIf=\"title\">{{ title }}</h3>\n        <span class=\"description\" *ngIf=\"description\">{{ description }}</span>\n      </div>\n    </div>\n    <div class=\"heading-actions\">\n      <ng-content select=\"button[impdcButton]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"card-heading-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card-heading{background-color:var(--impdc-color-white, #ffffff);border:.1rem solid;border-color:var(--impd-color-gray-200);border-radius:var(--impd-border-radius-md)}.card-heading .heading{display:flex;flex-direction:row;flex-wrap:wrap;padding:2rem 2.4rem;align-items:center;gap:1.5rem;justify-content:space-between}.card-heading .heading .heading-left{display:flex;flex-direction:row;align-items:center;gap:1.6rem;flex-grow:1}.card-heading .heading .heading-left .heading-avatar{display:none}.card-heading .heading .heading-left .heading-avatar:has(impdc-avatar){display:block}.card-heading .heading .heading-left .heading-title{align-content:center;display:flex;flex-direction:column;color:var(--impd-color-gray-900)}.card-heading .heading .heading-left .heading-title h3{margin-bottom:0}.card-heading .heading .heading-left .heading-title .description{color:var(--impd-color-gray-500);margin-bottom:0;margin-top:.4rem;font-size:var(--impd-font-size-sm);line-height:2rem}.card-heading .heading .heading-actions{display:flex;flex-direction:row;gap:1.2rem;flex-flow:wrap}.card-heading .card-heading-body{border-top:.1rem solid;border-top-color:var(--impd-color-gray-200)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+        }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], description: [{
                 type: Input
@@ -8418,18 +8666,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class CardHeadingModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CardHeadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: CardHeadingModule, declarations: [CardHeadingComponent], imports: [CommonModule], exports: [CardHeadingComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CardHeadingModule, imports: [CommonModule] }); }
 }
-CardHeadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardHeadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CardHeadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CardHeadingModule, declarations: [CardHeadingComponent], imports: [CommonModule], exports: [CardHeadingComponent] });
-CardHeadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardHeadingModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardHeadingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CardHeadingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
                     declarations: [CardHeadingComponent],
                     exports: [CardHeadingComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `ScrollableComponent` (`<impdc-scrollable` or `<div impdc-scrollable`) is a container that hides items that wouldn't fit
@@ -8438,21 +8686,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * `ScrollableModule` also imports and exports [BrandingModule](./?path=/docs/design-components-directives-impdcbranded).
  */
 class ScrollableComponent {
-    constructor(_cd, _hostElementRef) {
-        this._cd = _cd;
-        this._hostElementRef = _hostElementRef;
-        this.GET_ANCESTOR_BG_SEARCH_DEPTH = 64;
-        /**
-         * The base amount to scroll.
-         */
-        this.scrollUnit = 20;
-        /**
-         * Used in combination with `scrollUnit` to determine how far the Scrollable scrolls when directional arrows are clicked.
-         */
-        this.clickScrollMultiplier = 5;
-        this._scrollableBgColor = null;
-        this._width = 0;
-    }
     get canScrollLeft() {
         if (!this._contentElement) {
             return false;
@@ -8478,6 +8711,21 @@ class ScrollableComponent {
         }
         return this.contentRef.nativeElement;
     }
+    constructor(_cd, _hostElementRef) {
+        this._cd = _cd;
+        this._hostElementRef = _hostElementRef;
+        this.GET_ANCESTOR_BG_SEARCH_DEPTH = 64;
+        /**
+         * The base amount to scroll.
+         */
+        this.scrollUnit = 20;
+        /**
+         * Used in combination with `scrollUnit` to determine how far the Scrollable scrolls when directional arrows are clicked.
+         */
+        this.clickScrollMultiplier = 5;
+        this._scrollableBgColor = null;
+        this._width = 0;
+    }
     ngOnChanges(changes) {
         if (changes['scrollUnit'] || changes['clickScrollMultiplier']) {
             if (this._containerElement) {
@@ -8592,13 +8840,13 @@ class ScrollableComponent {
         }
         return element.style.backgroundColor;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ScrollableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ScrollableComponent, selector: "impdc-scrollable, div[impdc-scrollable]", inputs: { scrollUnit: "scrollUnit", clickScrollMultiplier: "clickScrollMultiplier" }, host: { properties: { "style.--impdc-scrollable-bg": "this._scrollableBgColor" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"impdc-scrollable\"\n  #container\n  impdcSizeDetector\n  (resized)=\"widthChanged($event)\">\n  <a class=\"impdc-scrollable-left\" (click)=\"scroll(-1)\" *ngIf=\"canScrollLeft\">\n    <i impdc-icon name=\"chevron-left\" class=\"default\"></i>\n  </a>\n  <div #content class=\"content-container\">\n    <ng-content></ng-content>\n  </div>\n  <a class=\"impdc-scrollable-right\" (click)=\"scroll(1)\" *ngIf=\"canScrollRight\">\n    <i impdc-icon name=\"chevron-right\" class=\"default\"></i>\n  </a>\n</div>\n", styles: [".impdc-scrollable{position:relative;overflow-y:hidden}.impdc-scrollable .impdc-scrollable-base,.impdc-scrollable .impdc-scrollable-right,.impdc-scrollable .impdc-scrollable-left{position:absolute;top:0;bottom:0;display:flex;align-items:center;text-align:center;width:6.9rem;z-index:1;color:var(--impd-color-motion-blue-600, #01606d)}.impdc-scrollable .impdc-scrollable-left{justify-content:left;padding-left:1.5rem;background-image:linear-gradient(to right,var(--impdc-scrollable-bg, #fff) 50%,rgba(255,255,255,.0001) 86.46%)}.impdc-scrollable .impdc-scrollable-right{right:0;padding-right:1.5rem;justify-content:right;background-image:linear-gradient(to left,var(--impdc-scrollable-bg, #fff) 50%,rgba(255,255,255,.0001) 86.46%)}.impdc-scrollable .content-container{overflow-x:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap}:host(.branded) .impdc-scrollable .impdc-scrollable-left,:host(.branded) .impdc-scrollable .impdc-scrollable-right{color:var(--px-primary-color, var(--impd-color-motion-blue-600, #01606d))}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDetectorDirective, selector: "[impdcSizeDetector]", outputs: ["resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-ScrollableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ScrollableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ScrollableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ScrollableComponent, selector: "impdc-scrollable, div[impdc-scrollable]", inputs: { scrollUnit: "scrollUnit", clickScrollMultiplier: "clickScrollMultiplier" }, host: { properties: { "style.--impdc-scrollable-bg": "this._scrollableBgColor" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"impdc-scrollable\"\n  #container\n  impdcSizeDetector\n  (resized)=\"widthChanged($event)\">\n  <a class=\"impdc-scrollable-left\" (click)=\"scroll(-1)\" *ngIf=\"canScrollLeft\">\n    <i impdc-icon name=\"chevron-left\" class=\"default\"></i>\n  </a>\n  <div #content class=\"content-container\">\n    <ng-content></ng-content>\n  </div>\n  <a class=\"impdc-scrollable-right\" (click)=\"scroll(1)\" *ngIf=\"canScrollRight\">\n    <i impdc-icon name=\"chevron-right\" class=\"default\"></i>\n  </a>\n</div>\n", styles: [".impdc-scrollable{position:relative;overflow-y:hidden}.impdc-scrollable .impdc-scrollable-base,.impdc-scrollable .impdc-scrollable-right,.impdc-scrollable .impdc-scrollable-left{position:absolute;top:0px;bottom:0px;display:flex;align-items:center;text-align:center;width:6.9rem;z-index:1;color:var(--impd-color-motion-blue-600, #01606d)}.impdc-scrollable .impdc-scrollable-left{justify-content:left;padding-left:1.5rem;background-image:linear-gradient(to right,var(--impdc-scrollable-bg, #fff) 50%,rgba(255,255,255,.0001) 86.46%)}.impdc-scrollable .impdc-scrollable-right{right:0;padding-right:1.5rem;justify-content:right;background-image:linear-gradient(to left,var(--impdc-scrollable-bg, #fff) 50%,rgba(255,255,255,.0001) 86.46%)}.impdc-scrollable .content-container{overflow-x:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap}:host(.branded) .impdc-scrollable .impdc-scrollable-left,:host(.branded) .impdc-scrollable .impdc-scrollable-right{color:var(--px-primary-color, var(--impd-color-motion-blue-600, #01606d))}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDetectorDirective, selector: "[impdcSizeDetector]", outputs: ["resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ScrollableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-scrollable, div[impdc-scrollable]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"impdc-scrollable\"\n  #container\n  impdcSizeDetector\n  (resized)=\"widthChanged($event)\">\n  <a class=\"impdc-scrollable-left\" (click)=\"scroll(-1)\" *ngIf=\"canScrollLeft\">\n    <i impdc-icon name=\"chevron-left\" class=\"default\"></i>\n  </a>\n  <div #content class=\"content-container\">\n    <ng-content></ng-content>\n  </div>\n  <a class=\"impdc-scrollable-right\" (click)=\"scroll(1)\" *ngIf=\"canScrollRight\">\n    <i impdc-icon name=\"chevron-right\" class=\"default\"></i>\n  </a>\n</div>\n", styles: [".impdc-scrollable{position:relative;overflow-y:hidden}.impdc-scrollable .impdc-scrollable-base,.impdc-scrollable .impdc-scrollable-right,.impdc-scrollable .impdc-scrollable-left{position:absolute;top:0px;bottom:0px;display:flex;align-items:center;text-align:center;width:6.9rem;z-index:1;color:var(--impd-color-motion-blue-600, #01606d)}.impdc-scrollable .impdc-scrollable-left{justify-content:left;padding-left:1.5rem;background-image:linear-gradient(to right,var(--impdc-scrollable-bg, #fff) 50%,rgba(255,255,255,.0001) 86.46%)}.impdc-scrollable .impdc-scrollable-right{right:0;padding-right:1.5rem;justify-content:right;background-image:linear-gradient(to left,var(--impdc-scrollable-bg, #fff) 50%,rgba(255,255,255,.0001) 86.46%)}.impdc-scrollable .content-container{overflow-x:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap}:host(.branded) .impdc-scrollable .impdc-scrollable-left,:host(.branded) .impdc-scrollable .impdc-scrollable-right{color:var(--px-primary-color, var(--impd-color-motion-blue-600, #01606d))}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { scrollUnit: [{
+            args: [{ selector: 'impdc-scrollable, div[impdc-scrollable]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"impdc-scrollable\"\n  #container\n  impdcSizeDetector\n  (resized)=\"widthChanged($event)\">\n  <a class=\"impdc-scrollable-left\" (click)=\"scroll(-1)\" *ngIf=\"canScrollLeft\">\n    <i impdc-icon name=\"chevron-left\" class=\"default\"></i>\n  </a>\n  <div #content class=\"content-container\">\n    <ng-content></ng-content>\n  </div>\n  <a class=\"impdc-scrollable-right\" (click)=\"scroll(1)\" *ngIf=\"canScrollRight\">\n    <i impdc-icon name=\"chevron-right\" class=\"default\"></i>\n  </a>\n</div>\n", styles: [".impdc-scrollable{position:relative;overflow-y:hidden}.impdc-scrollable .impdc-scrollable-base,.impdc-scrollable .impdc-scrollable-right,.impdc-scrollable .impdc-scrollable-left{position:absolute;top:0;bottom:0;display:flex;align-items:center;text-align:center;width:6.9rem;z-index:1;color:var(--impd-color-motion-blue-600, #01606d)}.impdc-scrollable .impdc-scrollable-left{justify-content:left;padding-left:1.5rem;background-image:linear-gradient(to right,var(--impdc-scrollable-bg, #fff) 50%,rgba(255,255,255,.0001) 86.46%)}.impdc-scrollable .impdc-scrollable-right{right:0;padding-right:1.5rem;justify-content:right;background-image:linear-gradient(to left,var(--impdc-scrollable-bg, #fff) 50%,rgba(255,255,255,.0001) 86.46%)}.impdc-scrollable .content-container{overflow-x:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap}:host(.branded) .impdc-scrollable .impdc-scrollable-left,:host(.branded) .impdc-scrollable .impdc-scrollable-right{color:var(--px-primary-color, var(--impd-color-motion-blue-600, #01606d))}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { scrollUnit: [{
                 type: Input
             }], clickScrollMultiplier: [{
                 type: Input
@@ -8615,18 +8863,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class ScrollableModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ScrollableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: ScrollableModule, declarations: [ScrollableComponent], imports: [CommonModule, SizeDetectionModule, BrandingModule], exports: [ScrollableComponent, BrandingModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ScrollableModule, imports: [CommonModule, SizeDetectionModule, BrandingModule, BrandingModule] }); }
 }
-ScrollableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ScrollableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ScrollableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ScrollableModule, declarations: [ScrollableComponent], imports: [CommonModule, SizeDetectionModule, BrandingModule], exports: [ScrollableComponent, BrandingModule] });
-ScrollableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ScrollableModule, imports: [CommonModule, SizeDetectionModule, BrandingModule, BrandingModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ScrollableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ScrollableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SizeDetectionModule, BrandingModule],
                     declarations: [ScrollableComponent],
                     exports: [ScrollableComponent, BrandingModule]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /* eslint-disable @angular-eslint/no-conflicting-lifecycle */
 class ImpdcSelectIconChange {
@@ -8650,6 +8898,29 @@ const _SelectIconComponentBase = mixinTabIndex(mixinDisabled(mixinErrorState(cla
  * To use, import `SelectIconModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class SelectIconComponent extends _SelectIconComponentBase {
+    get iconOptions() {
+        return [...this._iconOptionsSubject.value];
+    }
+    /**
+     * Set to override the default set of FontAwesome icon options.
+     */
+    set iconOptions(iconOptions) {
+        if (iconOptions) {
+            this._iconOptionsSubject.next([...iconOptions]);
+        }
+    }
+    /**
+     * The placeholder text that will be displayed when no selection has been made.
+     *
+     * @default \- Select -
+     */
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
     constructor(_changeDetector, _defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl) {
         super(_defaultErrorStateMatcher, _formRoot, _parentForm, _parentFormGroup, ngControl);
         this._changeDetector = _changeDetector;
@@ -8691,29 +8962,6 @@ class SelectIconComponent extends _SelectIconComponentBase {
         }
         this.id = this.id;
     }
-    get iconOptions() {
-        return [...this._iconOptionsSubject.value];
-    }
-    /**
-     * Set to override the default set of FontAwesome icon options.
-     */
-    set iconOptions(iconOptions) {
-        if (iconOptions) {
-            this._iconOptionsSubject.next([...iconOptions]);
-        }
-    }
-    /**
-     * The placeholder text that will be displayed when no selection has been made.
-     *
-     * @default \- Select -
-     */
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.stateChanges.next();
-    }
     get empty() {
         return !this.value;
     }
@@ -8849,15 +9097,15 @@ class SelectIconComponent extends _SelectIconComponentBase {
     _buildChangeEvent(value) {
         return new ImpdcSelectIconChange(this, value);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectIconComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: SelectIconComponent, selector: "impdc-select-icon", inputs: { disabled: "disabled", tabIndex: "tabIndex", allowSearch: "allowSearch", iconOptions: "iconOptions", showText: "showText", showSelectedText: "showSelectedText", placeholder: "placeholder", errorStateMatcher: "errorStateMatcher", value: "value", id: "id", required: "required" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange" }, host: { listeners: { "focus": "_onFocus(); focus()" }, properties: { "attr.id": "id", "attr.tabindex": "tabIndex", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.form-select": "true", "class.is-invalid": "errorState", "class.impdc-form-field-control": "true", "class.impdc-select-icon--required": "required", "class.impdc-select-icon--disabled": "disabled", "class.impdc-select-icon--invalid": "errorState", "class.impdc-select-icon--empty": "empty" }, classAttribute: "impdc-select-icon" }, providers: [
+            {
+                provide: ImpdcFormFieldControl,
+                useExisting: SelectIconComponent
+            }
+        ], viewQueries: [{ propertyName: "_toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  ngbDropdown\n  autoClose=\"outside\"\n  container=\"body\"\n  dropdownClass=\"impartner-hex\"\n  (openChange)=\"handleOpenChange($event)\"\n  class=\"w-100\">\n  <button\n    #toggleButton\n    class=\"impdc-select-icon--toggle btn border-0 text-start\"\n    type=\"button\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    ngbDropdownToggle>\n    <ng-container [ngSwitch]=\"empty\">\n      <span\n        class=\"impdc-select-icon--text impdc-select-icon--placeholder\"\n        *ngSwitchCase=\"true\">\n        {{ placeholder }}\n      </span>\n      <div\n        class=\"impdc-select-icon--text impdc-select-icon--value-text\"\n        *ngSwitchCase=\"false\">\n        <i impdc-icon [name]=\"value ?? undefined\"></i>\n        <span *ngIf=\"showSelectedText\" class=\"ms-2\">{{ value }}</span>\n      </div>\n    </ng-container>\n  </button>\n  <div ngbDropdownMenu class=\"select-icon-dropdown-menu\" tabindex=\"-1\">\n    <div *ngIf=\"allowSearch\" class=\"select-icon-search\">\n      <impdc-form-field>\n        <span impdcTextPrefix><i impdc-icon name=\"search\"></i></span>\n        <input\n          impdcInput\n          [formControl]=\"searchControl\"\n          class=\"select-icon-search-input\"\n          type=\"search\" />\n      </impdc-form-field>\n    </div>\n    <div class=\"select-icon-grid\">\n      <button\n        *ngFor=\"let iconName of filteredOptions$ | async\"\n        type=\"button\"\n        (click)=\"selectIcon(iconName)\"\n        class=\"icon-option\"\n        [class.selected]=\"value === iconName\"\n        [title]=\"iconName\"\n        [attr.aria-labelledby]=\"showText ? id + '_' + iconName : null\">\n        <div class=\"icon-container\">\n          <i impdc-icon [name]=\"iconName\" class=\"fs-2xl\"></i>\n        </div>\n        <div\n          id=\"{{ id }}_{{ iconName }}\"\n          class=\"icon-label\"\n          [class.sr-only]=\"!showText\">\n          {{ iconName }}\n        </div>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{padding:0!important;position:relative}:host.impdc-select-icon--disabled{background-color:var(--impd-color-gray-100)}.impdc-select-icon--toggle{font-weight:inherit;padding-right:3.6rem;-webkit-user-select:none;user-select:none;width:100%}:host-context(.is-invalid) .impdc-select-icon--toggle{padding-right:6.6rem}.impdc-select-icon--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.select-icon-dropdown-menu{background-color:var(--impd-color-white);color:var(--impd-color-gray-600);max-width:51.2rem;min-width:32rem;overflow:hidden;width:100%}.select-icon-search{margin:var(--impd-size-2);font-size:var(--impd-font-size-sm)}.select-icon-grid{display:grid;align-items:start;grid-template-columns:repeat(auto-fit,minmax(4.8rem,1fr));gap:var(--impd-size-4);width:100%;max-height:var(--impd-size-40);overflow-y:auto;overflow-x:hidden;padding:var(--impd-size-4);-webkit-user-select:none;user-select:none}button[ngbDropdownToggle].dropdown-toggle:after{display:none}.icon-option{padding:0;background:unset;border:none}.icon-option:focus{outline:0}.icon-container{height:4rem;width:4rem;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;border-radius:50%;justify-items:center}.selected>.icon-container,:hover>.icon-container,:focus>.icon-container{background-color:var(--impartner-hex-primary);color:var(--impartner-hex-white)}.icon-label{text-align:center;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "component", type: FormFieldComponent, selector: "impdc-form-field", exportAs: ["impdcFormField"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }, { kind: "directive", type: PrefixDirective, selector: "[impdcPrefix], [impdcTextPrefix]", inputs: ["impdcTextPrefix"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-SelectIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectIconComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ErrorStateMatcher }, { token: IMPDC_FORM_ROOT, optional: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-SelectIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SelectIconComponent, selector: "impdc-select-icon", inputs: { disabled: "disabled", tabIndex: "tabIndex", allowSearch: "allowSearch", iconOptions: "iconOptions", showText: "showText", showSelectedText: "showSelectedText", placeholder: "placeholder", errorStateMatcher: "errorStateMatcher", value: "value", id: "id", required: "required" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange" }, host: { listeners: { "focus": "_onFocus(); focus()" }, properties: { "attr.id": "id", "attr.tabindex": "tabIndex", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.form-select": "true", "class.is-invalid": "errorState", "class.impdc-form-field-control": "true", "class.impdc-select-icon--required": "required", "class.impdc-select-icon--disabled": "disabled", "class.impdc-select-icon--invalid": "errorState", "class.impdc-select-icon--empty": "empty" }, classAttribute: "impdc-select-icon" }, providers: [
-        {
-            provide: ImpdcFormFieldControl,
-            useExisting: SelectIconComponent
-        }
-    ], viewQueries: [{ propertyName: "_toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  ngbDropdown\n  autoClose=\"outside\"\n  container=\"body\"\n  dropdownClass=\"impartner-hex\"\n  (openChange)=\"handleOpenChange($event)\"\n  class=\"w-100\">\n  <button\n    #toggleButton\n    class=\"impdc-select-icon--toggle btn border-0 text-start\"\n    type=\"button\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    ngbDropdownToggle>\n    <ng-container [ngSwitch]=\"empty\">\n      <span\n        class=\"impdc-select-icon--text impdc-select-icon--placeholder\"\n        *ngSwitchCase=\"true\">\n        {{ placeholder }}\n      </span>\n      <div\n        class=\"impdc-select-icon--text impdc-select-icon--value-text\"\n        *ngSwitchCase=\"false\">\n        <i impdc-icon [name]=\"value ?? undefined\"></i>\n        <span *ngIf=\"showSelectedText\" class=\"ms-2\">{{ value }}</span>\n      </div>\n    </ng-container>\n  </button>\n  <div ngbDropdownMenu class=\"select-icon-dropdown-menu\" tabindex=\"-1\">\n    <div *ngIf=\"allowSearch\" class=\"select-icon-search\">\n      <impdc-form-field>\n        <span impdcTextPrefix><i impdc-icon name=\"search\"></i></span>\n        <input\n          impdcInput\n          [formControl]=\"searchControl\"\n          class=\"select-icon-search-input\"\n          type=\"search\" />\n      </impdc-form-field>\n    </div>\n    <div class=\"select-icon-grid\">\n      <button\n        *ngFor=\"let iconName of filteredOptions$ | async\"\n        type=\"button\"\n        (click)=\"selectIcon(iconName)\"\n        class=\"icon-option\"\n        [class.selected]=\"value === iconName\"\n        [title]=\"iconName\"\n        [attr.aria-labelledby]=\"showText ? id + '_' + iconName : null\">\n        <div class=\"icon-container\">\n          <i impdc-icon [name]=\"iconName\" class=\"fs-2xl\"></i>\n        </div>\n        <div\n          id=\"{{ id }}_{{ iconName }}\"\n          class=\"icon-label\"\n          [class.sr-only]=\"!showText\">\n          {{ iconName }}\n        </div>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{padding:0!important;position:relative}:host.impdc-select-icon--disabled{background-color:var(--impd-color-gray-100)}.impdc-select-icon--toggle{font-weight:inherit;padding-right:3.6rem;-webkit-user-select:none;user-select:none;width:100%}:host-context(.is-invalid) .impdc-select-icon--toggle{padding-right:6.6rem}.impdc-select-icon--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.select-icon-dropdown-menu{background-color:var(--impd-color-white);color:var(--impd-color-gray-600);max-width:51.2rem;min-width:32rem;overflow:hidden;width:100%}.select-icon-search{margin:var(--impd-size-2);font-size:var(--impd-font-size-sm)}.select-icon-grid{display:grid;align-items:start;grid-template-columns:repeat(auto-fit,minmax(4.8rem,1fr));gap:var(--impd-size-4);width:100%;max-height:var(--impd-size-40);overflow-y:auto;overflow-x:hidden;padding:var(--impd-size-4);-webkit-user-select:none;user-select:none}button[ngbDropdownToggle].dropdown-toggle:after{display:none}.icon-option{padding:0;background:unset;border:none}.icon-option:focus{outline:0}.icon-container{height:4rem;width:4rem;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;border-radius:50%;justify-items:center}.selected>.icon-container,:hover>.icon-container,:focus>.icon-container{background-color:var(--impartner-hex-primary);color:var(--impartner-hex-white)}.icon-label{text-align:center;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "component", type: FormFieldComponent, selector: "impdc-form-field", exportAs: ["impdcFormField"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }, { kind: "directive", type: PrefixDirective, selector: "[impdcPrefix], [impdcTextPrefix]", inputs: ["impdcTextPrefix"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'impdc-select-icon', inputs: ['disabled', 'tabIndex'], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'impdc-select-icon',
@@ -8880,7 +9128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             useExisting: SelectIconComponent
                         }
                     ], template: "<div\n  ngbDropdown\n  autoClose=\"outside\"\n  container=\"body\"\n  dropdownClass=\"impartner-hex\"\n  (openChange)=\"handleOpenChange($event)\"\n  class=\"w-100\">\n  <button\n    #toggleButton\n    class=\"impdc-select-icon--toggle btn border-0 text-start\"\n    type=\"button\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    ngbDropdownToggle>\n    <ng-container [ngSwitch]=\"empty\">\n      <span\n        class=\"impdc-select-icon--text impdc-select-icon--placeholder\"\n        *ngSwitchCase=\"true\">\n        {{ placeholder }}\n      </span>\n      <div\n        class=\"impdc-select-icon--text impdc-select-icon--value-text\"\n        *ngSwitchCase=\"false\">\n        <i impdc-icon [name]=\"value ?? undefined\"></i>\n        <span *ngIf=\"showSelectedText\" class=\"ms-2\">{{ value }}</span>\n      </div>\n    </ng-container>\n  </button>\n  <div ngbDropdownMenu class=\"select-icon-dropdown-menu\" tabindex=\"-1\">\n    <div *ngIf=\"allowSearch\" class=\"select-icon-search\">\n      <impdc-form-field>\n        <span impdcTextPrefix><i impdc-icon name=\"search\"></i></span>\n        <input\n          impdcInput\n          [formControl]=\"searchControl\"\n          class=\"select-icon-search-input\"\n          type=\"search\" />\n      </impdc-form-field>\n    </div>\n    <div class=\"select-icon-grid\">\n      <button\n        *ngFor=\"let iconName of filteredOptions$ | async\"\n        type=\"button\"\n        (click)=\"selectIcon(iconName)\"\n        class=\"icon-option\"\n        [class.selected]=\"value === iconName\"\n        [title]=\"iconName\"\n        [attr.aria-labelledby]=\"showText ? id + '_' + iconName : null\">\n        <div class=\"icon-container\">\n          <i impdc-icon [name]=\"iconName\" class=\"fs-2xl\"></i>\n        </div>\n        <div\n          id=\"{{ id }}_{{ iconName }}\"\n          class=\"icon-label\"\n          [class.sr-only]=\"!showText\">\n          {{ iconName }}\n        </div>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{padding:0!important;position:relative}:host.impdc-select-icon--disabled{background-color:var(--impd-color-gray-100)}.impdc-select-icon--toggle{font-weight:inherit;padding-right:3.6rem;-webkit-user-select:none;user-select:none;width:100%}:host-context(.is-invalid) .impdc-select-icon--toggle{padding-right:6.6rem}.impdc-select-icon--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.select-icon-dropdown-menu{background-color:var(--impd-color-white);color:var(--impd-color-gray-600);max-width:51.2rem;min-width:32rem;overflow:hidden;width:100%}.select-icon-search{margin:var(--impd-size-2);font-size:var(--impd-font-size-sm)}.select-icon-grid{display:grid;align-items:start;grid-template-columns:repeat(auto-fit,minmax(4.8rem,1fr));gap:var(--impd-size-4);width:100%;max-height:var(--impd-size-40);overflow-y:auto;overflow-x:hidden;padding:var(--impd-size-4);-webkit-user-select:none;user-select:none}button[ngbDropdownToggle].dropdown-toggle:after{display:none}.icon-option{padding:0;background:unset;border:none}.icon-option:focus{outline:0}.icon-container{height:4rem;width:4rem;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;border-radius:50%;justify-items:center}.selected>.icon-container,:hover>.icon-container,:focus>.icon-container{background-color:var(--impartner-hex-primary);color:var(--impartner-hex-white)}.icon-label{text-align:center;font-size:1rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ErrorStateMatcher }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ErrorStateMatcher }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -8893,7 +9141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { _toggleButtonRef: [{
+                }] }], propDecorators: { _toggleButtonRef: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true, read: ElementRef }]
             }], allowSearch: [{
@@ -8921,19 +9169,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class SelectIconModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: SelectIconModule, declarations: [SelectIconComponent], imports: [CommonModule,
+            ImpdcFormsModule,
+            NgbTypeaheadModule,
+            NgbDropdownModule,
+            ReactiveFormsModule], exports: [SelectIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectIconModule, imports: [CommonModule,
+            ImpdcFormsModule,
+            NgbTypeaheadModule,
+            NgbDropdownModule,
+            ReactiveFormsModule] }); }
 }
-SelectIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SelectIconModule, declarations: [SelectIconComponent], imports: [CommonModule,
-        ImpdcFormsModule,
-        NgbTypeaheadModule,
-        NgbDropdownModule,
-        ReactiveFormsModule], exports: [SelectIconComponent] });
-SelectIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectIconModule, imports: [CommonModule,
-        ImpdcFormsModule,
-        NgbTypeaheadModule,
-        NgbDropdownModule,
-        ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SelectIconModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SelectIconComponent],
@@ -8951,10 +9199,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 /**
  * The `CardHeadingComponent` (`<impdc-data-card` or `<any impdc-data-card`) is to display data snapshots with support for
  * previous values and differences.
+ *
  * To use, import `DataCardModule` or another module that imports and exports that module from `@impartner/design-components`.
+ *
+ * An icon may be displayed in the card via Angular content projection and the `icon` attribute.
  */
 class DataCardComponent {
     constructor() {
+        this.BadgeTheme = ComponentTheme;
         /**
          * The subject text for the Data Card.
          */
@@ -8965,6 +9217,7 @@ class DataCardComponent {
         this.current = '0';
         /**
          * The previous data value. Any number/currency format is supported.
+         * Only displayed when an icon is not provided via Angular content projection.
          */
         this.previous = '';
         /**
@@ -8980,19 +9233,6 @@ class DataCardComponent {
          * When stacking multiple Data Card elements together, it's common to combine their borders.
          */
         this.sharedBorders = true;
-        /**
-         * Makes the title stand out more than it does by default.
-         */
-        // @Input()
-        this.titleAttention = false;
-        /**
-         * Determines if the difference value will be wrapped in a `rounded-pill`.
-         */
-        this.differencePill = false;
-        /**
-         * Changes the text color for the current value.
-         */
-        this.currentColor = '';
         /**
          * Changes the color of the icon.
          */
@@ -9028,19 +9268,25 @@ class DataCardComponent {
     get differenceDisplay() {
         return this.difference.replace('-', '');
     }
+    get hasIcon() {
+        return !!this.iconContentElementRef.nativeElement.children.length;
+    }
     handleLinkClick(event) {
         this.linkClicked.emit(event);
     }
     handleCornerClick(event) {
         this.cornerClicked.emit(event);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DataCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: DataCardComponent, selector: "impdc-data-card, [impdc-data-card]", inputs: { title: "title", current: "current", previous: "previous", difference: "difference", linkText: "linkText", sharedBorders: "sharedBorders", iconColor: "iconColor", iconBgColor: "iconBgColor" }, outputs: { linkClicked: "linkClicked", cornerClicked: "cornerClicked" }, host: { properties: { "class": "this.classDataCard", "class.impdc-data-card-shared-borders": "this.classDataCardSharedBorders" } }, viewQueries: [{ propertyName: "iconContentElementRef", first: true, predicate: ["iconContentEl"], descendants: true, read: (ElementRef), static: true }], ngImport: i0, template: "<div class=\"card-body impdc-data-card-body\">\n  <div\n    #iconContentEl\n    class=\"impdc-data-card-icon\"\n    [style.color]=\"iconColor ? iconColor : undefined\"\n    [style.background-color]=\"iconBgColor ? iconBgColor : undefined\"\n    [class.d-none]=\"!hasIcon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <div class=\"impdc-data-card-container\">\n    <div class=\"impdc-data-card-title\" [class.title-attention]=\"!hasIcon\">\n      {{ title }}\n    </div>\n    <div class=\"impdc-data-card-data\">\n      <ng-content></ng-content>\n      <span\n        *ngIf=\"current\"\n        class=\"data-current\"\n        [class.data-current-enlarged]=\"!hasIcon && !previous && !difference\"\n        [innerText]=\"current\"></span>\n      <span class=\"data-other\">\n        <span\n          *ngIf=\"!hasIcon && previous\"\n          class=\"data-previous\"\n          [innerText]=\"previous\"></span>\n        <impdc-badge\n          *ngIf=\"difference\"\n          [text]=\"differenceDisplay\"\n          [icon]=\"\n            differencePositive\n              ? 'arrow-up'\n              : differenceNegative\n              ? 'arrow-down'\n              : ''\n          \"\n          [theme]=\"\n            differencePositive\n              ? BadgeTheme.Success\n              : differenceNegative\n              ? BadgeTheme.Danger\n              : BadgeTheme.Light\n          \"\n          [hideBg]=\"hasIcon\"\n          [rounded]=\"true\"></impdc-badge>\n      </span>\n    </div>\n  </div>\n  <div\n    #cornerContentEl\n    class=\"impdc-data-card-corner\"\n    [class.d-none]=\"!cornerContentEl.children.length\"\n    (click)=\"handleCornerClick($event); $event.stopPropagation()\">\n    <ng-content select=\"[corner]\"></ng-content>\n  </div>\n</div>\n<div\n  class=\"card-footer impdc-data-card-footer\"\n  [class.d-none]=\"!linkText && !footerContentEl.children.length\">\n  <div #footerContentEl [class.d-none]=\"!footerContentEl.children.length\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n  <a\n    *ngIf=\"linkText\"\n    class=\"footer-link\"\n    (click)=\"handleLinkClick($event); $event.stopPropagation()\"\n    >{{ linkText }}</a\n  >\n</div>\n", styles: [":host(.impdc-data-card){overflow-x:hidden;border:0;box-shadow:var(--impartner-hex-box-shadow);border-radius:var(--impd-border-radius-lg)}:host(.impdc-data-card).impdc-data-card-shared-borders:first-child:not(:last-child){border-right:solid var(--impd-color-gray-200) 1px;border-top-right-radius:0;border-bottom-right-radius:0}:host(.impdc-data-card).impdc-data-card-shared-borders:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}:host(.impdc-data-card).impdc-data-card-shared-borders:not(:first-child):not(:last-child){border-right:solid var(--impd-color-gray-200) 1px;border-radius:0}.impdc-data-card-body{position:relative;display:flex;align-items:center;gap:var(--impd-size-5);padding:var(--impd-size-6)}.impdc-data-card-icon{display:flex;align-items:center;justify-content:center;padding:var(--impd-size-3);background-color:var(--impd-color-motion-blue-600);color:var(--impd-color-white);border-radius:var(--impd-border-radius-md)}.impdc-data-card-icon ::ng-deep .fa,.impdc-data-card-icon ::ng-deep .fa-brands,.impdc-data-card-icon ::ng-deep .fa-duotone,.impdc-data-card-icon ::ng-deep .fa-light,.impdc-data-card-icon ::ng-deep .fa-regular,.impdc-data-card-icon ::ng-deep .fa-solid,.impdc-data-card-icon ::ng-deep .fa-thin,.impdc-data-card-icon ::ng-deep .fab,.impdc-data-card-icon ::ng-deep .fad,.impdc-data-card-icon ::ng-deep .fal,.impdc-data-card-icon ::ng-deep .far,.impdc-data-card-icon ::ng-deep .fas,.impdc-data-card-icon ::ng-deep .fat,.impdc-data-card-icon ::ng-deep svg{display:flex;align-items:center;justify-content:center;height:var(--impd-size-6);width:var(--impd-size-6);font-size:var(--impd-font-size-lg);line-height:var(--impd-size-6)}.impdc-data-card-container{display:flex;flex-direction:column;min-width:50px}.impdc-data-card-title{color:var(--impd-color-gray-500);font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:var(--impd-font-weight-medium);min-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-title.title-attention{color:var(--impd-color-gray-900);font-size:var(--impd-font-size-base);line-height:var(--impd-size-6);font-weight:var(--impd-font-weight-normal)}.impdc-data-card-data{display:flex;flex-wrap:wrap;align-items:baseline;min-width:0;gap:var(--impd-size-2)}.impdc-data-card-data .data-current{color:var(--impd-color-gray-900);font-size:var(--impd-size-6);line-height:var(--impd-size-8);font-weight:var(--impd-font-weight-semibold);min-width:75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-data .data-current.data-current-enlarged{font-size:var(--impd-font-size-3xl);line-height:var(--impd-size-9)}.impdc-data-card-data .data-other{display:inline-flex;justify-content:space-between;align-items:baseline;gap:var(--impd-size-2)}.impdc-data-card-data .data-previous{min-width:0;color:var(--impd-color-gray-500);font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:var(--impd-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-corner{position:absolute;top:0;right:0;margin:var(--impd-size-2_5);line-height:var(--impd-size-3_5);color:var(--impd-color-gray-700)}.impdc-data-card-corner ::ng-deep .fa,.impdc-data-card-corner ::ng-deep .fa-brands,.impdc-data-card-corner ::ng-deep .fa-duotone,.impdc-data-card-corner ::ng-deep .fa-light,.impdc-data-card-corner ::ng-deep .fa-regular,.impdc-data-card-corner ::ng-deep .fa-solid,.impdc-data-card-corner ::ng-deep .fa-thin,.impdc-data-card-corner ::ng-deep .fab,.impdc-data-card-corner ::ng-deep .fad,.impdc-data-card-corner ::ng-deep .fal,.impdc-data-card-corner ::ng-deep .far,.impdc-data-card-corner ::ng-deep .fas,.impdc-data-card-corner ::ng-deep .fat,.impdc-data-card-corner ::ng-deep svg{height:var(--impd-size-3_5);line-height:var(--impd-size-3_5)}.impdc-data-card-footer{display:flex;align-items:center;padding:var(--impd-size-4);background-color:var(--impd-color-gray-50)}.impdc-data-card-footer.card-footer{border-top:0}.impdc-data-card-footer .footer-link{font-weight:var(--impd-font-weight-medium);font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "impdc-badge, [impdc-badge]", inputs: ["text", "icon", "theme", "size", "hideBg", "rounded", "dismissable"], outputs: ["dismiss"] }] }); }
 }
-DataCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DataCardComponent, selector: "impdc-data-card, [impdc-data-card]", inputs: { title: "title", current: "current", previous: "previous", difference: "difference", linkText: "linkText", sharedBorders: "sharedBorders", differencePill: "differencePill", currentColor: "currentColor", iconColor: "iconColor", iconBgColor: "iconBgColor" }, outputs: { linkClicked: "linkClicked", cornerClicked: "cornerClicked" }, host: { properties: { "class": "this.classDataCard", "class.impdc-data-card-shared-borders": "this.classDataCardSharedBorders" } }, ngImport: i0, template: "<div class=\"card-body impdc-data-card-body\">\n  <div\n    #iconContentEl\n    class=\"impdc-data-card-icon\"\n    [style.color]=\"iconColor ? iconColor : undefined\"\n    [style.background-color]=\"iconBgColor ? iconBgColor : undefined\"\n    [class.hide]=\"!iconContentEl.children.length\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <div class=\"impdc-data-card-container\">\n    <div class=\"impdc-data-card-title\" [class.title-attention]=\"titleAttention\">\n      {{ title }}\n    </div>\n    <div class=\"impdc-data-card-data\">\n      <ng-content></ng-content>\n      <span\n        *ngIf=\"current\"\n        class=\"data-current\"\n        [class.data-current-enlarged]=\"\n          !iconContentEl.children.length && !previous && !difference\n        \"\n        [style.color]=\"currentColor ? currentColor : undefined\"\n        [innerText]=\"current\"></span>\n      <span class=\"data-other\">\n        <span\n          *ngIf=\"previous\"\n          class=\"data-previous\"\n          [innerText]=\"previous\"></span>\n        <span\n          *ngIf=\"difference\"\n          class=\"data-difference\"\n          [class.difference-negative]=\"differenceNegative\"\n          [class.difference-positive]=\"differencePositive\"\n          [class.badge]=\"differencePill\"\n          [class.rounded-pill]=\"differencePill\">\n          <span *ngIf=\"differenceNegative\" impdc-icon name=\"arrow-down\"></span>\n          <span *ngIf=\"differencePositive\" impdc-icon name=\"arrow-up\"></span>\n          <span class=\"difference-display\">{{ differenceDisplay }}</span>\n        </span>\n      </span>\n    </div>\n  </div>\n  <div\n    #cornerContentEl\n    class=\"impdc-data-card-corner\"\n    [class.hide]=\"!cornerContentEl.children.length\"\n    (click)=\"handleCornerClick($event); $event.stopPropagation()\">\n    <ng-content select=\"[corner]\"></ng-content>\n  </div>\n</div>\n<div\n  class=\"card-footer impdc-data-card-footer\"\n  [class.hide]=\"!linkText && !footerContentEl.children.length\">\n  <div #footerContentEl [class.hide]=\"!footerContentEl.children.length\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n  <a\n    *ngIf=\"linkText\"\n    class=\"footer-link\"\n    (click)=\"handleLinkClick($event); $event.stopPropagation()\"\n    >{{ linkText }}</a\n  >\n</div>\n", styles: [".hide{display:none}.impdc-data-card{overflow-x:hidden;border:0;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border-radius:8px}.impdc-data-card.impdc-data-card-shared-borders:first-child:not(:last-child){border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.impdc-data-card.impdc-data-card-shared-borders:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.impdc-data-card.impdc-data-card-shared-borders:not(:first-child):not(:last-child){border-right:0;border-radius:0}.impdc-data-card-body{position:relative;display:flex;align-items:center;gap:20px;padding:24px}.impdc-data-card-icon{display:flex;align-items:center;justify-content:center;padding:12px;background-color:#01606d;color:#fff;border-radius:6px}.impdc-data-card-icon .fa,.impdc-data-card-icon .fa-brands,.impdc-data-card-icon .fa-duotone,.impdc-data-card-icon .fa-light,.impdc-data-card-icon .fa-regular,.impdc-data-card-icon .fa-solid,.impdc-data-card-icon .fa-thin,.impdc-data-card-icon .fab,.impdc-data-card-icon .fad,.impdc-data-card-icon .fal,.impdc-data-card-icon .far,.impdc-data-card-icon .fas,.impdc-data-card-icon .fat,.impdc-data-card-icon svg{display:flex;align-items:center;justify-content:center;height:24px;width:24px;font-size:18px;line-height:24px}.impdc-data-card-icon.hide{display:none}.impdc-data-card-container{display:flex;flex-direction:column;min-width:50px}.impdc-data-card-title{color:#6b7280;font-size:14px;line-height:20px;font-weight:500;min-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-title.title-attention{color:#161e2e;font-size:16px;line-height:24px;font-weight:400}.impdc-data-card-data{display:flex;flex-wrap:wrap;align-items:end;min-width:0}.impdc-data-card-data .data-current{color:#161e2e;font-size:24px;line-height:32px;font-weight:600;min-width:75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}.impdc-data-card-data .data-current.data-current-enlarged{font-size:30px;line-height:36px}.impdc-data-card-data .data-other{display:inline-flex;justify-content:space-between;align-items:end;min-width:50px}.impdc-data-card-data .data-previous{min-width:0;color:#6b7280;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:13px}.impdc-data-card-data .data-difference{display:inline-flex;align-items:center;gap:5px;color:#6b7280;font-size:14px;line-height:20px;font-weight:500}.impdc-data-card-data .data-difference.difference-negative{color:#e02424}.impdc-data-card-data .data-difference.difference-negative.badge{background-color:#fde8e8}.impdc-data-card-data .data-difference.difference-positive{color:#057a55}.impdc-data-card-data .data-difference.difference-positive.badge{background-color:#def7ec}.impdc-data-card-data .data-difference.rounded-pill{padding:4px 10px;border-radius:12px!important}.impdc-data-card-corner{position:absolute;top:0;right:0;margin:1rem;line-height:14px;color:#374151}.impdc-data-card-corner .fa,.impdc-data-card-corner .fa-brands,.impdc-data-card-corner .fa-duotone,.impdc-data-card-corner .fa-light,.impdc-data-card-corner .fa-regular,.impdc-data-card-corner .fa-solid,.impdc-data-card-corner .fa-thin,.impdc-data-card-corner .fab,.impdc-data-card-corner .fad,.impdc-data-card-corner .fal,.impdc-data-card-corner .far,.impdc-data-card-corner .fas,.impdc-data-card-corner .fat,.impdc-data-card-corner svg{height:14px;line-height:14px}.impdc-data-card-corner.hide{display:none}.impdc-data-card-footer{display:flex;align-items:center;padding:16px;background-color:#f9fafb}.impdc-data-card-footer.card-footer{border-top:0}.impdc-data-card-footer.hide{display:none}.impdc-data-card-footer .footer-link{color:#01606d;font-weight:500;font-size:14px;line-height:20px}.impdc-data-card-footer .footer-link:hover{color:#19a8c1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DataCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-data-card, [impdc-data-card]', encapsulation: ViewEncapsulation.None, template: "<div class=\"card-body impdc-data-card-body\">\n  <div\n    #iconContentEl\n    class=\"impdc-data-card-icon\"\n    [style.color]=\"iconColor ? iconColor : undefined\"\n    [style.background-color]=\"iconBgColor ? iconBgColor : undefined\"\n    [class.hide]=\"!iconContentEl.children.length\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <div class=\"impdc-data-card-container\">\n    <div class=\"impdc-data-card-title\" [class.title-attention]=\"titleAttention\">\n      {{ title }}\n    </div>\n    <div class=\"impdc-data-card-data\">\n      <ng-content></ng-content>\n      <span\n        *ngIf=\"current\"\n        class=\"data-current\"\n        [class.data-current-enlarged]=\"\n          !iconContentEl.children.length && !previous && !difference\n        \"\n        [style.color]=\"currentColor ? currentColor : undefined\"\n        [innerText]=\"current\"></span>\n      <span class=\"data-other\">\n        <span\n          *ngIf=\"previous\"\n          class=\"data-previous\"\n          [innerText]=\"previous\"></span>\n        <span\n          *ngIf=\"difference\"\n          class=\"data-difference\"\n          [class.difference-negative]=\"differenceNegative\"\n          [class.difference-positive]=\"differencePositive\"\n          [class.badge]=\"differencePill\"\n          [class.rounded-pill]=\"differencePill\">\n          <span *ngIf=\"differenceNegative\" impdc-icon name=\"arrow-down\"></span>\n          <span *ngIf=\"differencePositive\" impdc-icon name=\"arrow-up\"></span>\n          <span class=\"difference-display\">{{ differenceDisplay }}</span>\n        </span>\n      </span>\n    </div>\n  </div>\n  <div\n    #cornerContentEl\n    class=\"impdc-data-card-corner\"\n    [class.hide]=\"!cornerContentEl.children.length\"\n    (click)=\"handleCornerClick($event); $event.stopPropagation()\">\n    <ng-content select=\"[corner]\"></ng-content>\n  </div>\n</div>\n<div\n  class=\"card-footer impdc-data-card-footer\"\n  [class.hide]=\"!linkText && !footerContentEl.children.length\">\n  <div #footerContentEl [class.hide]=\"!footerContentEl.children.length\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n  <a\n    *ngIf=\"linkText\"\n    class=\"footer-link\"\n    (click)=\"handleLinkClick($event); $event.stopPropagation()\"\n    >{{ linkText }}</a\n  >\n</div>\n", styles: [".hide{display:none}.impdc-data-card{overflow-x:hidden;border:0;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border-radius:8px}.impdc-data-card.impdc-data-card-shared-borders:first-child:not(:last-child){border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.impdc-data-card.impdc-data-card-shared-borders:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.impdc-data-card.impdc-data-card-shared-borders:not(:first-child):not(:last-child){border-right:0;border-radius:0}.impdc-data-card-body{position:relative;display:flex;align-items:center;gap:20px;padding:24px}.impdc-data-card-icon{display:flex;align-items:center;justify-content:center;padding:12px;background-color:#01606d;color:#fff;border-radius:6px}.impdc-data-card-icon .fa,.impdc-data-card-icon .fa-brands,.impdc-data-card-icon .fa-duotone,.impdc-data-card-icon .fa-light,.impdc-data-card-icon .fa-regular,.impdc-data-card-icon .fa-solid,.impdc-data-card-icon .fa-thin,.impdc-data-card-icon .fab,.impdc-data-card-icon .fad,.impdc-data-card-icon .fal,.impdc-data-card-icon .far,.impdc-data-card-icon .fas,.impdc-data-card-icon .fat,.impdc-data-card-icon svg{display:flex;align-items:center;justify-content:center;height:24px;width:24px;font-size:18px;line-height:24px}.impdc-data-card-icon.hide{display:none}.impdc-data-card-container{display:flex;flex-direction:column;min-width:50px}.impdc-data-card-title{color:#6b7280;font-size:14px;line-height:20px;font-weight:500;min-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-title.title-attention{color:#161e2e;font-size:16px;line-height:24px;font-weight:400}.impdc-data-card-data{display:flex;flex-wrap:wrap;align-items:end;min-width:0}.impdc-data-card-data .data-current{color:#161e2e;font-size:24px;line-height:32px;font-weight:600;min-width:75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}.impdc-data-card-data .data-current.data-current-enlarged{font-size:30px;line-height:36px}.impdc-data-card-data .data-other{display:inline-flex;justify-content:space-between;align-items:end;min-width:50px}.impdc-data-card-data .data-previous{min-width:0;color:#6b7280;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:13px}.impdc-data-card-data .data-difference{display:inline-flex;align-items:center;gap:5px;color:#6b7280;font-size:14px;line-height:20px;font-weight:500}.impdc-data-card-data .data-difference.difference-negative{color:#e02424}.impdc-data-card-data .data-difference.difference-negative.badge{background-color:#fde8e8}.impdc-data-card-data .data-difference.difference-positive{color:#057a55}.impdc-data-card-data .data-difference.difference-positive.badge{background-color:#def7ec}.impdc-data-card-data .data-difference.rounded-pill{padding:4px 10px;border-radius:12px!important}.impdc-data-card-corner{position:absolute;top:0;right:0;margin:1rem;line-height:14px;color:#374151}.impdc-data-card-corner .fa,.impdc-data-card-corner .fa-brands,.impdc-data-card-corner .fa-duotone,.impdc-data-card-corner .fa-light,.impdc-data-card-corner .fa-regular,.impdc-data-card-corner .fa-solid,.impdc-data-card-corner .fa-thin,.impdc-data-card-corner .fab,.impdc-data-card-corner .fad,.impdc-data-card-corner .fal,.impdc-data-card-corner .far,.impdc-data-card-corner .fas,.impdc-data-card-corner .fat,.impdc-data-card-corner svg{height:14px;line-height:14px}.impdc-data-card-corner.hide{display:none}.impdc-data-card-footer{display:flex;align-items:center;padding:16px;background-color:#f9fafb}.impdc-data-card-footer.card-footer{border-top:0}.impdc-data-card-footer.hide{display:none}.impdc-data-card-footer .footer-link{color:#01606d;font-weight:500;font-size:14px;line-height:20px}.impdc-data-card-footer .footer-link:hover{color:#19a8c1}\n"] }]
-        }], propDecorators: { title: [{
+            args: [{ selector: 'impdc-data-card, [impdc-data-card]', template: "<div class=\"card-body impdc-data-card-body\">\n  <div\n    #iconContentEl\n    class=\"impdc-data-card-icon\"\n    [style.color]=\"iconColor ? iconColor : undefined\"\n    [style.background-color]=\"iconBgColor ? iconBgColor : undefined\"\n    [class.d-none]=\"!hasIcon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <div class=\"impdc-data-card-container\">\n    <div class=\"impdc-data-card-title\" [class.title-attention]=\"!hasIcon\">\n      {{ title }}\n    </div>\n    <div class=\"impdc-data-card-data\">\n      <ng-content></ng-content>\n      <span\n        *ngIf=\"current\"\n        class=\"data-current\"\n        [class.data-current-enlarged]=\"!hasIcon && !previous && !difference\"\n        [innerText]=\"current\"></span>\n      <span class=\"data-other\">\n        <span\n          *ngIf=\"!hasIcon && previous\"\n          class=\"data-previous\"\n          [innerText]=\"previous\"></span>\n        <impdc-badge\n          *ngIf=\"difference\"\n          [text]=\"differenceDisplay\"\n          [icon]=\"\n            differencePositive\n              ? 'arrow-up'\n              : differenceNegative\n              ? 'arrow-down'\n              : ''\n          \"\n          [theme]=\"\n            differencePositive\n              ? BadgeTheme.Success\n              : differenceNegative\n              ? BadgeTheme.Danger\n              : BadgeTheme.Light\n          \"\n          [hideBg]=\"hasIcon\"\n          [rounded]=\"true\"></impdc-badge>\n      </span>\n    </div>\n  </div>\n  <div\n    #cornerContentEl\n    class=\"impdc-data-card-corner\"\n    [class.d-none]=\"!cornerContentEl.children.length\"\n    (click)=\"handleCornerClick($event); $event.stopPropagation()\">\n    <ng-content select=\"[corner]\"></ng-content>\n  </div>\n</div>\n<div\n  class=\"card-footer impdc-data-card-footer\"\n  [class.d-none]=\"!linkText && !footerContentEl.children.length\">\n  <div #footerContentEl [class.d-none]=\"!footerContentEl.children.length\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n  <a\n    *ngIf=\"linkText\"\n    class=\"footer-link\"\n    (click)=\"handleLinkClick($event); $event.stopPropagation()\"\n    >{{ linkText }}</a\n  >\n</div>\n", styles: [":host(.impdc-data-card){overflow-x:hidden;border:0;box-shadow:var(--impartner-hex-box-shadow);border-radius:var(--impd-border-radius-lg)}:host(.impdc-data-card).impdc-data-card-shared-borders:first-child:not(:last-child){border-right:solid var(--impd-color-gray-200) 1px;border-top-right-radius:0;border-bottom-right-radius:0}:host(.impdc-data-card).impdc-data-card-shared-borders:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}:host(.impdc-data-card).impdc-data-card-shared-borders:not(:first-child):not(:last-child){border-right:solid var(--impd-color-gray-200) 1px;border-radius:0}.impdc-data-card-body{position:relative;display:flex;align-items:center;gap:var(--impd-size-5);padding:var(--impd-size-6)}.impdc-data-card-icon{display:flex;align-items:center;justify-content:center;padding:var(--impd-size-3);background-color:var(--impd-color-motion-blue-600);color:var(--impd-color-white);border-radius:var(--impd-border-radius-md)}.impdc-data-card-icon ::ng-deep .fa,.impdc-data-card-icon ::ng-deep .fa-brands,.impdc-data-card-icon ::ng-deep .fa-duotone,.impdc-data-card-icon ::ng-deep .fa-light,.impdc-data-card-icon ::ng-deep .fa-regular,.impdc-data-card-icon ::ng-deep .fa-solid,.impdc-data-card-icon ::ng-deep .fa-thin,.impdc-data-card-icon ::ng-deep .fab,.impdc-data-card-icon ::ng-deep .fad,.impdc-data-card-icon ::ng-deep .fal,.impdc-data-card-icon ::ng-deep .far,.impdc-data-card-icon ::ng-deep .fas,.impdc-data-card-icon ::ng-deep .fat,.impdc-data-card-icon ::ng-deep svg{display:flex;align-items:center;justify-content:center;height:var(--impd-size-6);width:var(--impd-size-6);font-size:var(--impd-font-size-lg);line-height:var(--impd-size-6)}.impdc-data-card-container{display:flex;flex-direction:column;min-width:50px}.impdc-data-card-title{color:var(--impd-color-gray-500);font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:var(--impd-font-weight-medium);min-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-title.title-attention{color:var(--impd-color-gray-900);font-size:var(--impd-font-size-base);line-height:var(--impd-size-6);font-weight:var(--impd-font-weight-normal)}.impdc-data-card-data{display:flex;flex-wrap:wrap;align-items:baseline;min-width:0;gap:var(--impd-size-2)}.impdc-data-card-data .data-current{color:var(--impd-color-gray-900);font-size:var(--impd-size-6);line-height:var(--impd-size-8);font-weight:var(--impd-font-weight-semibold);min-width:75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-data .data-current.data-current-enlarged{font-size:var(--impd-font-size-3xl);line-height:var(--impd-size-9)}.impdc-data-card-data .data-other{display:inline-flex;justify-content:space-between;align-items:baseline;gap:var(--impd-size-2)}.impdc-data-card-data .data-previous{min-width:0;color:var(--impd-color-gray-500);font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:var(--impd-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-corner{position:absolute;top:0;right:0;margin:var(--impd-size-2_5);line-height:var(--impd-size-3_5);color:var(--impd-color-gray-700)}.impdc-data-card-corner ::ng-deep .fa,.impdc-data-card-corner ::ng-deep .fa-brands,.impdc-data-card-corner ::ng-deep .fa-duotone,.impdc-data-card-corner ::ng-deep .fa-light,.impdc-data-card-corner ::ng-deep .fa-regular,.impdc-data-card-corner ::ng-deep .fa-solid,.impdc-data-card-corner ::ng-deep .fa-thin,.impdc-data-card-corner ::ng-deep .fab,.impdc-data-card-corner ::ng-deep .fad,.impdc-data-card-corner ::ng-deep .fal,.impdc-data-card-corner ::ng-deep .far,.impdc-data-card-corner ::ng-deep .fas,.impdc-data-card-corner ::ng-deep .fat,.impdc-data-card-corner ::ng-deep svg{height:var(--impd-size-3_5);line-height:var(--impd-size-3_5)}.impdc-data-card-footer{display:flex;align-items:center;padding:var(--impd-size-4);background-color:var(--impd-color-gray-50)}.impdc-data-card-footer.card-footer{border-top:0}.impdc-data-card-footer .footer-link{font-weight:var(--impd-font-weight-medium);font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5)}\n"] }]
+        }], propDecorators: { iconContentElementRef: [{
+                type: ViewChild,
+                args: ['iconContentEl', { static: true, read: (ElementRef) }]
+            }], title: [{
                 type: Input
             }], current: [{
                 type: Input
@@ -9052,10 +9298,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], sharedBorders: [{
                 type: Input
-            }], differencePill: [{
-                type: Input
-            }], currentColor: [{
-                type: Input
             }], iconColor: [{
                 type: Input
             }], iconBgColor: [{
@@ -9074,104 +9316,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class DataCardModule {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DataCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: DataCardModule, declarations: [DataCardComponent], imports: [CommonModule, IconModule, BadgeModule], exports: [IconModule, DataCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DataCardModule, imports: [CommonModule, IconModule, BadgeModule, IconModule] }); }
 }
-DataCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DataCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, declarations: [DataCardComponent], imports: [CommonModule, IconModule], exports: [IconModule, DataCardComponent] });
-DataCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, imports: [CommonModule, IconModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DataCardModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, IconModule],
+                    imports: [CommonModule, IconModule, BadgeModule],
                     declarations: [DataCardComponent],
                     exports: [IconModule, DataCardComponent]
                 }]
-        }], ctorParameters: function () { return []; } });
-
-class InteractionService {
-    constructor() {
-        this._interactables = [];
-        this._backdropQueue = [];
-    }
-    get showBackdrop() {
-        return this._backdropQueue.length > 0;
-    }
-    registerBackdrop(modalBackdrop) {
-        // WARNING: there should only be 1 backdrop component, preferably loaded in the body
-        if (!this._backdrop) {
-            this._backdrop = modalBackdrop;
-        }
-        else if (this._backdrop !== modalBackdrop) {
-            this._backdrop.invalidate();
-            this._backdrop = modalBackdrop;
-            if (!modalBackdrop.valid) {
-                // we invalidated and set backdrop to the same backdrop
-                modalBackdrop.validate();
-            }
-        }
-    }
-    unregisterBackdrop(modalBackdrop) {
-        if (this._backdrop === modalBackdrop) {
-            this._backdrop = undefined;
-        }
-    }
-    add(interactable) {
-        const interactableId = interactable.interactableId;
-        if (interactableId > 0) {
-            if (!this._interactables.some(i => i.interactableId === interactableId)) {
-                this._interactables.push(interactable);
-            }
-            return interactableId;
-        }
-        this._interactables.push(interactable);
-        return this._interactables.length;
-    }
-    remove(interactableId) {
-        if (interactableId <= 0 || interactableId > this._interactables.length) {
-            return;
-        }
-        this._interactables.splice(interactableId - 1, 1);
-        this.dequeueBackdrop(interactableId);
-    }
-    toggle(interactable) {
-        if (interactable.interactableId <= 0 || interactable.show) {
-            // other interactables don't need to be altered/notified
-            return false;
-        }
-        for (const otherInteractable of this._interactables.filter(oi => oi.show)) {
-            if (otherInteractable instanceof DropdownComponent) {
-                otherInteractable.hide();
-            }
-        }
-        return true;
-    }
-    queueBackdrop(interactableId) {
-        if (!this._backdropQueue.includes(interactableId)) {
-            this._backdropQueue.push(interactableId);
-        }
-    }
-    dequeueBackdrop(interactableId) {
-        const interactableIdIndex = this._backdropQueue.indexOf(interactableId);
-        if (interactableIdIndex !== -1) {
-            this._backdropQueue.splice(interactableIdIndex, 1);
-        }
-    }
-}
-InteractionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-InteractionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InteractionService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InteractionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of design-components
  */
+// do not export design or utilities
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertModule, AvatarComponent, AvatarGroupComponent, AvatarGroupModule, AvatarModule, BackdropComponent, BackdropModule, BadgeComponent, BadgeModule, BadgeSize, BadgeSizesArr, BrandedDirective, BrandingModule, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonGroupModule, ButtonModule, CardHeadingComponent, CardHeadingModule, CheckboxChangeEvent, CheckboxComponent, CheckboxModule, ColumnHeadingComponent, ComponentSize, ComponentTheme, ComponentThemesArr, CornerHintDirective, DataCardComponent, DataCardModule, DesignComponentsModule, DropdownComponent, DropdownItemComponent, DropdownModule, ErrorDirective, ErrorStateMatcher, FileDropDirective, FileUploadComponent, FileUploadModule, FontAwesomeFreeRegularIcons, FontAwesomeFreeSolidIcons, FontAwesomeIconThemes, FontAwesomeIcons, FormFieldComponent, HintDirective, HumanReadableByteSizePipe, IMPDC_FORM_FIELD, IMPDC_FORM_ROOT, IMPDC_RADIO_BUTTON, IMPDC_RADIO_GROUP, IMPDC_SELECT_OPTION_PARENT_COMPONENT, IconComponent, IconModule, ImpdcFormFieldControl, ImpdcFormsModule, ImpdcSelectIconChange, InputDirective, InteractionService, LabelDirective, ModalComponent, ModalComponentSizesArr, ModalModule, ModalTheme, ModalThemesArr, PaginationComponent, PaginationModule, PrefixDirective, ProgressBarComponent, ProgressBarModule, RadioButtonComponent, RadioChangeEvent, RadioGroupDirective, RadioModule, RootFormGroupDirective, RootNgFormDirective, ScrollableComponent, ScrollableModule, SelectChangeEvent, SelectComponent, SelectIconComponent, SelectIconModule, SelectModel, SelectModule, SelectOptionComponent, SelectOptionSelectionChangeEvent, ShowOnDirtyErrorStateMatcher, SizeDetectionModule, SizeDetectorDirective, SpinnerComponent, SpinnerModule, SuffixDirective, TableBulkActionsComponent, TableColumnType, TableComponent, TableDirective, TableInjectComponentDirective, TableModule, TableThemeHelper, TextHighlightComponent, TextHighlightModule, UniqueSelectionDispatcher, getImpdcFormFieldMissingControlError, mixinDisabled, mixinErrorState, mixinTabIndex };
+export { AlertComponent, AlertModule, AvatarComponent, AvatarGroupComponent, AvatarGroupModule, AvatarModule, BackdropComponent, BackdropModule, BadgeComponent, BadgeModule, BadgeSize, BadgeSizesArr, BrandedDirective, BrandingModule, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonGroupModule, ButtonModule, CardHeadingComponent, CardHeadingModule, CheckboxChangeEvent, CheckboxComponent, CheckboxModule, ColumnHeadingComponent, ComponentSize, ComponentTheme, ComponentThemesArr, CornerHintDirective, DataCardComponent, DataCardModule, DesignComponentsModule, DropdownComponent, DropdownItemComponent, DropdownModule, ErrorDirective, ErrorStateMatcher, FileDropDirective, FileUploadComponent, FileUploadModule, FontAwesomeFreeRegularIcons, FontAwesomeFreeSolidIcons, FontAwesomeIconThemes, FontAwesomeIcons, FormFieldComponent, HintDirective, HumanReadableByteSizePipe, IMPDC_FORM_FIELD, IMPDC_FORM_ROOT, IMPDC_RADIO_BUTTON, IMPDC_RADIO_GROUP, IMPDC_SELECT_OPTION_PARENT_COMPONENT, IconComponent, IconModule, ImpdcFormFieldControl, ImpdcFormsModule, ImpdcSelectIconChange, InputDirective, InteractionService, LabelDirective, ModalComponent, ModalComponentSizesArr, ModalModule, ModalTheme, ModalThemesArr, PaginationComponent, PaginationModule, PrefixDirective, ProgressBarComponent, ProgressBarModule, RadioButtonComponent, RadioChangeEvent, RadioGroupDirective, RadioModule, RootFormGroupDirective, RootNgFormDirective, RowActionsComponent, ScrollableComponent, ScrollableModule, SelectChangeEvent, SelectComponent, SelectIconComponent, SelectIconModule, SelectModel, SelectModule, SelectOptionComponent, SelectOptionSelectionChangeEvent, ShowOnDirtyErrorStateMatcher, SizeDetectionModule, SizeDetectorDirective, SpinnerComponent, SpinnerModule, SuffixDirective, TableBulkActionsComponent, TableColumnType, TableComponent, TableDirective, TableInjectComponentDirective, TableModule, TableThemeHelper, TextHighlightComponent, TextHighlightModule, UniqueSelectionDispatcher, getImpdcFormFieldMissingControlError, mixinDisabled, mixinErrorState, mixinTabIndex };
 //# sourceMappingURL=impartner-design-components.mjs.map