@impartner/design-components 1.0.3 → 1.0.5

package/fesm2015/impartner-design-components.mjs

@@ -3561,13 +3561,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;
@@ -3591,6 +3595,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;
         }
@@ -3608,7 +3613,7 @@ class ModalComponent {
             !!((_c = (_b = (_a = this.dismissEl) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.firstChild) === null || _c === void 0 ? void 0 : _c.disabled)) {
             return;
         }
-        this._show = false;
+        this.close();
         this.dismiss.emit(event);
     }
     handleDeny(event) {
@@ -3616,29 +3621,32 @@ class ModalComponent {
         if (!!((_c = (_b = (_a = this.denyEl) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.firstChild) === null || _c === void 0 ? void 0 : _c.disabled)) {
             return;
         }
-        this._show = false;
+        this.close();
         this.deny.emit(event);
     }
     handleAccept(event) {
         var _a, _b, _c;
-        console.log('this.acceptEl', this.acceptEl);
         if (!!((_c = (_b = (_a = this.acceptEl) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.firstChild) === null || _c === void 0 ? void 0 : _c.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 });
@@ -3872,7 +3880,6 @@ class DropdownComponent {
          */
         this.buttonClick = new EventEmitter();
         this.classBtnGroup = true;
-        this._interactableId = this._interactionService.add(this);
     }
     get classDropdown() {
         return this.position === 'down';
@@ -3903,6 +3910,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;
@@ -7606,22 +7616,24 @@ class PaginationComponent {
         return Math.ceil(this.total / this.perPage);
     }
     get firstPageResult() {
-        if (this.total < 1 || this.page < 1 || this.perPage < 1) {
+        const page = this._getPageClamped();
+        if (this.total < 1 || page < 1 || this.perPage < 1) {
             return 0;
         }
-        if (this.page === 1) {
+        if (page === 1) {
             return 1;
         }
-        if (this.page > Math.ceil(this.total / this.perPage)) {
+        if (page > Math.ceil(this.total / this.perPage)) {
             return this.total;
         }
-        return (this.page - 1) * this.perPage + 1;
+        return (page - 1) * this.perPage + 1;
     }
     get lastPageResult() {
-        if (this.total <= 0 || this.page < 1 || this.perPage < 1) {
+        const page = this._getPageClamped();
+        if (this.total <= 0 || page < 1 || this.perPage < 1) {
             return 0;
         }
-        if (this.page === 1) {
+        if (page === 1) {
             if (this.total < this.perPage) {
                 return this.total;
             }
@@ -7629,26 +7641,38 @@ class PaginationComponent {
                 return this.perPage;
             }
         }
-        if (this.total < this.perPage * this.page) {
+        if (this.total < this.perPage * page) {
             return this.total;
         }
         else {
-            return this.perPage * this.page;
+            return this.perPage * page;
+        }
+    }
+    _getPageClamped(page) {
+        page = Number(page || this.page || 0);
+        if (isNaN(page) || page < 1) {
+            return 1;
         }
+        if (page > this.totalPages) {
+            return this.totalPages;
+        }
+        return page;
     }
     goToPreviousPage() {
-        if (this.page <= 1) {
+        const page = this._getPageClamped();
+        if (page <= 1) {
             return;
         }
-        const previousPage = this.page - 1;
+        const previousPage = page - 1;
         this.page = previousPage;
         this.goToPage.emit(previousPage);
     }
     goToNextPage() {
-        if (this.page >= this.totalPages) {
+        const page = this._getPageClamped();
+        if (page >= this.totalPages) {
             return;
         }
-        const nextPage = this.page + 1;
+        const nextPage = page + 1;
         this.page = nextPage;
         this.goToPage.emit(nextPage);
     }
@@ -7656,25 +7680,20 @@ class PaginationComponent {
         this.goToExactPage(target === null || target === void 0 ? void 0 : target.value);
     }
     goToExactPage(page) {
-        if (!page) {
-            return;
-        }
-        let allowedPageNumber = Number(page);
-        if (allowedPageNumber < 0) {
-            allowedPageNumber = 1;
-        }
-        if (allowedPageNumber > this.totalPages) {
-            allowedPageNumber = this.totalPages;
-        }
-        this.page = allowedPageNumber;
-        this.goToPage.emit(allowedPageNumber);
+        this.page = this._getPageClamped(page);
+        this.goToPage.emit(this.page);
+    }
+    preventDefaultAndBlur(event) {
+        // prevents PRM form submit
+        event.preventDefault();
+        event.target.blur();
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PaginationComponent, selector: "impdc-pagination, div[impdc-pagination]", inputs: { page: "page", perPage: "perPage", total: "total", summary: "summary" }, outputs: { goToPage: "goToPage" }, ngImport: i0, template: "<div class=\"pagination-container\">\n  <div class=\"mobile-pagination\">\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPreviousPage()\">\n      <i class=\"fas fa-chevron-left\"></i>\n    </button>\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page === totalPages\"\n      (click)=\"goToNextPage()\">\n      <i class=\"fas fa-chevron-right\"></i>\n    </button>\n  </div>\n\n  <div class=\"desktop-pagination\">\n    <div>\n      <span class=\"summary\" [innerHTML]=\"summary\"></span>\n    </div>\n    <div class=\"pagination-actions\">\n      <button\n        impdcButton\n        theme=\"secondary\"\n        aria-label=\"First Page\"\n        class=\"pagination-first-last-btns\"\n        (click)=\"goToExactPage(1)\"\n        [disabled]=\"page <= 1\">\n        <i class=\"fas fa-chevron-left first\"></i>\n        <i class=\"fas fa-chevron-left\"></i>\n        <!-- 1 -->\n      </button>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        class=\"previous\"\n        aria-label=\"Previous\"\n        (click)=\"goToPreviousPage()\"\n        [disabled]=\"page <= 1\">\n        <i class=\"fas fa-chevron-left\"></i>\n      </button>\n      <div class=\"page-change\">\n        <input\n          impdcInput\n          maxlength=\"4\"\n          [value]=\"page\"\n          (blur)=\"goToExactPageFromEvent($event)\" />\n        <span class=\"total-pages\"> / {{ totalPages }} </span>\n      </div>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        aria-label=\"Next\"\n        (click)=\"goToNextPage()\"\n        [disabled]=\"page === totalPages\">\n        <i class=\"fas fa-chevron-right\"></i>\n      </button>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        class=\"pagination-first-last-btns\"\n        aria-label=\"Last Page\"\n        (click)=\"goToExactPage(totalPages)\"\n        [disabled]=\"page === totalPages\">\n        <i class=\"fas fa-chevron-right\"></i>\n        <i class=\"fas fa-chevron-right last\"></i>\n        <!-- {{ totalPages }} -->\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-6);gap:1rem;color:var(--impd-color-gray-700, #374151)}@media (min-width: 640px){.pagination-container{padding-left:var(--impd-size-6);padding-right:var(--impd-size-6)}}.mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}@media (min-width: 640px){.mobile-pagination{display:none}}.desktop-pagination{display:none}@media (min-width: 640px){.desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}}.summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-actions .first{margin-right:-1.2rem}.pagination-actions .last{margin-left:-1.2rem}.page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.page-change .total-pages{padding:0 1.2rem}.pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PaginationComponent, selector: "impdc-pagination, div[impdc-pagination]", inputs: { page: "page", perPage: "perPage", total: "total", summary: "summary" }, outputs: { goToPage: "goToPage" }, ngImport: i0, template: "<div class=\"pagination-container\">\n  <div class=\"mobile-pagination\">\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPreviousPage()\">\n      <i class=\"fas fa-chevron-left\"></i>\n    </button>\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page === totalPages\"\n      (click)=\"goToNextPage()\">\n      <i class=\"fas fa-chevron-right\"></i>\n    </button>\n  </div>\n\n  <div class=\"desktop-pagination\">\n    <div>\n      <span class=\"summary\" [innerHTML]=\"summary\"></span>\n    </div>\n    <div class=\"pagination-actions\">\n      <button\n        impdcButton\n        theme=\"secondary\"\n        aria-label=\"First Page\"\n        class=\"pagination-first-last-btns\"\n        (click)=\"goToExactPage(1)\"\n        [disabled]=\"page <= 1\">\n        <i class=\"fas fa-chevron-left first\"></i>\n        <i class=\"fas fa-chevron-left\"></i>\n        <!-- 1 -->\n      </button>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        class=\"previous\"\n        aria-label=\"Previous\"\n        (click)=\"goToPreviousPage()\"\n        [disabled]=\"page <= 1\">\n        <i class=\"fas fa-chevron-left\"></i>\n      </button>\n      <div class=\"page-change\">\n        <input\n          impdcInput\n          [(ngModel)]=\"page\"\n          maxlength=\"4\"\n          (blur)=\"goToExactPageFromEvent($event)\"\n          (keydown.enter)=\"preventDefaultAndBlur($event)\" />\n        <span class=\"total-pages\"> / {{ totalPages }} </span>\n      </div>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        aria-label=\"Next\"\n        (click)=\"goToNextPage()\"\n        [disabled]=\"page >= totalPages\">\n        <i class=\"fas fa-chevron-right\"></i>\n      </button>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        class=\"pagination-first-last-btns\"\n        aria-label=\"Last Page\"\n        (click)=\"goToExactPage(totalPages)\"\n        [disabled]=\"page === totalPages\">\n        <i class=\"fas fa-chevron-right\"></i>\n        <i class=\"fas fa-chevron-right last\"></i>\n        <!-- {{ totalPages }} -->\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-6);gap:1rem;color:var(--impd-color-gray-700, #374151)}@media (min-width: 640px){.pagination-container{padding-left:var(--impd-size-6);padding-right:var(--impd-size-6)}}.mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}@media (min-width: 640px){.mobile-pagination{display:none}}.desktop-pagination{display:none}@media (min-width: 640px){.desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}}.summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-actions .first{margin-right:-1.2rem}.pagination-actions .last{margin-left:-1.2rem}.page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.page-change .total-pages{padding:0 1.2rem}.pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-pagination, div[impdc-pagination]', template: "<div class=\"pagination-container\">\n  <div class=\"mobile-pagination\">\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPreviousPage()\">\n      <i class=\"fas fa-chevron-left\"></i>\n    </button>\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page === totalPages\"\n      (click)=\"goToNextPage()\">\n      <i class=\"fas fa-chevron-right\"></i>\n    </button>\n  </div>\n\n  <div class=\"desktop-pagination\">\n    <div>\n      <span class=\"summary\" [innerHTML]=\"summary\"></span>\n    </div>\n    <div class=\"pagination-actions\">\n      <button\n        impdcButton\n        theme=\"secondary\"\n        aria-label=\"First Page\"\n        class=\"pagination-first-last-btns\"\n        (click)=\"goToExactPage(1)\"\n        [disabled]=\"page <= 1\">\n        <i class=\"fas fa-chevron-left first\"></i>\n        <i class=\"fas fa-chevron-left\"></i>\n        <!-- 1 -->\n      </button>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        class=\"previous\"\n        aria-label=\"Previous\"\n        (click)=\"goToPreviousPage()\"\n        [disabled]=\"page <= 1\">\n        <i class=\"fas fa-chevron-left\"></i>\n      </button>\n      <div class=\"page-change\">\n        <input\n          impdcInput\n          maxlength=\"4\"\n          [value]=\"page\"\n          (blur)=\"goToExactPageFromEvent($event)\" />\n        <span class=\"total-pages\"> / {{ totalPages }} </span>\n      </div>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        aria-label=\"Next\"\n        (click)=\"goToNextPage()\"\n        [disabled]=\"page === totalPages\">\n        <i class=\"fas fa-chevron-right\"></i>\n      </button>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        class=\"pagination-first-last-btns\"\n        aria-label=\"Last Page\"\n        (click)=\"goToExactPage(totalPages)\"\n        [disabled]=\"page === totalPages\">\n        <i class=\"fas fa-chevron-right\"></i>\n        <i class=\"fas fa-chevron-right last\"></i>\n        <!-- {{ totalPages }} -->\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-6);gap:1rem;color:var(--impd-color-gray-700, #374151)}@media (min-width: 640px){.pagination-container{padding-left:var(--impd-size-6);padding-right:var(--impd-size-6)}}.mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}@media (min-width: 640px){.mobile-pagination{display:none}}.desktop-pagination{display:none}@media (min-width: 640px){.desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}}.summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-actions .first{margin-right:-1.2rem}.pagination-actions .last{margin-left:-1.2rem}.page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.page-change .total-pages{padding:0 1.2rem}.pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"] }]
+            args: [{ selector: 'impdc-pagination, div[impdc-pagination]', template: "<div class=\"pagination-container\">\n  <div class=\"mobile-pagination\">\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPreviousPage()\">\n      <i class=\"fas fa-chevron-left\"></i>\n    </button>\n    <button\n      impdcButton\n      theme=\"secondary\"\n      [disabled]=\"page === totalPages\"\n      (click)=\"goToNextPage()\">\n      <i class=\"fas fa-chevron-right\"></i>\n    </button>\n  </div>\n\n  <div class=\"desktop-pagination\">\n    <div>\n      <span class=\"summary\" [innerHTML]=\"summary\"></span>\n    </div>\n    <div class=\"pagination-actions\">\n      <button\n        impdcButton\n        theme=\"secondary\"\n        aria-label=\"First Page\"\n        class=\"pagination-first-last-btns\"\n        (click)=\"goToExactPage(1)\"\n        [disabled]=\"page <= 1\">\n        <i class=\"fas fa-chevron-left first\"></i>\n        <i class=\"fas fa-chevron-left\"></i>\n        <!-- 1 -->\n      </button>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        class=\"previous\"\n        aria-label=\"Previous\"\n        (click)=\"goToPreviousPage()\"\n        [disabled]=\"page <= 1\">\n        <i class=\"fas fa-chevron-left\"></i>\n      </button>\n      <div class=\"page-change\">\n        <input\n          impdcInput\n          [(ngModel)]=\"page\"\n          maxlength=\"4\"\n          (blur)=\"goToExactPageFromEvent($event)\"\n          (keydown.enter)=\"preventDefaultAndBlur($event)\" />\n        <span class=\"total-pages\"> / {{ totalPages }} </span>\n      </div>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        aria-label=\"Next\"\n        (click)=\"goToNextPage()\"\n        [disabled]=\"page >= totalPages\">\n        <i class=\"fas fa-chevron-right\"></i>\n      </button>\n      <button\n        impdcButton\n        theme=\"secondary\"\n        class=\"pagination-first-last-btns\"\n        aria-label=\"Last Page\"\n        (click)=\"goToExactPage(totalPages)\"\n        [disabled]=\"page === totalPages\">\n        <i class=\"fas fa-chevron-right\"></i>\n        <i class=\"fas fa-chevron-right last\"></i>\n        <!-- {{ totalPages }} -->\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-6);gap:1rem;color:var(--impd-color-gray-700, #374151)}@media (min-width: 640px){.pagination-container{padding-left:var(--impd-size-6);padding-right:var(--impd-size-6)}}.mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}@media (min-width: 640px){.mobile-pagination{display:none}}.desktop-pagination{display:none}@media (min-width: 640px){.desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}}.summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-actions .first{margin-right:-1.2rem}.pagination-actions .last{margin-left:-1.2rem}.page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.page-change .total-pages{padding:0 1.2rem}.pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"] }]
         }], propDecorators: { page: [{
                 type: Input
             }], perPage: [{
@@ -7691,12 +7710,12 @@ class PaginationModule {
     constructor() { }
 }
 PaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule, ButtonModule, ImpdcFormsModule], exports: [ButtonModule, ImpdcFormsModule, PaginationComponent] });
-PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule, ButtonModule, ImpdcFormsModule, ButtonModule, ImpdcFormsModule] });
+PaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule], exports: [ButtonModule, ImpdcFormsModule, PaginationComponent] });
+PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule, ButtonModule, ImpdcFormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ButtonModule, ImpdcFormsModule],
+                    imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule],
                     declarations: [PaginationComponent],
                     exports: [ButtonModule, ImpdcFormsModule, PaginationComponent]
                 }]
@@ -8423,9 +8442,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
@@ -8447,8 +8467,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;
@@ -8458,6 +8482,7 @@ class InteractionService {
             return;
         }
         this._interactables.splice(interactableId - 1, 1);
+        this.dequeueBackdrop(interactableId);
     }
     toggle(interactable) {
         if (interactable.interactableId <= 0 || interactable.show) {
@@ -8471,6 +8496,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' });