@impartner/design-components 1.0.3 → 1.0.4

package/fesm2020/impartner-design-components.mjs

@@ -3560,13 +3560,17 @@ class ModalComponent {
          * Event emitted when the Modal content is accepted.
          */
         this.accept = new EventEmitter();
-        this._interactableId = this._interactionService.add(this);
     }
     /**
      * Determines if the Modal should be shown immediately.
      */
     set show(show) {
-        this._show = show;
+        if (show) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
     }
     get interactableId() {
         return this._interactableId;
@@ -3590,6 +3594,7 @@ class ModalComponent {
         return !this.titleText && !this.dismissable;
     }
     ngOnInit() {
+        this._interactableId = this._interactionService.add(this);
         if (this.dismissable === undefined && this.theme === ModalTheme.Working) {
             this.dismissable = true;
         }
@@ -3606,35 +3611,38 @@ class ModalComponent {
             !!this.dismissEl?.nativeElement?.firstChild?.disabled) {
             return;
         }
-        this._show = false;
+        this.close();
         this.dismiss.emit(event);
     }
     handleDeny(event) {
         if (!!this.denyEl?.nativeElement?.firstChild?.disabled) {
             return;
         }
-        this._show = false;
+        this.close();
         this.deny.emit(event);
     }
     handleAccept(event) {
-        console.log('this.acceptEl', this.acceptEl);
         if (!!this.acceptEl?.nativeElement?.firstChild?.disabled) {
             return;
         }
-        this._show = false;
+        this.close();
         this.accept.emit(event);
     }
     /**
-     * Opens/shows the modal programmatically.
+     * Opens/shows the modal. Can be used programmatically.
      */
     open() {
+        if (this.backdrop) {
+            this._interactionService.queueBackdrop(this.interactableId);
+        }
         this._show = true;
     }
     /**
-     * Closes/hides the modal programmatically.
+     * Closes/hides the modal. Can be used programmatically.
      */
     close() {
         this._show = false;
+        this._interactionService.dequeueBackdrop(this.interactableId);
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
@@ -3868,7 +3876,6 @@ class DropdownComponent {
          */
         this.buttonClick = new EventEmitter();
         this.classBtnGroup = true;
-        this._interactableId = this._interactionService.add(this);
     }
     get classDropdown() {
         return this.position === 'down';
@@ -3899,6 +3906,9 @@ class DropdownComponent {
     get shown() {
         return this.valid && this.show;
     }
+    ngOnInit() {
+        this._interactableId = this._interactionService.add(this);
+    }
     ngOnDestroy() {
         this._interactionService.remove(this.interactableId);
         this._interactableId = 0;
@@ -8390,9 +8400,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 class InteractionService {
     constructor() {
         this._interactables = [];
+        this._backdropQueue = [];
     }
     get showBackdrop() {
-        return this._interactables.some(i => i instanceof ModalComponent && i.shown && i.backdrop);
+        return this._backdropQueue.length > 0;
     }
     registerBackdrop(modalBackdrop) {
         // WARNING: there should only be 1 backdrop component, preferably loaded in the body
@@ -8414,8 +8425,12 @@ class InteractionService {
         }
     }
     add(interactable) {
-        if (interactable.interactableId > 0) {
-            return interactable.interactableId;
+        const interactableId = interactable.interactableId;
+        if (interactableId > 0) {
+            if (!this._interactables.some(i => i.interactableId === interactableId)) {
+                this._interactables.push(interactable);
+            }
+            return interactableId;
         }
         this._interactables.push(interactable);
         return this._interactables.length;
@@ -8425,6 +8440,7 @@ class InteractionService {
             return;
         }
         this._interactables.splice(interactableId - 1, 1);
+        this.dequeueBackdrop(interactableId);
     }
     toggle(interactable) {
         if (interactable.interactableId <= 0 || interactable.show) {
@@ -8438,6 +8454,17 @@ class InteractionService {
         }
         return true;
     }
+    queueBackdrop(interactableId) {
+        if (!this._backdropQueue.includes(interactableId)) {
+            this._backdropQueue.push(interactableId);
+        }
+    }
+    dequeueBackdrop(interactableId) {
+        const interactableIdIndex = this._backdropQueue.indexOf(interactableId);
+        if (interactableIdIndex !== -1) {
+            this._backdropQueue.splice(interactableIdIndex, 1);
+        }
+    }
 }
 InteractionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 InteractionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InteractionService, providedIn: 'root' });