@odx/angular 12.26.1 → 13.0.0

package/fesm2022/odx-angular-components-modal.mjs

@@ -6,14 +6,13 @@ import { DynamicViewDirective, DynamicViewService } from '@odx/angular/cdk/dynam
 import { AreaHeaderSize, AreaHeaderComponent, AreaHeaderModule } from '@odx/angular/components/area-header';
 import { ButtonComponent } from '@odx/angular/components/button';
 import { deepmerge, CSSComponent, CSSModifier } from '@odx/angular/internal';
-import { Subject, share, finalize } from 'rxjs';
-import { __decorate, __metadata } from 'tslib';
+import { Subject, finalize } from 'rxjs';
+import { __decorate } from 'tslib';
 import { injectElement, hasChanged, isTemplateRef, createConfigTokens, Queue, getUniqueId, waitForAnimations, deferFn } from '@odx/angular/utils';
 import { ActionGroupComponent } from '@odx/angular/components/action-group';
-import { IconComponent, IconSet } from '@odx/angular/components/icon';
+import { IconComponent } from '@odx/angular/components/icon';
 import { A11yModule } from '@odx/angular/cdk/a11y';
-import * as i1$1 from '@angular/common';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, Location } from '@angular/common';
 import { ButtonGroupComponent } from '@odx/angular/components/button-group';
 
 const ModalHeroVariant = {
@@ -69,12 +68,13 @@ class ModalRef extends Controller {
         this.internalOptions = internalOptions;
         this.onClose$$ = new Subject();
         this.onDismiss$$ = new Subject();
+        this.onDestroy$$ = new Subject();
         /** An observable that emits when the modal is closed with a result. */
-        this.onClose$ = this.onClose$$.pipe(share({ resetOnRefCountZero: true }));
+        this.onClose$ = this.onClose$$.asObservable();
         /** An observable that emits when the modal is dismissed without a result. */
-        this.onDismiss$ = this.onDismiss$$.pipe(share({ resetOnRefCountZero: true }));
-        /** An observable that merges the onClose$ and onDismiss$ streams for cases when any kind of teardown is needed. */
-        this.onDestroy$ = deepmerge(this.onClose$, this.onDismiss$);
+        this.onDismiss$ = this.onDismiss$$.asObservable();
+        /** An observable that emits when modal is destroyed regardless of the trigger path. */
+        this.onDestroy$ = this.onDestroy$$.asObservable();
         this.isActive = () => isActive(this);
     }
     /**
@@ -114,6 +114,8 @@ class ModalRef extends Controller {
     }
     /** Completes the onClose and onDismiss streams and cleans up resources. */
     destroy() {
+        this.onDestroy$$.next();
+        this.onDestroy$$.complete();
         this.onClose$$.complete();
         this.onDismiss$$.complete();
     }
@@ -207,10 +209,10 @@ class ModalCloseDirective {
             this.modalRef.close(result ?? null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ModalCloseDirective, isStandalone: true, selector: "[odxModalClose]", inputs: { result: ["odxModalClose", "result"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ModalCloseDirective, isStandalone: true, selector: "[odxModalClose]", inputs: { result: ["odxModalClose", "result"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -231,13 +233,13 @@ let ModalContentDirective = class ModalContentDirective {
     constructor() {
         this.element = injectElement();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ModalContentDirective, isStandalone: true, selector: "odx-modal-content", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ModalContentDirective, isStandalone: true, selector: "odx-modal-content", ngImport: i0 }); }
 };
 ModalContentDirective = __decorate([
     CSSComponent('modal__content')
 ], ModalContentDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalContentDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -269,10 +271,10 @@ class ModalDismissDirective {
     onClick() {
         this.modalRef.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ModalDismissDirective, isStandalone: true, selector: "[odxModalDismiss]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ModalDismissDirective, isStandalone: true, selector: "[odxModalDismiss]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalDismissDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalDismissDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -290,10 +292,10 @@ class PreventFormMethodDialogDirective {
     onClick(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreventFormMethodDialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: PreventFormMethodDialogDirective, isStandalone: true, selector: "[formmethod=dialog]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreventFormMethodDialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: PreventFormMethodDialogDirective, isStandalone: true, selector: "[formmethod=dialog]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreventFormMethodDialogDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreventFormMethodDialogDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -311,10 +313,10 @@ class PreventMethodDialogDirective {
     onFormSubmit(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreventMethodDialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: PreventMethodDialogDirective, isStandalone: true, selector: "form[method=dialog]", host: { listeners: { "submit": "onFormSubmit($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreventMethodDialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: PreventMethodDialogDirective, isStandalone: true, selector: "form[method=dialog]", host: { listeners: { "submit": "onFormSubmit($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreventMethodDialogDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreventMethodDialogDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -332,13 +334,13 @@ let ModalFooterComponent = class ModalFooterComponent {
     constructor() {
         this.element = injectElement();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalFooterComponent, isStandalone: true, selector: "odx-modal-footer", ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ModalFooterComponent, isStandalone: true, selector: "odx-modal-footer", ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 ModalFooterComponent = __decorate([
     CSSComponent('modal__footer')
 ], ModalFooterComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalFooterComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'odx-modal-footer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n" }]
         }] });
@@ -357,16 +359,15 @@ let ModalHeaderComponent = class ModalHeaderComponent {
             this.areaHeaderComponent.size = AreaHeaderSize.MEDIUM;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ModalHeaderComponent, isStandalone: true, selector: "odx-modal-header", queries: [{ propertyName: "areaHeaderComponent", first: true, predicate: AreaHeaderComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"odx-area-header\" />\n@if (modalRef.options.dismissable) {\n  <odx-action-group class=\"odx-modal__dismiss\">\n    <button odxButton odxModalDismiss><odx-icon name=\"close\" iconSet=\"core\" /></button>\n  </odx-action-group>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }, { kind: "directive", type: ModalDismissDirective, selector: "[odxModalDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalHeaderComponent, isStandalone: true, selector: "odx-modal-header", queries: [{ propertyName: "areaHeaderComponent", first: true, predicate: AreaHeaderComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"odx-area-header\" />\n@if (modalRef.options.dismissable) {\n  <odx-action-group class=\"odx-modal__dismiss\">\n    <button odxButton odxModalDismiss><odx-icon name=\"core::close\" /></button>\n  </odx-action-group>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["size", "name", "set", "identifier"] }, { kind: "directive", type: ModalDismissDirective, selector: "[odxModalDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 ModalHeaderComponent = __decorate([
-    CSSComponent('modal__header'),
-    __metadata("design:paramtypes", [])
+    CSSComponent('modal__header')
 ], ModalHeaderComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'odx-modal-header', imports: [CoreModule, ActionGroupComponent, ButtonComponent, IconComponent, ModalDismissDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"odx-area-header\" />\n@if (modalRef.options.dismissable) {\n  <odx-action-group class=\"odx-modal__dismiss\">\n    <button odxButton odxModalDismiss><odx-icon name=\"close\" iconSet=\"core\" /></button>\n  </odx-action-group>\n}\n" }]
+            args: [{ standalone: true, selector: 'odx-modal-header', imports: [CoreModule, ActionGroupComponent, ButtonComponent, IconComponent, ModalDismissDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"odx-area-header\" />\n@if (modalRef.options.dismissable) {\n  <odx-action-group class=\"odx-modal__dismiss\">\n    <button odxButton odxModalDismiss><odx-icon name=\"core::close\" /></button>\n  </odx-action-group>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { areaHeaderComponent: [{
                 type: ContentChild,
                 args: [AreaHeaderComponent]
@@ -384,33 +385,22 @@ let ModalHeroComponent = class ModalHeroComponent {
          * @type {ModalRef}
          */
         this.modalRef = injectModalRef();
-        /**
-         * The icon set of the modal hero component.
-         *
-         * @type {IconSet}
-         * @default IconSet.CORE
-         */
-        this.iconSet = IconSet.CORE;
         detectControllerChanges(this.modalRef).subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ModalHeroComponent, isStandalone: true, selector: "odx-modal-hero", inputs: { icon: "icon", iconSet: "iconSet", variant: "variant" }, ngImport: i0, template: "@if (icon) {\n  <odx-icon class=\"odx-modal-hero__icon\" [name]=\"icon\" [iconSet]=\"iconSet\" size=\"xlarge\" />\n}\n\n<div class=\"odx-modal-hero__title odx-heading-4\">\n  <ng-content />\n</div>\n@if (modalRef.options.dismissable) {\n  <odx-action-group class=\"odx-modal-hero__dismiss\">\n    <button odxButton odxModalDismiss>\n      <odx-icon name=\"close\" iconSet=\"core\" />\n    </button>\n  </odx-action-group>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }, { kind: "directive", type: ModalDismissDirective, selector: "[odxModalDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalHeroComponent, isStandalone: true, selector: "odx-modal-hero", inputs: { icon: "icon", variant: "variant" }, ngImport: i0, template: "@if (icon) {\n  <odx-icon class=\"odx-modal-hero__icon\" [name]=\"icon\" size=\"xlarge\" />\n}\n\n<div class=\"odx-modal-hero__title odx-heading-4\">\n  <ng-content />\n</div>\n@if (modalRef.options.dismissable) {\n  <odx-action-group class=\"odx-modal-hero__dismiss\">\n    <button odxButton odxModalDismiss>\n      <odx-icon name=\"core::close\" />\n    </button>\n  </odx-action-group>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["size", "name", "set", "identifier"] }, { kind: "directive", type: ModalDismissDirective, selector: "[odxModalDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 __decorate([
-    CSSModifier(),
-    __metadata("design:type", Object)
+    CSSModifier()
 ], ModalHeroComponent.prototype, "variant", void 0);
 ModalHeroComponent = __decorate([
-    CSSComponent('modal-hero'),
-    __metadata("design:paramtypes", [])
+    CSSComponent('modal-hero')
 ], ModalHeroComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalHeroComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalHeroComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-modal-hero', standalone: true, imports: [CoreModule, ActionGroupComponent, ButtonComponent, IconComponent, ModalDismissDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon) {\n  <odx-icon class=\"odx-modal-hero__icon\" [name]=\"icon\" [iconSet]=\"iconSet\" size=\"xlarge\" />\n}\n\n<div class=\"odx-modal-hero__title odx-heading-4\">\n  <ng-content />\n</div>\n@if (modalRef.options.dismissable) {\n  <odx-action-group class=\"odx-modal-hero__dismiss\">\n    <button odxButton odxModalDismiss>\n      <odx-icon name=\"close\" iconSet=\"core\" />\n    </button>\n  </odx-action-group>\n}\n" }]
+            args: [{ selector: 'odx-modal-hero', standalone: true, imports: [CoreModule, ActionGroupComponent, ButtonComponent, IconComponent, ModalDismissDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon) {\n  <odx-icon class=\"odx-modal-hero__icon\" [name]=\"icon\" size=\"xlarge\" />\n}\n\n<div class=\"odx-modal-hero__title odx-heading-4\">\n  <ng-content />\n</div>\n@if (modalRef.options.dismissable) {\n  <odx-action-group class=\"odx-modal-hero__dismiss\">\n    <button odxButton odxModalDismiss>\n      <odx-icon name=\"core::close\" />\n    </button>\n  </odx-action-group>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
-            }], iconSet: [{
-                type: Input
             }], variant: [{
                 type: Input
             }] } });
@@ -437,10 +427,10 @@ class BasicModalComponent {
     get data() {
         return this.modalRef.data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BasicModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BasicModalComponent, isStandalone: true, selector: "odx-basic-modal", ngImport: i0, template: "@if (data.heroIcon; as icon) {\n  <odx-modal-hero [icon]=\"icon\" [variant]=\"data.heroVariant\">\n    <ng-template [odxDynamicView]=\"data.title\" />\n  </odx-modal-hero>\n} @else {\n  <odx-modal-header>\n    <odx-area-header>\n      <ng-template [odxDynamicView]=\"data.title\" />\n    </odx-area-header>\n  </odx-modal-header>\n}\n\n<odx-modal-content>\n  <ng-template [odxDynamicView]=\"data.content\" [odxDynamicViewInjector]=\"injector\" />\n</odx-modal-content>\n\n<odx-modal-footer>\n  @for (action of data.actions; track $index) {\n    <button odxButton [variant]=\"action.variant\" [odxModalClose]=\"action.data\">\n      {{ action.label }}\n    </button>\n  }\n</odx-modal-footer>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: AreaHeaderComponent, selector: "odx-area-header", inputs: ["size"] }, { kind: "component", type: ModalHeaderComponent, selector: "odx-modal-header" }, { kind: "component", type: ModalHeroComponent, selector: "odx-modal-hero", inputs: ["icon", "iconSet", "variant"] }, { kind: "component", type: ModalFooterComponent, selector: "odx-modal-footer" }, { kind: "directive", type: ModalContentDirective, selector: "odx-modal-content" }, { kind: "directive", type: ModalCloseDirective, selector: "[odxModalClose]", inputs: ["odxModalClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BasicModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BasicModalComponent, isStandalone: true, selector: "odx-basic-modal", ngImport: i0, template: "@if (data.heroIcon; as icon) {\n  <odx-modal-hero [icon]=\"icon\" [variant]=\"data.heroVariant\">\n    <ng-template [odxDynamicView]=\"data.title\" />\n  </odx-modal-hero>\n} @else {\n  <odx-modal-header>\n    <odx-area-header>\n      <ng-template [odxDynamicView]=\"data.title\" />\n    </odx-area-header>\n  </odx-modal-header>\n}\n\n<odx-modal-content>\n  <ng-template [odxDynamicView]=\"data.content\" [odxDynamicViewInjector]=\"injector\" />\n</odx-modal-content>\n\n<odx-modal-footer>\n  @for (action of data.actions; track $index) {\n    <button odxButton [variant]=\"action.variant\" [odxModalClose]=\"action.data\">\n      {{ action.label }}\n    </button>\n  }\n</odx-modal-footer>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }, { kind: "component", type: ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: AreaHeaderComponent, selector: "odx-area-header", inputs: ["size"] }, { kind: "component", type: ModalHeaderComponent, selector: "odx-modal-header" }, { kind: "component", type: ModalHeroComponent, selector: "odx-modal-hero", inputs: ["icon", "variant"] }, { kind: "component", type: ModalFooterComponent, selector: "odx-modal-footer" }, { kind: "directive", type: ModalContentDirective, selector: "odx-modal-content" }, { kind: "directive", type: ModalCloseDirective, selector: "[odxModalClose]", inputs: ["odxModalClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BasicModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BasicModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'odx-basic-modal', standalone: true, imports: [
                         CoreModule,
@@ -503,26 +493,22 @@ let ModalComponent = class ModalComponent {
         if (target === this.element.nativeElement)
             this.modalRef.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalComponent, isStandalone: true, selector: "dialog[odx-dialog-modal]", inputs: { content: "content" }, host: { listeners: { "keydown": "preventNativeDismiss($event)", "cancel": "handleDialogClose($event)", "close": "handleDialogClose($event)" }, properties: { "attr.id": "modalRef.options.id", "attr.aria-labelledby": "modalRef.modalTitleId", "attr.role": "\"dialog\"" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  [odxClickOutsideActive]=\"modalRef.isActive() && modalRef.options.dismissable && modalRef.options.interactiveBackdrop\"\n  (odxClickOutside)=\"modalRef.dismiss()\"\n  class=\"odx-modal__container\"\n>\n  <ng-template [odxDynamicView]=\"content\" [odxDynamicViewContext]=\"withComponent ? {} : context\" [odxDynamicViewInjector]=\"injector\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.ClickOutsideDirective, selector: "[odxClickOutside]", inputs: ["odxClickOutsideActive"], outputs: ["odxClickOutside"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ModalComponent, isStandalone: true, selector: "dialog[odx-dialog-modal]", inputs: { content: "content" }, host: { listeners: { "keydown": "preventNativeDismiss($event)", "cancel": "handleDialogClose($event)", "close": "handleDialogClose($event)" }, properties: { "attr.id": "modalRef.options.id", "attr.aria-labelledby": "modalRef.modalTitleId", "attr.role": "\"dialog\"" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  [odxClickOutsideActive]=\"modalRef.isActive() && modalRef.options.dismissable && modalRef.options.interactiveBackdrop\"\n  (odxClickOutside)=\"modalRef.dismiss()\"\n  class=\"odx-modal__container\"\n>\n  <ng-template [odxDynamicView]=\"content\" [odxDynamicViewContext]=\"withComponent ? {} : context\" [odxDynamicViewInjector]=\"injector\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.ClickOutsideDirective, selector: "[odxClickOutside]", inputs: ["odxClickOutsideActive"], outputs: ["odxClickOutside"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 __decorate([
-    CSSModifier(),
-    __metadata("design:type", Object)
+    CSSModifier()
 ], ModalComponent.prototype, "size", void 0);
 __decorate([
-    CSSModifier(),
-    __metadata("design:type", Object)
+    CSSModifier()
 ], ModalComponent.prototype, "variant", void 0);
 __decorate([
-    CSSModifier(),
-    __metadata("design:type", Object)
+    CSSModifier()
 ], ModalComponent.prototype, "withComponent", void 0);
 ModalComponent = __decorate([
-    CSSComponent('modal'),
-    __metadata("design:paramtypes", [])
+    CSSComponent('modal')
 ], ModalComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'dialog[odx-dialog-modal]', imports: [A11yModule, CoreModule, DynamicViewDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.id]': 'modalRef.options.id',
@@ -606,7 +592,7 @@ const { ModalDefaultConfig, ModalConfig, injectModalConfig, provideModalConfig }
  * ```
  */
 class ModalService {
-    constructor(location) {
+    constructor() {
         this.config = injectModalConfig();
         this.openModals = new Queue();
         this.injector = inject(Injector);
@@ -618,7 +604,7 @@ class ModalService {
          * @emits {ModalRef[]} openModals$ - The current array of open modals.
          */
         this.openModals$ = this.openModals.value$;
-        location.onUrlChange(() => {
+        inject(Location).onUrlChange(() => {
             for (const modalRef of this.openModals.toArray()) {
                 if (modalRef.options.dismissOnNavigation) {
                     modalRef.destroy();
@@ -673,10 +659,14 @@ class ModalService {
         });
         const dialog = viewRef.getElement();
         const onDestroy = async () => {
-            dialog?.classList.add('is-hidden');
-            await waitForAnimations(dialog);
+            if (dialog?.isConnected) {
+                dialog.classList.add('is-hidden');
+                await waitForAnimations(dialog);
+            }
             this.document.dispatchEvent(new Event('ODXModalOnBeforeClosed'));
-            dialog?.close();
+            if (dialog?.open) {
+                dialog?.close();
+            }
             this.openModals.remove(modalRef);
             viewRef.destroy();
         };
@@ -685,13 +675,13 @@ class ModalService {
             dialog?.isConnected && dialog?.showModal();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalService, deps: [{ token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.Location }] });
+        }], ctorParameters: () => [] });
 
 /**
  * A directive that simplifies the creation and management of modals directly from Angular templates.
@@ -743,10 +733,10 @@ class ModalDirective {
     dismiss() {
         this.modalRef?.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ModalDirective, isStandalone: true, selector: "ng-template[odxModal]", inputs: { modalOptions: ["odxModal", "modalOptions"] }, outputs: { modalClose: "odxModalClose", modalDismiss: "odxModalDismiss" }, exportAs: ["odxModal"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ModalDirective, isStandalone: true, selector: "ng-template[odxModal]", inputs: { modalOptions: ["odxModal", "modalOptions"] }, outputs: { modalClose: "odxModalClose", modalDismiss: "odxModalDismiss" }, exportAs: ["odxModal"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -777,8 +767,8 @@ const modules = [
     PreventFormMethodDialogDirective,
 ];
 class ModalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ModalModule, imports: [ButtonComponent, ButtonGroupComponent, ModalComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ModalModule, imports: [ButtonComponent, ButtonGroupComponent, ModalComponent,
             ModalHeaderComponent,
             ModalHeroComponent,
             ModalFooterComponent,
@@ -797,11 +787,11 @@ class ModalModule {
             ModalDismissDirective,
             PreventMethodDialogDirective,
             PreventFormMethodDialogDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalModule, imports: [ButtonComponent, ButtonGroupComponent, ModalComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalModule, imports: [ButtonComponent, ButtonGroupComponent, ModalComponent,
             ModalHeaderComponent,
             ModalHeroComponent, CoreModule, AreaHeaderModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ButtonComponent, ButtonGroupComponent, ...modules],