@impartner/design-components 1.0.0 → 1.0.1

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);
         }
     }
@@ -7670,8 +7720,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 +7767,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 +7830,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 +7875,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
@@ -8213,8 +8256,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) {