imm-element-ui 1.4.5 → 1.4.6

package/fesm2022/imm-element-ui.mjs

@@ -3151,14 +3151,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class UploadComponent {
-    constructor(http, action, renderer) {
+    constructor(http, action, renderer, datePipe) {
         this.http = http;
         this.action = action;
         this.renderer = renderer;
+        this.datePipe = datePipe;
         this.field = input();
         this.props = {};
         this.fileList = [];
         this.deleteHooks = [];
+        this.loading = false;
+        this.counter = 0;
         effect(() => {
             if (this.field()) {
                 this.props = this.field().uploadProps;
@@ -3206,9 +3209,19 @@ class UploadComponent {
         return this.http.post('filerDelete', { fileName: fileStr });
     }
     uploadHandler(field, event, fu) {
-        this.uploadFile(event.files[0]).subscribe((response) => {
-            this.fileList?.push(response.body.fileName);
-            this.field()?.fieldControl?.setValue(this.fileList);
+        this.initLoading(event.files.length);
+        event.files.forEach((v) => {
+            this.uploadFile(v).subscribe({
+                next: (response) => {
+                    this.updateLoading(fu);
+                    this.fileList?.push(response.body.fid);
+                    this.field()?.fieldControl?.setValue(this.fileList);
+                },
+                error: (error) => {
+                    this.initLoading(0);
+                    console.error(error);
+                },
+            });
         });
     }
     deleteHandler(fileStr, index) {
@@ -3237,7 +3250,23 @@ class UploadComponent {
             this.field().fieldControl.disable({ emitEvent: false });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, deps: [{ token: i1$4.HttpClient }, { token: ActionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    initLoading(counter) {
+        this.counter = counter;
+        if (counter == 0) {
+            this.loading = false;
+            return;
+        }
+        this.loading = true;
+    }
+    updateLoading(fu) {
+        this.counter--;
+        console.log('----counter', this.counter);
+        if (this.counter === 0) {
+            this.loading = false;
+            fu.clear();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, deps: [{ token: i1$4.HttpClient }, { token: ActionService }, { token: i0.Renderer2 }, { token: i1$3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UploadComponent, isStandalone: true, selector: "form-upload", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "uploadCompRef", first: true, predicate: ["uploadComp"], descendants: true, read: ElementRef }], ngImport: i0, template: `<p-fileUpload
 		#fu
 		auto
@@ -3274,8 +3303,8 @@ class UploadComponent {
 				<span
 					><span
 						style="font-size: 12px; margin-right: 2.5px"
-						class="pi pi-upload"></span
-					>上传</span
+						[class]="'pi' + (loading ? ' pi-spin pi-spinner' : ' pi-upload')"></span
+					>{{ (loading ? 'modal.uploading' : 'modal.selectFile') | translate }}</span
 				>
 			</div>
 		</ng-template>
@@ -3303,11 +3332,11 @@ class UploadComponent {
 			}
 		</ng-template>
 		<ng-template #file> </ng-template>
-	</p-fileUpload>`, isInline: true, styles: [":host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:1}:host ::ng-deep .p-inputtext{border-width:0;border-radius:0;box-shadow:none;background:#fff;padding:0}:host ::ng-deep .p-inputtext:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-inputtext:not(:disabled):hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-inputtext:not(:disabled).ng-hovered{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-inputtext:focus{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .ng-hovered .p-autocomplete-input:not(.p-disabled){border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select-label{padding:0}:host ::ng-deep .p-select{border-width:0;border-radius:0;box-shadow:none;background:#fff}:host ::ng-deep .p-select .p-select-dropdown{display:none}:host ::ng-deep .p-select .p-select-clear-icon{display:none}:host ::ng-deep .p-select:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-select-open{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select-open .p-select-dropdown{display:flex}:host ::ng-deep .p-select-open .p-select-clear-icon{display:flex}:host ::ng-deep .p-select:hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select:hover .p-select-dropdown{display:flex}:host ::ng-deep .p-select:hover .p-select-clear-icon{display:flex}:host ::ng-deep .p-select.ng-hovered{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select.ng-hovered .p-select-dropdown{display:flex}:host ::ng-deep .p-select.ng-hovered .p-select-clear-icon{display:flex}:host ::ng-deep .p-multiselect-label{padding:0}:host ::ng-deep .p-multiselect{border-width:0;border-radius:0;background:#fff;box-shadow:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-multiselect-open{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect-open .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-multiselect:not(.p-disabled):hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect:not(.p-disabled):hover .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-multiselect:not(.p-disabled).ng-hovered{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect:not(.p-disabled).ng-hovered .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-textarea{border-radius:0;box-shadow:none;padding:0 .25rem;background:#fff;resize:none}:host ::ng-deep .p-textarea:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border:1px solid var(--p-red-500)!important}:host ::ng-deep .p-textarea:not(:disabled):hover{border:1px solid var(--p-primary-color);resize:vertical}:host ::ng-deep .p-textarea:not(:disabled).ng-hovered{border:1px solid var(--p-primary-color);resize:vertical}:host ::ng-deep .p-textarea:focus{border:1px solid var(--p-primary-color);resize:vertical}:host ::ng-deep .p-treeselect-label{padding:0}:host ::ng-deep .p-treeselect{border-width:0;border-radius:0;box-shadow:none;background:#fff}:host ::ng-deep .p-treeselect .p-treeselect-dropdown{display:none}:host ::ng-deep .ng-invalid.ng-dirty>.p-treeselect{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-treeselect-open{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-treeselect-open .p-treeselect-dropdown{display:flex}:host ::ng-deep .p-treeselect:not(.p-disabled).p-focus{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-treeselect:not(.p-disabled).p-focus .p-treeselect-dropdown{display:flex}:host ::ng-deep .p-treeselect:not(.p-disabled):hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-treeselect:not(.p-disabled):hover .p-treeselect-dropdown{display:flex}:host ::ng-deep .ng-hovered>.p-treeselect:not(.p-disabled){border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .ng-hovered>.p-treeselect:not(.p-disabled) .p-treeselect-dropdown{display:flex}:host ::ng-deep .p-menubar{border-width:0;padding:0}:host ::ng-deep .p-menubar-submenu{z-index:3}:host ::ng-deep .p-fileupload-advanced{border-width:0;border-radius:0;background-color:#fff}:host ::ng-deep .p-fileupload-header{padding:0}:host ::ng-deep .p-fileupload-content{padding:0;display:block;border-width:0}:host ::ng-deep .p-inputnumber:not(.ng-valid).ng-dirty>.p-inputtext{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-inputnumber.ng-hovered:not(.p-disabled)>.p-inputtext{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .ng-invalid.ng-dirty>.p-datepicker .p-inputtext{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .ng-hovered>.p-datepicker:not(.p-disabled) .p-inputtext{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .cm-editor{border:1px solid #cbd5e1}:host ::ng-deep .cm-editor.cm-focused{outline:none!important;border:1px solid var(--p-primary-color)}:host ::ng-deep .cm-editor:hover{border:1px solid var(--p-primary-color)}:host ::ng-deep .cm-editor.ng-hovered{border:1px solid var(--p-primary-color)}:host ::ng-deep .cm-gutters{background-color:#fff;border:\"none\"}:host ::ng-deep .cm-activeLineGutter{background-color:#fff}\n", ".file-item{border-top:solid 1px #fff}.upload-btn{border:solid 1px transparent}.upload-btn.upload-disable:hover{cursor:default}.upload-btn:not(.upload-disable):hover{border:solid 1px var(--p-primary-color);background:var(--p-primary-50);cursor:pointer}.upload-btn:not(.upload-disable).ng-hovered{border:solid 1px var(--p-primary-color);background:var(--p-primary-50);cursor:pointer}.file-name{font-size:12px}.file-name:hover{cursor:pointer;color:var(--p-primary-color)}:is() .p-image-preview-mask{position:inherit;opacity:1;justify-content:left;color:#334155}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+	</p-fileUpload>`, isInline: true, styles: [":host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:1}:host ::ng-deep .p-inputtext{border-width:0;border-radius:0;box-shadow:none;background:#fff;padding:0}:host ::ng-deep .p-inputtext:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-inputtext:not(:disabled):hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-inputtext:not(:disabled).ng-hovered{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-inputtext:focus{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .ng-hovered .p-autocomplete-input:not(.p-disabled){border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select-label{padding:0}:host ::ng-deep .p-select{border-width:0;border-radius:0;box-shadow:none;background:#fff}:host ::ng-deep .p-select .p-select-dropdown{display:none}:host ::ng-deep .p-select .p-select-clear-icon{display:none}:host ::ng-deep .p-select:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-select-open{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select-open .p-select-dropdown{display:flex}:host ::ng-deep .p-select-open .p-select-clear-icon{display:flex}:host ::ng-deep .p-select:hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select:hover .p-select-dropdown{display:flex}:host ::ng-deep .p-select:hover .p-select-clear-icon{display:flex}:host ::ng-deep .p-select.ng-hovered{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select.ng-hovered .p-select-dropdown{display:flex}:host ::ng-deep .p-select.ng-hovered .p-select-clear-icon{display:flex}:host ::ng-deep .p-multiselect-label{padding:0}:host ::ng-deep .p-multiselect{border-width:0;border-radius:0;background:#fff;box-shadow:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-multiselect-open{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect-open .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-multiselect:not(.p-disabled):hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect:not(.p-disabled):hover .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-multiselect:not(.p-disabled).ng-hovered{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect:not(.p-disabled).ng-hovered .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-textarea{border-radius:0;box-shadow:none;padding:0 .25rem;background:#fff;resize:none}:host ::ng-deep .p-textarea:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border:1px solid var(--p-red-500)!important}:host ::ng-deep .p-textarea:not(:disabled):hover{border:1px solid var(--p-primary-color);resize:vertical}:host ::ng-deep .p-textarea:not(:disabled).ng-hovered{border:1px solid var(--p-primary-color);resize:vertical}:host ::ng-deep .p-textarea:focus{border:1px solid var(--p-primary-color);resize:vertical}:host ::ng-deep .p-treeselect-label{padding:0}:host ::ng-deep .p-treeselect{border-width:0;border-radius:0;box-shadow:none;background:#fff}:host ::ng-deep .p-treeselect .p-treeselect-dropdown{display:none}:host ::ng-deep .ng-invalid.ng-dirty>.p-treeselect{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-treeselect-open{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-treeselect-open .p-treeselect-dropdown{display:flex}:host ::ng-deep .p-treeselect:not(.p-disabled).p-focus{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-treeselect:not(.p-disabled).p-focus .p-treeselect-dropdown{display:flex}:host ::ng-deep .p-treeselect:not(.p-disabled):hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-treeselect:not(.p-disabled):hover .p-treeselect-dropdown{display:flex}:host ::ng-deep .ng-hovered>.p-treeselect:not(.p-disabled){border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .ng-hovered>.p-treeselect:not(.p-disabled) .p-treeselect-dropdown{display:flex}:host ::ng-deep .p-menubar{border-width:0;padding:0}:host ::ng-deep .p-menubar-submenu{z-index:3}:host ::ng-deep .p-fileupload-advanced{border-width:0;border-radius:0;background-color:#fff}:host ::ng-deep .p-fileupload-header{padding:0}:host ::ng-deep .p-fileupload-content{padding:0;display:block;border-width:0}:host ::ng-deep .p-inputnumber:not(.ng-valid).ng-dirty>.p-inputtext{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-inputnumber.ng-hovered:not(.p-disabled)>.p-inputtext{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .ng-invalid.ng-dirty>.p-datepicker .p-inputtext{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .ng-hovered>.p-datepicker:not(.p-disabled) .p-inputtext{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .cm-editor{border:1px solid #cbd5e1}:host ::ng-deep .cm-editor.cm-focused{outline:none!important;border:1px solid var(--p-primary-color)}:host ::ng-deep .cm-editor:hover{border:1px solid var(--p-primary-color)}:host ::ng-deep .cm-editor.ng-hovered{border:1px solid var(--p-primary-color)}:host ::ng-deep .cm-gutters{background-color:#fff;border:\"none\"}:host ::ng-deep .cm-activeLineGutter{background-color:#fff}\n", ".file-item{border-top:solid 1px #fff}.upload-btn{border:solid 1px transparent}.upload-btn.upload-disable:hover{cursor:default}.upload-btn:not(.upload-disable):hover{border:solid 1px var(--p-primary-color);background:var(--p-primary-50);cursor:pointer}.upload-btn:not(.upload-disable).ng-hovered{border:solid 1px var(--p-primary-color);background:var(--p-primary-50);cursor:pointer}.file-name{font-size:12px}.file-name:hover{cursor:pointer;color:var(--p-primary-color)}:is() .p-image-preview-mask{position:inherit;opacity:1;justify-content:left;color:#334155}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'form-upload', standalone: true, imports: [FileUpload, ButtonModule, Image, ReactiveFormsModule], template: `<p-fileUpload
+            args: [{ selector: 'form-upload', standalone: true, imports: [FileUpload, ButtonModule, ReactiveFormsModule, TranslatePipe], template: `<p-fileUpload
 		#fu
 		auto
 		[id]="field()?.uuid"
@@ -3343,8 +3372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 				<span
 					><span
 						style="font-size: 12px; margin-right: 2.5px"
-						class="pi pi-upload"></span
-					>上传</span
+						[class]="'pi' + (loading ? ' pi-spin pi-spinner' : ' pi-upload')"></span
+					>{{ (loading ? 'modal.uploading' : 'modal.selectFile') | translate }}</span
 				>
 			</div>
 		</ng-template>
@@ -3373,7 +3402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 		</ng-template>
 		<ng-template #file> </ng-template>
 	</p-fileUpload>`, styles: [":host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:1}:host ::ng-deep .p-inputtext{border-width:0;border-radius:0;box-shadow:none;background:#fff;padding:0}:host ::ng-deep .p-inputtext:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-inputtext:not(:disabled):hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-inputtext:not(:disabled).ng-hovered{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-inputtext:focus{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .ng-hovered .p-autocomplete-input:not(.p-disabled){border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select-label{padding:0}:host ::ng-deep .p-select{border-width:0;border-radius:0;box-shadow:none;background:#fff}:host ::ng-deep .p-select .p-select-dropdown{display:none}:host ::ng-deep .p-select .p-select-clear-icon{display:none}:host ::ng-deep .p-select:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-select-open{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select-open .p-select-dropdown{display:flex}:host ::ng-deep .p-select-open .p-select-clear-icon{display:flex}:host ::ng-deep .p-select:hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select:hover .p-select-dropdown{display:flex}:host ::ng-deep .p-select:hover .p-select-clear-icon{display:flex}:host ::ng-deep .p-select.ng-hovered{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-select.ng-hovered .p-select-dropdown{display:flex}:host ::ng-deep .p-select.ng-hovered .p-select-clear-icon{display:flex}:host ::ng-deep .p-multiselect-label{padding:0}:host ::ng-deep .p-multiselect{border-width:0;border-radius:0;background:#fff;box-shadow:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-multiselect-open{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect-open .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-multiselect:not(.p-disabled):hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect:not(.p-disabled):hover .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-multiselect:not(.p-disabled).ng-hovered{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-multiselect:not(.p-disabled).ng-hovered .p-multiselect-dropdown{display:flex}:host ::ng-deep .p-textarea{border-radius:0;box-shadow:none;padding:0 .25rem;background:#fff;resize:none}:host ::ng-deep .p-textarea:not(.ng-valid).ng-dirty{background:var(--p-red-200)!important;border:1px solid var(--p-red-500)!important}:host ::ng-deep .p-textarea:not(:disabled):hover{border:1px solid var(--p-primary-color);resize:vertical}:host ::ng-deep .p-textarea:not(:disabled).ng-hovered{border:1px solid var(--p-primary-color);resize:vertical}:host ::ng-deep .p-textarea:focus{border:1px solid var(--p-primary-color);resize:vertical}:host ::ng-deep .p-treeselect-label{padding:0}:host ::ng-deep .p-treeselect{border-width:0;border-radius:0;box-shadow:none;background:#fff}:host ::ng-deep .p-treeselect .p-treeselect-dropdown{display:none}:host ::ng-deep .ng-invalid.ng-dirty>.p-treeselect{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-treeselect-open{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-treeselect-open .p-treeselect-dropdown{display:flex}:host ::ng-deep .p-treeselect:not(.p-disabled).p-focus{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-treeselect:not(.p-disabled).p-focus .p-treeselect-dropdown{display:flex}:host ::ng-deep .p-treeselect:not(.p-disabled):hover{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .p-treeselect:not(.p-disabled):hover .p-treeselect-dropdown{display:flex}:host ::ng-deep .ng-hovered>.p-treeselect:not(.p-disabled){border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .ng-hovered>.p-treeselect:not(.p-disabled) .p-treeselect-dropdown{display:flex}:host ::ng-deep .p-menubar{border-width:0;padding:0}:host ::ng-deep .p-menubar-submenu{z-index:3}:host ::ng-deep .p-fileupload-advanced{border-width:0;border-radius:0;background-color:#fff}:host ::ng-deep .p-fileupload-header{padding:0}:host ::ng-deep .p-fileupload-content{padding:0;display:block;border-width:0}:host ::ng-deep .p-inputnumber:not(.ng-valid).ng-dirty>.p-inputtext{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .p-inputnumber.ng-hovered:not(.p-disabled)>.p-inputtext{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .ng-invalid.ng-dirty>.p-datepicker .p-inputtext{background:var(--p-red-200)!important;border-bottom:1px solid var(--p-red-500)!important}:host ::ng-deep .ng-hovered>.p-datepicker:not(.p-disabled) .p-inputtext{border-bottom:1px solid var(--p-primary-color)}:host ::ng-deep .cm-editor{border:1px solid #cbd5e1}:host ::ng-deep .cm-editor.cm-focused{outline:none!important;border:1px solid var(--p-primary-color)}:host ::ng-deep .cm-editor:hover{border:1px solid var(--p-primary-color)}:host ::ng-deep .cm-editor.ng-hovered{border:1px solid var(--p-primary-color)}:host ::ng-deep .cm-gutters{background-color:#fff;border:\"none\"}:host ::ng-deep .cm-activeLineGutter{background-color:#fff}\n", ".file-item{border-top:solid 1px #fff}.upload-btn{border:solid 1px transparent}.upload-btn.upload-disable:hover{cursor:default}.upload-btn:not(.upload-disable):hover{border:solid 1px var(--p-primary-color);background:var(--p-primary-50);cursor:pointer}.upload-btn:not(.upload-disable).ng-hovered{border:solid 1px var(--p-primary-color);background:var(--p-primary-50);cursor:pointer}.file-name{font-size:12px}.file-name:hover{cursor:pointer;color:var(--p-primary-color)}:is() .p-image-preview-mask{position:inherit;opacity:1;justify-content:left;color:#334155}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: ActionService }, { type: i0.Renderer2 }], propDecorators: { uploadCompRef: [{
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: ActionService }, { type: i0.Renderer2 }, { type: i1$3.DatePipe }], propDecorators: { uploadCompRef: [{
                 type: ViewChild,
                 args: ['uploadComp', { read: ElementRef, static: false }]
             }] } });
@@ -3390,9 +3419,12 @@ class ImageComponent {
         this.deleteHooks = [];
         this.loading = false;
         this.counter = 0;
+        this.imageWidth = 0;
+        this.imageHeight = 0;
         effect(() => {
             if (this.field()) {
                 this.props = this.field().imageProps;
+                this.initImageSize();
                 this.handleDisabled();
                 this.handleHookChange();
                 this.afterSubmit();
@@ -3420,6 +3452,16 @@ class ImageComponent {
         }
         callback();
     }
+    initImageSize() {
+        if (this.props.size !== 'small') {
+            this.imageWidth = 75;
+            this.imageHeight = 100;
+        }
+        else {
+            this.imageWidth = 35;
+            this.imageHeight = 35;
+        }
+    }
     uploadImage(file) {
         const formData = new FormData();
         formData.append('file', file);
@@ -3502,7 +3544,8 @@ class ImageComponent {
             reader.readAsDataURL(imageFile);
         });
     }
-    deleteHandler(image, index) {
+    deleteHandler(event, image, index) {
+        event.stopPropagation();
         this.deleteHooks.push(this.delImage(image));
         this.imageList = this.imageList?.filter((value, i) => index != i);
         this.field()?.fieldControl?.setValue(this.imageList);
@@ -3550,7 +3593,6 @@ class ImageComponent {
     }
     updateLoading(fu) {
         this.counter--;
-        console.log('----counter', this.counter);
         if (this.counter === 0) {
             this.loading = false;
             fu.clear();
@@ -3619,39 +3661,37 @@ class ImageComponent {
 									icon="pi pi-times"
 									severity="danger"
 									size="small"
-									(onClick)="deleteHandler(image, index)"
+									(onClick)="deleteHandler($event, image, index)"
 									[text]="true" />
 							}
 						</div>
 					}
 				} @else {
-					<div class="flex gap-2 mt-2">
+					<div class="flex gap-2 mt-1 flex-wrap">
 						@for (image of imageList; track image; let index = $index) {
-							<div class="border">
-								@if (!field()?.fieldControl?.disabled) {
-									<div class="flex flex-row-reverse">
-										<p-button
-											icon="pi pi-times"
-											severity="danger"
-											size="small"
-											(onClick)="deleteHandler(image, index)"
-											[text]="true" />
-									</div>
-								}
+							<div [class]="'border h-[' + (imageHeight + 15) + 'px]'">
 								<p-image
 									[src]="'https://hrimage.myfoodiepet.com//' + image"
 									[preview]="true"
 									(onShow)="ajustedImage($event)"
 									alt="Image">
 									<ng-template #indicator>
-										<i class="pi pi-search"></i>
+										@if (!field()?.fieldControl?.disabled) {
+											<div [style]="{ position: 'relative', width: imageWidth + 10 + 'px', height: imageHeight + 10 + 'px' }">
+												<div
+													style="position: absolute; top: 0; right: 0; z-index: 9999; background: red; padding: 1px;"
+													(click)="deleteHandler($event, image, index)">
+													<i class="pi pi-times text-[12px]"></i>
+												</div>
+											</div>
+										}
 									</ng-template>
 									<ng-template #image>
 										<div class="p-2">
 											<img
 												[src]="'https://hrimage.myfoodiepet.com//' + image"
 												alt="image"
-												style="width: 85px; height: 100px; object-fit: cover" />
+												[style]="{ width: imageWidth + 'px', height: imageHeight + 'px', objectFit: 'cover' }" />
 										</div>
 									</ng-template>
 								</p-image>
@@ -3728,39 +3768,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 									icon="pi pi-times"
 									severity="danger"
 									size="small"
-									(onClick)="deleteHandler(image, index)"
+									(onClick)="deleteHandler($event, image, index)"
 									[text]="true" />
 							}
 						</div>
 					}
 				} @else {
-					<div class="flex gap-2 mt-2">
+					<div class="flex gap-2 mt-1 flex-wrap">
 						@for (image of imageList; track image; let index = $index) {
-							<div class="border">
-								@if (!field()?.fieldControl?.disabled) {
-									<div class="flex flex-row-reverse">
-										<p-button
-											icon="pi pi-times"
-											severity="danger"
-											size="small"
-											(onClick)="deleteHandler(image, index)"
-											[text]="true" />
-									</div>
-								}
+							<div [class]="'border h-[' + (imageHeight + 15) + 'px]'">
 								<p-image
 									[src]="'https://hrimage.myfoodiepet.com//' + image"
 									[preview]="true"
 									(onShow)="ajustedImage($event)"
 									alt="Image">
 									<ng-template #indicator>
-										<i class="pi pi-search"></i>
+										@if (!field()?.fieldControl?.disabled) {
+											<div [style]="{ position: 'relative', width: imageWidth + 10 + 'px', height: imageHeight + 10 + 'px' }">
+												<div
+													style="position: absolute; top: 0; right: 0; z-index: 9999; background: red; padding: 1px;"
+													(click)="deleteHandler($event, image, index)">
+													<i class="pi pi-times text-[12px]"></i>
+												</div>
+											</div>
+										}
 									</ng-template>
 									<ng-template #image>
 										<div class="p-2">
 											<img
 												[src]="'https://hrimage.myfoodiepet.com//' + image"
 												alt="image"
-												style="width: 85px; height: 100px; object-fit: cover" />
+												[style]="{ width: imageWidth + 'px', height: imageHeight + 'px', objectFit: 'cover' }" />
 										</div>
 									</ng-template>
 								</p-image>
@@ -8425,6 +8463,7 @@ class StepsComponent {
         this.startSteps = [];
         this.endSteps = [];
         this.maxWidth = 0;
+        this.visible = true;
         effect(() => {
             let current = this.current();
             if (current != 0 && this.steps().length > 0) {
@@ -8438,6 +8477,15 @@ class StepsComponent {
             steps$.unsubscribe();
         });
     }
+    ngAfterViewInit() {
+        this.i18n.change.subscribe((res) => {
+            this.visible = false;
+            setTimeout(() => {
+                this.visible = true;
+                this.initSteps();
+            }, 100);
+        });
+    }
     initSteps() {
         this.calcMaxWidth();
         this.initWidthList();
@@ -8585,11 +8633,11 @@ class StepsComponent {
         this.excludeValues.set(excludeValues);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepsComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: StepsComponent, isStandalone: true, selector: "custom-steps", inputs: { modelLog: { classPropertyName: "modelLog", publicName: "modelLog", isSignal: true, isRequired: false, transformFunction: null }, needSelfAdjusting: { classPropertyName: "needSelfAdjusting", publicName: "needSelfAdjusting", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, authLevel: { classPropertyName: "authLevel", publicName: "authLevel", isSignal: true, isRequired: false, transformFunction: null }, isClick: { classPropertyName: "isClick", publicName: "isClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\r\n\t#container\r\n\tclass=\"flex my-1 w-full justify-end\">\r\n\t@for (st of displaySteps(); track st; let i = $index) {\r\n\t\t@if (st.value === 'start') {\r\n\t\t\t<div\r\n\t\t\t\t#startItem\r\n\t\t\t\t[class]=\"getClass(i, ['start-item'])\"\r\n\t\t\t\t(click)=\"showStartSteps($event, startOp)\">\r\n\t\t\t\t<span>...</span>\r\n\t\t\t</div>\r\n\t\t\t<p-popover\r\n\t\t\t\t#startOp\r\n\t\t\t\t[styleClass]=\"'pop-steps start-steps'\"\r\n\t\t\t\t[appendTo]=\"startItem\">\r\n\t\t\t\t<p-listbox\r\n\t\t\t\t\t[options]=\"startSteps\"\r\n\t\t\t\t\t(onChange)=\"onStartStepsChange($event)\"\r\n\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\tclass=\"w-full md:w-56\">\r\n\t\t\t\t\t<ng-template let-country pTemplate=\"item\">\r\n            <div class=\"flex items-center gap-2\">\r\n                <div>{{ country.i18nKey ? i18n.fanyi(country.i18nKey) : country.label }}</div>\r\n            </div>\r\n        </ng-template>\r\n\t\t\t\t</p-listbox>\r\n\t\t\t</p-popover>\r\n\t\t} @else if (st.value === 'end') {\r\n\t\t\t<div\r\n\t\t\t\t#endItem\r\n\t\t\t\t[class]=\"getClass(i, ['end-item'])\"\r\n\t\t\t\t(click)=\"showEndSteps($event, endOp)\">\r\n\t\t\t\t<span>...</span>\r\n\t\t\t</div>\r\n\t\t\t<p-popover\r\n\t\t\t\t#endOp\r\n\t\t\t\t[styleClass]=\"'pop-steps end-steps'\"\r\n\t\t\t\t[appendTo]=\"endItem\">\r\n\t\t\t\t<p-listbox\r\n\t\t\t\t\t[options]=\"endSteps\"\r\n\t\t\t\t\t(onChange)=\"onEndStepsChange($event)\"\r\n\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\tclass=\"w-full md:w-56\">\r\n\t\t\t\t\t<ng-template let-country pTemplate=\"item\">\r\n            <div class=\"flex items-center gap-2\">\r\n                <div>{{ country.i18nKey ? i18n.fanyi(country.i18nKey) : country.label }}</div>\r\n            </div>\r\n        </ng-template>\r\n\t\t\t\t</p-listbox>\r\n\t\t\t</p-popover>\r\n\t\t} @else {\r\n\t\t\t<div\r\n\t\t\t\t[class]=\"getClass(i, [])\"\r\n\t\t\t\t(click)=\"changeStatus(st)\">\r\n\t\t\t\t<span>{{ st.i18nKey ? i18n.fanyi(st.i18nKey) : st.label }}</span>\r\n\t\t\t</div>\r\n\t\t}\r\n\t}\r\n</div>\r\n", styles: ["::ng-deep .pop-steps.p-popover.p-popover-flipped:before{display:none}::ng-deep .pop-steps.p-popover.p-popover-flipped:after{display:none}::ng-deep .pop-steps.p-popover:before{display:none}::ng-deep .pop-steps.p-popover:after{display:none}::ng-deep .pop-steps.p-popover-flipped{margin-top:-5px}::ng-deep .pop-steps .p-popover-content{padding:0}::ng-deep .end-steps.p-popover{margin-top:2.5px;z-index:999;position:absolute!important;left:auto!important;right:0!important;top:100%!important;min-width:125px}::ng-deep .start-steps.p-popover{margin-top:2.5px;z-index:999;position:absolute!important;left:0!important;right:auto!important;top:100%!important;min-width:125px}.step-item{position:relative;height:32px;padding:0 5px;background-color:#e7e9ed}.step-item span{color:#334155c2;white-space:nowrap}.step-item.step-first{padding-left:15px}.step-item.step-last{padding-right:15px}.step-item:not(.step-first){border-left:15px solid transparent;margin-left:2px}.step-item:not(.step-first):before{content:\"\";position:absolute;top:0;left:-15px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:12px solid white}.step-item:not(.step-last):after{content:\"\";position:absolute;top:0;right:-12px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:12px solid #e7e9ed;z-index:2}.step-item.step-active{background-color:var(--p-primary-200)}.step-item.step-active span{color:#334155}.step-item.step-active:after{border-left:12px solid var(--p-primary-200)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i1$9.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad"] }, { kind: "directive", type: i1$8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: StepsComponent, isStandalone: true, selector: "custom-steps", inputs: { modelLog: { classPropertyName: "modelLog", publicName: "modelLog", isSignal: true, isRequired: false, transformFunction: null }, needSelfAdjusting: { classPropertyName: "needSelfAdjusting", publicName: "needSelfAdjusting", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, authLevel: { classPropertyName: "authLevel", publicName: "authLevel", isSignal: true, isRequired: false, transformFunction: null }, isClick: { classPropertyName: "isClick", publicName: "isClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (visible) {\r\n\t<div\r\n\t\t#container\r\n\t\tclass=\"flex my-1 w-full justify-end\">\r\n\t\t@for (st of displaySteps(); track st; let i = $index) {\r\n\t\t\t@if (st.value === 'start') {\r\n\t\t\t\t<div\r\n\t\t\t\t\t#startItem\r\n\t\t\t\t\t[class]=\"getClass(i, ['start-item'])\"\r\n\t\t\t\t\t(click)=\"showStartSteps($event, startOp)\">\r\n\t\t\t\t\t<span>...</span>\r\n\t\t\t\t</div>\r\n\t\t\t\t<p-popover\r\n\t\t\t\t\t#startOp\r\n\t\t\t\t\t[styleClass]=\"'pop-steps start-steps'\"\r\n\t\t\t\t\t[appendTo]=\"startItem\">\r\n\t\t\t\t\t<p-listbox\r\n\t\t\t\t\t\t[options]=\"startSteps\"\r\n\t\t\t\t\t\t(onChange)=\"onStartStepsChange($event)\"\r\n\t\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\t\tclass=\"w-full md:w-56\">\r\n\t\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\t\tlet-country\r\n\t\t\t\t\t\t\tpTemplate=\"item\">\r\n\t\t\t\t\t\t\t<div class=\"flex items-center gap-2\">\r\n\t\t\t\t\t\t\t\t<div>{{ country.i18nKey ? i18n.fanyi(country.i18nKey) : country.label }}</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</p-listbox>\r\n\t\t\t\t</p-popover>\r\n\t\t\t} @else if (st.value === 'end') {\r\n\t\t\t\t<div\r\n\t\t\t\t\t#endItem\r\n\t\t\t\t\t[class]=\"getClass(i, ['end-item'])\"\r\n\t\t\t\t\t(click)=\"showEndSteps($event, endOp)\">\r\n\t\t\t\t\t<span>...</span>\r\n\t\t\t\t</div>\r\n\t\t\t\t<p-popover\r\n\t\t\t\t\t#endOp\r\n\t\t\t\t\t[styleClass]=\"'pop-steps end-steps'\"\r\n\t\t\t\t\t[appendTo]=\"endItem\">\r\n\t\t\t\t\t<p-listbox\r\n\t\t\t\t\t\t[options]=\"endSteps\"\r\n\t\t\t\t\t\t(onChange)=\"onEndStepsChange($event)\"\r\n\t\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\t\tclass=\"w-full md:w-56\">\r\n\t\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\t\tlet-country\r\n\t\t\t\t\t\t\tpTemplate=\"item\">\r\n\t\t\t\t\t\t\t<div class=\"flex items-center gap-2\">\r\n\t\t\t\t\t\t\t\t<div>{{ country.i18nKey ? i18n.fanyi(country.i18nKey) : country.label }}</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</p-listbox>\r\n\t\t\t\t</p-popover>\r\n\t\t\t} @else {\r\n\t\t\t\t<div\r\n\t\t\t\t\t[class]=\"getClass(i, [])\"\r\n\t\t\t\t\t(click)=\"changeStatus(st)\">\r\n\t\t\t\t\t<span>{{ st.i18nKey ? i18n.fanyi(st.i18nKey) : st.label }}</span>\r\n\t\t\t\t</div>\r\n\t\t\t}\r\n\t\t}\r\n\t</div>\r\n}\r\n", styles: ["::ng-deep .pop-steps.p-popover.p-popover-flipped:before{display:none}::ng-deep .pop-steps.p-popover.p-popover-flipped:after{display:none}::ng-deep .pop-steps.p-popover:before{display:none}::ng-deep .pop-steps.p-popover:after{display:none}::ng-deep .pop-steps.p-popover-flipped{margin-top:-5px}::ng-deep .pop-steps .p-popover-content{padding:0}::ng-deep .end-steps.p-popover{margin-top:2.5px;z-index:999;position:absolute!important;left:auto!important;right:0!important;top:100%!important;min-width:125px}::ng-deep .start-steps.p-popover{margin-top:2.5px;z-index:999;position:absolute!important;left:0!important;right:auto!important;top:100%!important;min-width:125px}.step-item{position:relative;height:32px;padding:0 5px;background-color:#e7e9ed}.step-item span{color:#334155c2;white-space:nowrap}.step-item.step-first{padding-left:15px}.step-item.step-last{padding-right:15px}.step-item:not(.step-first){border-left:15px solid transparent;margin-left:2px}.step-item:not(.step-first):before{content:\"\";position:absolute;top:0;left:-15px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:12px solid white}.step-item:not(.step-last):after{content:\"\";position:absolute;top:0;right:-12px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:12px solid #e7e9ed;z-index:2}.step-item.step-active{background-color:var(--p-primary-200)}.step-item.step-active span{color:#334155}.step-item.step-active:after{border-left:12px solid var(--p-primary-200)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i1$9.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad"] }, { kind: "directive", type: i1$8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'custom-steps', standalone: true, imports: [FormsModule, ListboxModule, Popover], template: "<div\r\n\t#container\r\n\tclass=\"flex my-1 w-full justify-end\">\r\n\t@for (st of displaySteps(); track st; let i = $index) {\r\n\t\t@if (st.value === 'start') {\r\n\t\t\t<div\r\n\t\t\t\t#startItem\r\n\t\t\t\t[class]=\"getClass(i, ['start-item'])\"\r\n\t\t\t\t(click)=\"showStartSteps($event, startOp)\">\r\n\t\t\t\t<span>...</span>\r\n\t\t\t</div>\r\n\t\t\t<p-popover\r\n\t\t\t\t#startOp\r\n\t\t\t\t[styleClass]=\"'pop-steps start-steps'\"\r\n\t\t\t\t[appendTo]=\"startItem\">\r\n\t\t\t\t<p-listbox\r\n\t\t\t\t\t[options]=\"startSteps\"\r\n\t\t\t\t\t(onChange)=\"onStartStepsChange($event)\"\r\n\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\tclass=\"w-full md:w-56\">\r\n\t\t\t\t\t<ng-template let-country pTemplate=\"item\">\r\n            <div class=\"flex items-center gap-2\">\r\n                <div>{{ country.i18nKey ? i18n.fanyi(country.i18nKey) : country.label }}</div>\r\n            </div>\r\n        </ng-template>\r\n\t\t\t\t</p-listbox>\r\n\t\t\t</p-popover>\r\n\t\t} @else if (st.value === 'end') {\r\n\t\t\t<div\r\n\t\t\t\t#endItem\r\n\t\t\t\t[class]=\"getClass(i, ['end-item'])\"\r\n\t\t\t\t(click)=\"showEndSteps($event, endOp)\">\r\n\t\t\t\t<span>...</span>\r\n\t\t\t</div>\r\n\t\t\t<p-popover\r\n\t\t\t\t#endOp\r\n\t\t\t\t[styleClass]=\"'pop-steps end-steps'\"\r\n\t\t\t\t[appendTo]=\"endItem\">\r\n\t\t\t\t<p-listbox\r\n\t\t\t\t\t[options]=\"endSteps\"\r\n\t\t\t\t\t(onChange)=\"onEndStepsChange($event)\"\r\n\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\tclass=\"w-full md:w-56\">\r\n\t\t\t\t\t<ng-template let-country pTemplate=\"item\">\r\n            <div class=\"flex items-center gap-2\">\r\n                <div>{{ country.i18nKey ? i18n.fanyi(country.i18nKey) : country.label }}</div>\r\n            </div>\r\n        </ng-template>\r\n\t\t\t\t</p-listbox>\r\n\t\t\t</p-popover>\r\n\t\t} @else {\r\n\t\t\t<div\r\n\t\t\t\t[class]=\"getClass(i, [])\"\r\n\t\t\t\t(click)=\"changeStatus(st)\">\r\n\t\t\t\t<span>{{ st.i18nKey ? i18n.fanyi(st.i18nKey) : st.label }}</span>\r\n\t\t\t</div>\r\n\t\t}\r\n\t}\r\n</div>\r\n", styles: ["::ng-deep .pop-steps.p-popover.p-popover-flipped:before{display:none}::ng-deep .pop-steps.p-popover.p-popover-flipped:after{display:none}::ng-deep .pop-steps.p-popover:before{display:none}::ng-deep .pop-steps.p-popover:after{display:none}::ng-deep .pop-steps.p-popover-flipped{margin-top:-5px}::ng-deep .pop-steps .p-popover-content{padding:0}::ng-deep .end-steps.p-popover{margin-top:2.5px;z-index:999;position:absolute!important;left:auto!important;right:0!important;top:100%!important;min-width:125px}::ng-deep .start-steps.p-popover{margin-top:2.5px;z-index:999;position:absolute!important;left:0!important;right:auto!important;top:100%!important;min-width:125px}.step-item{position:relative;height:32px;padding:0 5px;background-color:#e7e9ed}.step-item span{color:#334155c2;white-space:nowrap}.step-item.step-first{padding-left:15px}.step-item.step-last{padding-right:15px}.step-item:not(.step-first){border-left:15px solid transparent;margin-left:2px}.step-item:not(.step-first):before{content:\"\";position:absolute;top:0;left:-15px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:12px solid white}.step-item:not(.step-last):after{content:\"\";position:absolute;top:0;right:-12px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:12px solid #e7e9ed;z-index:2}.step-item.step-active{background-color:var(--p-primary-200)}.step-item.step-active span{color:#334155}.step-item.step-active:after{border-left:12px solid var(--p-primary-200)}\n"] }]
+            args: [{ selector: 'custom-steps', standalone: true, imports: [FormsModule, ListboxModule, Popover], template: "@if (visible) {\r\n\t<div\r\n\t\t#container\r\n\t\tclass=\"flex my-1 w-full justify-end\">\r\n\t\t@for (st of displaySteps(); track st; let i = $index) {\r\n\t\t\t@if (st.value === 'start') {\r\n\t\t\t\t<div\r\n\t\t\t\t\t#startItem\r\n\t\t\t\t\t[class]=\"getClass(i, ['start-item'])\"\r\n\t\t\t\t\t(click)=\"showStartSteps($event, startOp)\">\r\n\t\t\t\t\t<span>...</span>\r\n\t\t\t\t</div>\r\n\t\t\t\t<p-popover\r\n\t\t\t\t\t#startOp\r\n\t\t\t\t\t[styleClass]=\"'pop-steps start-steps'\"\r\n\t\t\t\t\t[appendTo]=\"startItem\">\r\n\t\t\t\t\t<p-listbox\r\n\t\t\t\t\t\t[options]=\"startSteps\"\r\n\t\t\t\t\t\t(onChange)=\"onStartStepsChange($event)\"\r\n\t\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\t\tclass=\"w-full md:w-56\">\r\n\t\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\t\tlet-country\r\n\t\t\t\t\t\t\tpTemplate=\"item\">\r\n\t\t\t\t\t\t\t<div class=\"flex items-center gap-2\">\r\n\t\t\t\t\t\t\t\t<div>{{ country.i18nKey ? i18n.fanyi(country.i18nKey) : country.label }}</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</p-listbox>\r\n\t\t\t\t</p-popover>\r\n\t\t\t} @else if (st.value === 'end') {\r\n\t\t\t\t<div\r\n\t\t\t\t\t#endItem\r\n\t\t\t\t\t[class]=\"getClass(i, ['end-item'])\"\r\n\t\t\t\t\t(click)=\"showEndSteps($event, endOp)\">\r\n\t\t\t\t\t<span>...</span>\r\n\t\t\t\t</div>\r\n\t\t\t\t<p-popover\r\n\t\t\t\t\t#endOp\r\n\t\t\t\t\t[styleClass]=\"'pop-steps end-steps'\"\r\n\t\t\t\t\t[appendTo]=\"endItem\">\r\n\t\t\t\t\t<p-listbox\r\n\t\t\t\t\t\t[options]=\"endSteps\"\r\n\t\t\t\t\t\t(onChange)=\"onEndStepsChange($event)\"\r\n\t\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\t\tclass=\"w-full md:w-56\">\r\n\t\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\t\tlet-country\r\n\t\t\t\t\t\t\tpTemplate=\"item\">\r\n\t\t\t\t\t\t\t<div class=\"flex items-center gap-2\">\r\n\t\t\t\t\t\t\t\t<div>{{ country.i18nKey ? i18n.fanyi(country.i18nKey) : country.label }}</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</p-listbox>\r\n\t\t\t\t</p-popover>\r\n\t\t\t} @else {\r\n\t\t\t\t<div\r\n\t\t\t\t\t[class]=\"getClass(i, [])\"\r\n\t\t\t\t\t(click)=\"changeStatus(st)\">\r\n\t\t\t\t\t<span>{{ st.i18nKey ? i18n.fanyi(st.i18nKey) : st.label }}</span>\r\n\t\t\t\t</div>\r\n\t\t\t}\r\n\t\t}\r\n\t</div>\r\n}\r\n", styles: ["::ng-deep .pop-steps.p-popover.p-popover-flipped:before{display:none}::ng-deep .pop-steps.p-popover.p-popover-flipped:after{display:none}::ng-deep .pop-steps.p-popover:before{display:none}::ng-deep .pop-steps.p-popover:after{display:none}::ng-deep .pop-steps.p-popover-flipped{margin-top:-5px}::ng-deep .pop-steps .p-popover-content{padding:0}::ng-deep .end-steps.p-popover{margin-top:2.5px;z-index:999;position:absolute!important;left:auto!important;right:0!important;top:100%!important;min-width:125px}::ng-deep .start-steps.p-popover{margin-top:2.5px;z-index:999;position:absolute!important;left:0!important;right:auto!important;top:100%!important;min-width:125px}.step-item{position:relative;height:32px;padding:0 5px;background-color:#e7e9ed}.step-item span{color:#334155c2;white-space:nowrap}.step-item.step-first{padding-left:15px}.step-item.step-last{padding-right:15px}.step-item:not(.step-first){border-left:15px solid transparent;margin-left:2px}.step-item:not(.step-first):before{content:\"\";position:absolute;top:0;left:-15px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:12px solid white}.step-item:not(.step-last):after{content:\"\";position:absolute;top:0;right:-12px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:12px solid #e7e9ed;z-index:2}.step-item.step-active{background-color:var(--p-primary-200)}.step-item.step-active span{color:#334155}.step-item.step-active:after{border-left:12px solid var(--p-primary-200)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['container', { static: false }]
@@ -8672,11 +8720,11 @@ class HrefBtnListComponent {
         this.hrefClick.emit(btn);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HrefBtnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: HrefBtnListComponent, isStandalone: true, selector: "href-btn-list", inputs: { hrefs: { classPropertyName: "hrefs", publicName: "hrefs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hrefClick: "hrefClick" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "op", first: true, predicate: ["moreOp"], descendants: true }, { propertyName: "btnItem", predicate: ["btnItem"], descendants: true }], ngImport: i0, template: "<div class=\"hidden max-w-full md:flex\" #container style=\"max-width: 100%;\">\r\n  @for(item of fillList();track item){\r\n    <button \r\n      #btnItem\r\n      [attr.data-type]=\"'href'\"\r\n      [class.first-btn]=\"$first\"\r\n      [class.last-btn]=\"$last && !showMore\"\r\n      class=\"flex px-[10px] h-[33px] btn items-center min-w-[85px] shrink-0 box-border not-first\"\r\n      (click)=\"btnClick(item)\">\r\n      <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n      <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n        <div class=\"ml-[4px] text-left max-w-full\">\r\n          <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0\">\r\n            {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n          </span>\r\n          <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 txt-color\">\r\n            @if(item.hasOwnProperty('value')){\r\n            <span>{{item.value || 0}}</span>\r\n            }\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </button>\r\n  }\r\n  @if(showMore){\r\n    <button\r\n      [attr.data-type]=\"'more'\" \r\n      class=\"flex px-[10px] h-[33px] flex-grow-1 lg:flex-grow-0 btn items-center w-auto gap-[4px] last-btn ml-[-1px]\" \r\n      (click)=\"toggleMore($event)\">\r\n      <div class=\"text-[14px] whitespace-nowrap\">\u66F4\u591A</div>\r\n      <i class=\"pi text-[14px] mr-[4px]\" [class]=\"iconClass()\"></i>\r\n    </button>\r\n    <p-tieredmenu #moreOp [model]=\"moreBtns()\" [popup]=\"true\" [style]=\"{position:'absolute'}\" (onHide)=\"hide()\">\r\n      <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\r\n        <button \r\n          class=\"flex py-[8px] pl-[10px] h-[33px] items-center min-w-[85px] shrink-0\"\r\n          (click)=\"btnClick(item)\">\r\n          <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n          <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n            <div class=\"ml-[4px] text-left max-w-full\">\r\n              <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 \">\r\n                {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n              </span>\r\n              <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0\">\r\n                @if(item.hasOwnProperty('value')){\r\n                  <span>{{item.value || 0}}</span>\r\n                }\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </ng-template>\r\n    </p-tieredmenu>\r\n  }\r\n</div>\r\n<button class=\"md:hidden flex h-[33px] items-center justify-center btn p-[10px]\"\r\n  enterActiveClass=\"animate-scalein\" \r\n  enterFromClass=\"hidden\" \r\n  leaveActiveClass=\"animate-fadeout\" \r\n  leaveToClass=\"hidden\"\r\n  pStyleClass=\"@next\" \r\n  [hideOnOutsideClick]=\"true\">\r\n  <i class=\"pi pi-bolt text-14px\"></i>\r\n</button>\r\n<div class=\"hidden md:hidden absolute z-[9999] panel-box\">\r\n  <div class=\"flex flex-wrap\">\r\n    @for(item of hrefs();track item){\r\n      <button \r\n        class=\"flex w-[50%] px-[10px] h-[33px] panel-btn items-center min-w-[85px] shrink-1 rounded-none icon-color\" \r\n        (click)=\"btnClick(item)\">\r\n        <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n        <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n          <div class=\"ml-[4px] text-left max-w-full\">\r\n            <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 \">\r\n              {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n            </span>\r\n            <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 txt-color\">\r\n              @if(item.hasOwnProperty('value')){\r\n                <span>{{item.value || 0}}</span>\r\n              }\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".btn{border:1px solid rgb(216,218,221);color:var(--ag-text-color);z-index:0}.btn:active{border-color:var(--p-button-primary-active-border-color);z-index:1}.not-first{margin-left:-1px}.bg{background-color:#e6f2f3}.panel-box{width:calc(100vw - 32px);left:16px;margin-top:6px;background:#fff;box-shadow:#00000026 0 8px 16px}.panel-box .panel-btn{border:1px solid rgb(216,218,221);border-top:none;border-left:none;color:var(--ag-text-color)}.panel-box .panel-btn:hover{background-color:var(--p-button-outlined-primary-hover-background)}.txt-color{color:var(--p-primary-color)}.btn:hover{background-color:var(--p-button-outlined-primary-hover-background)}.first-btn{border-radius:var(--p-border-radius-md) 0 0 var(--p-border-radius-md);margin-left:0!important}.last-btn{border-radius:0 var(--p-border-radius-md) var(--p-border-radius-md) 0}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: TieredMenu, selector: "p-tieredMenu, p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i1$a.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: HrefBtnListComponent, isStandalone: true, selector: "href-btn-list", inputs: { hrefs: { classPropertyName: "hrefs", publicName: "hrefs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hrefClick: "hrefClick" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "op", first: true, predicate: ["moreOp"], descendants: true }, { propertyName: "btnItem", predicate: ["btnItem"], descendants: true }], ngImport: i0, template: "<div class=\"hidden max-w-full md:flex\" #container style=\"max-width: 100%;\">\r\n  @for(item of fillList();track item){\r\n    <button \r\n      #btnItem\r\n      [attr.data-type]=\"'href'\"\r\n      [class.first-btn]=\"$first\"\r\n      [class.last-btn]=\"$last && !showMore\"\r\n      class=\"flex px-[10px] h-[33px] btn items-center min-w-[85px] shrink-0 box-border not-first\"\r\n      (click)=\"btnClick(item)\">\r\n      <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n      <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n        <div class=\"ml-[4px] text-left max-w-full\">\r\n          <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0\">\r\n            {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n          </span>\r\n          <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 txt-color\">\r\n            @if(item.hasOwnProperty('value')){\r\n            <span>{{item.value || 0}}</span>\r\n            }\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </button>\r\n  }\r\n  @if(showMore){\r\n    <button\r\n      [attr.data-type]=\"'more'\" \r\n      class=\"flex px-[10px] h-[33px] flex-grow-1 lg:flex-grow-0 btn items-center w-auto gap-[4px] last-btn ml-[-1px]\" \r\n      (click)=\"toggleMore($event)\">\r\n      <div class=\"text-[14px] whitespace-nowrap\">\u66F4\u591A</div>\r\n      <i class=\"pi text-[14px] mr-[4px]\" [class]=\"iconClass()\"></i>\r\n    </button>\r\n    <p-tieredmenu #moreOp [model]=\"moreBtns()\" [popup]=\"true\" [style]=\"{position:'absolute'}\" (onHide)=\"hide()\">\r\n      <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\r\n        <button \r\n          class=\"flex py-[8px] pl-[10px] h-[33px] items-center min-w-[85px] shrink-0\"\r\n          (click)=\"btnClick(item)\">\r\n          <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n          <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n            <div class=\"ml-[4px] text-left max-w-full\">\r\n              <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 \">\r\n                {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n              </span>\r\n              <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0\">\r\n                @if(item.hasOwnProperty('value')){\r\n                  <span>{{item.value || 0}}</span>\r\n                }\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </ng-template>\r\n    </p-tieredmenu>\r\n  }\r\n</div>\r\n@if(hrefs().length > 0){\r\n  <button class=\"md:hidden flex h-[33px] items-center justify-center btn p-[10px]\"\r\n    enterActiveClass=\"animate-scalein\" \r\n    enterFromClass=\"hidden\" \r\n    leaveActiveClass=\"animate-fadeout\" \r\n    leaveToClass=\"hidden\"\r\n    pStyleClass=\"@next\" \r\n    [hideOnOutsideClick]=\"true\">\r\n    <i class=\"pi pi-bolt text-14px\"></i>\r\n  </button>\r\n}\r\n<div class=\"hidden md:hidden absolute z-[9999] panel-box\">\r\n  <div class=\"flex flex-wrap\">\r\n    @for(item of hrefs();track item){\r\n      <button \r\n        class=\"flex w-[50%] px-[10px] h-[33px] panel-btn items-center min-w-[85px] shrink-1 rounded-none icon-color\" \r\n        (click)=\"btnClick(item)\">\r\n        <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n        <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n          <div class=\"ml-[4px] text-left max-w-full\">\r\n            <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 \">\r\n              {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n            </span>\r\n            <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 txt-color\">\r\n              @if(item.hasOwnProperty('value')){\r\n                <span>{{item.value || 0}}</span>\r\n              }\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".btn{border:1px solid rgb(216,218,221);color:var(--ag-text-color);z-index:0}.btn:active{border-color:var(--p-button-primary-active-border-color);z-index:1}.not-first{margin-left:-1px}.bg{background-color:#e6f2f3}.panel-box{width:calc(100vw - 32px);left:16px;margin-top:6px;background:#fff;box-shadow:#00000026 0 8px 16px}.panel-box .panel-btn{border:1px solid rgb(216,218,221);border-top:none;border-left:none;color:var(--ag-text-color)}.panel-box .panel-btn:hover{background-color:var(--p-button-outlined-primary-hover-background)}.txt-color{color:var(--p-primary-color)}.btn:hover{background-color:var(--p-button-outlined-primary-hover-background)}.first-btn{border-radius:var(--p-border-radius-md) 0 0 var(--p-border-radius-md);margin-left:0!important}.last-btn{border-radius:0 var(--p-border-radius-md) var(--p-border-radius-md) 0}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: TieredMenu, selector: "p-tieredMenu, p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i1$a.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HrefBtnListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'href-btn-list', standalone: true, imports: [TranslatePipe, TieredMenu, StyleClassModule], template: "<div class=\"hidden max-w-full md:flex\" #container style=\"max-width: 100%;\">\r\n  @for(item of fillList();track item){\r\n    <button \r\n      #btnItem\r\n      [attr.data-type]=\"'href'\"\r\n      [class.first-btn]=\"$first\"\r\n      [class.last-btn]=\"$last && !showMore\"\r\n      class=\"flex px-[10px] h-[33px] btn items-center min-w-[85px] shrink-0 box-border not-first\"\r\n      (click)=\"btnClick(item)\">\r\n      <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n      <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n        <div class=\"ml-[4px] text-left max-w-full\">\r\n          <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0\">\r\n            {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n          </span>\r\n          <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 txt-color\">\r\n            @if(item.hasOwnProperty('value')){\r\n            <span>{{item.value || 0}}</span>\r\n            }\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </button>\r\n  }\r\n  @if(showMore){\r\n    <button\r\n      [attr.data-type]=\"'more'\" \r\n      class=\"flex px-[10px] h-[33px] flex-grow-1 lg:flex-grow-0 btn items-center w-auto gap-[4px] last-btn ml-[-1px]\" \r\n      (click)=\"toggleMore($event)\">\r\n      <div class=\"text-[14px] whitespace-nowrap\">\u66F4\u591A</div>\r\n      <i class=\"pi text-[14px] mr-[4px]\" [class]=\"iconClass()\"></i>\r\n    </button>\r\n    <p-tieredmenu #moreOp [model]=\"moreBtns()\" [popup]=\"true\" [style]=\"{position:'absolute'}\" (onHide)=\"hide()\">\r\n      <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\r\n        <button \r\n          class=\"flex py-[8px] pl-[10px] h-[33px] items-center min-w-[85px] shrink-0\"\r\n          (click)=\"btnClick(item)\">\r\n          <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n          <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n            <div class=\"ml-[4px] text-left max-w-full\">\r\n              <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 \">\r\n                {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n              </span>\r\n              <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0\">\r\n                @if(item.hasOwnProperty('value')){\r\n                  <span>{{item.value || 0}}</span>\r\n                }\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </ng-template>\r\n    </p-tieredmenu>\r\n  }\r\n</div>\r\n<button class=\"md:hidden flex h-[33px] items-center justify-center btn p-[10px]\"\r\n  enterActiveClass=\"animate-scalein\" \r\n  enterFromClass=\"hidden\" \r\n  leaveActiveClass=\"animate-fadeout\" \r\n  leaveToClass=\"hidden\"\r\n  pStyleClass=\"@next\" \r\n  [hideOnOutsideClick]=\"true\">\r\n  <i class=\"pi pi-bolt text-14px\"></i>\r\n</button>\r\n<div class=\"hidden md:hidden absolute z-[9999] panel-box\">\r\n  <div class=\"flex flex-wrap\">\r\n    @for(item of hrefs();track item){\r\n      <button \r\n        class=\"flex w-[50%] px-[10px] h-[33px] panel-btn items-center min-w-[85px] shrink-1 rounded-none icon-color\" \r\n        (click)=\"btnClick(item)\">\r\n        <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n        <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n          <div class=\"ml-[4px] text-left max-w-full\">\r\n            <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 \">\r\n              {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n            </span>\r\n            <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 txt-color\">\r\n              @if(item.hasOwnProperty('value')){\r\n                <span>{{item.value || 0}}</span>\r\n              }\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".btn{border:1px solid rgb(216,218,221);color:var(--ag-text-color);z-index:0}.btn:active{border-color:var(--p-button-primary-active-border-color);z-index:1}.not-first{margin-left:-1px}.bg{background-color:#e6f2f3}.panel-box{width:calc(100vw - 32px);left:16px;margin-top:6px;background:#fff;box-shadow:#00000026 0 8px 16px}.panel-box .panel-btn{border:1px solid rgb(216,218,221);border-top:none;border-left:none;color:var(--ag-text-color)}.panel-box .panel-btn:hover{background-color:var(--p-button-outlined-primary-hover-background)}.txt-color{color:var(--p-primary-color)}.btn:hover{background-color:var(--p-button-outlined-primary-hover-background)}.first-btn{border-radius:var(--p-border-radius-md) 0 0 var(--p-border-radius-md);margin-left:0!important}.last-btn{border-radius:0 var(--p-border-radius-md) var(--p-border-radius-md) 0}\n"] }]
+            args: [{ selector: 'href-btn-list', standalone: true, imports: [TranslatePipe, TieredMenu, StyleClassModule], template: "<div class=\"hidden max-w-full md:flex\" #container style=\"max-width: 100%;\">\r\n  @for(item of fillList();track item){\r\n    <button \r\n      #btnItem\r\n      [attr.data-type]=\"'href'\"\r\n      [class.first-btn]=\"$first\"\r\n      [class.last-btn]=\"$last && !showMore\"\r\n      class=\"flex px-[10px] h-[33px] btn items-center min-w-[85px] shrink-0 box-border not-first\"\r\n      (click)=\"btnClick(item)\">\r\n      <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n      <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n        <div class=\"ml-[4px] text-left max-w-full\">\r\n          <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0\">\r\n            {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n          </span>\r\n          <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 txt-color\">\r\n            @if(item.hasOwnProperty('value')){\r\n            <span>{{item.value || 0}}</span>\r\n            }\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </button>\r\n  }\r\n  @if(showMore){\r\n    <button\r\n      [attr.data-type]=\"'more'\" \r\n      class=\"flex px-[10px] h-[33px] flex-grow-1 lg:flex-grow-0 btn items-center w-auto gap-[4px] last-btn ml-[-1px]\" \r\n      (click)=\"toggleMore($event)\">\r\n      <div class=\"text-[14px] whitespace-nowrap\">\u66F4\u591A</div>\r\n      <i class=\"pi text-[14px] mr-[4px]\" [class]=\"iconClass()\"></i>\r\n    </button>\r\n    <p-tieredmenu #moreOp [model]=\"moreBtns()\" [popup]=\"true\" [style]=\"{position:'absolute'}\" (onHide)=\"hide()\">\r\n      <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\r\n        <button \r\n          class=\"flex py-[8px] pl-[10px] h-[33px] items-center min-w-[85px] shrink-0\"\r\n          (click)=\"btnClick(item)\">\r\n          <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n          <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n            <div class=\"ml-[4px] text-left max-w-full\">\r\n              <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 \">\r\n                {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n              </span>\r\n              <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0\">\r\n                @if(item.hasOwnProperty('value')){\r\n                  <span>{{item.value || 0}}</span>\r\n                }\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </ng-template>\r\n    </p-tieredmenu>\r\n  }\r\n</div>\r\n@if(hrefs().length > 0){\r\n  <button class=\"md:hidden flex h-[33px] items-center justify-center btn p-[10px]\"\r\n    enterActiveClass=\"animate-scalein\" \r\n    enterFromClass=\"hidden\" \r\n    leaveActiveClass=\"animate-fadeout\" \r\n    leaveToClass=\"hidden\"\r\n    pStyleClass=\"@next\" \r\n    [hideOnOutsideClick]=\"true\">\r\n    <i class=\"pi pi-bolt text-14px\"></i>\r\n  </button>\r\n}\r\n<div class=\"hidden md:hidden absolute z-[9999] panel-box\">\r\n  <div class=\"flex flex-wrap\">\r\n    @for(item of hrefs();track item){\r\n      <button \r\n        class=\"flex w-[50%] px-[10px] h-[33px] panel-btn items-center min-w-[85px] shrink-1 rounded-none icon-color\" \r\n        (click)=\"btnClick(item)\">\r\n        <i class=\"pi text-[22px] mr-[4px] txt-color\" [class]=\"item.icon\"></i>\r\n        <div class=\"flex flex-col text-[12px] \" style=\"line-height: 1;font-weight: 400;\">\r\n          <div class=\"ml-[4px] text-left max-w-full\">\r\n            <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 \">\r\n              {{item.i18nKey ? (item.i18nKey | translate) : item.label}}\r\n            </span>\r\n            <span class=\"block whitespace-nowrap overflow-hidden text-ellipsis m-0 p-0 txt-color\">\r\n              @if(item.hasOwnProperty('value')){\r\n                <span>{{item.value || 0}}</span>\r\n              }\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".btn{border:1px solid rgb(216,218,221);color:var(--ag-text-color);z-index:0}.btn:active{border-color:var(--p-button-primary-active-border-color);z-index:1}.not-first{margin-left:-1px}.bg{background-color:#e6f2f3}.panel-box{width:calc(100vw - 32px);left:16px;margin-top:6px;background:#fff;box-shadow:#00000026 0 8px 16px}.panel-box .panel-btn{border:1px solid rgb(216,218,221);border-top:none;border-left:none;color:var(--ag-text-color)}.panel-box .panel-btn:hover{background-color:var(--p-button-outlined-primary-hover-background)}.txt-color{color:var(--p-primary-color)}.btn:hover{background-color:var(--p-button-outlined-primary-hover-background)}.first-btn{border-radius:var(--p-border-radius-md) 0 0 var(--p-border-radius-md);margin-left:0!important}.last-btn{border-radius:0 var(--p-border-radius-md) var(--p-border-radius-md) 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['container', { static: false }]
@@ -8692,6 +8740,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class PageFormComponent extends AmComponent {
+    onResize() {
+        this.sidebarMode.set(window.innerWidth < 1024 ? 'left' : 'right');
+    }
     constructor() {
         super();
         this.showLog = computed(() => {
@@ -9115,7 +9166,7 @@ class PageFormComponent extends AmComponent {
         this.sidebarMode.set(this.sidebarMode() === 'left' ? 'right' : 'left');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PageFormComponent, isStandalone: true, selector: "app-page-form", inputs: { addVisible: { classPropertyName: "addVisible", publicName: "addVisible", isSignal: true, isRequired: false, transformFunction: null }, gridList: { classPropertyName: "gridList", publicName: "gridList", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, getPrmInput: { classPropertyName: "getPrmInput", publicName: "getPrmInput", isSignal: true, isRequired: true, transformFunction: null }, statusSteps: { classPropertyName: "statusSteps", publicName: "statusSteps", isSignal: true, isRequired: false, transformFunction: null }, statusKey: { classPropertyName: "statusKey", publicName: "statusKey", isSignal: true, isRequired: false, transformFunction: null }, hrefBtnList: { classPropertyName: "hrefBtnList", publicName: "hrefBtnList", isSignal: true, isRequired: false, transformFunction: null }, setTitle: { classPropertyName: "setTitle", publicName: "setTitle", isSignal: true, isRequired: false, transformFunction: null }, actionList: { classPropertyName: "actionList", publicName: "actionList", isSignal: true, isRequired: false, transformFunction: null }, modelLog: { classPropertyName: "modelLog", publicName: "modelLog", isSignal: true, isRequired: false, transformFunction: null }, formDisabled: { classPropertyName: "formDisabled", publicName: "formDisabled", isSignal: true, isRequired: false, transformFunction: null }, statusConf: { classPropertyName: "statusConf", publicName: "statusConf", isSignal: true, isRequired: false, transformFunction: null }, formDetail: { classPropertyName: "formDetail", publicName: "formDetail", isSignal: true, isRequired: false, transformFunction: null }, saveFunc: { classPropertyName: "saveFunc", publicName: "saveFunc", isSignal: true, isRequired: false, transformFunction: null }, configNewPath: { classPropertyName: "configNewPath", publicName: "configNewPath", isSignal: true, isRequired: false, transformFunction: null }, authLevel: { classPropertyName: "authLevel", publicName: "authLevel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], viewQueries: [{ propertyName: "cForm", first: true, predicate: ["cForm"], descendants: true }, { propertyName: "customGrid", predicate: ["customGrid"], descendants: true }, { propertyName: "tabForm", predicate: ["tabForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"md:overflow-hidden\">\n\t<div class=\"flex md:flex-wrap lg:flex-nowrap items-center md:justify-between py-1 px-1 border-b-[1px] border-[#dbdbdb] bg-white\">\n\t\t<div class=\"lg:basis-1/3 order-1\">\n\t\t\t<app-crumb-action\n\t\t\t\t[addVisible]=\"addVisible()\"\n\t\t\t\t[newUrl]=\"newUrl\"\n\t\t\t\t[isShowCog]=\"true\"\n\t\t\t\t[outlined]=\"true\"\n\t\t\t\t[authLevel]=\"authLevel()\"\n\t\t\t\t[actionList]=\"actionList()\"\n\t\t\t\t[configNewPath]=\"configNewPath()\"\n\t\t\t\t[data]=\"getPrm.data ?? {}\"\n\t\t\t\t[saveBtnDisable]=\"saveBtnDisable\"\n\t\t\t\t(actionEvent)=\"authClick($event)\"\n\t\t\t\t(saveEvent)=\"submitForm()\">\n\t\t\t</app-crumb-action>\n\t\t</div>\n\n\t\t<div class=\"basis-1/5 lg:basis-2/3 order-2 lg:order-2 md:order-last md:basis-full md:mt-[6px]\">\n\t\t\t<href-btn-list\n\t\t\t\t[hrefs]=\"hrefBtnList()\"\n\t\t\t\t(hrefClick)=\"goRun($event)\"></href-btn-list>\n\t\t\t<!-- @if (id) {\n\t\t\t\t@for (btn of hrefBtnList(); track btn) {\n\t\t\t\t\t<p-button\n\t\t\t\t\t\t[variant]=\"btn?.variant\"\n\t\t\t\t\t\t[severity]=\"btn?.severity\"\n\t\t\t\t\t\tclass=\"mr-[6px]\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t[icon]=\"btn?.icon\"\n\t\t\t\t\t\tlabel=\"{{ btn.i18nKey ? i18n.fanyi(btn.i18nKey) : btn.label }}\"\n\t\t\t\t\t\t(click)=\"goRun(btn)\">\n\t\t\t\t\t</p-button>\n\t\t\t\t}\n\t\t\t} -->\n\t\t</div>\n\t\t<div class=\"basis-1/3 order-3 flex flex-row-reverse\">\n\t\t\t@if (modelLog()) {\n\t\t\t\t<div class=\"hidden md:block\">\n\t\t\t\t\t<span\n\t\t\t\t\t\t[class]=\"'iconfont icon-sidebar icon-sidebar-' + (sidebarMode())\"\n\t\t\t\t\t\t(click)=\"toggleLog()\"></span>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t<div class=\"flex\">\n\t\t<div class=\"px-2 flex flex-wrap items-center flex-1\">\n\t\t\t<div class=\"hidden md:basis-1/3 py-1 basis-full md:flex items-center flex-row order-1\">\n\t\t\t\t@for (action of actionList(); let i = $index; track action) {\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t[icon]=\"getPrm.data?.icon\"\n\t\t\t\t\t\t[loading]=\"action.loading\"\n\t\t\t\t\t\t[label]=\"action.i18nKey ? (action.i18nKey | translate) : action.label\"\n\t\t\t\t\t\t[disabled]=\"action.btnDisabled ? action.btnDisabled(getPrm.data) : false\"\n\t\t\t\t\t\t[styleClass]=\"\n\t\t\t\t\t\t\t(action.auth || 0) > (authLevel() || 0) || !!action.btnHidden?.(getPrm.data)\n\t\t\t\t\t\t\t\t? 'form-action hidden'\n\t\t\t\t\t\t\t\t: 'form-action block mr-[.5rem]'\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t(onClick)=\"action.onClick != '' && action.onClick?.(getPrm.data,action)\">\n\t\t\t\t\t</p-button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"md:basis-2/3 basis-full flex md:flex-row-reverse flex-row md:order-2 order-first w-full\">\n\t\t\t\t<custom-steps\n\t\t\t\t\t#customSteps\n\t\t\t\t\tclass=\"w-full\"\n\t\t\t\t\t[steps]=\"statusSteps()\"\n\t\t\t\t\t[modelLog]=\"showLog()\"\n\t\t\t\t\t[current]=\"getPrm.data && getPrm.data[statusKey()] !== undefined ? getPrm.data[statusKey()] : 0\"\n\t\t\t\t\t[authLevel]=\"authLevel()\"\n\t\t\t\t\t[isClick]=\"this.statusConf().isClick\"\n\t\t\t\t\t(change)=\"statusChange($event, customSteps)\">\n\t\t\t\t</custom-steps>\n\t\t\t</div>\n\t\t</div>\n\t\t@if (showLog()) {\n\t\t\t<div class=\"lg:w-[400px] md:w-[300px] hidden md:block\"></div>\n\t\t}\n\t</div>\n\t<div class=\"main flex flex-wrap\">\n\t\t<div class=\"w-full md:flex-1 md:h-full md:overflow-y-auto\">\n\t\t\t<div class=\"bg-white mx-2 form-panel\">\n\t\t\t\t<div class=\"p-2 flex-1\">\n\t\t\t\t\t<form [formGroup]=\"form().form!\">\n\t\t\t\t\t\t<custom-form\n\t\t\t\t\t\t\t#cForm\n\t\t\t\t\t\t\t[options]=\"formOptions\"\n\t\t\t\t\t\t\t[upsert]=\"upsertPrm\"\n\t\t\t\t\t\t\t[model]=\"getPrm.data ?? {}\"></custom-form>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t\t@if (gridList() && gridList().length > 0) {\n\t\t\t\t\t<div class=\"relative mb-2\">\n\t\t\t\t\t\t<p-tabs [(value)]=\"indexValue\">\n\t\t\t\t\t\t\t<p-tablist>\n\t\t\t\t\t\t\t\t@for (fchild of gridList(); let i = $index; track fchild) {\n\t\t\t\t\t\t\t\t\t<p-tab\n\t\t\t\t\t\t\t\t\t\t[value]=\"i\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"tabClick()\">\n\t\t\t\t\t\t\t\t\t\t{{ fchild.i18nKey ? i18n.fanyi(fchild.i18nKey) : fchild.title }}\n\t\t\t\t\t\t\t\t\t</p-tab>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</p-tablist>\n\t\t\t\t\t\t</p-tabs>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@for (grid of gridList(); let i = $index; track grid) {\n\t\t\t\t\t@if (grid.type == 'grid') {\n\t\t\t\t\t\t<custom-grid\n\t\t\t\t\t\t\t#customGrid\n\t\t\t\t\t\t\t[hidden]=\"indexValue != i\"\n\t\t\t\t\t\t\t[rowData]=\"getPrm.data?.[grid.subDataKey!]\"\n\t\t\t\t\t\t\t[upsert]=\"upsertPrm\"\n\t\t\t\t\t\t\t(deleteEmit)=\"delRows($event)\"\n\t\t\t\t\t\t\t[addType]=\"grid.subTableSource\"\n\t\t\t\t\t\t\t(addEmit)=\"dataSourceShow()\"\n\t\t\t\t\t\t\t[gridOptions]=\"grid.gridOptions\"\n\t\t\t\t\t\t\t[gridDisable]=\"gridDisable\"\n\t\t\t\t\t\t\t[authLevel]=\"authLevel()\"\n\t\t\t\t\t\t\t[showDelete]=\"grid.showDelete\"\n\t\t\t\t\t\t\t[selectData]=\"grid.selectData\"\n\t\t\t\t\t\t\t[addSort]=\"grid.addSort\">\n\t\t\t\t\t\t</custom-grid>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<!-- @if(indexValue == i){\n\t\t\t\t\t\t\t<form [formGroup]=\"grid.form!\">\n\t\t\t\t\t\t\t\t<custom-form\n\t\t\t\t\t\t\t\t[options]=\"grid\"\n\t\t\t\t\t\t\t\t[upsert]=\"upsertPrm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</custom-form>\n\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t} -->\n\t\t\t\t\t\t<custom-form\n\t\t\t\t\t\t\t#tabForm\n\t\t\t\t\t\t\t[hidden]=\"indexValue != i\"\n\t\t\t\t\t\t\t[options]=\"grid\"\n\t\t\t\t\t\t\t[upsert]=\"upsertPrm\"\n\t\t\t\t\t\t\t[model]=\"subFormModel[grid.subDataKey!] || {}\">\n\t\t\t\t\t\t</custom-form>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t@if (showLog()) {\n\t\t\t<div class=\"w-full lg:w-[400px] md:w-[300px] md:h-full md:overflow-y-auto hidden md:block\">\n\t\t\t\t<custom-log [logs]=\"getPrm.data?.log ?? []\"></custom-log>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n<row-selector\n\t[(visible)]=\"visible\"\n\t[searchPrm]=\"dialogSearchPrm\"\n\t[gridOptions]=\"selectOptions\"\n\t[selectionKeys]=\"selectionKeys\"\n\t(onOk)=\"onOk($event)\"\n\t(cancelSelect)=\"onCancelSelected($event)\">\n</row-selector>\n", styles: ["@charset \"UTF-8\";.main{height:calc(100vh - 128px)}:host ::ng-deep .main .ag-root-wrapper{border-left:none!important;border-right:none!important;border-bottom:none!important}:host ::ng-deep .form-action{background:#e7e9ed!important;color:var(--ag-text-color)!important;border-color:#e7e9ed!important}:host ::ng-deep .form-action:not(:disabled):hover{background-color:#d8dadd!important;border-color:#d8dadd}.form-panel{border:solid 1px #dbdbdb}.icon-sidebar{color:#334155;padding:2.5px}.icon-sidebar:hover{color:var(--p-primary-color);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormComponent, selector: "custom-form", inputs: ["options", "model", "upsert"] }, { kind: "component", type: LogComponent, selector: "custom-log", inputs: ["logs", "id"] }, { kind: "component", type: CrumbActionComponent, selector: "app-crumb-action", inputs: ["isShowCog", "addVisible", "importVisible", "exportVisible", "newUrl", "configNewPath", "onExport", "outlined", "isList", "authLevel", "actionList", "data", "menus", "saveBtnDisable"], outputs: ["saveEvent", "cancelEvent", "actionEvent"] }, { kind: "component", type: StepsComponent, selector: "custom-steps", inputs: ["modelLog", "needSelfAdjusting", "steps", "current", "authLevel", "isClick"], outputs: ["change"] }, { kind: "component", type: GridComponent, selector: "custom-grid", inputs: ["gridOptions", "selectionKeys", "upsert", "rowData", "searchPrm", "addType", "selectData", "showAct", "actPos", "authLevel", "showDelete", "gridDisable", "addSort"], outputs: ["deleteEmit", "addEmit"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i3$2.TabList, selector: "p-tablist" }, { kind: "component", type: i3$2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: RowSelectorComponent$1, selector: "row-selector", inputs: ["title", "selectionKeys", "gridOptions", "searchPrm", "visible", "showSearch"], outputs: ["onOk", "visibleChange", "cancelSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: HrefBtnListComponent, selector: "href-btn-list", inputs: ["hrefs"], outputs: ["hrefClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PageFormComponent, isStandalone: true, selector: "app-page-form", inputs: { addVisible: { classPropertyName: "addVisible", publicName: "addVisible", isSignal: true, isRequired: false, transformFunction: null }, gridList: { classPropertyName: "gridList", publicName: "gridList", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, getPrmInput: { classPropertyName: "getPrmInput", publicName: "getPrmInput", isSignal: true, isRequired: true, transformFunction: null }, statusSteps: { classPropertyName: "statusSteps", publicName: "statusSteps", isSignal: true, isRequired: false, transformFunction: null }, statusKey: { classPropertyName: "statusKey", publicName: "statusKey", isSignal: true, isRequired: false, transformFunction: null }, hrefBtnList: { classPropertyName: "hrefBtnList", publicName: "hrefBtnList", isSignal: true, isRequired: false, transformFunction: null }, setTitle: { classPropertyName: "setTitle", publicName: "setTitle", isSignal: true, isRequired: false, transformFunction: null }, actionList: { classPropertyName: "actionList", publicName: "actionList", isSignal: true, isRequired: false, transformFunction: null }, modelLog: { classPropertyName: "modelLog", publicName: "modelLog", isSignal: true, isRequired: false, transformFunction: null }, formDisabled: { classPropertyName: "formDisabled", publicName: "formDisabled", isSignal: true, isRequired: false, transformFunction: null }, statusConf: { classPropertyName: "statusConf", publicName: "statusConf", isSignal: true, isRequired: false, transformFunction: null }, formDetail: { classPropertyName: "formDetail", publicName: "formDetail", isSignal: true, isRequired: false, transformFunction: null }, saveFunc: { classPropertyName: "saveFunc", publicName: "saveFunc", isSignal: true, isRequired: false, transformFunction: null }, configNewPath: { classPropertyName: "configNewPath", publicName: "configNewPath", isSignal: true, isRequired: false, transformFunction: null }, authLevel: { classPropertyName: "authLevel", publicName: "authLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [], viewQueries: [{ propertyName: "cForm", first: true, predicate: ["cForm"], descendants: true }, { propertyName: "customGrid", predicate: ["customGrid"], descendants: true }, { propertyName: "tabForm", predicate: ["tabForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"md:overflow-hidden\">\n\t<div class=\"flex md:flex-wrap lg:flex-nowrap items-center md:justify-between py-1 px-1 border-b-[1px] border-[#dbdbdb] bg-white\">\n\t\t<div class=\"lg:basis-1/3 order-1\">\n\t\t\t<app-crumb-action\n\t\t\t\t[addVisible]=\"addVisible()\"\n\t\t\t\t[newUrl]=\"newUrl\"\n\t\t\t\t[isShowCog]=\"true\"\n\t\t\t\t[outlined]=\"true\"\n\t\t\t\t[authLevel]=\"authLevel()\"\n\t\t\t\t[actionList]=\"actionList()\"\n\t\t\t\t[configNewPath]=\"configNewPath()\"\n\t\t\t\t[data]=\"getPrm.data ?? {}\"\n\t\t\t\t[saveBtnDisable]=\"saveBtnDisable\"\n\t\t\t\t(actionEvent)=\"authClick($event)\"\n\t\t\t\t(saveEvent)=\"submitForm()\">\n\t\t\t</app-crumb-action>\n\t\t</div>\n\n\t\t<div class=\"basis-1/5 lg:basis-2/3 order-2 lg:order-2 md:order-last md:basis-full md:mt-[6px]\">\n\t\t\t<href-btn-list\n\t\t\t\t[hrefs]=\"hrefBtnList()\"\n\t\t\t\t(hrefClick)=\"goRun($event)\"></href-btn-list>\n\t\t\t<!-- @if (id) {\n\t\t\t\t@for (btn of hrefBtnList(); track btn) {\n\t\t\t\t\t<p-button\n\t\t\t\t\t\t[variant]=\"btn?.variant\"\n\t\t\t\t\t\t[severity]=\"btn?.severity\"\n\t\t\t\t\t\tclass=\"mr-[6px]\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t[icon]=\"btn?.icon\"\n\t\t\t\t\t\tlabel=\"{{ btn.i18nKey ? i18n.fanyi(btn.i18nKey) : btn.label }}\"\n\t\t\t\t\t\t(click)=\"goRun(btn)\">\n\t\t\t\t\t</p-button>\n\t\t\t\t}\n\t\t\t} -->\n\t\t</div>\n\t\t<div class=\"basis-1/3 order-3 flex flex-row-reverse\">\n\t\t\t@if (modelLog()) {\n\t\t\t\t<div class=\"hidden md:block\">\n\t\t\t\t\t<span\n\t\t\t\t\t\t[class]=\"'iconfont icon-sidebar icon-sidebar-' + (sidebarMode())\"\n\t\t\t\t\t\t(click)=\"toggleLog()\"></span>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t<div class=\"flex\">\n\t\t<div class=\"px-2 flex flex-wrap items-center flex-1\">\n\t\t\t<div class=\"hidden md:basis-1/3 py-1 basis-full md:flex items-center flex-row order-1\">\n\t\t\t\t@for (action of actionList(); let i = $index; track action) {\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t[icon]=\"getPrm.data?.icon\"\n\t\t\t\t\t\t[loading]=\"action.loading\"\n\t\t\t\t\t\t[label]=\"action.i18nKey ? (action.i18nKey | translate) : action.label\"\n\t\t\t\t\t\t[disabled]=\"action.btnDisabled ? action.btnDisabled(getPrm.data) : false\"\n\t\t\t\t\t\t[styleClass]=\"\n\t\t\t\t\t\t\t(action.auth || 0) > (authLevel() || 0) || !!action.btnHidden?.(getPrm.data)\n\t\t\t\t\t\t\t\t? 'form-action hidden'\n\t\t\t\t\t\t\t\t: 'form-action block mr-[.5rem]'\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t(onClick)=\"action.onClick != '' && action.onClick?.(getPrm.data,action)\">\n\t\t\t\t\t</p-button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"md:basis-2/3 basis-full flex md:flex-row-reverse flex-row md:order-2 order-first w-full\">\n\t\t\t\t<custom-steps\n\t\t\t\t\t#customSteps\n\t\t\t\t\tclass=\"w-full\"\n\t\t\t\t\t[steps]=\"statusSteps()\"\n\t\t\t\t\t[modelLog]=\"showLog()\"\n\t\t\t\t\t[current]=\"getPrm.data && getPrm.data[statusKey()] !== undefined ? getPrm.data[statusKey()] : 0\"\n\t\t\t\t\t[authLevel]=\"authLevel()\"\n\t\t\t\t\t[isClick]=\"this.statusConf().isClick\"\n\t\t\t\t\t(change)=\"statusChange($event, customSteps)\">\n\t\t\t\t</custom-steps>\n\t\t\t</div>\n\t\t</div>\n\t\t@if (showLog()) {\n\t\t\t<div class=\"lg:w-[400px] md:w-[300px] hidden md:block\"></div>\n\t\t}\n\t</div>\n\t<div class=\"main flex flex-wrap\">\n\t\t<div class=\"w-full md:flex-1 md:h-full md:overflow-y-auto\">\n\t\t\t<div class=\"bg-white mx-2 form-panel\">\n\t\t\t\t<div class=\"p-2 flex-1\">\n\t\t\t\t\t<form [formGroup]=\"form().form!\">\n\t\t\t\t\t\t<custom-form\n\t\t\t\t\t\t\t#cForm\n\t\t\t\t\t\t\t[options]=\"formOptions\"\n\t\t\t\t\t\t\t[upsert]=\"upsertPrm\"\n\t\t\t\t\t\t\t[model]=\"getPrm.data ?? {}\"></custom-form>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t\t@if (gridList() && gridList().length > 0) {\n\t\t\t\t\t<div class=\"relative mb-2\">\n\t\t\t\t\t\t<p-tabs [(value)]=\"indexValue\">\n\t\t\t\t\t\t\t<p-tablist>\n\t\t\t\t\t\t\t\t@for (fchild of gridList(); let i = $index; track fchild) {\n\t\t\t\t\t\t\t\t\t<p-tab\n\t\t\t\t\t\t\t\t\t\t[value]=\"i\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"tabClick()\">\n\t\t\t\t\t\t\t\t\t\t{{ fchild.i18nKey ? i18n.fanyi(fchild.i18nKey) : fchild.title }}\n\t\t\t\t\t\t\t\t\t</p-tab>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</p-tablist>\n\t\t\t\t\t\t</p-tabs>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@for (grid of gridList(); let i = $index; track grid) {\n\t\t\t\t\t@if (grid.type == 'grid') {\n\t\t\t\t\t\t<custom-grid\n\t\t\t\t\t\t\t#customGrid\n\t\t\t\t\t\t\t[hidden]=\"indexValue != i\"\n\t\t\t\t\t\t\t[rowData]=\"getPrm.data?.[grid.subDataKey!]\"\n\t\t\t\t\t\t\t[upsert]=\"upsertPrm\"\n\t\t\t\t\t\t\t(deleteEmit)=\"delRows($event)\"\n\t\t\t\t\t\t\t[addType]=\"grid.subTableSource\"\n\t\t\t\t\t\t\t(addEmit)=\"dataSourceShow()\"\n\t\t\t\t\t\t\t[gridOptions]=\"grid.gridOptions\"\n\t\t\t\t\t\t\t[gridDisable]=\"gridDisable\"\n\t\t\t\t\t\t\t[authLevel]=\"authLevel()\"\n\t\t\t\t\t\t\t[showDelete]=\"grid.showDelete\"\n\t\t\t\t\t\t\t[selectData]=\"grid.selectData\"\n\t\t\t\t\t\t\t[addSort]=\"grid.addSort\">\n\t\t\t\t\t\t</custom-grid>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<!-- @if(indexValue == i){\n\t\t\t\t\t\t\t<form [formGroup]=\"grid.form!\">\n\t\t\t\t\t\t\t\t<custom-form\n\t\t\t\t\t\t\t\t[options]=\"grid\"\n\t\t\t\t\t\t\t\t[upsert]=\"upsertPrm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</custom-form>\n\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t} -->\n\t\t\t\t\t\t<custom-form\n\t\t\t\t\t\t\t#tabForm\n\t\t\t\t\t\t\t[hidden]=\"indexValue != i\"\n\t\t\t\t\t\t\t[options]=\"grid\"\n\t\t\t\t\t\t\t[upsert]=\"upsertPrm\"\n\t\t\t\t\t\t\t[model]=\"subFormModel[grid.subDataKey!] || {}\">\n\t\t\t\t\t\t</custom-form>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t@if (showLog()) {\n\t\t\t<div class=\"w-full lg:w-[400px] md:w-[300px] md:h-full md:overflow-y-auto hidden md:block\">\n\t\t\t\t<custom-log [logs]=\"getPrm.data?.log ?? []\"></custom-log>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n<row-selector\n\t[(visible)]=\"visible\"\n\t[searchPrm]=\"dialogSearchPrm\"\n\t[gridOptions]=\"selectOptions\"\n\t[selectionKeys]=\"selectionKeys\"\n\t(onOk)=\"onOk($event)\"\n\t(cancelSelect)=\"onCancelSelected($event)\">\n</row-selector>\n", styles: ["@charset \"UTF-8\";.main{height:calc(100vh - 128px)}:host ::ng-deep .main .ag-root-wrapper{border-left:none!important;border-right:none!important;border-bottom:none!important}:host ::ng-deep .form-action{background:#e7e9ed!important;color:var(--ag-text-color)!important;border-color:#e7e9ed!important}:host ::ng-deep .form-action:not(:disabled):hover{background-color:#d8dadd!important;border-color:#d8dadd}.form-panel{border:solid 1px #dbdbdb}.icon-sidebar{color:#334155;padding:2.5px}.icon-sidebar:hover{color:var(--p-primary-color);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormComponent, selector: "custom-form", inputs: ["options", "model", "upsert"] }, { kind: "component", type: LogComponent, selector: "custom-log", inputs: ["logs", "id"] }, { kind: "component", type: CrumbActionComponent, selector: "app-crumb-action", inputs: ["isShowCog", "addVisible", "importVisible", "exportVisible", "newUrl", "configNewPath", "onExport", "outlined", "isList", "authLevel", "actionList", "data", "menus", "saveBtnDisable"], outputs: ["saveEvent", "cancelEvent", "actionEvent"] }, { kind: "component", type: StepsComponent, selector: "custom-steps", inputs: ["modelLog", "needSelfAdjusting", "steps", "current", "authLevel", "isClick"], outputs: ["change"] }, { kind: "component", type: GridComponent, selector: "custom-grid", inputs: ["gridOptions", "selectionKeys", "upsert", "rowData", "searchPrm", "addType", "selectData", "showAct", "actPos", "authLevel", "showDelete", "gridDisable", "addSort"], outputs: ["deleteEmit", "addEmit"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i3$2.TabList, selector: "p-tablist" }, { kind: "component", type: i3$2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: RowSelectorComponent$1, selector: "row-selector", inputs: ["title", "selectionKeys", "gridOptions", "searchPrm", "visible", "showSearch"], outputs: ["onOk", "visibleChange", "cancelSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: HrefBtnListComponent, selector: "href-btn-list", inputs: ["hrefs"], outputs: ["hrefClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageFormComponent, decorators: [{
             type: Component,
@@ -9141,6 +9192,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], tabForm: [{
                 type: ViewChildren,
                 args: ['tabForm']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }] } });
 
 class PageGridListComponent extends AmComponent {