@neoprototype/neop-ui-lib 1.0.36 → 1.1.1

package/fesm2022/neoprototype-neop-ui-lib.mjs

@@ -1456,14 +1456,59 @@ class NpPaginationComponent {
             this.isDropdownOpenMap[key] = false;
         });
         this.isDropdownOpenMap[type] = true;
-        if (this.triggerRef?.nativeElement) {
-            const rect = this.triggerRef.nativeElement.getBoundingClientRect();
-            this.dropdownStyleMap[type] = {
-                top: `${rect.bottom}px`,
-                left: `${rect.left}px`,
-                width: `${rect.width}px`,
-            };
-        }
+        setTimeout(() => {
+            const triggerEl = this.triggerRef?.nativeElement;
+            const dropdownEl = document.querySelector('.np-dropdown');
+            if (triggerEl && dropdownEl) {
+                const rect = triggerEl.getBoundingClientRect();
+                const dropdownRect = dropdownEl.getBoundingClientRect();
+                let top = rect.bottom;
+                let left = rect.left;
+                const width = rect.width;
+                if (top + dropdownRect.height <= window.innerHeight) {
+                    this.dropdownStyleMap[type] = {
+                        top: `${top}px`,
+                        left: `${left}px`,
+                        width: `${width}px`,
+                    };
+                    return;
+                }
+                const topPos = rect.top - dropdownRect.height;
+                if (topPos >= 0) {
+                    this.dropdownStyleMap[type] = {
+                        top: `${topPos - 10}px`,
+                        left: `${left}px`,
+                        width: `${width}px`,
+                    };
+                    return;
+                }
+                // // doing right
+                // const rightPos = rect.right;
+                // if (rightPos + dropdownRect.width <= window.innerWidth) {
+                //   this.dropdownStyleMap[type] = {
+                //     top: `${rect.top}px`,
+                //     left: `${rightPos}px`,
+                //     width: `${dropdownRect.width}px`,
+                //   };
+                //   return;
+                // }
+                // // doing left
+                // const leftPos = rect.left - dropdownRect.width;
+                // if (leftPos >= 0) {
+                //   this.dropdownStyleMap[type] = {
+                //     top: `${rect.top}px`,
+                //     left: `${leftPos}px`,
+                //     width: `${dropdownRect.width}px`,
+                //   };
+                //   return;
+                // }
+                this.dropdownStyleMap[type] = {
+                    top: `${rect.top - dropdownRect.height}px`,
+                    left: `${rect.left}px`,
+                    width: `${width}px`,
+                };
+            }
+        });
     }
     onSelectPageSize(size) {
         this.isDropdownOpenMap[this.type] = false;
@@ -1519,11 +1564,11 @@ class NpPaginationComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpPaginationComponent, isStandalone: true, selector: "np-pagination", inputs: { type: "type", totalItems: "totalItems", pageSize: "pageSize", isReverse: "isReverse", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions" }, outputs: { pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["dropdownTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'basic'\">\n    <div\n      class=\"flex items-center justify-between gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center justify-between space-x-2 gap-3\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex gap-[1px] mx-0\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'outlined'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div \n        class=\"flex items-center flex-1 space-x-2\"\n        [ngClass]=\"isReverse ? 'justify-end' : ''\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n        </button>\n\n        <div class=\"flex gap-[1px] mx-3\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'text'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n            Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <div class=\"flex gap-3\">\n          <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n          </button>\n\n          <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'simple'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <button\n        (click)=\"prevPage()\"\n        [disabled]=\"pageIndex === 1\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n        </button>\n\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n          Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <button\n        (click)=\"nextPage()\"\n        [disabled]=\"pageIndex === pageTotal\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'full'\"> \n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div \n        class=\"flex items-center w-full flex-1\"\n        [ngClass]=\"isReverse ? 'justify-end' : ''\"\n      >\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\"  class=\"flex items-center\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex\">\n          <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              [ngClass]=\"{\n                'border-y-1 border-s-1': !last,\n                'border-1': last\n              }\"\n              class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n                {{ page }}\n              </np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n                ...\n              </span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpPaginationComponent, isStandalone: true, selector: "np-pagination", inputs: { type: "type", totalItems: "totalItems", pageSize: "pageSize", isReverse: "isReverse", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions" }, outputs: { pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["dropdownTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'basic'\">\n    <div\n      class=\"flex items-center justify-between gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center justify-between space-x-2 gap-3\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex gap-[1px] mx-0\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'outlined'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div \n        class=\"flex items-center flex-1 space-x-2\"\n        [ngClass]=\"isReverse ? 'justify-end' : ''\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n        </button>\n\n        <div class=\"flex gap-[1px] mx-3\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'text'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n            Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <div class=\"flex gap-3\">\n          <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n          </button>\n\n          <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'simple'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <button\n        (click)=\"prevPage()\"\n        [disabled]=\"pageIndex === 1\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n        </button>\n\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n          Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <button\n        (click)=\"nextPage()\"\n        [disabled]=\"pageIndex === pageTotal\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'full'\"> \n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div \n        class=\"flex items-center w-full flex-1\"\n        [ngClass]=\"isReverse ? 'justify-end' : ''\"\n      >\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\"  class=\"flex items-center\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex\">\n          <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              [ngClass]=\"{\n                'border-y-1 border-s-1': !last,\n                'border-1': last\n              }\"\n              class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n                {{ page }}\n              </np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n                ...\n              </span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'basic'\">\n    <div\n      class=\"flex items-center justify-between gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center justify-between space-x-2 gap-3\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex gap-[1px] mx-0\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'outlined'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div \n        class=\"flex items-center flex-1 space-x-2\"\n        [ngClass]=\"isReverse ? 'justify-end' : ''\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n        </button>\n\n        <div class=\"flex gap-[1px] mx-3\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'text'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n            Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <div class=\"flex gap-3\">\n          <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n          </button>\n\n          <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'simple'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <button\n        (click)=\"prevPage()\"\n        [disabled]=\"pageIndex === 1\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n        </button>\n\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n          Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <button\n        (click)=\"nextPage()\"\n        [disabled]=\"pageIndex === pageTotal\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'full'\"> \n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div \n        class=\"flex items-center w-full flex-1\"\n        [ngClass]=\"isReverse ? 'justify-end' : ''\"\n      >\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\"  class=\"flex items-center\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex\">\n          <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              [ngClass]=\"{\n                'border-y-1 border-s-1': !last,\n                'border-1': last\n              }\"\n              class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n                {{ page }}\n              </np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n                ...\n              </span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</ng-container>\n" }]
+            args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'basic'\">\n    <div\n      class=\"flex items-center justify-between gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center justify-between space-x-2 gap-3\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex gap-[1px] mx-0\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'outlined'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div \n        class=\"flex items-center flex-1 space-x-2\"\n        [ngClass]=\"isReverse ? 'justify-end' : ''\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n        </button>\n\n        <div class=\"flex gap-[1px] mx-3\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'text'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n            Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <div class=\"flex gap-3\">\n          <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n          </button>\n\n          <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'simple'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <button\n        (click)=\"prevPage()\"\n        [disabled]=\"pageIndex === 1\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n        </button>\n\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n          Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <button\n        (click)=\"nextPage()\"\n        [disabled]=\"pageIndex === pageTotal\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'full'\"> \n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div \n        class=\"flex items-center w-full flex-1\"\n        [ngClass]=\"isReverse ? 'justify-end' : ''\"\n      >\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\"  class=\"flex items-center\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex\">\n          <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              [ngClass]=\"{\n                'border-y-1 border-s-1': !last,\n                'border-1': last\n              }\"\n              class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n                {{ page }}\n              </np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n                ...\n              </span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</ng-container>\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], totalItems: [{
@@ -2813,7 +2858,7 @@ class NpModalComponent {
         this.cancel.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpModalComponent, isStandalone: true, selector: "np-modal", inputs: { modalButton: "modalButton", modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", modalFooter: "modalFooter", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>\n    <np-button >\n      {{ modalButton }}\n    </np-button>\n  </ng-template>\n</div>\n\n<nz-modal\n  [(nzVisible)]=\"isVisible\"\n  (nzOnCancel)=\"handleCancel()\"\n  (nzOnOk)=\"handleOk()\"\n  [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n  [nzContent]=\"modalContent || ''\"\n  [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n  [nzWidth]=\"modalWidth\"\n  nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i1.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpModalComponent, isStandalone: true, selector: "np-modal", inputs: { modalButton: "modalButton", modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", modalFooter: "modalFooter", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>\n    <np-button>\n      {{ modalButton }}\n    </np-button>\n  </ng-template>\n</div>\n\n<nz-modal\n  [(nzVisible)]=\"isVisible\"\n  (nzOnCancel)=\"handleCancel()\"\n  (nzOnOk)=\"handleOk()\"\n  [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n  [nzContent]=\"modalContent || ''\"\n  [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n  [nzWidth]=\"modalWidth\"\n  nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n  <ng-container\n    *ngTemplateOutlet=\"\n      modalType === 'confirmation' ? contentConfirmation : contentNotification\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container\n    *ngTemplateOutlet=\"\n      modalType === 'confirmation' ? footerConfirmation : footerNotification\n    \"\n  ></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n        *ngIf=\"useIcon\"\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"w-[48px] h-[48px]\"\n      />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{ modalTitle }}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography\n            npType=\"text\"\n            npSize=\"sm\"\n            npWeight=\"regular\"\n            style=\"color: rgba(71, 84, 103, 1)\"\n          >\n            {{ modalDescriptions }}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i\n        class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n        (click)=\"handleCancel()\"\n      ></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{ modalType }}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{ cancelText }}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{ okText }}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full py-2\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{ modalTitle }}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n          <i\n            class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n            (click)=\"handleCancel()\"\n          ></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography\n            npType=\"text\"\n            npSize=\"sm\"\n            npWeight=\"regular\"\n            style=\"color: rgba(71, 84, 103, 1)\"\n          >\n            {{ modalDescriptions }}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{ cancelText }}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n          modalState === 'error'\n            ? 'destructive'\n            : modalState === 'warning'\n              ? 'warning'\n              : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{ okText }}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i1.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpModalComponent, decorators: [{
             type: Component,
@@ -2824,7 +2869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         NpTypographyComponent,
                         BasicModule,
                         NpCheckboxComponent,
-                    ], template: "<div (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>\n    <np-button >\n      {{ modalButton }}\n    </np-button>\n  </ng-template>\n</div>\n\n<nz-modal\n  [(nzVisible)]=\"isVisible\"\n  (nzOnCancel)=\"handleCancel()\"\n  (nzOnOk)=\"handleOk()\"\n  [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n  [nzContent]=\"modalContent || ''\"\n  [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n  [nzWidth]=\"modalWidth\"\n  nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"] }]
+                    ], template: "<div (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>\n    <np-button>\n      {{ modalButton }}\n    </np-button>\n  </ng-template>\n</div>\n\n<nz-modal\n  [(nzVisible)]=\"isVisible\"\n  (nzOnCancel)=\"handleCancel()\"\n  (nzOnOk)=\"handleOk()\"\n  [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n  [nzContent]=\"modalContent || ''\"\n  [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n  [nzWidth]=\"modalWidth\"\n  nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n  <ng-container\n    *ngTemplateOutlet=\"\n      modalType === 'confirmation' ? contentConfirmation : contentNotification\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container\n    *ngTemplateOutlet=\"\n      modalType === 'confirmation' ? footerConfirmation : footerNotification\n    \"\n  ></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n        *ngIf=\"useIcon\"\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"w-[48px] h-[48px]\"\n      />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{ modalTitle }}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography\n            npType=\"text\"\n            npSize=\"sm\"\n            npWeight=\"regular\"\n            style=\"color: rgba(71, 84, 103, 1)\"\n          >\n            {{ modalDescriptions }}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i\n        class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n        (click)=\"handleCancel()\"\n      ></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{ modalType }}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{ cancelText }}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{ okText }}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full py-2\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{ modalTitle }}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n          <i\n            class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n            (click)=\"handleCancel()\"\n          ></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography\n            npType=\"text\"\n            npSize=\"sm\"\n            npWeight=\"regular\"\n            style=\"color: rgba(71, 84, 103, 1)\"\n          >\n            {{ modalDescriptions }}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{ cancelText }}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n          modalState === 'error'\n            ? 'destructive'\n            : modalState === 'warning'\n              ? 'warning'\n              : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{ okText }}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"] }]
         }], propDecorators: { modalButton: [{
                 type: Input
             }], modalTitle: [{