@unipin/angular-applet 17.2.0 → 17.2.1

package/fesm2022/unipin-angular-applet.mjs

@@ -502,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
 
 class ColumnHeaderContainerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ColumnHeaderContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ColumnHeaderContainerComponent, isStandalone: true, selector: "up-column-header-container", inputs: { header: "header", prevUrl: "prevUrl" }, host: { classAttribute: "d-flex flex-column h-100" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center border-bottom py-1 ps-1 pe-4 flex-shrink-0\">\n\t<div class=\"flex-grow-1 d-flex align-items-center pe-3\">\n\t\t<ion-buttons>\n\t\t\t<ion-button routerLink=\"{{ prevUrl }}\">\n\t\t\t\t<ion-icon slot=\"icon-only\" name=\"close\" />\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\t\n\t\t<div class=\"f20 fw-medium\">{{ header }}</div>\n\t</div>\n\n\t<ng-content select=\"#button\" />\n</div>\n\n<div class=\"p-1 flex-grow-1 overflow-auto\">\n\t<ng-content/>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ColumnHeaderContainerComponent, isStandalone: true, selector: "up-column-header-container", inputs: { header: "header", prevUrl: "prevUrl" }, host: { classAttribute: "d-flex flex-column h-100" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center border-bottom py-1 ps-1 pe-4 flex-shrink-0\">\n\t<div class=\"flex-grow-1 d-flex align-items-center pe-3\">\n\t\t<ion-buttons>\n\t\t\t<ion-button routerLink=\"{{ prevUrl }}\">\n\t\t\t\t<ion-icon slot=\"icon-only\" name=\"close\" />\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\n\t\t<div class=\"f20 fw-medium\">{{ header }}</div>\n\t</div>\n\n\t<ng-content select=\"[button]\" />\n</div>\n\n<div class=\"p-1 flex-grow-1 overflow-auto\">\n\t<ng-content/>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ColumnHeaderContainerComponent, decorators: [{
             type: Component,
@@ -511,7 +511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     }, imports: [
                         IonicModule,
                         RouterModule
-                    ], template: "<div class=\"d-flex justify-content-between align-items-center border-bottom py-1 ps-1 pe-4 flex-shrink-0\">\n\t<div class=\"flex-grow-1 d-flex align-items-center pe-3\">\n\t\t<ion-buttons>\n\t\t\t<ion-button routerLink=\"{{ prevUrl }}\">\n\t\t\t\t<ion-icon slot=\"icon-only\" name=\"close\" />\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\t\n\t\t<div class=\"f20 fw-medium\">{{ header }}</div>\n\t</div>\n\n\t<ng-content select=\"#button\" />\n</div>\n\n<div class=\"p-1 flex-grow-1 overflow-auto\">\n\t<ng-content/>\n</div>\n" }]
+                    ], template: "<div class=\"d-flex justify-content-between align-items-center border-bottom py-1 ps-1 pe-4 flex-shrink-0\">\n\t<div class=\"flex-grow-1 d-flex align-items-center pe-3\">\n\t\t<ion-buttons>\n\t\t\t<ion-button routerLink=\"{{ prevUrl }}\">\n\t\t\t\t<ion-icon slot=\"icon-only\" name=\"close\" />\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\n\t\t<div class=\"f20 fw-medium\">{{ header }}</div>\n\t</div>\n\n\t<ng-content select=\"[button]\" />\n</div>\n\n<div class=\"p-1 flex-grow-1 overflow-auto\">\n\t<ng-content/>\n</div>\n" }]
         }], propDecorators: { header: [{
                 type: Input
             }], prevUrl: [{
@@ -1070,7 +1070,6 @@ class FormTextareaComponent {
         this.required = false;
         this.disabled = false;
         this.isTouched = false;
-        this.value = '';
         this.onChange = (_val) => { };
         this.onTouched = () => { };
     }
@@ -1100,7 +1099,7 @@ class FormTextareaComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FormTextareaComponent, deps: [{ token: 'label', attribute: true }, { token: 'placeholder', attribute: true }, { token: 'autocomplete', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FormTextareaComponent, isStandalone: true, selector: "up-textarea", inputs: { required: "required", disabled: "disabled" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FormTextareaComponent, isStandalone: true, selector: "up-textarea", inputs: { value: "value", required: "required", disabled: "disabled" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -1138,7 +1137,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['autocomplete']
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { required: [{
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+                type: Input
+            }], required: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -1194,7 +1195,7 @@ class FormImagePickerComponent {
         this.onChanged = (_val) => { };
         this.onTouched = () => { };
     }
-    registerOnChange(fn) { this.onChange = fn; }
+    registerOnChange(fn) { this.onChanged = fn; }
     registerOnTouched(fn) { this.onTouched = fn; }
     clear(ev) {
         this.writeValue('');
@@ -1982,7 +1983,7 @@ class AuditDetailComponent {
         return regex.test(str);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: AuditDetailComponent, deps: [{ token: i1$3.FormBuilder }, { token: AuditService }, { token: i1$2.ActivatedRoute }, { token: i1.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: AuditDetailComponent, isStandalone: true, selector: "up-audit-detail", ngImport: i0, template: "<up-tab-group class=\"h-100\">\n    <up-tab-content header=\"Detail\" fragment=\"detail\">\n        <form [formGroup]=\"form\" class=\"px-4 pb-4\" *ngIf=\"!isLoading; else loading\">\n              <div class=\"d-flex align-items-center gap-2 pb-3\">\n                  <ion-icon name=\"information-circle\" />\n                  <h5 class=\"m-0\">Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-lg-4\" label=\"Action\" formControlName=\"action\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Source IP\" formControlName=\"sourceIp\" />\n                  </div>\n              </div>\n              \n              <up-input class=\"mb-4\" label=\"User Name\" formControlName=\"userName\" />\n              <up-textarea class=\"mb-4\" label=\"Description\" formControlName=\"description\" />\n\n              <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                  <ion-icon name=\"laptop\" />\n                  <h5 class=\"m-0\">System Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Action Date\" formControlName=\"createdAt\" />\n                      <up-input class=\"mb-lg-4\" label=\"Source Platform\" formControlName=\"sourcePlatform\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"MS Source\" formControlName=\"msSource\" />\n                      <up-input class=\"mb-4\" label=\"Function\" formControlName=\"function\" />\n                  </div>\n              </div>\n          </form>\n\n        <ng-template #loading>\n            <ion-skeleton-text class=\"sk-input mx-4 mb-4\" *ngFor=\"let i of [0,1,2,3,4,5,6]\" />\n        </ng-template>        \n    </up-tab-content>\n\n    <up-tab-content header=\"Attributes\" fragment=\"attributes\">\n        <up-pagination-grid id=\"grid-audit-detail\" rowModelType=\"clientSide\" [config]=\"gridConfig\" (onGridReady)=\"setGridApi($event)\" />\n    </up-tab-content>\n</up-tab-group>\n", styles: ["ion-icon{font-size:24px;margin-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }, { kind: "ngmodule", type: TabsComponentModule }, { kind: "component", type: TabGroupComponent, selector: "up-tab-group", outputs: ["onChange"] }, { kind: "component", type: TabContentComponent, selector: "up-tab-content", inputs: ["header"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "component", type: FormTextareaComponent, selector: "up-textarea", inputs: ["required", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: AuditDetailComponent, isStandalone: true, selector: "up-audit-detail", ngImport: i0, template: "<up-tab-group class=\"h-100\">\n    <up-tab-content header=\"Detail\" fragment=\"detail\">\n        <form [formGroup]=\"form\" class=\"px-4 pb-4\" *ngIf=\"!isLoading; else loading\">\n              <div class=\"d-flex align-items-center gap-2 pb-3\">\n                  <ion-icon name=\"information-circle\" />\n                  <h5 class=\"m-0\">Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-lg-4\" label=\"Action\" formControlName=\"action\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Source IP\" formControlName=\"sourceIp\" />\n                  </div>\n              </div>\n              \n              <up-input class=\"mb-4\" label=\"User Name\" formControlName=\"userName\" />\n              <up-textarea class=\"mb-4\" label=\"Description\" formControlName=\"description\" />\n\n              <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                  <ion-icon name=\"laptop\" />\n                  <h5 class=\"m-0\">System Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Action Date\" formControlName=\"createdAt\" />\n                      <up-input class=\"mb-lg-4\" label=\"Source Platform\" formControlName=\"sourcePlatform\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"MS Source\" formControlName=\"msSource\" />\n                      <up-input class=\"mb-4\" label=\"Function\" formControlName=\"function\" />\n                  </div>\n              </div>\n          </form>\n\n        <ng-template #loading>\n            <ion-skeleton-text class=\"sk-input mx-4 mb-4\" *ngFor=\"let i of [0,1,2,3,4,5,6]\" />\n        </ng-template>        \n    </up-tab-content>\n\n    <up-tab-content header=\"Attributes\" fragment=\"attributes\">\n        <up-pagination-grid id=\"grid-audit-detail\" rowModelType=\"clientSide\" [config]=\"gridConfig\" (onGridReady)=\"setGridApi($event)\" />\n    </up-tab-content>\n</up-tab-group>\n", styles: ["ion-icon{font-size:24px;margin-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }, { kind: "ngmodule", type: TabsComponentModule }, { kind: "component", type: TabGroupComponent, selector: "up-tab-group", outputs: ["onChange"] }, { kind: "component", type: TabContentComponent, selector: "up-tab-content", inputs: ["header"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "component", type: FormTextareaComponent, selector: "up-textarea", inputs: ["value", "required", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: AuditDetailComponent, decorators: [{
             type: Component,
@@ -1997,292 +1998,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                     ], template: "<up-tab-group class=\"h-100\">\n    <up-tab-content header=\"Detail\" fragment=\"detail\">\n        <form [formGroup]=\"form\" class=\"px-4 pb-4\" *ngIf=\"!isLoading; else loading\">\n              <div class=\"d-flex align-items-center gap-2 pb-3\">\n                  <ion-icon name=\"information-circle\" />\n                  <h5 class=\"m-0\">Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-lg-4\" label=\"Action\" formControlName=\"action\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Source IP\" formControlName=\"sourceIp\" />\n                  </div>\n              </div>\n              \n              <up-input class=\"mb-4\" label=\"User Name\" formControlName=\"userName\" />\n              <up-textarea class=\"mb-4\" label=\"Description\" formControlName=\"description\" />\n\n              <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                  <ion-icon name=\"laptop\" />\n                  <h5 class=\"m-0\">System Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Action Date\" formControlName=\"createdAt\" />\n                      <up-input class=\"mb-lg-4\" label=\"Source Platform\" formControlName=\"sourcePlatform\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"MS Source\" formControlName=\"msSource\" />\n                      <up-input class=\"mb-4\" label=\"Function\" formControlName=\"function\" />\n                  </div>\n              </div>\n          </form>\n\n        <ng-template #loading>\n            <ion-skeleton-text class=\"sk-input mx-4 mb-4\" *ngFor=\"let i of [0,1,2,3,4,5,6]\" />\n        </ng-template>        \n    </up-tab-content>\n\n    <up-tab-content header=\"Attributes\" fragment=\"attributes\">\n        <up-pagination-grid id=\"grid-audit-detail\" rowModelType=\"clientSide\" [config]=\"gridConfig\" (onGridReady)=\"setGridApi($event)\" />\n    </up-tab-content>\n</up-tab-group>\n", styles: ["ion-icon{font-size:24px;margin-right:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: AuditService }, { type: i1$2.ActivatedRoute }, { type: i1.NavController }] });
 
-class ApprovalService {
-    constructor(apollo) {
-        this.apollo = apollo;
-        this.baseAttr = `guid createdAt entity remark sourcePlatform status type`;
-    }
-    query(input, extraAttr = '', fetchPolicy) {
-        return this.apollo.query({
-            fetchPolicy,
-            variables: { input },
-            query: gql `
-        query QueryApproval($input: ApprovalCriteria) {
-          approvalMsApprovals(input: $input) {
-            data {
-              ${this.baseAttr}
-              ${extraAttr}
-            }
-            ${input.page === 0 ? 'totalRecord' : ''}
-          }
-        }
-      `
-        });
-    }
-    request(variables) {
-        return this.apollo.mutate({
-            variables,
-            mutation: gql `
-        mutation ${variables.isApprove ? 'ApproveApproval' : 'DeclineApproval'}($approvalGroupGuid: String, $guid: String, $isApprove: Boolean, $reason: String) {
-          approvalMsApproveOrDeclineRequest(approvalGroupGuid: $approvalGroupGuid, guid: $guid, isApprove: $isApprove, reason: $reason)
-        }
-      `
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$1.Apollo }] });
-
-class ApprovalListComponent {
-    constructor(entities, router, route, service, alertCtrl) {
-        this.entities = entities;
-        this.router = router;
-        this.route = route;
-        this.service = service;
-        this.alertCtrl = alertCtrl;
-        this.gridConfig = {
-            noRowText: 'Approval not found',
-            colDefs: [
-                { headerName: 'Entity', field: 'entity', checkboxSelection: true },
-                { headerName: 'Remark', field: 'remark' },
-                { headerName: 'Source Platform', field: 'sourcePlatform' },
-                { headerName: 'Status', field: 'status', maxWidth: 100 },
-                { headerName: 'Type', field: 'type', maxWidth: 100 },
-                { headerName: 'Created Date', field: 'createdAt', sort: 'desc', valueFormatter: ({ value }) => value ? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' }
-            ],
-            getData: (page, pageSize, sortBy, dir) => {
-                const policy = this.input.page === page ? 'no-cache' : undefined;
-                this.input.page = page;
-                this.input.sortBy = sortBy;
-                this.input.pageSize = pageSize;
-                this.input.sortDirection = dir;
-                return this.service.query(this.input, '', policy).pipe(map(({ data: { approvalMsApprovals: { data, totalRecord: t } } }) => ({ data, totalRecord: t })));
-            }
-        };
-        this.filterConfig = {
-            mode: 'advanced',
-            fields: [
-                { key: 'type', label: 'Type', type: 'select', options: [
-                        { label: 'Creation', value: ['CREATION'] },
-                        { label: 'Deletion', value: ['DELETION'] },
-                        { label: 'Linkage', value: ['LINKAGE'] },
-                        { label: 'Unlink', value: ['UNLINK'] },
-                        { label: 'Update', value: ['UPDATE'] }
-                    ] }
-            ]
-        };
-        this.btnConfig = [
-            { label: 'Approve', icon: 'checkmark', description: 'Approve the approvals', disabled: true, onClick: this.multipleApproval.bind(this) },
-            { label: 'Decline', icon: 'close', description: 'Decline the approvals', color: 'danger', disabled: true, onClick: this.multipleApproval.bind(this) }
-        ];
-        this.input = { page: 0, pageSize: 50, entity: this.entities };
-    }
-    setGridApi({ api }) { this.gridApi = api; }
-    openDetail(data) {
-        this.router.navigate([`/approval/${data.guid}`], { preserveFragment: true });
-    }
-    selectApprovals() {
-        this.btnConfig[0].disabled = this.btnConfig[1].disabled = this.gridApi.getSelectedRows().length <= 1;
-    }
-    search({ data }) {
-        this.input.type = data?.type;
-        this.gridApi.refreshInfiniteCache();
-    }
-    multipleApproval(btn) {
-        btn.toggleLoading();
-        this.router.navigate([`/approval/approval-group`], {
-            preserveFragment: true,
-            queryParams: {
-                isApprove: btn.color !== 'danger',
-                guids: this.gridApi.getSelectedRows().map(({ guid }) => guid),
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalListComponent, deps: [{ token: 'ENTITIES' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: ApprovalService }, { token: i1.AlertController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ApprovalListComponent, isStandalone: true, selector: "up-approval-list", host: { classAttribute: "d-flex flex-column h-100 w-100" }, ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-3\">\n        <h3 class=\"m-0\">Approval</h3>\n\n        <up-btn-group id=\"approval-list\" [config]=\"btnConfig\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-approval-list\" [config]=\"filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"gridConfig\" id=\"grid-approval-list\" rowSelection=\"multiple\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" (onSelectionChanged)=\"selectApprovals()\" />\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalListComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'up-approval-list', host: {
-                        class: 'd-flex flex-column h-100 w-100'
-                    }, imports: [
-                        FilterComponent,
-                        ButtonGroupComponent,
-                        GridPaginationComponent
-                    ], template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-3\">\n        <h3 class=\"m-0\">Approval</h3>\n\n        <up-btn-group id=\"approval-list\" [config]=\"btnConfig\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-approval-list\" [config]=\"filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"gridConfig\" id=\"grid-approval-list\" rowSelection=\"multiple\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" (onSelectionChanged)=\"selectApprovals()\" />\n</div>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['ENTITIES']
-                }] }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: ApprovalService }, { type: i1.AlertController }] });
-
-class ApprovalFormComponent {
-    constructor(router, ch, service, gridService, alertCtrl, permService) {
-        this.router = router;
-        this.ch = ch;
-        this.service = service;
-        this.gridService = gridService;
-        this.alertCtrl = alertCtrl;
-        this.permService = permService;
-        this.isLoading = true;
-        this.btnConfig = [];
-        this.data = [];
-    }
-    ngOnDestroy() { this.sub?.unsubscribe(); }
-    setGuid(guids, isApprove) {
-        if (guids.length === 1)
-            this.guid = guids[0];
-        this.btnConfig.length = 0;
-        this.setLoading(true);
-        this.sub = this.service.query({ guids }, 'permission').subscribe({
-            next: ({ data: { approvalMsApprovals: { data } } }) => {
-                if (!data || data.length === 0) {
-                    this.router.navigateByUrl('approval');
-                    return;
-                }
-                this.data = data;
-                if (data.length > 1) {
-                    let dataCount = 0;
-                    data.map(({ permission }) => {
-                        const perm = permission.split('.');
-                        if (this.permService.checkPermission(perm[0], perm[1], perm[2]))
-                            dataCount++;
-                        if (dataCount === data.length)
-                            isApprove ? this.btnConfig.push({ label: 'Approve', icon: 'checkmark', description: 'Approve the approval', disabled: false, onClick: this.request.bind(this) }) : this.btnConfig.push({ label: 'Decline', icon: 'close', description: 'Decline the approval', color: 'danger', disabled: false, onClick: this.request.bind(this) });
-                    });
-                }
-                else {
-                    const perm = data[0].permission.split('.');
-                    if (this.permService.checkPermission(perm[0], perm[1], perm[2])) {
-                        this.btnConfig.push({ label: 'Approve', icon: 'checkmark', description: 'Approve the approval', disabled: false, onClick: this.request.bind(this) }, { label: 'Decline', icon: 'close', description: 'Decline the approval', color: 'danger', disabled: false, onClick: this.request.bind(this) });
-                    }
-                }
-                this.setLoading(false);
-            },
-            error: ({ message }) => {
-                this.showAlert('Error', message);
-                this.router.navigateByUrl('approval');
-            }
-        });
-    }
-    request(btn) {
-        const isApprove = btn.color !== 'danger';
-        this.showAlert('Confirm', `Are you sure want to ${isApprove ? 'approve the approval?' : 'decline the approval? Please input the reason if you want to decline.'}`, [
-            { text: 'Cancel', handler: () => btn.toggleLoading() },
-            {
-                text: `${isApprove ? 'Approve' : 'Decline'}`,
-                handler: ({ reason }) => {
-                    this.sub?.unsubscribe();
-                    const variables = {
-                        ...(this.guid ? { guid: this.guid } : { approvalGroupGuid: '' }),
-                        isApprove,
-                        reason
-                    };
-                    this.sub = this.service.request(variables).subscribe({
-                        next: () => {
-                            this.showAlert('Success', `Approval ${isApprove ? 'approved' : 'declined'}`);
-                            this.router.navigateByUrl('approval');
-                            this.gridService.refreshGridCache('grid-approval-list');
-                        },
-                        error: ({ message }) => {
-                            btn.toggleLoading();
-                            this.showAlert('Error', message);
-                        }
-                    });
-                }
-            }
-        ], [{ name: 'reason', type: 'textarea', placeholder: 'Reason' }]);
-    }
-    setLoading(b) {
-        this.isLoading = b;
-        this.ch.markForCheck();
-    }
-    async showAlert(header, message, buttons = ['OK'], inputs = []) { (await this.alertCtrl.create({ header, message, buttons, inputs })).present(); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalFormComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: ApprovalService }, { token: GridService }, { token: i1.AlertController }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ApprovalFormComponent, isStandalone: true, selector: "up-approval-form", inputs: { isLoading: "isLoading" }, host: { classAttribute: "px-4 d-block" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading; else loading\">\n    <div *ngFor=\"let d of data, let i = index\">\n        <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\" *ngIf=\"data.length > 1\">\n            <ion-icon name=\"document\" />\n            <h5 class=\"m-0\">Approval {{ i + 1 }}</h5>\n        </div>\n\n        <div class=\"d-flex flex-column flex-lg-row gap-4\">\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Entity\" [disabled]=\"true\" [value]=\"d.entity\" />\n                <up-input class=\"mb-4\" label=\"Remark\" [disabled]=\"true\" [value]=\"d.remark\" />\n            </div>\n\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Created At\" [disabled]=\"true\" [value]=\"d.createdAt | date:'dd MMM yyyy HH:mm'\" />\n                <up-input class=\"mb-4\" label=\"Status\" [disabled]=\"true\" [value]=\"d.status\" />\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #loading>\n    <div class=\"d-flex flex-column flex-lg-row gap-4\">\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n    </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalFormComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'up-approval-form', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'px-4 d-block'
-                    }, imports: [
-                        IonicModule,
-                        CommonModule,
-                        FormInputComponent
-                    ], template: "<ng-container *ngIf=\"!isLoading; else loading\">\n    <div *ngFor=\"let d of data, let i = index\">\n        <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\" *ngIf=\"data.length > 1\">\n            <ion-icon name=\"document\" />\n            <h5 class=\"m-0\">Approval {{ i + 1 }}</h5>\n        </div>\n\n        <div class=\"d-flex flex-column flex-lg-row gap-4\">\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Entity\" [disabled]=\"true\" [value]=\"d.entity\" />\n                <up-input class=\"mb-4\" label=\"Remark\" [disabled]=\"true\" [value]=\"d.remark\" />\n            </div>\n\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Created At\" [disabled]=\"true\" [value]=\"d.createdAt | date:'dd MMM yyyy HH:mm'\" />\n                <up-input class=\"mb-4\" label=\"Status\" [disabled]=\"true\" [value]=\"d.status\" />\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #loading>\n    <div class=\"d-flex flex-column flex-lg-row gap-4\">\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n    </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: ApprovalService }, { type: GridService }, { type: i1.AlertController }, { type: PermissionService }], propDecorators: { isLoading: [{
-                type: Input
-            }] } });
-
-class ApprovalDetailComponent {
-    constructor(router, activatedRoute) {
-        this.router = router;
-        this.activatedRoute = activatedRoute;
-        this.btnConfig = [];
-        this.guid = '';
-    }
-    ngOnInit() {
-        this.sub = this.activatedRoute.queryParams.subscribe((params) => {
-            if (params) {
-                this.guids = params['guids'];
-                this.isApprove = params['isApprove'] === 'true';
-            }
-        });
-    }
-    ngAfterViewInit() {
-        if (this.guids) {
-            this.setChildGuid('');
-            this.changeTab(this.activatedRoute.snapshot.fragment);
-        }
-        else {
-            this.setChildGuid(this.activatedRoute.children[0].snapshot.params['guid']);
-            this.changeTab(this.activatedRoute.snapshot.fragment);
-            this.sub = this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe({
-                next: () => {
-                    const newGuid = this.activatedRoute.children[0].snapshot.params['guid'];
-                    if (this.guid !== newGuid) {
-                        this.guid = newGuid;
-                        this.setChildGuid(this.guid);
-                    }
-                }
-            });
-        }
-    }
-    ngOnDestroy() { this.sub.unsubscribe(); }
-    changeTab(f) {
-        switch (f) {
-            default:
-                this.btnConfig = this.formComponent?.btnConfig ?? [];
-        }
-    }
-    setChildGuid(guid) {
-        this.formComponent?.setGuid(this.guids ?? [guid], this.isApprove);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalDetailComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ApprovalDetailComponent, isStandalone: true, selector: "up-approval-detail", host: { classAttribute: "d-block h-100" }, viewQueries: [{ propertyName: "formComponent", first: true, predicate: ApprovalFormComponent, descendants: true }], ngImport: i0, template: "<up-column-header-container header=\"Approval Detail\" prevUrl=\"/approval\" class=\"bg-white\">\n    <up-btn-group id=\"button\" *ngIf=\"!formComponent?.isLoading; else loading\" [config]=\"btnConfig\" />\n\n    <ng-template #loading>\n        <ion-skeleton-text id=\"button\" class=\"m-0 sk-btn\" />\n    </ng-template>\n\n    <up-tab-group class=\"h-100\" (onChange)=\"changeTab($event)\">\n        <up-tab-content header=\"Detail\" fragment=\"detail\">\n            <up-approval-form />\n        </up-tab-content>\n    </up-tab-group>\n</up-column-header-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TabsComponentModule }, { kind: "component", type: TabGroupComponent, selector: "up-tab-group", outputs: ["onChange"] }, { kind: "component", type: TabContentComponent, selector: "up-tab-content", inputs: ["header"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: ColumnHeaderContainerComponent, selector: "up-column-header-container", inputs: ["header", "prevUrl"] }, { kind: "component", type: ApprovalFormComponent, selector: "up-approval-form", inputs: ["isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalDetailComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'up-approval-detail', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'd-block h-100'
-                    }, imports: [
-                        IonicModule,
-                        CommonModule,
-                        TabsComponentModule,
-                        ButtonGroupComponent,
-                        ColumnHeaderContainerComponent,
-                        ApprovalFormComponent
-                    ], template: "<up-column-header-container header=\"Approval Detail\" prevUrl=\"/approval\" class=\"bg-white\">\n    <up-btn-group id=\"button\" *ngIf=\"!formComponent?.isLoading; else loading\" [config]=\"btnConfig\" />\n\n    <ng-template #loading>\n        <ion-skeleton-text id=\"button\" class=\"m-0 sk-btn\" />\n    </ng-template>\n\n    <up-tab-group class=\"h-100\" (onChange)=\"changeTab($event)\">\n        <up-tab-content header=\"Detail\" fragment=\"detail\">\n            <up-approval-form />\n        </up-tab-content>\n    </up-tab-group>\n</up-column-header-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { formComponent: [{
-                type: ViewChild,
-                args: [ApprovalFormComponent]
-            }] } });
-
 var AlertTypeEnum;
 (function (AlertTypeEnum) {
     AlertTypeEnum["PasswordReset"] = "PASSWORD_RESET";
@@ -2544,6 +2259,301 @@ var VoucherGroupType;
     VoucherGroupType["Import"] = "IMPORT";
 })(VoucherGroupType || (VoucherGroupType = {}));
 
+class ApprovalService {
+    constructor(apollo) {
+        this.apollo = apollo;
+        this.baseAttr = `guid createdAt entity remark sourcePlatform status type`;
+    }
+    query(input, extraAttr = '', fetchPolicy) {
+        return this.apollo.query({
+            fetchPolicy,
+            variables: { input },
+            query: gql `
+        query QueryApproval($input: ApprovalCriteria) {
+          approvalMsApprovals(input: $input) {
+            data {
+              ${this.baseAttr}
+              ${extraAttr}
+            }
+            ${input.page === 0 ? 'totalRecord' : ''}
+          }
+        }
+      `
+        });
+    }
+    request(variables) {
+        return this.apollo.mutate({
+            variables,
+            mutation: gql `
+        mutation ${variables.isApprove ? 'ApproveApproval' : 'DeclineApproval'}($approvalGroupGuid: String, $guid: String, $isApprove: Boolean, $reason: String) {
+          approvalMsApproveOrDeclineRequest(approvalGroupGuid: $approvalGroupGuid, guid: $guid, isApprove: $isApprove, reason: $reason)
+        }
+      `
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Apollo }] });
+
+class ApprovalListComponent {
+    constructor(entities, router, route, service, alertCtrl) {
+        this.entities = entities;
+        this.router = router;
+        this.route = route;
+        this.service = service;
+        this.alertCtrl = alertCtrl;
+        this.gridConfig = {
+            noRowText: 'Approval not found',
+            colDefs: [
+                { headerName: 'Entity', field: 'entity', checkboxSelection: true },
+                { headerName: 'Remark', field: 'remark' },
+                { headerName: 'Source Platform', field: 'sourcePlatform' },
+                { headerName: 'Status', field: 'status', maxWidth: 100, cellRenderer: ({ value }) => value ? `<div class="badge m-auto bg-${value === ApprovalStatusEnum.Pending ? 'warning' : value === ApprovalStatusEnum.Approved ? 'success' : 'danger'}">${value}</div>` : '' },
+                { headerName: 'Type', field: 'type', maxWidth: 100 },
+                { headerName: 'Created Date', field: 'createdAt', sort: 'desc', valueFormatter: ({ value }) => value ? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' }
+            ],
+            getData: (page, pageSize, sortBy, dir) => {
+                const policy = this.input.page === page ? 'no-cache' : undefined;
+                this.input.page = page;
+                this.input.sortBy = sortBy;
+                this.input.pageSize = pageSize;
+                this.input.sortDirection = dir;
+                return this.service.query(this.input, '', policy).pipe(map(({ data: { approvalMsApprovals: { data, totalRecord: t } } }) => ({ data, totalRecord: t })));
+            }
+        };
+        this.filterConfig = {
+            mode: 'advanced',
+            fields: [
+                { key: 'status', label: 'Status', type: 'select', options: [
+                        { label: 'Approved', value: ['APPROVED'] },
+                        { label: 'Declined', value: ['DECLINED'] },
+                        { label: 'Pending', value: ['PENDING'] }
+                    ] },
+                { key: 'type', label: 'Type', type: 'select', options: [
+                        { label: 'Creation', value: ['CREATION'] },
+                        { label: 'Deletion', value: ['DELETION'] },
+                        { label: 'Linkage', value: ['LINKAGE'] },
+                        { label: 'Unlink', value: ['UNLINK'] },
+                        { label: 'Update', value: ['UPDATE'] }
+                    ] }
+            ]
+        };
+        this.btnConfig = [
+            { label: 'Approve', icon: 'checkmark', description: 'Approve the approvals', disabled: true, onClick: this.multipleApproval.bind(this) },
+            { label: 'Decline', icon: 'close', description: 'Decline the approvals', color: 'danger', disabled: true, onClick: this.multipleApproval.bind(this) }
+        ];
+        this.input = { page: 0, pageSize: 50, entity: this.entities };
+    }
+    setGridApi({ api }) { this.gridApi = api; }
+    openDetail({ guid }) { this.router.navigate([`/approval/${guid}`], { preserveFragment: true }); }
+    selectApprovals() { this.btnConfig[0].disabled = this.btnConfig[1].disabled = this.gridApi.getSelectedRows().length <= 1; }
+    search({ data }) {
+        this.input.type = data?.type;
+        this.input.status = data?.status;
+        this.gridApi.getSelectedNodes().forEach((e) => e.setSelected(false));
+        this.gridApi.refreshInfiniteCache();
+    }
+    multipleApproval(btn) {
+        btn.toggleLoading();
+        this.router.navigate([`/approval/approval-group`], {
+            preserveFragment: true,
+            queryParams: {
+                isApprove: btn.color !== 'danger',
+                guids: this.gridApi.getSelectedRows().map(({ guid }) => guid),
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalListComponent, deps: [{ token: 'ENTITIES' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: ApprovalService }, { token: i1.AlertController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ApprovalListComponent, isStandalone: true, selector: "up-approval-list", host: { classAttribute: "d-flex flex-column h-100 w-100" }, ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-3\">\n        <h3 class=\"m-0\">Approval</h3>\n\n        <up-btn-group id=\"approval-list\" [config]=\"btnConfig\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-approval-list\" [config]=\"filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"gridConfig\" id=\"grid-approval-list\" rowSelection=\"multiple\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" (onSelectionChanged)=\"selectApprovals()\" />\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'up-approval-list', host: {
+                        class: 'd-flex flex-column h-100 w-100'
+                    }, imports: [
+                        FilterComponent,
+                        ButtonGroupComponent,
+                        GridPaginationComponent
+                    ], template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-3\">\n        <h3 class=\"m-0\">Approval</h3>\n\n        <up-btn-group id=\"approval-list\" [config]=\"btnConfig\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-approval-list\" [config]=\"filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"gridConfig\" id=\"grid-approval-list\" rowSelection=\"multiple\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" (onSelectionChanged)=\"selectApprovals()\" />\n</div>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['ENTITIES']
+                }] }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: ApprovalService }, { type: i1.AlertController }] });
+
+class ApprovalFormComponent {
+    constructor(router, ch, service, gridService, alertCtrl, permService) {
+        this.router = router;
+        this.ch = ch;
+        this.service = service;
+        this.gridService = gridService;
+        this.alertCtrl = alertCtrl;
+        this.permService = permService;
+        this.isLoading = true;
+        this.btnConfig = [];
+        this.data = [];
+    }
+    ngOnDestroy() { this.sub?.unsubscribe(); }
+    setGuid(guids, isApprove) {
+        if (guids.length === 1)
+            this.guid = guids[0];
+        this.btnConfig.length = 0;
+        this.setLoading(true);
+        this.sub = this.service.query({ guids, status: [ApprovalStatusEnum.Approved, ApprovalStatusEnum.Declined, ApprovalStatusEnum.Pending] }, 'permission reason').subscribe({
+            next: ({ data: { approvalMsApprovals: { data } } }) => {
+                if (!data || data.length === 0) {
+                    this.router.navigateByUrl('approval');
+                    return;
+                }
+                this.data = data;
+                if (data.length > 1) {
+                    let dataCount = 0;
+                    data.map(({ permission, status }) => {
+                        if (status === ApprovalStatusEnum.Pending) {
+                            const perm = permission.split('.');
+                            if (this.permService.checkPermission(perm[0], perm[1], perm[2]))
+                                dataCount++;
+                            if (dataCount === data.length)
+                                isApprove ? this.btnConfig.push({ label: 'Approve', icon: 'checkmark', description: 'Approve the approval(s)', disabled: false, onClick: this.request.bind(this) }) : this.btnConfig.push({ label: 'Decline', icon: 'close', description: 'Decline the approval', color: 'danger', disabled: false, onClick: this.request.bind(this) });
+                        }
+                    });
+                }
+                else {
+                    const { status, permission } = data[0];
+                    if (status === ApprovalStatusEnum.Pending) {
+                        const perm = permission.split('.');
+                        if (this.permService.checkPermission(perm[0], perm[1], perm[2])) {
+                            this.btnConfig.push({ label: 'Approve', icon: 'checkmark', description: 'Approve the approval', disabled: false, onClick: this.request.bind(this) }, { label: 'Decline', icon: 'close', description: 'Decline the approval', color: 'danger', disabled: false, onClick: this.request.bind(this) });
+                        }
+                    }
+                }
+                this.setLoading(false);
+            },
+            error: ({ message }) => {
+                this.showAlert('Error', message);
+                this.router.navigateByUrl('approval');
+            }
+        });
+    }
+    request(btn) {
+        const isApprove = btn.color !== 'danger';
+        this.showAlert('Confirm', `Are you sure want to ${isApprove ? 'approve the approval?' : 'decline the approval? Please input the reason if you want to decline.'}`, [
+            { text: 'Cancel', handler: () => btn.toggleLoading() },
+            {
+                text: `${isApprove ? 'Approve' : 'Decline'}`,
+                handler: ({ reason }) => {
+                    this.sub?.unsubscribe();
+                    const variables = {
+                        ...(this.guid ? { guid: this.guid } : { approvalGroupGuid: '' }),
+                        isApprove,
+                        reason
+                    };
+                    this.sub = this.service.request(variables).subscribe({
+                        next: () => {
+                            this.showAlert('Success', `Approval ${isApprove ? 'approved' : 'declined'}`);
+                            this.router.navigateByUrl('approval');
+                            this.gridService.refreshGridCache('grid-approval-list');
+                        },
+                        error: ({ message }) => {
+                            btn.toggleLoading();
+                            this.showAlert('Error', message);
+                        }
+                    });
+                }
+            }
+        ], [{ name: 'reason', type: 'textarea', placeholder: 'Reason' }]);
+    }
+    setLoading(b) {
+        this.isLoading = b;
+        this.ch.markForCheck();
+    }
+    async showAlert(header, message, buttons = ['OK'], inputs = []) { (await this.alertCtrl.create({ header, message, buttons, inputs })).present(); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalFormComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: ApprovalService }, { token: GridService }, { token: i1.AlertController }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ApprovalFormComponent, isStandalone: true, selector: "up-approval-form", inputs: { isLoading: "isLoading" }, host: { classAttribute: "px-4 d-block" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading; else loading\">\n    <div *ngFor=\"let d of data, let i = index\">\n        <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\" *ngIf=\"data.length > 1\">\n            <ion-icon name=\"document\" />\n            <h5 class=\"m-0\">Approval {{ i + 1 }}</h5>\n        </div>\n\n        <div class=\"d-flex flex-column flex-lg-row gap-4\">\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Entity\" [disabled]=\"true\" [value]=\"d.entity\" />\n                <up-input class=\"mb-4\" label=\"Remark\" [disabled]=\"true\" [value]=\"d.remark\" />\n            </div>\n\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Created At\" [disabled]=\"true\" [value]=\"d.createdAt | date:'dd MMM yyyy HH:mm'\" />\n                <up-input class=\"mb-4\" label=\"Status\" [disabled]=\"true\" [value]=\"d.status\" />\n            </div>\n        </div>\n\n        <up-textarea class=\"mb-4\" label=\"Reason\" [disabled]=\"true\" [value]=\"d.reason\" *ngIf=\"d.status !== 'PENDING'\" />\n    </div>\n</ng-container>\n\n<ng-template #loading>\n    <div class=\"d-flex flex-column flex-lg-row gap-4\">\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n    </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "component", type: FormTextareaComponent, selector: "up-textarea", inputs: ["value", "required", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'up-approval-form', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'px-4 d-block'
+                    }, imports: [
+                        IonicModule,
+                        CommonModule,
+                        FormInputComponent,
+                        FormTextareaComponent
+                    ], template: "<ng-container *ngIf=\"!isLoading; else loading\">\n    <div *ngFor=\"let d of data, let i = index\">\n        <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\" *ngIf=\"data.length > 1\">\n            <ion-icon name=\"document\" />\n            <h5 class=\"m-0\">Approval {{ i + 1 }}</h5>\n        </div>\n\n        <div class=\"d-flex flex-column flex-lg-row gap-4\">\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Entity\" [disabled]=\"true\" [value]=\"d.entity\" />\n                <up-input class=\"mb-4\" label=\"Remark\" [disabled]=\"true\" [value]=\"d.remark\" />\n            </div>\n\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Created At\" [disabled]=\"true\" [value]=\"d.createdAt | date:'dd MMM yyyy HH:mm'\" />\n                <up-input class=\"mb-4\" label=\"Status\" [disabled]=\"true\" [value]=\"d.status\" />\n            </div>\n        </div>\n\n        <up-textarea class=\"mb-4\" label=\"Reason\" [disabled]=\"true\" [value]=\"d.reason\" *ngIf=\"d.status !== 'PENDING'\" />\n    </div>\n</ng-container>\n\n<ng-template #loading>\n    <div class=\"d-flex flex-column flex-lg-row gap-4\">\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: ApprovalService }, { type: GridService }, { type: i1.AlertController }, { type: PermissionService }], propDecorators: { isLoading: [{
+                type: Input
+            }] } });
+
+class ApprovalDetailComponent {
+    constructor(router, activatedRoute) {
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.btnConfig = [];
+        this.guid = '';
+    }
+    ngOnInit() {
+        this.sub = this.activatedRoute.queryParams.subscribe((params) => {
+            if (params) {
+                this.guids = params['guids'];
+                this.isApprove = params['isApprove'] === 'true';
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.guids) {
+            this.setChildGuid('');
+            this.changeTab(this.activatedRoute.snapshot.fragment);
+        }
+        else {
+            this.setChildGuid(this.activatedRoute.children[0].snapshot.params['guid']);
+            this.changeTab(this.activatedRoute.snapshot.fragment);
+            this.sub = this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe({
+                next: () => {
+                    const newGuid = this.activatedRoute.children[0].snapshot.params['guid'];
+                    if (this.guid !== newGuid) {
+                        this.guid = newGuid;
+                        this.setChildGuid(this.guid);
+                    }
+                }
+            });
+        }
+    }
+    ngOnDestroy() { this.sub.unsubscribe(); }
+    changeTab(f) {
+        switch (f) {
+            default:
+                this.btnConfig = this.formComponent?.btnConfig ?? [];
+        }
+    }
+    setChildGuid(guid) {
+        this.formComponent?.setGuid(this.guids ?? [guid], this.isApprove);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalDetailComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ApprovalDetailComponent, isStandalone: true, selector: "up-approval-detail", host: { classAttribute: "d-block h-100" }, viewQueries: [{ propertyName: "formComponent", first: true, predicate: ApprovalFormComponent, descendants: true }], ngImport: i0, template: "<up-column-header-container header=\"Approval Detail\" prevUrl=\"/approval\" class=\"bg-white\">\n    <up-btn-group id=\"button\" *ngIf=\"!formComponent?.isLoading; else loading\" [config]=\"btnConfig\" />\n\n    <ng-template #loading>\n        <ion-skeleton-text id=\"button\" class=\"m-0 sk-btn\" />\n    </ng-template>\n\n    <up-tab-group class=\"h-100\" (onChange)=\"changeTab($event)\">\n        <up-tab-content header=\"Detail\" fragment=\"detail\">\n            <up-approval-form />\n        </up-tab-content>\n    </up-tab-group>\n</up-column-header-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TabsComponentModule }, { kind: "component", type: TabGroupComponent, selector: "up-tab-group", outputs: ["onChange"] }, { kind: "component", type: TabContentComponent, selector: "up-tab-content", inputs: ["header"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: ColumnHeaderContainerComponent, selector: "up-column-header-container", inputs: ["header", "prevUrl"] }, { kind: "component", type: ApprovalFormComponent, selector: "up-approval-form", inputs: ["isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ApprovalDetailComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'up-approval-detail', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'd-block h-100'
+                    }, imports: [
+                        IonicModule,
+                        CommonModule,
+                        TabsComponentModule,
+                        ButtonGroupComponent,
+                        ColumnHeaderContainerComponent,
+                        ApprovalFormComponent
+                    ], template: "<up-column-header-container header=\"Approval Detail\" prevUrl=\"/approval\" class=\"bg-white\">\n    <up-btn-group id=\"button\" *ngIf=\"!formComponent?.isLoading; else loading\" [config]=\"btnConfig\" />\n\n    <ng-template #loading>\n        <ion-skeleton-text id=\"button\" class=\"m-0 sk-btn\" />\n    </ng-template>\n\n    <up-tab-group class=\"h-100\" (onChange)=\"changeTab($event)\">\n        <up-tab-content header=\"Detail\" fragment=\"detail\">\n            <up-approval-form />\n        </up-tab-content>\n    </up-tab-group>\n</up-column-header-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { formComponent: [{
+                type: ViewChild,
+                args: [ApprovalFormComponent]
+            }] } });
+
 class ProfileService {
     constructor(apollo) {
         this.apollo = apollo;