@unipin/angular-applet 18.3.6 → 18.4.0

package/fesm2022/unipin-angular-applet.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Attribute, HostBinding, PlatformRef, VERSION, enableProdMode, NgZone, Injectable, Inject, Directive, inject, NgModule, HostListener, Pipe, ContentChildren } from '@angular/core';
 import * as i2 from '@angular/common';
-import { CommonModule, Location, formatDate } from '@angular/common';
+import { CommonModule, Location, formatDate, DatePipe, JsonPipe } from '@angular/common';
 import * as i1 from '@ionic/angular';
 import { IonButton, IonicModule, NavController } from '@ionic/angular';
 import * as i1$2 from '@angular/router';
@@ -660,6 +660,11 @@ class FormDateComponent {
     registerOnTouched(fn) { this.onTouched = fn; }
     writeValue(val) {
         this.value = val;
+        if (!val) {
+            this.ch.markForCheck();
+            return;
+        }
+        ;
         let localTime = new Date(val);
         localTime = new Date(localTime.getTime() - (localTime.getTimezoneOffset() * 60000));
         this.localValue = localTime.toISOString();
@@ -1463,6 +1468,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                 type: Output
             }] } });
 
+var ActivityHistoryType;
+(function (ActivityHistoryType) {
+    ActivityHistoryType["AttachmentAdd"] = "ATTACHMENT_ADD";
+    ActivityHistoryType["AttachmentRemove"] = "ATTACHMENT_REMOVE";
+    ActivityHistoryType["BoardIn"] = "BOARD_IN";
+    ActivityHistoryType["BoardOut"] = "BOARD_OUT";
+    ActivityHistoryType["CardMove"] = "CARD_MOVE";
+    ActivityHistoryType["CommentAdd"] = "COMMENT_ADD";
+    ActivityHistoryType["CommentEdit"] = "COMMENT_EDIT";
+    ActivityHistoryType["CommentRemove"] = "COMMENT_REMOVE";
+})(ActivityHistoryType || (ActivityHistoryType = {}));
 var AggregationTypeEnum;
 (function (AggregationTypeEnum) {
     AggregationTypeEnum["CountValue"] = "COUNT_VALUE";
@@ -1770,6 +1786,11 @@ var PaymentChannelTargetType;
     PaymentChannelTargetType["Exclude"] = "EXCLUDE";
     PaymentChannelTargetType["Include"] = "INCLUDE";
 })(PaymentChannelTargetType || (PaymentChannelTargetType = {}));
+var PaymentProviderSortByEnum;
+(function (PaymentProviderSortByEnum) {
+    PaymentProviderSortByEnum["CreatedAt"] = "createdAt";
+    PaymentProviderSortByEnum["UpdatedAt"] = "updatedAt";
+})(PaymentProviderSortByEnum || (PaymentProviderSortByEnum = {}));
 var PaymentTxnResponseStatusEnum;
 (function (PaymentTxnResponseStatusEnum) {
     PaymentTxnResponseStatusEnum["CanceledByCustomer"] = "CANCELED_BY_CUSTOMER";
@@ -1912,6 +1933,7 @@ var Status;
     Status["Expired"] = "EXPIRED";
     Status["Inactive"] = "INACTIVE";
     Status["Pending"] = "PENDING";
+    Status["VerseData"] = "VERSE_DATA";
 })(Status || (Status = {}));
 var SuggestedAction;
 (function (SuggestedAction) {
@@ -1987,6 +2009,12 @@ var VoucherAction;
     VoucherAction["Redeem"] = "REDEEM";
     VoucherAction["Void"] = "VOID";
 })(VoucherAction || (VoucherAction = {}));
+var VoucherAutoGenStatus;
+(function (VoucherAutoGenStatus) {
+    VoucherAutoGenStatus["Active"] = "ACTIVE";
+    VoucherAutoGenStatus["Deleted"] = "DELETED";
+    VoucherAutoGenStatus["Disable"] = "DISABLE";
+})(VoucherAutoGenStatus || (VoucherAutoGenStatus = {}));
 var VoucherGroupType;
 (function (VoucherGroupType) {
     VoucherGroupType["Api"] = "API";
@@ -2007,6 +2035,7 @@ var WebtopupTxnReloadTypeEnum;
     WebtopupTxnReloadTypeEnum["Na"] = "NA";
     WebtopupTxnReloadTypeEnum["Uc"] = "UC";
     WebtopupTxnReloadTypeEnum["Up"] = "UP";
+    WebtopupTxnReloadTypeEnum["Voucher"] = "VOUCHER";
 })(WebtopupTxnReloadTypeEnum || (WebtopupTxnReloadTypeEnum = {}));
 
 class ProfileService {
@@ -3307,7 +3336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
 class ApprovalService {
     constructor(apollo) {
         this.apollo = apollo;
-        this.baseAttr = `guid createdAt entity remark sourcePlatform status type`;
+        this.baseAttr = `guid createdAt entity remark sourcePlatform status type approvalGroup { guid }`;
     }
     query(input, extraAttr = '', fetchPolicy) {
         return this.apollo.query({
@@ -3356,7 +3385,7 @@ class ApprovalListComponent {
         this.gridConfig = {
             noRowText: 'Approval not found',
             colDefs: [
-                { headerName: 'Entity', field: 'entity', checkboxSelection: true },
+                { headerName: 'Entity', field: 'entity', checkboxSelection: ({ data: { approvalGroup } }) => this.isCheckboxSelectable(approvalGroup) },
                 { 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>` : '' },
@@ -3402,7 +3431,10 @@ class ApprovalListComponent {
         this.router.navigate([`/approval/${guid}`], { preserveFragment: true });
     }
     selectApprovals() {
-        this.btnConfig[0].disabled = this.btnConfig[1].disabled = this.gridApi.getSelectedRows().length <= 1;
+        const dataGrid = this.gridApi.getSelectedRows();
+        this.btnConfig[0].disabled = this.btnConfig[1].disabled = dataGrid.length < 1;
+        this.selectedApprovalGroupGuid = dataGrid.length === 0 ? undefined : dataGrid[0].approvalGroup.guid;
+        this.gridApi.refreshCells({ force: true });
     }
     search({ data }) {
         this.input.type = data?.type;
@@ -3410,13 +3442,21 @@ class ApprovalListComponent {
         this.gridApi.getSelectedNodes().forEach((e) => e.setSelected(false));
         this.gridApi.refreshInfiniteCache();
     }
+    isCheckboxSelectable(approvalGroup) {
+        if (!approvalGroup)
+            return false;
+        if (approvalGroup.guid === this.selectedApprovalGroupGuid)
+            return true;
+        return true;
+    }
     multipleApproval(btn) {
         btn.toggleLoading();
         this.router.navigate([`/approval/approval-group`], {
             preserveFragment: true,
             queryParams: {
                 isApprove: btn.color !== 'danger',
-                guids: this.gridApi.getSelectedRows().map(({ guid }) => guid),
+                approvalGroupGuid: this.selectedApprovalGroupGuid,
+                guids: this.gridApi.getSelectedRows().map(({ guid }) => guid)
             }
         });
     }
@@ -3449,10 +3489,14 @@ class ApprovalFormComponent {
         this.btnConfig = [];
         this.data = [];
     }
-    ngOnDestroy() { this.sub?.unsubscribe(); }
-    setGuid(guids, isApprove) {
-        if (guids.length === 1)
-            this.guid = guids[0];
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    setGuid(guids, approvalGroupGuid, isApprove) {
+        this.guids = guids;
+        if (approvalGroupGuid) {
+            this.approvalGroupGuid = approvalGroupGuid;
+        }
         this.btnConfig.length = 0;
         this.setLoading(true);
         this.sub = this.service.query({ guids, status: [ApprovalStatusEnum.Approved, ApprovalStatusEnum.Declined, ApprovalStatusEnum.Pending] }, 'data permission reason').subscribe({
@@ -3462,19 +3506,7 @@ class ApprovalFormComponent {
                     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 {
+                if (data.length === 1) {
                     const { status, permission } = data[0];
                     if (status === ApprovalStatusEnum.Pending) {
                         const perm = permission.split('.');
@@ -3483,6 +3515,25 @@ class ApprovalFormComponent {
                         }
                     }
                 }
+                else {
+                    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) {
+                                if (isApprove) {
+                                    this.btnConfig.push({ label: 'Approve', icon: 'checkmark', description: 'Approve the approval(s)', disabled: false, onClick: this.request.bind(this) });
+                                }
+                                else {
+                                    this.btnConfig.push({ label: 'Decline', icon: 'close', description: 'Decline the approval', color: 'danger', disabled: false, onClick: this.request.bind(this) });
+                                }
+                            }
+                        }
+                    });
+                }
                 this.setLoading(false);
             },
             error: ({ message }) => {
@@ -3499,12 +3550,15 @@ class ApprovalFormComponent {
                 text: `${isApprove ? 'Approve' : 'Decline'}`,
                 handler: ({ reason }) => {
                     this.sub?.unsubscribe();
-                    const variables = {
-                        ...(this.guid ? { guid: this.guid } : { approvalGroupGuid: '' }),
+                    const input = {
+                        reason,
                         isApprove,
-                        reason
+                        guids: this.guids,
                     };
-                    this.sub = this.service.request(variables).subscribe({
+                    if (this.approvalGroupGuid) {
+                        input.approvalGroupGuid = this.approvalGroupGuid;
+                    }
+                    this.sub = this.service.request(input).subscribe({
                         next: () => {
                             this.showAlert('Success', `Approval ${isApprove ? 'approved' : 'declined'}`);
                             this.router.navigateByUrl('approval');
@@ -3525,18 +3579,19 @@ class ApprovalFormComponent {
     }
     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: "18.0.4", 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: "18.0.4", type: ApprovalFormComponent, isStandalone: true, selector: "up-approval-form", inputs: { isLoading: "isLoading" }, host: { classAttribute: "px-4 pb-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 label=\"JSON\" [disabled]=\"true\" [value]=\"d.data | json\" />\n        <up-textarea class=\"mt-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    \n    <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n    <ion-skeleton-text class=\"m-0 sk-input\" />\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.JsonPipe, name: "json" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: ApprovalFormComponent, isStandalone: true, selector: "up-approval-form", inputs: { isLoading: "isLoading" }, host: { classAttribute: "px-4 pb-4 d-block" }, ngImport: i0, template: "@if (isLoading) {\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    \n    <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n    <ion-skeleton-text class=\"m-0 sk-input\" />\n}\n@else {\n    @for (d of data; track $index) {\n        @if (data.length > 1) {\n            <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                <ion-icon name=\"document\" />\n                <h5 class=\"m-0\">Approval {{ $index + 1 }}</h5>\n            </div>\n        }\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 label=\"JSON\" [disabled]=\"true\" [value]=\"d.data | json\" />\n        <up-textarea class=\"mt-4\" label=\"Reason\" [disabled]=\"true\" [value]=\"d.reason\" *ngIf=\"d.status !== 'PENDING'\" />\n    }\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: JsonPipe, name: "json" }, { 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: 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: "18.0.4", ngImport: i0, type: ApprovalFormComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-approval-form', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'px-4 pb-4 d-block'
                     }, imports: [
+                        DatePipe,
+                        JsonPipe,
                         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 label=\"JSON\" [disabled]=\"true\" [value]=\"d.data | json\" />\n        <up-textarea class=\"mt-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    \n    <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n    <ion-skeleton-text class=\"m-0 sk-input\" />\n</ng-template>\n" }]
+                    ], template: "@if (isLoading) {\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    \n    <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n    <ion-skeleton-text class=\"m-0 sk-input\" />\n}\n@else {\n    @for (d of data; track $index) {\n        @if (data.length > 1) {\n            <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                <ion-icon name=\"document\" />\n                <h5 class=\"m-0\">Approval {{ $index + 1 }}</h5>\n            </div>\n        }\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 label=\"JSON\" [disabled]=\"true\" [value]=\"d.data | json\" />\n        <up-textarea class=\"mt-4\" label=\"Reason\" [disabled]=\"true\" [value]=\"d.reason\" *ngIf=\"d.status !== 'PENDING'\" />\n    }\n}\n" }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: ApprovalService }, { type: GridService }, { type: i1.AlertController }, { type: PermissionService }], propDecorators: { isLoading: [{
                 type: Input
             }] } });
@@ -3553,12 +3608,13 @@ class ApprovalDetailComponent {
             if (params) {
                 this.guids = params['guids'];
                 this.isApprove = params['isApprove'] === 'true';
+                this.approvalGroupGuid = params['approvalGroupGuid'];
             }
         });
     }
     ngAfterViewInit() {
         if (this.guids) {
-            this.setChildGuid('');
+            this.setChildGuid(this.guids);
             this.changeTab(this.activatedRoute.snapshot.fragment);
         }
         else {
@@ -3569,7 +3625,7 @@ class ApprovalDetailComponent {
                     const newGuid = this.activatedRoute.children[0].snapshot.params['guid'];
                     if (this.guid !== newGuid) {
                         this.guid = newGuid;
-                        this.setChildGuid(this.guid);
+                        this.setChildGuid([this.guid]);
                     }
                 }
             });
@@ -3584,11 +3640,11 @@ class ApprovalDetailComponent {
                 this.btnConfig = this.formComponent?.btnConfig ?? [];
         }
     }
-    setChildGuid(guid) {
-        this.formComponent?.setGuid(this.guids ?? [guid], this.isApprove);
+    setChildGuid(guids) {
+        this.formComponent?.setGuid(guids, this.approvalGroupGuid, this.isApprove);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", 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: "18.0.4", 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=\"approval-detail-button\" *ngIf=\"!formComponent?.isLoading; else loading\" [config]=\"btnConfig\" button />\n\n    <ng-template #loading>\n        <ion-skeleton-text class=\"m-0 sk-btn\" button />\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", 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    @if (!formComponent?.isLoading) {\n        <up-btn-group id=\"approval-detail-button\" [config]=\"btnConfig\" button />\n    }\n    @else {\n        <ion-skeleton-text class=\"m-0 sk-btn\" button />\n    }\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: 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: "18.0.4", ngImport: i0, type: ApprovalDetailComponent, decorators: [{
             type: Component,
@@ -3596,12 +3652,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                         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=\"approval-detail-button\" *ngIf=\"!formComponent?.isLoading; else loading\" [config]=\"btnConfig\" button />\n\n    <ng-template #loading>\n        <ion-skeleton-text class=\"m-0 sk-btn\" button />\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" }]
+                    ], template: "<up-column-header-container header=\"Approval Detail\" prevUrl=\"/approval\" class=\"bg-white\">\n    @if (!formComponent?.isLoading) {\n        <up-btn-group id=\"approval-detail-button\" [config]=\"btnConfig\" button />\n    }\n    @else {\n        <ion-skeleton-text class=\"m-0 sk-btn\" button />\n    }\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]