@impartner/design-components 1.0.0 → 1.0.2

package/fesm2020/impartner-design-components.mjs

@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, Validators, ReactiveFormsModule, FormControl } from '@angular/forms';
-import * as sanitizer from 'sanitize-html';
+import sanitizeHtml from 'sanitize-html';
 import { nanoid } from 'nanoid';
 import { Subject, defer, startWith, switchMap, merge, take, takeUntil, BehaviorSubject, debounceTime, distinctUntilChanged, combineLatest, map } from 'rxjs';
 import * as i4 from '@ng-bootstrap/ng-bootstrap';
@@ -3082,7 +3082,7 @@ function _isNumberValue(value) {
 }
 
 function sanitize(value) {
-    return sanitizer(value, {
+    return sanitizeHtml(value, {
         allowedTags: []
     });
 }
@@ -3203,6 +3203,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  */
 class IconComponent {
     constructor() {
+        this._loading = true;
+        this._licensed = false;
         /**
          * The Font Awesome 5 icon style. Local development may fallback to a free available
          * theme when possible.
@@ -3214,16 +3216,8 @@ class IconComponent {
          */
         this.size = '1.8rem';
     }
-    get usingLicensed() {
-        if (!this.iconRef?.nativeElement) {
-            return false;
-        }
-        const iconFontFamily = getComputedStyle(this.iconRef?.nativeElement).getPropertyValue('font-family');
-        return (iconFontFamily.includes('Font Awesome') &&
-            !iconFontFamily.includes('Free'));
-    }
     get typeClass() {
-        if (this.usingLicensed) {
+        if (this._licensed) {
             switch (this.theme) {
                 case 'light':
                     return 'fal';
@@ -3247,6 +3241,16 @@ class IconComponent {
         }
         return `${this.size}px`;
     }
+    ngAfterContentChecked() {
+        if (this._loading) {
+            // During init and possibly a few checks, `iconFontFamily` will be an inherited font, later it will be Font Awesome.
+            const iconFontFamily = getComputedStyle(this.iconRef.nativeElement).getPropertyValue('font-family');
+            if (iconFontFamily.includes('Font Awesome')) {
+                this._licensed = !iconFontFamily.includes('Free');
+                this._loading = false;
+            }
+        }
+    }
 }
 IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IconComponent, deps: [], 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 });
@@ -3514,10 +3518,7 @@ class ModalComponent {
     constructor(_interactionService) {
         this._interactionService = _interactionService;
         this._interactableId = 0;
-        /**
-         * Determines if the Modal should be shown immediately.
-         */
-        this.show = false;
+        this._show = false;
         /**
          * The theme of the Modal. Affects the layout of the Modal as well as some colors.
          */
@@ -3535,6 +3536,10 @@ class ModalComponent {
          * The subject text of the Modal.
          */
         this.titleText = '';
+        /**
+         * The fallback button text to accept the Modal. This is bypassed if you content-project the accept button.
+         */
+        this.acceptText = 'OK';
         /**
          * Determines if the Modal should fade in/out.
          */
@@ -3557,6 +3562,12 @@ class ModalComponent {
         this.accept = new EventEmitter();
         this._interactableId = this._interactionService.add(this);
     }
+    /**
+     * Determines if the Modal should be shown immediately.
+     */
+    set show(show) {
+        this._show = show;
+    }
     get interactableId() {
         return this._interactableId;
     }
@@ -3564,7 +3575,7 @@ class ModalComponent {
         return this.interactableId > 0;
     }
     get shown() {
-        return this.valid && this.show;
+        return this.valid && this._show;
     }
     get showWorkingIcon() {
         return !!this.iconName && this.theme === ModalTheme.Working;
@@ -3591,26 +3602,46 @@ class ModalComponent {
         this._interactableId = 0;
     }
     handleDismiss(event) {
-        if (!this.dismissable) {
+        if (!this.dismissable ||
+            !!this.dismissEl?.nativeElement?.firstChild?.disabled) {
             return;
         }
-        this.show = false;
+        this._show = false;
         this.dismiss.emit(event);
     }
     handleDeny(event) {
-        this.show = false;
+        if (!!this.denyEl?.nativeElement?.firstChild?.disabled) {
+            return;
+        }
+        this._show = false;
         this.deny.emit(event);
     }
     handleAccept(event) {
-        this.show = false;
+        console.log('this.acceptEl', this.acceptEl);
+        if (!!this.acceptEl?.nativeElement?.firstChild?.disabled) {
+            return;
+        }
+        this._show = false;
         this.accept.emit(event);
     }
+    /**
+     * Opens/shows the modal programmatically.
+     */
+    open() {
+        this._show = true;
+    }
+    /**
+     * Closes/hides the modal programmatically.
+     */
+    close() {
+        this._show = false;
+    }
 }
 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", dismissable: "dismissable", fade: "fade", backdrop: "backdrop" }, outputs: { dismiss: "dismiss", deny: "deny", accept: "accept" }, 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 impdcButton text=\"OK\" [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}.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"] }] });
+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: [{
             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 impdcButton text=\"OK\" [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}.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"] }]
+            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: [{
                 type: Input
             }], theme: [{
@@ -3623,12 +3654,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], titleText: [{
                 type: Input
+            }], acceptText: [{
+                type: Input
             }], dismissable: [{
                 type: Input
             }], fade: [{
                 type: Input
             }], backdrop: [{
                 type: Input
+            }], dismissEl: [{
+                type: ViewChild,
+                args: ['dismissEl', { static: false }]
+            }], denyEl: [{
+                type: ViewChild,
+                args: ['denyEl', { static: false }]
+            }], acceptEl: [{
+                type: ViewChild,
+                args: ['acceptEl', { static: false }]
             }], dismiss: [{
                 type: Output
             }], deny: [{
@@ -3656,9 +3698,15 @@ class BackdropComponent {
     ngOnInit() {
         this.interactionService.registerBackdrop(this);
     }
+    ngOnDestroy() {
+        this.interactionService.unregisterBackdrop(this);
+    }
     invalidate() {
         this._valid = false;
     }
+    validate() {
+        this._valid = true;
+    }
 }
 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"] }] });
@@ -5508,6 +5556,7 @@ class RadioGroupDirective extends _RadioGroupDirectiveBase {
     /** @ignore */
     emitChangesEvent() {
         if (this._initialized) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             this.change.emit({ source: this._selected, value: this._value });
         }
     }
@@ -5850,6 +5899,7 @@ class SelectModel {
     }
     sort(predicateFunc) {
         if (this._multiple && this.selected) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             this._selected.sort(predicateFunc);
         }
     }
@@ -7198,25 +7248,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * To use, import `BreadcrumbModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class BreadcrumbComponent {
-    constructor() {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
         /**
          * Sets the `aria-label` attribute for the Breadcrumb's `nav` element for accessibility.
          */
         this.label = '';
         this.impdcBreadcrumb = true;
     }
+    ngAfterViewInit() {
+        this._changeDetectorRef.detectChanges();
+    }
 }
-BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbComponent, deps: [], 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: "_breadcrumbs", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<nav [attr.aria-label]=\"label || null\" class=\"impdc-breadcrumb\">\n  <ol>\n    <li *ngFor=\"let breadcrumb of _breadcrumbs; last as isLast\">\n      <span class=\"impdc-crumb\" [attr.aria-current]=\"isLast ? 'page' : null\">\n        <ng-template\n          [ngTemplateOutlet]=\"breadcrumb.contentTemplate\"></ng-template>\n      </span>\n    </li>\n  </ol>\n</nav>\n", styles: [".impdc-breadcrumb ol{margin:0;padding-left:0;list-style:none}.impdc-breadcrumb li{display:inline;color:var(--impd-color-gray-500, #6b7280);font-weight:500;font-size:var(--impd-font-size-sm, 14px)}.impdc-breadcrumb li:hover{cursor:default;color:var(--impd-color-gray-700, #374151)}.impdc-breadcrumb li .impdc-crumb{--impartner-hex-link-color: var(--impd-color-gray-500, #6b7280);--impartner-hex-link-hover-color: var(--impd-color-gray-700, #374151);padding-left:.8rem;padding-right:.8rem}.impdc-breadcrumb li:first-child .impdc-crumb{padding-left:0}.impdc-breadcrumb li:last-child .impdc-crumb{padding-right:0}.impdc-breadcrumb li+li:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--impd-color-gray-400, #6b7280);content:\"\\f054\";display:inline-block;font-family:\"Font Awesome 6 Pro\",\"Font Awesome 6 Free\",\"Font Awesome 5 Pro\",\"Font Awesome 5 Free\";font-size:10px;font-style:normal;font-feature-settings:normal;font-variant:normal;font-weight:900;line-height:1;text-align:center;text-rendering:auto;width:2rem}\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: [{
             type: Component,
-            args: [{ selector: 'impdc-breadcrumb, div[impdc-breadcrumb]', encapsulation: ViewEncapsulation.None, template: "<nav [attr.aria-label]=\"label || null\" class=\"impdc-breadcrumb\">\n  <ol>\n    <li *ngFor=\"let breadcrumb of _breadcrumbs; last as isLast\">\n      <span class=\"impdc-crumb\" [attr.aria-current]=\"isLast ? 'page' : null\">\n        <ng-template\n          [ngTemplateOutlet]=\"breadcrumb.contentTemplate\"></ng-template>\n      </span>\n    </li>\n  </ol>\n</nav>\n", styles: [".impdc-breadcrumb ol{margin:0;padding-left:0;list-style:none}.impdc-breadcrumb li{display:inline;color:var(--impd-color-gray-500, #6b7280);font-weight:500;font-size:var(--impd-font-size-sm, 14px)}.impdc-breadcrumb li:hover{cursor:default;color:var(--impd-color-gray-700, #374151)}.impdc-breadcrumb li .impdc-crumb{--impartner-hex-link-color: var(--impd-color-gray-500, #6b7280);--impartner-hex-link-hover-color: var(--impd-color-gray-700, #374151);padding-left:.8rem;padding-right:.8rem}.impdc-breadcrumb li:first-child .impdc-crumb{padding-left:0}.impdc-breadcrumb li:last-child .impdc-crumb{padding-right:0}.impdc-breadcrumb li+li:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--impd-color-gray-400, #6b7280);content:\"\\f054\";display:inline-block;font-family:\"Font Awesome 6 Pro\",\"Font Awesome 6 Free\",\"Font Awesome 5 Pro\",\"Font Awesome 5 Free\";font-size:10px;font-style:normal;font-feature-settings:normal;font-variant:normal;font-weight:900;line-height:1;text-align:center;text-rendering:auto;width:2rem}\n"] }]
-        }], propDecorators: { label: [{
+            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: [{
                 type: Input
             }], impdcBreadcrumb: [{
                 type: HostBinding,
                 args: ['class.impdc-breadcrumb']
-            }], _breadcrumbs: [{
+            }], breadcrumbItems: [{
                 type: ContentChildren,
                 args: [BreadcrumbItemComponent]
             }] } });
@@ -7224,14 +7278,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 class BreadcrumbModule {
 }
 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: [BreadcrumbComponent, BreadcrumbItemComponent], imports: [CommonModule], exports: [BreadcrumbComponent, BreadcrumbItemComponent] });
+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: [{
             type: NgModule,
             args: [{
-                    declarations: [BreadcrumbComponent, BreadcrumbItemComponent],
+                    declarations: [BreadcrumbItemComponent, BreadcrumbComponent],
                     imports: [CommonModule],
-                    exports: [BreadcrumbComponent, BreadcrumbItemComponent]
+                    exports: [BreadcrumbItemComponent, BreadcrumbComponent]
                 }]
         }] });
 
@@ -7670,8 +7724,10 @@ 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) {
+    constructor(_cd, _hostElementRef) {
         this._cd = _cd;
+        this._hostElementRef = _hostElementRef;
+        this.GET_ANCESTOR_BG_SEARCH_DEPTH = 64;
         /**
          * The base amount to scroll.
          */
@@ -7715,12 +7771,11 @@ class ScrollableComponent {
                 this._cd.detectChanges();
             }
         }
-        this._getBackgroundColorForButtons();
     }
     ngAfterViewInit() {
         this._width = this.contentRef?.nativeElement.width;
-        this._getBackgroundColorForButtons();
         this._cd.detectChanges();
+        Promise.resolve().then(() => this._getBackgroundColorForButtons());
     }
     async scroll(direction) {
         if (!this._contentElement) {
@@ -7779,29 +7834,21 @@ class ScrollableComponent {
         return promise;
     }
     _getBackgroundColorForButtons() {
-        if (!this.contentRef) {
-            return;
-        }
-        const projectedElementCollection = this.contentRef.nativeElement.children;
-        if (!projectedElementCollection || !projectedElementCollection.length) {
-            return;
-        }
-        const firstElement = projectedElementCollection[0];
-        let backgroundColor = this._getBackGroundColor(firstElement);
+        let backgroundColor = this._getBackGroundColor(this._hostElementRef.nativeElement);
         if (!backgroundColor) {
             backgroundColor = this._getAncestorBackgroundColor();
         }
-        this._scrollableBgColor = backgroundColor;
+        if (this._scrollableBgColor !== backgroundColor) {
+            this._scrollableBgColor = backgroundColor;
+            this._cd.detectChanges();
+        }
     }
     _getAncestorBackgroundColor() {
-        if (!this.contentRef) {
-            return null;
-        }
         let result = {
-            parent: this.contentRef.nativeElement.parentElement,
+            parent: this._hostElementRef.nativeElement.parentElement,
             backgroundColor: null
         };
-        let count = 6;
+        let count = this.GET_ANCESTOR_BG_SEARCH_DEPTH;
         function getParentBackgroundColor(currentContext, getBackgroundColor) {
             const result = { parent: null, backgroundColor: null };
             if (currentContext && currentContext.parent) {
@@ -7832,12 +7879,12 @@ class ScrollableComponent {
         return element.style.backgroundColor;
     }
 }
-ScrollableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ScrollableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+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 class=\"fas fa-chevron-left 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 class=\"fas fa-chevron-right 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: [{
             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 class=\"fas fa-chevron-left 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 class=\"fas fa-chevron-right 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 }]; }, propDecorators: { scrollUnit: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { scrollUnit: [{
                 type: Input
             }], clickScrollMultiplier: [{
                 type: Input
@@ -8201,6 +8248,145 @@ 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`.
+ */
+class DataCardComponent {
+    constructor() {
+        /**
+         * The subject text for the Data Card.
+         */
+        this.title = '';
+        /**
+         * The current data value. Any number/currency format is supported.
+         */
+        this.current = '0';
+        /**
+         * The previous data value. Any number/currency format is supported.
+         */
+        this.previous = '';
+        /**
+         * The difference between the current and previous values. A numerical or percentage value is preferred,
+         * but any number/currency format is supported.
+         */
+        this.difference = '';
+        /**
+         * Text for the link at the bottom of the Data Card. If provided, enables the `linkClicked` event to be emitted.
+         */
+        this.linkText = '';
+        /**
+         * 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.
+         */
+        this.iconColor = '';
+        /**
+         * Changes the color of the icon's background.
+         */
+        this.iconBgColor = '';
+        /**
+         * Emitted when the link text is clicked.
+         */
+        this.linkClicked = new EventEmitter();
+        /**
+         * Emitted when the corner content is clicked.
+         */
+        this.cornerClicked = new EventEmitter();
+    }
+    get classDataCard() {
+        return 'card impdc-data-card';
+    }
+    get classDataCardSharedBorders() {
+        return this.sharedBorders;
+    }
+    get differenceNumber() {
+        return Number(this.difference.replace(/[^0-9\.-]+/g, ''));
+    }
+    get differenceNegative() {
+        return this.differenceNumber < 0;
+    }
+    get differencePositive() {
+        return this.differenceNumber > 0;
+    }
+    get differenceDisplay() {
+        return this.difference.replace('-', '');
+    }
+    handleLinkClick(event) {
+        this.linkClicked.emit(event);
+    }
+    handleCornerClick(event) {
+        this.cornerClicked.emit(event);
+    }
+}
+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\" class=\"fas fa-arrow-down\"></span>\n          <span *ngIf=\"differencePositive\" class=\"fas fa-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"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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\" class=\"fas fa-arrow-down\"></span>\n          <span *ngIf=\"differencePositive\" class=\"fas fa-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: [{
+                type: Input
+            }], current: [{
+                type: Input
+            }], previous: [{
+                type: Input
+            }], difference: [{
+                type: Input
+            }], linkText: [{
+                type: Input
+            }], sharedBorders: [{
+                type: Input
+            }], differencePill: [{
+                type: Input
+            }], currentColor: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], iconBgColor: [{
+                type: Input
+            }], linkClicked: [{
+                type: Output
+            }], cornerClicked: [{
+                type: Output
+            }], classDataCard: [{
+                type: HostBinding,
+                args: ['class']
+            }], classDataCardSharedBorders: [{
+                type: HostBinding,
+                args: ['class.impdc-data-card-shared-borders']
+            }] } });
+
+class DataCardModule {
+    constructor() { }
+}
+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], exports: [DataCardComponent] });
+DataCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [DataCardComponent],
+                    exports: [DataCardComponent]
+                }]
+        }], ctorParameters: function () { return []; } });
+
 class InteractionService {
     constructor() {
         this._interactables = [];
@@ -8213,8 +8399,18 @@ class InteractionService {
         if (!this._backdrop) {
             this._backdrop = modalBackdrop;
         }
-        else {
-            modalBackdrop.invalidate();
+        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) {
@@ -8260,5 +8456,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * 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, ComponentSize, ComponentTheme, ComponentThemesArr, CornerHintDirective, 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, TableComponent, TableModule, 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, 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, TableComponent, TableModule, TextHighlightComponent, TextHighlightModule, UniqueSelectionDispatcher, getImpdcFormFieldMissingControlError, mixinDisabled, mixinErrorState, mixinTabIndex };
 //# sourceMappingURL=impartner-design-components.mjs.map