@odx/angular 1.0.0-rc.8 → 1.0.0

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

@@ -1,49 +1,33 @@
-import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, inject, Directive, Input, HostListener, ContentChild, Injectable, Injector, TemplateRef, EventEmitter, Output, NgModule } from '@angular/core';
-import { CSSComponent, CSSModifier } from '@odx/angular/internal';
-import { injectElement, getInjector, createModuleConfigTokens, hasChanged, provideModuleConfig } from '@odx/angular/utils';
-import * as i2 from '@odx/angular';
+import { inject, Directive, Input, HostListener, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, Injector, Injectable, TemplateRef, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i1$1 from '@odx/angular';
 import { Controller, detectControllerChanges, CoreModule } from '@odx/angular';
-import { ActionGroupComponent } from '@odx/angular/components/action-group';
+import { DynamicViewDirective, DynamicViewService } from '@odx/angular/cdk/dynamic-view';
 import { AreaHeaderSize, AreaHeaderComponent, AreaHeaderModule } from '@odx/angular/components/area-header';
 import { ButtonComponent } from '@odx/angular/components/button';
+import { injectElement, getInjector, hasChanged, isTemplateRef, createConfigTokens, Queue, deferFn } from '@odx/angular/utils';
+import { deepmerge, CSSComponent, CSSModifier } from '@odx/angular/internal';
+import { Subject, share, finalize } from 'rxjs';
+import { __decorate, __metadata } from 'tslib';
+import { ActionGroupComponent } from '@odx/angular/components/action-group';
 import { IconComponent } from '@odx/angular/components/icon';
-import { deepmerge } from 'deepmerge-ts';
-import { Subject, share, merge, BehaviorSubject, shareReplay, finalize } from 'rxjs';
 import * as i1 from '@angular/common';
-import { Location } from '@angular/common';
 import { trigger, transition, group, useAnimation, query } from '@angular/animations';
-import * as i1$1 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
 import { fadeIn, slideInY, fadeOut, slideOutY, slideInRight, slideOutRight } from '@odx/angular/animations';
-import { DynamicViewDirective, DynamicViewService } from '@odx/angular/cdk/dynamic-view';
+import { A11yModule } from '@odx/angular/cdk/a11y';
+import * as i2 from '@angular/cdk/a11y';
 import { ButtonGroupComponent } from '@odx/angular/components/button-group';
 
-let ModalFooterComponent = class ModalFooterComponent {
-    constructor() {
-        this.element = injectElement();
-    }
+const ModalHeroVariant = {
+    PRIMARY: 'primary',
+    SUCCESS: 'success',
+    CONFIRMATION: 'confirmation',
+    DANGER: 'danger',
 };
-ModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ModalFooterComponent, isStandalone: true, selector: "odx-modal-footer", ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-ModalFooterComponent = __decorate([
-    CSSComponent('modal__footer')
-], ModalFooterComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalFooterComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'odx-modal-footer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
-        }] });
 
 class ModalRef extends Controller {
-    constructor(internalOptions) {
-        super();
-        this.internalOptions = internalOptions;
-        this.onClose$$ = new Subject();
-        this.onDismiss$$ = new Subject();
-        this.onClose$ = this.onClose$$.pipe(share({ resetOnRefCountZero: true }));
-        this.onDismiss$ = this.onDismiss$$.pipe(share({ resetOnRefCountZero: true }));
-        this.onDestroy$ = merge(this.onClose$, this.onDismiss$);
+    get id() {
+        return this.options.id;
     }
     get modalTitleId() {
         return `${this.options.id}-title`;
@@ -54,15 +38,29 @@ class ModalRef extends Controller {
     get options() {
         return this.internalOptions;
     }
+    constructor(internalOptions, isActive) {
+        super();
+        this.internalOptions = internalOptions;
+        this.onClose$$ = new Subject();
+        this.onDismiss$$ = new Subject();
+        this.onClose$ = this.onClose$$.pipe(share({ resetOnRefCountZero: true }));
+        this.onDismiss$ = this.onDismiss$$.pipe(share({ resetOnRefCountZero: true }));
+        this.onDestroy$ = deepmerge(this.onClose$, this.onDismiss$);
+        this.isActive = () => isActive(this);
+    }
     update(options) {
         this.internalOptions = deepmerge(this.internalOptions, options);
         this.triggerControllerChange();
     }
-    dismiss() {
+    dismiss(force = false) {
+        if (!force && !this.isActive())
+            return;
         this.onDismiss$$.next();
         this.destroy();
     }
     close(result) {
+        if (!this.isActive())
+            return;
         this.onClose$$.next(result);
         this.destroy();
     }
@@ -73,6 +71,7 @@ class ModalRef extends Controller {
 }
 
 const ModalSize = {
+    XSMALL: 'xsmall',
     SMALL: 'small',
     MEDIUM: 'medium',
     LARGE: 'large',
@@ -98,12 +97,17 @@ class ModalCloseDirective {
     }
     onClick() {
         const result = this.result === '' ? null : this.result;
-        this.modalRef.close(result ?? null);
+        if (result === undefined) {
+            this.modalRef.dismiss();
+        }
+        else {
+            this.modalRef.close(result ?? null);
+        }
     }
 }
-ModalCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ModalCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ModalCloseDirective, isStandalone: true, selector: "[odxModalClose]", inputs: { result: ["odxModalClose", "result"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalCloseDirective, decorators: [{
+ModalCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ModalCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ModalCloseDirective, isStandalone: true, selector: "[odxModalClose]", inputs: { result: ["odxModalClose", "result"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -122,12 +126,12 @@ let ModalContentDirective = class ModalContentDirective {
         this.element = injectElement();
     }
 };
-ModalContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ModalContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ModalContentDirective, isStandalone: true, selector: "odx-modal-content", ngImport: i0 });
+ModalContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ModalContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ModalContentDirective, isStandalone: true, selector: "odx-modal-content", ngImport: i0 });
 ModalContentDirective = __decorate([
     CSSComponent('modal__content')
 ], ModalContentDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalContentDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -143,9 +147,9 @@ class ModalDismissDirective {
         this.modalRef.dismiss();
     }
 }
-ModalDismissDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ModalDismissDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ModalDismissDirective, isStandalone: true, selector: "[odxModalDismiss]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalDismissDirective, decorators: [{
+ModalDismissDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ModalDismissDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ModalDismissDirective, isStandalone: true, selector: "[odxModalDismiss]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalDismissDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -156,6 +160,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['click']
             }] } });
 
+let ModalFooterComponent = class ModalFooterComponent {
+    constructor() {
+        this.element = injectElement();
+    }
+};
+ModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ModalFooterComponent, isStandalone: true, selector: "odx-modal-footer", ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+ModalFooterComponent = __decorate([
+    CSSComponent('modal__footer')
+], ModalFooterComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'odx-modal-footer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+        }] });
+
 let ModalHeaderComponent = class ModalHeaderComponent {
     constructor() {
         this.modalRef = injectModalRef();
@@ -168,20 +187,75 @@ let ModalHeaderComponent = class ModalHeaderComponent {
         }
     }
 };
-ModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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\"></ng-content>\n<odx-action-group class=\"odx-modal__dismiss\" *ngIf=\"modalRef.options.dismissable\">\n  <button odxButton odxModalDismiss>\n    <odx-icon name=\"close\"></odx-icon>\n  </button>\n</odx-action-group>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "directive", type: ModalDismissDirective, selector: "[odxModalDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+ModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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\"></ng-content>\n<odx-action-group class=\"odx-modal__dismiss\" *ngIf=\"modalRef.options.dismissable\">\n  <button odxButton odxModalDismiss>\n    <odx-icon name=\"close\" iconSet=\"core\"></odx-icon>\n  </button>\n</odx-action-group>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "directive", type: ModalDismissDirective, selector: "[odxModalDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 ModalHeaderComponent = __decorate([
     CSSComponent('modal__header'),
     __metadata("design:paramtypes", [])
 ], ModalHeaderComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", 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\"></ng-content>\n<odx-action-group class=\"odx-modal__dismiss\" *ngIf=\"modalRef.options.dismissable\">\n  <button odxButton odxModalDismiss>\n    <odx-icon name=\"close\"></odx-icon>\n  </button>\n</odx-action-group>\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\"></ng-content>\n<odx-action-group class=\"odx-modal__dismiss\" *ngIf=\"modalRef.options.dismissable\">\n  <button odxButton odxModalDismiss>\n    <odx-icon name=\"close\" iconSet=\"core\"></odx-icon>\n  </button>\n</odx-action-group>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { areaHeaderComponent: [{
                 type: ContentChild,
                 args: [AreaHeaderComponent]
             }] } });
 
+let ModalHeroComponent = class ModalHeroComponent {
+    constructor() {
+        this.element = injectElement();
+        this.modalRef = injectModalRef();
+        detectControllerChanges(this.modalRef).subscribe();
+    }
+};
+ModalHeroComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ModalHeroComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ModalHeroComponent, isStandalone: true, selector: "odx-modal-hero", inputs: { icon: "icon", variant: "variant" }, ngImport: i0, template: "<odx-icon class=\"odx-modal-hero__icon\" [name]=\"icon\" iconSet=\"core\" size=\"xlarge\" *ngIf=\"icon\"> </odx-icon>\n\n<div class=\"odx-modal-hero__title odx-title-4\">\n  <ng-content></ng-content>\n</div>\n\n<odx-action-group class=\"odx-modal-hero__dismiss\" *ngIf=\"modalRef.options.dismissable\">\n  <button odxButton odxModalDismiss>\n    <odx-icon name=\"close\" iconSet=\"core\"></odx-icon>\n  </button>\n</odx-action-group>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "directive", type: ModalDismissDirective, selector: "[odxModalDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], ModalHeroComponent.prototype, "variant", void 0);
+ModalHeroComponent = __decorate([
+    CSSComponent('modal-hero'),
+    __metadata("design:paramtypes", [])
+], ModalHeroComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", 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: "<odx-icon class=\"odx-modal-hero__icon\" [name]=\"icon\" iconSet=\"core\" size=\"xlarge\" *ngIf=\"icon\"> </odx-icon>\n\n<div class=\"odx-modal-hero__title odx-title-4\">\n  <ng-content></ng-content>\n</div>\n\n<odx-action-group class=\"odx-modal-hero__dismiss\" *ngIf=\"modalRef.options.dismissable\">\n  <button odxButton odxModalDismiss>\n    <odx-icon name=\"close\" iconSet=\"core\"></odx-icon>\n  </button>\n</odx-action-group>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }] } });
+
+class BasicModalComponent {
+    constructor() {
+        this.injector = getInjector();
+        this.modalRef = injectModalRef();
+    }
+    get data() {
+        return this.modalRef.data;
+    }
+    trackByIndex(index) {
+        return index;
+    }
+}
+BasicModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BasicModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BasicModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: BasicModalComponent, isStandalone: true, selector: "odx-basic-modal", ngImport: i0, template: "<odx-modal-hero [icon]=\"icon\" [variant]=\"data.heroVariant\" *ngIf=\"data.heroIcon as icon; else modalHeader\">\n  <ng-template [odxDynamicView]=\"data.title\"></ng-template>\n</odx-modal-hero>\n\n<odx-modal-content>\n  <ng-template [odxDynamicView]=\"data.content\" [odxDynamicViewInjector]=\"injector\"></ng-template>\n</odx-modal-content>\n\n<odx-modal-footer>\n  <button odxButton [variant]=\"action.variant\" [odxModalClose]=\"action.data\" *ngFor=\"let action of data.actions; let i = index; trackBy: trackByIndex\">\n    {{ action.label }}\n  </button>\n</odx-modal-footer>\n\n<ng-template #modalHeader>\n  <odx-modal-header>\n    <odx-area-header>\n      <ng-template [odxDynamicView]=\"data.title\"></ng-template>\n    </odx-area-header>\n  </odx-modal-header>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: "15.2.8", ngImport: i0, type: BasicModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'odx-basic-modal', standalone: true, imports: [
+                        CoreModule,
+                        DynamicViewDirective,
+                        ButtonComponent,
+                        AreaHeaderComponent,
+                        ModalHeaderComponent,
+                        ModalHeroComponent,
+                        ModalFooterComponent,
+                        ModalContentDirective,
+                        ModalCloseDirective,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<odx-modal-hero [icon]=\"icon\" [variant]=\"data.heroVariant\" *ngIf=\"data.heroIcon as icon; else modalHeader\">\n  <ng-template [odxDynamicView]=\"data.title\"></ng-template>\n</odx-modal-hero>\n\n<odx-modal-content>\n  <ng-template [odxDynamicView]=\"data.content\" [odxDynamicViewInjector]=\"injector\"></ng-template>\n</odx-modal-content>\n\n<odx-modal-footer>\n  <button odxButton [variant]=\"action.variant\" [odxModalClose]=\"action.data\" *ngFor=\"let action of data.actions; let i = index; trackBy: trackByIndex\">\n    {{ action.label }}\n  </button>\n</odx-modal-footer>\n\n<ng-template #modalHeader>\n  <odx-modal-header>\n    <odx-area-header>\n      <ng-template [odxDynamicView]=\"data.title\"></ng-template>\n    </odx-area-header>\n  </odx-modal-header>\n</ng-template>\n" }]
+        }] });
+
 let ModalComponent = class ModalComponent {
     constructor() {
         this.modalRef = injectModalRef();
@@ -190,18 +264,24 @@ let ModalComponent = class ModalComponent {
         this.element = injectElement();
         this.size = this.modalRef.options.size;
         this.variant = this.modalRef.options.variant;
+        this.withComponent = false;
         detectControllerChanges(this.modalRef).subscribe(() => {
             this.size = this.modalRef.options.size;
         });
     }
+    ngOnChanges(changes) {
+        if (hasChanged(changes, 'content', false)) {
+            this.withComponent = !isTemplateRef(this.content);
+        }
+    }
     onClose() {
         if (this.modalRef.options.dismissable) {
             this.modalRef.dismiss();
         }
     }
 };
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ModalComponent, isStandalone: true, selector: "odx-modal", inputs: { content: "content" }, host: { listeners: { "keyup.esc": "onClose()" }, properties: { "@hostAnimation": "variant", "attr.id": "modalRef.options.id" } }, ngImport: i0, template: "<div\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [odxClickOutsideActive]=\"modalRef.options.dismissable\"\n  [attr.aria-labelledby]=\"modalRef.modalTitleId\"\n  class=\"odx-modal__container\"\n  role=\"dialog\"\n  (odxClickOutside)=\"modalRef.dismiss()\"\n>\n  <ng-template [odxDynamicView]=\"content\" [odxDynamicViewContext]=\"context\" [odxDynamicViewInjector]=\"injector\"></ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[odxClickOutside]", inputs: ["odxClickOutsideActive"], outputs: ["odxClickOutside"] }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }], animations: [
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ModalComponent, isStandalone: true, selector: "odx-modal", inputs: { content: "content" }, host: { listeners: { "keyup.esc": "onClose()" }, properties: { "@hostAnimation": "variant", "attr.id": "modalRef.options.id" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  [cdkTrapFocus]=\"modalRef.isActive()\"\n  [cdkTrapFocusAutoCapture]=\"modalRef.isActive()\"\n  [odxClickOutsideActive]=\"modalRef.options.dismissable && modalRef.options.interactiveBackdrop\"\n  [attr.aria-labelledby]=\"modalRef.modalTitleId\"\n  class=\"odx-modal__container\"\n  role=\"dialog\"\n  (odxClickOutside)=\"modalRef.dismiss()\"\n>\n  <ng-template [odxDynamicView]=\"content\" [odxDynamicViewContext]=\"withComponent ? {} : context\" [odxDynamicViewInjector]=\"injector\"></ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.ClickOutsideDirective, selector: "[odxClickOutside]", inputs: ["odxClickOutsideActive"], outputs: ["odxClickOutside"] }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }], animations: [
         trigger('hostAnimation', [
             transition('void => default', group([useAnimation(fadeIn()), query('.odx-modal__container', useAnimation(slideInY('8px')))])),
             transition('default => void', group([useAnimation(fadeOut()), query('.odx-modal__container', useAnimation(slideOutY('8px')))])),
@@ -217,11 +297,15 @@ __decorate([
     CSSModifier(),
     __metadata("design:type", Object)
 ], ModalComponent.prototype, "variant", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], ModalComponent.prototype, "withComponent", void 0);
 ModalComponent = __decorate([
     CSSComponent('modal'),
     __metadata("design:paramtypes", [])
 ], ModalComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'odx-modal', imports: [A11yModule, ActionGroupComponent, ButtonComponent, IconComponent, CoreModule, DynamicViewDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[@hostAnimation]': 'variant',
@@ -233,104 +317,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             transition('void => sidesheet', query('.odx-modal__container', useAnimation(slideInRight))),
                             transition('sidesheet => void', query('.odx-modal__container', useAnimation(slideOutRight))),
                         ]),
-                    ], template: "<div\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [odxClickOutsideActive]=\"modalRef.options.dismissable\"\n  [attr.aria-labelledby]=\"modalRef.modalTitleId\"\n  class=\"odx-modal__container\"\n  role=\"dialog\"\n  (odxClickOutside)=\"modalRef.dismiss()\"\n>\n  <ng-template [odxDynamicView]=\"content\" [odxDynamicViewContext]=\"context\" [odxDynamicViewInjector]=\"injector\"></ng-template>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { size: [], variant: [], content: [{
+                    ], template: "<div\n  [cdkTrapFocus]=\"modalRef.isActive()\"\n  [cdkTrapFocusAutoCapture]=\"modalRef.isActive()\"\n  [odxClickOutsideActive]=\"modalRef.options.dismissable && modalRef.options.interactiveBackdrop\"\n  [attr.aria-labelledby]=\"modalRef.modalTitleId\"\n  class=\"odx-modal__container\"\n  role=\"dialog\"\n  (odxClickOutside)=\"modalRef.dismiss()\"\n>\n  <ng-template [odxDynamicView]=\"content\" [odxDynamicViewContext]=\"withComponent ? {} : context\" [odxDynamicViewInjector]=\"injector\"></ng-template>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { size: [], variant: [], withComponent: [], content: [{
                 type: Input
             }], onClose: [{
                 type: HostListener,
                 args: ['keyup.esc']
             }] } });
 
-const { ModalDefaultModuleConfig, ModalModuleConfig, injectModalModuleConfig } = createModuleConfigTokens('Modal', '@odx/angular/components/modal', {
+const { ModalDefaultConfig, ModalConfig, injectModalConfig, provideModalConfig } = createConfigTokens('Modal', '@odx/angular/components/modal', {
     dismissable: true,
     size: ModalSize.MEDIUM,
     dismissOnNavigation: true,
+    interactiveBackdrop: true,
     variant: ModalVariant.DEFAULT,
 });
 
-class OpenModalManagerService {
-    constructor() {
-        this.location = inject(Location);
-        this.modals$$ = new BehaviorSubject([]);
-        this.modals$ = this.modals$$.pipe(shareReplay({ refCount: true }));
-    }
-    getById(id) {
-        return this.modals$$.getValue().find((modalRef) => modalRef.options.id === id) ?? null;
-    }
-    add(modalRef) {
-        if (this.getById(modalRef.options.id)) {
-            throw Error(`Modal with ID ${modalRef.options.id} already open`);
-        }
-        const openModals = [...this.modals$$.getValue(), modalRef];
-        this.modals$$.next(openModals);
-        if (modalRef.options.dismissOnNavigation) {
-            this.urlChangeListener = this.location.onUrlChange(() => modalRef.dismiss());
-        }
-    }
-    remove(modalRef) {
-        const openModals = this.modals$$.getValue().filter(({ options: { id } }) => id !== modalRef.options.id);
-        this.modals$$.next(openModals);
-        this.urlChangeListener?.();
-        this.urlChangeListener = undefined;
-    }
-    dismissAll() {
-        for (const modalRef of this.modals$$.getValue()) {
-            modalRef.dismiss();
-        }
-    }
-}
-OpenModalManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OpenModalManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-OpenModalManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OpenModalManagerService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OpenModalManagerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 class ModalService {
-    constructor() {
+    constructor(location) {
+        this.config = injectModalConfig();
+        this.openModals = new Queue();
         this.injector = getInjector();
-        this.moduleConfig = injectModalModuleConfig();
-        this.openModalManager = inject(OpenModalManagerService);
         this.dynamicViewService = inject(DynamicViewService);
-        this.openModals$ = this.openModalManager.modals$;
+        this.openModals$ = this.openModals.value$;
+        location.onUrlChange(() => {
+            for (const modalRef of this.openModals.toArray()) {
+                if (modalRef.options.dismissOnNavigation) {
+                    modalRef.destroy();
+                }
+            }
+        });
     }
     dismissAll() {
-        this.openModalManager.dismissAll();
+        for (const modalRef of this.openModals.toArray()) {
+            modalRef.dismiss();
+        }
     }
     getModalById(id) {
-        return this.openModalManager.getById(id);
+        return this.openModals.get(id);
+    }
+    create(modal, options) {
+        return this.open(BasicModalComponent, {
+            data: modal,
+            size: ModalSize.SMALL,
+            ...options,
+        });
     }
     open(content, options) {
-        const mergedOptions = deepmerge(this.moduleConfig, { id: `odx-modal-${ModalService.ID++}` }, options ?? {});
-        const modalRef = new ModalRef(mergedOptions);
-        this.openModalManager.add(modalRef);
+        const mergedOptions = deepmerge(this.config, { id: `odx-modal-${ModalService.ID++}` }, options ?? {});
+        if (this.getModalById(mergedOptions.id)) {
+            throw Error(`Modal with ID ${mergedOptions.id} already open`);
+        }
+        const modalRef = new ModalRef(mergedOptions, (ref) => this.openModals.isFirst(ref));
         this.attachModal(modalRef, content);
+        this.openModals.add(modalRef);
         return modalRef;
     }
     attachModal(modalRef, content) {
-        const injector = Injector.create({
-            providers: [provideModalRef(modalRef)],
-            parent: this.injector,
-        });
         const viewRef = this.dynamicViewService.createView(ModalComponent, {
             context: { content },
-            injector,
+            injector: Injector.create({
+                providers: [provideModalRef(modalRef)],
+                parent: this.injector,
+            }),
             host: modalRef.options.host,
         });
         const onDestroy = () => {
             viewRef.destroy();
-            this.openModalManager.remove(modalRef);
+            deferFn(() => this.openModals.remove(modalRef));
         };
-        modalRef.onDestroy$.pipe(finalize(() => onDestroy())).subscribe();
+        modalRef.onDestroy$.pipe(finalize(onDestroy)).subscribe();
     }
 }
 ModalService.ID = 0;
-ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalService, decorators: [{
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalService, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.Location }]; } });
 
 class ModalDirective {
     constructor() {
@@ -359,9 +424,9 @@ class ModalDirective {
         this.modalRef?.dismiss();
     }
 }
-ModalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ModalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", 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: "14.2.12", ngImport: i0, type: ModalDirective, decorators: [{
+ModalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ModalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", 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: "15.2.8", ngImport: i0, type: ModalDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -379,19 +444,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['odxModalDismiss']
             }] } });
 
-const modules = [ModalComponent, ModalHeaderComponent, ModalFooterComponent, ModalDirective, ModalCloseDirective, ModalContentDirective, ModalDismissDirective];
+const modules = [
+    ModalComponent,
+    ModalHeaderComponent,
+    ModalHeroComponent,
+    ModalFooterComponent,
+    ModalDirective,
+    ModalCloseDirective,
+    ModalContentDirective,
+    ModalDismissDirective,
+];
 class ModalModule {
-    static forRoot(config) {
-        return {
-            ngModule: ModalModule,
-            providers: [provideModuleConfig(ModalModuleConfig, config)],
-        };
-    }
 }
-ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, imports: [ButtonComponent, ButtonGroupComponent, ModalComponent, ModalHeaderComponent, ModalFooterComponent, ModalDirective, ModalCloseDirective, ModalContentDirective, ModalDismissDirective], exports: [CoreModule, AreaHeaderModule, ButtonComponent, ButtonGroupComponent, ModalComponent, ModalHeaderComponent, ModalFooterComponent, ModalDirective, ModalCloseDirective, ModalContentDirective, ModalDismissDirective] });
-ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, imports: [ButtonComponent, ButtonGroupComponent, ModalComponent, ModalHeaderComponent, ModalFooterComponent, CoreModule, AreaHeaderModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, decorators: [{
+ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: ModalModule, imports: [ButtonComponent, ButtonGroupComponent, ModalComponent,
+        ModalHeaderComponent,
+        ModalHeroComponent,
+        ModalFooterComponent,
+        ModalDirective,
+        ModalCloseDirective,
+        ModalContentDirective,
+        ModalDismissDirective], exports: [CoreModule, AreaHeaderModule, ButtonComponent, ButtonGroupComponent, ModalComponent,
+        ModalHeaderComponent,
+        ModalHeroComponent,
+        ModalFooterComponent,
+        ModalDirective,
+        ModalCloseDirective,
+        ModalContentDirective,
+        ModalDismissDirective] });
+ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalModule, imports: [ButtonComponent, ButtonGroupComponent, ModalComponent,
+        ModalHeaderComponent,
+        ModalHeroComponent,
+        ModalFooterComponent, CoreModule, AreaHeaderModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ButtonComponent, ButtonGroupComponent, ...modules],
@@ -403,5 +488,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ModalCloseDirective, ModalComponent, ModalContentDirective, ModalDefaultModuleConfig, ModalDirective, ModalDismissDirective, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalModuleConfig, ModalRef, ModalService, ModalSize, ModalVariant, OpenModalManagerService, injectModalModuleConfig };
+export { BasicModalComponent, ModalCloseDirective, ModalComponent, ModalConfig, ModalContentDirective, ModalDefaultConfig, ModalDirective, ModalDismissDirective, ModalFooterComponent, ModalHeaderComponent, ModalHeroComponent, ModalHeroVariant, ModalModule, ModalRef, ModalService, ModalSize, ModalVariant, injectModalConfig, injectModalRef, provideModalConfig, provideModalRef };
 //# sourceMappingURL=odx-angular-components-modal.mjs.map