@alauda-fe/dynamic-plugin-shared 0.0.4-alpha.2 → 0.0.4-alpha.21

package/fesm2022/alauda-fe-dynamic-plugin-shared.mjs

@@ -1,42 +1,36 @@
 import * as i1 from '@alauda/ui';
-import { rgbColor, ThemeService, coerceAttrBoolean, FormItemControlDirective, observeResizeOn, MessageService, NotificationService, DIALOG_DATA, DialogModule, ButtonModule, InputModule, IconModule, FormModule, handlePixel, isTemplateRef, ThemePickerPipe, TooltipModule, TooltipType, ButtonComponent, IconComponent, TagComponent, TooltipDirective, DateNavRange, InputGroupComponent, InputSuffixDirective, InputComponent, DateRangePickerPanelComponent, TagType, TagModule, TooltipComponent, BaseTooltip, TooltipTrigger, INPUT_GROUP_MODULE, SelectModule, FORM_MODULE, DropdownModule, CheckboxModule, CardComponent, TOOLTIP_MODULE, CheckboxComponent, BackTopComponent, SortDirective, SortHeaderComponent, PaginatorComponent, TABLE_MODULE, DROPDOWN_MODULE, DialogRef, DIALOG_MODULE, CARD_MODULE, CHECKBOX_MODULE } from '@alauda/ui';
-import { last, cloneDeep, has, unset, get, isBoolean, sortBy, set, trim, isFunction, range, debounce, uniq, identity, first, isString, isEmpty, isObjectLike, snakeCase } from 'lodash-es';
-import * as i2$1 from '@alauda-fe/dynamic-plugin-sdk';
-import { parseBase64Type, isBlank, publishRef, TOKEN_BASE_DOMAIN, stringify as stringify$1, isEqual, TimeService, TranslateService, isZhLang, FALLBACK_LANGUAGE, TranslatePipe, ObservableInput, FeatureGateService, FieldNotAvailablePipe, ValueHook, LoadingMaskComponent, PurePipe, StandardTimePipe, RelativeTimePipe, skipError, CURR_ESCAPE_DEACTIVATE_GUARD, ESCAPE_DEACTIVATE_GUARD, parseAll, FIELD_NOT_AVAILABLE_PLACEHOLDER, noop, SafePipe, WatchEvent, K8sUtilService, isFieldNotAvailable, K8S_UTIL_PIPES_MODULE, K8sApiService, TRANSLATE_MODULE } from '@alauda-fe/dynamic-plugin-sdk';
-import { Observable, finalize, map, startWith, catchError, of, isObservable, switchMap, animationFrameScheduler, fromEvent, auditTime, Subject, takeUntil, distinctUntilChanged, combineLatest, filter, debounceTime, take, merge, pairwise, tap, BehaviorSubject, from, timer, ReplaySubject, delay, withLatestFrom, scan, takeWhile, concat, exhaustMap, EMPTY as EMPTY$1, interval, NEVER, switchScan, mapTo } from 'rxjs';
-import * as i2$2 from '@angular/router';
+import { rgbColor, ThemeService, coerceAttrBoolean, FormItemControlDirective, observeResizeOn, MessageService, NotificationService, DIALOG_DATA, DialogModule, ButtonModule, InputModule, IconModule, FormModule, MultiSelectComponent, handlePixel, isTemplateRef, ThemePickerPipe, TooltipModule, TooltipType, ButtonComponent, IconComponent, TagComponent, TooltipDirective, DateNavRange, InputGroupComponent, InputSuffixDirective, InputComponent, DateRangePickerPanelComponent, TagType, TagModule, TooltipComponent, BaseTooltip, TooltipTrigger, DialogService, INPUT_GROUP_MODULE, SelectModule, FORM_MODULE, DropdownModule, CheckboxModule, CardComponent, TOOLTIP_MODULE, CheckboxComponent, BackTopComponent, SortDirective, SortHeaderComponent, PaginatorComponent, TABLE_MODULE, DROPDOWN_MODULE, DialogRef, DIALOG_MODULE, CARD_MODULE, CHECKBOX_MODULE, TabsModule, DialogSize, MessageType, NOTIFICATION_DEFAULT_CONFIG } from '@alauda/ui';
+import { last, cloneDeep, has, unset, get, isBoolean, sortBy, set, trim, isFunction, range, debounce, uniq, identity, first, isString, isEmpty, isObjectLike, throttle, min, clamp, round, add, subtract } from 'lodash-es';
+import * as i3 from '@alauda-fe/dynamic-plugin-sdk';
+import { parseBase64Type, isBlank, publishRef, TOKEN_BASE_DOMAIN, stringify as stringify$1, isEqual, TimeService, TranslateService, isZhLang, FALLBACK_LANGUAGE, TranslatePipe, ObservableInput, FeatureGateService, FieldNotAvailablePipe, ValueHook, LoadingMaskComponent, PurePipe, StandardTimePipe, RelativeTimePipe, skipError, CURR_ESCAPE_DEACTIVATE_GUARD, ESCAPE_DEACTIVATE_GUARD, parseAll, FIELD_NOT_AVAILABLE_PLACEHOLDER, noop, SafePipe, WatchEvent, K8sUtilService, NAMESPACE as NAMESPACE$1, isFieldNotAvailable, K8S_UTIL_PIPES_MODULE, ResourceSelectorPopupService, ProjectService, ConfigurableField, API_GATEWAY as API_GATEWAY$1, ClusterListComponent, K8sApiService, TRANSLATE_MODULE, KubernetesSchemaService, NOTIFY_DURATION_HEADER as NOTIFY_DURATION_HEADER$1, EMPTY as EMPTY$2, FALSE as FALSE$1, isMac } from '@alauda-fe/dynamic-plugin-sdk';
+import { Observable, finalize, map, startWith, catchError, of, isObservable, switchMap, animationFrameScheduler, fromEvent, auditTime, Subject, takeUntil, distinctUntilChanged, combineLatest, filter, debounceTime, take, merge, pairwise, tap, BehaviorSubject, from, timer, ReplaySubject, delay, withLatestFrom, scan, takeWhile, concat, exhaustMap, EMPTY as EMPTY$1, interval, NEVER, switchScan, shareReplay, mapTo, throwError } from 'rxjs';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { dissocPath, converge, mergeAll, mergeDeepRight, path, assocPath, identity as identity$1, equals } from 'ramda';
+import { dissocPath, converge, mergeAll, mergeDeepRight, path, assocPath, identity as identity$1, equals, mergeRight } from 'ramda';
 import { compare } from 'compare-versions';
 export { compareVersions as compareVersionToNum, satisfies as satisfiesVersion } from 'compare-versions';
 import * as i0 from '@angular/core';
-import { inject, Directive, NgZone, Injectable, IterableDiffers, isDevMode, Pipe, ChangeDetectorRef, Input, ViewContainerRef, TemplateRef, ɵstringify as _stringify, ElementRef, ComponentFactoryResolver, HostBinding, ChangeDetectionStrategy, Component, EventEmitter, Output, HostListener, Inject, Host, booleanAttribute, forwardRef, ContentChild, Optional, ViewEncapsulation, ViewChild, Injector, ApplicationRef, ViewChildren, ContentChildren, InjectionToken, input, NgModule, computed } from '@angular/core';
+import { inject, Directive, NgZone, Injectable, IterableDiffers, isDevMode, Pipe, ChangeDetectorRef, Input, ViewContainerRef, TemplateRef, ɵstringify as _stringify, ElementRef, Injector, HostBinding, ChangeDetectionStrategy, Component, EventEmitter, Output, HostListener, booleanAttribute, forwardRef, ContentChild, Renderer2, ViewEncapsulation, ViewChild, ApplicationRef, ViewChildren, ContentChildren, InjectionToken, input, computed, numberAttribute } from '@angular/core';
 import parser from 'cron-parser';
 import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
 import { marked } from 'marked';
 import cronstrue from 'cronstrue';
 import 'cronstrue/locales/zh_CN';
 import 'cronstrue/locales/en';
 import * as i1$1 from '@angular/common';
-import { DecimalPipe, NgTemplateOutlet, AsyncPipe, NgClass, NgStyle, CommonModule, Location } from '@angular/common';
-import duration from 'dayjs/plugin/duration';
+import { DecimalPipe, NgTemplateOutlet, AsyncPipe, NgClass, NgStyle, CommonModule, Location, KeyValuePipe } from '@angular/common';
 import { __decorate, __metadata } from 'tslib';
 import * as i2 from '@angular/forms';
 import { ControlContainer, NgControl, Validators, NG_VALIDATORS, DefaultValueAccessor, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, NG_ASYNC_VALIDATORS, MaxLengthValidator, MinLengthValidator, NgForm, FormGroupDirective, FormBuilder, FormGroup, FormArray } from '@angular/forms';
-import { CdkPortalOutlet, TemplatePortal, ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';
-import * as i1$3 from '@angular/cdk/scrolling';
+import * as i1$2 from '@angular/cdk/scrolling';
 import { CdkScrollable, ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import * as i1$2 from '@angular/cdk/overlay';
-import { ScrollDispatcher } from '@angular/cdk/overlay';
+import { ScrollDispatcher, Overlay } from '@angular/cdk/overlay';
 import { decode, encode } from 'ab64';
+import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { yamlWriteOptions, createActions, MonacoEditorConfig, viewActions, readonlyOptions, CodeEditorComponent, yamlReadMinimapOptions, yamlReadOptions, MonacoLanguageService, yamlWriteMinimapOptions, updateActions } from '@alauda/code-editor';
 import { DomSanitizer } from '@angular/platform-browser';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { BaseResourceFormComponent } from 'ng-resource-form-util';
-import { MonacoEditorConfig } from 'ng-monaco-editor';
-import * as i2$3 from '@alauda/code-editor';
-import { CodeEditorModule } from '@alauda/code-editor';
+import { HttpClient } from '@angular/common/http';
 
 /**
  * @packageDocumentation
@@ -161,6 +155,7 @@ const AccessMode = {
     RWO: 'ReadWriteOnce',
     ROX: 'ReadOnlyMany',
     RWX: 'ReadWriteMany',
+    RWOP: 'ReadWriteOncePod',
 };
 const AccessModes = [AccessMode.RWO, AccessMode.ROX, AccessMode.RWX];
 var VolumeTypeEnum;
@@ -2913,8 +2908,6 @@ function fullStrategyCheck(keys, controls, _, mapFn, matchesFn, initData) {
     return toRemoveError;
 }
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
 class CrontabNextPipe {
     constructor() {
         this.time = inject(TimeService);
@@ -3134,7 +3127,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 
-dayjs.extend(duration);
 class DurationPipe {
     constructor() {
         this.translate = inject(TranslateService);
@@ -3365,8 +3357,8 @@ class ReadonlyFieldDirective {
         this.templateContext = {};
         this.destroy$ = new Subject();
         this.control = inject(NgControl);
-        this.cfr = inject(ComponentFactoryResolver);
         this.viewContainerRef = inject(ViewContainerRef);
+        this.injector = inject(Injector);
         // 仅考虑当前control，子control无法知晓父FormItemControl元素 ，包裹了多少个control，以及各自处于什么状态，该情况自行处理
         this.controlDirective = inject(FormItemControlDirective, {
             optional: true,
@@ -3382,9 +3374,10 @@ class ReadonlyFieldDirective {
                 $implicit: value,
                 ...this.context,
             });
+            this.templateViewRef?.detectChanges();
         }
         else {
-            this.spanComponentRef.instance.setData(value);
+            this.spanComponentRef?.instance.setData(value);
         }
     }
     ngOnInit() {
@@ -3392,29 +3385,20 @@ class ReadonlyFieldDirective {
         // formControl will compose multi validators to 1, no matter defined in template nor FormBuilder
         const { validator, asyncValidator } = controlEntity;
         this.isControlRequired = this.controlDirective?.required || false;
-        const portalOutlet = new CdkPortalOutlet(this.cfr, this.viewContainerRef);
-        const portal = this.template
-            ? new TemplatePortal(this.template, this.viewContainerRef, this.templateContext)
-            : new ComponentPortal(SpanComponent, this.viewContainerRef);
         const containerAttached$ = this.aclReadonlyField$.pipe(distinctUntilChanged(), map(isUpdate => {
             if (!isUpdate) {
                 // 重置
                 if (this.controlDirective) {
                     this.controlDirective.required = this.isControlRequired;
                 }
-                if (portalOutlet.hasAttached()) {
-                    portalOutlet.detach();
-                }
+                this.detachReadonlyView();
                 this.applyValidators(controlEntity, validator, asyncValidator);
                 return false;
             }
             if (this.controlDirective) {
                 this.controlDirective.required = false;
             }
-            const attachPoint = portalOutlet.attach(portal);
-            if (!this.template) {
-                this.spanComponentRef = attachPoint;
-            }
+            this.attachReadonlyView();
             this.clearValidators(controlEntity);
             return true;
         }));
@@ -3448,6 +3432,30 @@ class ReadonlyFieldDirective {
     ngOnDestroy() {
         this.destroy$.next();
     }
+    attachReadonlyView() {
+        if (this.template) {
+            if (!this.templateViewRef) {
+                this.templateViewRef = this.viewContainerRef.createEmbeddedView(this.template, this.templateContext);
+            }
+            return;
+        }
+        if (!this.spanComponentRef) {
+            this.spanComponentRef = this.viewContainerRef.createComponent(SpanComponent, {
+                injector: this.injector,
+            });
+        }
+    }
+    detachReadonlyView() {
+        if (this.templateViewRef) {
+            this.templateViewRef.destroy();
+            this.templateViewRef = undefined;
+        }
+        if (this.spanComponentRef) {
+            this.spanComponentRef.destroy();
+            this.spanComponentRef = undefined;
+        }
+        this.viewContainerRef.clear();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ReadonlyFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: ReadonlyFieldDirective, isStandalone: true, selector: "[aclReadonlyField]", inputs: { aclReadonlyField: "aclReadonlyField", hidden: "hidden", template: ["aclReadonlyFieldTemplate", "template"], context: ["aclReadonlyFieldTemplateContext", "context"] }, host: { properties: { "hidden": "this.isHidden" } }, ngImport: i0 }); }
 }
@@ -3822,6 +3830,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  *
  */
 class ControlValueTraceDirective {
+    constructor() {
+        this.ngControl = inject(NgControl, { host: true });
+        this.aclValueTrackSkipFirst = false;
+        this.destroy$$ = new Subject();
+    }
     ngOnDestroy() {
         this.destroy$$.next();
         this.destroy$$.complete();
@@ -3834,12 +3847,7 @@ class ControlValueTraceDirective {
             .pipe(takeUntil(this.destroy$$))
             .subscribe(([value, changeFn]) => changeFn(value));
     }
-    constructor(ngControl) {
-        this.ngControl = ngControl;
-        this.aclValueTrackSkipFirst = false;
-        this.destroy$$ = new Subject();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ControlValueTraceDirective, deps: [{ token: NgControl, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ControlValueTraceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: ControlValueTraceDirective, isStandalone: true, selector: "[aclValueTrack]", inputs: { aclValueTrackSkipFirst: "aclValueTrackSkipFirst", aclValueTrack: "aclValueTrack" }, ngImport: i0 }); }
 }
 __decorate([
@@ -3852,12 +3860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     selector: '[aclValueTrack]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i2.NgControl, decorators: [{
-                    type: Inject,
-                    args: [NgControl]
-                }, {
-                    type: Host
-                }] }], propDecorators: { aclValueTrackSkipFirst: [{
+        }], propDecorators: { aclValueTrackSkipFirst: [{
                 type: Input
             }], aclValueTrack: [{
                 type: Input
@@ -4402,7 +4405,7 @@ class ConfirmDeleteComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ConfirmDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ConfirmDeleteComponent, isStandalone: true, selector: "acl-confirm-delete", inputs: { context: "context", type: "type", title: "title", resourceName: "resourceName", deleteTips: "deleteTips", confirmTips: "confirmTips", extraConfirmTips: "extraConfirmTips", confirmText: "confirmText", deleteResourceApi: "deleteResourceApi", deleteResourceParams: "deleteResourceParams", deleteSuccessMsg: "deleteSuccessMsg", deleteFailMsg: "deleteFailMsg" }, outputs: { close: "close" }, queries: [{ propertyName: "deleteTipTemplate", first: true, predicate: ConfirmDeleteTipDirective, descendants: true, read: TemplateRef }, { propertyName: "contentTemplate", first: true, predicate: ConfirmDeleteContentDirective, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: ConfirmDeleteLabelDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<form (ngSubmit)=\"onConfirm()\">\n  <aui-dialog-header>\n    <aui-icon\n      icon=\"exclamation_triangle_s\"\n      background=\"triangle\"\n      size=\"22\"\n    ></aui-icon>\n    {{ title }}\n  </aui-dialog-header>\n  <aui-dialog-content>\n    <p class=\"tw-mt-0 tw-mb-12 tw-text-main-text\">\n      @if (deleteTips) {\n        {{ deleteTips }}\n      }\n      @if (deleteTipTemplate) {\n        <ng-container *ngTemplateOutlet=\"deleteTipTemplate\"></ng-container>\n      }\n    </p>\n    @if (contentTemplate) {\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    }\n    <div class=\"tw-mb-4 tw-text-main-text\">\n      @if (labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n      }\n      @if (!labelTemplate) {\n        @if (confirmTips) {\n          {{ confirmTips }}\n        }\n        @if (!confirmTips) {\n          {{ 'please_enter_extra' | translate }}\n          <span class=\"tw-text-red\">{{ resourceName }}</span>\n          {{ 'extra_determine_' + type | translate\n          }}{{ extraConfirmTips ? ('period_symbol' | translate) : null\n          }}{{ extraConfirmTips }}\n        }\n      }\n    </div>\n    <input\n      auiFormItemControl\n      aui-input\n      name=\"resource-name\"\n      [(ngModel)]=\"inputValue\"\n      (ngModelChange)=\"inputValue$$.next($event)\"\n    />\n  </aui-dialog-content>\n  <aui-dialog-footer>\n    <button\n      aui-button=\"danger\"\n      [loading]=\"deleting$$ | async\"\n      [disabled]=\"disabled$ | async\"\n    >\n      {{ confirmText || type | translate }}\n    </button>\n    <button\n      aui-button\n      type=\"button\"\n      (click)=\"closeDialog()\"\n    >\n      {{ 'cancel' | translate }}\n    </button>\n  </aui-dialog-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: i1.DialogFooterComponent, selector: "aui-dialog-footer" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i1.InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i1.FormItemControlDirective, selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "directive", type: E2eAttributeBindingDirective, selector: "[click],[routerLink],a[href],[auiTooltip],[auiDropdown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ConfirmDeleteComponent, isStandalone: true, selector: "acl-confirm-delete", inputs: { context: "context", type: "type", title: "title", resourceName: "resourceName", deleteTips: "deleteTips", confirmTips: "confirmTips", extraConfirmTips: "extraConfirmTips", confirmText: "confirmText", deleteResourceApi: "deleteResourceApi", deleteResourceParams: "deleteResourceParams", deleteSuccessMsg: "deleteSuccessMsg", deleteFailMsg: "deleteFailMsg" }, outputs: { close: "close" }, queries: [{ propertyName: "deleteTipTemplate", first: true, predicate: ConfirmDeleteTipDirective, descendants: true, read: TemplateRef }, { propertyName: "contentTemplate", first: true, predicate: ConfirmDeleteContentDirective, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: ConfirmDeleteLabelDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<form (ngSubmit)=\"onConfirm()\">\n  <aui-dialog-header>\n    <aui-icon\n      icon=\"exclamation_triangle_s\"\n      background=\"triangle\"\n      size=\"22\"\n    ></aui-icon>\n    {{ title }}\n  </aui-dialog-header>\n  <aui-dialog-content>\n    <p class=\"delete-tip\">\n      @if (deleteTips) {\n        {{ deleteTips }}\n      }\n      @if (deleteTipTemplate) {\n        <ng-container *ngTemplateOutlet=\"deleteTipTemplate\"></ng-container>\n      }\n    </p>\n    @if (contentTemplate) {\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    }\n    <div class=\"confirm-tip\">\n      @if (labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n      }\n      @if (!labelTemplate) {\n        @if (confirmTips) {\n          {{ confirmTips }}\n        }\n        @if (!confirmTips) {\n          {{ 'please_enter_extra' | translate }}\n          <span class=\"resource-name\">{{ resourceName }}</span>\n          {{ 'extra_determine_' + type | translate\n          }}{{ extraConfirmTips ? ('period_symbol' | translate) : null\n          }}{{ extraConfirmTips }}\n        }\n      }\n    </div>\n    <input\n      auiFormItemControl\n      aui-input\n      name=\"resource-name\"\n      [(ngModel)]=\"inputValue\"\n      (ngModelChange)=\"inputValue$$.next($event)\"\n    />\n  </aui-dialog-content>\n  <aui-dialog-footer>\n    <button\n      aui-button=\"danger\"\n      [loading]=\"deleting$$ | async\"\n      [disabled]=\"disabled$ | async\"\n    >\n      {{ confirmText || type | translate }}\n    </button>\n    <button\n      aui-button\n      type=\"button\"\n      (click)=\"closeDialog()\"\n    >\n      {{ 'cancel' | translate }}\n    </button>\n  </aui-dialog-footer>\n</form>\n", styles: [".delete-tip{margin:0 0 12px;color:rgb(var(--aui-color-n-1))}.confirm-tip{margin-bottom:4px;color:rgb(var(--aui-color-n-1))}.resource-name{color:rgb(var(--aui-color-red))}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: i1.DialogFooterComponent, selector: "aui-dialog-footer" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i1.InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i1.FormItemControlDirective, selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "directive", type: E2eAttributeBindingDirective, selector: "[click],[routerLink],a[href],[auiTooltip],[auiDropdown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ConfirmDeleteComponent, decorators: [{
             type: Component,
@@ -4417,7 +4420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         FormModule,
                         AsyncPipe,
                         EFFECT_DIRECTIVE_MODULE,
-                    ], standalone: true, template: "<form (ngSubmit)=\"onConfirm()\">\n  <aui-dialog-header>\n    <aui-icon\n      icon=\"exclamation_triangle_s\"\n      background=\"triangle\"\n      size=\"22\"\n    ></aui-icon>\n    {{ title }}\n  </aui-dialog-header>\n  <aui-dialog-content>\n    <p class=\"tw-mt-0 tw-mb-12 tw-text-main-text\">\n      @if (deleteTips) {\n        {{ deleteTips }}\n      }\n      @if (deleteTipTemplate) {\n        <ng-container *ngTemplateOutlet=\"deleteTipTemplate\"></ng-container>\n      }\n    </p>\n    @if (contentTemplate) {\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    }\n    <div class=\"tw-mb-4 tw-text-main-text\">\n      @if (labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n      }\n      @if (!labelTemplate) {\n        @if (confirmTips) {\n          {{ confirmTips }}\n        }\n        @if (!confirmTips) {\n          {{ 'please_enter_extra' | translate }}\n          <span class=\"tw-text-red\">{{ resourceName }}</span>\n          {{ 'extra_determine_' + type | translate\n          }}{{ extraConfirmTips ? ('period_symbol' | translate) : null\n          }}{{ extraConfirmTips }}\n        }\n      }\n    </div>\n    <input\n      auiFormItemControl\n      aui-input\n      name=\"resource-name\"\n      [(ngModel)]=\"inputValue\"\n      (ngModelChange)=\"inputValue$$.next($event)\"\n    />\n  </aui-dialog-content>\n  <aui-dialog-footer>\n    <button\n      aui-button=\"danger\"\n      [loading]=\"deleting$$ | async\"\n      [disabled]=\"disabled$ | async\"\n    >\n      {{ confirmText || type | translate }}\n    </button>\n    <button\n      aui-button\n      type=\"button\"\n      (click)=\"closeDialog()\"\n    >\n      {{ 'cancel' | translate }}\n    </button>\n  </aui-dialog-footer>\n</form>\n" }]
+                    ], standalone: true, template: "<form (ngSubmit)=\"onConfirm()\">\n  <aui-dialog-header>\n    <aui-icon\n      icon=\"exclamation_triangle_s\"\n      background=\"triangle\"\n      size=\"22\"\n    ></aui-icon>\n    {{ title }}\n  </aui-dialog-header>\n  <aui-dialog-content>\n    <p class=\"delete-tip\">\n      @if (deleteTips) {\n        {{ deleteTips }}\n      }\n      @if (deleteTipTemplate) {\n        <ng-container *ngTemplateOutlet=\"deleteTipTemplate\"></ng-container>\n      }\n    </p>\n    @if (contentTemplate) {\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    }\n    <div class=\"confirm-tip\">\n      @if (labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n      }\n      @if (!labelTemplate) {\n        @if (confirmTips) {\n          {{ confirmTips }}\n        }\n        @if (!confirmTips) {\n          {{ 'please_enter_extra' | translate }}\n          <span class=\"resource-name\">{{ resourceName }}</span>\n          {{ 'extra_determine_' + type | translate\n          }}{{ extraConfirmTips ? ('period_symbol' | translate) : null\n          }}{{ extraConfirmTips }}\n        }\n      }\n    </div>\n    <input\n      auiFormItemControl\n      aui-input\n      name=\"resource-name\"\n      [(ngModel)]=\"inputValue\"\n      (ngModelChange)=\"inputValue$$.next($event)\"\n    />\n  </aui-dialog-content>\n  <aui-dialog-footer>\n    <button\n      aui-button=\"danger\"\n      [loading]=\"deleting$$ | async\"\n      [disabled]=\"disabled$ | async\"\n    >\n      {{ confirmText || type | translate }}\n    </button>\n    <button\n      aui-button\n      type=\"button\"\n      (click)=\"closeDialog()\"\n    >\n      {{ 'cancel' | translate }}\n    </button>\n  </aui-dialog-footer>\n</form>\n", styles: [".delete-tip{margin:0 0 12px;color:rgb(var(--aui-color-n-1))}.confirm-tip{margin-bottom:4px;color:rgb(var(--aui-color-n-1))}.resource-name{color:rgb(var(--aui-color-red))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { context: [{
                 type: Input
             }], type: [{
@@ -4554,6 +4557,14 @@ const AUI_MULTI_SELECT_PLACEHOLDER_CLASS = 'aui-multi-select__placeholder';
 // NOTE: 提供此指令，是由于个人不支持此组件行为，不建议直接引入aui，希望作为业务上的尝试，因此提供指令以供删改
 // 纯css无法提供本问题的完整解决方案,若有更优方案，请删除此部分代码，以及 acl-select-prefix mixin
 class SelectPrefixLabelDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.multiSelectComponent = inject(MultiSelectComponent, {
+            optional: true,
+        });
+    }
     queryElementByClassName(className) {
         return this.elementRef.nativeElement?.querySelector(`.${className}`);
     }
@@ -4583,13 +4594,7 @@ class SelectPrefixLabelDirective {
             placeholder.style.paddingLeft = `${inlineLabel.offsetWidth + PREFIX_LABEL_PLACEHOLDER_PADDING_LEFT_FIX}px`;
         }
     }
-    constructor(elementRef, renderer, viewContainerRef, multiSelectComponent) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.viewContainerRef = viewContainerRef;
-        this.multiSelectComponent = multiSelectComponent;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectPrefixLabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i1.MultiSelectComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectPrefixLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SelectPrefixLabelDirective, isStandalone: true, selector: "aui-select[aclPrefixLabel],aui-multi-select[aclPrefixLabel]", inputs: { aclPrefixLabel: "aclPrefixLabel" }, ngImport: i0 }); }
 }
 __decorate([
@@ -4620,9 +4625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     selector: 'aui-select[aclPrefixLabel],aui-multi-select[aclPrefixLabel]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i1.MultiSelectComponent, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { aclPrefixLabel: [{
+        }], propDecorators: { aclPrefixLabel: [{
                 type: Input
             }] } });
 
@@ -4632,8 +4635,8 @@ class ZeroStateComponent {
         this.fetching = false;
         this.context = 'form';
         this.image = [
-            'assets/images/light/no-data-for-list-or-card.svg',
-            'assets/images/dark/no-data-for-list-or-card.svg',
+            '/console-assets/images/light/no-data-for-list-or-card.svg',
+            '/console-assets/images/dark/no-data-for-list-or-card.svg',
         ];
         this.handlePixel = handlePixel;
         this.isTemplateRef = isTemplateRef;
@@ -4675,9 +4678,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             }] } });
 
 class RelativeTimeComponent {
-    constructor(cdr, translate) {
-        this.cdr = cdr;
-        this.translate = translate;
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.translate = inject(TranslateService);
         this.destroy$ = new Subject();
     }
     ngOnInit() {
@@ -4690,7 +4693,7 @@ class RelativeTimeComponent {
     ngOnDestroy() {
         this.destroy$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RelativeTimeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RelativeTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: RelativeTimeComponent, isStandalone: true, selector: "acl-relative-time", inputs: { time: "time" }, ngImport: i0, template: `
     <span
       [auiTooltip]="time | aclStandardTime"
@@ -4719,7 +4722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     standalone: true,
                     imports: [TooltipModule, StandardTimePipe, RelativeTimePipe],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$1.TranslateService }], propDecorators: { time: [{
+        }], propDecorators: { time: [{
                 type: Input
             }] } });
 
@@ -5007,7 +5010,7 @@ const CLONE_ELEMENT_BASE_STYLES = {
  * 效果：
  * 发生截取的文案会显示完整内容的 tooltip。未发生截取的文案不显示 tooltip。
  * @example:
- * <span class="tw-text-overflow" aclTextTooltip>TEXT...</span>
+ * <span aclTextTooltip>TEXT...</span>
  *
  * tooltip 的一些设置（位置、类型）可以使用 aui 相同设置。未传 tooltip content 则取元素 text content
  */
@@ -5277,7 +5280,7 @@ class DateRangePickerComponent {
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "tip", first: true, predicate: ["tip"], descendants: true }], ngImport: i0, template: "@if (mode === 'input' || mode === 'dropdown') {\n  <aui-input-group\n    [auiTooltip]=\"tooltip\"\n    auiTooltipClass=\"acl-date-range-picker__panel\"\n    auiTooltipTrigger=\"click\"\n    auiTooltipType=\"info\"\n    auiTooltipPosition=\"bottom start\"\n    auiTooltipAnimType=\"none\"\n    [style.width]=\"inputWidth\"\n    #tip=\"auiTooltip\"\n  >\n    <input\n      aui-input\n      [class]=\"{\n        'tw-text-center': mode === 'dropdown',\n        '!tw-text-s': mode === 'dropdown',\n        'date-range-picker': true,\n      }\"\n      [title]=\"value | pure: formatValue : (translate.locale$ | async)\"\n      [value]=\"value | pure: formatValue : (translate.locale$ | async)\"\n      readonly\n    />\n    <aui-icon\n      auiInputSuffix\n      class=\"tw-text-n-2\"\n      [icon]=\"mode === 'dropdown' ? 'calendar' : 'caret_down_s'\"\n    ></aui-icon>\n  </aui-input-group>\n}\n\n@if (mode === 'tag') {\n  <aui-tag\n    size=\"mini\"\n    class=\"tag\"\n    [type]=\"tagActive ? 'primary' : 'info'\"\n    [solid]=\"tagActive\"\n    [auiTooltip]=\"tooltip\"\n    auiTooltipClass=\"acl-date-range-picker__panel\"\n    auiTooltipTrigger=\"click\"\n    auiTooltipType=\"info\"\n    #tip=\"auiTooltip\"\n    auiTooltipPosition=\"bottom start\"\n  >\n    <aui-icon icon=\"clock\"></aui-icon>\n    {{\n      !value\n        ? ('more' | translate)\n        : (value | pure: formatValue : (translate.locale$ | async))\n    }}\n    <aui-icon\n      class=\"tw-ml-[-4px]\"\n      icon=\"angle_down\"\n      margin=\"left\"\n    ></aui-icon>\n  </aui-tag>\n}\n\n<ng-template #tooltip>\n  <div class=\"range-picker-panel\">\n    <div class=\"control\">\n      @for (range of ranges; track range) {\n        <span\n          class=\"control-row\"\n          [class.active]=\"range.label === selectedRange?.label\"\n          (click)=\"selectRange(range)\"\n        >\n          {{\n            range.display\n              ? (range.display | translate: range.displayCtx)\n              : (range.label | translate)\n          }}\n        </span>\n      }\n    </div>\n    @if (isCustom) {\n      <div class=\"range-picker-wrapper\">\n        <aui-date-range-picker-panel\n          [disabledDate]=\"options | pure: getDisabledDate\"\n          [(ngModel)]=\"rangeValue\"\n          (confirm)=\"submitRange(CUSTOM_RANGE, rangeValue)\"\n          (clear)=\"rangeValue = []\"\n          (click)=\"$event.stopImmediatePropagation()\"\n          [showTime]=\"finalOptions.timePicker\"\n          [disabledTime]=\"enableDisableTime && disabledTime()\"\n        ></aui-date-range-picker-panel>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".range-picker-panel{display:inline-flex}.range-picker-footer{padding:9px;display:flex;justify-content:flex-end;box-sizing:content-box;border-top:1px solid use-rgb(divider)}.range-picker-footer .range-date-tip{display:flex;font-size:14px;align-items:center;margin-right:6px;color:use-text-color(main)}.date-range-picker[readonly]{background-color:use-rgb(n-9);border-color:use-rgb(n-7)}aui-input-group{width:100%;display:inline-block}:host::ng-deep{display:flex}:host::ng-deep .aui-input{cursor:pointer!important}::ng-deep .acl-date-range-picker__panel{max-width:unset!important;padding:0!important;overflow:hidden}::ng-deep .acl-date-range-picker__panel .control{display:flex;min-width:120px;flex-direction:column;max-height:337px;overflow:auto}::ng-deep .acl-date-range-picker__panel .range-picker-wrapper{padding:8px;display:flex;flex-direction:column;border-left:1px solid use-rgb(divider)}::ng-deep .acl-date-range-picker__panel .control-row{padding:8px 12px;font-size:12px;color:use-text-color(main)}::ng-deep .acl-date-range-picker__panel .control-row:hover{background-color:use-rgb(p-6);color:use-rgb(primary);cursor:pointer}::ng-deep .acl-date-range-picker__panel .control-row.active{background-color:use-rgb(p-6);color:use-rgb(primary)}.tag{position:relative}.tag ::ng-deep .aui-tag__content{overflow:inherit}.tag ::ng-deep .aui-tag{max-width:unset!important}\n"], dependencies: [{ kind: "component", type: InputGroupComponent, selector: "aui-input-group" }, { kind: "directive", type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "directive", type: InputSuffixDirective, selector: "[auiInputSuffix]" }, { kind: "component", type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { kind: "component", type: DateRangePickerPanelComponent, selector: "aui-date-range-picker-panel", inputs: ["clearable", "clearText", "showTime", "showFooter", "disabledDate", "disabledTime", "weekStartDay", "minDate", "maxDate"], outputs: ["clear", "confirm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: E2eAttributeBindingDirective, selector: "[click],[routerLink],a[href],[auiTooltip],[auiDropdown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "tip", first: true, predicate: ["tip"], descendants: true }], ngImport: i0, template: "@if (mode === 'input' || mode === 'dropdown') {\n  <aui-input-group\n    [auiTooltip]=\"tooltip\"\n    auiTooltipClass=\"acl-date-range-picker__panel\"\n    auiTooltipTrigger=\"click\"\n    auiTooltipType=\"info\"\n    auiTooltipPosition=\"bottom start\"\n    auiTooltipAnimType=\"none\"\n    [style.width]=\"inputWidth\"\n    #tip=\"auiTooltip\"\n  >\n    <input\n      aui-input\n      [class]=\"{\n        'text-center': mode === 'dropdown',\n        'text-small': mode === 'dropdown',\n        'date-range-picker': true,\n      }\"\n      [title]=\"value | pure: formatValue : (translate.locale$ | async)\"\n      [value]=\"value | pure: formatValue : (translate.locale$ | async)\"\n      readonly\n    />\n    <aui-icon\n      auiInputSuffix\n      class=\"text-n-2\"\n      [icon]=\"mode === 'dropdown' ? 'calendar' : 'caret_down_s'\"\n    ></aui-icon>\n  </aui-input-group>\n}\n\n@if (mode === 'tag') {\n  <aui-tag\n    size=\"mini\"\n    class=\"tag\"\n    [type]=\"tagActive ? 'primary' : 'info'\"\n    [solid]=\"tagActive\"\n    [auiTooltip]=\"tooltip\"\n    auiTooltipClass=\"acl-date-range-picker__panel\"\n    auiTooltipTrigger=\"click\"\n    auiTooltipType=\"info\"\n    #tip=\"auiTooltip\"\n    auiTooltipPosition=\"bottom start\"\n  >\n    <aui-icon icon=\"clock\"></aui-icon>\n    {{\n      !value\n        ? ('more' | translate)\n        : (value | pure: formatValue : (translate.locale$ | async))\n    }}\n    <aui-icon\n      class=\"icon-spacer\"\n      icon=\"angle_down\"\n      margin=\"left\"\n    ></aui-icon>\n  </aui-tag>\n}\n\n<ng-template #tooltip>\n  <div class=\"range-picker-panel\">\n    <div class=\"control\">\n      @for (range of ranges; track range) {\n        <span\n          class=\"control-row\"\n          [class.active]=\"range.label === selectedRange?.label\"\n          (click)=\"selectRange(range)\"\n        >\n          {{\n            range.display\n              ? (range.display | translate: range.displayCtx)\n              : (range.label | translate)\n          }}\n        </span>\n      }\n    </div>\n    @if (isCustom) {\n      <div class=\"range-picker-wrapper\">\n        <aui-date-range-picker-panel\n          [disabledDate]=\"options | pure: getDisabledDate\"\n          [(ngModel)]=\"rangeValue\"\n          (confirm)=\"submitRange(CUSTOM_RANGE, rangeValue)\"\n          (clear)=\"rangeValue = []\"\n          (click)=\"$event.stopImmediatePropagation()\"\n          [showTime]=\"finalOptions.timePicker\"\n          [disabledTime]=\"enableDisableTime && disabledTime()\"\n        ></aui-date-range-picker-panel>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".range-picker-panel{display:inline-flex}.range-picker-footer{padding:9px;display:flex;justify-content:flex-end;box-sizing:content-box;border-top:1px solid use-rgb(divider)}.range-picker-footer .range-date-tip{display:flex;font-size:14px;align-items:center;margin-right:6px;color:use-text-color(main)}.date-range-picker[readonly]{background-color:use-rgb(n-9);border-color:use-rgb(n-7)}aui-input-group{width:100%;display:inline-block}:host::ng-deep{display:flex}:host::ng-deep .aui-input{cursor:pointer!important}::ng-deep .acl-date-range-picker__panel{max-width:unset!important;padding:0!important;overflow:hidden}::ng-deep .acl-date-range-picker__panel .control{display:flex;min-width:120px;flex-direction:column;max-height:337px;overflow:auto}::ng-deep .acl-date-range-picker__panel .range-picker-wrapper{padding:8px;display:flex;flex-direction:column;border-left:1px solid use-rgb(divider)}::ng-deep .acl-date-range-picker__panel .control-row{padding:8px 12px;font-size:12px;color:use-text-color(main)}::ng-deep .acl-date-range-picker__panel .control-row:hover{background-color:use-rgb(p-6);color:use-rgb(primary);cursor:pointer}::ng-deep .acl-date-range-picker__panel .control-row.active{background-color:use-rgb(p-6);color:use-rgb(primary)}.tag{position:relative}.tag ::ng-deep .aui-tag__content{overflow:inherit}.text-center{text-align:center}.text-small{font-size:12px!important}.text-n-2{color:use-rgb(n-2)}.icon-spacer{margin-left:-4px}\n"], dependencies: [{ kind: "component", type: InputGroupComponent, selector: "aui-input-group" }, { kind: "directive", type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "directive", type: InputSuffixDirective, selector: "[auiInputSuffix]" }, { kind: "component", type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { kind: "component", type: DateRangePickerPanelComponent, selector: "aui-date-range-picker-panel", inputs: ["clearable", "clearText", "showTime", "showFooter", "disabledDate", "disabledTime", "weekStartDay", "minDate", "maxDate"], outputs: ["clear", "confirm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: E2eAttributeBindingDirective, selector: "[click],[routerLink],a[href],[auiTooltip],[auiDropdown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -5300,7 +5303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         PurePipe,
                         AsyncPipe,
                         EFFECT_DIRECTIVE_MODULE,
-                    ], standalone: true, template: "@if (mode === 'input' || mode === 'dropdown') {\n  <aui-input-group\n    [auiTooltip]=\"tooltip\"\n    auiTooltipClass=\"acl-date-range-picker__panel\"\n    auiTooltipTrigger=\"click\"\n    auiTooltipType=\"info\"\n    auiTooltipPosition=\"bottom start\"\n    auiTooltipAnimType=\"none\"\n    [style.width]=\"inputWidth\"\n    #tip=\"auiTooltip\"\n  >\n    <input\n      aui-input\n      [class]=\"{\n        'tw-text-center': mode === 'dropdown',\n        '!tw-text-s': mode === 'dropdown',\n        'date-range-picker': true,\n      }\"\n      [title]=\"value | pure: formatValue : (translate.locale$ | async)\"\n      [value]=\"value | pure: formatValue : (translate.locale$ | async)\"\n      readonly\n    />\n    <aui-icon\n      auiInputSuffix\n      class=\"tw-text-n-2\"\n      [icon]=\"mode === 'dropdown' ? 'calendar' : 'caret_down_s'\"\n    ></aui-icon>\n  </aui-input-group>\n}\n\n@if (mode === 'tag') {\n  <aui-tag\n    size=\"mini\"\n    class=\"tag\"\n    [type]=\"tagActive ? 'primary' : 'info'\"\n    [solid]=\"tagActive\"\n    [auiTooltip]=\"tooltip\"\n    auiTooltipClass=\"acl-date-range-picker__panel\"\n    auiTooltipTrigger=\"click\"\n    auiTooltipType=\"info\"\n    #tip=\"auiTooltip\"\n    auiTooltipPosition=\"bottom start\"\n  >\n    <aui-icon icon=\"clock\"></aui-icon>\n    {{\n      !value\n        ? ('more' | translate)\n        : (value | pure: formatValue : (translate.locale$ | async))\n    }}\n    <aui-icon\n      class=\"tw-ml-[-4px]\"\n      icon=\"angle_down\"\n      margin=\"left\"\n    ></aui-icon>\n  </aui-tag>\n}\n\n<ng-template #tooltip>\n  <div class=\"range-picker-panel\">\n    <div class=\"control\">\n      @for (range of ranges; track range) {\n        <span\n          class=\"control-row\"\n          [class.active]=\"range.label === selectedRange?.label\"\n          (click)=\"selectRange(range)\"\n        >\n          {{\n            range.display\n              ? (range.display | translate: range.displayCtx)\n              : (range.label | translate)\n          }}\n        </span>\n      }\n    </div>\n    @if (isCustom) {\n      <div class=\"range-picker-wrapper\">\n        <aui-date-range-picker-panel\n          [disabledDate]=\"options | pure: getDisabledDate\"\n          [(ngModel)]=\"rangeValue\"\n          (confirm)=\"submitRange(CUSTOM_RANGE, rangeValue)\"\n          (clear)=\"rangeValue = []\"\n          (click)=\"$event.stopImmediatePropagation()\"\n          [showTime]=\"finalOptions.timePicker\"\n          [disabledTime]=\"enableDisableTime && disabledTime()\"\n        ></aui-date-range-picker-panel>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".range-picker-panel{display:inline-flex}.range-picker-footer{padding:9px;display:flex;justify-content:flex-end;box-sizing:content-box;border-top:1px solid use-rgb(divider)}.range-picker-footer .range-date-tip{display:flex;font-size:14px;align-items:center;margin-right:6px;color:use-text-color(main)}.date-range-picker[readonly]{background-color:use-rgb(n-9);border-color:use-rgb(n-7)}aui-input-group{width:100%;display:inline-block}:host::ng-deep{display:flex}:host::ng-deep .aui-input{cursor:pointer!important}::ng-deep .acl-date-range-picker__panel{max-width:unset!important;padding:0!important;overflow:hidden}::ng-deep .acl-date-range-picker__panel .control{display:flex;min-width:120px;flex-direction:column;max-height:337px;overflow:auto}::ng-deep .acl-date-range-picker__panel .range-picker-wrapper{padding:8px;display:flex;flex-direction:column;border-left:1px solid use-rgb(divider)}::ng-deep .acl-date-range-picker__panel .control-row{padding:8px 12px;font-size:12px;color:use-text-color(main)}::ng-deep .acl-date-range-picker__panel .control-row:hover{background-color:use-rgb(p-6);color:use-rgb(primary);cursor:pointer}::ng-deep .acl-date-range-picker__panel .control-row.active{background-color:use-rgb(p-6);color:use-rgb(primary)}.tag{position:relative}.tag ::ng-deep .aui-tag__content{overflow:inherit}.tag ::ng-deep .aui-tag{max-width:unset!important}\n"] }]
+                    ], standalone: true, template: "@if (mode === 'input' || mode === 'dropdown') {\n  <aui-input-group\n    [auiTooltip]=\"tooltip\"\n    auiTooltipClass=\"acl-date-range-picker__panel\"\n    auiTooltipTrigger=\"click\"\n    auiTooltipType=\"info\"\n    auiTooltipPosition=\"bottom start\"\n    auiTooltipAnimType=\"none\"\n    [style.width]=\"inputWidth\"\n    #tip=\"auiTooltip\"\n  >\n    <input\n      aui-input\n      [class]=\"{\n        'text-center': mode === 'dropdown',\n        'text-small': mode === 'dropdown',\n        'date-range-picker': true,\n      }\"\n      [title]=\"value | pure: formatValue : (translate.locale$ | async)\"\n      [value]=\"value | pure: formatValue : (translate.locale$ | async)\"\n      readonly\n    />\n    <aui-icon\n      auiInputSuffix\n      class=\"text-n-2\"\n      [icon]=\"mode === 'dropdown' ? 'calendar' : 'caret_down_s'\"\n    ></aui-icon>\n  </aui-input-group>\n}\n\n@if (mode === 'tag') {\n  <aui-tag\n    size=\"mini\"\n    class=\"tag\"\n    [type]=\"tagActive ? 'primary' : 'info'\"\n    [solid]=\"tagActive\"\n    [auiTooltip]=\"tooltip\"\n    auiTooltipClass=\"acl-date-range-picker__panel\"\n    auiTooltipTrigger=\"click\"\n    auiTooltipType=\"info\"\n    #tip=\"auiTooltip\"\n    auiTooltipPosition=\"bottom start\"\n  >\n    <aui-icon icon=\"clock\"></aui-icon>\n    {{\n      !value\n        ? ('more' | translate)\n        : (value | pure: formatValue : (translate.locale$ | async))\n    }}\n    <aui-icon\n      class=\"icon-spacer\"\n      icon=\"angle_down\"\n      margin=\"left\"\n    ></aui-icon>\n  </aui-tag>\n}\n\n<ng-template #tooltip>\n  <div class=\"range-picker-panel\">\n    <div class=\"control\">\n      @for (range of ranges; track range) {\n        <span\n          class=\"control-row\"\n          [class.active]=\"range.label === selectedRange?.label\"\n          (click)=\"selectRange(range)\"\n        >\n          {{\n            range.display\n              ? (range.display | translate: range.displayCtx)\n              : (range.label | translate)\n          }}\n        </span>\n      }\n    </div>\n    @if (isCustom) {\n      <div class=\"range-picker-wrapper\">\n        <aui-date-range-picker-panel\n          [disabledDate]=\"options | pure: getDisabledDate\"\n          [(ngModel)]=\"rangeValue\"\n          (confirm)=\"submitRange(CUSTOM_RANGE, rangeValue)\"\n          (clear)=\"rangeValue = []\"\n          (click)=\"$event.stopImmediatePropagation()\"\n          [showTime]=\"finalOptions.timePicker\"\n          [disabledTime]=\"enableDisableTime && disabledTime()\"\n        ></aui-date-range-picker-panel>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".range-picker-panel{display:inline-flex}.range-picker-footer{padding:9px;display:flex;justify-content:flex-end;box-sizing:content-box;border-top:1px solid use-rgb(divider)}.range-picker-footer .range-date-tip{display:flex;font-size:14px;align-items:center;margin-right:6px;color:use-text-color(main)}.date-range-picker[readonly]{background-color:use-rgb(n-9);border-color:use-rgb(n-7)}aui-input-group{width:100%;display:inline-block}:host::ng-deep{display:flex}:host::ng-deep .aui-input{cursor:pointer!important}::ng-deep .acl-date-range-picker__panel{max-width:unset!important;padding:0!important;overflow:hidden}::ng-deep .acl-date-range-picker__panel .control{display:flex;min-width:120px;flex-direction:column;max-height:337px;overflow:auto}::ng-deep .acl-date-range-picker__panel .range-picker-wrapper{padding:8px;display:flex;flex-direction:column;border-left:1px solid use-rgb(divider)}::ng-deep .acl-date-range-picker__panel .control-row{padding:8px 12px;font-size:12px;color:use-text-color(main)}::ng-deep .acl-date-range-picker__panel .control-row:hover{background-color:use-rgb(p-6);color:use-rgb(primary);cursor:pointer}::ng-deep .acl-date-range-picker__panel .control-row.active{background-color:use-rgb(p-6);color:use-rgb(primary)}.tag{position:relative}.tag ::ng-deep .aui-tag__content{overflow:inherit}.text-center{text-align:center}.text-small{font-size:12px!important}.text-n-2{color:use-rgb(n-2)}.icon-spacer{margin-left:-4px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], format: [{
@@ -5872,7 +5875,7 @@ const initGreaterValidator = (type, control) => {
 
 class StrongPasswordTooltipComponent extends TooltipComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StrongPasswordTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: StrongPasswordTooltipComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"class$ | async\"\n  [class.strong-password-tooltip]=\"true\"\n  (mouseenter)=\"hover$.next(true)\"\n  (mouseleave)=\"hover$.next(false)\"\n>\n  @if (context$ | async; as context) {\n    <div class=\"title\">{{ 'strong_password_hint_title' | translate }}</div>\n    <ul class=\"conditions\">\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.length }\"\n        >\n        </ng-container>\n        <span>{{\n          'strong_password_conditions_length'\n            | translate\n              : {\n                  min: context.conditions.minLength,\n                  max: context.conditions.maxLength,\n                }\n        }}</span>\n      </li>\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.englishChar }\"\n        >\n        </ng-container>\n        <span>{{ 'strong_password_conditions_english_char' | translate }}</span>\n      </li>\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.number }\"\n        >\n        </ng-container>\n        <span>{{ 'strong_password_conditions_number' | translate }}</span>\n      </li>\n      @if (context.conditions.specialChar) {\n        <li>\n          <ng-container\n            [ngTemplateOutlet]=\"indicator\"\n            [ngTemplateOutletContext]=\"{ state: context.state.specialChar }\"\n          >\n          </ng-container>\n          <span>{{\n            'strong_password_conditions_special_char'\n              | translate: { chars: context.conditions.specialChar }\n          }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n<ng-template\n  #indicator\n  let-state=\"state\"\n>\n  <span\n    class=\"indicator\"\n    [class.check]=\"state\"\n  >\n    <aui-icon [icon]=\"state ? 'check_circle' : 'circle'\"></aui-icon>\n  </span>\n</ng-template>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors:active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.strong-password-tooltip.aui-tooltip{position:relative;padding:var(--aui-spacing-xl);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s);border-radius:var(--aui-border-radius-m)}:root .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}.strong-password-tooltip.aui-tooltip{word-wrap:break-word}.strong-password-tooltip.aui-tooltip--info{color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-popper-bg))}.strong-password-tooltip.aui-tooltip--top,.strong-password-tooltip.aui-tooltip--bottom{margin:var(--aui-spacing-s) 0}.strong-password-tooltip.aui-tooltip--start,.strong-password-tooltip.aui-tooltip--end{margin:0 var(--aui-spacing-s)}.strong-password-tooltip.aui-tooltip .title{margin-bottom:12px}.strong-password-tooltip.aui-tooltip .conditions li{display:flex;align-items:center}.strong-password-tooltip.aui-tooltip .conditions li+li{margin-top:8px}.strong-password-tooltip.aui-tooltip .indicator{display:inline-block;margin-right:8px;width:16px;height:16px;font-size:16px;color:rgb(var(--aui-color-border))}.strong-password-tooltip.aui-tooltip .indicator.check{color:rgb(var(--aui-color-green))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: StrongPasswordTooltipComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"class$ | async\"\n  [class.strong-password-tooltip]=\"true\"\n  (mouseenter)=\"hover$.next(true)\"\n  (mouseleave)=\"hover$.next(false)\"\n>\n  @if (context$ | async; as context) {\n    <div class=\"title\">{{ 'strong_password_hint_title' | translate }}</div>\n    <ul class=\"conditions\">\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.length }\"\n        >\n        </ng-container>\n        <span>{{\n          'strong_password_conditions_length'\n            | translate\n              : {\n                  min: context.conditions.minLength,\n                  max: context.conditions.maxLength,\n                }\n        }}</span>\n      </li>\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.englishChar }\"\n        >\n        </ng-container>\n        <span>{{ 'strong_password_conditions_english_char' | translate }}</span>\n      </li>\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.number }\"\n        >\n        </ng-container>\n        <span>{{ 'strong_password_conditions_number' | translate }}</span>\n      </li>\n      @if (context.conditions.specialChar) {\n        <li>\n          <ng-container\n            [ngTemplateOutlet]=\"indicator\"\n            [ngTemplateOutletContext]=\"{ state: context.state.specialChar }\"\n          >\n          </ng-container>\n          <span>{{\n            'strong_password_conditions_special_char'\n              | translate: { chars: context.conditions.specialChar }\n          }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n<ng-template\n  #indicator\n  let-state=\"state\"\n>\n  <span\n    class=\"indicator\"\n    [class.check]=\"state\"\n  >\n    <aui-icon [icon]=\"state ? 'check_circle' : 'circle'\"></aui-icon>\n  </span>\n</ng-template>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.strong-password-tooltip.aui-tooltip{position:relative;padding:var(--aui-spacing-xl);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s);border-radius:var(--aui-border-radius-m)}:root .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}.strong-password-tooltip.aui-tooltip{word-wrap:break-word}.strong-password-tooltip.aui-tooltip--info{color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-popper-bg))}.strong-password-tooltip.aui-tooltip--top,.strong-password-tooltip.aui-tooltip--bottom{margin:var(--aui-spacing-s) 0}.strong-password-tooltip.aui-tooltip--start,.strong-password-tooltip.aui-tooltip--end{margin:0 var(--aui-spacing-s)}.strong-password-tooltip.aui-tooltip .title{margin-bottom:12px}.strong-password-tooltip.aui-tooltip .conditions li{display:flex;align-items:center}.strong-password-tooltip.aui-tooltip .conditions li+li{margin-top:8px}.strong-password-tooltip.aui-tooltip .indicator{display:inline-block;margin-right:8px;width:16px;height:16px;font-size:16px;color:rgb(var(--aui-color-border))}.strong-password-tooltip.aui-tooltip .indicator.check{color:rgb(var(--aui-color-green))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StrongPasswordTooltipComponent, decorators: [{
             type: Component,
@@ -5882,7 +5885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         ReactiveFormsModule,
                         IconModule,
                         TranslatePipe,
-                    ], template: "<div\n  [class]=\"class$ | async\"\n  [class.strong-password-tooltip]=\"true\"\n  (mouseenter)=\"hover$.next(true)\"\n  (mouseleave)=\"hover$.next(false)\"\n>\n  @if (context$ | async; as context) {\n    <div class=\"title\">{{ 'strong_password_hint_title' | translate }}</div>\n    <ul class=\"conditions\">\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.length }\"\n        >\n        </ng-container>\n        <span>{{\n          'strong_password_conditions_length'\n            | translate\n              : {\n                  min: context.conditions.minLength,\n                  max: context.conditions.maxLength,\n                }\n        }}</span>\n      </li>\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.englishChar }\"\n        >\n        </ng-container>\n        <span>{{ 'strong_password_conditions_english_char' | translate }}</span>\n      </li>\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.number }\"\n        >\n        </ng-container>\n        <span>{{ 'strong_password_conditions_number' | translate }}</span>\n      </li>\n      @if (context.conditions.specialChar) {\n        <li>\n          <ng-container\n            [ngTemplateOutlet]=\"indicator\"\n            [ngTemplateOutletContext]=\"{ state: context.state.specialChar }\"\n          >\n          </ng-container>\n          <span>{{\n            'strong_password_conditions_special_char'\n              | translate: { chars: context.conditions.specialChar }\n          }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n<ng-template\n  #indicator\n  let-state=\"state\"\n>\n  <span\n    class=\"indicator\"\n    [class.check]=\"state\"\n  >\n    <aui-icon [icon]=\"state ? 'check_circle' : 'circle'\"></aui-icon>\n  </span>\n</ng-template>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors:active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.strong-password-tooltip.aui-tooltip{position:relative;padding:var(--aui-spacing-xl);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s);border-radius:var(--aui-border-radius-m)}:root .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}.strong-password-tooltip.aui-tooltip{word-wrap:break-word}.strong-password-tooltip.aui-tooltip--info{color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-popper-bg))}.strong-password-tooltip.aui-tooltip--top,.strong-password-tooltip.aui-tooltip--bottom{margin:var(--aui-spacing-s) 0}.strong-password-tooltip.aui-tooltip--start,.strong-password-tooltip.aui-tooltip--end{margin:0 var(--aui-spacing-s)}.strong-password-tooltip.aui-tooltip .title{margin-bottom:12px}.strong-password-tooltip.aui-tooltip .conditions li{display:flex;align-items:center}.strong-password-tooltip.aui-tooltip .conditions li+li{margin-top:8px}.strong-password-tooltip.aui-tooltip .indicator{display:inline-block;margin-right:8px;width:16px;height:16px;font-size:16px;color:rgb(var(--aui-color-border))}.strong-password-tooltip.aui-tooltip .indicator.check{color:rgb(var(--aui-color-green))}\n"] }]
+                    ], template: "<div\n  [class]=\"class$ | async\"\n  [class.strong-password-tooltip]=\"true\"\n  (mouseenter)=\"hover$.next(true)\"\n  (mouseleave)=\"hover$.next(false)\"\n>\n  @if (context$ | async; as context) {\n    <div class=\"title\">{{ 'strong_password_hint_title' | translate }}</div>\n    <ul class=\"conditions\">\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.length }\"\n        >\n        </ng-container>\n        <span>{{\n          'strong_password_conditions_length'\n            | translate\n              : {\n                  min: context.conditions.minLength,\n                  max: context.conditions.maxLength,\n                }\n        }}</span>\n      </li>\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.englishChar }\"\n        >\n        </ng-container>\n        <span>{{ 'strong_password_conditions_english_char' | translate }}</span>\n      </li>\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"indicator\"\n          [ngTemplateOutletContext]=\"{ state: context.state.number }\"\n        >\n        </ng-container>\n        <span>{{ 'strong_password_conditions_number' | translate }}</span>\n      </li>\n      @if (context.conditions.specialChar) {\n        <li>\n          <ng-container\n            [ngTemplateOutlet]=\"indicator\"\n            [ngTemplateOutletContext]=\"{ state: context.state.specialChar }\"\n          >\n          </ng-container>\n          <span>{{\n            'strong_password_conditions_special_char'\n              | translate: { chars: context.conditions.specialChar }\n          }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n<ng-template\n  #indicator\n  let-state=\"state\"\n>\n  <span\n    class=\"indicator\"\n    [class.check]=\"state\"\n  >\n    <aui-icon [icon]=\"state ? 'check_circle' : 'circle'\"></aui-icon>\n  </span>\n</ng-template>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.strong-password-tooltip.aui-tooltip{position:relative;padding:var(--aui-spacing-xl);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s);border-radius:var(--aui-border-radius-m)}:root .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .strong-password-tooltip.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}.strong-password-tooltip.aui-tooltip{word-wrap:break-word}.strong-password-tooltip.aui-tooltip--info{color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-popper-bg))}.strong-password-tooltip.aui-tooltip--top,.strong-password-tooltip.aui-tooltip--bottom{margin:var(--aui-spacing-s) 0}.strong-password-tooltip.aui-tooltip--start,.strong-password-tooltip.aui-tooltip--end{margin:0 var(--aui-spacing-s)}.strong-password-tooltip.aui-tooltip .title{margin-bottom:12px}.strong-password-tooltip.aui-tooltip .conditions li{display:flex;align-items:center}.strong-password-tooltip.aui-tooltip .conditions li+li{margin-top:8px}.strong-password-tooltip.aui-tooltip .indicator{display:inline-block;margin-right:8px;width:16px;height:16px;font-size:16px;color:rgb(var(--aui-color-border))}.strong-password-tooltip.aui-tooltip .indicator.check{color:rgb(var(--aui-color-green))}\n"] }]
         }] });
 
 class StrongPasswordDirective extends BaseTooltip {
@@ -5904,7 +5907,13 @@ class StrongPasswordDirective extends BaseTooltip {
     ngOnChanges() {
         this.onValidatorChange?.();
     }
-    constructor(overlay, viewContainerRef, elRef, renderer, cdr, ngZone) {
+    constructor() {
+        const overlay = inject(Overlay);
+        const viewContainerRef = inject(ViewContainerRef);
+        const elRef = inject(ElementRef);
+        const renderer = inject(Renderer2);
+        const cdr = inject(ChangeDetectorRef);
+        const ngZone = inject(NgZone);
         super(overlay, viewContainerRef, elRef, renderer, cdr, ngZone);
         this.specialChars = STRONG_PASSWORD_SPECIAL_CHARS;
         this.minlength = 8;
@@ -6012,7 +6021,7 @@ class StrongPasswordDirective extends BaseTooltip {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StrongPasswordDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StrongPasswordDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: StrongPasswordDirective, isStandalone: true, selector: "input[aclStrongPassword][ngModel],input[aclStrongPassword][formControl],input[aclStrongPassword][formControlName]", inputs: { aclStrongPassword: "aclStrongPassword", required: "required", specialChars: "specialChars", minlength: "minlength", maxlength: "maxlength", notStartsWith: "notStartsWith" }, providers: [
             {
                 provide: NG_VALIDATORS,
@@ -6033,7 +6042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { aclStrongPassword: [{
+        }], ctorParameters: () => [], propDecorators: { aclStrongPassword: [{
                 type: Input
             }], required: [{
                 type: Input
@@ -6607,78 +6616,12 @@ function genControlDepsMap(context, rules, destroy$) {
     });
 }
 
-/**
- * @packageDocumentation
- * @module code
- */
-const commonActions = {
-    copy: true,
-    find: true,
-    export: true,
-};
-const createActions = {
-    diffMode: false,
-    clear: true,
-    recover: false,
-    import: true,
-    ...commonActions,
-};
-const viewActions = {
-    diffMode: false,
-    clear: false,
-    recover: false,
-    import: false,
-    ...commonActions,
-};
-const updateActions = {
-    diffMode: true, // if true, you should also set 'originalValue' attribute, eg: <aui-code-editor [originalValue]="originalFile"></aui-code-editor>
-    clear: true,
-    recover: true,
-    import: true,
-    ...commonActions,
-};
-const logsActions = {
-    ...viewActions,
-    theme: true,
-};
-const commonOptions = {
-    folding: true,
-    minimap: { enabled: false },
-    wordWrap: 'on',
-    tabSize: 2,
-    scrollbar: {
-        alwaysConsumeMouseWheel: false,
-    },
-};
-const readonlyOptions = {
-    ...commonOptions,
-    readOnly: true,
-};
-const yamlReadOptions = {
-    language: 'yaml',
-    ...readonlyOptions,
-};
-const yamlWriteOptions = {
-    language: 'yaml',
-    ...commonOptions,
-};
-const textWriteOptions = {
-    language: 'text',
-    ...commonOptions,
-};
-// for logs
-const logsReadOptions = {
-    wordWrap: 'on',
-    readOnly: true,
-    renderLineHighlight: 'none',
-};
-
 class InterceptDeactivateService {
-    constructor(location, router, dialog, translate) {
-        this.location = location;
-        this.router = router;
-        this.dialog = dialog;
-        this.translate = translate;
+    constructor() {
+        this.location = inject(Location);
+        this.router = inject(Router);
+        this.dialog = inject(DialogService);
+        this.translate = inject(TranslateService);
         this.destroy$$ = new Subject();
     }
     ngOnDestroy() {
@@ -6721,13 +6664,13 @@ class InterceptDeactivateService {
             queryParams: this.searchParamsToQueryParams(url.searchParams),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InterceptDeactivateService, deps: [{ token: i1$1.Location }, { token: i2$2.Router }, { token: i1.DialogService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InterceptDeactivateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InterceptDeactivateService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InterceptDeactivateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.Location }, { type: i2$2.Router }, { type: i1.DialogService }, { type: i2$1.TranslateService }] });
+        }] });
 
 class InterceptDeactivateGuard {
     constructor() {
@@ -6765,9 +6708,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
         }] });
 
 class InterceptDeactivateDirective {
-    constructor(elRef, interceptDeactivate) {
-        this.elRef = elRef;
-        this.interceptDeactivate = interceptDeactivate;
+    constructor() {
+        this.elRef = inject(ElementRef);
+        this.interceptDeactivate = inject(InterceptDeactivateService);
         this.enabled$ = this.enabled$$.pipe(map(coerceAttrBoolean));
         this.destroy$$ = new Subject();
     }
@@ -6785,7 +6728,7 @@ class InterceptDeactivateDirective {
     onBeforeUnload() {
         return isDevMode() || !this.enabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InterceptDeactivateDirective, deps: [{ token: i0.ElementRef }, { token: InterceptDeactivateService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InterceptDeactivateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: InterceptDeactivateDirective, isStandalone: true, selector: "[aclInterceptDeactivate]", inputs: { enabled: ["aclInterceptDeactivate", "enabled"] }, host: { listeners: { "window:beforeunload": "onBeforeUnload()" } }, ngImport: i0 }); }
 }
 __decorate([
@@ -6798,7 +6741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     selector: '[aclInterceptDeactivate]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: InterceptDeactivateService }], propDecorators: { enabled: [{
+        }], propDecorators: { enabled: [{
                 type: Input,
                 args: ['aclInterceptDeactivate']
             }], enabled$$: [], onBeforeUnload: [{
@@ -7170,7 +7113,7 @@ class PasswordInputComponent extends BaseNestedFormControlPure {
                 useExisting: forwardRef(() => PasswordInputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<aui-form-item [width]=\"width\">\n  <label auiFormItemLabel>{{ label || ('password' | translate) }}</label>\n  @if (showInput) {\n    <aui-input-group\n      class=\"tw-flex-1\"\n      auiFormItemControl\n      [required]=\"required\"\n    >\n      <input\n        aui-input\n        [type]=\"showPassword ? 'text' : 'password'\"\n        name=\"password\"\n        #password=\"ngModel\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"emitModel($event)\"\n        autocomplete=\"new-password\"\n        [required]=\"required\"\n        [aclStrongPassword]=\"strongPassword\"\n        [specialChars]=\"specialChars\"\n        [pattern]=\"strongPassword ? null : pattern\"\n        [placeholder]=\"placeholder\"\n        [aclErrorsMapperOutlet]=\"passwordError\"\n        [aclErrorsMapper]=\"{\n          pattern: strongPassword\n            ? ('strong_password_pattern_tip'\n              | translate\n                : {\n                    chars: specialChars.split('').join(', '),\n                  })\n            : ('invalid_pattern' | translate),\n        }\"\n      />\n      @if (toggleable) {\n        <aui-icon\n          auiInputSuffix\n          class=\"tw-icon-m tw-cursor-pointer hover:tw-text-primary\"\n          [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n          (click)=\"showPassword = !showPassword\"\n        ></aui-icon>\n      }\n    </aui-input-group>\n  }\n  @if (hint) {\n    <div auiFormItemHint>\n      @if (isTemplateRef(hint)) {\n        <ng-container *ngTemplateOutlet=\"hint\"></ng-container>\n      } @else {\n        {{ hint }}\n      }\n    </div>\n  }\n  <div\n    #passwordError\n    auiFormItemError\n  ></div>\n  @if (!showInput) {\n    <span>******</span>\n    @if (!readonly) {\n      <button\n        aui-button=\"text\"\n        (click)=\"updatePasswd()\"\n      >\n        <aui-icon icon=\"pencil\"></aui-icon>\n      </button>\n    }\n  }\n</aui-form-item>\n@if (showInput && enableConfirm) {\n  <aui-form-item [width]=\"width\">\n    <label auiFormItemLabel>{{ 'confirm_password' | translate }}</label>\n    <aui-input-group\n      class=\"tw-flex-1\"\n      auiFormItemControl\n      [required]=\"required\"\n    >\n      <input\n        aui-input\n        [type]=\"showPassword ? 'text' : 'password'\"\n        name=\"confirmPassword\"\n        #confirm=\"ngModel\"\n        [(ngModel)]=\"confirmPassword\"\n        autocomplete=\"new-password\"\n        [required]=\"required\"\n        [aclValidateFn]=\"model | pure: validateConfirmPassword\"\n      />\n      @if (toggleable) {\n        <aui-icon\n          auiInputSuffix\n          class=\"tw-icon-m tw-cursor-pointer hover:tw-text-primary\"\n          [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n          (click)=\"showPassword = !showPassword\"\n        ></aui-icon>\n      }\n    </aui-input-group>\n    <acl-errors-mapper\n      auiFormItemError\n      [errors]=\"confirm?.errors\"\n      [errorsMapper]=\"{\n        notMatch: 'confirm_password_not_match' | translate,\n      }\"\n    ></acl-errors-mapper>\n  </aui-form-item>\n}\n", dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "component", type: i1.FormItemComponent, selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i1.FormItemErrorDirective, selector: "[auiFormItemError]" }, { kind: "directive", type: i1.FormItemHintDirective, selector: "[auiFormItemHint]" }, { kind: "directive", type: i1.FormItemLabelDirective, selector: "label[auiFormItemLabel]" }, { kind: "directive", type: i1.FormItemControlDirective, selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "component", type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "component", type: i1.InputGroupComponent, selector: "aui-input-group" }, { kind: "directive", type: i1.InputSuffixDirective, selector: "[auiInputSuffix]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: ErrorsMapperComponent, selector: "acl-errors-mapper", inputs: ["errors", "errorsMapper", "errorsMapperFn", "controlName", "ignoreUnknownError"] }, { kind: "directive", type: ErrorsMapperDirective, selector: "[aclErrorsMapper]", inputs: ["aclErrorsMapper", "aclErrorsMapperFn", "aclErrorsMapperDisabled", "aclErrorsMapperOutlet", "aclErrorsMapperControlName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FunctionValidatorDirective, selector: "[aclValidateFn][ngModel],[aclValidateFn][formControl],[aclValidateFn][formControlName]", inputs: ["aclValidateFn"] }, { kind: "directive", type: StrongPasswordDirective, selector: "input[aclStrongPassword][ngModel],input[aclStrongPassword][formControl],input[aclStrongPassword][formControlName]", inputs: ["aclStrongPassword", "required", "specialChars", "minlength", "maxlength", "notStartsWith"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<aui-form-item [width]=\"width\">\n  <label auiFormItemLabel>{{ label || ('password' | translate) }}</label>\n  @if (showInput) {\n    <aui-input-group\n      class=\"flex-1\"\n      auiFormItemControl\n      [required]=\"required\"\n    >\n      <input\n        aui-input\n        [type]=\"showPassword ? 'text' : 'password'\"\n        name=\"password\"\n        #password=\"ngModel\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"emitModel($event)\"\n        autocomplete=\"new-password\"\n        [required]=\"required\"\n        [aclStrongPassword]=\"strongPassword\"\n        [specialChars]=\"specialChars\"\n        [pattern]=\"strongPassword ? null : pattern\"\n        [placeholder]=\"placeholder\"\n        [aclErrorsMapperOutlet]=\"passwordError\"\n        [aclErrorsMapper]=\"{\n          pattern: strongPassword\n            ? ('strong_password_pattern_tip'\n              | translate\n                : {\n                    chars: specialChars.split('').join(', '),\n                  })\n            : ('invalid_pattern' | translate),\n        }\"\n      />\n      @if (toggleable) {\n        <aui-icon\n          auiInputSuffix\n          class=\"toggle-icon\"\n          [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n          (click)=\"showPassword = !showPassword\"\n        ></aui-icon>\n      }\n    </aui-input-group>\n  }\n  @if (hint) {\n    <div auiFormItemHint>\n      @if (isTemplateRef(hint)) {\n        <ng-container *ngTemplateOutlet=\"hint\"></ng-container>\n      } @else {\n        {{ hint }}\n      }\n    </div>\n  }\n  <div\n    #passwordError\n    auiFormItemError\n  ></div>\n  @if (!showInput) {\n    <span>******</span>\n    @if (!readonly) {\n      <button\n        aui-button=\"text\"\n        (click)=\"updatePasswd()\"\n      >\n        <aui-icon icon=\"pencil\"></aui-icon>\n      </button>\n    }\n  }\n</aui-form-item>\n@if (showInput && enableConfirm) {\n  <aui-form-item [width]=\"width\">\n    <label auiFormItemLabel>{{ 'confirm_password' | translate }}</label>\n    <aui-input-group\n      class=\"flex-1\"\n      auiFormItemControl\n      [required]=\"required\"\n    >\n      <input\n        aui-input\n        [type]=\"showPassword ? 'text' : 'password'\"\n        name=\"confirmPassword\"\n        #confirm=\"ngModel\"\n        [(ngModel)]=\"confirmPassword\"\n        autocomplete=\"new-password\"\n        [required]=\"required\"\n        [aclValidateFn]=\"model | pure: validateConfirmPassword\"\n      />\n      @if (toggleable) {\n        <aui-icon\n          auiInputSuffix\n          class=\"toggle-icon\"\n          [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n          (click)=\"showPassword = !showPassword\"\n        ></aui-icon>\n      }\n    </aui-input-group>\n    <acl-errors-mapper\n      auiFormItemError\n      [errors]=\"confirm?.errors\"\n      [errorsMapper]=\"{\n        notMatch: 'confirm_password_not_match' | translate,\n      }\"\n    ></acl-errors-mapper>\n  </aui-form-item>\n}\n", styles: [".flex-1{flex:1 1 0%}.toggle-icon{font-size:14px;cursor:pointer}.toggle-icon:hover{color:rgb(var(--aui-color-primary))}\n"], dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "component", type: i1.FormItemComponent, selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i1.FormItemErrorDirective, selector: "[auiFormItemError]" }, { kind: "directive", type: i1.FormItemHintDirective, selector: "[auiFormItemHint]" }, { kind: "directive", type: i1.FormItemLabelDirective, selector: "label[auiFormItemLabel]" }, { kind: "directive", type: i1.FormItemControlDirective, selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "component", type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "component", type: i1.InputGroupComponent, selector: "aui-input-group" }, { kind: "directive", type: i1.InputSuffixDirective, selector: "[auiInputSuffix]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: ErrorsMapperComponent, selector: "acl-errors-mapper", inputs: ["errors", "errorsMapper", "errorsMapperFn", "controlName", "ignoreUnknownError"] }, { kind: "directive", type: ErrorsMapperDirective, selector: "[aclErrorsMapper]", inputs: ["aclErrorsMapper", "aclErrorsMapperFn", "aclErrorsMapperDisabled", "aclErrorsMapperOutlet", "aclErrorsMapperControlName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FunctionValidatorDirective, selector: "[aclValidateFn][ngModel],[aclValidateFn][formControl],[aclValidateFn][formControlName]", inputs: ["aclValidateFn"] }, { kind: "directive", type: StrongPasswordDirective, selector: "input[aclStrongPassword][ngModel],input[aclStrongPassword][formControl],input[aclStrongPassword][formControlName]", inputs: ["aclStrongPassword", "required", "specialChars", "minlength", "maxlength", "notStartsWith"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
@@ -7197,7 +7140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                             useExisting: forwardRef(() => PasswordInputComponent),
                             multi: true,
                         },
-                    ], template: "<aui-form-item [width]=\"width\">\n  <label auiFormItemLabel>{{ label || ('password' | translate) }}</label>\n  @if (showInput) {\n    <aui-input-group\n      class=\"tw-flex-1\"\n      auiFormItemControl\n      [required]=\"required\"\n    >\n      <input\n        aui-input\n        [type]=\"showPassword ? 'text' : 'password'\"\n        name=\"password\"\n        #password=\"ngModel\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"emitModel($event)\"\n        autocomplete=\"new-password\"\n        [required]=\"required\"\n        [aclStrongPassword]=\"strongPassword\"\n        [specialChars]=\"specialChars\"\n        [pattern]=\"strongPassword ? null : pattern\"\n        [placeholder]=\"placeholder\"\n        [aclErrorsMapperOutlet]=\"passwordError\"\n        [aclErrorsMapper]=\"{\n          pattern: strongPassword\n            ? ('strong_password_pattern_tip'\n              | translate\n                : {\n                    chars: specialChars.split('').join(', '),\n                  })\n            : ('invalid_pattern' | translate),\n        }\"\n      />\n      @if (toggleable) {\n        <aui-icon\n          auiInputSuffix\n          class=\"tw-icon-m tw-cursor-pointer hover:tw-text-primary\"\n          [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n          (click)=\"showPassword = !showPassword\"\n        ></aui-icon>\n      }\n    </aui-input-group>\n  }\n  @if (hint) {\n    <div auiFormItemHint>\n      @if (isTemplateRef(hint)) {\n        <ng-container *ngTemplateOutlet=\"hint\"></ng-container>\n      } @else {\n        {{ hint }}\n      }\n    </div>\n  }\n  <div\n    #passwordError\n    auiFormItemError\n  ></div>\n  @if (!showInput) {\n    <span>******</span>\n    @if (!readonly) {\n      <button\n        aui-button=\"text\"\n        (click)=\"updatePasswd()\"\n      >\n        <aui-icon icon=\"pencil\"></aui-icon>\n      </button>\n    }\n  }\n</aui-form-item>\n@if (showInput && enableConfirm) {\n  <aui-form-item [width]=\"width\">\n    <label auiFormItemLabel>{{ 'confirm_password' | translate }}</label>\n    <aui-input-group\n      class=\"tw-flex-1\"\n      auiFormItemControl\n      [required]=\"required\"\n    >\n      <input\n        aui-input\n        [type]=\"showPassword ? 'text' : 'password'\"\n        name=\"confirmPassword\"\n        #confirm=\"ngModel\"\n        [(ngModel)]=\"confirmPassword\"\n        autocomplete=\"new-password\"\n        [required]=\"required\"\n        [aclValidateFn]=\"model | pure: validateConfirmPassword\"\n      />\n      @if (toggleable) {\n        <aui-icon\n          auiInputSuffix\n          class=\"tw-icon-m tw-cursor-pointer hover:tw-text-primary\"\n          [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n          (click)=\"showPassword = !showPassword\"\n        ></aui-icon>\n      }\n    </aui-input-group>\n    <acl-errors-mapper\n      auiFormItemError\n      [errors]=\"confirm?.errors\"\n      [errorsMapper]=\"{\n        notMatch: 'confirm_password_not_match' | translate,\n      }\"\n    ></acl-errors-mapper>\n  </aui-form-item>\n}\n" }]
+                    ], template: "<aui-form-item [width]=\"width\">\n  <label auiFormItemLabel>{{ label || ('password' | translate) }}</label>\n  @if (showInput) {\n    <aui-input-group\n      class=\"flex-1\"\n      auiFormItemControl\n      [required]=\"required\"\n    >\n      <input\n        aui-input\n        [type]=\"showPassword ? 'text' : 'password'\"\n        name=\"password\"\n        #password=\"ngModel\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"emitModel($event)\"\n        autocomplete=\"new-password\"\n        [required]=\"required\"\n        [aclStrongPassword]=\"strongPassword\"\n        [specialChars]=\"specialChars\"\n        [pattern]=\"strongPassword ? null : pattern\"\n        [placeholder]=\"placeholder\"\n        [aclErrorsMapperOutlet]=\"passwordError\"\n        [aclErrorsMapper]=\"{\n          pattern: strongPassword\n            ? ('strong_password_pattern_tip'\n              | translate\n                : {\n                    chars: specialChars.split('').join(', '),\n                  })\n            : ('invalid_pattern' | translate),\n        }\"\n      />\n      @if (toggleable) {\n        <aui-icon\n          auiInputSuffix\n          class=\"toggle-icon\"\n          [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n          (click)=\"showPassword = !showPassword\"\n        ></aui-icon>\n      }\n    </aui-input-group>\n  }\n  @if (hint) {\n    <div auiFormItemHint>\n      @if (isTemplateRef(hint)) {\n        <ng-container *ngTemplateOutlet=\"hint\"></ng-container>\n      } @else {\n        {{ hint }}\n      }\n    </div>\n  }\n  <div\n    #passwordError\n    auiFormItemError\n  ></div>\n  @if (!showInput) {\n    <span>******</span>\n    @if (!readonly) {\n      <button\n        aui-button=\"text\"\n        (click)=\"updatePasswd()\"\n      >\n        <aui-icon icon=\"pencil\"></aui-icon>\n      </button>\n    }\n  }\n</aui-form-item>\n@if (showInput && enableConfirm) {\n  <aui-form-item [width]=\"width\">\n    <label auiFormItemLabel>{{ 'confirm_password' | translate }}</label>\n    <aui-input-group\n      class=\"flex-1\"\n      auiFormItemControl\n      [required]=\"required\"\n    >\n      <input\n        aui-input\n        [type]=\"showPassword ? 'text' : 'password'\"\n        name=\"confirmPassword\"\n        #confirm=\"ngModel\"\n        [(ngModel)]=\"confirmPassword\"\n        autocomplete=\"new-password\"\n        [required]=\"required\"\n        [aclValidateFn]=\"model | pure: validateConfirmPassword\"\n      />\n      @if (toggleable) {\n        <aui-icon\n          auiInputSuffix\n          class=\"toggle-icon\"\n          [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n          (click)=\"showPassword = !showPassword\"\n        ></aui-icon>\n      }\n    </aui-input-group>\n    <acl-errors-mapper\n      auiFormItemError\n      [errors]=\"confirm?.errors\"\n      [errorsMapper]=\"{\n        notMatch: 'confirm_password_not_match' | translate,\n      }\"\n    ></acl-errors-mapper>\n  </aui-form-item>\n}\n", styles: [".flex-1{flex:1 1 0%}.toggle-icon{font-size:14px;cursor:pointer}.toggle-icon:hover{color:rgb(var(--aui-color-primary))}\n"] }]
         }], propDecorators: { initPassword: [{
                 type: Input
             }], label: [{
@@ -7522,11 +7465,11 @@ class SearchPanelComponent {
         return panels?.length % 3 === 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SearchPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SearchPanelComponent, isStandalone: true, selector: "acl-search-panel", inputs: { enableEnterHandler: "enableEnterHandler" }, outputs: { searchEvent: "searchEvent", resetSearch: "resetSearch" }, host: { listeners: { "document:keydown.enter": "enter()" } }, queries: [{ propertyName: "items", predicate: SearchItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"search-panel\">\n  <ng-content></ng-content>\n  <acl-search-item [style.width]=\"(isFulWidth$$ | async) ? '100%' : ''\">\n    <div class=\"tw-justify-end tw-w-full search\">\n      <button\n        type=\"button\"\n        aui-button=\"primary\"\n        (click)=\"searchEvent.emit()\"\n      >\n        {{ 'search' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        aui-button\n        (click)=\"resetSearch.emit()\"\n      >\n        {{ 'reset' | translate }}\n      </button>\n\n      <ng-content select=\"[additional]\"></ng-content>\n    </div>\n  </acl-search-item>\n</div>\n", styles: [":host::ng-deep aui-select{width:100%}:host::ng-deep .search-panel{display:flex;justify-content:space-between;flex-wrap:wrap;margin-bottom:-16px}:host::ng-deep .search-panel acl-search-item{width:33.33%}:host::ng-deep .search-panel acl-search-item .search-panel__item{width:100%;margin-bottom:16px;display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>*{display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>label{padding-right:8px;justify-content:flex-end;text-align:right;line-height:var(--aui-line-height-s);align-items:center;min-width:70px;margin-left:20px}html:not([lang|=zh]) :host::ng-deep .search-panel acl-search-item .search-panel__item>label{min-width:110px}:host::ng-deep .search-panel acl-search-item .search-panel__item>label:after{content:\":\";margin-left:2px}:host::ng-deep .search-panel acl-search-item .search-panel__item>aui-select{flex:1}:host::ng-deep .search-panel acl-search-item:nth-of-type(3n+1) .search-panel__item label{margin-left:0}\n"], dependencies: [{ kind: "component", type: SearchItemComponent, selector: "acl-search-item" }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SearchPanelComponent, isStandalone: true, selector: "acl-search-panel", inputs: { enableEnterHandler: "enableEnterHandler" }, outputs: { searchEvent: "searchEvent", resetSearch: "resetSearch" }, host: { listeners: { "document:keydown.enter": "enter()" } }, queries: [{ propertyName: "items", predicate: SearchItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"search-panel\">\n  <ng-content></ng-content>\n  <acl-search-item [style.width]=\"(isFulWidth$$ | async) ? '100%' : ''\">\n    <div class=\"search-actions search\">\n      <button\n        type=\"button\"\n        aui-button=\"primary\"\n        (click)=\"searchEvent.emit()\"\n      >\n        {{ 'search' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        aui-button\n        (click)=\"resetSearch.emit()\"\n      >\n        {{ 'reset' | translate }}\n      </button>\n\n      <ng-content select=\"[additional]\"></ng-content>\n    </div>\n  </acl-search-item>\n</div>\n", styles: [":host::ng-deep aui-select{width:100%}:host::ng-deep .search-panel{display:flex;justify-content:space-between;flex-wrap:wrap;margin-bottom:-16px}:host::ng-deep .search-panel acl-search-item{width:33.33%}:host::ng-deep .search-panel acl-search-item .search-panel__item{width:100%;margin-bottom:16px;display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>*{display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>label{padding-right:8px;justify-content:flex-end;text-align:right;line-height:var(--aui-line-height-s);align-items:center;min-width:70px;margin-left:20px}html:not([lang|=zh]) :host::ng-deep .search-panel acl-search-item .search-panel__item>label{min-width:110px}:host::ng-deep .search-panel acl-search-item .search-panel__item>label:after{content:\":\";margin-left:2px}:host::ng-deep .search-panel acl-search-item .search-panel__item>aui-select{flex:1}:host::ng-deep .search-panel acl-search-item:nth-of-type(3n+1) .search-panel__item label{margin-left:0}.search-actions{display:flex;justify-content:flex-end;width:100%}\n"], dependencies: [{ kind: "component", type: SearchItemComponent, selector: "acl-search-item" }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SearchPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'acl-search-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SearchItemComponent, ButtonComponent, TranslatePipe, AsyncPipe], standalone: true, template: "<div class=\"search-panel\">\n  <ng-content></ng-content>\n  <acl-search-item [style.width]=\"(isFulWidth$$ | async) ? '100%' : ''\">\n    <div class=\"tw-justify-end tw-w-full search\">\n      <button\n        type=\"button\"\n        aui-button=\"primary\"\n        (click)=\"searchEvent.emit()\"\n      >\n        {{ 'search' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        aui-button\n        (click)=\"resetSearch.emit()\"\n      >\n        {{ 'reset' | translate }}\n      </button>\n\n      <ng-content select=\"[additional]\"></ng-content>\n    </div>\n  </acl-search-item>\n</div>\n", styles: [":host::ng-deep aui-select{width:100%}:host::ng-deep .search-panel{display:flex;justify-content:space-between;flex-wrap:wrap;margin-bottom:-16px}:host::ng-deep .search-panel acl-search-item{width:33.33%}:host::ng-deep .search-panel acl-search-item .search-panel__item{width:100%;margin-bottom:16px;display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>*{display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>label{padding-right:8px;justify-content:flex-end;text-align:right;line-height:var(--aui-line-height-s);align-items:center;min-width:70px;margin-left:20px}html:not([lang|=zh]) :host::ng-deep .search-panel acl-search-item .search-panel__item>label{min-width:110px}:host::ng-deep .search-panel acl-search-item .search-panel__item>label:after{content:\":\";margin-left:2px}:host::ng-deep .search-panel acl-search-item .search-panel__item>aui-select{flex:1}:host::ng-deep .search-panel acl-search-item:nth-of-type(3n+1) .search-panel__item label{margin-left:0}\n"] }]
+            args: [{ selector: 'acl-search-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SearchItemComponent, ButtonComponent, TranslatePipe, AsyncPipe], standalone: true, template: "<div class=\"search-panel\">\n  <ng-content></ng-content>\n  <acl-search-item [style.width]=\"(isFulWidth$$ | async) ? '100%' : ''\">\n    <div class=\"search-actions search\">\n      <button\n        type=\"button\"\n        aui-button=\"primary\"\n        (click)=\"searchEvent.emit()\"\n      >\n        {{ 'search' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        aui-button\n        (click)=\"resetSearch.emit()\"\n      >\n        {{ 'reset' | translate }}\n      </button>\n\n      <ng-content select=\"[additional]\"></ng-content>\n    </div>\n  </acl-search-item>\n</div>\n", styles: [":host::ng-deep aui-select{width:100%}:host::ng-deep .search-panel{display:flex;justify-content:space-between;flex-wrap:wrap;margin-bottom:-16px}:host::ng-deep .search-panel acl-search-item{width:33.33%}:host::ng-deep .search-panel acl-search-item .search-panel__item{width:100%;margin-bottom:16px;display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>*{display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>label{padding-right:8px;justify-content:flex-end;text-align:right;line-height:var(--aui-line-height-s);align-items:center;min-width:70px;margin-left:20px}html:not([lang|=zh]) :host::ng-deep .search-panel acl-search-item .search-panel__item>label{min-width:110px}:host::ng-deep .search-panel acl-search-item .search-panel__item>label:after{content:\":\";margin-left:2px}:host::ng-deep .search-panel acl-search-item .search-panel__item>aui-select{flex:1}:host::ng-deep .search-panel acl-search-item:nth-of-type(3n+1) .search-panel__item label{margin-left:0}.search-actions{display:flex;justify-content:flex-end;width:100%}\n"] }]
         }], propDecorators: { enableEnterHandler: [{
                 type: Input
             }], searchEvent: [{
@@ -7727,7 +7670,7 @@ class PodStatusComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PodStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: PodStatusComponent, isStandalone: true, selector: "acl-pod-status", inputs: { pod: "pod", disableMessageOverview: "disableMessageOverview" }, ngImport: i0, template: "@if (pod | pure: getPodStatus; as status) {\n  <div class=\"status-wrapper\">\n    <acl-status-icon\n      [status]=\"status | pure: getPodAggregatedStatus\"\n      [colorMapper]=\"PodStatusColorMapper\"\n      [iconMapper]=\"PodStatusIconMapper\"\n      [withText]=\"false\"\n      [ngStyle]=\"{ 'margin-right': 0 }\"\n    ></acl-status-icon>\n    <div class=\"tw-flex\">\n      {{ status }}\n      <ng-container\n        [ngTemplateOutlet]=\"readyContainerTmpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: pod | pure: getReadyContainer,\n        }\"\n      ></ng-container>\n      <ng-template\n        #readyContainerTmpl\n        let-data\n      >\n        ({{ data.ready }}/{{ data.all }})\n      </ng-template>\n      @if (pod | pure: getPodErrorMessages; as messages) {\n        @if (messages?.length && !disableMessageOverview) {\n          <aui-icon\n            icon=\"file_magnifier\"\n            class=\"message-tip-icon\"\n            [auiTooltip]=\"\n              messages.length === 1 ? onlyOnePodMessage : podMessages\n            \"\n            [auiTooltipContext]=\"{ messages: messages }\"\n            size=\"14\"\n            auiTooltipClass=\"condition-message-tip\"\n          ></aui-icon>\n        }\n      }\n    </div>\n  </div>\n} @else {\n  -\n}\n<ng-template\n  #podMessages\n  let-messages=\"messages\"\n>\n  <ul class=\"pod-messages\">\n    @for (msg of messages; track msg) {\n      <li><em>&bull;</em>{{ msg }}</li>\n    }\n  </ul>\n</ng-template>\n<ng-template\n  #onlyOnePodMessage\n  let-messages=\"messages\"\n>\n  {{ messages[0] }}\n</ng-template>\n", styles: [":host ::ng-deep .condition-message-tip{white-space:pre-line}:host{display:flex}:host .message-tip-icon{margin-left:6px}:host .status-wrapper{display:flex;overflow:hidden;text-overflow:ellipsis}.pod-messages li{padding-left:8px}.pod-messages li em{color:rgb(var(--aui-color-n-4));margin-right:4px;margin-left:-8px;font-size:14px}\n"], dependencies: [{ kind: "component", type: StatusIconComponent, selector: "acl-status-icon", inputs: ["status", "withText", "colorMapper", "iconMapper", "disabled", "iconSize"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: PodStatusComponent, isStandalone: true, selector: "acl-pod-status", inputs: { pod: "pod", disableMessageOverview: "disableMessageOverview" }, ngImport: i0, template: "@if (pod | pure: getPodStatus; as status) {\n  <div class=\"status-wrapper\">\n    <acl-status-icon\n      [status]=\"status | pure: getPodAggregatedStatus\"\n      [colorMapper]=\"PodStatusColorMapper\"\n      [iconMapper]=\"PodStatusIconMapper\"\n      [withText]=\"false\"\n      [ngStyle]=\"{ 'margin-right': 0 }\"\n    ></acl-status-icon>\n    <div class=\"status-flex\">\n      {{ status }}\n      <ng-container\n        [ngTemplateOutlet]=\"readyContainerTmpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: pod | pure: getReadyContainer,\n        }\"\n      ></ng-container>\n      <ng-template\n        #readyContainerTmpl\n        let-data\n      >\n        ({{ data.ready }}/{{ data.all }})\n      </ng-template>\n      @if (pod | pure: getPodErrorMessages; as messages) {\n        @if (messages?.length && !disableMessageOverview) {\n          <aui-icon\n            icon=\"file_magnifier\"\n            class=\"message-tip-icon\"\n            [auiTooltip]=\"\n              messages.length === 1 ? onlyOnePodMessage : podMessages\n            \"\n            [auiTooltipContext]=\"{ messages: messages }\"\n            size=\"14\"\n            auiTooltipClass=\"condition-message-tip\"\n          ></aui-icon>\n        }\n      }\n    </div>\n  </div>\n} @else {\n  -\n}\n<ng-template\n  #podMessages\n  let-messages=\"messages\"\n>\n  <ul class=\"pod-messages\">\n    @for (msg of messages; track msg) {\n      <li><em>&bull;</em>{{ msg }}</li>\n    }\n  </ul>\n</ng-template>\n<ng-template\n  #onlyOnePodMessage\n  let-messages=\"messages\"\n>\n  {{ messages[0] }}\n</ng-template>\n", styles: [":host ::ng-deep .condition-message-tip{white-space:pre-line}:host{display:flex}:host .message-tip-icon{margin-left:6px}:host .status-wrapper{display:flex;overflow:hidden;text-overflow:ellipsis}.pod-messages li{padding-left:8px}.pod-messages li em{color:rgb(var(--aui-color-n-4));margin-right:4px;margin-left:-8px;font-size:14px}.status-flex{display:flex}\n"], dependencies: [{ kind: "component", type: StatusIconComponent, selector: "acl-status-icon", inputs: ["status", "withText", "colorMapper", "iconMapper", "disabled", "iconSize"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PodStatusComponent, decorators: [{
             type: Component,
@@ -7738,7 +7681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         NgStyle,
                         NgTemplateOutlet,
                         PurePipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (pod | pure: getPodStatus; as status) {\n  <div class=\"status-wrapper\">\n    <acl-status-icon\n      [status]=\"status | pure: getPodAggregatedStatus\"\n      [colorMapper]=\"PodStatusColorMapper\"\n      [iconMapper]=\"PodStatusIconMapper\"\n      [withText]=\"false\"\n      [ngStyle]=\"{ 'margin-right': 0 }\"\n    ></acl-status-icon>\n    <div class=\"tw-flex\">\n      {{ status }}\n      <ng-container\n        [ngTemplateOutlet]=\"readyContainerTmpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: pod | pure: getReadyContainer,\n        }\"\n      ></ng-container>\n      <ng-template\n        #readyContainerTmpl\n        let-data\n      >\n        ({{ data.ready }}/{{ data.all }})\n      </ng-template>\n      @if (pod | pure: getPodErrorMessages; as messages) {\n        @if (messages?.length && !disableMessageOverview) {\n          <aui-icon\n            icon=\"file_magnifier\"\n            class=\"message-tip-icon\"\n            [auiTooltip]=\"\n              messages.length === 1 ? onlyOnePodMessage : podMessages\n            \"\n            [auiTooltipContext]=\"{ messages: messages }\"\n            size=\"14\"\n            auiTooltipClass=\"condition-message-tip\"\n          ></aui-icon>\n        }\n      }\n    </div>\n  </div>\n} @else {\n  -\n}\n<ng-template\n  #podMessages\n  let-messages=\"messages\"\n>\n  <ul class=\"pod-messages\">\n    @for (msg of messages; track msg) {\n      <li><em>&bull;</em>{{ msg }}</li>\n    }\n  </ul>\n</ng-template>\n<ng-template\n  #onlyOnePodMessage\n  let-messages=\"messages\"\n>\n  {{ messages[0] }}\n</ng-template>\n", styles: [":host ::ng-deep .condition-message-tip{white-space:pre-line}:host{display:flex}:host .message-tip-icon{margin-left:6px}:host .status-wrapper{display:flex;overflow:hidden;text-overflow:ellipsis}.pod-messages li{padding-left:8px}.pod-messages li em{color:rgb(var(--aui-color-n-4));margin-right:4px;margin-left:-8px;font-size:14px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (pod | pure: getPodStatus; as status) {\n  <div class=\"status-wrapper\">\n    <acl-status-icon\n      [status]=\"status | pure: getPodAggregatedStatus\"\n      [colorMapper]=\"PodStatusColorMapper\"\n      [iconMapper]=\"PodStatusIconMapper\"\n      [withText]=\"false\"\n      [ngStyle]=\"{ 'margin-right': 0 }\"\n    ></acl-status-icon>\n    <div class=\"status-flex\">\n      {{ status }}\n      <ng-container\n        [ngTemplateOutlet]=\"readyContainerTmpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: pod | pure: getReadyContainer,\n        }\"\n      ></ng-container>\n      <ng-template\n        #readyContainerTmpl\n        let-data\n      >\n        ({{ data.ready }}/{{ data.all }})\n      </ng-template>\n      @if (pod | pure: getPodErrorMessages; as messages) {\n        @if (messages?.length && !disableMessageOverview) {\n          <aui-icon\n            icon=\"file_magnifier\"\n            class=\"message-tip-icon\"\n            [auiTooltip]=\"\n              messages.length === 1 ? onlyOnePodMessage : podMessages\n            \"\n            [auiTooltipContext]=\"{ messages: messages }\"\n            size=\"14\"\n            auiTooltipClass=\"condition-message-tip\"\n          ></aui-icon>\n        }\n      }\n    </div>\n  </div>\n} @else {\n  -\n}\n<ng-template\n  #podMessages\n  let-messages=\"messages\"\n>\n  <ul class=\"pod-messages\">\n    @for (msg of messages; track msg) {\n      <li><em>&bull;</em>{{ msg }}</li>\n    }\n  </ul>\n</ng-template>\n<ng-template\n  #onlyOnePodMessage\n  let-messages=\"messages\"\n>\n  {{ messages[0] }}\n</ng-template>\n", styles: [":host ::ng-deep .condition-message-tip{white-space:pre-line}:host{display:flex}:host .message-tip-icon{margin-left:6px}:host .status-wrapper{display:flex;overflow:hidden;text-overflow:ellipsis}.pod-messages li{padding-left:8px}.pod-messages li em{color:rgb(var(--aui-color-n-4));margin-right:4px;margin-left:-8px;font-size:14px}.status-flex{display:flex}\n"] }]
         }], propDecorators: { pod: [{
                 type: Input
             }], disableMessageOverview: [{
@@ -7779,9 +7722,9 @@ const FileResultType = {
     TEXT: 'Text',
 };
 class UploadFileComponent {
-    constructor(notification, translate) {
-        this.notification = notification;
-        this.translate = translate;
+    constructor() {
+        this.notification = inject(NotificationService);
+        this.translate = inject(TranslateService);
         this.resultType = FileResultType.TEXT;
     }
     onClick() {
@@ -7824,7 +7767,7 @@ class UploadFileComponent {
     registerOnTouched() {
         //
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UploadFileComponent, deps: [{ token: i1.NotificationService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UploadFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: UploadFileComponent, isStandalone: true, selector: "acl-upload-file", inputs: { disabled: "disabled", accept: "accept", multiple: "multiple", resultType: "resultType" }, host: { listeners: { "click": "onClick()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -7842,7 +7785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                             multi: true,
                         },
                     ], standalone: true, imports: [EFFECT_DIRECTIVE_MODULE], template: "<ng-content></ng-content>\n<input\n  #fileInput\n  class=\"file-input\"\n  type=\"file\"\n  [attr.accept]=\"accept\"\n  [multiple]=\"multiple\"\n  (change)=\"onChange($event)\"\n/>\n", styles: [":host{position:relative;display:inline-flex;overflow:hidden}.file-input{position:absolute;inset:0;opacity:0;z-index:-1}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NotificationService }, { type: i2$1.TranslateService }], propDecorators: { disabled: [{
+        }], propDecorators: { disabled: [{
                 type: Input
             }], accept: [{
                 type: Input
@@ -8157,7 +8100,7 @@ class PageGuardComponent {
         this.reasonSrc$ = combineLatest([
             this.theme.currentTheme$,
             this.reasonModel$,
-        ]).pipe(map(([theme, reasonModel]) => `assets/images/${theme}/${reasonModel.src}`), publishRef());
+        ]).pipe(map(([theme, reasonModel]) => `/console-assets/images/${theme}/${reasonModel.src}`), publishRef());
     }
     get allowed() {
         return this.status === GuardStatus.Available;
@@ -8254,11 +8197,11 @@ class ListDisplayComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ListDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ListDisplayComponent, isStandalone: true, selector: "acl-list-display", inputs: { data: "data", threshold: "threshold", mode: "mode", direction: "direction", template: "template" }, queries: [{ propertyName: "childTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div\n  class=\"tw-flex\"\n  [class]=\"{ 'tw-flex-col': direction === 'column' }\"\n>\n  <ul>\n    @for (item of threshold ? data.slice(0, threshold) : data; track item) {\n      <li>\n        <ng-container\n          *ngTemplateOutlet=\"\n            childTemplate || template;\n            context: item | pure: templateContext\n          \"\n        ></ng-container>\n      </li>\n    }\n  </ul>\n  @if (threshold && data.length > threshold) {\n    <div [class]=\"{ 'tw-ml-8': direction === 'row' }\">\n      @if (mode === 'total') {\n        {{ 'in_total' | translate }}\n        <a\n          [auiTooltip]=\"total\"\n          auiTooltipType=\"info\"\n          auiTooltipPosition=\"bottom center\"\n        >\n          {{ data.length }}\n        </a>\n        {{ 'ge' | translate }}\n      }\n      @if (mode === 'more') {\n        {{ 'more' | translate }}\n        <a\n          [auiTooltip]=\"more\"\n          [auiTooltipContext]=\"{ data: data.slice(threshold) }\"\n          auiTooltipType=\"info\"\n          auiTooltipPosition=\"bottom center\"\n        >\n          {{ data.slice(threshold).length }}\n        </a>\n        {{ 'tiao' | translate }}\n      }\n    </div>\n  }\n</div>\n\n<ng-template #total>\n  <acl-list-display\n    [data]=\"data\"\n    [template]=\"childTemplate || template\"\n  ></acl-list-display>\n</ng-template>\n\n<ng-template\n  #more\n  let-data=\"data\"\n>\n  <acl-list-display\n    [data]=\"data\"\n    [template]=\"childTemplate || template\"\n  ></acl-list-display>\n</ng-template>\n", styles: ["li{line-height:20px}\n"], dependencies: [{ kind: "component", type: ListDisplayComponent, selector: "acl-list-display", inputs: ["data", "threshold", "mode", "direction", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ListDisplayComponent, isStandalone: true, selector: "acl-list-display", inputs: { data: "data", threshold: "threshold", mode: "mode", direction: "direction", template: "template" }, queries: [{ propertyName: "childTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div\n  class=\"list-display-container\"\n  [class.flex-col]=\"direction === 'column'\"\n>\n  <ul>\n    @for (item of threshold ? data.slice(0, threshold) : data; track item) {\n      <li>\n        <ng-container\n          *ngTemplateOutlet=\"\n            childTemplate || template;\n            context: item | pure: templateContext\n          \"\n        ></ng-container>\n      </li>\n    }\n  </ul>\n  @if (threshold && data.length > threshold) {\n    <div [class.ml-8]=\"direction === 'row'\">\n      @if (mode === 'total') {\n        {{ 'in_total' | translate }}\n        <a\n          [auiTooltip]=\"total\"\n          auiTooltipType=\"info\"\n          auiTooltipPosition=\"bottom center\"\n        >\n          {{ data.length }}\n        </a>\n        {{ 'ge' | translate }}\n      }\n      @if (mode === 'more') {\n        {{ 'more' | translate }}\n        <a\n          [auiTooltip]=\"more\"\n          [auiTooltipContext]=\"{ data: data.slice(threshold) }\"\n          auiTooltipType=\"info\"\n          auiTooltipPosition=\"bottom center\"\n        >\n          {{ data.slice(threshold).length }}\n        </a>\n        {{ 'tiao' | translate }}\n      }\n    </div>\n  }\n</div>\n\n<ng-template #total>\n  <acl-list-display\n    [data]=\"data\"\n    [template]=\"childTemplate || template\"\n  ></acl-list-display>\n</ng-template>\n\n<ng-template\n  #more\n  let-data=\"data\"\n>\n  <acl-list-display\n    [data]=\"data\"\n    [template]=\"childTemplate || template\"\n  ></acl-list-display>\n</ng-template>\n", styles: ["li{line-height:20px}.list-display-container{display:flex}.flex-col{flex-direction:column}.ml-8{margin-left:8px}\n"], dependencies: [{ kind: "component", type: ListDisplayComponent, selector: "acl-list-display", inputs: ["data", "threshold", "mode", "direction", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ListDisplayComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'acl-list-display', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, PurePipe, TranslatePipe, TOOLTIP_MODULE], template: "<div\n  class=\"tw-flex\"\n  [class]=\"{ 'tw-flex-col': direction === 'column' }\"\n>\n  <ul>\n    @for (item of threshold ? data.slice(0, threshold) : data; track item) {\n      <li>\n        <ng-container\n          *ngTemplateOutlet=\"\n            childTemplate || template;\n            context: item | pure: templateContext\n          \"\n        ></ng-container>\n      </li>\n    }\n  </ul>\n  @if (threshold && data.length > threshold) {\n    <div [class]=\"{ 'tw-ml-8': direction === 'row' }\">\n      @if (mode === 'total') {\n        {{ 'in_total' | translate }}\n        <a\n          [auiTooltip]=\"total\"\n          auiTooltipType=\"info\"\n          auiTooltipPosition=\"bottom center\"\n        >\n          {{ data.length }}\n        </a>\n        {{ 'ge' | translate }}\n      }\n      @if (mode === 'more') {\n        {{ 'more' | translate }}\n        <a\n          [auiTooltip]=\"more\"\n          [auiTooltipContext]=\"{ data: data.slice(threshold) }\"\n          auiTooltipType=\"info\"\n          auiTooltipPosition=\"bottom center\"\n        >\n          {{ data.slice(threshold).length }}\n        </a>\n        {{ 'tiao' | translate }}\n      }\n    </div>\n  }\n</div>\n\n<ng-template #total>\n  <acl-list-display\n    [data]=\"data\"\n    [template]=\"childTemplate || template\"\n  ></acl-list-display>\n</ng-template>\n\n<ng-template\n  #more\n  let-data=\"data\"\n>\n  <acl-list-display\n    [data]=\"data\"\n    [template]=\"childTemplate || template\"\n  ></acl-list-display>\n</ng-template>\n", styles: ["li{line-height:20px}\n"] }]
+            args: [{ standalone: true, selector: 'acl-list-display', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, PurePipe, TranslatePipe, TOOLTIP_MODULE], template: "<div\n  class=\"list-display-container\"\n  [class.flex-col]=\"direction === 'column'\"\n>\n  <ul>\n    @for (item of threshold ? data.slice(0, threshold) : data; track item) {\n      <li>\n        <ng-container\n          *ngTemplateOutlet=\"\n            childTemplate || template;\n            context: item | pure: templateContext\n          \"\n        ></ng-container>\n      </li>\n    }\n  </ul>\n  @if (threshold && data.length > threshold) {\n    <div [class.ml-8]=\"direction === 'row'\">\n      @if (mode === 'total') {\n        {{ 'in_total' | translate }}\n        <a\n          [auiTooltip]=\"total\"\n          auiTooltipType=\"info\"\n          auiTooltipPosition=\"bottom center\"\n        >\n          {{ data.length }}\n        </a>\n        {{ 'ge' | translate }}\n      }\n      @if (mode === 'more') {\n        {{ 'more' | translate }}\n        <a\n          [auiTooltip]=\"more\"\n          [auiTooltipContext]=\"{ data: data.slice(threshold) }\"\n          auiTooltipType=\"info\"\n          auiTooltipPosition=\"bottom center\"\n        >\n          {{ data.slice(threshold).length }}\n        </a>\n        {{ 'tiao' | translate }}\n      }\n    </div>\n  }\n</div>\n\n<ng-template #total>\n  <acl-list-display\n    [data]=\"data\"\n    [template]=\"childTemplate || template\"\n  ></acl-list-display>\n</ng-template>\n\n<ng-template\n  #more\n  let-data=\"data\"\n>\n  <acl-list-display\n    [data]=\"data\"\n    [template]=\"childTemplate || template\"\n  ></acl-list-display>\n</ng-template>\n", styles: ["li{line-height:20px}.list-display-container{display:flex}.flex-col{flex-direction:column}.ml-8{margin-left:8px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], threshold: [{
@@ -8279,11 +8222,11 @@ class OverviewBannerComponent {
         this.option = {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OverviewBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: OverviewBannerComponent, isStandalone: true, selector: "acl-overview-banner", inputs: { option: "option" }, ngImport: i0, template: "<div class=\"overview-banner--wrapper\">\n  <div class=\"overview-banner\">\n    <div class=\"overview-banner__icon\">\n      <aui-icon\n        class=\"acl-colorful-icon highlight\"\n        [icon]=\"'bicolor:' + option?.icon\"\n      ></aui-icon>\n    </div>\n    <div class=\"overview-banner__content\">\n      <div class=\"overview-banner__title\">\n        {{ option?.title }}\n      </div>\n      <div class=\"overview-banner__description\">\n        {{ option?.description }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".overview-banner--wrapper{border-radius:use-var(border-radius-l);margin-bottom:use-var(spacing-xl);background-color:use-rgb(primary);background-image:url(/assets/images/overview-banner.svg);background-size:cover;background-position:center}.overview-banner{display:flex;align-items:center;padding:24px}.overview-banner__icon{margin-right:20px}.overview-banner__icon aui-icon{display:flex;font-size:56px;width:1em;height:1em}.overview-banner__content{color:#fff}.overview-banner__title{font-size:24px;line-height:36px;font-weight:use-var(font-weight-bolder)}.overview-banner__description{margin-top:4px;font-size:use-var(font-size-m)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: OverviewBannerComponent, isStandalone: true, selector: "acl-overview-banner", inputs: { option: "option" }, ngImport: i0, template: "<div class=\"overview-banner--wrapper\">\n  <div class=\"overview-banner\">\n    <div class=\"overview-banner__icon\">\n      <aui-icon\n        class=\"acl-colorful-icon highlight\"\n        [icon]=\"'bicolor:' + option?.icon\"\n      ></aui-icon>\n    </div>\n    <div class=\"overview-banner__content\">\n      <div class=\"overview-banner__title\">\n        {{ option?.title }}\n      </div>\n      <div class=\"overview-banner__description\">\n        {{ option?.description }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".overview-banner--wrapper{border-radius:use-var(border-radius-l);margin-bottom:use-var(spacing-xl);background-color:use-rgb(primary);background-image:url(/console-assets/images/overview-banner.svg);background-size:cover;background-position:center}.overview-banner{display:flex;align-items:center;padding:24px}.overview-banner__icon{margin-right:20px}.overview-banner__icon aui-icon{display:flex;font-size:56px;width:1em;height:1em}.overview-banner__content{color:#fff}.overview-banner__title{font-size:24px;line-height:36px;font-weight:use-var(font-weight-bolder)}.overview-banner__description{margin-top:4px;font-size:use-var(font-size-m)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OverviewBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'acl-overview-banner', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent], template: "<div class=\"overview-banner--wrapper\">\n  <div class=\"overview-banner\">\n    <div class=\"overview-banner__icon\">\n      <aui-icon\n        class=\"acl-colorful-icon highlight\"\n        [icon]=\"'bicolor:' + option?.icon\"\n      ></aui-icon>\n    </div>\n    <div class=\"overview-banner__content\">\n      <div class=\"overview-banner__title\">\n        {{ option?.title }}\n      </div>\n      <div class=\"overview-banner__description\">\n        {{ option?.description }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".overview-banner--wrapper{border-radius:use-var(border-radius-l);margin-bottom:use-var(spacing-xl);background-color:use-rgb(primary);background-image:url(/assets/images/overview-banner.svg);background-size:cover;background-position:center}.overview-banner{display:flex;align-items:center;padding:24px}.overview-banner__icon{margin-right:20px}.overview-banner__icon aui-icon{display:flex;font-size:56px;width:1em;height:1em}.overview-banner__content{color:#fff}.overview-banner__title{font-size:24px;line-height:36px;font-weight:use-var(font-weight-bolder)}.overview-banner__description{margin-top:4px;font-size:use-var(font-size-m)}\n"] }]
+            args: [{ selector: 'acl-overview-banner', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent], template: "<div class=\"overview-banner--wrapper\">\n  <div class=\"overview-banner\">\n    <div class=\"overview-banner__icon\">\n      <aui-icon\n        class=\"acl-colorful-icon highlight\"\n        [icon]=\"'bicolor:' + option?.icon\"\n      ></aui-icon>\n    </div>\n    <div class=\"overview-banner__content\">\n      <div class=\"overview-banner__title\">\n        {{ option?.title }}\n      </div>\n      <div class=\"overview-banner__description\">\n        {{ option?.description }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".overview-banner--wrapper{border-radius:use-var(border-radius-l);margin-bottom:use-var(spacing-xl);background-color:use-rgb(primary);background-image:url(/console-assets/images/overview-banner.svg);background-size:cover;background-position:center}.overview-banner{display:flex;align-items:center;padding:24px}.overview-banner__icon{margin-right:20px}.overview-banner__icon aui-icon{display:flex;font-size:56px;width:1em;height:1em}.overview-banner__content{color:#fff}.overview-banner__title{font-size:24px;line-height:36px;font-weight:use-var(font-weight-bolder)}.overview-banner__description{margin-top:4px;font-size:use-var(font-size-m)}\n"] }]
         }], propDecorators: { option: [{
                 type: Input
             }] } });
@@ -8420,7 +8363,7 @@ class MultiSearchActionInputComponent extends BaseResourceFormComponent {
         // 键盘delete事件。
         this.delete = new EventEmitter();
         // 键盘enter事件
-        this.searchEvent = new EventEmitter();
+        this.search = new EventEmitter();
         this._conditionsModel = '';
         this.conditionsModel$$ = new BehaviorSubject('');
         this.hasFilteredConditions$ = combineLatest([
@@ -8622,7 +8565,7 @@ class MultiSearchActionInputComponent extends BaseResourceFormComponent {
             this.conditionsModel = currentLabel;
             // 如果是单选，则需要在选中时抛出complete事件，并抛出search事件
             this.ifComplete(false, true);
-            this.searchEvent.emit();
+            this.search.emit();
         }
     }
     // 多选
@@ -8813,7 +8756,7 @@ class MultiSearchActionInputComponent extends BaseResourceFormComponent {
         else {
             // 当前操作内容已完成，，则会抛出enter事件
             if (this.ifComplete(false, true)) {
-                this.searchEvent.emit();
+                this.search.emit();
             }
             else if (this.conditionCreatable && this.isConditionSelecting) {
                 this.setConditionByModel();
@@ -8931,7 +8874,7 @@ class MultiSearchActionInputComponent extends BaseResourceFormComponent {
         return conditionsModel === current;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MultiSearchActionInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MultiSearchActionInputComponent, isStandalone: true, selector: "acl-multi-search-action-input", inputs: { placeholder: "placeholder", conditionCreatable: "conditionCreatable", isEditing: "isEditing", hidden: "hidden", autoScroll: "autoScroll", conditionConfig: "conditionConfig", showFootAction: "showFootAction", existingConditions: "existingConditions" }, outputs: { completed: "completed", editing: "editing", delete: "delete", searchEvent: "searchEvent" }, host: { properties: { "hidden": "this.hiddenState" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "toolTipRef", first: true, predicate: ["toolTipRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tw-flex tw-items-center tw-text-m\">\n  @if (form.value; as activeCondition) {\n    <span\n      class=\"tw-ml-6 tw-max-w-[45%] tw-flex-shrink-0 tw-text-ellipsis tw-overflow-hidden\"\n      (click)=\"activeConditionClick(); $event.stopPropagation()\"\n    >\n      {{ activeCondition | pure: getConditionLabel }}\n    </span>\n    @if (activeCondition.operator) {\n      <span\n        class=\"tw-ml-6\"\n        (click)=\"activeOperatorClick(); $event.stopPropagation()\"\n      >\n        {{ activeCondition.operator }}\n      </span>\n    }\n    @if (!isEditing) {\n      <span\n        class=\"tw-ml-6 tw-max-w-[45%] tw-flex-shrink-0 tw-text-ellipsis tw-overflow-hidden\"\n        (click)=\"activeValueClick(); $event.stopPropagation()\"\n      >\n        {{ getValueContent(activeCondition) }}\n      </span>\n    }\n  }\n  <input\n    class=\"search-input\"\n    [ngClass]=\"{\n      'mock-input':\n        (!isEditing && !isConditionSelecting) || isOperatorSelecting,\n    }\"\n    [maxlength]=\"isOperatorSelecting ? 0 : MAX_SAFE_INTEGER\"\n    aui-input\n    #inputRef\n    #toolTipRef=\"auiTooltip\"\n    [placeholder]=\"isConditionSelecting ? placeholder : ''\"\n    [(ngModel)]=\"conditionsModel\"\n    (ngModelChange)=\"conditionsModel$$.next($event)\"\n    (keydown)=\"inputKeydown($event)\"\n    (focus)=\"inputFocus()\"\n    [auiTooltip]=\"templateRef\"\n    auiTooltipAnimType=\"none\"\n    auiTooltipTrigger=\"manual\"\n    auiTooltipType=\"info\"\n    auiTooltipClass=\"multi-search-dropdown\"\n    auiTooltipPosition=\"bottom start\"\n  />\n</div>\n\n<ng-template #templateRef>\n  <div\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- \u7C7B\u76EE\u9009\u62E9 -->\n    @if (isConditionSelecting && (conditionsShouldShow$ | async)) {\n      @if (hasFilteredConditions$ | async) {\n        <ul class=\"tw-min-w-[260px] tw-max-w-[400px]\">\n          <ng-container\n            [ngTemplateOutlet]=\"categoriesTemp\"\n            [ngTemplateOutletContext]=\"{\n              normal: (normalConditions$ | async),\n              groups: groupConditions$ | async,\n            }\"\n          ></ng-container>\n        </ul>\n      } @else {\n        <ul class=\"tw-min-w-[260px] tw-max-w-[400px]\">\n          <div class=\"no-match-categories-tip\">\n            {{ 'no_match_categories_tip' | translate }}\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"categoriesTemp\"\n            [ngTemplateOutletContext]=\"{\n              normal: normalConditionsResource$ | async,\n              groups: groupConditionsResource$ | async,\n            }\"\n          ></ng-container>\n        </ul>\n      }\n      <ng-template\n        #categoriesTemp\n        let-normal=\"normal\"\n        let-groups=\"groups\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"liConditionTemp\"\n          [ngTemplateOutletContext]=\"{ conditions: normal }\"\n        ></ng-container>\n        @for (group of groups; track group) {\n          @if (group.member?.length) {\n            <div\n              [title]=\"group.group\"\n              class=\"dropdown-group-label dropdown-content\"\n            >\n              {{ group.group }}\n            </div>\n            <ng-container\n              [ngTemplateOutlet]=\"liConditionTemp\"\n              [ngTemplateOutletContext]=\"{ conditions: group.member }\"\n            ></ng-container>\n          }\n        }\n      </ng-template>\n    }\n\n    @if (form.value; as activeCondition) {\n      <!-- operator\u9009\u62E9 -->\n      @if (isOperatorSelecting) {\n        <ul class=\"tw-min-w-[160px]\">\n          @for (\n            operator of activeCondition.operators || [DEFAULT_OPERATOR];\n            track operator\n          ) {\n            <li (click)=\"selectActiveOperator($any(operator))\">\n              <ng-container\n                [ngTemplateOutlet]=\"basicLiContentTemp\"\n                [ngTemplateOutletContext]=\"{\n                  isSelect: operator === conditionsModel,\n                  label: operator,\n                }\"\n              >\n              </ng-container>\n            </li>\n          }\n        </ul>\n      }\n      <!-- \u5177\u4F53\u6761\u4EF6\u9009\u62E9 -->\n      @if (isValueSelecting) {\n        @if (\n          activeCondition\n            | pure\n              : hasFilteredValues\n              : conditionsModel\n              : activeCondition.isMulti\n        ) {\n          <ul class=\"tw-min-w-[260px] tw-max-w-[400px]\">\n            @if (activeCondition.allowSelectAll && activeCondition.isMulti) {\n              <li class=\"dropdown-content select-all\">\n                <div\n                  class=\"search-dropdown-item\"\n                  [ngClass]=\"{\n                    'tw-text-p-2': isSelectAll,\n                    'tw-bg-p-6': isSelectAll,\n                  }\"\n                  (click)=\"selectAllClick()\"\n                >\n                  <div class=\"multi-item\">\n                    <aui-checkbox\n                      [value]=\"isSelectAll\"\n                      [indeterminate]=\"isIndeterminate\"\n                    ></aui-checkbox>\n                    <div class=\"search-dropdown-item-label\">\n                      {{ 'all' | translate }}\n                    </div>\n                  </div>\n                </div>\n              </li>\n            }\n            <ng-container\n              [ngTemplateOutlet]=\"liValueTemp\"\n              [ngTemplateOutletContext]=\"{\n                values:\n                  activeCondition\n                  | pure\n                    : getNormalValues\n                    : conditionsModel\n                    : activeCondition.isMulti,\n                activeCondition: activeCondition,\n              }\"\n            >\n            </ng-container>\n            @for (\n              group of activeCondition\n                | pure\n                  : getValuesGroup\n                  : conditionsModel\n                  : activeCondition.isMulti;\n              track group\n            ) {\n              @if (group.member?.length) {\n                <div\n                  [title]=\"group.group\"\n                  class=\"dropdown-group-label dropdown-content\"\n                >\n                  {{ group.group }}\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"liValueTemp\"\n                  [ngTemplateOutletContext]=\"{\n                    values: group.member,\n                    activeCondition: activeCondition,\n                  }\"\n                ></ng-container>\n              }\n            }\n          </ul>\n        }\n      }\n    }\n    @if (showFootAction && form?.value?.isMulti) {\n      <div class=\"footer\">\n        <button\n          aui-button=\"text\"\n          size=\"mini\"\n          (click)=\"confirmSelection()\"\n        >\n          {{ 'confirm' | translate }}\n        </button>\n        <button\n          aui-button=\"text\"\n          size=\"mini\"\n          class=\"cancel\"\n          (click)=\"toolTipHide()\"\n        >\n          {{ 'cancel' | translate }}\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #liConditionTemp\n  let-conditions=\"conditions\"\n>\n  @for (condition of conditions; track condition) {\n    <li\n      class=\"dropdown-content\"\n      (click)=\"selectActiveCondition(condition)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"basicLiContentTemp\"\n        [ngTemplateOutletContext]=\"{\n          isSelect:\n            condition\n            | pure: getConditionLabel\n            | pure: isConditionSelected : conditionsModel,\n          label: condition | pure: getConditionLabel,\n        }\"\n      >\n      </ng-container>\n    </li>\n  }\n</ng-template>\n\n<ng-template\n  #liValueTemp\n  let-values=\"values\"\n  let-activeCondition=\"activeCondition\"\n>\n  @for (value of values; track value) {\n    <li\n      class=\"dropdown-content\"\n      (click)=\"\n        selectValue(value, activeCondition.isMulti);\n        $event.stopPropagation();\n        $event.preventDefault()\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"basicLiContentTemp\"\n        [ngTemplateOutletContext]=\"{\n          isSelect:\n            value\n            | pure: getValueLabel\n            | pure\n              : isValueSelected\n              : conditionsModel || (form.value | pure: getValueContent)\n              : activeCondition,\n          label: value | pure: getValueLabel,\n          isMulti: activeCondition.isMulti,\n        }\"\n      >\n      </ng-container>\n    </li>\n  }\n</ng-template>\n\n<ng-template\n  #basicLiContentTemp\n  let-isSelect=\"isSelect\"\n  let-label=\"label\"\n  let-isMulti=\"isMulti\"\n>\n  <div\n    [class]=\"DROPDOWN_ITEM_CLASS\"\n    [ngClass]=\"{\n      'is-multi-value-select': isSelect,\n    }\"\n  >\n    @if (isMulti) {\n      <div class=\"multi-item\">\n        <aui-checkbox [value]=\"isSelect\"></aui-checkbox>\n        <div\n          [title]=\"label\"\n          class=\"search-dropdown-item-label\"\n        >\n          {{ label }}\n        </div>\n      </div>\n    }\n    @if (!isMulti) {\n      <div\n        [title]=\"label\"\n        class=\"search-dropdown-item-label\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;padding-top:5px}.search-input{border:none;box-shadow:none!important;height:22px}.mock-input{width:1px!important;flex-shrink:0;padding:0;margin-left:7px}::ng-deep .multi-search-dropdown{padding:0!important;margin-top:8px!important;cursor:pointer;max-height:284px;overflow-y:auto}::ng-deep .multi-search-dropdown ul .dropdown-content:first-child{border:none;padding-top:0;margin-top:0}::ng-deep .multi-search-dropdown .cursor-light{background-color:rgb(var(--aui-color-p-6))}::ng-deep .multi-search-dropdown .is-multi-value-select{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-p-2))}::ng-deep .multi-search-dropdown .search-dropdown-item{padding:0 8px}::ng-deep .multi-search-dropdown .search-dropdown-item:hover{background-color:rgb(var(--aui-color-p-6))}::ng-deep .multi-search-dropdown .search-dropdown-item .multi-item{display:flex;height:28px;align-items:center}::ng-deep .multi-search-dropdown .search-dropdown-item .multi-item aui-checkbox{width:24px}::ng-deep .multi-search-dropdown .search-dropdown-item-label{height:28px;line-height:28px;white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis;font-size:var(--aui-font-size-m)}::ng-deep .multi-search-dropdown .dropdown-group-label{font-size:12px;color:rgb(var(--aui-color-n-4));padding-bottom:8px;padding-top:12px;margin-top:12px;margin-left:8px;margin-right:8px;border-top:1px solid rgb(var(--aui-color-n-8));white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis}::ng-deep .multi-search-dropdown .no-match-categories-tip{text-align:center;font-size:12px;color:rgb(var(--aui-color-n-4));border-bottom:1px solid rgb(var(--aui-color-n-8));margin-left:8px;margin-right:8px;margin-bottom:8px;padding-top:4px;padding-bottom:12px}::ng-deep .multi-search-dropdown .select-all{border-bottom:1px solid rgb(var(--aui-color-n-8))!important;margin-bottom:8px}::ng-deep .multi-search-dropdown .footer{display:flex;background:rgb(var(--aui-color-n-10));justify-content:flex-end;border-top:1px solid rgb(var(--aui-color-n-8));position:sticky;bottom:0;height:30px;padding:0 8px;align-items:center}::ng-deep .multi-search-dropdown .footer .cancel{color:rgb(var(--aui-color-n-1))!important}\n"], dependencies: [{ kind: "component", type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: CheckboxComponent, selector: "aui-checkbox", inputs: ["name", "type", "label", "indeterminate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MultiSearchActionInputComponent, isStandalone: true, selector: "acl-multi-search-action-input", inputs: { placeholder: "placeholder", conditionCreatable: "conditionCreatable", isEditing: "isEditing", hidden: "hidden", autoScroll: "autoScroll", conditionConfig: "conditionConfig", showFootAction: "showFootAction", existingConditions: "existingConditions" }, outputs: { completed: "completed", editing: "editing", delete: "delete", search: "search" }, host: { properties: { "hidden": "this.hiddenState" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "toolTipRef", first: true, predicate: ["toolTipRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"action-input-container\">\n  @if (form.value; as activeCondition) {\n    <span\n      class=\"condition-label\"\n      (click)=\"activeConditionClick(); $event.stopPropagation()\"\n    >\n      {{ activeCondition | pure: getConditionLabel }}\n    </span>\n    @if (activeCondition.operator) {\n      <span\n        class=\"operator-label\"\n        (click)=\"activeOperatorClick(); $event.stopPropagation()\"\n      >\n        {{ activeCondition.operator }}\n      </span>\n    }\n    @if (!isEditing) {\n      <span\n        class=\"value-label\"\n        (click)=\"activeValueClick(); $event.stopPropagation()\"\n      >\n        {{ getValueContent(activeCondition) }}\n      </span>\n    }\n  }\n  <input\n    class=\"search-input\"\n    [ngClass]=\"{\n      'mock-input':\n        (!isEditing && !isConditionSelecting) || isOperatorSelecting,\n    }\"\n    [maxlength]=\"isOperatorSelecting ? 0 : MAX_SAFE_INTEGER\"\n    aui-input\n    #inputRef\n    #toolTipRef=\"auiTooltip\"\n    [placeholder]=\"isConditionSelecting ? placeholder : ''\"\n    [(ngModel)]=\"conditionsModel\"\n    (ngModelChange)=\"conditionsModel$$.next($event)\"\n    (keydown)=\"inputKeydown($event)\"\n    (focus)=\"inputFocus()\"\n    [auiTooltip]=\"templateRef\"\n    auiTooltipAnimType=\"none\"\n    auiTooltipTrigger=\"manual\"\n    auiTooltipType=\"info\"\n    auiTooltipClass=\"multi-search-dropdown\"\n    auiTooltipPosition=\"bottom start\"\n  />\n</div>\n\n<ng-template #templateRef>\n  <div\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- \u7C7B\u76EE\u9009\u62E9 -->\n    @if (isConditionSelecting && (conditionsShouldShow$ | async)) {\n      @if (hasFilteredConditions$ | async) {\n        <ul class=\"dropdown-list\">\n          <ng-container\n            [ngTemplateOutlet]=\"categoriesTemp\"\n            [ngTemplateOutletContext]=\"{\n              normal: (normalConditions$ | async),\n              groups: groupConditions$ | async,\n            }\"\n          ></ng-container>\n        </ul>\n      } @else {\n        <ul class=\"dropdown-list\">\n          <div class=\"no-match-categories-tip\">\n            {{ 'no_match_categories_tip' | translate }}\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"categoriesTemp\"\n            [ngTemplateOutletContext]=\"{\n              normal: normalConditionsResource$ | async,\n              groups: groupConditionsResource$ | async,\n            }\"\n          ></ng-container>\n        </ul>\n      }\n      <ng-template\n        #categoriesTemp\n        let-normal=\"normal\"\n        let-groups=\"groups\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"liConditionTemp\"\n          [ngTemplateOutletContext]=\"{ conditions: normal }\"\n        ></ng-container>\n        @for (group of groups; track group) {\n          @if (group.member?.length) {\n            <div\n              [title]=\"group.group\"\n              class=\"dropdown-group-label dropdown-content\"\n            >\n              {{ group.group }}\n            </div>\n            <ng-container\n              [ngTemplateOutlet]=\"liConditionTemp\"\n              [ngTemplateOutletContext]=\"{ conditions: group.member }\"\n            ></ng-container>\n          }\n        }\n      </ng-template>\n    }\n\n    @if (form.value; as activeCondition) {\n      <!-- operator\u9009\u62E9 -->\n      @if (isOperatorSelecting) {\n        <ul class=\"operator-list\">\n          @for (\n            operator of activeCondition.operators || [DEFAULT_OPERATOR];\n            track operator\n          ) {\n            <li (click)=\"selectActiveOperator($any(operator))\">\n              <ng-container\n                [ngTemplateOutlet]=\"basicLiContentTemp\"\n                [ngTemplateOutletContext]=\"{\n                  isSelect: operator === conditionsModel,\n                  label: operator,\n                }\"\n              >\n              </ng-container>\n            </li>\n          }\n        </ul>\n      }\n      <!-- \u5177\u4F53\u6761\u4EF6\u9009\u62E9 -->\n      @if (isValueSelecting) {\n        @if (\n          activeCondition\n            | pure\n              : hasFilteredValues\n              : conditionsModel\n              : activeCondition.isMulti\n        ) {\n          <ul class=\"dropdown-list\">\n            @if (activeCondition.allowSelectAll && activeCondition.isMulti) {\n              <li class=\"dropdown-content select-all\">\n                <div\n                  class=\"search-dropdown-item\"\n                  [ngClass]=\"{\n                    'active-item': isSelectAll,\n                  }\"\n                  (click)=\"selectAllClick()\"\n                >\n                  <div class=\"multi-item\">\n                    <aui-checkbox\n                      [value]=\"isSelectAll\"\n                      [indeterminate]=\"isIndeterminate\"\n                    ></aui-checkbox>\n                    <div class=\"search-dropdown-item-label\">\n                      {{ 'all' | translate }}\n                    </div>\n                  </div>\n                </div>\n              </li>\n            }\n            <ng-container\n              [ngTemplateOutlet]=\"liValueTemp\"\n              [ngTemplateOutletContext]=\"{\n                values:\n                  activeCondition\n                  | pure\n                    : getNormalValues\n                    : conditionsModel\n                    : activeCondition.isMulti,\n                activeCondition: activeCondition,\n              }\"\n            >\n            </ng-container>\n            @for (\n              group of activeCondition\n                | pure\n                  : getValuesGroup\n                  : conditionsModel\n                  : activeCondition.isMulti;\n              track group\n            ) {\n              @if (group.member?.length) {\n                <div\n                  [title]=\"group.group\"\n                  class=\"dropdown-group-label dropdown-content\"\n                >\n                  {{ group.group }}\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"liValueTemp\"\n                  [ngTemplateOutletContext]=\"{\n                    values: group.member,\n                    activeCondition: activeCondition,\n                  }\"\n                ></ng-container>\n              }\n            }\n          </ul>\n        }\n      }\n    }\n    @if (showFootAction && form?.value?.isMulti) {\n      <div class=\"footer\">\n        <button\n          aui-button=\"text\"\n          size=\"mini\"\n          (click)=\"confirmSelection()\"\n        >\n          {{ 'confirm' | translate }}\n        </button>\n        <button\n          aui-button=\"text\"\n          size=\"mini\"\n          class=\"cancel\"\n          (click)=\"toolTipHide()\"\n        >\n          {{ 'cancel' | translate }}\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #liConditionTemp\n  let-conditions=\"conditions\"\n>\n  @for (condition of conditions; track condition) {\n    <li\n      class=\"dropdown-content\"\n      (click)=\"selectActiveCondition(condition)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"basicLiContentTemp\"\n        [ngTemplateOutletContext]=\"{\n          isSelect:\n            condition\n            | pure: getConditionLabel\n            | pure: isConditionSelected : conditionsModel,\n          label: condition | pure: getConditionLabel,\n        }\"\n      >\n      </ng-container>\n    </li>\n  }\n</ng-template>\n\n<ng-template\n  #liValueTemp\n  let-values=\"values\"\n  let-activeCondition=\"activeCondition\"\n>\n  @for (value of values; track value) {\n    <li\n      class=\"dropdown-content\"\n      (click)=\"\n        selectValue(value, activeCondition.isMulti);\n        $event.stopPropagation();\n        $event.preventDefault()\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"basicLiContentTemp\"\n        [ngTemplateOutletContext]=\"{\n          isSelect:\n            value\n            | pure: getValueLabel\n            | pure\n              : isValueSelected\n              : conditionsModel || (form.value | pure: getValueContent)\n              : activeCondition,\n          label: value | pure: getValueLabel,\n          isMulti: activeCondition.isMulti,\n        }\"\n      >\n      </ng-container>\n    </li>\n  }\n</ng-template>\n\n<ng-template\n  #basicLiContentTemp\n  let-isSelect=\"isSelect\"\n  let-label=\"label\"\n  let-isMulti=\"isMulti\"\n>\n  <div\n    [class]=\"DROPDOWN_ITEM_CLASS\"\n    [ngClass]=\"{\n      'is-multi-value-select': isSelect,\n    }\"\n  >\n    @if (isMulti) {\n      <div class=\"multi-item\">\n        <aui-checkbox [value]=\"isSelect\"></aui-checkbox>\n        <div\n          [title]=\"label\"\n          class=\"search-dropdown-item-label\"\n        >\n          {{ label }}\n        </div>\n      </div>\n    }\n    @if (!isMulti) {\n      <div\n        [title]=\"label\"\n        class=\"search-dropdown-item-label\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;padding-top:5px}.search-input{border:none;box-shadow:none!important;height:22px}.mock-input{width:1px!important;flex-shrink:0;padding:0;margin-left:7px}::ng-deep .multi-search-dropdown{padding:0!important;margin-top:8px!important;cursor:pointer;max-height:284px;overflow-y:auto}::ng-deep .multi-search-dropdown ul .dropdown-content:first-child{border:none;padding-top:0;margin-top:0}::ng-deep .multi-search-dropdown .cursor-light{background-color:rgb(var(--aui-color-p-6))}::ng-deep .multi-search-dropdown .is-multi-value-select{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-p-2))}::ng-deep .multi-search-dropdown .search-dropdown-item{padding:0 8px}::ng-deep .multi-search-dropdown .search-dropdown-item:hover{background-color:rgb(var(--aui-color-p-6))}::ng-deep .multi-search-dropdown .search-dropdown-item .multi-item{display:flex;height:28px;align-items:center}::ng-deep .multi-search-dropdown .search-dropdown-item .multi-item aui-checkbox{width:24px}::ng-deep .multi-search-dropdown .search-dropdown-item-label{height:28px;line-height:28px;white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis;font-size:var(--aui-font-size-m)}::ng-deep .multi-search-dropdown .dropdown-group-label{font-size:12px;color:rgb(var(--aui-color-n-4));padding-bottom:8px;padding-top:12px;margin-top:12px;margin-left:8px;margin-right:8px;border-top:1px solid rgb(var(--aui-color-n-8));white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis}::ng-deep .multi-search-dropdown .no-match-categories-tip{text-align:center;font-size:12px;color:rgb(var(--aui-color-n-4));border-bottom:1px solid rgb(var(--aui-color-n-8));margin-left:8px;margin-right:8px;margin-bottom:8px;padding-top:4px;padding-bottom:12px}::ng-deep .multi-search-dropdown .select-all{border-bottom:1px solid rgb(var(--aui-color-n-8))!important;margin-bottom:8px}::ng-deep .multi-search-dropdown .footer{display:flex;background:rgb(var(--aui-color-n-10));justify-content:flex-end;border-top:1px solid rgb(var(--aui-color-n-8));position:sticky;bottom:0;height:30px;padding:0 8px;align-items:center}::ng-deep .multi-search-dropdown .footer .cancel{color:rgb(var(--aui-color-n-1))!important}.action-input-container{display:flex;align-items:center;font-size:14px}.condition-label,.value-label{margin-left:6px;max-width:45%;flex-shrink:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.operator-label{margin-left:6px}.dropdown-list{min-width:260px;max-width:400px}.operator-list{min-width:160px}.active-item{color:rgb(var(--aui-color-p-2));background-color:rgb(var(--aui-color-p-6))}\n"], dependencies: [{ kind: "component", type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: CheckboxComponent, selector: "aui-checkbox", inputs: ["name", "type", "label", "indeterminate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     ObservableInput(),
@@ -8958,7 +8901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         NgTemplateOutlet,
                         FormsModule,
                         ButtonComponent,
-                    ], template: "<div class=\"tw-flex tw-items-center tw-text-m\">\n  @if (form.value; as activeCondition) {\n    <span\n      class=\"tw-ml-6 tw-max-w-[45%] tw-flex-shrink-0 tw-text-ellipsis tw-overflow-hidden\"\n      (click)=\"activeConditionClick(); $event.stopPropagation()\"\n    >\n      {{ activeCondition | pure: getConditionLabel }}\n    </span>\n    @if (activeCondition.operator) {\n      <span\n        class=\"tw-ml-6\"\n        (click)=\"activeOperatorClick(); $event.stopPropagation()\"\n      >\n        {{ activeCondition.operator }}\n      </span>\n    }\n    @if (!isEditing) {\n      <span\n        class=\"tw-ml-6 tw-max-w-[45%] tw-flex-shrink-0 tw-text-ellipsis tw-overflow-hidden\"\n        (click)=\"activeValueClick(); $event.stopPropagation()\"\n      >\n        {{ getValueContent(activeCondition) }}\n      </span>\n    }\n  }\n  <input\n    class=\"search-input\"\n    [ngClass]=\"{\n      'mock-input':\n        (!isEditing && !isConditionSelecting) || isOperatorSelecting,\n    }\"\n    [maxlength]=\"isOperatorSelecting ? 0 : MAX_SAFE_INTEGER\"\n    aui-input\n    #inputRef\n    #toolTipRef=\"auiTooltip\"\n    [placeholder]=\"isConditionSelecting ? placeholder : ''\"\n    [(ngModel)]=\"conditionsModel\"\n    (ngModelChange)=\"conditionsModel$$.next($event)\"\n    (keydown)=\"inputKeydown($event)\"\n    (focus)=\"inputFocus()\"\n    [auiTooltip]=\"templateRef\"\n    auiTooltipAnimType=\"none\"\n    auiTooltipTrigger=\"manual\"\n    auiTooltipType=\"info\"\n    auiTooltipClass=\"multi-search-dropdown\"\n    auiTooltipPosition=\"bottom start\"\n  />\n</div>\n\n<ng-template #templateRef>\n  <div\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- \u7C7B\u76EE\u9009\u62E9 -->\n    @if (isConditionSelecting && (conditionsShouldShow$ | async)) {\n      @if (hasFilteredConditions$ | async) {\n        <ul class=\"tw-min-w-[260px] tw-max-w-[400px]\">\n          <ng-container\n            [ngTemplateOutlet]=\"categoriesTemp\"\n            [ngTemplateOutletContext]=\"{\n              normal: (normalConditions$ | async),\n              groups: groupConditions$ | async,\n            }\"\n          ></ng-container>\n        </ul>\n      } @else {\n        <ul class=\"tw-min-w-[260px] tw-max-w-[400px]\">\n          <div class=\"no-match-categories-tip\">\n            {{ 'no_match_categories_tip' | translate }}\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"categoriesTemp\"\n            [ngTemplateOutletContext]=\"{\n              normal: normalConditionsResource$ | async,\n              groups: groupConditionsResource$ | async,\n            }\"\n          ></ng-container>\n        </ul>\n      }\n      <ng-template\n        #categoriesTemp\n        let-normal=\"normal\"\n        let-groups=\"groups\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"liConditionTemp\"\n          [ngTemplateOutletContext]=\"{ conditions: normal }\"\n        ></ng-container>\n        @for (group of groups; track group) {\n          @if (group.member?.length) {\n            <div\n              [title]=\"group.group\"\n              class=\"dropdown-group-label dropdown-content\"\n            >\n              {{ group.group }}\n            </div>\n            <ng-container\n              [ngTemplateOutlet]=\"liConditionTemp\"\n              [ngTemplateOutletContext]=\"{ conditions: group.member }\"\n            ></ng-container>\n          }\n        }\n      </ng-template>\n    }\n\n    @if (form.value; as activeCondition) {\n      <!-- operator\u9009\u62E9 -->\n      @if (isOperatorSelecting) {\n        <ul class=\"tw-min-w-[160px]\">\n          @for (\n            operator of activeCondition.operators || [DEFAULT_OPERATOR];\n            track operator\n          ) {\n            <li (click)=\"selectActiveOperator($any(operator))\">\n              <ng-container\n                [ngTemplateOutlet]=\"basicLiContentTemp\"\n                [ngTemplateOutletContext]=\"{\n                  isSelect: operator === conditionsModel,\n                  label: operator,\n                }\"\n              >\n              </ng-container>\n            </li>\n          }\n        </ul>\n      }\n      <!-- \u5177\u4F53\u6761\u4EF6\u9009\u62E9 -->\n      @if (isValueSelecting) {\n        @if (\n          activeCondition\n            | pure\n              : hasFilteredValues\n              : conditionsModel\n              : activeCondition.isMulti\n        ) {\n          <ul class=\"tw-min-w-[260px] tw-max-w-[400px]\">\n            @if (activeCondition.allowSelectAll && activeCondition.isMulti) {\n              <li class=\"dropdown-content select-all\">\n                <div\n                  class=\"search-dropdown-item\"\n                  [ngClass]=\"{\n                    'tw-text-p-2': isSelectAll,\n                    'tw-bg-p-6': isSelectAll,\n                  }\"\n                  (click)=\"selectAllClick()\"\n                >\n                  <div class=\"multi-item\">\n                    <aui-checkbox\n                      [value]=\"isSelectAll\"\n                      [indeterminate]=\"isIndeterminate\"\n                    ></aui-checkbox>\n                    <div class=\"search-dropdown-item-label\">\n                      {{ 'all' | translate }}\n                    </div>\n                  </div>\n                </div>\n              </li>\n            }\n            <ng-container\n              [ngTemplateOutlet]=\"liValueTemp\"\n              [ngTemplateOutletContext]=\"{\n                values:\n                  activeCondition\n                  | pure\n                    : getNormalValues\n                    : conditionsModel\n                    : activeCondition.isMulti,\n                activeCondition: activeCondition,\n              }\"\n            >\n            </ng-container>\n            @for (\n              group of activeCondition\n                | pure\n                  : getValuesGroup\n                  : conditionsModel\n                  : activeCondition.isMulti;\n              track group\n            ) {\n              @if (group.member?.length) {\n                <div\n                  [title]=\"group.group\"\n                  class=\"dropdown-group-label dropdown-content\"\n                >\n                  {{ group.group }}\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"liValueTemp\"\n                  [ngTemplateOutletContext]=\"{\n                    values: group.member,\n                    activeCondition: activeCondition,\n                  }\"\n                ></ng-container>\n              }\n            }\n          </ul>\n        }\n      }\n    }\n    @if (showFootAction && form?.value?.isMulti) {\n      <div class=\"footer\">\n        <button\n          aui-button=\"text\"\n          size=\"mini\"\n          (click)=\"confirmSelection()\"\n        >\n          {{ 'confirm' | translate }}\n        </button>\n        <button\n          aui-button=\"text\"\n          size=\"mini\"\n          class=\"cancel\"\n          (click)=\"toolTipHide()\"\n        >\n          {{ 'cancel' | translate }}\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #liConditionTemp\n  let-conditions=\"conditions\"\n>\n  @for (condition of conditions; track condition) {\n    <li\n      class=\"dropdown-content\"\n      (click)=\"selectActiveCondition(condition)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"basicLiContentTemp\"\n        [ngTemplateOutletContext]=\"{\n          isSelect:\n            condition\n            | pure: getConditionLabel\n            | pure: isConditionSelected : conditionsModel,\n          label: condition | pure: getConditionLabel,\n        }\"\n      >\n      </ng-container>\n    </li>\n  }\n</ng-template>\n\n<ng-template\n  #liValueTemp\n  let-values=\"values\"\n  let-activeCondition=\"activeCondition\"\n>\n  @for (value of values; track value) {\n    <li\n      class=\"dropdown-content\"\n      (click)=\"\n        selectValue(value, activeCondition.isMulti);\n        $event.stopPropagation();\n        $event.preventDefault()\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"basicLiContentTemp\"\n        [ngTemplateOutletContext]=\"{\n          isSelect:\n            value\n            | pure: getValueLabel\n            | pure\n              : isValueSelected\n              : conditionsModel || (form.value | pure: getValueContent)\n              : activeCondition,\n          label: value | pure: getValueLabel,\n          isMulti: activeCondition.isMulti,\n        }\"\n      >\n      </ng-container>\n    </li>\n  }\n</ng-template>\n\n<ng-template\n  #basicLiContentTemp\n  let-isSelect=\"isSelect\"\n  let-label=\"label\"\n  let-isMulti=\"isMulti\"\n>\n  <div\n    [class]=\"DROPDOWN_ITEM_CLASS\"\n    [ngClass]=\"{\n      'is-multi-value-select': isSelect,\n    }\"\n  >\n    @if (isMulti) {\n      <div class=\"multi-item\">\n        <aui-checkbox [value]=\"isSelect\"></aui-checkbox>\n        <div\n          [title]=\"label\"\n          class=\"search-dropdown-item-label\"\n        >\n          {{ label }}\n        </div>\n      </div>\n    }\n    @if (!isMulti) {\n      <div\n        [title]=\"label\"\n        class=\"search-dropdown-item-label\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;padding-top:5px}.search-input{border:none;box-shadow:none!important;height:22px}.mock-input{width:1px!important;flex-shrink:0;padding:0;margin-left:7px}::ng-deep .multi-search-dropdown{padding:0!important;margin-top:8px!important;cursor:pointer;max-height:284px;overflow-y:auto}::ng-deep .multi-search-dropdown ul .dropdown-content:first-child{border:none;padding-top:0;margin-top:0}::ng-deep .multi-search-dropdown .cursor-light{background-color:rgb(var(--aui-color-p-6))}::ng-deep .multi-search-dropdown .is-multi-value-select{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-p-2))}::ng-deep .multi-search-dropdown .search-dropdown-item{padding:0 8px}::ng-deep .multi-search-dropdown .search-dropdown-item:hover{background-color:rgb(var(--aui-color-p-6))}::ng-deep .multi-search-dropdown .search-dropdown-item .multi-item{display:flex;height:28px;align-items:center}::ng-deep .multi-search-dropdown .search-dropdown-item .multi-item aui-checkbox{width:24px}::ng-deep .multi-search-dropdown .search-dropdown-item-label{height:28px;line-height:28px;white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis;font-size:var(--aui-font-size-m)}::ng-deep .multi-search-dropdown .dropdown-group-label{font-size:12px;color:rgb(var(--aui-color-n-4));padding-bottom:8px;padding-top:12px;margin-top:12px;margin-left:8px;margin-right:8px;border-top:1px solid rgb(var(--aui-color-n-8));white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis}::ng-deep .multi-search-dropdown .no-match-categories-tip{text-align:center;font-size:12px;color:rgb(var(--aui-color-n-4));border-bottom:1px solid rgb(var(--aui-color-n-8));margin-left:8px;margin-right:8px;margin-bottom:8px;padding-top:4px;padding-bottom:12px}::ng-deep .multi-search-dropdown .select-all{border-bottom:1px solid rgb(var(--aui-color-n-8))!important;margin-bottom:8px}::ng-deep .multi-search-dropdown .footer{display:flex;background:rgb(var(--aui-color-n-10));justify-content:flex-end;border-top:1px solid rgb(var(--aui-color-n-8));position:sticky;bottom:0;height:30px;padding:0 8px;align-items:center}::ng-deep .multi-search-dropdown .footer .cancel{color:rgb(var(--aui-color-n-1))!important}\n"] }]
+                    ], template: "<div class=\"action-input-container\">\n  @if (form.value; as activeCondition) {\n    <span\n      class=\"condition-label\"\n      (click)=\"activeConditionClick(); $event.stopPropagation()\"\n    >\n      {{ activeCondition | pure: getConditionLabel }}\n    </span>\n    @if (activeCondition.operator) {\n      <span\n        class=\"operator-label\"\n        (click)=\"activeOperatorClick(); $event.stopPropagation()\"\n      >\n        {{ activeCondition.operator }}\n      </span>\n    }\n    @if (!isEditing) {\n      <span\n        class=\"value-label\"\n        (click)=\"activeValueClick(); $event.stopPropagation()\"\n      >\n        {{ getValueContent(activeCondition) }}\n      </span>\n    }\n  }\n  <input\n    class=\"search-input\"\n    [ngClass]=\"{\n      'mock-input':\n        (!isEditing && !isConditionSelecting) || isOperatorSelecting,\n    }\"\n    [maxlength]=\"isOperatorSelecting ? 0 : MAX_SAFE_INTEGER\"\n    aui-input\n    #inputRef\n    #toolTipRef=\"auiTooltip\"\n    [placeholder]=\"isConditionSelecting ? placeholder : ''\"\n    [(ngModel)]=\"conditionsModel\"\n    (ngModelChange)=\"conditionsModel$$.next($event)\"\n    (keydown)=\"inputKeydown($event)\"\n    (focus)=\"inputFocus()\"\n    [auiTooltip]=\"templateRef\"\n    auiTooltipAnimType=\"none\"\n    auiTooltipTrigger=\"manual\"\n    auiTooltipType=\"info\"\n    auiTooltipClass=\"multi-search-dropdown\"\n    auiTooltipPosition=\"bottom start\"\n  />\n</div>\n\n<ng-template #templateRef>\n  <div\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- \u7C7B\u76EE\u9009\u62E9 -->\n    @if (isConditionSelecting && (conditionsShouldShow$ | async)) {\n      @if (hasFilteredConditions$ | async) {\n        <ul class=\"dropdown-list\">\n          <ng-container\n            [ngTemplateOutlet]=\"categoriesTemp\"\n            [ngTemplateOutletContext]=\"{\n              normal: (normalConditions$ | async),\n              groups: groupConditions$ | async,\n            }\"\n          ></ng-container>\n        </ul>\n      } @else {\n        <ul class=\"dropdown-list\">\n          <div class=\"no-match-categories-tip\">\n            {{ 'no_match_categories_tip' | translate }}\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"categoriesTemp\"\n            [ngTemplateOutletContext]=\"{\n              normal: normalConditionsResource$ | async,\n              groups: groupConditionsResource$ | async,\n            }\"\n          ></ng-container>\n        </ul>\n      }\n      <ng-template\n        #categoriesTemp\n        let-normal=\"normal\"\n        let-groups=\"groups\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"liConditionTemp\"\n          [ngTemplateOutletContext]=\"{ conditions: normal }\"\n        ></ng-container>\n        @for (group of groups; track group) {\n          @if (group.member?.length) {\n            <div\n              [title]=\"group.group\"\n              class=\"dropdown-group-label dropdown-content\"\n            >\n              {{ group.group }}\n            </div>\n            <ng-container\n              [ngTemplateOutlet]=\"liConditionTemp\"\n              [ngTemplateOutletContext]=\"{ conditions: group.member }\"\n            ></ng-container>\n          }\n        }\n      </ng-template>\n    }\n\n    @if (form.value; as activeCondition) {\n      <!-- operator\u9009\u62E9 -->\n      @if (isOperatorSelecting) {\n        <ul class=\"operator-list\">\n          @for (\n            operator of activeCondition.operators || [DEFAULT_OPERATOR];\n            track operator\n          ) {\n            <li (click)=\"selectActiveOperator($any(operator))\">\n              <ng-container\n                [ngTemplateOutlet]=\"basicLiContentTemp\"\n                [ngTemplateOutletContext]=\"{\n                  isSelect: operator === conditionsModel,\n                  label: operator,\n                }\"\n              >\n              </ng-container>\n            </li>\n          }\n        </ul>\n      }\n      <!-- \u5177\u4F53\u6761\u4EF6\u9009\u62E9 -->\n      @if (isValueSelecting) {\n        @if (\n          activeCondition\n            | pure\n              : hasFilteredValues\n              : conditionsModel\n              : activeCondition.isMulti\n        ) {\n          <ul class=\"dropdown-list\">\n            @if (activeCondition.allowSelectAll && activeCondition.isMulti) {\n              <li class=\"dropdown-content select-all\">\n                <div\n                  class=\"search-dropdown-item\"\n                  [ngClass]=\"{\n                    'active-item': isSelectAll,\n                  }\"\n                  (click)=\"selectAllClick()\"\n                >\n                  <div class=\"multi-item\">\n                    <aui-checkbox\n                      [value]=\"isSelectAll\"\n                      [indeterminate]=\"isIndeterminate\"\n                    ></aui-checkbox>\n                    <div class=\"search-dropdown-item-label\">\n                      {{ 'all' | translate }}\n                    </div>\n                  </div>\n                </div>\n              </li>\n            }\n            <ng-container\n              [ngTemplateOutlet]=\"liValueTemp\"\n              [ngTemplateOutletContext]=\"{\n                values:\n                  activeCondition\n                  | pure\n                    : getNormalValues\n                    : conditionsModel\n                    : activeCondition.isMulti,\n                activeCondition: activeCondition,\n              }\"\n            >\n            </ng-container>\n            @for (\n              group of activeCondition\n                | pure\n                  : getValuesGroup\n                  : conditionsModel\n                  : activeCondition.isMulti;\n              track group\n            ) {\n              @if (group.member?.length) {\n                <div\n                  [title]=\"group.group\"\n                  class=\"dropdown-group-label dropdown-content\"\n                >\n                  {{ group.group }}\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"liValueTemp\"\n                  [ngTemplateOutletContext]=\"{\n                    values: group.member,\n                    activeCondition: activeCondition,\n                  }\"\n                ></ng-container>\n              }\n            }\n          </ul>\n        }\n      }\n    }\n    @if (showFootAction && form?.value?.isMulti) {\n      <div class=\"footer\">\n        <button\n          aui-button=\"text\"\n          size=\"mini\"\n          (click)=\"confirmSelection()\"\n        >\n          {{ 'confirm' | translate }}\n        </button>\n        <button\n          aui-button=\"text\"\n          size=\"mini\"\n          class=\"cancel\"\n          (click)=\"toolTipHide()\"\n        >\n          {{ 'cancel' | translate }}\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #liConditionTemp\n  let-conditions=\"conditions\"\n>\n  @for (condition of conditions; track condition) {\n    <li\n      class=\"dropdown-content\"\n      (click)=\"selectActiveCondition(condition)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"basicLiContentTemp\"\n        [ngTemplateOutletContext]=\"{\n          isSelect:\n            condition\n            | pure: getConditionLabel\n            | pure: isConditionSelected : conditionsModel,\n          label: condition | pure: getConditionLabel,\n        }\"\n      >\n      </ng-container>\n    </li>\n  }\n</ng-template>\n\n<ng-template\n  #liValueTemp\n  let-values=\"values\"\n  let-activeCondition=\"activeCondition\"\n>\n  @for (value of values; track value) {\n    <li\n      class=\"dropdown-content\"\n      (click)=\"\n        selectValue(value, activeCondition.isMulti);\n        $event.stopPropagation();\n        $event.preventDefault()\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"basicLiContentTemp\"\n        [ngTemplateOutletContext]=\"{\n          isSelect:\n            value\n            | pure: getValueLabel\n            | pure\n              : isValueSelected\n              : conditionsModel || (form.value | pure: getValueContent)\n              : activeCondition,\n          label: value | pure: getValueLabel,\n          isMulti: activeCondition.isMulti,\n        }\"\n      >\n      </ng-container>\n    </li>\n  }\n</ng-template>\n\n<ng-template\n  #basicLiContentTemp\n  let-isSelect=\"isSelect\"\n  let-label=\"label\"\n  let-isMulti=\"isMulti\"\n>\n  <div\n    [class]=\"DROPDOWN_ITEM_CLASS\"\n    [ngClass]=\"{\n      'is-multi-value-select': isSelect,\n    }\"\n  >\n    @if (isMulti) {\n      <div class=\"multi-item\">\n        <aui-checkbox [value]=\"isSelect\"></aui-checkbox>\n        <div\n          [title]=\"label\"\n          class=\"search-dropdown-item-label\"\n        >\n          {{ label }}\n        </div>\n      </div>\n    }\n    @if (!isMulti) {\n      <div\n        [title]=\"label\"\n        class=\"search-dropdown-item-label\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;padding-top:5px}.search-input{border:none;box-shadow:none!important;height:22px}.mock-input{width:1px!important;flex-shrink:0;padding:0;margin-left:7px}::ng-deep .multi-search-dropdown{padding:0!important;margin-top:8px!important;cursor:pointer;max-height:284px;overflow-y:auto}::ng-deep .multi-search-dropdown ul .dropdown-content:first-child{border:none;padding-top:0;margin-top:0}::ng-deep .multi-search-dropdown .cursor-light{background-color:rgb(var(--aui-color-p-6))}::ng-deep .multi-search-dropdown .is-multi-value-select{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-p-2))}::ng-deep .multi-search-dropdown .search-dropdown-item{padding:0 8px}::ng-deep .multi-search-dropdown .search-dropdown-item:hover{background-color:rgb(var(--aui-color-p-6))}::ng-deep .multi-search-dropdown .search-dropdown-item .multi-item{display:flex;height:28px;align-items:center}::ng-deep .multi-search-dropdown .search-dropdown-item .multi-item aui-checkbox{width:24px}::ng-deep .multi-search-dropdown .search-dropdown-item-label{height:28px;line-height:28px;white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis;font-size:var(--aui-font-size-m)}::ng-deep .multi-search-dropdown .dropdown-group-label{font-size:12px;color:rgb(var(--aui-color-n-4));padding-bottom:8px;padding-top:12px;margin-top:12px;margin-left:8px;margin-right:8px;border-top:1px solid rgb(var(--aui-color-n-8));white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis}::ng-deep .multi-search-dropdown .no-match-categories-tip{text-align:center;font-size:12px;color:rgb(var(--aui-color-n-4));border-bottom:1px solid rgb(var(--aui-color-n-8));margin-left:8px;margin-right:8px;margin-bottom:8px;padding-top:4px;padding-bottom:12px}::ng-deep .multi-search-dropdown .select-all{border-bottom:1px solid rgb(var(--aui-color-n-8))!important;margin-bottom:8px}::ng-deep .multi-search-dropdown .footer{display:flex;background:rgb(var(--aui-color-n-10));justify-content:flex-end;border-top:1px solid rgb(var(--aui-color-n-8));position:sticky;bottom:0;height:30px;padding:0 8px;align-items:center}::ng-deep .multi-search-dropdown .footer .cancel{color:rgb(var(--aui-color-n-1))!important}.action-input-container{display:flex;align-items:center;font-size:14px}.condition-label,.value-label{margin-left:6px;max-width:45%;flex-shrink:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.operator-label{margin-left:6px}.dropdown-list{min-width:260px;max-width:400px}.operator-list{min-width:160px}.active-item{color:rgb(var(--aui-color-p-2));background-color:rgb(var(--aui-color-p-6))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
             }], conditionCreatable: [{
@@ -8981,7 +8924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Output
             }], delete: [{
                 type: Output
-            }], searchEvent: [{
+            }], search: [{
                 type: Output
             }], inputRef: [{
                 type: ViewChild,
@@ -8999,7 +8942,7 @@ class MultiSearchTagsComponent {
         this.removeCondition = new EventEmitter();
         this.setConditionEditing = new EventEmitter();
         this.setConditionDeleting = new EventEmitter();
-        this.searchEvent = new EventEmitter();
+        this.search = new EventEmitter();
         this.completed = new EventEmitter();
     }
     conditionInAction(condition) {
@@ -9014,7 +8957,7 @@ class MultiSearchTagsComponent {
             ?.join(condition.separator ?? ' | ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MultiSearchTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MultiSearchTagsComponent, isStandalone: true, selector: "acl-multi-search-tags", inputs: { placeholder: "placeholder", conditionCreatable: "conditionCreatable", conditionConfig: "conditionConfig", existingConditions: "existingConditions", showFootAction: "showFootAction" }, outputs: { removeCondition: "removeCondition", setConditionEditing: "setConditionEditing", setConditionDeleting: "setConditionDeleting", searchEvent: "searchEvent", completed: "completed" }, viewQueries: [{ propertyName: "inputComponent", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"search-content\">\n  @for (condition of existingConditions; track condition; let index = $index) {\n    @if (!conditionInAction(condition)) {\n      <aui-tag\n        class=\"tw-ml-6 tw-h-[22px] tw-mb-4\"\n        [ngClass]=\"condition.tagClass\"\n        [type]=\"condition.tagType || 'info'\"\n        [border]=\"true\"\n        [closeable]=\"true\"\n        (close)=\"removeCondition.emit(condition); searchEvent.emit()\"\n        (click)=\"setConditionEditing.emit(condition)\"\n        size=\"mini\"\n      >\n        <span\n          [title]=\"\n            (condition | pure: getConditionLabel) +\n            ' ' +\n            condition.operator +\n            ' ' +\n            (condition | pure: getValueContent)\n          \"\n        >\n          {{ condition | pure: getConditionLabel }}\n          {{ condition.operator }}\n          {{ condition | pure: getValueContent }}\n        </span>\n      </aui-tag>\n    } @else {\n      <acl-multi-search-action-input\n        #inputRef\n        class=\"input-wrapper\"\n        [ngClass]=\"{ 'deleting-input': condition.isDeleting }\"\n        [isEditing]=\"condition.isEditing\"\n        [conditionCreatable]=\"conditionCreatable\"\n        [placeholder]=\"placeholder\"\n        [conditionConfig]=\"conditionConfig\"\n        [existingConditions]=\"existingConditions\"\n        [showFootAction]=\"showFootAction\"\n        [(ngModel)]=\"condition.actionModel\"\n        (completed)=\"\n          completed.emit({\n            activeCondition: $event.activeCondition,\n            toContinue: $event.toContinue,\n            manualFocus: $event.manualFocus,\n            index: index,\n          })\n        \"\n        (delete)=\"setConditionDeleting.emit(index - 1)\"\n        (editing)=\"setConditionEditing.emit(condition)\"\n        (search)=\"searchEvent.emit()\"\n      ></acl-multi-search-action-input>\n    }\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}:host .search-content{width:100%;min-height:30px;max-height:160px;flex:1;display:flex;flex-wrap:wrap;align-items:center}:host .search-content ::ng-deep aui-tag{max-width:calc(100% - 8px)}:host .search-content ::ng-deep .aui-tag{margin-left:0;max-width:100%}:host .search-content ::ng-deep .input-wrapper{padding-bottom:4px;max-width:100%;width:max-content;min-width:180px;white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis;flex-grow:1;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiSearchActionInputComponent, selector: "acl-multi-search-action-input", inputs: ["placeholder", "conditionCreatable", "isEditing", "hidden", "autoScroll", "conditionConfig", "showFootAction", "existingConditions"], outputs: ["completed", "editing", "delete", "searchEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MultiSearchTagsComponent, isStandalone: true, selector: "acl-multi-search-tags", inputs: { placeholder: "placeholder", conditionCreatable: "conditionCreatable", conditionConfig: "conditionConfig", existingConditions: "existingConditions", showFootAction: "showFootAction" }, outputs: { removeCondition: "removeCondition", setConditionEditing: "setConditionEditing", setConditionDeleting: "setConditionDeleting", search: "search", completed: "completed" }, viewQueries: [{ propertyName: "inputComponent", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"search-content\">\n  @for (condition of existingConditions; track condition; let index = $index) {\n    @if (!conditionInAction(condition)) {\n      <aui-tag\n        class=\"tag-item\"\n        [ngClass]=\"condition.tagClass\"\n        [type]=\"condition.tagType || 'info'\"\n        [border]=\"true\"\n        [closeable]=\"true\"\n        (close)=\"removeCondition.emit(condition); search.emit()\"\n        (click)=\"setConditionEditing.emit(condition)\"\n        size=\"mini\"\n      >\n        <span\n          [title]=\"\n            (condition | pure: getConditionLabel) +\n            ' ' +\n            condition.operator +\n            ' ' +\n            (condition | pure: getValueContent)\n          \"\n        >\n          {{ condition | pure: getConditionLabel }}\n          {{ condition.operator }}\n          {{ condition | pure: getValueContent }}\n        </span>\n      </aui-tag>\n    } @else {\n      <acl-multi-search-action-input\n        #inputRef\n        class=\"input-wrapper\"\n        [ngClass]=\"{ 'deleting-input': condition.isDeleting }\"\n        [isEditing]=\"condition.isEditing\"\n        [conditionCreatable]=\"conditionCreatable\"\n        [placeholder]=\"placeholder\"\n        [conditionConfig]=\"conditionConfig\"\n        [existingConditions]=\"existingConditions\"\n        [showFootAction]=\"showFootAction\"\n        [(ngModel)]=\"condition.actionModel\"\n        (completed)=\"\n          completed.emit({\n            activeCondition: $event.activeCondition,\n            toContinue: $event.toContinue,\n            manualFocus: $event.manualFocus,\n            index: index,\n          })\n        \"\n        (delete)=\"setConditionDeleting.emit(index - 1)\"\n        (editing)=\"setConditionEditing.emit(condition)\"\n        (search)=\"search.emit()\"\n      ></acl-multi-search-action-input>\n    }\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}:host .search-content{width:100%;min-height:30px;max-height:160px;flex:1;display:flex;flex-wrap:wrap;align-items:center}:host .search-content ::ng-deep aui-tag{max-width:calc(100% - 8px)}:host .search-content ::ng-deep .aui-tag{margin-left:0;max-width:100%}:host .search-content ::ng-deep .input-wrapper{padding-bottom:4px;max-width:100%;width:max-content;min-width:180px;white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis;flex-grow:1;flex-shrink:0}:host .tag-item{margin-left:6px;height:22px;margin-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiSearchActionInputComponent, selector: "acl-multi-search-action-input", inputs: ["placeholder", "conditionCreatable", "isEditing", "hidden", "autoScroll", "conditionConfig", "showFootAction", "existingConditions"], outputs: ["completed", "editing", "delete", "search"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MultiSearchTagsComponent, decorators: [{
             type: Component,
@@ -9024,7 +8967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         PurePipe,
                         MultiSearchActionInputComponent,
                         FormsModule,
-                    ], template: "<div class=\"search-content\">\n  @for (condition of existingConditions; track condition; let index = $index) {\n    @if (!conditionInAction(condition)) {\n      <aui-tag\n        class=\"tw-ml-6 tw-h-[22px] tw-mb-4\"\n        [ngClass]=\"condition.tagClass\"\n        [type]=\"condition.tagType || 'info'\"\n        [border]=\"true\"\n        [closeable]=\"true\"\n        (close)=\"removeCondition.emit(condition); searchEvent.emit()\"\n        (click)=\"setConditionEditing.emit(condition)\"\n        size=\"mini\"\n      >\n        <span\n          [title]=\"\n            (condition | pure: getConditionLabel) +\n            ' ' +\n            condition.operator +\n            ' ' +\n            (condition | pure: getValueContent)\n          \"\n        >\n          {{ condition | pure: getConditionLabel }}\n          {{ condition.operator }}\n          {{ condition | pure: getValueContent }}\n        </span>\n      </aui-tag>\n    } @else {\n      <acl-multi-search-action-input\n        #inputRef\n        class=\"input-wrapper\"\n        [ngClass]=\"{ 'deleting-input': condition.isDeleting }\"\n        [isEditing]=\"condition.isEditing\"\n        [conditionCreatable]=\"conditionCreatable\"\n        [placeholder]=\"placeholder\"\n        [conditionConfig]=\"conditionConfig\"\n        [existingConditions]=\"existingConditions\"\n        [showFootAction]=\"showFootAction\"\n        [(ngModel)]=\"condition.actionModel\"\n        (completed)=\"\n          completed.emit({\n            activeCondition: $event.activeCondition,\n            toContinue: $event.toContinue,\n            manualFocus: $event.manualFocus,\n            index: index,\n          })\n        \"\n        (delete)=\"setConditionDeleting.emit(index - 1)\"\n        (editing)=\"setConditionEditing.emit(condition)\"\n        (search)=\"searchEvent.emit()\"\n      ></acl-multi-search-action-input>\n    }\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}:host .search-content{width:100%;min-height:30px;max-height:160px;flex:1;display:flex;flex-wrap:wrap;align-items:center}:host .search-content ::ng-deep aui-tag{max-width:calc(100% - 8px)}:host .search-content ::ng-deep .aui-tag{margin-left:0;max-width:100%}:host .search-content ::ng-deep .input-wrapper{padding-bottom:4px;max-width:100%;width:max-content;min-width:180px;white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis;flex-grow:1;flex-shrink:0}\n"] }]
+                    ], template: "<div class=\"search-content\">\n  @for (condition of existingConditions; track condition; let index = $index) {\n    @if (!conditionInAction(condition)) {\n      <aui-tag\n        class=\"tag-item\"\n        [ngClass]=\"condition.tagClass\"\n        [type]=\"condition.tagType || 'info'\"\n        [border]=\"true\"\n        [closeable]=\"true\"\n        (close)=\"removeCondition.emit(condition); search.emit()\"\n        (click)=\"setConditionEditing.emit(condition)\"\n        size=\"mini\"\n      >\n        <span\n          [title]=\"\n            (condition | pure: getConditionLabel) +\n            ' ' +\n            condition.operator +\n            ' ' +\n            (condition | pure: getValueContent)\n          \"\n        >\n          {{ condition | pure: getConditionLabel }}\n          {{ condition.operator }}\n          {{ condition | pure: getValueContent }}\n        </span>\n      </aui-tag>\n    } @else {\n      <acl-multi-search-action-input\n        #inputRef\n        class=\"input-wrapper\"\n        [ngClass]=\"{ 'deleting-input': condition.isDeleting }\"\n        [isEditing]=\"condition.isEditing\"\n        [conditionCreatable]=\"conditionCreatable\"\n        [placeholder]=\"placeholder\"\n        [conditionConfig]=\"conditionConfig\"\n        [existingConditions]=\"existingConditions\"\n        [showFootAction]=\"showFootAction\"\n        [(ngModel)]=\"condition.actionModel\"\n        (completed)=\"\n          completed.emit({\n            activeCondition: $event.activeCondition,\n            toContinue: $event.toContinue,\n            manualFocus: $event.manualFocus,\n            index: index,\n          })\n        \"\n        (delete)=\"setConditionDeleting.emit(index - 1)\"\n        (editing)=\"setConditionEditing.emit(condition)\"\n        (search)=\"search.emit()\"\n      ></acl-multi-search-action-input>\n    }\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}:host .search-content{width:100%;min-height:30px;max-height:160px;flex:1;display:flex;flex-wrap:wrap;align-items:center}:host .search-content ::ng-deep aui-tag{max-width:calc(100% - 8px)}:host .search-content ::ng-deep .aui-tag{margin-left:0;max-width:100%}:host .search-content ::ng-deep .input-wrapper{padding-bottom:4px;max-width:100%;width:max-content;min-width:180px;white-space:nowrap;word-break:break-all;overflow:hidden;text-overflow:ellipsis;flex-grow:1;flex-shrink:0}:host .tag-item{margin-left:6px;height:22px;margin-bottom:4px}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], conditionCreatable: [{
@@ -9041,7 +8984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Output
             }], setConditionDeleting: [{
                 type: Output
-            }], searchEvent: [{
+            }], search: [{
                 type: Output
             }], completed: [{
                 type: Output
@@ -9063,7 +9006,7 @@ class MultiSearchComponent {
         this.autoScroll = true;
         this.searchSuffix = true;
         // 搜索操作
-        this.searchEvent = new EventEmitter();
+        this.search = new EventEmitter();
         // 条件变化
         this.conditionsChange = new EventEmitter();
         // 当前multi-search组件是否focus
@@ -9195,7 +9138,7 @@ class MultiSearchComponent {
         this.existingConditions$
             .pipe(take(1), takeUntil(this.destroy$$))
             .subscribe(exists => {
-            this.searchEvent.emit(this.getConditionModel(exists?.filter(exist => !this.conditionInAction(exist))));
+            this.search.emit(this.getConditionModel(exists?.filter(exist => !this.conditionInAction(exist))));
         });
     }
     // 清除所有已选条件
@@ -9310,7 +9253,7 @@ class MultiSearchComponent {
         this.destroy$$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MultiSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MultiSearchComponent, isStandalone: true, selector: "acl-multi-search", inputs: { placeholder: "placeholder", conditionCreatable: "conditionCreatable", conditions: "conditions", conditionConfig: "conditionConfig", autoScroll: "autoScroll", searchSuffix: "searchSuffix", showFootAction: "showFootAction" }, outputs: { searchEvent: "searchEvent", conditionsChange: "conditionsChange" }, viewQueries: [{ propertyName: "normalInputComponent", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "tagsComponent", first: true, predicate: ["tagsRef"], descendants: true }, { propertyName: "multiSearchRef", first: true, predicate: ["multiSearch"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"aui-input multi-search\"\n  #multiSearch\n  [ngClass]=\"{\n    'search-focus': focus$$ | async,\n  }\"\n>\n  <!-- \u5DF2\u9009\u62E9\u7C7B\u76EEtags -->\n  <acl-multi-search-tags\n    #tagsRef\n    [ngClass]=\"{\n      'tags-width-with-delete': $any(existingConditions$ | async)?.length,\n      'tags-width': !$any(existingConditions$ | async)?.length,\n    }\"\n    [placeholder]=\"placeholder\"\n    [conditionCreatable]=\"conditionCreatable\"\n    [existingConditions]=\"existingConditions\"\n    [conditionConfig]=\"conditionConfig\"\n    (removeCondition)=\"removeCondition($event)\"\n    (setConditionEditing)=\"setConditionEditing($event)\"\n    (setConditionDeleting)=\"setConditionDeleting($event)\"\n    [showFootAction]=\"showFootAction\"\n    (search)=\"doSearch()\"\n    (completed)=\"complete($event)\"\n  >\n    <!-- \u672B\u5C3E\u8F93\u5165\u6846 -->\n    <acl-multi-search-action-input\n      #inputRef\n      class=\"input-wrapper\"\n      [isEditing]=\"true\"\n      [hidden]=\"addedInputShouldHidden$ | async\"\n      [placeholder]=\"placeholder\"\n      [conditionCreatable]=\"conditionCreatable\"\n      [conditionConfig]=\"conditionConfig\"\n      [existingConditions]=\"existingConditions$ | async\"\n      [autoScroll]=\"autoScroll\"\n      [(ngModel)]=\"addedCondition\"\n      [showFootAction]=\"showFootAction\"\n      (completed)=\"complete($event)\"\n      (delete)=\"setConditionDeleting()\"\n      (search)=\"doSearch()\"\n    ></acl-multi-search-action-input>\n  </acl-multi-search-tags>\n\n  <div class=\"search-suffix\">\n    @if ($any(existingConditions$ | async)?.length) {\n      <div class=\"search-clear\">\n        <aui-icon\n          class=\"tw-text-n-4 tw-cursor-pointer\"\n          [ngClass]=\"CLEAR_ICON_CLASS\"\n          icon=\"xmark_small\"\n          size=\"14\"\n          (click)=\"clearConditions(); doSearch(); $event.stopPropagation()\"\n        ></aui-icon>\n      </div>\n    }\n    @if (searchSuffix) {\n      <div class=\"search-suffix\">\n        <div class=\"suffix-wrapper\">\n          <aui-icon\n            class=\"tw-text-n-4 tw-cursor-pointer\"\n            [ngClass]=\"SEARCH_ICON_CLASS\"\n            icon=\"magnifier\"\n            (click)=\"doSearch(); $event.stopPropagation()\"\n          ></aui-icon>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{min-width:0}.multi-search{min-width:240px;height:max-content;display:flex;align-items:stretch;padding:0;overflow-y:auto}.multi-search .tags-width{width:calc(100% - 30px)}.multi-search .tags-width-with-delete{width:calc(100% - 48px)}.multi-search .search-clear{width:18px;display:flex;align-items:center}.multi-search .search-clear-icon ::ng-deep .aui-icon{border-radius:50%}.multi-search .search-clear-icon ::ng-deep .aui-icon:hover{color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-5))!important}.multi-search .search-suffix{display:flex;text-align:center}.multi-search .search-suffix .suffix-wrapper{margin-top:4px;margin-bottom:4px;height:calc(100% - 8px);border-left:solid 1px rgb(var(--aui-color-n-7));min-width:30px;display:flex;align-items:center;justify-content:center}.multi-search .search-suffix .suffix-wrapper aui-icon:hover{color:rgb(var(--aui-color-blue))}.search-focus{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiSearchActionInputComponent, selector: "acl-multi-search-action-input", inputs: ["placeholder", "conditionCreatable", "isEditing", "hidden", "autoScroll", "conditionConfig", "showFootAction", "existingConditions"], outputs: ["completed", "editing", "delete", "searchEvent"] }, { kind: "component", type: MultiSearchTagsComponent, selector: "acl-multi-search-tags", inputs: ["placeholder", "conditionCreatable", "conditionConfig", "existingConditions", "showFootAction"], outputs: ["removeCondition", "setConditionEditing", "setConditionDeleting", "searchEvent", "completed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MultiSearchComponent, isStandalone: true, selector: "acl-multi-search", inputs: { placeholder: "placeholder", conditionCreatable: "conditionCreatable", conditions: "conditions", conditionConfig: "conditionConfig", autoScroll: "autoScroll", searchSuffix: "searchSuffix", showFootAction: "showFootAction" }, outputs: { search: "search", conditionsChange: "conditionsChange" }, viewQueries: [{ propertyName: "normalInputComponent", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "tagsComponent", first: true, predicate: ["tagsRef"], descendants: true }, { propertyName: "multiSearchRef", first: true, predicate: ["multiSearch"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"aui-input multi-search\"\n  #multiSearch\n  [ngClass]=\"{\n    'search-focus': focus$$ | async,\n  }\"\n>\n  <!-- \u5DF2\u9009\u62E9\u7C7B\u76EEtags -->\n  <acl-multi-search-tags\n    #tagsRef\n    [ngClass]=\"{\n      'tags-width-with-delete': $any(existingConditions$ | async)?.length,\n      'tags-width': !$any(existingConditions$ | async)?.length,\n    }\"\n    [placeholder]=\"placeholder\"\n    [conditionCreatable]=\"conditionCreatable\"\n    [existingConditions]=\"existingConditions\"\n    [conditionConfig]=\"conditionConfig\"\n    (removeCondition)=\"removeCondition($event)\"\n    (setConditionEditing)=\"setConditionEditing($event)\"\n    (setConditionDeleting)=\"setConditionDeleting($event)\"\n    [showFootAction]=\"showFootAction\"\n    (search)=\"doSearch()\"\n    (completed)=\"complete($event)\"\n  >\n    <!-- \u672B\u5C3E\u8F93\u5165\u6846 -->\n    <acl-multi-search-action-input\n      #inputRef\n      class=\"input-wrapper\"\n      [isEditing]=\"true\"\n      [hidden]=\"addedInputShouldHidden$ | async\"\n      [placeholder]=\"placeholder\"\n      [conditionCreatable]=\"conditionCreatable\"\n      [conditionConfig]=\"conditionConfig\"\n      [existingConditions]=\"existingConditions$ | async\"\n      [autoScroll]=\"autoScroll\"\n      [(ngModel)]=\"addedCondition\"\n      [showFootAction]=\"showFootAction\"\n      (completed)=\"complete($event)\"\n      (delete)=\"setConditionDeleting()\"\n      (search)=\"doSearch()\"\n    ></acl-multi-search-action-input>\n  </acl-multi-search-tags>\n\n  <div class=\"search-suffix\">\n    @if ($any(existingConditions$ | async)?.length) {\n      <div class=\"search-clear\">\n        <aui-icon\n          class=\"clear-icon\"\n          [ngClass]=\"CLEAR_ICON_CLASS\"\n          icon=\"xmark_small\"\n          size=\"14\"\n          (click)=\"clearConditions(); doSearch(); $event.stopPropagation()\"\n        ></aui-icon>\n      </div>\n    }\n    @if (searchSuffix) {\n      <div class=\"search-suffix\">\n        <div class=\"suffix-wrapper\">\n          <aui-icon\n            class=\"search-icon\"\n            [ngClass]=\"SEARCH_ICON_CLASS\"\n            icon=\"magnifier\"\n            (click)=\"doSearch(); $event.stopPropagation()\"\n          ></aui-icon>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{min-width:0}.multi-search{min-width:240px;height:max-content;display:flex;align-items:stretch;padding:0;overflow-y:auto}.multi-search .tags-width{width:calc(100% - 30px)}.multi-search .tags-width-with-delete{width:calc(100% - 48px)}.multi-search .search-clear{width:18px;display:flex;align-items:center}.multi-search .search-clear-icon ::ng-deep .aui-icon{border-radius:50%}.multi-search .search-clear-icon ::ng-deep .aui-icon:hover{color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-5))!important}.multi-search .search-suffix{display:flex;text-align:center}.multi-search .search-suffix .suffix-wrapper{margin-top:4px;margin-bottom:4px;height:calc(100% - 8px);border-left:solid 1px rgb(var(--aui-color-n-7));min-width:30px;display:flex;align-items:center;justify-content:center}.multi-search .search-suffix .suffix-wrapper aui-icon:hover{color:rgb(var(--aui-color-blue))}.clear-icon,.search-icon{color:rgb(var(--aui-color-n-4));cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiSearchActionInputComponent, selector: "acl-multi-search-action-input", inputs: ["placeholder", "conditionCreatable", "isEditing", "hidden", "autoScroll", "conditionConfig", "showFootAction", "existingConditions"], outputs: ["completed", "editing", "delete", "search"] }, { kind: "component", type: MultiSearchTagsComponent, selector: "acl-multi-search-tags", inputs: ["placeholder", "conditionCreatable", "conditionConfig", "existingConditions", "showFootAction"], outputs: ["removeCondition", "setConditionEditing", "setConditionDeleting", "search", "completed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     ObservableInput(),
@@ -9329,7 +9272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         MultiSearchTagsComponent,
                         FormsModule,
                         IconComponent,
-                    ], template: "<div\n  class=\"aui-input multi-search\"\n  #multiSearch\n  [ngClass]=\"{\n    'search-focus': focus$$ | async,\n  }\"\n>\n  <!-- \u5DF2\u9009\u62E9\u7C7B\u76EEtags -->\n  <acl-multi-search-tags\n    #tagsRef\n    [ngClass]=\"{\n      'tags-width-with-delete': $any(existingConditions$ | async)?.length,\n      'tags-width': !$any(existingConditions$ | async)?.length,\n    }\"\n    [placeholder]=\"placeholder\"\n    [conditionCreatable]=\"conditionCreatable\"\n    [existingConditions]=\"existingConditions\"\n    [conditionConfig]=\"conditionConfig\"\n    (removeCondition)=\"removeCondition($event)\"\n    (setConditionEditing)=\"setConditionEditing($event)\"\n    (setConditionDeleting)=\"setConditionDeleting($event)\"\n    [showFootAction]=\"showFootAction\"\n    (search)=\"doSearch()\"\n    (completed)=\"complete($event)\"\n  >\n    <!-- \u672B\u5C3E\u8F93\u5165\u6846 -->\n    <acl-multi-search-action-input\n      #inputRef\n      class=\"input-wrapper\"\n      [isEditing]=\"true\"\n      [hidden]=\"addedInputShouldHidden$ | async\"\n      [placeholder]=\"placeholder\"\n      [conditionCreatable]=\"conditionCreatable\"\n      [conditionConfig]=\"conditionConfig\"\n      [existingConditions]=\"existingConditions$ | async\"\n      [autoScroll]=\"autoScroll\"\n      [(ngModel)]=\"addedCondition\"\n      [showFootAction]=\"showFootAction\"\n      (completed)=\"complete($event)\"\n      (delete)=\"setConditionDeleting()\"\n      (search)=\"doSearch()\"\n    ></acl-multi-search-action-input>\n  </acl-multi-search-tags>\n\n  <div class=\"search-suffix\">\n    @if ($any(existingConditions$ | async)?.length) {\n      <div class=\"search-clear\">\n        <aui-icon\n          class=\"tw-text-n-4 tw-cursor-pointer\"\n          [ngClass]=\"CLEAR_ICON_CLASS\"\n          icon=\"xmark_small\"\n          size=\"14\"\n          (click)=\"clearConditions(); doSearch(); $event.stopPropagation()\"\n        ></aui-icon>\n      </div>\n    }\n    @if (searchSuffix) {\n      <div class=\"search-suffix\">\n        <div class=\"suffix-wrapper\">\n          <aui-icon\n            class=\"tw-text-n-4 tw-cursor-pointer\"\n            [ngClass]=\"SEARCH_ICON_CLASS\"\n            icon=\"magnifier\"\n            (click)=\"doSearch(); $event.stopPropagation()\"\n          ></aui-icon>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{min-width:0}.multi-search{min-width:240px;height:max-content;display:flex;align-items:stretch;padding:0;overflow-y:auto}.multi-search .tags-width{width:calc(100% - 30px)}.multi-search .tags-width-with-delete{width:calc(100% - 48px)}.multi-search .search-clear{width:18px;display:flex;align-items:center}.multi-search .search-clear-icon ::ng-deep .aui-icon{border-radius:50%}.multi-search .search-clear-icon ::ng-deep .aui-icon:hover{color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-5))!important}.multi-search .search-suffix{display:flex;text-align:center}.multi-search .search-suffix .suffix-wrapper{margin-top:4px;margin-bottom:4px;height:calc(100% - 8px);border-left:solid 1px rgb(var(--aui-color-n-7));min-width:30px;display:flex;align-items:center;justify-content:center}.multi-search .search-suffix .suffix-wrapper aui-icon:hover{color:rgb(var(--aui-color-blue))}.search-focus{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}\n"] }]
+                    ], template: "<div\n  class=\"aui-input multi-search\"\n  #multiSearch\n  [ngClass]=\"{\n    'search-focus': focus$$ | async,\n  }\"\n>\n  <!-- \u5DF2\u9009\u62E9\u7C7B\u76EEtags -->\n  <acl-multi-search-tags\n    #tagsRef\n    [ngClass]=\"{\n      'tags-width-with-delete': $any(existingConditions$ | async)?.length,\n      'tags-width': !$any(existingConditions$ | async)?.length,\n    }\"\n    [placeholder]=\"placeholder\"\n    [conditionCreatable]=\"conditionCreatable\"\n    [existingConditions]=\"existingConditions\"\n    [conditionConfig]=\"conditionConfig\"\n    (removeCondition)=\"removeCondition($event)\"\n    (setConditionEditing)=\"setConditionEditing($event)\"\n    (setConditionDeleting)=\"setConditionDeleting($event)\"\n    [showFootAction]=\"showFootAction\"\n    (search)=\"doSearch()\"\n    (completed)=\"complete($event)\"\n  >\n    <!-- \u672B\u5C3E\u8F93\u5165\u6846 -->\n    <acl-multi-search-action-input\n      #inputRef\n      class=\"input-wrapper\"\n      [isEditing]=\"true\"\n      [hidden]=\"addedInputShouldHidden$ | async\"\n      [placeholder]=\"placeholder\"\n      [conditionCreatable]=\"conditionCreatable\"\n      [conditionConfig]=\"conditionConfig\"\n      [existingConditions]=\"existingConditions$ | async\"\n      [autoScroll]=\"autoScroll\"\n      [(ngModel)]=\"addedCondition\"\n      [showFootAction]=\"showFootAction\"\n      (completed)=\"complete($event)\"\n      (delete)=\"setConditionDeleting()\"\n      (search)=\"doSearch()\"\n    ></acl-multi-search-action-input>\n  </acl-multi-search-tags>\n\n  <div class=\"search-suffix\">\n    @if ($any(existingConditions$ | async)?.length) {\n      <div class=\"search-clear\">\n        <aui-icon\n          class=\"clear-icon\"\n          [ngClass]=\"CLEAR_ICON_CLASS\"\n          icon=\"xmark_small\"\n          size=\"14\"\n          (click)=\"clearConditions(); doSearch(); $event.stopPropagation()\"\n        ></aui-icon>\n      </div>\n    }\n    @if (searchSuffix) {\n      <div class=\"search-suffix\">\n        <div class=\"suffix-wrapper\">\n          <aui-icon\n            class=\"search-icon\"\n            [ngClass]=\"SEARCH_ICON_CLASS\"\n            icon=\"magnifier\"\n            (click)=\"doSearch(); $event.stopPropagation()\"\n          ></aui-icon>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{min-width:0}.multi-search{min-width:240px;height:max-content;display:flex;align-items:stretch;padding:0;overflow-y:auto}.multi-search .tags-width{width:calc(100% - 30px)}.multi-search .tags-width-with-delete{width:calc(100% - 48px)}.multi-search .search-clear{width:18px;display:flex;align-items:center}.multi-search .search-clear-icon ::ng-deep .aui-icon{border-radius:50%}.multi-search .search-clear-icon ::ng-deep .aui-icon:hover{color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-5))!important}.multi-search .search-suffix{display:flex;text-align:center}.multi-search .search-suffix .suffix-wrapper{margin-top:4px;margin-bottom:4px;height:calc(100% - 8px);border-left:solid 1px rgb(var(--aui-color-n-7));min-width:30px;display:flex;align-items:center;justify-content:center}.multi-search .search-suffix .suffix-wrapper aui-icon:hover{color:rgb(var(--aui-color-blue))}.clear-icon,.search-icon{color:rgb(var(--aui-color-n-4));cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
             }], conditionCreatable: [{
@@ -9342,7 +9285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], searchSuffix: [{
                 type: Input
-            }], searchEvent: [{
+            }], search: [{
                 type: Output
             }], showFootAction: [{
                 type: Input
@@ -9359,22 +9302,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: ['multiSearch', { static: true }]
             }] } });
 
-const removeSuffix = (str) => str.replace('-resize', '');
-/** 如果cursor存在类似 n-resize、ne-resize，都代表是top 方向 */
-const isT = (cursor) => removeSuffix(cursor).includes('n');
-/** 是否是right */
-const isR = (cursor) => removeSuffix(cursor).includes('e');
-/** 是否是bottom */
-const isB = (cursor) => removeSuffix(cursor).includes('s');
-/** 是否是left */
-const isL = (cursor) => removeSuffix(cursor).includes('w');
-const toPx = (num) => num + 'px';
-const toPercent = (num, base = 1) => num * base + '%';
-const toNumber = (str) => {
-    const p = parseFloat(str);
-    return isNaN(p) ? 0 : p;
-};
-
 /**
  * To judge whether the parent element
  */
@@ -9397,6 +9324,22 @@ function coerceElement(elementOrRef) {
         : elementOrRef;
 }
 
+const removeSuffix = (str) => str.replace('-resize', '');
+/** 如果cursor存在类似 n-resize、ne-resize，都代表是top 方向 */
+const isT = (cursor) => removeSuffix(cursor).includes('n');
+/** 是否是right */
+const isR = (cursor) => removeSuffix(cursor).includes('e');
+/** 是否是bottom */
+const isB = (cursor) => removeSuffix(cursor).includes('s');
+/** 是否是left */
+const isL = (cursor) => removeSuffix(cursor).includes('w');
+const toPx = (num) => num + 'px';
+const toPercent = (num, base = 1) => num * base + '%';
+const toNumber = (str) => {
+    const p = parseFloat(str);
+    return isNaN(p) ? 0 : p;
+};
+
 const MUTABLE_BASIC_OPTIONS = {
     directions: [true, true, true, true],
     resizeThreshold: 5,
@@ -9891,8 +9834,8 @@ class K8SResourceListFooterComponent extends ScrollBorderObserverDirective {
         this.bottomDistance = 60;
         this.window = window;
         this.image = [
-            'assets/images/light/no-data-for-list-or-card.svg',
-            'assets/images/dark/no-data-for-list-or-card.svg',
+            '/console-assets/images/light/no-data-for-list-or-card.svg',
+            '/console-assets/images/dark/no-data-for-list-or-card.svg',
         ];
         this.translate = inject(TranslateService);
         this.option = this.autoLoad ? '' : false;
@@ -10483,11 +10426,26 @@ const DEFAULT_PAGE_SIZE = 10;
 const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
 const DEFAULT_PAGINATION_LAYOUT = 'total,pager,sizes,jumper';
 
+class TableHeaderCellDefDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableHeaderCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TableHeaderCellDefDirective, isStandalone: true, selector: "[aclTableHeaderCellDef]", inputs: { aclTableHeaderCellDef: "aclTableHeaderCellDef" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableHeaderCellDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[aclTableHeaderCellDef]',
+                }]
+        }], propDecorators: { aclTableHeaderCellDef: [{
+                type: Input
+            }] } });
 class TableCellDefDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    constructor() {
+        this.templateRef = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableCellDefDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TableCellDefDirective, isStandalone: true, selector: "[aclTableCellDef]", inputs: { aclTableCellDef: "aclTableCellDef" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableCellDefDirective, decorators: [{
@@ -10496,7 +10454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     selector: '[aclTableCellDef]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { aclTableCellDef: [{
+        }], propDecorators: { aclTableCellDef: [{
                 type: Input
             }] } });
 
@@ -10517,8 +10475,8 @@ function defaultSorter(a, b) {
 
 const KNOWN_COLUMNS = new Set([NAME, CREATOR, CREATED_AT]);
 class TableUtilService {
-    constructor(k8sUtil) {
-        this.k8sUtil = k8sUtil;
+    constructor() {
+        this.k8sUtil = inject(K8sUtilService);
         this.getValueFromPath = this.getValueFromPath.bind(this);
         this.defaultFilterFn = this.defaultFilterFn.bind(this);
     }
@@ -10542,6 +10500,11 @@ class TableUtilService {
                     ? this.k8sUtil.getName(item)
                     : get(item, NAME);
             }
+            case NAMESPACE$1: {
+                return isK8s
+                    ? this.k8sUtil.getNamespace(item)
+                    : get(item, NAMESPACE$1);
+            }
             case CREATOR: {
                 return isK8s
                     ? this.k8sUtil.getCreator(item)
@@ -10554,7 +10517,6 @@ class TableUtilService {
             }
         }
     }
-    // eslint-disable-next-line sonarjs/cognitive-complexity
     defaultFilterFn(items, columnDefs, activeSort, filterParams, context) {
         context = context ?? this;
         if (items && filterParams) {
@@ -10576,7 +10538,7 @@ class TableUtilService {
         }
         return items;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableUtilService, deps: [{ token: K8sUtilService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableUtilService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableUtilService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableUtilService, decorators: [{
@@ -10584,10 +10546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [K8sUtilService]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class TableComponent {
     get finalContext() {
@@ -10779,7 +10738,7 @@ class TableComponent {
             : functionOrValue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableComponent, isStandalone: true, selector: "acl-table", inputs: { list: "list", dataSource: "dataSource", resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", sticky: "sticky", permissions: "permissions", columns: "columns", filterParams: "filterParams", context: "context", filterFn: "filterFn", trackBy: "trackBy", noDataHint: "noDataHint", loadingErrorTemplate: "loadingErrorTemplate", enablePagination: "enablePagination", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", paginationLayout: "paginationLayout", firstScrollLoad: "firstScrollLoad" }, outputs: { update: "update", delete: "delete", sortChange: "sortChange" }, host: { properties: { "class.aui-table__scroll-wrapper": "this.scrollWrapper", "style.max-height": "this.scrollWrapperHeight" } }, queries: [{ propertyName: "tableCellDefs", predicate: TableCellDefDirective }], ngImport: i0, template: "<aui-table\n  auiSort\n  [active]=\"(activeSort$ | async)?.active\"\n  [direction]=\"(activeSort$ | async)?.direction\"\n  [dataSource]=\"pagedItems$\"\n  [trackBy]=\"trackBy\"\n  (sortChange)=\"onSortChange($event)\"\n  [auiTableScrollable]=\"!!sticky\"\n>\n  @for (\n    columnDef of columnDefs$ | async;\n    track trackByName($index, columnDef)\n  ) {\n    <ng-container\n      [auiTableColumnDef]=\"columnDef.name\"\n      [sticky]=\"columnDef.sticky\"\n      [stickyEnd]=\"columnDef.stickyEnd\"\n    >\n      <aui-table-header-cell\n        *auiTableHeaderCellDef\n        [style]=\"columnDef.style\"\n      >\n        @if (columnDef.name !== ACTION) {\n          @if (columnDef.sort) {\n            <span\n              aui-sort-header\n              [start]=\"columnDef.sort.direction\"\n              >{{ columnDef.label || columnDef.name | translate }}</span\n            >\n          }\n          @if (!columnDef.sort) {\n            <span>{{ columnDef.label || columnDef.name | translate }}</span>\n          }\n        }\n      </aui-table-header-cell>\n      <aui-table-cell\n        *auiTableCellDef=\"\n          let data;\n          let index = index;\n          let even = even;\n          let odd = odd;\n          let last = last\n        \"\n        [direction]=\"columnDef.direction\"\n        [ngClass]=\"columnDef.class\"\n        [style]=\"columnDef.style\"\n      >\n        @if (columnDef.name | pure: getColumnTemplate; as template) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              template;\n              context: {\n                $implicit: data,\n                index: index,\n                even: even,\n                odd: odd,\n                last: last,\n              }\n            \"\n          ></ng-container>\n        } @else {\n          @if (\n            columnDef.path != null &&\n              (data | pure: getValueFromPath : columnDef.name : columnDef.path);\n            as value\n          ) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                tableCellContent;\n                context: { columnDef: columnDef, value: value }\n              \"\n            ></ng-container>\n          } @else {\n            <ng-container\n              *ngTemplateOutlet=\"\n                defaultTableCell;\n                context: { data: data, columnDef: columnDef }\n              \"\n            ></ng-container>\n          }\n        }\n      </aui-table-cell>\n    </ng-container>\n  }\n\n  <aui-table-header-row\n    *auiTableHeaderRowDef=\"columnNames$ | async; sticky: !!sticky\"\n  ></aui-table-header-row>\n  <aui-table-row\n    *auiTableRowDef=\"let row; columns: columnNames$ | async\"\n  ></aui-table-row>\n\n  <ng-container *auiTablePlaceholderDef>\n    @if (list) {\n      <div\n        [hidden]=\"\n          (pagedItems$ | async)?.length || !(list.items$ | async)?.length\n        \"\n        class=\"empty-placeholder\"\n      >\n        @if (finalResourceName$ | async; as finalResourceName) {\n          {{\n            'no_named_data_hint'\n              | translate\n                : {\n                    name:\n                      resourceNameTranslated || (finalResourceName | translate),\n                  }\n          }}\n        } @else {\n          {{ 'no_data' | translate }}\n        }\n      </div>\n      <acl-k8s-resource-list-footer\n        [hidden]=\"\n          !(pagedItems$ | async)?.length && (list.items$ | async)?.length\n        \"\n        [list]=\"list\"\n        [resourceName]=\"finalResourceName$ | async\"\n        [resourceNameTranslated]=\"resourceNameTranslated\"\n        [firstScrollLoad]=\"firstScrollLoad\"\n      >\n        @if (loadingErrorTemplate) {\n          <ng-container\n            *aclK8sListFooterLoadingError\n            [ngTemplateOutlet]=\"loadingErrorTemplate\"\n          ></ng-container>\n        }\n      </acl-k8s-resource-list-footer>\n    }\n    @if (!list && !(pagedItems$ | async)?.length) {\n      <div class=\"empty-placeholder\">\n        @if (finalDataSource$ | async) {\n          {{\n            noDataHint ||\n              ('no_named_data_hint'\n                | translate\n                  : {\n                      name:\n                        resourceNameTranslated || (resourceName | translate),\n                    })\n          }}\n        } @else {\n          <aui-icon\n            class=\"acl-loading-mask__icon\"\n            size=\"16px\"\n            icon=\"spinner\"\n          ></aui-icon>\n          {{ 'loading_please_wait' | translate }}\n        }\n      </div>\n    }\n  </ng-container>\n</aui-table>\n\n@if (enablePagination) {\n  <aui-paginator\n    [layout]=\"paginationLayout\"\n    [currentPage]=\"currentPage$ | async\"\n    [pageSize]=\"pageSize$ | async\"\n    [total]=\"pagination.total\"\n    (currentPageChange)=\"currentPage$.next($event)\"\n    (pageSizeChange)=\"pageSize$.next($event)\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n  ></aui-paginator>\n}\n\n<ng-template\n  #defaultTableCell\n  let-data=\"data\"\n  let-columnDef=\"columnDef\"\n>\n  @switch (columnDef.name) {\n    @case (NAME) {\n      @if (data | pure: getValueFromPath : columnDef.name; as name) {\n        <div class=\"aui-table__cell__name\">\n          @if (columnDef.extra?.link !== false && !(data | aclIsDeleting)) {\n            <a\n              [routerLink]=\"[\n                (isListPage$ | async) ? '..' : '.',\n                'detail',\n                name,\n              ]\"\n              [auiTooltip]=\"name\"\n            >\n              {{ name }}\n            </a>\n          } @else {\n            <span\n              [auiTooltip]=\"name\"\n              [class.deleting-text]=\"data | aclIsDeleting\"\n              >{{ name }}</span\n            >\n          }\n          @if (data | pure: isK8sResource) {\n            <acl-deleting-tag [resource]=\"data\"></acl-deleting-tag>\n          }\n        </div>\n      }\n      @if (\n        (data | pure: isK8sResource)\n          ? (data | aclDisplayName)\n          : data.displayName;\n        as displayName\n      ) {\n        <div\n          class=\"aui-table__cell__display-name\"\n          [class.deleting-text]=\"data | aclIsDeleting\"\n        >\n          {{ displayName }}\n        </div>\n      }\n    }\n    @case (CREATED_AT) {\n      <acl-relative-time\n        [time]=\"data | pure: getValueFromPath : columnDef.name\"\n      ></acl-relative-time>\n    }\n    @case (ACTION) {\n      <button\n        aui-button=\"text\"\n        [square]=\"true\"\n        size=\"small\"\n        [auiDropdown]=\"menu\"\n        [auiDropdownContext]=\"{ $implicit: data, columnDef: columnDef }\"\n      >\n        <aui-icon icon=\"ellipsis_v_s\"></aui-icon>\n      </button>\n    }\n    @default {\n      @if (data | pure: getValueFromPath : columnDef.name; as value) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            tableCellContent;\n            context: { columnDef: columnDef, value: value }\n          \"\n        ></ng-container>\n      } @else {\n        {{ null | aclFieldNotAvailable }}\n      }\n    }\n  }\n</ng-template>\n\n<ng-template\n  #tableCellContent\n  let-columnDef=\"columnDef\"\n  let-value=\"value\"\n>\n  @if (\n    columnDef.translate == null\n      ? value\n      : columnDef.translate === true\n        ? (value | translate)\n        : (value | pure: columnDef.translate : finalContext | translate);\n    as text\n  ) {\n    @if (columnDef.ellipsis) {\n      <div\n        class=\"text-overflow\"\n        [auiTooltip]=\"text\"\n      >\n        {{ text }}\n      </div>\n    } @else {\n      {{ text }}\n    }\n  } @else {\n    {{ null | aclFieldNotAvailable }}\n  }\n</ng-template>\n\n<ng-template\n  #menu\n  let-data\n  let-columnDef=\"columnDef\"\n  ><aui-menu>\n    @if (columnDef.extra?.update !== false) {\n      <acl-disabled-container\n        [isAllowed]=\"!permissions || permissions.update\"\n        [isDisabled]=\"\n          (columnDef.extra?.update?.disabled.handler | pure: isFunction) &&\n          (data | pure: columnDef.extra.update.disabled.handler : finalContext)\n        \"\n        [tooltip]=\"\n          columnDef.extra?.update?.disabled.tooltip\n            | pure: getValue : data : finalContext\n            | translate\n        \"\n        (click)=\"onUpdate(data, columnDef)\"\n      >\n        <aui-menu-item>{{ 'update' | translate }}</aui-menu-item>\n      </acl-disabled-container>\n    }\n    @if (columnDef.extra?.delete !== false) {\n      <acl-disabled-container\n        [isAllowed]=\"!permissions || permissions.delete\"\n        [isDisabled]=\"\n          (columnDef.extra?.delete?.disabled.handler | pure: isFunction) &&\n          (data | pure: columnDef.extra.delete.disabled.handler : finalContext)\n        \"\n        [tooltip]=\"\n          columnDef.extra?.delete?.disabled.tooltip\n            | pure: getValue : data : finalContext\n            | translate\n        \"\n        (click)=\"delete.emit(data)\"\n      >\n        <aui-menu-item>{{ 'delete' | translate }}</aui-menu-item>\n      </acl-disabled-container>\n    }\n  </aui-menu></ng-template\n>\n", styles: [".deleting-text{color:rgb(var(--aui-color-disabled-text))}:host{display:block}:host.aui-table__scroll-wrapper{display:flex}:host ::ng-deep+acl-table{margin-top:12px}html:not([lang|=zh]) :host ::ng-deep .aui-table__column-created_at{flex:0 0 140px}\n"], dependencies: [{ kind: "component", type: i1.TableComponent, selector: "aui-table", inputs: ["enableScrollWrapper"], exportAs: ["auiTable"] }, { kind: "component", type: i1.TableRowComponent, selector: "aui-table-row", inputs: ["disabled"], exportAs: ["auiTableRow"] }, { kind: "component", type: i1.TableHeaderRowComponent, selector: "aui-table-header-row", exportAs: ["auiTableHeaderRow"] }, { kind: "directive", type: i1.TableCellDirective, selector: "aui-table-cell", inputs: ["direction"] }, { kind: "directive", type: i1.TableCellDefDirective, selector: "[auiTableCellDef]" }, { kind: "directive", type: i1.TableHeaderCellDirective, selector: "aui-table-header-cell" }, { kind: "directive", type: i1.TableRowDefDirective, selector: "[auiTableRowDef]", inputs: ["auiTableRowDefColumns", "auiTableRowDefWhen"] }, { kind: "directive", type: i1.TableHeaderRowDefDirective, selector: "[auiTableHeaderRowDef]", inputs: ["auiTableHeaderRowDef", "auiTableHeaderRowDefSticky"] }, { kind: "directive", type: i1.TableHeaderCellDefDirective, selector: "[auiTableHeaderCellDef]" }, { kind: "directive", type: i1.TableColumnDefDirective, selector: "[auiTableColumnDef]", inputs: ["sticky", "auiTableColumnDef"] }, { kind: "directive", type: i1.TablePlaceholderDefDirective, selector: "ng-template[auiTablePlaceholderDef]" }, { kind: "directive", type: i1.TableScrollableDirective, selector: "[auiTableScrollable]", inputs: ["auiTableScrollable"] }, { kind: "directive", type: SortDirective, selector: "[auiSort]", inputs: ["active", "start", "direction"], outputs: ["sortChange"], exportAs: ["auiSort"] }, { kind: "component", type: SortHeaderComponent, selector: "[aui-sort-header]", inputs: ["aui-sort-header", "start"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: K8SResourceListFooterComponent, selector: "acl-k8s-resource-list-footer", inputs: ["list", "autoLoad", "backTop", "bottomDistance", "resourceNameTranslated", "firstScrollLoad", "resourceName"] }, { kind: "component", type: PaginatorComponent, selector: "aui-paginator", inputs: ["pageIndex", "currentPage", "pageSize", "pageSizeOptions", "total", "layout", "disabled"], outputs: ["pageIndexChange", "currentPageChange", "pageSizeChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: DeletingTagComponent, selector: "acl-deleting-tag", inputs: ["resource"] }, { kind: "component", type: RelativeTimeComponent, selector: "acl-relative-time", inputs: ["time"] }, { kind: "directive", type: i1.DropdownDirective, selector: "[auiDropdown]", inputs: ["auiDropdownClass", "auiDropdownDisabled", "auiDropdownPosition", "auiDropdownTrigger", "auiDropdownContext", "auiDropdown", "auiDropdownHideOnClick"], outputs: ["auiDropdownVisibleChange"], exportAs: ["auiDropdown"] }, { kind: "component", type: i1.MenuComponent, selector: "aui-menu", inputs: ["size"] }, { kind: "component", type: i1.MenuItemComponent, selector: "aui-menu-item", inputs: ["disabled", "divide", "type", "actived"] }, { kind: "component", type: DisabledContainerComponent, selector: "acl-disabled-container", inputs: ["tooltip", "tooltipPosition", "tooltipType", "isAllowed", "isDisabled"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "directive", type: K8sListFooterLoadingErrorDirective, selector: "[aclK8sListFooterLoadingError]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: i2$1.K8sDisplayNamePipe, name: "aclDisplayName" }, { kind: "pipe", type: i2$1.K8sIsDeletingPipe, name: "aclIsDeleting" }, { kind: "pipe", type: FieldNotAvailablePipe, name: "aclFieldNotAvailable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableComponent, isStandalone: true, selector: "acl-table", inputs: { list: "list", dataSource: "dataSource", resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", sticky: "sticky", permissions: "permissions", columns: "columns", filterParams: "filterParams", context: "context", filterFn: "filterFn", trackBy: "trackBy", noDataHint: "noDataHint", loadingErrorTemplate: "loadingErrorTemplate", enablePagination: "enablePagination", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", paginationLayout: "paginationLayout", firstScrollLoad: "firstScrollLoad" }, outputs: { update: "update", delete: "delete", sortChange: "sortChange" }, host: { properties: { "class.aui-table__scroll-wrapper": "this.scrollWrapper", "style.max-height": "this.scrollWrapperHeight" } }, queries: [{ propertyName: "tableCellDefs", predicate: TableCellDefDirective }], ngImport: i0, template: "<aui-table\n  auiSort\n  [active]=\"(activeSort$ | async)?.active\"\n  [direction]=\"(activeSort$ | async)?.direction\"\n  [dataSource]=\"pagedItems$\"\n  [trackBy]=\"trackBy\"\n  (sortChange)=\"onSortChange($event)\"\n  [auiTableScrollable]=\"!!sticky\"\n>\n  @for (\n    columnDef of columnDefs$ | async;\n    track trackByName($index, columnDef)\n  ) {\n    <ng-container\n      [auiTableColumnDef]=\"columnDef.name\"\n      [sticky]=\"columnDef.sticky\"\n      [stickyEnd]=\"columnDef.stickyEnd\"\n    >\n      <aui-table-header-cell\n        *auiTableHeaderCellDef\n        [style]=\"columnDef.style\"\n      >\n        @if (columnDef.name !== ACTION) {\n          @if (columnDef.sort) {\n            <span\n              aui-sort-header\n              [start]=\"columnDef.sort.direction\"\n              >{{ columnDef.label || columnDef.name | translate }}</span\n            >\n          }\n          @if (!columnDef.sort) {\n            <span>{{ columnDef.label || columnDef.name | translate }}</span>\n          }\n        }\n      </aui-table-header-cell>\n      <aui-table-cell\n        *auiTableCellDef=\"\n          let data;\n          let index = index;\n          let even = even;\n          let odd = odd;\n          let last = last\n        \"\n        [direction]=\"columnDef.direction\"\n        [ngClass]=\"columnDef.class\"\n        [style]=\"columnDef.style\"\n      >\n        @if (columnDef.name | pure: getColumnTemplate; as template) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              template;\n              context: {\n                $implicit: data,\n                index: index,\n                even: even,\n                odd: odd,\n                last: last,\n              }\n            \"\n          ></ng-container>\n        } @else {\n          @if (\n            columnDef.path != null &&\n              (data | pure: getValueFromPath : columnDef.name : columnDef.path);\n            as value\n          ) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                tableCellContent;\n                context: { columnDef: columnDef, value: value }\n              \"\n            ></ng-container>\n          } @else {\n            <ng-container\n              *ngTemplateOutlet=\"\n                defaultTableCell;\n                context: { data: data, columnDef: columnDef }\n              \"\n            ></ng-container>\n          }\n        }\n      </aui-table-cell>\n    </ng-container>\n  }\n\n  <aui-table-header-row\n    *auiTableHeaderRowDef=\"columnNames$ | async; sticky: !!sticky\"\n  ></aui-table-header-row>\n  <aui-table-row\n    *auiTableRowDef=\"let row; columns: columnNames$ | async\"\n  ></aui-table-row>\n\n  <ng-container *auiTablePlaceholderDef>\n    @if (list) {\n      <div\n        [hidden]=\"\n          (pagedItems$ | async)?.length || !(list.items$ | async)?.length\n        \"\n        class=\"empty-placeholder\"\n      >\n        @if (finalResourceName$ | async; as finalResourceName) {\n          {{\n            'no_named_data_hint'\n              | translate\n                : {\n                    name:\n                      resourceNameTranslated || (finalResourceName | translate),\n                  }\n          }}\n        } @else {\n          {{ 'no_data' | translate }}\n        }\n      </div>\n      <acl-k8s-resource-list-footer\n        [hidden]=\"\n          !(pagedItems$ | async)?.length && (list.items$ | async)?.length\n        \"\n        [list]=\"list\"\n        [resourceName]=\"finalResourceName$ | async\"\n        [resourceNameTranslated]=\"resourceNameTranslated\"\n        [firstScrollLoad]=\"firstScrollLoad\"\n      >\n        @if (loadingErrorTemplate) {\n          <ng-container\n            *aclK8sListFooterLoadingError\n            [ngTemplateOutlet]=\"loadingErrorTemplate\"\n          ></ng-container>\n        }\n      </acl-k8s-resource-list-footer>\n    }\n    @if (!list && !(pagedItems$ | async)?.length) {\n      <div class=\"empty-placeholder\">\n        @if (finalDataSource$ | async) {\n          {{\n            noDataHint ||\n              ('no_named_data_hint'\n                | translate\n                  : {\n                      name:\n                        resourceNameTranslated || (resourceName | translate),\n                    })\n          }}\n        } @else {\n          <aui-icon\n            class=\"acl-loading-mask__icon\"\n            size=\"16px\"\n            icon=\"spinner\"\n          ></aui-icon>\n          {{ 'loading_please_wait' | translate }}\n        }\n      </div>\n    }\n  </ng-container>\n</aui-table>\n\n@if (enablePagination) {\n  <aui-paginator\n    [layout]=\"paginationLayout\"\n    [currentPage]=\"currentPage$ | async\"\n    [pageSize]=\"pageSize$ | async\"\n    [total]=\"pagination.total\"\n    (currentPageChange)=\"currentPage$.next($event)\"\n    (pageSizeChange)=\"pageSize$.next($event)\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n  ></aui-paginator>\n}\n\n<ng-template\n  #defaultTableCell\n  let-data=\"data\"\n  let-columnDef=\"columnDef\"\n>\n  @switch (columnDef.name) {\n    @case (NAME) {\n      @if (data | pure: getValueFromPath : columnDef.name; as name) {\n        <div class=\"aui-table__cell__name\">\n          @if (columnDef.extra?.link !== false && !(data | aclIsDeleting)) {\n            <a\n              [routerLink]=\"[\n                (isListPage$ | async) ? '..' : '.',\n                'detail',\n                name,\n              ]\"\n              [auiTooltip]=\"name\"\n            >\n              {{ name }}\n            </a>\n          } @else {\n            <span\n              [auiTooltip]=\"name\"\n              [class.deleting-text]=\"data | aclIsDeleting\"\n              >{{ name }}</span\n            >\n          }\n          @if (data | pure: isK8sResource) {\n            <acl-deleting-tag [resource]=\"data\"></acl-deleting-tag>\n          }\n        </div>\n      }\n      @if (\n        (data | pure: isK8sResource)\n          ? (data | aclDisplayName)\n          : data.displayName;\n        as displayName\n      ) {\n        <div\n          class=\"aui-table__cell__display-name\"\n          [class.deleting-text]=\"data | aclIsDeleting\"\n        >\n          {{ displayName }}\n        </div>\n      }\n    }\n    @case (CREATED_AT) {\n      <acl-relative-time\n        [time]=\"data | pure: getValueFromPath : columnDef.name\"\n      ></acl-relative-time>\n    }\n    @case (ACTION) {\n      <button\n        aui-button=\"text\"\n        [square]=\"true\"\n        size=\"small\"\n        [auiDropdown]=\"menu\"\n        [auiDropdownContext]=\"{ $implicit: data, columnDef: columnDef }\"\n      >\n        <aui-icon icon=\"ellipsis_v_s\"></aui-icon>\n      </button>\n    }\n    @default {\n      @if (data | pure: getValueFromPath : columnDef.name; as value) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            tableCellContent;\n            context: { columnDef: columnDef, value: value }\n          \"\n        ></ng-container>\n      } @else {\n        {{ null | aclFieldNotAvailable }}\n      }\n    }\n  }\n</ng-template>\n\n<ng-template\n  #tableCellContent\n  let-columnDef=\"columnDef\"\n  let-value=\"value\"\n>\n  @if (\n    columnDef.translate == null\n      ? value\n      : columnDef.translate === true\n        ? (value | translate)\n        : (value | pure: columnDef.translate : finalContext | translate);\n    as text\n  ) {\n    @if (columnDef.ellipsis) {\n      <div\n        class=\"text-overflow\"\n        [auiTooltip]=\"text\"\n      >\n        {{ text }}\n      </div>\n    } @else {\n      {{ text }}\n    }\n  } @else {\n    {{ null | aclFieldNotAvailable }}\n  }\n</ng-template>\n\n<ng-template\n  #menu\n  let-data\n  let-columnDef=\"columnDef\"\n  ><aui-menu>\n    @if (columnDef.extra?.update !== false) {\n      <acl-disabled-container\n        [isAllowed]=\"!permissions || permissions.update\"\n        [isDisabled]=\"\n          (columnDef.extra?.update?.disabled.handler | pure: isFunction) &&\n          (data | pure: columnDef.extra.update.disabled.handler : finalContext)\n        \"\n        [tooltip]=\"\n          columnDef.extra?.update?.disabled.tooltip\n            | pure: getValue : data : finalContext\n            | translate\n        \"\n        (click)=\"onUpdate(data, columnDef)\"\n      >\n        <aui-menu-item>{{ 'update' | translate }}</aui-menu-item>\n      </acl-disabled-container>\n    }\n    @if (columnDef.extra?.delete !== false) {\n      <acl-disabled-container\n        [isAllowed]=\"!permissions || permissions.delete\"\n        [isDisabled]=\"\n          (columnDef.extra?.delete?.disabled.handler | pure: isFunction) &&\n          (data | pure: columnDef.extra.delete.disabled.handler : finalContext)\n        \"\n        [tooltip]=\"\n          columnDef.extra?.delete?.disabled.tooltip\n            | pure: getValue : data : finalContext\n            | translate\n        \"\n        (click)=\"delete.emit(data)\"\n      >\n        <aui-menu-item>{{ 'delete' | translate }}</aui-menu-item>\n      </acl-disabled-container>\n    }\n  </aui-menu></ng-template\n>\n", styles: [".deleting-text{color:rgb(var(--aui-color-disabled-text))}:host{display:block}:host.aui-table__scroll-wrapper{display:flex}:host ::ng-deep+acl-table{margin-top:12px}html:not([lang|=zh]) :host ::ng-deep .aui-table__column-created_at{flex:0 0 140px}\n"], dependencies: [{ kind: "component", type: i1.TableComponent, selector: "aui-table", inputs: ["enableScrollWrapper"], exportAs: ["auiTable"] }, { kind: "component", type: i1.TableRowComponent, selector: "aui-table-row", inputs: ["disabled"], exportAs: ["auiTableRow"] }, { kind: "component", type: i1.TableHeaderRowComponent, selector: "aui-table-header-row", exportAs: ["auiTableHeaderRow"] }, { kind: "directive", type: i1.TableCellDirective, selector: "aui-table-cell", inputs: ["direction"] }, { kind: "directive", type: i1.TableCellDefDirective, selector: "[auiTableCellDef]" }, { kind: "directive", type: i1.TableHeaderCellDirective, selector: "aui-table-header-cell" }, { kind: "directive", type: i1.TableRowDefDirective, selector: "[auiTableRowDef]", inputs: ["auiTableRowDefColumns", "auiTableRowDefWhen"] }, { kind: "directive", type: i1.TableHeaderRowDefDirective, selector: "[auiTableHeaderRowDef]", inputs: ["auiTableHeaderRowDef", "auiTableHeaderRowDefSticky"] }, { kind: "directive", type: i1.TableHeaderCellDefDirective, selector: "[auiTableHeaderCellDef]" }, { kind: "directive", type: i1.TableColumnDefDirective, selector: "[auiTableColumnDef]", inputs: ["sticky", "auiTableColumnDef"] }, { kind: "directive", type: i1.TablePlaceholderDefDirective, selector: "ng-template[auiTablePlaceholderDef]" }, { kind: "directive", type: i1.TableScrollableDirective, selector: "[auiTableScrollable]", inputs: ["auiTableScrollable"] }, { kind: "directive", type: SortDirective, selector: "[auiSort]", inputs: ["active", "start", "direction"], outputs: ["sortChange"], exportAs: ["auiSort"] }, { kind: "component", type: SortHeaderComponent, selector: "[aui-sort-header]", inputs: ["aui-sort-header", "start"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: K8SResourceListFooterComponent, selector: "acl-k8s-resource-list-footer", inputs: ["list", "autoLoad", "backTop", "bottomDistance", "resourceNameTranslated", "firstScrollLoad", "resourceName"] }, { kind: "component", type: PaginatorComponent, selector: "aui-paginator", inputs: ["pageIndex", "currentPage", "pageSize", "pageSizeOptions", "total", "layout", "disabled"], outputs: ["pageIndexChange", "currentPageChange", "pageSizeChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: DeletingTagComponent, selector: "acl-deleting-tag", inputs: ["resource"] }, { kind: "component", type: RelativeTimeComponent, selector: "acl-relative-time", inputs: ["time"] }, { kind: "directive", type: i1.DropdownDirective, selector: "[auiDropdown]", inputs: ["auiDropdownClass", "auiDropdownDisabled", "auiDropdownPosition", "auiDropdownTrigger", "auiDropdownContext", "auiDropdown", "auiDropdownHideOnClick"], outputs: ["auiDropdownVisibleChange"], exportAs: ["auiDropdown"] }, { kind: "component", type: i1.MenuComponent, selector: "aui-menu", inputs: ["size"] }, { kind: "component", type: i1.MenuItemComponent, selector: "aui-menu-item", inputs: ["disabled", "divide", "type", "actived"] }, { kind: "component", type: DisabledContainerComponent, selector: "acl-disabled-container", inputs: ["tooltip", "tooltipPosition", "tooltipType", "isAllowed", "isDisabled"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "directive", type: K8sListFooterLoadingErrorDirective, selector: "[aclK8sListFooterLoadingError]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: i3.K8sDisplayNamePipe, name: "aclDisplayName" }, { kind: "pipe", type: i3.K8sIsDeletingPipe, name: "aclIsDeleting" }, { kind: "pipe", type: FieldNotAvailablePipe, name: "aclFieldNotAvailable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     ObservableInput(),
@@ -10885,11 +10844,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
 
 class NamespaceBadgeComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NamespaceBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: NamespaceBadgeComponent, isStandalone: true, selector: "acl-namespace-badge", inputs: { name: "name" }, ngImport: i0, template: "<div>\n  <aui-icon\n    icon=\"prod:namespace\"\n    class=\"tw-mr-4\"\n  ></aui-icon>\n  <span\n    class=\"text-truncate\"\n    [attr.title]=\"name\"\n    >{{ name }}</span\n  >\n</div>\n", styles: [":host{display:flex;max-width:220px}.with-colon{display:inline-flex;word-break:keep-all;flex-shrink:0;font-weight:500}.with-colon:after{content:\":\";margin-right:8px}.text-truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: NamespaceBadgeComponent, isStandalone: true, selector: "acl-namespace-badge", inputs: { name: "name" }, ngImport: i0, template: "<div>\n  <aui-icon\n    icon=\"prod:namespace\"\n    class=\"icon\"\n  ></aui-icon>\n  <span\n    class=\"text-truncate\"\n    [attr.title]=\"name\"\n    >{{ name }}</span\n  >\n</div>\n", styles: [":host{display:flex;max-width:220px}.with-colon{display:inline-flex;word-break:keep-all;flex-shrink:0;font-weight:500}.with-colon:after{content:\":\";margin-right:8px}.icon{margin-right:4px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NamespaceBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'acl-namespace-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent], template: "<div>\n  <aui-icon\n    icon=\"prod:namespace\"\n    class=\"tw-mr-4\"\n  ></aui-icon>\n  <span\n    class=\"text-truncate\"\n    [attr.title]=\"name\"\n    >{{ name }}</span\n  >\n</div>\n", styles: [":host{display:flex;max-width:220px}.with-colon{display:inline-flex;word-break:keep-all;flex-shrink:0;font-weight:500}.with-colon:after{content:\":\";margin-right:8px}.text-truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
+            args: [{ selector: 'acl-namespace-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent], template: "<div>\n  <aui-icon\n    icon=\"prod:namespace\"\n    class=\"icon\"\n  ></aui-icon>\n  <span\n    class=\"text-truncate\"\n    [attr.title]=\"name\"\n    >{{ name }}</span\n  >\n</div>\n", styles: [":host{display:flex;max-width:220px}.with-colon{display:inline-flex;word-break:keep-all;flex-shrink:0;font-weight:500}.with-colon:after{content:\":\";margin-right:8px}.icon{margin-right:4px}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }] } });
@@ -10968,9 +10927,10 @@ class AclTableVirtualComponent {
         this.height = '400px';
         this.trackBy = (index) => index;
         this.placeholderActive = false;
+        this.checked$ = new Subject();
         this.destroy$ = new Subject();
     }
-    ngAfterViewInit() {
+    ngAfterViewChecked() {
         // 如果有虚拟滚动视口，优先监听其滚动；否则退回到外层容器滚动。
         const container = this.scrollContainerRef?.nativeElement;
         const viewportEl = this.viewport?.elementRef?.nativeElement ?? null;
@@ -10978,17 +10938,26 @@ class AclTableVirtualComponent {
             fromEvent(viewportEl ?? container, 'scroll');
         const containerScrolled$ = fromEvent(container, 'scroll');
         const resized$ = fromEvent(window, 'resize');
+        this.checked$.next();
         merge(viewportScrolled$, containerScrolled$, resized$)
-            .pipe(startWith(null), takeUntil(this.destroy$))
+            .pipe(startWith(null), takeUntil(this.checked$))
             .subscribe(() => {
             this.mutateVerticalScroll();
             this.mutateHorizontalScroll();
+            if (this.headerRow && viewportEl) {
+                this.headerRow.nativeElement.scrollLeft = viewportEl.scrollLeft;
+            }
         });
-        // 初始化一次，以便首次渲染即得到正确的阴影状态。
-        this.mutateVerticalScroll();
-        this.mutateHorizontalScroll();
+    }
+    onHeaderRowScroll(ev) {
+        if (!this.viewport) {
+            return;
+        }
+        this.viewport.elementRef.nativeElement.scrollLeft = ev.target.scrollLeft;
     }
     ngOnDestroy() {
+        this.checked$.next();
+        this.checked$.complete();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -11022,13 +10991,17 @@ class AclTableVirtualComponent {
         this.placeClass(scrollLeft < scrollDisX && scrollDisX > 0, 'aui-table__scroll-shadow--before-end');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AclTableVirtualComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AclTableVirtualComponent, isStandalone: true, selector: "acl-table-virtual", inputs: { dataSource: "dataSource", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", height: "height", trackBy: "trackBy", placeholderActive: "placeholderActive" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: AclTableVirtualHeaderDefDirective, descendants: true, read: TemplateRef }, { propertyName: "rowTemplate", first: true, predicate: (AclTableVirtualRowDefDirective), descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: AclTableVirtualPlaceholderDefDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true, static: true }], exportAs: ["aclTableVirtual"], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AclTableVirtualComponent, isStandalone: true, selector: "acl-table-virtual", inputs: { dataSource: "dataSource", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", height: "height", trackBy: "trackBy", placeholderActive: "placeholderActive" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: AclTableVirtualHeaderDefDirective, descendants: true, read: TemplateRef }, { propertyName: "rowTemplate", first: true, predicate: (AclTableVirtualRowDefDirective), descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: AclTableVirtualPlaceholderDefDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "headerRow", first: true, predicate: ["headerRow"], descendants: true }], exportAs: ["aclTableVirtual"], ngImport: i0, template: `
     <div
       #scrollContainer
       class="aui-table aui-table__scroll-shadow"
     >
       @if (headerTemplate) {
-        <div class="aui-table__header-row">
+        <div
+          class="aui-table__header-row"
+          #headerRow
+          (scroll)="onHeaderRowScroll($event)"
+        >
           <ng-template [ngTemplateOutlet]="headerTemplate"></ng-template>
         </div>
       }
@@ -11067,7 +11040,7 @@ class AclTableVirtualComponent {
         </cdk-virtual-scroll-viewport>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.aui-table__body-viewport{display:block}cdk-virtual-scroll-viewport::-webkit-scrollbar{width:8px;height:4px}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}cdk-virtual-scroll-viewport::-webkit-scrollbar-corner{background-color:transparent}.aui-table{position:relative;display:block;padding:0 12px 12px}.aui-table{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-table{background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l)}.aui-table__row,.aui-table__header-row{display:flex;align-items:center}.aui-table__row.hasPanel,.aui-table__header-row.hasPanel{flex-wrap:wrap}.aui-table__header-row+.aui-table__row{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row{position:relative;border-width:1px;border-style:solid;border-color:rgb(var(--aui-color-n-8));border-bottom-width:0;background-color:rgb(var(--aui-color-n-10));padding:0 9px;min-height:58px;box-sizing:content-box}.aui-table__row:first-child{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row:last-of-type{border-bottom-width:1px;min-height:58px;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__row.isDisabled:before{content:\"\";z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(var(--aui-color-n-10));opacity:.7;cursor:not-allowed}.aui-table__header-row{background-color:rgb(var(--aui-color-n-9));padding:0 10px}.aui-table__cell,.aui-table__header-cell{display:flex;align-items:center;flex:1;position:relative}.aui-table__cell{padding:15px 10px;background-color:rgb(var(--aui-color-n-10));overflow:hidden}.aui-table__cell--column{flex-direction:column;justify-content:center;align-items:flex-start}.aui-table__header-cell{padding:12px 10px;font-weight:var(--aui-font-weight-bold);background-color:rgb(var(--aui-color-n-9))}.aui-table__column-expand-button{display:flex;align-items:center;max-width:calc(10px * 2 + var(--aui-icon-size-m))}.aui-table__column-expand-button.aui-table__cell{height:58px}.aui-table__column-expand-button .aui-expand-button{display:inline-flex;justify-content:center;align-items:center;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));border-radius:50%;border:none;cursor:pointer;transition:transform .1s ease-in-out}.aui-table__column-expand-button .aui-expand-button aui-icon{display:flex;justify-content:center;align-items:center;width:var(--aui-icon-size-s);height:var(--aui-icon-size-s);font-size:var(--aui-icon-size-s)}.aui-table__column-expand-button .aui-expand-button:hover{background-color:rgb(var(--aui-color-p-7))}.aui-table__column-expand-button .aui-expand-button:active{background-color:rgb(var(--aui-color-p-5))}.aui-table__column-expand-button .aui-expand-button.isExpanded{transform:rotate(90deg);color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-table__column-expand-button .aui-expand-button.isExpanded:hover{background-color:rgb(var(--aui-color-p-1))}.aui-table__column-expand-button .aui-expand-button.isExpanded:active{background-color:rgb(var(--aui-color-p-0))}.aui-table__column-expand-button .aui-expand-button[disabled],.aui-table__column-expand-button .aui-expand-button.isExpanded[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-table__column-expand-panel{margin-top:-6px}.aui-table__column-expand-panel.aui-table__header-cell{display:none}.aui-table__column-expand-panel.aui-table__cell{width:100%;flex-shrink:0;flex-basis:100%;padding:0 10px;overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel{width:100%;border-radius:var(--aui-border-radius-l);overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel-content.hasBackground{padding:16px;background-color:rgb(var(--aui-color-n-9))}.aui-table-column-resizable__handle{display:block;position:absolute;top:0;bottom:0;right:0;width:5px;color:rgb(var(--aui-color-n-7));cursor:col-resize}.aui-table-column-resizable__handle:after{content:\"\";display:block;margin:12px 0 12px auto;width:1px;height:calc(100% - 24px);background-color:currentcolor}.aui-table-column-resizable__handle:hover{color:rgb(var(--aui-color-primary))}.aui-table-column-resizable__mark-line{display:block;position:absolute;top:0;bottom:0;width:1px;background-color:rgb(var(--aui-color-primary));z-index:9999;cursor:col-resize}.aui-table-column-resizable__overlay{display:block;position:absolute;inset:0;z-index:9000;cursor:col-resize}.aui-table__scroll-wrapper{position:relative;display:flex;flex-direction:column;max-height:100%;overflow:hidden;background-color:rgb(var(--aui-color-n-9));padding:0 12px 12px;border-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper::-webkit-scrollbar{width:8px;height:4px}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-table__scroll-wrapper::-webkit-scrollbar-corner{background-color:transparent}.aui-table__scroll-wrapper .aui-table{padding:0;border-radius:0}.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableTopShadow:before,.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableBottomShadow:after{transform:none;width:100%;left:0}.aui-table__scroll-shadow.aui-table{overflow:auto}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar{width:8px;height:4px}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-corner{background-color:transparent}.aui-table__scroll-shadow.hasTableTopShadow:before{content:\"\";position:sticky;display:block;height:16px;margin:-16px -12px 0;z-index:99;top:28px}:root .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow.hasTableBottomShadow:after{content:\"\";position:sticky;display:block;height:16px;transform:translate3d(0,12px,0);z-index:99;bottom:0;margin:-16px -12px 0}:root .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}html[aui-theme-mode=light] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-9),.75) inset}}html[aui-theme-mode=dark] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-9),.75) inset}.aui-table__scroll-shadow .aui-table__header-row{margin:0;padding:0;align-items:stretch}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:first-of-type{padding-left:20px}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:last-of-type{padding-right:20px}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:first-of-type{border-top-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:last-of-type{border-top-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row{border:none;padding:0;align-items:stretch;min-height:59px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell{border-width:1px 0;border-style:solid;border-color:rgb(var(--aui-color-n-8))}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:first-of-type{border-left-width:1px;padding-left:19px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:last-of-type{border-right-width:1px;padding-right:19px}.aui-table__scroll-shadow .aui-table__row:last-child{min-height:60px}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:first-of-type{border-bottom-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:last-of-type{border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:not(:last-child) .aui-table__cell{border-bottom-width:0}.aui-table__scroll-shadow--has-scroll aui-table-header-cell.aui-table-sticky-border-elem-left .aui-table-column-resizable__handle{transform:translate(-20px)}.aui-table__scroll-shadow--has-scroll .aui-table-column-resizable__mark-line.inStickyBorderElemLeft{transform:translate(-20px)}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{position:absolute;top:0;bottom:-1px;width:20px;transition:box-shadow .3s;content:\"\";pointer-events:none}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{position:absolute;top:0;bottom:-1px;content:\"\";background:linear-gradient(to bottom,rgb(var(--aui-color-n-7)),rgb(var(--aui-color-n-7)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left{padding-right:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after{right:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before{right:10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right{padding-left:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{left:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{left:10px}:root .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):before{background:linear-gradient(to bottom,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}:root .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):before{background:linear-gradient(to bottom,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["acl-table-virtual{display:block;max-width:100%;overflow:hidden}.aui-table__body-viewport{display:block}cdk-virtual-scroll-viewport::-webkit-scrollbar{width:8px;height:4px}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}cdk-virtual-scroll-viewport::-webkit-scrollbar-corner{background-color:transparent}.aui-table{position:relative;display:block;padding:0 12px 12px}.aui-table{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-table{background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l)}.aui-table__row,.aui-table__header-row{display:flex;align-items:center;background-color:rgb(var(--aui-color-n-9));padding:0 10px}.aui-table__row.hasPanel,.aui-table__header-row.hasPanel{flex-wrap:wrap}.aui-table__header-row+.aui-table__row{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row{position:relative;border-width:1px;border-style:solid;border-color:rgb(var(--aui-color-n-8));border-bottom-width:0;background-color:rgb(var(--aui-color-n-10));padding:0 9px;min-height:58px;box-sizing:content-box}.aui-table__row:first-child{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row:last-of-type{border-bottom-width:1px;min-height:58px;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__row.isDisabled:before{content:\"\";z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(var(--aui-color-n-10));opacity:.7;cursor:not-allowed}.aui-table__cell,.aui-table__header-cell{display:flex;align-items:center;flex:1;position:relative}.aui-table__cell{padding:15px 10px;background-color:rgb(var(--aui-color-n-10));overflow:hidden}.aui-table__cell--column{flex-direction:column;justify-content:center;align-items:flex-start}.aui-table__header-cell{padding:12px 10px;font-weight:var(--aui-font-weight-bold);background-color:rgb(var(--aui-color-n-9))}.aui-table__column-expand-button{display:flex;align-items:center;max-width:calc(10px * 2 + var(--aui-icon-size-m))}.aui-table__column-expand-button.aui-table__cell{height:58px}.aui-table__column-expand-button .aui-expand-button{display:inline-flex;justify-content:center;align-items:center;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));border-radius:50%;border:none;cursor:pointer;transition:transform .1s ease-in-out}.aui-table__column-expand-button .aui-expand-button aui-icon{display:flex;justify-content:center;align-items:center;width:var(--aui-icon-size-s);height:var(--aui-icon-size-s);font-size:var(--aui-icon-size-s)}.aui-table__column-expand-button .aui-expand-button:hover{background-color:rgb(var(--aui-color-p-7))}.aui-table__column-expand-button .aui-expand-button:active{background-color:rgb(var(--aui-color-p-5))}.aui-table__column-expand-button .aui-expand-button.isExpanded{transform:rotate(90deg);color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-table__column-expand-button .aui-expand-button.isExpanded:hover{background-color:rgb(var(--aui-color-p-1))}.aui-table__column-expand-button .aui-expand-button.isExpanded:active{background-color:rgb(var(--aui-color-p-0))}.aui-table__column-expand-button .aui-expand-button[disabled],.aui-table__column-expand-button .aui-expand-button.isExpanded[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-table__column-expand-panel{margin-top:-6px}.aui-table__column-expand-panel.aui-table__header-cell{display:none}.aui-table__column-expand-panel.aui-table__cell{width:100%;flex-shrink:0;flex-basis:100%;padding:0 10px;overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel{width:100%;border-radius:var(--aui-border-radius-l);overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel-content.hasBackground{padding:16px;background-color:rgb(var(--aui-color-n-9))}.aui-table-column-resizable__handle{display:block;position:absolute;top:0;bottom:0;right:0;width:5px;color:rgb(var(--aui-color-n-7));cursor:col-resize}.aui-table-column-resizable__handle:after{content:\"\";display:block;margin:12px 0 12px auto;width:1px;height:calc(100% - 24px);background-color:currentcolor}.aui-table-column-resizable__handle:hover{color:rgb(var(--aui-color-primary))}.aui-table-column-resizable__mark-line{display:block;position:absolute;top:0;bottom:0;width:1px;background-color:rgb(var(--aui-color-primary));z-index:9999;cursor:col-resize}.aui-table-column-resizable__overlay{display:block;position:absolute;inset:0;z-index:9000;cursor:col-resize}.aui-table__scroll-wrapper{position:relative;display:flex;flex-direction:column;max-height:100%;overflow:hidden;background-color:rgb(var(--aui-color-n-9));padding:0 12px 12px;border-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper::-webkit-scrollbar{width:8px;height:4px}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-table__scroll-wrapper::-webkit-scrollbar-corner{background-color:transparent}.aui-table__scroll-wrapper .aui-table{padding:0;border-radius:0}.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableTopShadow:before,.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableBottomShadow:after{transform:none;width:100%;left:0}.aui-table__scroll-shadow.aui-table{overflow:auto}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar{width:8px;height:4px}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-corner{background-color:transparent}.aui-table__scroll-shadow.hasTableTopShadow:before{content:\"\";position:sticky;display:block;height:16px;margin:-16px -12px 0;z-index:99;top:28px}:root .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow.hasTableBottomShadow:after{content:\"\";position:sticky;display:block;height:16px;transform:translate3d(0,12px,0);z-index:99;bottom:0;margin:-16px -12px 0}:root .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}html[aui-theme-mode=light] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-9),.75) inset}}html[aui-theme-mode=dark] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-9),.75) inset}.aui-table__scroll-shadow .aui-table__header-row{margin:0;padding:0;align-items:stretch}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:first-of-type{padding-left:20px}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:last-of-type{padding-right:20px}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:first-of-type{border-top-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:last-of-type{border-top-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row{border:none;padding:0;align-items:stretch;min-height:59px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell{border-width:1px 0;border-style:solid;border-color:rgb(var(--aui-color-n-8))}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:first-of-type{border-left-width:1px;padding-left:19px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:last-of-type{border-right-width:1px;padding-right:19px}.aui-table__scroll-shadow .aui-table__row:last-child{min-height:60px}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:first-of-type{border-bottom-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:last-of-type{border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:not(:last-child) .aui-table__cell{border-bottom-width:0}.aui-table__scroll-shadow--has-scroll aui-table-header-cell.aui-table-sticky-border-elem-left .aui-table-column-resizable__handle{transform:translate(-20px)}.aui-table__scroll-shadow--has-scroll .aui-table-column-resizable__mark-line.inStickyBorderElemLeft{transform:translate(-20px)}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{position:absolute;top:0;bottom:-1px;width:20px;transition:box-shadow .3s;content:\"\";pointer-events:none}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{position:absolute;top:0;bottom:-1px;content:\"\";background:linear-gradient(to bottom,rgb(var(--aui-color-n-7)),rgb(var(--aui-color-n-7)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left{padding-right:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after{right:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before{right:10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right{padding-left:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{left:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{left:10px}:root .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):before{background:linear-gradient(to bottom,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}:root .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):before{background:linear-gradient(to bottom,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AclTableVirtualComponent, decorators: [{
             type: Component,
@@ -11077,7 +11050,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
       class="aui-table aui-table__scroll-shadow"
     >
       @if (headerTemplate) {
-        <div class="aui-table__header-row">
+        <div
+          class="aui-table__header-row"
+          #headerRow
+          (scroll)="onHeaderRowScroll($event)"
+        >
           <ng-template [ngTemplateOutlet]="headerTemplate"></ng-template>
         </div>
       }
@@ -11116,7 +11093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
         </cdk-virtual-scroll-viewport>
       }
     </div>
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ScrollingModule, NgTemplateOutlet], styles: [":host{display:block}.aui-table__body-viewport{display:block}cdk-virtual-scroll-viewport::-webkit-scrollbar{width:8px;height:4px}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}cdk-virtual-scroll-viewport::-webkit-scrollbar-corner{background-color:transparent}.aui-table{position:relative;display:block;padding:0 12px 12px}.aui-table{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-table{background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l)}.aui-table__row,.aui-table__header-row{display:flex;align-items:center}.aui-table__row.hasPanel,.aui-table__header-row.hasPanel{flex-wrap:wrap}.aui-table__header-row+.aui-table__row{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row{position:relative;border-width:1px;border-style:solid;border-color:rgb(var(--aui-color-n-8));border-bottom-width:0;background-color:rgb(var(--aui-color-n-10));padding:0 9px;min-height:58px;box-sizing:content-box}.aui-table__row:first-child{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row:last-of-type{border-bottom-width:1px;min-height:58px;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__row.isDisabled:before{content:\"\";z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(var(--aui-color-n-10));opacity:.7;cursor:not-allowed}.aui-table__header-row{background-color:rgb(var(--aui-color-n-9));padding:0 10px}.aui-table__cell,.aui-table__header-cell{display:flex;align-items:center;flex:1;position:relative}.aui-table__cell{padding:15px 10px;background-color:rgb(var(--aui-color-n-10));overflow:hidden}.aui-table__cell--column{flex-direction:column;justify-content:center;align-items:flex-start}.aui-table__header-cell{padding:12px 10px;font-weight:var(--aui-font-weight-bold);background-color:rgb(var(--aui-color-n-9))}.aui-table__column-expand-button{display:flex;align-items:center;max-width:calc(10px * 2 + var(--aui-icon-size-m))}.aui-table__column-expand-button.aui-table__cell{height:58px}.aui-table__column-expand-button .aui-expand-button{display:inline-flex;justify-content:center;align-items:center;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));border-radius:50%;border:none;cursor:pointer;transition:transform .1s ease-in-out}.aui-table__column-expand-button .aui-expand-button aui-icon{display:flex;justify-content:center;align-items:center;width:var(--aui-icon-size-s);height:var(--aui-icon-size-s);font-size:var(--aui-icon-size-s)}.aui-table__column-expand-button .aui-expand-button:hover{background-color:rgb(var(--aui-color-p-7))}.aui-table__column-expand-button .aui-expand-button:active{background-color:rgb(var(--aui-color-p-5))}.aui-table__column-expand-button .aui-expand-button.isExpanded{transform:rotate(90deg);color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-table__column-expand-button .aui-expand-button.isExpanded:hover{background-color:rgb(var(--aui-color-p-1))}.aui-table__column-expand-button .aui-expand-button.isExpanded:active{background-color:rgb(var(--aui-color-p-0))}.aui-table__column-expand-button .aui-expand-button[disabled],.aui-table__column-expand-button .aui-expand-button.isExpanded[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-table__column-expand-panel{margin-top:-6px}.aui-table__column-expand-panel.aui-table__header-cell{display:none}.aui-table__column-expand-panel.aui-table__cell{width:100%;flex-shrink:0;flex-basis:100%;padding:0 10px;overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel{width:100%;border-radius:var(--aui-border-radius-l);overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel-content.hasBackground{padding:16px;background-color:rgb(var(--aui-color-n-9))}.aui-table-column-resizable__handle{display:block;position:absolute;top:0;bottom:0;right:0;width:5px;color:rgb(var(--aui-color-n-7));cursor:col-resize}.aui-table-column-resizable__handle:after{content:\"\";display:block;margin:12px 0 12px auto;width:1px;height:calc(100% - 24px);background-color:currentcolor}.aui-table-column-resizable__handle:hover{color:rgb(var(--aui-color-primary))}.aui-table-column-resizable__mark-line{display:block;position:absolute;top:0;bottom:0;width:1px;background-color:rgb(var(--aui-color-primary));z-index:9999;cursor:col-resize}.aui-table-column-resizable__overlay{display:block;position:absolute;inset:0;z-index:9000;cursor:col-resize}.aui-table__scroll-wrapper{position:relative;display:flex;flex-direction:column;max-height:100%;overflow:hidden;background-color:rgb(var(--aui-color-n-9));padding:0 12px 12px;border-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper::-webkit-scrollbar{width:8px;height:4px}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-table__scroll-wrapper::-webkit-scrollbar-corner{background-color:transparent}.aui-table__scroll-wrapper .aui-table{padding:0;border-radius:0}.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableTopShadow:before,.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableBottomShadow:after{transform:none;width:100%;left:0}.aui-table__scroll-shadow.aui-table{overflow:auto}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar{width:8px;height:4px}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-corner{background-color:transparent}.aui-table__scroll-shadow.hasTableTopShadow:before{content:\"\";position:sticky;display:block;height:16px;margin:-16px -12px 0;z-index:99;top:28px}:root .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow.hasTableBottomShadow:after{content:\"\";position:sticky;display:block;height:16px;transform:translate3d(0,12px,0);z-index:99;bottom:0;margin:-16px -12px 0}:root .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}html[aui-theme-mode=light] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-9),.75) inset}}html[aui-theme-mode=dark] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-9),.75) inset}.aui-table__scroll-shadow .aui-table__header-row{margin:0;padding:0;align-items:stretch}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:first-of-type{padding-left:20px}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:last-of-type{padding-right:20px}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:first-of-type{border-top-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:last-of-type{border-top-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row{border:none;padding:0;align-items:stretch;min-height:59px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell{border-width:1px 0;border-style:solid;border-color:rgb(var(--aui-color-n-8))}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:first-of-type{border-left-width:1px;padding-left:19px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:last-of-type{border-right-width:1px;padding-right:19px}.aui-table__scroll-shadow .aui-table__row:last-child{min-height:60px}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:first-of-type{border-bottom-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:last-of-type{border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:not(:last-child) .aui-table__cell{border-bottom-width:0}.aui-table__scroll-shadow--has-scroll aui-table-header-cell.aui-table-sticky-border-elem-left .aui-table-column-resizable__handle{transform:translate(-20px)}.aui-table__scroll-shadow--has-scroll .aui-table-column-resizable__mark-line.inStickyBorderElemLeft{transform:translate(-20px)}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{position:absolute;top:0;bottom:-1px;width:20px;transition:box-shadow .3s;content:\"\";pointer-events:none}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{position:absolute;top:0;bottom:-1px;content:\"\";background:linear-gradient(to bottom,rgb(var(--aui-color-n-7)),rgb(var(--aui-color-n-7)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left{padding-right:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after{right:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before{right:10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right{padding-left:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{left:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{left:10px}:root .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):before{background:linear-gradient(to bottom,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}:root .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}@media(prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):before{background:linear-gradient(to bottom,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ScrollingModule, NgTemplateOutlet], styles: ["acl-table-virtual{display:block;max-width:100%;overflow:hidden}.aui-table__body-viewport{display:block}cdk-virtual-scroll-viewport::-webkit-scrollbar{width:8px;height:4px}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}cdk-virtual-scroll-viewport::-webkit-scrollbar-corner{background-color:transparent}.aui-table{position:relative;display:block;padding:0 12px 12px}.aui-table{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-table{background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l)}.aui-table__row,.aui-table__header-row{display:flex;align-items:center;background-color:rgb(var(--aui-color-n-9));padding:0 10px}.aui-table__row.hasPanel,.aui-table__header-row.hasPanel{flex-wrap:wrap}.aui-table__header-row+.aui-table__row{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row{position:relative;border-width:1px;border-style:solid;border-color:rgb(var(--aui-color-n-8));border-bottom-width:0;background-color:rgb(var(--aui-color-n-10));padding:0 9px;min-height:58px;box-sizing:content-box}.aui-table__row:first-child{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row:last-of-type{border-bottom-width:1px;min-height:58px;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__row.isDisabled:before{content:\"\";z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(var(--aui-color-n-10));opacity:.7;cursor:not-allowed}.aui-table__cell,.aui-table__header-cell{display:flex;align-items:center;flex:1;position:relative}.aui-table__cell{padding:15px 10px;background-color:rgb(var(--aui-color-n-10));overflow:hidden}.aui-table__cell--column{flex-direction:column;justify-content:center;align-items:flex-start}.aui-table__header-cell{padding:12px 10px;font-weight:var(--aui-font-weight-bold);background-color:rgb(var(--aui-color-n-9))}.aui-table__column-expand-button{display:flex;align-items:center;max-width:calc(10px * 2 + var(--aui-icon-size-m))}.aui-table__column-expand-button.aui-table__cell{height:58px}.aui-table__column-expand-button .aui-expand-button{display:inline-flex;justify-content:center;align-items:center;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));border-radius:50%;border:none;cursor:pointer;transition:transform .1s ease-in-out}.aui-table__column-expand-button .aui-expand-button aui-icon{display:flex;justify-content:center;align-items:center;width:var(--aui-icon-size-s);height:var(--aui-icon-size-s);font-size:var(--aui-icon-size-s)}.aui-table__column-expand-button .aui-expand-button:hover{background-color:rgb(var(--aui-color-p-7))}.aui-table__column-expand-button .aui-expand-button:active{background-color:rgb(var(--aui-color-p-5))}.aui-table__column-expand-button .aui-expand-button.isExpanded{transform:rotate(90deg);color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-table__column-expand-button .aui-expand-button.isExpanded:hover{background-color:rgb(var(--aui-color-p-1))}.aui-table__column-expand-button .aui-expand-button.isExpanded:active{background-color:rgb(var(--aui-color-p-0))}.aui-table__column-expand-button .aui-expand-button[disabled],.aui-table__column-expand-button .aui-expand-button.isExpanded[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-table__column-expand-panel{margin-top:-6px}.aui-table__column-expand-panel.aui-table__header-cell{display:none}.aui-table__column-expand-panel.aui-table__cell{width:100%;flex-shrink:0;flex-basis:100%;padding:0 10px;overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel{width:100%;border-radius:var(--aui-border-radius-l);overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel-content.hasBackground{padding:16px;background-color:rgb(var(--aui-color-n-9))}.aui-table-column-resizable__handle{display:block;position:absolute;top:0;bottom:0;right:0;width:5px;color:rgb(var(--aui-color-n-7));cursor:col-resize}.aui-table-column-resizable__handle:after{content:\"\";display:block;margin:12px 0 12px auto;width:1px;height:calc(100% - 24px);background-color:currentcolor}.aui-table-column-resizable__handle:hover{color:rgb(var(--aui-color-primary))}.aui-table-column-resizable__mark-line{display:block;position:absolute;top:0;bottom:0;width:1px;background-color:rgb(var(--aui-color-primary));z-index:9999;cursor:col-resize}.aui-table-column-resizable__overlay{display:block;position:absolute;inset:0;z-index:9000;cursor:col-resize}.aui-table__scroll-wrapper{position:relative;display:flex;flex-direction:column;max-height:100%;overflow:hidden;background-color:rgb(var(--aui-color-n-9));padding:0 12px 12px;border-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper::-webkit-scrollbar{width:8px;height:4px}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-table__scroll-wrapper::-webkit-scrollbar-corner{background-color:transparent}.aui-table__scroll-wrapper .aui-table{padding:0;border-radius:0}.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableTopShadow:before,.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableBottomShadow:after{transform:none;width:100%;left:0}.aui-table__scroll-shadow.aui-table{overflow:auto}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar{width:8px;height:4px}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-table__scroll-shadow.aui-table::-webkit-scrollbar-corner{background-color:transparent}.aui-table__scroll-shadow.hasTableTopShadow:before{content:\"\";position:sticky;display:block;height:16px;margin:-16px -12px 0;z-index:99;top:28px}:root .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow.hasTableTopShadow:before{box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow.hasTableBottomShadow:after{content:\"\";position:sticky;display:block;height:16px;transform:translate3d(0,12px,0);z-index:99;bottom:0;margin:-16px -12px 0}:root .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}html[aui-theme-mode=light] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-9),.75) inset}}html[aui-theme-mode=dark] .aui-table__scroll-shadow.hasTableBottomShadow:after{box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-9),.75) inset}.aui-table__scroll-shadow .aui-table__header-row{margin:0;padding:0;align-items:stretch}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:first-of-type{padding-left:20px}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:last-of-type{padding-right:20px}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:first-of-type{border-top-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:last-of-type{border-top-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row{border:none;padding:0;align-items:stretch;min-height:59px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell{border-width:1px 0;border-style:solid;border-color:rgb(var(--aui-color-n-8))}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:first-of-type{border-left-width:1px;padding-left:19px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:last-of-type{border-right-width:1px;padding-right:19px}.aui-table__scroll-shadow .aui-table__row:last-child{min-height:60px}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:first-of-type{border-bottom-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:last-of-type{border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:not(:last-child) .aui-table__cell{border-bottom-width:0}.aui-table__scroll-shadow--has-scroll aui-table-header-cell.aui-table-sticky-border-elem-left .aui-table-column-resizable__handle{transform:translate(-20px)}.aui-table__scroll-shadow--has-scroll .aui-table-column-resizable__mark-line.inStickyBorderElemLeft{transform:translate(-20px)}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{position:absolute;top:0;bottom:-1px;width:20px;transition:box-shadow .3s;content:\"\";pointer-events:none}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{position:absolute;top:0;bottom:-1px;content:\"\";background:linear-gradient(to bottom,rgb(var(--aui-color-n-7)),rgb(var(--aui-color-n-7)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left{padding-right:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after{right:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before{right:10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right{padding-left:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{left:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{left:10px}:root .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):before{background:linear-gradient(to bottom,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}:root .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}html[aui-theme-mode=light] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}}html[aui-theme-mode=dark] .aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-9),.75)}.aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):before{background:linear-gradient(to bottom,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 6px,transparent);width:1px;background-size:100% 14px;height:100%}\n"] }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], itemSize: [{
@@ -11146,43 +11123,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             }], scrollContainerRef: [{
                 type: ViewChild,
                 args: ['scrollContainer', { static: true }]
+            }], headerRow: [{
+                type: ViewChild,
+                args: ['headerRow', { static: false }]
             }] } });
 
-class AclTableVirtualModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AclTableVirtualModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: AclTableVirtualModule, imports: [AclTableVirtualComponent,
-            AclTableVirtualHeaderDefDirective,
-            AclTableVirtualRowDefDirective,
-            AclTableVirtualPlaceholderDefDirective], exports: [AclTableVirtualComponent,
-            AclTableVirtualHeaderDefDirective,
-            AclTableVirtualRowDefDirective,
-            AclTableVirtualPlaceholderDefDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AclTableVirtualModule, imports: [AclTableVirtualComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AclTableVirtualModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        AclTableVirtualComponent,
-                        AclTableVirtualHeaderDefDirective,
-                        AclTableVirtualRowDefDirective,
-                        AclTableVirtualPlaceholderDefDirective,
-                    ],
-                    exports: [
-                        AclTableVirtualComponent,
-                        AclTableVirtualHeaderDefDirective,
-                        AclTableVirtualRowDefDirective,
-                        AclTableVirtualPlaceholderDefDirective,
-                    ],
-                }]
-        }] });
+const TABLE_VIRTUAL_MODULE = [
+    AclTableVirtualComponent,
+    AclTableVirtualHeaderDefDirective,
+    AclTableVirtualRowDefDirective,
+    AclTableVirtualPlaceholderDefDirective,
+];
+
+class TerminatingTagComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TerminatingTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TerminatingTagComponent, isStandalone: true, selector: "acl-deleting-tag", inputs: { resource: "resource" }, ngImport: i0, template: "@if (resource?.metadata?.deletionTimestamp) {\n  <aui-tag\n    type=\"error\"\n    size=\"mini\"\n    [border]=\"true\"\n  >\n    {{ 'deleting' | translate }}\n  </aui-tag>\n}\n", styles: ["aui-tag{display:inline-block;margin-left:8px;vertical-align:2px}\n"], dependencies: [{ kind: "component", type: TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TerminatingTagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-deleting-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TagComponent, TranslatePipe], template: "@if (resource?.metadata?.deletionTimestamp) {\n  <aui-tag\n    type=\"error\"\n    size=\"mini\"\n    [border]=\"true\"\n  >\n    {{ 'deleting' | translate }}\n  </aui-tag>\n}\n", styles: ["aui-tag{display:inline-block;margin-left:8px;vertical-align:2px}\n"] }]
+        }], propDecorators: { resource: [{
+                type: Input
+            }] } });
+
+class PluginClusterSelectorComponent {
+    constructor() {
+        this.valueChange = new EventEmitter();
+        this.isActive = false;
+        this.popupService = inject(ResourceSelectorPopupService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.elementRef = inject(ElementRef);
+        this.http = inject(HttpClient);
+        this.projectApi = inject(ProjectService);
+        this.displayFields = [
+            ConfigurableField.Status,
+            ConfigurableField.Time,
+        ];
+        this.filterClusters$ = this.disabled$.pipe(distinctUntilChanged(isEqual), switchMap(disabled => disabled
+            ? EMPTY$1
+            : this.projectApi
+                .getProjects()
+                .pipe(map(projects => projects
+                ?.find(p => p.metadata.name === this.projectName)
+                ?.spec?.clusters?.map(r => r.name)))), publishRef());
+    }
+    getFilterFn(filterClusters) {
+        return (clusters) => {
+            if (!filterClusters?.length) {
+                return clusters;
+            }
+            return clusters.filter(c => filterClusters.includes(c.name));
+        };
+    }
+    ngAfterViewInit() {
+        this.http
+            .get(`${API_GATEWAY$1}/auth/v1/clusters`)
+            .pipe(map(list => list.items), catchError(() => of([])))
+            .subscribe(clusters => {
+            this.onSelect({ name: clusters[0].metadata.name });
+        });
+    }
+    openPopup() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.isActive) {
+            this.closePopup();
+        }
+        else {
+            this.isActive = true;
+            this.popupRef = this.popupService.open({
+                origin: this.elementRef,
+                content: this.popupTemplate,
+            });
+            this.popupRef.afterClosed().subscribe(() => {
+                this.isActive = false;
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    closePopup() {
+        if (this.isActive) {
+            this.isActive = false;
+            this.popupRef.close();
+        }
+    }
+    onSelect(item) {
+        this.value = item.name;
+        this.valueChange.emit(item.name);
+        this.closePopup();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PluginClusterSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.1", type: PluginClusterSelectorComponent, isStandalone: true, selector: "acl-plugin-cluster-selector", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], projectName: "projectName", fields: "fields" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popup"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"acl-resource-selector acl-resource-selector--bg\"\n  [ngClass]=\"{\n    'acl-resource-selector--active': isActive,\n    'acl-resource-selector--disabled': disabled,\n  }\"\n  (click)=\"openPopup()\"\n>\n  <div class=\"acl-resource-selector__item project\">\n    <span class=\"icon-wrapper\">\n      <aui-icon icon=\"bicolor:server\"></aui-icon>\n    </span>\n    <span class=\"with-colon\">\n      {{ 'cluster' | translate }}\n    </span>\n    <span class=\"selected-name text-truncate\">{{ value }}</span>\n  </div>\n  <div class=\"acl-resource-selector__arrow\">\n    <aui-icon icon=\"caret_down_s\"></aui-icon>\n  </div>\n</div>\n\n<ng-template #popup>\n  <acl-cluster-list\n    context=\"popup\"\n    [fields]=\"fields || displayFields\"\n    [filterFn]=\"getFilterFn(filterClusters$ | async)\"\n    [value]=\"value\"\n    (selectItem)=\"onSelect($event)\"\n  ></acl-cluster-list>\n</ng-template>\n", styles: [":host{display:flex}:host::ng-deep .icon-wrapper{position:relative;display:flex;justify-content:center;align-items:center;width:16px;height:16px;flex-shrink:0;font-size:var(--aui-icon-size-m)}:root :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}html[aui-theme-mode=light] :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}}html[aui-theme-mode=dark] :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}:host::ng-deep .with-colon{display:inline-flex;word-break:keep-all;flex-shrink:0;font-weight:500}:host::ng-deep .with-colon:after{content:\":\";margin-right:8px}:host::ng-deep .text-truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host::ng-deep .acl-resource-selector{-webkit-user-select:none;user-select:none;display:flex;color:var(--acl-page-header-title-color);cursor:pointer;padding:0 8px}:host::ng-deep .acl-resource-selector .selected-name{color:var(--acl-page-header-text-color)}:host::ng-deep .acl-resource-selector--active,:host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover{background-color:rgb(var(--aui-color-primary));color:#fff;border-radius:2px}:root :host::ng-deep .acl-resource-selector--active .icon-wrapper,:root :host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: rgb(var(--aui-color-p-4))}html[aui-theme-mode=light] :host::ng-deep .acl-resource-selector--active .icon-wrapper,html[aui-theme-mode=light] :host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: rgb(var(--aui-color-p-4))}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] :host::ng-deep .acl-resource-selector--active .icon-wrapper,html[aui-theme-mode=system] :host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: #b3d7fc}}html[aui-theme-mode=dark] :host::ng-deep .acl-resource-selector--active .icon-wrapper,html[aui-theme-mode=dark] :host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: #b3d7fc}:host::ng-deep .acl-resource-selector--active .selected-name,:host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .selected-name{color:#fff}:host::ng-deep .acl-resource-selector--disabled{cursor:not-allowed}:host::ng-deep .acl-resource-selector--bg{background-color:rgb(var(--aui-color-p-6));flex:1}:host::ng-deep .acl-resource-selector__item{margin-right:20px;height:32px;display:inline-flex;align-items:center;font-size:12px;max-width:270px}@media screen and (width <= 1280px){:host::ng-deep .acl-resource-selector__item{max-width:178px;margin-right:8px}}:host::ng-deep .acl-resource-selector__item .icon-wrapper{margin-right:4px}:host::ng-deep .acl-resource-selector__arrow{margin-left:-16px;align-items:center;display:inline-flex;width:16px;justify-content:center}@media screen and (width <= 1280px){:host::ng-deep .acl-resource-selector__arrow{margin-left:-4px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ClusterListComponent, selector: "acl-cluster-list", inputs: ["value", "filterFn"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], PluginClusterSelectorComponent.prototype, "disabled$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PluginClusterSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-plugin-cluster-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ClusterListComponent,
+                        NgClass,
+                        IconComponent,
+                        TranslatePipe,
+                    ], template: "<div\n  class=\"acl-resource-selector acl-resource-selector--bg\"\n  [ngClass]=\"{\n    'acl-resource-selector--active': isActive,\n    'acl-resource-selector--disabled': disabled,\n  }\"\n  (click)=\"openPopup()\"\n>\n  <div class=\"acl-resource-selector__item project\">\n    <span class=\"icon-wrapper\">\n      <aui-icon icon=\"bicolor:server\"></aui-icon>\n    </span>\n    <span class=\"with-colon\">\n      {{ 'cluster' | translate }}\n    </span>\n    <span class=\"selected-name text-truncate\">{{ value }}</span>\n  </div>\n  <div class=\"acl-resource-selector__arrow\">\n    <aui-icon icon=\"caret_down_s\"></aui-icon>\n  </div>\n</div>\n\n<ng-template #popup>\n  <acl-cluster-list\n    context=\"popup\"\n    [fields]=\"fields || displayFields\"\n    [filterFn]=\"getFilterFn(filterClusters$ | async)\"\n    [value]=\"value\"\n    (selectItem)=\"onSelect($event)\"\n  ></acl-cluster-list>\n</ng-template>\n", styles: [":host{display:flex}:host::ng-deep .icon-wrapper{position:relative;display:flex;justify-content:center;align-items:center;width:16px;height:16px;flex-shrink:0;font-size:var(--aui-icon-size-m)}:root :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}html[aui-theme-mode=light] :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}}html[aui-theme-mode=dark] :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}:host::ng-deep .with-colon{display:inline-flex;word-break:keep-all;flex-shrink:0;font-weight:500}:host::ng-deep .with-colon:after{content:\":\";margin-right:8px}:host::ng-deep .text-truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host::ng-deep .acl-resource-selector{-webkit-user-select:none;user-select:none;display:flex;color:var(--acl-page-header-title-color);cursor:pointer;padding:0 8px}:host::ng-deep .acl-resource-selector .selected-name{color:var(--acl-page-header-text-color)}:host::ng-deep .acl-resource-selector--active,:host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover{background-color:rgb(var(--aui-color-primary));color:#fff;border-radius:2px}:root :host::ng-deep .acl-resource-selector--active .icon-wrapper,:root :host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: rgb(var(--aui-color-p-4))}html[aui-theme-mode=light] :host::ng-deep .acl-resource-selector--active .icon-wrapper,html[aui-theme-mode=light] :host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: rgb(var(--aui-color-p-4))}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] :host::ng-deep .acl-resource-selector--active .icon-wrapper,html[aui-theme-mode=system] :host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: #b3d7fc}}html[aui-theme-mode=dark] :host::ng-deep .acl-resource-selector--active .icon-wrapper,html[aui-theme-mode=dark] :host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: #b3d7fc}:host::ng-deep .acl-resource-selector--active .selected-name,:host::ng-deep .acl-resource-selector:not(.acl-resource-selector--disabled):hover .selected-name{color:#fff}:host::ng-deep .acl-resource-selector--disabled{cursor:not-allowed}:host::ng-deep .acl-resource-selector--bg{background-color:rgb(var(--aui-color-p-6));flex:1}:host::ng-deep .acl-resource-selector__item{margin-right:20px;height:32px;display:inline-flex;align-items:center;font-size:12px;max-width:270px}@media screen and (width <= 1280px){:host::ng-deep .acl-resource-selector__item{max-width:178px;margin-right:8px}}:host::ng-deep .acl-resource-selector__item .icon-wrapper{margin-right:4px}:host::ng-deep .acl-resource-selector__arrow{margin-left:-16px;align-items:center;display:inline-flex;width:16px;justify-content:center}@media screen and (width <= 1280px){:host::ng-deep .acl-resource-selector__arrow{margin-left:-4px}}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled$: [], projectName: [{
+                type: Input
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popup', { static: true }]
+            }], fields: [{
+                type: Input
+            }] } });
 
 class UpdateDescriptionDialogComponent {
-    constructor(dialogRef, k8sApi, k8sUtil, data) {
-        this.dialogRef = dialogRef;
-        this.k8sApi = k8sApi;
-        this.k8sUtil = k8sUtil;
-        this.data = data;
+    constructor() {
+        this.dialogRef = inject(DialogRef);
+        this.k8sApi = inject(K8sApiService);
+        this.k8sUtil = inject(K8sUtilService);
+        this.data = inject(DIALOG_DATA);
         this.description = this.k8sUtil.getDescription(this.data.resource);
         this.confirming$$ = new BehaviorSubject(false);
     }
@@ -11190,14 +11258,7 @@ class UpdateDescriptionDialogComponent {
         this.confirming$$.next(true);
         this.k8sApi
             .patchResource({
-            ...(this.data.definition
-                ? {
-                    definition: this.data.definition,
-                }
-                : {
-                    type: this.data.type ||
-                        snakeCase(this.data.resource.kind).toUpperCase(),
-                }),
+            definition: this.data.definition,
             cluster: this.data.cluster,
             resource: this.data.resource,
             part: {
@@ -11211,8 +11272,8 @@ class UpdateDescriptionDialogComponent {
             .pipe(finalize(() => this.confirming$$.next(false)))
             .subscribe(resource => this.dialogRef.close(resource));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UpdateDescriptionDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2$1.K8sApiService }, { token: i2$1.K8sUtilService }, { token: DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: UpdateDescriptionDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<aui-dialog-header>\n  {{ 'update_description' | translate }}\n</aui-dialog-header>\n<aui-dialog-content>\n  <aui-form-item>\n    <label auiFormItemLabel>\n      {{ 'name' | translate }}\n    </label>\n    {{ data.resource | aclName }}\n  </aui-form-item>\n  <aui-form-item class=\"last-form-item-no-margin\">\n    <label auiFormItemLabel>\n      {{ 'description' | translate }}\n    </label>\n    <textarea\n      aui-input\n      name=\"description\"\n      [(ngModel)]=\"description\"\n    ></textarea>\n  </aui-form-item>\n</aui-dialog-content>\n<aui-dialog-footer>\n  <button\n    aui-button=\"primary\"\n    [loading]=\"confirming$$ | async\"\n    [disabled]=\"confirming$$ | async\"\n    (click)=\"confirm()\"\n  >\n    {{ 'update' | translate }}\n  </button>\n  <button\n    aui-button\n    auiDialogClose\n  >\n    {{ 'cancel' | translate }}\n  </button>\n</aui-dialog-footer>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: i1.DialogFooterComponent, selector: "aui-dialog-footer" }, { kind: "directive", type: i1.DialogCloseDirective, selector: "[auiDialogClose]", inputs: ["auiDialogClose"], exportAs: ["auiDialogClose"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i1.InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i1.FormItemComponent, selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i1.FormItemLabelDirective, selector: "label[auiFormItemLabel]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.K8sNamePipe, name: "aclName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UpdateDescriptionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: UpdateDescriptionDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<aui-dialog-header>\n  {{ 'update_description' | translate }}\n</aui-dialog-header>\n<aui-dialog-content>\n  <aui-form-item>\n    <label auiFormItemLabel>\n      {{ 'name' | translate }}\n    </label>\n    {{ data.resource | aclName }}\n  </aui-form-item>\n  <aui-form-item class=\"last-form-item-no-margin\">\n    <label auiFormItemLabel>\n      {{ 'description' | translate }}\n    </label>\n    <textarea\n      aui-input\n      name=\"description\"\n      [(ngModel)]=\"description\"\n    ></textarea>\n  </aui-form-item>\n</aui-dialog-content>\n<aui-dialog-footer>\n  <button\n    aui-button=\"primary\"\n    [loading]=\"confirming$$ | async\"\n    [disabled]=\"confirming$$ | async\"\n    (click)=\"confirm()\"\n  >\n    {{ 'update' | translate }}\n  </button>\n  <button\n    aui-button\n    auiDialogClose\n  >\n    {{ 'cancel' | translate }}\n  </button>\n</aui-dialog-footer>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: i1.DialogFooterComponent, selector: "aui-dialog-footer" }, { kind: "directive", type: i1.DialogCloseDirective, selector: "[auiDialogClose]", inputs: ["auiDialogClose"], exportAs: ["auiDialogClose"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i1.InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i1.FormItemComponent, selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i1.FormItemLabelDirective, selector: "label[auiFormItemLabel]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.K8sNamePipe, name: "aclName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UpdateDescriptionDialogComponent, decorators: [{
             type: Component,
@@ -11226,10 +11287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         TranslatePipe,
                         K8S_UTIL_PIPES_MODULE,
                     ], template: "<aui-dialog-header>\n  {{ 'update_description' | translate }}\n</aui-dialog-header>\n<aui-dialog-content>\n  <aui-form-item>\n    <label auiFormItemLabel>\n      {{ 'name' | translate }}\n    </label>\n    {{ data.resource | aclName }}\n  </aui-form-item>\n  <aui-form-item class=\"last-form-item-no-margin\">\n    <label auiFormItemLabel>\n      {{ 'description' | translate }}\n    </label>\n    <textarea\n      aui-input\n      name=\"description\"\n      [(ngModel)]=\"description\"\n    ></textarea>\n  </aui-form-item>\n</aui-dialog-content>\n<aui-dialog-footer>\n  <button\n    aui-button=\"primary\"\n    [loading]=\"confirming$$ | async\"\n    [disabled]=\"confirming$$ | async\"\n    (click)=\"confirm()\"\n  >\n    {{ 'update' | translate }}\n  </button>\n  <button\n    aui-button\n    auiDialogClose\n  >\n    {{ 'cancel' | translate }}\n  </button>\n</aui-dialog-footer>\n" }]
-        }], ctorParameters: () => [{ type: i1.DialogRef }, { type: i2$1.K8sApiService }, { type: i2$1.K8sUtilService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DIALOG_DATA]
-                }] }] });
+        }] });
 
 class UpdateDisplayNameDialogComponent {
     constructor() {
@@ -11259,7 +11317,7 @@ class UpdateDisplayNameDialogComponent {
             .subscribe(resource => this.dialogRef.close(resource));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UpdateDisplayNameDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: UpdateDisplayNameDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<aui-dialog-header>\n  {{ 'update_display_name' | translate }}\n</aui-dialog-header>\n<aui-dialog-content>\n  <aui-form-item>\n    <label auiFormItemLabel>\n      {{ 'name' | translate }}\n    </label>\n    {{ data.resource | aclName }}\n  </aui-form-item>\n  <aui-form-item class=\"last-form-item-no-margin\">\n    <label auiFormItemLabel>\n      {{ 'display_name' | translate }}\n    </label>\n    @if (!data.validateMaxLength) {\n      <input\n        aui-input\n        name=\"displayName\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"displayName\"\n      />\n    } @else {\n      <input\n        aui-input\n        name=\"displayName\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"displayName\"\n        [maxlength]=\"64\"\n      />\n    }\n  </aui-form-item>\n</aui-dialog-content>\n<aui-dialog-footer>\n  <button\n    aui-button=\"primary\"\n    [loading]=\"confirming$$ | async\"\n    [disabled]=\"confirming$$ | async\"\n    (click)=\"confirm()\"\n  >\n    {{ 'update' | translate }}\n  </button>\n  <button\n    aui-button\n    auiDialogClose\n  >\n    {{ 'cancel' | translate }}\n  </button>\n</aui-dialog-footer>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: i1.DialogFooterComponent, selector: "aui-dialog-footer" }, { kind: "directive", type: i1.DialogCloseDirective, selector: "[auiDialogClose]", inputs: ["auiDialogClose"], exportAs: ["auiDialogClose"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i1.InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i1.FormItemComponent, selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i1.FormItemLabelDirective, selector: "label[auiFormItemLabel]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.K8sNamePipe, name: "aclName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: UpdateDisplayNameDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<aui-dialog-header>\n  {{ 'update_display_name' | translate }}\n</aui-dialog-header>\n<aui-dialog-content>\n  <aui-form-item>\n    <label auiFormItemLabel>\n      {{ 'name' | translate }}\n    </label>\n    {{ data.resource | aclName }}\n  </aui-form-item>\n  <aui-form-item class=\"last-form-item-no-margin\">\n    <label auiFormItemLabel>\n      {{ 'display_name' | translate }}\n    </label>\n    @if (!data.validateMaxLength) {\n      <input\n        aui-input\n        name=\"displayName\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"displayName\"\n      />\n    } @else {\n      <input\n        aui-input\n        name=\"displayName\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"displayName\"\n        [maxlength]=\"64\"\n      />\n    }\n  </aui-form-item>\n</aui-dialog-content>\n<aui-dialog-footer>\n  <button\n    aui-button=\"primary\"\n    [loading]=\"confirming$$ | async\"\n    [disabled]=\"confirming$$ | async\"\n    (click)=\"confirm()\"\n  >\n    {{ 'update' | translate }}\n  </button>\n  <button\n    aui-button\n    auiDialogClose\n  >\n    {{ 'cancel' | translate }}\n  </button>\n</aui-dialog-footer>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: i1.DialogFooterComponent, selector: "aui-dialog-footer" }, { kind: "directive", type: i1.DialogCloseDirective, selector: "[auiDialogClose]", inputs: ["auiDialogClose"], exportAs: ["auiDialogClose"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i1.InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i1.FormItemComponent, selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i1.FormItemLabelDirective, selector: "label[auiFormItemLabel]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.K8sNamePipe, name: "aclName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UpdateDisplayNameDialogComponent, decorators: [{
             type: Component,
@@ -11485,6 +11543,7 @@ class ArrayFormTableComponent {
         this.addDisabled = false;
         this.actionColumnDivider = false;
         this.showZeroState = true;
+        this.injector = inject(Injector);
         this.minRow = 0;
         this.minRowTooltip = '';
         this.maxRow = Infinity;
@@ -11499,7 +11558,8 @@ class ArrayFormTableComponent {
         };
     }
     get formDirective() {
-        return inject(FormGroupDirective, null) || inject(NgForm, null);
+        return (this.injector.get(FormGroupDirective, null) ||
+            this.injector.get(NgForm, null));
     }
     /**
      * 自定义是否展示错误内容
@@ -11525,7 +11585,7 @@ class ArrayFormTableComponent {
         this.destroy$$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ArrayFormTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ArrayFormTableComponent, isStandalone: true, selector: "acl-array-form-table", inputs: { rowSeparator: "rowSeparator", rows: "rows", resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", readonly: "readonly", addDisabled: "addDisabled", actionColumnDivider: "actionColumnDivider", showZeroState: "showZeroState", showRowError: "showRowError", rowBackgroundColorFn: "rowBackgroundColorFn", minRow: "minRow", minRowTooltip: "minRowTooltip", maxRow: "maxRow", maxRowTooltip: "maxRowTooltip" }, outputs: { add: "add", remove: "remove" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ArrayFormTableHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "rowErrorTemplate", first: true, predicate: ArrayFormTableRowErrorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowControlTemplate", first: true, predicate: ArrayFormTableRowControlDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "footerTemplate", first: true, predicate: ArrayFormTableFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "zeroStateTemplate", first: true, predicate: ArrayFormTableZeroStateDirective, descendants: true, read: TemplateRef }, { propertyName: "separatorTemplate", first: true, predicate: ArrayFormTableRowSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "ngFormGroupDirective", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "rowTemplates", predicate: ArrayFormTableRowDirective, read: TemplateRef }], ngImport: i0, template: "<table\n  class=\"acl-array-form-table\"\n  [class.acl-array-form-table__readonly-mode]=\"readonly\"\n>\n  @if (headerTemplate) {\n    <thead>\n      <tr>\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        @if (!readonly && minRow !== maxRow) {\n          <th class=\"acl-array-form-table__action-col\"></th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (row of rows; track row; let index = $index) {\n      @for (\n        rowTemplate of rowTemplates;\n        track rowTemplate;\n        let templateIndex = $index\n      ) {\n        <tr\n          [class.acl-array-form-table__row-error]=\"\n            row | pure: shouldShowRowError | async\n          \"\n          [attr.rowtemplateindex]=\"templateIndex\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowTemplate;\n              context: { $implicit: row, index: index }\n            \"\n          ></ng-container>\n          @if (templateIndex === 0 && !readonly && minRow !== maxRow) {\n            <td\n              class=\"acl-array-form-table__action-col\"\n              [class.acl-array-form-table__action-col-divider]=\"\n                actionColumnDivider\n              \"\n            >\n              @if (rowControlTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowControlTemplate;\n                    context: { $implicit: row, index: index }\n                  \"\n                ></ng-container>\n              }\n              <div\n                [auiTooltip]=\"minRowTooltip\"\n                [auiTooltipDisabled]=\"rows?.length > minRow || !minRowTooltip\"\n              >\n                @if (!rowControlTemplate) {\n                  <button\n                    aui-button=\"text\"\n                    type=\"button\"\n                    [disabled]=\"rows?.length <= minRow\"\n                    [square]=\"true\"\n                    [plain]=\"true\"\n                    (click)=\"remove.emit(index)\"\n                  >\n                    <aui-icon icon=\"minus_circle\"></aui-icon>\n                  </button>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      }\n      @if (rowErrorTemplate && !readonly) {\n        <tr\n          [class.acl-array-form-table__row-error]=\"\n            row | pure: shouldShowRowError | async\n          \"\n          [hidden]=\"!(row | pure: shouldShowRowError | async)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowErrorTemplate;\n              context: { $implicit: row, index: index }\n            \"\n          ></ng-container>\n        </tr>\n      }\n      @if (\n        (rowSeparator || separatorTemplate) &&\n        rows?.length > 1 &&\n        index !== rows?.length - 1\n      ) {\n        <tr class=\"acl-array-form-table__separator\">\n          <td colspan=\"100\">\n            @if (separatorTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"separatorTemplate\"\n              ></ng-container>\n            } @else {\n              <div class=\"tw-h-[8px]\"></div>\n            }\n          </td>\n        </tr>\n      }\n    }\n\n    @if ((!rows || rows.length === 0) && showZeroState) {\n      <tr>\n        <td\n          colspan=\"100\"\n          style=\"padding: unset\"\n        >\n          @if (!zeroStateTemplate) {\n            <acl-zero-state\n              [zeroState]=\"true\"\n              [resourceName]=\"resourceName\"\n              [resourceNameTranslated]=\"resourceNameTranslated\"\n              [minHeight]=\"48\"\n            ></acl-zero-state>\n          }\n          @if (zeroStateTemplate) {\n            <ng-container *ngTemplateOutlet=\"zeroStateTemplate\"></ng-container>\n          }\n        </td>\n      </tr>\n    }\n\n    @if (!readonly && minRow !== maxRow) {\n      <tr class=\"acl-array-form-table--row-action\">\n        <td colspan=\"100\">\n          <div class=\"acl-array-form-table__bottom-control-buttons\">\n            @if (footerTemplate) {\n              <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            }\n            @if (!footerTemplate) {\n              <div\n                class=\"tw-flex tw-w-full\"\n                [auiTooltip]=\"maxRowTooltip\"\n                [auiTooltipDisabled]=\"rows?.length < maxRow || !maxRowTooltip\"\n              >\n                <button\n                  aui-button=\"primary\"\n                  type=\"button\"\n                  [plain]=\"true\"\n                  size=\"mini\"\n                  (click)=\"add.emit()\"\n                  [disabled]=\"rows?.length >= maxRow || addDisabled\"\n                >\n                  <aui-icon icon=\"plus_circle\"></aui-icon>\n                  {{ 'add' | translate }}\n                </button>\n              </div>\n            }\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: ZeroStateComponent, selector: "acl-zero-state", inputs: ["resourceName", "resourceNameTranslated", "customPlaceholder", "zeroState", "fetching", "context", "minHeight"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: E2eAttributeBindingDirective, selector: "[click],[routerLink],a[href],[auiTooltip],[auiDropdown]" }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ArrayFormTableComponent, isStandalone: true, selector: "acl-array-form-table", inputs: { rowSeparator: "rowSeparator", rows: "rows", resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", readonly: "readonly", addDisabled: "addDisabled", actionColumnDivider: "actionColumnDivider", showZeroState: "showZeroState", showRowError: "showRowError", rowBackgroundColorFn: "rowBackgroundColorFn", minRow: "minRow", minRowTooltip: "minRowTooltip", maxRow: "maxRow", maxRowTooltip: "maxRowTooltip" }, outputs: { add: "add", remove: "remove" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ArrayFormTableHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "rowErrorTemplate", first: true, predicate: ArrayFormTableRowErrorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowControlTemplate", first: true, predicate: ArrayFormTableRowControlDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "footerTemplate", first: true, predicate: ArrayFormTableFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "zeroStateTemplate", first: true, predicate: ArrayFormTableZeroStateDirective, descendants: true, read: TemplateRef }, { propertyName: "separatorTemplate", first: true, predicate: ArrayFormTableRowSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "ngFormGroupDirective", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "rowTemplates", predicate: ArrayFormTableRowDirective, read: TemplateRef }], ngImport: i0, template: "<table\n  class=\"acl-array-form-table\"\n  [class.acl-array-form-table__readonly-mode]=\"readonly\"\n>\n  @if (headerTemplate) {\n    <thead>\n      <tr>\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        @if (!readonly && minRow !== maxRow) {\n          <th class=\"acl-array-form-table__action-col\"></th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (row of rows; track row; let index = $index) {\n      @for (\n        rowTemplate of rowTemplates;\n        track rowTemplate;\n        let templateIndex = $index\n      ) {\n        <tr\n          [class.acl-array-form-table__row-error]=\"\n            row | pure: shouldShowRowError | async\n          \"\n          [attr.rowtemplateindex]=\"templateIndex\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowTemplate;\n              context: { $implicit: row, index: index }\n            \"\n          ></ng-container>\n          @if (templateIndex === 0 && !readonly && minRow !== maxRow) {\n            <td\n              class=\"acl-array-form-table__action-col\"\n              [class.acl-array-form-table__action-col-divider]=\"\n                actionColumnDivider\n              \"\n            >\n              @if (rowControlTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowControlTemplate;\n                    context: { $implicit: row, index: index }\n                  \"\n                ></ng-container>\n              }\n              <div\n                [auiTooltip]=\"minRowTooltip\"\n                [auiTooltipDisabled]=\"rows?.length > minRow || !minRowTooltip\"\n              >\n                @if (!rowControlTemplate) {\n                  <button\n                    aui-button=\"text\"\n                    type=\"button\"\n                    [disabled]=\"rows?.length <= minRow\"\n                    [square]=\"true\"\n                    [plain]=\"true\"\n                    (click)=\"remove.emit(index)\"\n                  >\n                    <aui-icon icon=\"minus_circle\"></aui-icon>\n                  </button>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      }\n      @if (rowErrorTemplate && !readonly) {\n        <tr\n          [class.acl-array-form-table__row-error]=\"\n            row | pure: shouldShowRowError | async\n          \"\n          [hidden]=\"!(row | pure: shouldShowRowError | async)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowErrorTemplate;\n              context: { $implicit: row, index: index }\n            \"\n          ></ng-container>\n        </tr>\n      }\n      @if (\n        (rowSeparator || separatorTemplate) &&\n        rows?.length > 1 &&\n        index !== rows?.length - 1\n      ) {\n        <tr class=\"acl-array-form-table__separator\">\n          <td colspan=\"100\">\n            @if (separatorTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"separatorTemplate\"\n              ></ng-container>\n            } @else {\n              <div class=\"separator-spacer\"></div>\n            }\n          </td>\n        </tr>\n      }\n    }\n\n    @if ((!rows || rows.length === 0) && showZeroState) {\n      <tr>\n        <td\n          colspan=\"100\"\n          style=\"padding: unset\"\n        >\n          @if (!zeroStateTemplate) {\n            <acl-zero-state\n              [zeroState]=\"true\"\n              [resourceName]=\"resourceName\"\n              [resourceNameTranslated]=\"resourceNameTranslated\"\n              [minHeight]=\"48\"\n            ></acl-zero-state>\n          }\n          @if (zeroStateTemplate) {\n            <ng-container *ngTemplateOutlet=\"zeroStateTemplate\"></ng-container>\n          }\n        </td>\n      </tr>\n    }\n\n    @if (!readonly && minRow !== maxRow) {\n      <tr class=\"acl-array-form-table--row-action\">\n        <td colspan=\"100\">\n          <div class=\"acl-array-form-table__bottom-control-buttons\">\n            @if (footerTemplate) {\n              <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            }\n            @if (!footerTemplate) {\n              <div\n                class=\"add-button-wrapper\"\n                [auiTooltip]=\"maxRowTooltip\"\n                [auiTooltipDisabled]=\"rows?.length < maxRow || !maxRowTooltip\"\n              >\n                <button\n                  aui-button=\"primary\"\n                  type=\"button\"\n                  [plain]=\"true\"\n                  size=\"mini\"\n                  (click)=\"add.emit()\"\n                  [disabled]=\"rows?.length >= maxRow || addDisabled\"\n                >\n                  <aui-icon icon=\"plus_circle\"></aui-icon>\n                  {{ 'add' | translate }}\n                </button>\n              </div>\n            }\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host::ng-deep .acl-array-form-table{flex:1;width:100%;border-spacing:0;border:12px solid rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l);border-collapse:unset}:host::ng-deep .acl-array-form-table thead{background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table thead th,:host::ng-deep .acl-array-form-table thead td{line-height:20px;color:rgb(var(--aui-color-n-1));text-align:left;font-weight:500;padding:0 0 12px 8px}:host::ng-deep .acl-array-form-table thead th[required]:before,:host::ng-deep .acl-array-form-table thead td[required]:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:4px}:host::ng-deep .acl-array-form-table tbody>tr{background-color:rgb(var(--aui-color-n-10));border-radius:2px}:host::ng-deep .acl-array-form-table tbody>tr:first-child>td{border-top:unset}:host::ng-deep .acl-array-form-table tbody td{padding:8px 0 8px 8px;vertical-align:middle}:host::ng-deep .acl-array-form-table tbody td:last-child{padding:8px}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__row-error:not(:has(+.acl-array-form-table__row-error:empty)){background-color:rgb(var(--aui-color-r-6))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table--row-action td{padding:unset;border-bottom:unset;padding-bottom:unset;border-top:8px solid rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__separator td{padding:0;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table th.acl-array-form-table__action-col{min-width:48px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col{padding:8px;text-align:center;white-space:nowrap;vertical-align:middle;width:24px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .aui-button--text.isPlain{font-size:16px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .action-col__vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint{margin-top:-4px;border-top:none;padding-top:0;color:rgb(var(--aui-color-red));font-size:12px}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint acl-errors-mapper .acl-error-hint{margin-top:0}:host::ng-deep .acl-array-form-table__bottom-control-buttons{display:flex;width:100%;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{flex:1}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button--default{color:rgb(var(--aui-color-secondary-text))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]){background-color:rgb(var(--aui-color-n-10))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):hover{background-color:rgb(var(--aui-color-p-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):active{background-color:rgb(var(--aui-color-p-5))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button.aui-button--primary.isPlain[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{border-style:unset;font-size:14px;height:28px;border-radius:2px}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button aui-icon{font-size:16px}:host::ng-deep .acl-array-form-table__readonly-mode{border-radius:var(--aui-border-radius-l);border-collapse:separate}:host::ng-deep .acl-array-form-table__readonly-mode th .aui-checkbox,:host::ng-deep .acl-array-form-table__readonly-mode td .aui-checkbox{margin:unset}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td{padding:0 10px 12px;border-top:none}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:first-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:first-child{padding-left:20px}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:last-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:last-child{padding-right:20px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr{height:58px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td{padding:15px 10px;border:1px solid rgb(var(--aui-color-n-8));border-bottom-width:0}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:last-child){border-right:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:first-child){border-left:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:first-child{padding-left:19px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:last-child{padding:15px 19px 15px 10px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td{border-bottom-width:1px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:first-child{border-bottom-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:last-child{border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td{border-top:1px solid rgb(var(--aui-color-n-8))}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:first-child{border-top-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:last-child{border-top-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__action-col-divider{border-left:1px solid rgb(var(--aui-color-n-8))}.separator-spacer{height:8px}.add-button-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: ZeroStateComponent, selector: "acl-zero-state", inputs: ["resourceName", "resourceNameTranslated", "customPlaceholder", "zeroState", "fetching", "context", "minHeight"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: E2eAttributeBindingDirective, selector: "[click],[routerLink],a[href],[auiTooltip],[auiDropdown]" }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ArrayFormTableComponent, decorators: [{
             type: Component,
@@ -11539,7 +11599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         AsyncPipe,
                         TranslatePipe,
                         EFFECT_DIRECTIVE_MODULE,
-                    ], standalone: true, template: "<table\n  class=\"acl-array-form-table\"\n  [class.acl-array-form-table__readonly-mode]=\"readonly\"\n>\n  @if (headerTemplate) {\n    <thead>\n      <tr>\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        @if (!readonly && minRow !== maxRow) {\n          <th class=\"acl-array-form-table__action-col\"></th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (row of rows; track row; let index = $index) {\n      @for (\n        rowTemplate of rowTemplates;\n        track rowTemplate;\n        let templateIndex = $index\n      ) {\n        <tr\n          [class.acl-array-form-table__row-error]=\"\n            row | pure: shouldShowRowError | async\n          \"\n          [attr.rowtemplateindex]=\"templateIndex\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowTemplate;\n              context: { $implicit: row, index: index }\n            \"\n          ></ng-container>\n          @if (templateIndex === 0 && !readonly && minRow !== maxRow) {\n            <td\n              class=\"acl-array-form-table__action-col\"\n              [class.acl-array-form-table__action-col-divider]=\"\n                actionColumnDivider\n              \"\n            >\n              @if (rowControlTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowControlTemplate;\n                    context: { $implicit: row, index: index }\n                  \"\n                ></ng-container>\n              }\n              <div\n                [auiTooltip]=\"minRowTooltip\"\n                [auiTooltipDisabled]=\"rows?.length > minRow || !minRowTooltip\"\n              >\n                @if (!rowControlTemplate) {\n                  <button\n                    aui-button=\"text\"\n                    type=\"button\"\n                    [disabled]=\"rows?.length <= minRow\"\n                    [square]=\"true\"\n                    [plain]=\"true\"\n                    (click)=\"remove.emit(index)\"\n                  >\n                    <aui-icon icon=\"minus_circle\"></aui-icon>\n                  </button>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      }\n      @if (rowErrorTemplate && !readonly) {\n        <tr\n          [class.acl-array-form-table__row-error]=\"\n            row | pure: shouldShowRowError | async\n          \"\n          [hidden]=\"!(row | pure: shouldShowRowError | async)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowErrorTemplate;\n              context: { $implicit: row, index: index }\n            \"\n          ></ng-container>\n        </tr>\n      }\n      @if (\n        (rowSeparator || separatorTemplate) &&\n        rows?.length > 1 &&\n        index !== rows?.length - 1\n      ) {\n        <tr class=\"acl-array-form-table__separator\">\n          <td colspan=\"100\">\n            @if (separatorTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"separatorTemplate\"\n              ></ng-container>\n            } @else {\n              <div class=\"tw-h-[8px]\"></div>\n            }\n          </td>\n        </tr>\n      }\n    }\n\n    @if ((!rows || rows.length === 0) && showZeroState) {\n      <tr>\n        <td\n          colspan=\"100\"\n          style=\"padding: unset\"\n        >\n          @if (!zeroStateTemplate) {\n            <acl-zero-state\n              [zeroState]=\"true\"\n              [resourceName]=\"resourceName\"\n              [resourceNameTranslated]=\"resourceNameTranslated\"\n              [minHeight]=\"48\"\n            ></acl-zero-state>\n          }\n          @if (zeroStateTemplate) {\n            <ng-container *ngTemplateOutlet=\"zeroStateTemplate\"></ng-container>\n          }\n        </td>\n      </tr>\n    }\n\n    @if (!readonly && minRow !== maxRow) {\n      <tr class=\"acl-array-form-table--row-action\">\n        <td colspan=\"100\">\n          <div class=\"acl-array-form-table__bottom-control-buttons\">\n            @if (footerTemplate) {\n              <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            }\n            @if (!footerTemplate) {\n              <div\n                class=\"tw-flex tw-w-full\"\n                [auiTooltip]=\"maxRowTooltip\"\n                [auiTooltipDisabled]=\"rows?.length < maxRow || !maxRowTooltip\"\n              >\n                <button\n                  aui-button=\"primary\"\n                  type=\"button\"\n                  [plain]=\"true\"\n                  size=\"mini\"\n                  (click)=\"add.emit()\"\n                  [disabled]=\"rows?.length >= maxRow || addDisabled\"\n                >\n                  <aui-icon icon=\"plus_circle\"></aui-icon>\n                  {{ 'add' | translate }}\n                </button>\n              </div>\n            }\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+                    ], standalone: true, template: "<table\n  class=\"acl-array-form-table\"\n  [class.acl-array-form-table__readonly-mode]=\"readonly\"\n>\n  @if (headerTemplate) {\n    <thead>\n      <tr>\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        @if (!readonly && minRow !== maxRow) {\n          <th class=\"acl-array-form-table__action-col\"></th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (row of rows; track row; let index = $index) {\n      @for (\n        rowTemplate of rowTemplates;\n        track rowTemplate;\n        let templateIndex = $index\n      ) {\n        <tr\n          [class.acl-array-form-table__row-error]=\"\n            row | pure: shouldShowRowError | async\n          \"\n          [attr.rowtemplateindex]=\"templateIndex\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowTemplate;\n              context: { $implicit: row, index: index }\n            \"\n          ></ng-container>\n          @if (templateIndex === 0 && !readonly && minRow !== maxRow) {\n            <td\n              class=\"acl-array-form-table__action-col\"\n              [class.acl-array-form-table__action-col-divider]=\"\n                actionColumnDivider\n              \"\n            >\n              @if (rowControlTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowControlTemplate;\n                    context: { $implicit: row, index: index }\n                  \"\n                ></ng-container>\n              }\n              <div\n                [auiTooltip]=\"minRowTooltip\"\n                [auiTooltipDisabled]=\"rows?.length > minRow || !minRowTooltip\"\n              >\n                @if (!rowControlTemplate) {\n                  <button\n                    aui-button=\"text\"\n                    type=\"button\"\n                    [disabled]=\"rows?.length <= minRow\"\n                    [square]=\"true\"\n                    [plain]=\"true\"\n                    (click)=\"remove.emit(index)\"\n                  >\n                    <aui-icon icon=\"minus_circle\"></aui-icon>\n                  </button>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      }\n      @if (rowErrorTemplate && !readonly) {\n        <tr\n          [class.acl-array-form-table__row-error]=\"\n            row | pure: shouldShowRowError | async\n          \"\n          [hidden]=\"!(row | pure: shouldShowRowError | async)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowErrorTemplate;\n              context: { $implicit: row, index: index }\n            \"\n          ></ng-container>\n        </tr>\n      }\n      @if (\n        (rowSeparator || separatorTemplate) &&\n        rows?.length > 1 &&\n        index !== rows?.length - 1\n      ) {\n        <tr class=\"acl-array-form-table__separator\">\n          <td colspan=\"100\">\n            @if (separatorTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"separatorTemplate\"\n              ></ng-container>\n            } @else {\n              <div class=\"separator-spacer\"></div>\n            }\n          </td>\n        </tr>\n      }\n    }\n\n    @if ((!rows || rows.length === 0) && showZeroState) {\n      <tr>\n        <td\n          colspan=\"100\"\n          style=\"padding: unset\"\n        >\n          @if (!zeroStateTemplate) {\n            <acl-zero-state\n              [zeroState]=\"true\"\n              [resourceName]=\"resourceName\"\n              [resourceNameTranslated]=\"resourceNameTranslated\"\n              [minHeight]=\"48\"\n            ></acl-zero-state>\n          }\n          @if (zeroStateTemplate) {\n            <ng-container *ngTemplateOutlet=\"zeroStateTemplate\"></ng-container>\n          }\n        </td>\n      </tr>\n    }\n\n    @if (!readonly && minRow !== maxRow) {\n      <tr class=\"acl-array-form-table--row-action\">\n        <td colspan=\"100\">\n          <div class=\"acl-array-form-table__bottom-control-buttons\">\n            @if (footerTemplate) {\n              <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            }\n            @if (!footerTemplate) {\n              <div\n                class=\"add-button-wrapper\"\n                [auiTooltip]=\"maxRowTooltip\"\n                [auiTooltipDisabled]=\"rows?.length < maxRow || !maxRowTooltip\"\n              >\n                <button\n                  aui-button=\"primary\"\n                  type=\"button\"\n                  [plain]=\"true\"\n                  size=\"mini\"\n                  (click)=\"add.emit()\"\n                  [disabled]=\"rows?.length >= maxRow || addDisabled\"\n                >\n                  <aui-icon icon=\"plus_circle\"></aui-icon>\n                  {{ 'add' | translate }}\n                </button>\n              </div>\n            }\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host::ng-deep .acl-array-form-table{flex:1;width:100%;border-spacing:0;border:12px solid rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l);border-collapse:unset}:host::ng-deep .acl-array-form-table thead{background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table thead th,:host::ng-deep .acl-array-form-table thead td{line-height:20px;color:rgb(var(--aui-color-n-1));text-align:left;font-weight:500;padding:0 0 12px 8px}:host::ng-deep .acl-array-form-table thead th[required]:before,:host::ng-deep .acl-array-form-table thead td[required]:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:4px}:host::ng-deep .acl-array-form-table tbody>tr{background-color:rgb(var(--aui-color-n-10));border-radius:2px}:host::ng-deep .acl-array-form-table tbody>tr:first-child>td{border-top:unset}:host::ng-deep .acl-array-form-table tbody td{padding:8px 0 8px 8px;vertical-align:middle}:host::ng-deep .acl-array-form-table tbody td:last-child{padding:8px}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__row-error:not(:has(+.acl-array-form-table__row-error:empty)){background-color:rgb(var(--aui-color-r-6))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table--row-action td{padding:unset;border-bottom:unset;padding-bottom:unset;border-top:8px solid rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__separator td{padding:0;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table th.acl-array-form-table__action-col{min-width:48px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col{padding:8px;text-align:center;white-space:nowrap;vertical-align:middle;width:24px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .aui-button--text.isPlain{font-size:16px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .action-col__vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint{margin-top:-4px;border-top:none;padding-top:0;color:rgb(var(--aui-color-red));font-size:12px}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint acl-errors-mapper .acl-error-hint{margin-top:0}:host::ng-deep .acl-array-form-table__bottom-control-buttons{display:flex;width:100%;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{flex:1}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button--default{color:rgb(var(--aui-color-secondary-text))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]){background-color:rgb(var(--aui-color-n-10))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):hover{background-color:rgb(var(--aui-color-p-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):active{background-color:rgb(var(--aui-color-p-5))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button.aui-button--primary.isPlain[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{border-style:unset;font-size:14px;height:28px;border-radius:2px}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button aui-icon{font-size:16px}:host::ng-deep .acl-array-form-table__readonly-mode{border-radius:var(--aui-border-radius-l);border-collapse:separate}:host::ng-deep .acl-array-form-table__readonly-mode th .aui-checkbox,:host::ng-deep .acl-array-form-table__readonly-mode td .aui-checkbox{margin:unset}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td{padding:0 10px 12px;border-top:none}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:first-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:first-child{padding-left:20px}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:last-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:last-child{padding-right:20px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr{height:58px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td{padding:15px 10px;border:1px solid rgb(var(--aui-color-n-8));border-bottom-width:0}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:last-child){border-right:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:first-child){border-left:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:first-child{padding-left:19px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:last-child{padding:15px 19px 15px 10px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td{border-bottom-width:1px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:first-child{border-bottom-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:last-child{border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td{border-top:1px solid rgb(var(--aui-color-n-8))}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:first-child{border-top-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:last-child{border-top-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__action-col-divider{border-left:1px solid rgb(var(--aui-color-n-8))}.separator-spacer{height:8px}.add-button-wrapper{display:flex;width:100%}\n"] }]
         }], propDecorators: { headerTemplate: [{
                 type: ContentChild,
                 args: [ArrayFormTableHeaderDirective, {
@@ -11739,11 +11799,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             }] } });
 
 class UpdateKeyValueDialogComponent {
-    constructor(dialogRef, message, translate, data = {}) {
-        this.dialogRef = dialogRef;
-        this.message = message;
-        this.translate = translate;
-        this.data = data;
+    constructor() {
+        this.dialogRef = inject(DialogRef);
+        this.message = inject(MessageService);
+        this.translate = inject(TranslateService);
+        this.data = inject(DIALOG_DATA, {
+            optional: true,
+        }) ?? {};
         this.onUpdate$$ = new Subject();
         this.submitting$$ = new BehaviorSubject(false);
         this.destroy$$ = new Subject();
@@ -11782,7 +11844,7 @@ class UpdateKeyValueDialogComponent {
         this.destroy$$.next();
         this.destroy$$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UpdateKeyValueDialogComponent, deps: [{ token: i1.DialogRef }, { token: i1.MessageService }, { token: i2$1.TranslateService }, { token: DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UpdateKeyValueDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: UpdateKeyValueDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<aui-dialog-header>\n  {{ data.title || 'update' | translate }}\n</aui-dialog-header>\n<aui-dialog-content>\n  <form\n    #ngForm=\"ngForm\"\n    (ngSubmit)=\"ngForm.valid && onUpdate$$.next()\"\n  >\n    <acl-key-value-form-table\n      [(ngModel)]=\"keyValues\"\n      [readonlyKeys]=\"data.readonlyKeys\"\n      [validator]=\"data.validator\"\n      [errorMapper]=\"data.errorMapper\"\n      name=\"key-values\"\n    ></acl-key-value-form-table>\n  </form>\n</aui-dialog-content>\n<aui-dialog-footer>\n  <button\n    aui-button=\"primary\"\n    [loading]=\"submitting$$ | async\"\n    [disabled]=\"submitting$$ | async\"\n    (click)=\"ngForm.onSubmit(null)\"\n  >\n    {{ data.confirmButton || 'update' | translate }}\n  </button>\n  <button\n    aui-button\n    type=\"button\"\n    auiDialogClose\n  >\n    {{ 'cancel' | translate }}\n  </button>\n</aui-dialog-footer>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: i1.DialogFooterComponent, selector: "aui-dialog-footer" }, { kind: "directive", type: i1.DialogCloseDirective, selector: "[auiDialogClose]", inputs: ["auiDialogClose"], exportAs: ["auiDialogClose"] }, { kind: "component", type: KeyValueFormTableComponent, selector: "acl-key-value-form-table", inputs: ["resourceName", "resourceNameTranslated", "multiLineValue", "validator", "errorMapper", "placeholder", "readonly", "textKey", "maxRow", "minRow", "readonlyKeys", "zeroStateTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UpdateKeyValueDialogComponent, decorators: [{
@@ -11795,12 +11857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         ButtonComponent,
                         AsyncPipe,
                     ], template: "<aui-dialog-header>\n  {{ data.title || 'update' | translate }}\n</aui-dialog-header>\n<aui-dialog-content>\n  <form\n    #ngForm=\"ngForm\"\n    (ngSubmit)=\"ngForm.valid && onUpdate$$.next()\"\n  >\n    <acl-key-value-form-table\n      [(ngModel)]=\"keyValues\"\n      [readonlyKeys]=\"data.readonlyKeys\"\n      [validator]=\"data.validator\"\n      [errorMapper]=\"data.errorMapper\"\n      name=\"key-values\"\n    ></acl-key-value-form-table>\n  </form>\n</aui-dialog-content>\n<aui-dialog-footer>\n  <button\n    aui-button=\"primary\"\n    [loading]=\"submitting$$ | async\"\n    [disabled]=\"submitting$$ | async\"\n    (click)=\"ngForm.onSubmit(null)\"\n  >\n    {{ data.confirmButton || 'update' | translate }}\n  </button>\n  <button\n    aui-button\n    type=\"button\"\n    auiDialogClose\n  >\n    {{ 'cancel' | translate }}\n  </button>\n</aui-dialog-footer>\n" }]
-        }], ctorParameters: () => [{ type: i1.DialogRef }, { type: i1.MessageService }, { type: i2$1.TranslateService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DIALOG_DATA]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class K8sSharedUtilService extends K8sUtilService {
     constructor() {
@@ -12190,7 +12247,7 @@ class K8sResourceMarkComponent {
     >
       {{ mark() }}
     </aui-tag>
-  `, isInline: true, styles: [":host aui-tag{margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host aui-tag{margin-right:8px}:is() .aui-tag{min-width:24px;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: K8sResourceMarkComponent, decorators: [{
             type: Component,
@@ -12203,7 +12260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
     >
       {{ mark() }}
     </aui-tag>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host aui-tag{margin-right:8px}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host aui-tag{margin-right:8px}:is() .aui-tag{min-width:24px;justify-content:center}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], apiVersion: [{ type: i0.Input, args: [{ isSignal: true, alias: "apiVersion", required: false }] }], resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: false }] }] } });
@@ -12228,80 +12285,1379 @@ class CodeDisplayDialogComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CodeDisplayDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CodeDisplayDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<aui-dialog-header [divider]=\"false\">\n  <div [class.ellipsis-dialog-header]=\"data.ellipsis\">\n    <span [class.text-ellipsis]=\"data.ellipsis\">\n      {{ data.title || ('view_yaml' | translate) }}\n    </span>\n    @if (data.extra) {\n      <span class=\"extra\">{{ data.extra }}</span>\n    }\n  </div>\n</aui-dialog-header>\n<aui-dialog-content>\n  <aui-code-editor\n    style=\"display: block; height: 65vh\"\n    [ngModel]=\"data.code || ''\"\n    [options]=\"codeEditorOptions\"\n    [actionsConfig]=\"editorActions\"\n  ></aui-code-editor>\n</aui-dialog-content>\n", dependencies: [{ kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "ngmodule", type: CodeEditorModule }, { kind: "component", type: i2$3.CodeEditorComponent, selector: "aui-code-editor", inputs: ["options", "plain", "showLanguageLabel", "value", "originalValue", "actionsConfig", "previewMode", "diffMode", "modelUri"], outputs: ["editorChange", "editorBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CodeDisplayDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<aui-dialog-header [divider]=\"false\">\n  <div [class.ellipsis-dialog-header]=\"data.ellipsis\">\n    <span [class.text-ellipsis]=\"data.ellipsis\">\n      {{ data.title || ('view_yaml' | translate) }}\n    </span>\n    @if (data.extra) {\n      <span class=\"extra\">{{ data.extra }}</span>\n    }\n  </div>\n</aui-dialog-header>\n<aui-dialog-content>\n  <aui-code-editor\n    style=\"display: block; height: 65vh\"\n    [ngModel]=\"data.code || ''\"\n    [options]=\"codeEditorOptions\"\n    [actionsConfig]=\"editorActions\"\n  ></aui-code-editor>\n</aui-dialog-content>\n", dependencies: [{ kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: CodeEditorComponent, selector: "aui-code-editor", inputs: ["options", "plain", "showLanguageLabel", "value", "originalValue", "actionsConfig", "previewMode", "diffMode", "modelUri"], outputs: ["editorChange", "editorBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CodeDisplayDialogComponent, decorators: [{
             type: Component,
-            args: [{ preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [DIALOG_MODULE, CodeEditorModule, FormsModule, TranslatePipe], template: "<aui-dialog-header [divider]=\"false\">\n  <div [class.ellipsis-dialog-header]=\"data.ellipsis\">\n    <span [class.text-ellipsis]=\"data.ellipsis\">\n      {{ data.title || ('view_yaml' | translate) }}\n    </span>\n    @if (data.extra) {\n      <span class=\"extra\">{{ data.extra }}</span>\n    }\n  </div>\n</aui-dialog-header>\n<aui-dialog-content>\n  <aui-code-editor\n    style=\"display: block; height: 65vh\"\n    [ngModel]=\"data.code || ''\"\n    [options]=\"codeEditorOptions\"\n    [actionsConfig]=\"editorActions\"\n  ></aui-code-editor>\n</aui-dialog-content>\n" }]
+            args: [{ preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [DIALOG_MODULE, CodeEditorComponent, FormsModule, TranslatePipe], template: "<aui-dialog-header [divider]=\"false\">\n  <div [class.ellipsis-dialog-header]=\"data.ellipsis\">\n    <span [class.text-ellipsis]=\"data.ellipsis\">\n      {{ data.title || ('view_yaml' | translate) }}\n    </span>\n    @if (data.extra) {\n      <span class=\"extra\">{{ data.extra }}</span>\n    }\n  </div>\n</aui-dialog-header>\n<aui-dialog-content>\n  <aui-code-editor\n    style=\"display: block; height: 65vh\"\n    [ngModel]=\"data.code || ''\"\n    [options]=\"codeEditorOptions\"\n    [actionsConfig]=\"editorActions\"\n  ></aui-code-editor>\n</aui-dialog-content>\n" }]
         }], ctorParameters: () => [] });
 
-class ResourceYamlDisplayComponent {
-    constructor() {
-        this.concise$$ = new BehaviorSubject(false);
-        this.reduce$$ = new BehaviorSubject(true);
-        this.hasWrapper = true;
-        this.conciseEnable = true;
-        this.manageFieldActionEnable = true;
-        this.yamlUtil = inject(YamlUtilService);
-        this.yaml$ = combineLatest([
-            this.resource$,
-            this.concise$$,
-            this.reduce$$.pipe(distinctUntilChanged()),
-        ]).pipe(map(([resource, concise, reduce]) => this.yamlUtil.generateFilteredYamlResource(resource, concise, reduce)));
-        this.editorOptions = yamlReadOptions;
-        this.viewActions = viewActions;
-    }
-    conciseChange(value) {
-        this.concise$$.next(value);
-        if (value) {
-            this.reduce$$.next(true);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceYamlDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceYamlDisplayComponent, isStandalone: true, selector: "acl-resource-yaml-display", inputs: { hasWrapper: "hasWrapper", conciseEnable: "conciseEnable", manageFieldActionEnable: "manageFieldActionEnable", resource: "resource" }, ngImport: i0, template: "@if (hasWrapper) {\n  <aui-card>\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </aui-card>\n} @else {\n  <aui-code-editor\n    name=\"yaml\"\n    [ngModel]=\"yaml$ | async\"\n    [options]=\"editorOptions\"\n    [actionsConfig]=\"viewActions\"\n  >\n    <ng-container auiCodeEditorToolbarLeft>\n      @if (conciseEnable) {\n        <aui-checkbox\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"concise$$ | async\"\n          (ngModelChange)=\"conciseChange($event)\"\n        >\n          {{ 'preview_concise_yaml' | translate }}\n        </aui-checkbox>\n      }\n      @if (manageFieldActionEnable) {\n        <aui-checkbox\n          [hidden]=\"concise$$ | async\"\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"reduce$$ | async\"\n          (ngModelChange)=\"reduce$$.next($event)\"\n        >\n          {{ 'hide_manage_fields_field' | translate }}\n        </aui-checkbox>\n      }\n    </ng-container>\n  </aui-code-editor>\n}\n<ng-template #content>\n  <aui-code-editor\n    name=\"yaml\"\n    [ngModel]=\"yaml$ | async\"\n    [options]=\"editorOptions\"\n    [actionsConfig]=\"viewActions\"\n  >\n    <ng-container auiCodeEditorToolbarLeft>\n      @if (conciseEnable) {\n        <aui-checkbox\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"concise$$ | async\"\n          (ngModelChange)=\"conciseChange($event)\"\n        >\n          {{ 'preview_concise_yaml' | translate }}\n        </aui-checkbox>\n      }\n      @if (manageFieldActionEnable) {\n        <aui-checkbox\n          [hidden]=\"concise$$ | async\"\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"reduce$$ | async\"\n          (ngModelChange)=\"reduce$$.next($event)\"\n        >\n          {{ 'hide_manage_fields_field' | translate }}\n        </aui-checkbox>\n      }\n    </ng-container>\n  </aui-code-editor>\n</ng-template>\n", styles: [":host(:not(.dialog-content)) ::ng-deep .aui-code-editor{min-height:100%}:host(:not(.dialog-content)){display:block;height:calc(100vh - (var(--acl-page-header-height) + 44px) - 147px)}:host(:not(.dialog-content))>.aui-card{height:100%}:host(:not(.dialog-content))>.aui-card .aui-card__content,:host(:not(.dialog-content))>.aui-card aui-code-editor,:host(:not(.dialog-content))>.aui-card .aui-code-editor{height:100%;min-height:100%}:host{display:block}:host ::ng-deep aui-card,:host ::ng-deep .aui-card,:host ::ng-deep .aui-card__content{height:100%}:host ::ng-deep .aui-checkbox{margin-right:0}:host aui-code-editor{height:100%}\n"], dependencies: [{ kind: "component", type: i1.CardComponent, selector: "aui-card", inputs: ["divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.CheckboxComponent, selector: "aui-checkbox", inputs: ["name", "type", "label", "indeterminate"] }, { kind: "ngmodule", type: CodeEditorModule }, { kind: "component", type: i2$3.CodeEditorComponent, selector: "aui-code-editor", inputs: ["options", "plain", "showLanguageLabel", "value", "originalValue", "actionsConfig", "previewMode", "diffMode", "modelUri"], outputs: ["editorChange", "editorBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-__decorate([
-    ObservableInput(),
-    __metadata("design:type", Observable)
-], ResourceYamlDisplayComponent.prototype, "resource$", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceYamlDisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'acl-resource-yaml-display', preserveWhitespaces: false, standalone: true, imports: [
-                        CARD_MODULE,
-                        FormsModule,
-                        CHECKBOX_MODULE,
-                        CodeEditorModule,
-                        TranslatePipe,
-                        AsyncPipe,
-                        NgTemplateOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasWrapper) {\n  <aui-card>\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </aui-card>\n} @else {\n  <aui-code-editor\n    name=\"yaml\"\n    [ngModel]=\"yaml$ | async\"\n    [options]=\"editorOptions\"\n    [actionsConfig]=\"viewActions\"\n  >\n    <ng-container auiCodeEditorToolbarLeft>\n      @if (conciseEnable) {\n        <aui-checkbox\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"concise$$ | async\"\n          (ngModelChange)=\"conciseChange($event)\"\n        >\n          {{ 'preview_concise_yaml' | translate }}\n        </aui-checkbox>\n      }\n      @if (manageFieldActionEnable) {\n        <aui-checkbox\n          [hidden]=\"concise$$ | async\"\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"reduce$$ | async\"\n          (ngModelChange)=\"reduce$$.next($event)\"\n        >\n          {{ 'hide_manage_fields_field' | translate }}\n        </aui-checkbox>\n      }\n    </ng-container>\n  </aui-code-editor>\n}\n<ng-template #content>\n  <aui-code-editor\n    name=\"yaml\"\n    [ngModel]=\"yaml$ | async\"\n    [options]=\"editorOptions\"\n    [actionsConfig]=\"viewActions\"\n  >\n    <ng-container auiCodeEditorToolbarLeft>\n      @if (conciseEnable) {\n        <aui-checkbox\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"concise$$ | async\"\n          (ngModelChange)=\"conciseChange($event)\"\n        >\n          {{ 'preview_concise_yaml' | translate }}\n        </aui-checkbox>\n      }\n      @if (manageFieldActionEnable) {\n        <aui-checkbox\n          [hidden]=\"concise$$ | async\"\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"reduce$$ | async\"\n          (ngModelChange)=\"reduce$$.next($event)\"\n        >\n          {{ 'hide_manage_fields_field' | translate }}\n        </aui-checkbox>\n      }\n    </ng-container>\n  </aui-code-editor>\n</ng-template>\n", styles: [":host(:not(.dialog-content)) ::ng-deep .aui-code-editor{min-height:100%}:host(:not(.dialog-content)){display:block;height:calc(100vh - (var(--acl-page-header-height) + 44px) - 147px)}:host(:not(.dialog-content))>.aui-card{height:100%}:host(:not(.dialog-content))>.aui-card .aui-card__content,:host(:not(.dialog-content))>.aui-card aui-code-editor,:host(:not(.dialog-content))>.aui-card .aui-code-editor{height:100%;min-height:100%}:host{display:block}:host ::ng-deep aui-card,:host ::ng-deep .aui-card,:host ::ng-deep .aui-card__content{height:100%}:host ::ng-deep .aui-checkbox{margin-right:0}:host aui-code-editor{height:100%}\n"] }]
-        }], propDecorators: { hasWrapper: [{
-                type: Input
-            }], conciseEnable: [{
-                type: Input
-            }], manageFieldActionEnable: [{
-                type: Input
-            }], resource: [{
-                type: Input
-            }], resource$: [] } });
-
 /**
  * @packageDocumentation
  * @module code
  */
-class K8sYamlDisplayDialogComponent {
-    constructor() {
-        this.data = inject(DIALOG_DATA);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: K8sYamlDisplayDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: K8sYamlDisplayDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<aui-dialog-header [divider]=\"false\">\n  <div [class.ellipsis-dialog-header]=\"data.ellipsis\">\n    <span [class.text-ellipsis]=\"data.ellipsis\">\n      {{ data.title || ('view_yaml' | translate) }}\n    </span>\n    @if (data.extra) {\n      <span class=\"extra\">{{ data.extra }}</span>\n    }\n  </div>\n</aui-dialog-header>\n<aui-dialog-content>\n  <acl-resource-yaml-display\n    [resource]=\"data.resource\"\n    [hasWrapper]=\"false\"\n    class=\"dialog-content\"\n  ></acl-resource-yaml-display>\n</aui-dialog-content>\n", dependencies: [{ kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: ResourceYamlDisplayComponent, selector: "acl-resource-yaml-display", inputs: ["hasWrapper", "conciseEnable", "manageFieldActionEnable", "resource"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: K8sYamlDisplayDialogComponent, decorators: [{
-            type: Component,
-            args: [{ preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [DIALOG_MODULE, TranslatePipe, ResourceYamlDisplayComponent], template: "<aui-dialog-header [divider]=\"false\">\n  <div [class.ellipsis-dialog-header]=\"data.ellipsis\">\n    <span [class.text-ellipsis]=\"data.ellipsis\">\n      {{ data.title || ('view_yaml' | translate) }}\n    </span>\n    @if (data.extra) {\n      <span class=\"extra\">{{ data.extra }}</span>\n    }\n  </div>\n</aui-dialog-header>\n<aui-dialog-content>\n  <acl-resource-yaml-display\n    [resource]=\"data.resource\"\n    [hasWrapper]=\"false\"\n    class=\"dialog-content\"\n  ></acl-resource-yaml-display>\n</aui-dialog-content>\n" }]
-        }] });
-
-/**
+// for logs
+const logsReadOptions = {
+    wordWrap: 'on',
+    readOnly: true,
+    renderLineHighlight: 'none',
+};
+
+/**
+ * 自动折叠 managedFields 字段
+ * @param monacoEditor Monaco 编辑器实例
+ */
+function foldManagedFields(monacoEditor) {
+    if (!monacoEditor) {
+        return;
+    }
+    const model = monacoEditor.getModel();
+    if (!model) {
+        return;
+    }
+    try {
+        // 查找所有 managedFields 字段（只在 metadata 下的）
+        const managedFieldsMatches = model.findMatches('^(\\s+)managedFields:', false, true, false, null, true);
+        if (managedFieldsMatches && managedFieldsMatches.length > 0) {
+            const foldingRanges = [];
+            for (const match of managedFieldsMatches) {
+                const startLine = match.range.startLineNumber;
+                const endLine = findManagedFieldsEndLine(model, startLine);
+                if (endLine > startLine) {
+                    foldingRanges.push({
+                        startLineNumber: startLine,
+                        startColumn: 1,
+                        endLineNumber: endLine,
+                        endColumn: model.getLineMaxColumn(endLine),
+                    });
+                }
+            }
+            if (foldingRanges.length > 0) {
+                // 递归折叠每个 managedFields 区域，确保每次折叠完成后再进行下一次
+                foldRangesSequentially(monacoEditor, foldingRanges?.reverse(), 0);
+            }
+        }
+    }
+    catch (error) {
+        console.warn('Failed to fold managedFields:', error);
+    }
+}
+/**
+ * 递归折叠多个区域，确保每次折叠完成后再进行下一次
+ * @param monacoEditor Monaco 编辑器实例
+ * @param foldingRanges 折叠区域数组
+ * @param index 当前折叠的索引
+ */
+async function foldRangesSequentially(monacoEditor, foldingRanges, index) {
+    if (index >= foldingRanges.length) {
+        return;
+    }
+    const range = foldingRanges[index];
+    monacoEditor.setSelection(range);
+    await Promise.resolve(monacoEditor.getAction('editor.fold')?.run());
+    return foldRangesSequentially(monacoEditor, foldingRanges, index + 1);
+}
+/**
+ * 查找 managedFields 字段的结束行
+ * @param model Monaco 编辑器模型
+ * @param startLine 起始行号
+ * @returns 结束行号
+ */
+function findManagedFieldsEndLine(model, startLine) {
+    const totalLines = model.getLineCount();
+    const startIndent = getLineIndentation(model, startLine);
+    // 从下一行开始查找
+    for (let line = startLine + 1; line <= totalLines; line++) {
+        const lineContent = model.getLineContent(line).trim();
+        // 跳过空行
+        if (!lineContent) {
+            continue;
+        }
+        const currentIndent = getLineIndentation(model, line);
+        // 如果缩进小于等于起始行，说明 managedFields 字段结束
+        if (currentIndent <= startIndent) {
+            return line - 1;
+        }
+    }
+    return totalLines;
+}
+/**
+ * 获取行的缩进级别
+ * @param model Monaco 编辑器模型
+ * @param lineNumber 行号
+ * @returns 缩进级别（空格数）
+ */
+function getLineIndentation(model, lineNumber) {
+    const lineContent = model.getLineContent(lineNumber);
+    const match = lineContent.match(/^(\s*)/);
+    return match ? match[1].length : 0;
+}
+/**
+ * ManagedFields 自动折叠器
+ * 用于在内容变化时自动折叠 managedFields 字段
+ */
+class ManagedFieldsAutoFolder {
+    constructor() {
+        this.lastFoldedContent = '';
+    }
+    /**
+     * 开始监听内容变化并自动折叠
+     * @param editorProvider 编辑器实例提供者
+     * @param contentObservable 内容变化的 Observable
+     */
+    startAutoFold(editorProvider, contentObservable) {
+        this.stopAutoFold();
+        this.subscription = contentObservable.subscribe(() => {
+            setTimeout(() => {
+                const editor = editorProvider.getEditorInstance();
+                if (editor) {
+                    const model = editor.getModel();
+                    if (model) {
+                        const currentContent = model.getValue();
+                        // 只有当内容真正发生变化时才执行折叠
+                        if (currentContent.includes('managedFields:') &&
+                            currentContent !== this.lastFoldedContent) {
+                            foldManagedFields(editor);
+                            this.lastFoldedContent = currentContent;
+                        }
+                    }
+                }
+            }, 100);
+        });
+    }
+    /**
+     * 停止自动折叠
+     */
+    stopAutoFold() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = undefined;
+        }
+    }
+    /**
+     * 手动执行一次折叠
+     * @param editorProvider 编辑器实例提供者
+     */
+    foldOnce(editorProvider) {
+        const editor = editorProvider.getEditorInstance();
+        if (editor) {
+            foldManagedFields(editor);
+            const model = editor.getModel();
+            if (model) {
+                this.lastFoldedContent = model.getValue();
+            }
+        }
+    }
+}
+
+class ResourceYamlDisplayComponent {
+    constructor() {
+        this.destroy$ = new Subject();
+        this.concise$$ = new BehaviorSubject(false);
+        this.reduce$$ = new BehaviorSubject(false);
+        this.showSidebar$$ = new BehaviorSubject(false);
+        this.showDebugPanel$$ = new BehaviorSubject(false);
+        this.monacoEditor = null;
+        this.registeredSchemas = new Set();
+        this.pendingSchemas = new Set();
+        this.hasWrapper = true;
+        this.showDebugInfo = false;
+        this.conciseEnable = true;
+        this.manageFieldActionEnable = true;
+        this.sidebarEnable = true;
+        this.schemaEnable = true;
+        this.exampleEnable = true;
+        this.autoFoldManagedFields = true;
+        this.minimap = true;
+        this.yamlReadMinimapOptions = yamlReadMinimapOptions;
+        this.yamlReadOptions = yamlReadOptions;
+        this.hasFolded = false;
+        /**
+         * 自动获取的 schema，当没有手动提供 schema 时使用
+         */
+        this.autoSchema$ = this.resource$.pipe(switchMap(resource => {
+            if (!resource) {
+                return of(null);
+            }
+            const firstResource = (Array.isArray(resource) ? resource[0] : resource);
+            if (!firstResource?.apiVersion || !firstResource?.kind) {
+                return of(null);
+            }
+            return this.schemaService.getResourceSchema(firstResource.apiVersion, firstResource.kind, '');
+        }), shareReplay(1));
+        /**
+         * 最终使用的 schema，优先使用手动提供的，否则使用自动获取的
+         */
+        this.finalSchema$ = combineLatest([this.schema$, this.autoSchema$]).pipe(map(([manualSchema, autoSchema]) => manualSchema || autoSchema), distinctUntilChanged(), shareReplay(1));
+        this.yamlUtil = inject(YamlUtilService);
+        this.schemaService = inject(KubernetesSchemaService);
+        this.monacoLanguageService = inject(MonacoLanguageService);
+        this.yaml$ = combineLatest([
+            this.resource$,
+            this.concise$$,
+            this.reduce$$.pipe(distinctUntilChanged()),
+        ]).pipe(map(([resource, concise, reduce]) => this.yamlUtil.generateFilteredYamlResource(resource, concise, reduce)));
+        this.viewActions = viewActions;
+        this.yamlSchemaService = this.monacoLanguageService.getYamlSchemaService();
+        // 自动设置 schema
+        combineLatest([this.resource$, this.finalSchema$])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(([resource, schema]) => {
+            if (resource && schema) {
+                const firstResource = Array.isArray(resource)
+                    ? resource[0]
+                    : resource;
+                if (firstResource && !Array.isArray(firstResource)) {
+                    this.setYamlSchema(firstResource, schema);
+                }
+            }
+        });
+        this.autoSchema$.pipe(takeUntil(this.destroy$)).subscribe();
+    }
+    get editorOptions() {
+        return this.minimap ? yamlReadMinimapOptions : yamlReadOptions;
+    }
+    conciseChange(value) {
+        this.concise$$.next(value);
+    }
+    toggleSidebar() {
+        this.showSidebar$$.next(!this.showSidebar$$.value);
+    }
+    toggleDebugInfo() {
+        this.showDebugPanel$$.next(!this.showDebugPanel$$.value);
+    }
+    getCurrentResource() {
+        const resource = this.resource;
+        if (Array.isArray(resource)) {
+            return resource.length > 0 ? resource[0] : null;
+        }
+        return resource || null;
+    }
+    getCurrentSchema() {
+        return this.schema || null;
+    }
+    selfFoldManagedFields() {
+        if (this.hasFolded) {
+            return;
+        }
+        this.hasFolded = true;
+        setTimeout(() => {
+            const editor = this.getEditorInstance();
+            if (editor) {
+                foldManagedFields(editor);
+            }
+        }, 50);
+    }
+    /**
+     * 设置 YAML schema 以提供 hover 提示和自动完成
+     */
+    setYamlSchema(resource, schema) {
+        if (!schema) {
+            return;
+        }
+        // 使用 apiVersion + kind 组合作为标识
+        const apiVersion = resource?.apiVersion || 'unknown';
+        const kind = resource?.kind || 'unknown';
+        const schemaKey = `${apiVersion}/${kind}`;
+        this.modelUri = `${schemaKey}.yaml`;
+        this.selfFoldManagedFields();
+        // 检查是否已经注册过相同的 schema，避免重复注册
+        if (this.registeredSchemas.has(schemaKey) ||
+            this.pendingSchemas.has(schemaKey)) {
+            return;
+        }
+        this.pendingSchemas.add(schemaKey);
+        const registerSchema = (schemaToRegister) => {
+            this.yamlSchemaService.addSchema({
+                uri: `k8s://${schemaKey}.schema.json`,
+                fileMatch: [this.modelUri],
+                schema: schemaToRegister,
+            });
+            this.registeredSchemas.add(schemaKey);
+            this.pendingSchemas.delete(schemaKey);
+        };
+        const schemaDefinitions = schema?.definitions;
+        if (schemaDefinitions && Object.keys(schemaDefinitions).length > 0) {
+            registerSchema(schema);
+            return;
+        }
+        this.schemaService
+            .getAllResourceDefinitionsCached(this.clusterName)
+            .pipe(take(1), takeUntil(this.destroy$))
+            .subscribe(definitions => {
+            const fullSchema = {
+                ...schema,
+                definitions: definitions || schemaDefinitions || {},
+            };
+            registerSchema(fullSchema);
+        });
+    }
+    ngAfterViewInit() {
+        if (this.autoFoldManagedFields &&
+            this.schemaService.getOpenAPISchema(this.clusterName)) {
+            this.selfFoldManagedFields();
+        }
+    }
+    /**
+     * 获取 Monaco Editor 实例
+     */
+    getEditorInstance() {
+        if (this.codeEditorRef && !this.monacoEditor) {
+            // 尝试从 ViewChild 获取编辑器实例
+            const editorComponent = this.codeEditorRef;
+            if (editorComponent.editor) {
+                this.monacoEditor = editorComponent.editor;
+            }
+        }
+        return this.monacoEditor;
+    }
+    /**
+     * 自动折叠 managedFields 字段
+     */
+    foldManagedFields() {
+        const editor = this.getEditorInstance();
+        if (editor) {
+            foldManagedFields(editor);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.monacoEditor = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceYamlDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceYamlDisplayComponent, isStandalone: true, selector: "acl-resource-yaml-display", inputs: { hasWrapper: "hasWrapper", showDebugInfo: "showDebugInfo", conciseEnable: "conciseEnable", manageFieldActionEnable: "manageFieldActionEnable", sidebarEnable: "sidebarEnable", schemaEnable: "schemaEnable", exampleEnable: "exampleEnable", autoFoldManagedFields: "autoFoldManagedFields", schema: "schema", resource: "resource", minimap: "minimap", clusterName: "clusterName" }, viewQueries: [{ propertyName: "codeEditorRef", first: true, predicate: ["codeEditorRef"], descendants: true }], ngImport: i0, template: "@if (hasWrapper) {\n  <aui-card>\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </aui-card>\n} @else {\n  <aui-code-editor\n    name=\"yaml\"\n    [ngModel]=\"yaml$ | async\"\n    [options]=\"editorOptions\"\n    [actionsConfig]=\"viewActions\"\n  >\n    <ng-container auiCodeEditorToolbarLeft>\n      @if (conciseEnable) {\n        <aui-checkbox\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"concise$$ | async\"\n          (ngModelChange)=\"conciseChange($event)\"\n        >\n          {{ 'preview_concise_yaml' | translate }}\n        </aui-checkbox>\n      }\n      @if (manageFieldActionEnable) {\n        <aui-checkbox\n          [hidden]=\"concise$$ | async\"\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"reduce$$ | async\"\n          (ngModelChange)=\"reduce$$.next($event)\"\n        >\n          {{ 'hide_manage_fields_field' | translate }}\n        </aui-checkbox>\n      }\n    </ng-container>\n  </aui-code-editor>\n}\n<ng-template #content>\n  <aui-code-editor\n    name=\"yaml\"\n    [ngModel]=\"yaml$ | async\"\n    [options]=\"editorOptions\"\n    [actionsConfig]=\"viewActions\"\n  >\n    <ng-container auiCodeEditorToolbarLeft>\n      @if (conciseEnable) {\n        <aui-checkbox\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"concise$$ | async\"\n          (ngModelChange)=\"conciseChange($event)\"\n        >\n          {{ 'preview_concise_yaml' | translate }}\n        </aui-checkbox>\n      }\n      @if (manageFieldActionEnable) {\n        <aui-checkbox\n          [hidden]=\"concise$$ | async\"\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"reduce$$ | async\"\n          (ngModelChange)=\"reduce$$.next($event)\"\n        >\n          {{ 'hide_manage_fields_field' | translate }}\n        </aui-checkbox>\n      }\n    </ng-container>\n  </aui-code-editor>\n</ng-template>\n", styles: [":host(:not(.dialog-content)) ::ng-deep .aui-code-editor{min-height:100%}:host(:not(.dialog-content)){display:block;height:calc(100vh - (var(--acl-page-header-height) + 44px) - 147px)}:host(:not(.dialog-content))>.aui-card{height:100%}:host(:not(.dialog-content))>.aui-card .aui-card__content,:host(:not(.dialog-content))>.aui-card aui-code-editor,:host(:not(.dialog-content))>.aui-card .aui-code-editor{height:100%;min-height:100%}:host{display:block}:host ::ng-deep aui-card,:host ::ng-deep .aui-card,:host ::ng-deep .aui-card__content{height:100%}:host ::ng-deep .aui-checkbox{margin-right:0}:host aui-code-editor{height:100%}\n"], dependencies: [{ kind: "component", type: i1.CardComponent, selector: "aui-card", inputs: ["divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.CheckboxComponent, selector: "aui-checkbox", inputs: ["name", "type", "label", "indeterminate"] }, { kind: "component", type: CodeEditorComponent, selector: "aui-code-editor", inputs: ["options", "plain", "showLanguageLabel", "value", "originalValue", "actionsConfig", "previewMode", "diffMode", "modelUri"], outputs: ["editorChange", "editorBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], ResourceYamlDisplayComponent.prototype, "resource$", void 0);
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], ResourceYamlDisplayComponent.prototype, "schema$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceYamlDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-resource-yaml-display', preserveWhitespaces: false, standalone: true, imports: [
+                        CARD_MODULE,
+                        FormsModule,
+                        CHECKBOX_MODULE,
+                        CodeEditorComponent,
+                        TranslatePipe,
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasWrapper) {\n  <aui-card>\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </aui-card>\n} @else {\n  <aui-code-editor\n    name=\"yaml\"\n    [ngModel]=\"yaml$ | async\"\n    [options]=\"editorOptions\"\n    [actionsConfig]=\"viewActions\"\n  >\n    <ng-container auiCodeEditorToolbarLeft>\n      @if (conciseEnable) {\n        <aui-checkbox\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"concise$$ | async\"\n          (ngModelChange)=\"conciseChange($event)\"\n        >\n          {{ 'preview_concise_yaml' | translate }}\n        </aui-checkbox>\n      }\n      @if (manageFieldActionEnable) {\n        <aui-checkbox\n          [hidden]=\"concise$$ | async\"\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"reduce$$ | async\"\n          (ngModelChange)=\"reduce$$.next($event)\"\n        >\n          {{ 'hide_manage_fields_field' | translate }}\n        </aui-checkbox>\n      }\n    </ng-container>\n  </aui-code-editor>\n}\n<ng-template #content>\n  <aui-code-editor\n    name=\"yaml\"\n    [ngModel]=\"yaml$ | async\"\n    [options]=\"editorOptions\"\n    [actionsConfig]=\"viewActions\"\n  >\n    <ng-container auiCodeEditorToolbarLeft>\n      @if (conciseEnable) {\n        <aui-checkbox\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"concise$$ | async\"\n          (ngModelChange)=\"conciseChange($event)\"\n        >\n          {{ 'preview_concise_yaml' | translate }}\n        </aui-checkbox>\n      }\n      @if (manageFieldActionEnable) {\n        <aui-checkbox\n          [hidden]=\"concise$$ | async\"\n          class=\"aui-code-editor-toolbar__control-button\"\n          [ngModel]=\"reduce$$ | async\"\n          (ngModelChange)=\"reduce$$.next($event)\"\n        >\n          {{ 'hide_manage_fields_field' | translate }}\n        </aui-checkbox>\n      }\n    </ng-container>\n  </aui-code-editor>\n</ng-template>\n", styles: [":host(:not(.dialog-content)) ::ng-deep .aui-code-editor{min-height:100%}:host(:not(.dialog-content)){display:block;height:calc(100vh - (var(--acl-page-header-height) + 44px) - 147px)}:host(:not(.dialog-content))>.aui-card{height:100%}:host(:not(.dialog-content))>.aui-card .aui-card__content,:host(:not(.dialog-content))>.aui-card aui-code-editor,:host(:not(.dialog-content))>.aui-card .aui-code-editor{height:100%;min-height:100%}:host{display:block}:host ::ng-deep aui-card,:host ::ng-deep .aui-card,:host ::ng-deep .aui-card__content{height:100%}:host ::ng-deep .aui-checkbox{margin-right:0}:host aui-code-editor{height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { codeEditorRef: [{
+                type: ViewChild,
+                args: ['codeEditorRef']
+            }], hasWrapper: [{
+                type: Input
+            }], showDebugInfo: [{
+                type: Input
+            }], conciseEnable: [{
+                type: Input
+            }], manageFieldActionEnable: [{
+                type: Input
+            }], sidebarEnable: [{
+                type: Input
+            }], schemaEnable: [{
+                type: Input
+            }], exampleEnable: [{
+                type: Input
+            }], autoFoldManagedFields: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], resource: [{
+                type: Input
+            }], resource$: [], schema$: [], minimap: [{
+                type: Input
+            }], clusterName: [{
+                type: Input
+            }] } });
+
+class K8sYamlDisplayDialogComponent {
+    constructor() {
+        this.data = inject(DIALOG_DATA);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: K8sYamlDisplayDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: K8sYamlDisplayDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<aui-dialog-header [divider]=\"false\">\n  <div [class.ellipsis-dialog-header]=\"data.ellipsis\">\n    <span [class.text-ellipsis]=\"data.ellipsis\">\n      {{ data.title || ('view_yaml' | translate) }}\n    </span>\n    @if (data.extra) {\n      <span class=\"extra\">{{ data.extra }}</span>\n    }\n  </div>\n</aui-dialog-header>\n<aui-dialog-content>\n  <acl-resource-yaml-display\n    [resource]=\"data.resource\"\n    [hasWrapper]=\"false\"\n    [clusterName]=\"data.clusterName\"\n    class=\"dialog-content\"\n  ></acl-resource-yaml-display>\n</aui-dialog-content>\n", dependencies: [{ kind: "component", type: i1.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i1.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: ResourceYamlDisplayComponent, selector: "acl-resource-yaml-display", inputs: ["hasWrapper", "showDebugInfo", "conciseEnable", "manageFieldActionEnable", "sidebarEnable", "schemaEnable", "exampleEnable", "autoFoldManagedFields", "schema", "resource", "minimap", "clusterName"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: K8sYamlDisplayDialogComponent, decorators: [{
+            type: Component,
+            args: [{ preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [DIALOG_MODULE, TranslatePipe, ResourceYamlDisplayComponent], template: "<aui-dialog-header [divider]=\"false\">\n  <div [class.ellipsis-dialog-header]=\"data.ellipsis\">\n    <span [class.text-ellipsis]=\"data.ellipsis\">\n      {{ data.title || ('view_yaml' | translate) }}\n    </span>\n    @if (data.extra) {\n      <span class=\"extra\">{{ data.extra }}</span>\n    }\n  </div>\n</aui-dialog-header>\n<aui-dialog-content>\n  <acl-resource-yaml-display\n    [resource]=\"data.resource\"\n    [hasWrapper]=\"false\"\n    [clusterName]=\"data.clusterName\"\n    class=\"dialog-content\"\n  ></acl-resource-yaml-display>\n</aui-dialog-content>\n" }]
+        }] });
+
+/**
+ * Kubernetes 资源的内置 YAML 示例
+ * 按照 apiVersion.kind 的格式组织
+ */
+const BUILT_IN_YAML_EXAMPLES = {
+    'apps/v1.Deployment': [
+        {
+            title: 'Basic Deployment',
+            description: 'A basic deployment example with nginx container',
+            yaml: `apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: nginx
+  name: nginx-deployment
+  namespace: ''
+spec:
+  selector:
+    matchLabels:
+      app: nginx
+  template:
+    metadata:
+      labels:
+        app: nginx
+    spec:
+      containers:
+        - image: nginx:1.7.9
+          name: nginx
+          ports:
+            - containerPort: 80
+          securityContext:
+            allowPrivilegeEscalation: false
+            capabilities:
+              drop:
+                - ALL
+            runAsNonRoot: true
+            seccompProfile:
+              type: RuntimeDefault
+      securityContext:
+        runAsNonRoot: true
+        seccompProfile:
+          type: RuntimeDefault`,
+        },
+    ],
+    'v1.ConfigMap': [
+        {
+            title: 'Basic ConfigMap',
+            description: 'A basic ConfigMap example with properties and file data',
+            yaml: `apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: example
+  namespace: ''
+data:
+  example.property.1: hello
+  example.property.2: world
+  example.property.file: |-
+    property.1=value-1
+    property.2=value-2
+    property.3=value-3`,
+        },
+    ],
+    'batch/v1.CronJob': [
+        {
+            title: 'Basic CronJob',
+            description: 'A basic CronJob example that runs daily',
+            yaml: `apiVersion: batch/v1
+kind: CronJob
+metadata:
+  name: hello
+spec:
+  jobTemplate:
+    metadata:
+      labels:
+        cronjob.cpaas.io/name: hello
+    spec:
+      template:
+        metadata:
+          labels:
+            cronjob.cpaas.io/name: hello
+        spec:
+          containers:
+            - args:
+                - /bin/sh
+                - -c
+                - date; echo Hello from the Kubernetes cluster
+              image: busybox
+              name: hello
+              securityContext:
+                allowPrivilegeEscalation: false
+                capabilities:
+                  drop:
+                    - ALL
+                runAsNonRoot: true
+                seccompProfile:
+                  type: RuntimeDefault
+          securityContext:
+            runAsNonRoot: true
+            seccompProfile:
+              type: RuntimeDefault
+          restartPolicy: Never
+  schedule: "*/1 * * * *"`,
+        },
+    ],
+    'v1.PersistentVolume': [
+        {
+            title: 'Basic PersistentVolume',
+            description: 'A basic PersistentVolume example with NFS storage',
+            yaml: `apiVersion: v1
+kind: PersistentVolume
+metadata:
+  name: example
+  namespace: ''
+spec:
+  capacity:
+    storage: 5Gi
+  accessModes:
+    - ReadWriteOnce
+  persistentVolumeReclaimPolicy: Retain
+  storageClassName: slow
+  nfs:
+    path: /tmp
+    server: 172.17.0.2`,
+        },
+    ],
+    'autoscaling/v2.HorizontalPodAutoscaler': [
+        {
+            title: 'Basic HorizontalPodAutoscaler',
+            description: 'A basic HPA example with CPU utilization target',
+            yaml: `apiVersion: autoscaling/v2
+kind: HorizontalPodAutoscaler
+metadata:
+  name: example
+  namespace: ''
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: example
+  minReplicas: 1
+  maxReplicas: 3
+  metrics:
+  - type: Resource
+    resource:
+      name: cpu
+      target:
+        averageUtilization: 50
+        type: Utilization`,
+        },
+    ],
+    'apps/v1.DaemonSet': [
+        {
+            title: 'Basic DaemonSet',
+            description: 'A basic DaemonSet example with nginx container',
+            yaml: `apiVersion: apps/v1
+kind: DaemonSet
+metadata:
+  name: fluentd-elasticsearch
+  namespace: ''
+  labels:
+    k8s-app: fluentd-logging
+spec:
+  selector:
+    matchLabels:
+      name: fluentd-elasticsearch
+  template:
+    metadata:
+      labels:
+        name: fluentd-elasticsearch
+    spec:
+      tolerations:
+      - key: node-role.kubernetes.io/control-plane
+        operator: Exists
+        effect: NoSchedule
+      - key: node-role.kubernetes.io/master
+        operator: Exists
+        effect: NoSchedule
+      containers:
+      - name: fluentd-elasticsearch
+        image: quay.io/fluentd_elasticsearch/fluentd:v2.5.2
+        resources:
+          limits:
+            memory: 200Mi
+          requests:
+            cpu: 100m
+            memory: 200Mi
+        volumeMounts:
+        - name: varlog
+          mountPath: /var/log
+        securityContext:
+          allowPrivilegeEscalation: false
+          capabilities:
+            drop:
+              - ALL
+          runAsNonRoot: true
+          runAsUser: 1000
+          runAsGroup: 1000
+          seccompProfile:
+            type: RuntimeDefault
+      securityContext:
+        runAsNonRoot: true
+        seccompProfile:
+          type: RuntimeDefault
+      terminationGracePeriodSeconds: 30
+      volumes:
+      - name: varlog
+        emptyDir: {}`,
+        },
+    ],
+    'v1.PersistentVolumeClaim': [
+        {
+            title: 'Basic PersistentVolumeClaim',
+            description: 'A basic PVC example requesting 1Gi storage',
+            yaml: `apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: example
+  namespace:: ''
+spec:
+  accessModes:
+    - ReadWriteOnce
+  volumeMode: Filesystem
+  resources:
+    requests:
+      storage: 1Gi`,
+        },
+    ],
+    'v1.ResourceQuota': [
+        {
+            title: 'Compute ResourceQuota',
+            description: 'A ResourceQuota example for compute resources',
+            yaml: `apiVersion: v1
+kind: ResourceQuota
+metadata:
+  name: compute-quota
+  namespace: ''
+spec:
+  hard:
+    requests.cpu: '1'
+    requests.memory: 1Gi
+    limits.cpu: '2'
+    limits.memory: 2Gi`,
+        },
+        {
+            title: 'Storage Class ResourceQuota',
+            description: 'A ResourceQuota example for storage class specific quotas',
+            yaml: `apiVersion: v1
+kind: ResourceQuota
+metadata:
+  name: storage-class-quota
+  namespace: ''
+spec:
+  hard:
+    requests.storage: 100Gi
+    persistentvolumeclaims: '100'
+    # For quota specific to a storage class, the storage class must have the same name
+    gold.storage-class.kubernetes.io/requests.storage: 3Gi
+    gold.storage-class.kubernetes.io/persistentvolumeclaims: '5'
+    silver.storage-class.kubernetes.io/requests.storage: 2Gi
+    silver.storage-class.kubernetes.io/persistentvolumeclaims: '3'
+    bronze.storage-class.kubernetes.io/requests.storage: 1Gi
+    bronze.storage-class.kubernetes.io/persistentvolumeclaims: '1'`,
+        },
+        {
+            title: 'Object Counts ResourceQuota',
+            description: 'A ResourceQuota example for object count limits',
+            yaml: `apiVersion: v1
+kind: ResourceQuota
+metadata:
+  name: object-counts
+  namespace: ''
+spec:
+  hard:
+    configmaps: "10"
+    persistentvolumeclaims: "4"
+    replicationcontrollers: "20"
+    secrets: "10"
+    services: "10"
+    services.loadbalancers: "2"`,
+        },
+    ],
+    'v1.LimitRange': [
+        {
+            title: 'Memory LimitRange',
+            description: 'A LimitRange example for container memory limits',
+            yaml: `apiVersion: v1
+kind: LimitRange
+metadata:
+  name: mem-limit-range
+  namespace: ''
+spec:
+  limits:
+  - default:
+      memory: 512Mi
+    defaultRequest:
+      memory: 256Mi
+    type: Container`,
+        },
+    ],
+    'apps/v1.StatefulSet': [
+        {
+            title: 'Basic StatefulSet',
+            description: 'A basic StatefulSet example with persistent storage',
+            yaml: `apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: example
+  namespace: ''
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: httpd
+  serviceName: httpd
+  template:
+    metadata:
+      labels:
+        app: httpd
+    spec:
+      containers:
+        - image: nginx:1.7.9
+          name: httpd
+          ports:
+            - containerPort: 8080
+              name: web
+          volumeMounts:
+            - mountPath: /var/www/html
+              name: www
+          securityContext:
+            allowPrivilegeEscalation: false
+            capabilities:
+              drop:
+                - ALL
+            runAsNonRoot: true
+            seccompProfile:
+              type: RuntimeDefault
+      securityContext:
+        runAsNonRoot: true
+        seccompProfile:
+          type: RuntimeDefault
+      terminationGracePeriodSeconds: 10
+  volumeClaimTemplates:
+    - metadata:
+        name: www
+      spec:
+        accessModes:
+          - ReadWriteOnce
+        resources:
+          requests:
+            storage: 1Gi`,
+        },
+    ],
+    'storage.k8s.io/v1.StorageClass': [
+        {
+            title: 'Fast StorageClass',
+            description: 'Ceph fast storage class example',
+            yaml: `apiVersion: storage.k8s.io/v1
+kind: StorageClass
+metadata:
+  name: example
+  namespace: ''
+provisioner: my-provisioner
+reclaimPolicy: Delete
+`,
+        },
+    ],
+    'v1.Secret': [
+        {
+            title: 'Basic Secret',
+            description: 'A basic Secret example with username and password',
+            yaml: `apiVersion: v1
+kind: Secret
+metadata:
+  name: example
+  namespace: ''
+type: Opaque
+stringData:
+  username: admin
+  password: opensec`,
+        },
+    ],
+    'app.k8s.io/v1beta1.Application': [
+        {
+            title: 'Basic Application',
+            description: 'A basic Application example with Deployment and Service',
+            yaml: `apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: nginx
+  name: nginx-deployment
+  namespace: ''
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: nginx
+  template:
+    metadata:
+      labels:
+        app: nginx
+    spec:
+      containers:
+        - image: nginx:1.7.9
+          name: nginx
+          ports:
+            - containerPort: 80
+          securityContext:
+            allowPrivilegeEscalation: false
+            capabilities:
+              drop:
+                - ALL
+            runAsNonRoot: true
+            seccompProfile:
+              type: RuntimeDefault
+      securityContext:
+        runAsNonRoot: true
+        seccompProfile:
+          type: RuntimeDefault
+---
+apiVersion: v1
+kind: Service
+metadata:
+  labels:
+    app: nginx
+  name: nginx
+spec:
+  ports:
+    - port: 80
+      protocol: TCP
+      targetPort: 80
+  selector:
+    app: nginx
+  type: ClusterIP`,
+        },
+    ],
+};
+
+class ResourceYamlSidebarComponent {
+    constructor() {
+        this.close = new EventEmitter();
+        this.tryYaml = new EventEmitter();
+        this.schemaEnable = true;
+        this.exampleEnable = true;
+        this.DEFINITIONS_PREFIX = '#/definitions/';
+        this.path = [];
+        this.examples = [];
+        this.hasSchema = false;
+        this.hasExamples = false;
+        this.http = inject(HttpClient);
+        this.cdr = inject(ChangeDetectorRef);
+        this.host = inject((ElementRef));
+    }
+    ngOnInit() {
+        this.refresh();
+        this.loadExamples();
+    }
+    ngOnChanges(changes) {
+        if (changes.schema || changes.resource) {
+            this.refresh();
+            this.loadExamples();
+        }
+    }
+    refresh() {
+        if (this.schema) {
+            this.currentSchema = this.schema;
+            this.currentSchemaDescription = this.schema.description;
+            this.properties = this.schema.properties || {};
+            this.path = [];
+            this.hasSchema = true;
+        }
+        else {
+            this.hasSchema = false;
+        }
+        if (this.resource) {
+            this.resourceKind = this.resource.kind || 'Resource';
+        }
+    }
+    loadExamples() {
+        if (!this.resource) {
+            this.examples = [];
+            this.hasExamples = false;
+            this.cdr.markForCheck();
+            return;
+        }
+        const resourceKey = `${this.resource.apiVersion}.${this.resource.kind}`;
+        const builtInExamples = BUILT_IN_YAML_EXAMPLES[resourceKey] || [];
+        // 加载 ConsoleYAMLSample CRD 中的示例
+        this.loadConsoleYAMLSamples().subscribe({
+            next: crdExamples => {
+                this.examples = [
+                    ...builtInExamples,
+                    ...(this.extraExamples || []),
+                    ...crdExamples,
+                ];
+                this.hasExamples = this.examples.length > 0;
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                // 如果加载 CRD 示例失败，只使用内置示例
+                this.examples = builtInExamples;
+                this.hasExamples = this.examples.length > 0;
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    loadConsoleYAMLSamples() {
+        if (!this.resource) {
+            return of([]);
+        }
+        // 构建查询 ConsoleYAMLSample 的 API 路径
+        const apiPath = '{{API_GATEWAY}}/kubernetes/business-1/apis/console.alauda.io/v1/consoleyamlsamples';
+        return this.http.get(apiPath).pipe(map(response => {
+            return response.items
+                .filter(sample => {
+                const target = sample.spec.targetResource;
+                return (target.apiVersion === this.resource.apiVersion &&
+                    target.kind === this.resource.kind);
+            })
+                .map(sample => ({
+                title: sample.spec.title,
+                description: sample.spec.description,
+                yaml: sample.spec.yaml,
+                snippet: sample.spec.snippet,
+            }));
+        }), catchError(() => of([])));
+    }
+    drillDownToProperty(name) {
+        const property = this.currentSchema.properties?.[name];
+        if (property) {
+            this.currentSchemaDescription = property.description;
+            let targetSchema = null;
+            // 处理 $ref 引用
+            if (property.$ref || property.items?.$ref) {
+                const ref = property.$ref || property.items?.$ref;
+                if (ref.startsWith(this.DEFINITIONS_PREFIX)) {
+                    // const definitionName = ref.replace(this.DEFINITIONS_PREFIX, '');
+                    // 从根 schema 的 definitions 中获取定义
+                    // todo: 书勋
+                    // const rootDefinitions = this.schemaService.definitions;
+                    // targetSchema = rootDefinitions?.[definitionName] || null;
+                }
+            }
+            // 处理普通的嵌套属性
+            else if (property.properties || property.items?.properties) {
+                targetSchema = property.items?.properties ? property.items : property;
+            }
+            if (targetSchema) {
+                this.currentSchema = targetSchema;
+                this.path.push(name);
+                this.properties = targetSchema.properties || {};
+                this.scrollTop();
+            }
+        }
+    }
+    navigateToPath(index) {
+        const targetPath = this.path.slice(0, index + 1);
+        this.path = [...targetPath];
+        let currentObj = this.schema;
+        for (const pathSegment of targetPath) {
+            const property = currentObj.properties?.[pathSegment];
+            if (property) {
+                this.currentSchemaDescription = property.description;
+                // 处理 $ref 引用
+                if (property.$ref || property.items?.$ref) {
+                    const ref = property.$ref || property.items?.$ref;
+                    if (ref.startsWith(this.DEFINITIONS_PREFIX)) {
+                        // const definitionName = ref.replace(this.DEFINITIONS_PREFIX, '');
+                        // todo: 书勋
+                        // const rootDefinitions = this.schemaService.definitions;
+                        // const definition = rootDefinitions?.[definitionName];
+                        // if (definition) {
+                        //   currentObj = definition;
+                        // }
+                    }
+                }
+                // 处理普通的嵌套属性
+                else {
+                    currentObj = property.items?.properties ? property.items : property;
+                }
+            }
+        }
+        this.currentSchema = currentObj;
+        this.properties = currentObj.properties || {};
+    }
+    /**
+     * 检查属性是否有 $ref 引用或嵌套属性
+     */
+    hasViewableContent(property) {
+        return (
+        // 有 properties 的对象
+        (property.type === 'object' &&
+            property.properties &&
+            Object.keys(property.properties).length > 0) ||
+            // 有 properties 的数组项
+            (property.type === 'array' &&
+                property.items &&
+                typeof property.items === 'object' &&
+                property.items.properties &&
+                Object.keys(property.items.properties || {})
+                    .length > 0) ||
+            // 有 $ref 引用
+            !!property.$ref ||
+            !!property?.items?.$ref);
+    }
+    // Examples 相关方法
+    tryExample(example) {
+        // 触发事件，让父组件处理 try it 功能，将 YAML 内容发送给父组件
+        this.tryYaml.emit(example.yaml);
+    }
+    downloadYaml(example) {
+        const blob = new Blob([example.yaml], { type: 'text/yaml' });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${example.title.toLowerCase().replace(/\s+/g, '-')}.yaml`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+    // 处理描述中的链接
+    processDescription(description) {
+        if (!description)
+            return '';
+        // 将 URL 转换为可点击的链接
+        const urlRegex = /(https?:\/\/[^\s]+)/g;
+        return description
+            .replace(urlRegex, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>')
+            .replace(/\n/g, '<br>'); // 保留换行符
+    }
+    scrollTop() {
+        this.host.nativeElement.scrollTo({
+            top: 0,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceYamlSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceYamlSidebarComponent, isStandalone: true, selector: "acl-resource-yaml-sidebar", inputs: { resource: "resource", schema: "schema", schemaEnable: "schemaEnable", exampleEnable: "exampleEnable", extraExamples: "extraExamples" }, outputs: { close: "close", tryYaml: "tryYaml" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"schema-header\">\n  <span>{{ resourceKind }}</span>\n  <aui-icon\n    icon=\"xmark\"\n    (click)=\"close.next()\"\n  ></aui-icon>\n</div>\n<aui-tab-group type=\"card\">\n  @if (schemaEnable && hasSchema) {\n    <aui-tab>\n      <ng-container *auiTabLabel> Schema </ng-container>\n      <ng-container *auiTabContent>\n        @if (schema) {\n          <div class=\"schema-content\">\n            <div class=\"schema-path\">\n              @if (path.length) {\n                <a\n                  href=\"javascript:\"\n                  (click)=\"refresh()\"\n                  >{{ resourceKind }}</a\n                >\n              }\n              @for (p of path; track p; let i = $index; let isLast = $last) {\n                @if (!isLast) {\n                  <span class=\"path-mark\">></span>\n                  <a\n                    href=\"javascript:\"\n                    (click)=\"navigateToPath(i)\"\n                    >{{ p }}</a\n                  >\n                }\n                @if (isLast) {\n                  <span class=\"path-mark\">></span>\n                  <span>{{ p }}</span>\n                }\n              }\n            </div>\n            @if (currentSchemaDescription) {\n              <div\n                class=\"schema-desc\"\n                [innerHTML]=\"\n                  currentSchemaDescription\n                    | aclParseJsonTranslate\n                    | pure: processDescription\n                \"\n              ></div>\n            }\n            <div class=\"schema-list\">\n              @for (item of properties | keyvalue; track item) {\n                <div class=\"schema-item\">\n                  <h3>\n                    <span>{{ item.key }}</span>\n                    <span class=\"obj-type\">{{ item.value.type }}</span>\n                  </h3>\n                  <p\n                    [innerHTML]=\"\n                      item.value.description | pure: processDescription\n                    \"\n                  ></p>\n                  @if (item.value | pure: hasViewableContent) {\n                    <p>\n                      <a\n                        href=\"javascript:\"\n                        (click)=\"drillDownToProperty(item.key)\"\n                      >\n                        {{ 'view_detail' | translate }}\n                      </a>\n                    </p>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </ng-container>\n    </aui-tab>\n  }\n  @if (exampleEnable && hasExamples) {\n    <aui-tab>\n      <ng-container *auiTabLabel> Examples </ng-container>\n      <ng-container *auiTabContent>\n        <div class=\"example-list\">\n          @for (example of examples; track example; let i = $index) {\n            <div class=\"example-item\">\n              <h3>\n                {{ i + 1 }}. <span>{{ example.title }}</span>\n              </h3>\n              <p\n                [innerHTML]=\"example.description | pure: processDescription\"\n              ></p>\n              <p class=\"example-actions\">\n                <a\n                  href=\"javascript:\"\n                  (click)=\"tryExample(example)\"\n                >\n                  <aui-icon\n                    icon=\"arrow_turn_up\"\n                    size=\"14\"\n                    margin=\"right\"\n                  ></aui-icon>\n                  <span>Try it</span>\n                </a>\n                <a\n                  href=\"javascript:\"\n                  (click)=\"downloadYaml(example)\"\n                >\n                  <aui-icon\n                    icon=\"download\"\n                    size=\"14\"\n                    margin=\"right\"\n                  ></aui-icon>\n                  <span>Download YAML</span>\n                </a>\n              </p>\n            </div>\n          }\n        </div>\n      </ng-container>\n    </aui-tab>\n  }\n</aui-tab-group>\n", styles: [":host{display:block;box-sizing:border-box;min-width:360px;padding:16px;background-color:rgb(var(--aui-color-n-10));box-shadow:0 0 4px rgba(var(--aui-color-n-1),.16);margin-left:12px;overflow-y:scroll}:host::-webkit-scrollbar{width:8px;height:4px}:host::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}:host::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}:host::-webkit-scrollbar-corner{background-color:transparent}aui-tab-group{display:block;margin-top:5px}.schema-header{height:40px;display:flex;justify-content:space-between;align-items:center;font-size:18px}.schema-header aui-icon{font-size:16px;color:rgb(var(--aui-color-n-6));cursor:pointer}.schema-header aui-icon:hover{color:rgb(var(--aui-color-primary))}.schema-content{line-height:20px;overflow-y:auto;height:calc(100% - 40px)}.schema-content::-webkit-scrollbar{width:8px;height:4px}.schema-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.schema-content::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.schema-content::-webkit-scrollbar-corner{background-color:transparent}.schema-desc{margin-bottom:12px}.schema-desc a{color:#007bff;text-decoration:none}.schema-desc a:hover{text-decoration:underline}.schema-path{display:flex;flex-wrap:wrap}.schema-path *{margin-left:2px;word-break:break-all}.schema-path span:first-child{margin-right:2px}.schema-path .path-mark{margin:0 4px;color:rgb(var(--aui-color-n-6))}.schema-path{margin-bottom:12px}.schema-list .schema-item:not(:last-of-type),.schema-list .example-item:not(:last-of-type),.example-list .schema-item:not(:last-of-type),.example-list .example-item:not(:last-of-type){border-bottom:1px solid rgb(var(--aui-color-border));margin-bottom:12px}.schema-list .schema-item,.schema-list .example-item,.example-list .schema-item,.example-list .example-item{padding-left:16px}.schema-list .schema-item h3:before,.example-list .schema-item h3:before{content:\"\";display:block;width:6px;height:6px;border-radius:50%;background-color:rgb(var(--aui-color-n-6));position:absolute;left:-12px;top:8px}.schema-list .example-actions,.example-list .example-actions{display:flex;justify-content:space-between}.schema-list h3,.example-list h3{position:relative;font-weight:500;margin-bottom:12px;word-break:break-word}.schema-list h3 span,.example-list h3 span{margin-right:4px}.schema-list h3 .obj-type,.example-list h3 .obj-type{color:rgb(var(--aui-color-n-4))}.schema-list p,.example-list p{margin-bottom:12px;word-break:break-word}.schema-list p a,.example-list p a{color:#007bff;text-decoration:none}.schema-list p a:hover,.example-list p a:hover{text-decoration:underline}.schema-examples{padding:16px}.examples-header{margin-bottom:16px}.examples-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.examples-content .examples-list .example-item{margin-bottom:24px;border:1px solid #e1e5e9;border-radius:6px;overflow:hidden}.examples-content .examples-list .example-item:last-child{margin-bottom:0}.examples-content .examples-list .example-item .example-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:#f8f9fa;border-bottom:1px solid #e1e5e9}.examples-content .examples-list .example-item .example-header .example-title{margin:0;font-size:16px;font-weight:600;color:#333}.examples-content .examples-list .example-item .example-header .example-actions{display:flex;gap:8px}.examples-content .examples-list .example-item .example-header .example-actions .btn{padding:4px 12px;font-size:12px;border-radius:4px;cursor:pointer;transition:all .2s ease}.examples-content .examples-list .example-item .example-header .example-actions .btn.btn-outline-primary{color:#007bff;border:1px solid #007bff;background-color:transparent}.examples-content .examples-list .example-item .example-header .example-actions .btn.btn-outline-primary:hover{color:#fff;background-color:#007bff}.examples-content .examples-list .example-item .example-header .example-actions .btn.btn-outline-secondary{color:#6c757d;border:1px solid #6c757d;background-color:transparent}.examples-content .examples-list .example-item .example-header .example-actions .btn.btn-outline-secondary:hover{color:#fff;background-color:#6c757d}.examples-content .examples-list .example-item .example-header .example-list .example-item .example-actions{display:flex;justify-content:space-between}.examples-content .examples-list .example-item .example-description{padding:12px 16px;color:#666;font-size:14px;line-height:1.5;border-bottom:1px solid #e1e5e9}.examples-content .examples-list .example-item .example-description a{color:#007bff;text-decoration:none}.examples-content .examples-list .example-item .example-description a:hover{text-decoration:underline}.examples-content .examples-list .example-item .example-yaml{background-color:#f8f9fa}.examples-content .examples-list .example-item .example-yaml pre{margin:0;padding:16px;background-color:transparent;border:none;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.4;color:#333;overflow-x:auto}.examples-content .examples-list .example-item .example-yaml pre code{background-color:transparent;padding:0;color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1.TabGroupComponent, selector: "aui-tab-group", inputs: ["selectedIndex", "tab", "type", "title", "size", "lazy"], outputs: ["selectedIndexChange", "tabChange", "selectedTabChange", "focusChange"], exportAs: ["auiTabGroup"] }, { kind: "component", type: i1.TabComponent, selector: "aui-tab", inputs: ["name", "label", "closeable", "disabled"], outputs: ["close"], exportAs: ["auiTab"] }, { kind: "directive", type: i1.TabLabelDirective, selector: "[auiTabLabel]" }, { kind: "directive", type: i1.TabContentDirective, selector: "[auiTabContent]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: ParseJsonTranslatePipe, name: "aclParseJsonTranslate" }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceYamlSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-resource-yaml-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        TranslatePipe,
+                        KeyValuePipe,
+                        ParseJsonTranslatePipe,
+                        IconModule,
+                        TabsModule,
+                        ButtonModule,
+                        PurePipe,
+                    ], template: "<div class=\"schema-header\">\n  <span>{{ resourceKind }}</span>\n  <aui-icon\n    icon=\"xmark\"\n    (click)=\"close.next()\"\n  ></aui-icon>\n</div>\n<aui-tab-group type=\"card\">\n  @if (schemaEnable && hasSchema) {\n    <aui-tab>\n      <ng-container *auiTabLabel> Schema </ng-container>\n      <ng-container *auiTabContent>\n        @if (schema) {\n          <div class=\"schema-content\">\n            <div class=\"schema-path\">\n              @if (path.length) {\n                <a\n                  href=\"javascript:\"\n                  (click)=\"refresh()\"\n                  >{{ resourceKind }}</a\n                >\n              }\n              @for (p of path; track p; let i = $index; let isLast = $last) {\n                @if (!isLast) {\n                  <span class=\"path-mark\">></span>\n                  <a\n                    href=\"javascript:\"\n                    (click)=\"navigateToPath(i)\"\n                    >{{ p }}</a\n                  >\n                }\n                @if (isLast) {\n                  <span class=\"path-mark\">></span>\n                  <span>{{ p }}</span>\n                }\n              }\n            </div>\n            @if (currentSchemaDescription) {\n              <div\n                class=\"schema-desc\"\n                [innerHTML]=\"\n                  currentSchemaDescription\n                    | aclParseJsonTranslate\n                    | pure: processDescription\n                \"\n              ></div>\n            }\n            <div class=\"schema-list\">\n              @for (item of properties | keyvalue; track item) {\n                <div class=\"schema-item\">\n                  <h3>\n                    <span>{{ item.key }}</span>\n                    <span class=\"obj-type\">{{ item.value.type }}</span>\n                  </h3>\n                  <p\n                    [innerHTML]=\"\n                      item.value.description | pure: processDescription\n                    \"\n                  ></p>\n                  @if (item.value | pure: hasViewableContent) {\n                    <p>\n                      <a\n                        href=\"javascript:\"\n                        (click)=\"drillDownToProperty(item.key)\"\n                      >\n                        {{ 'view_detail' | translate }}\n                      </a>\n                    </p>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </ng-container>\n    </aui-tab>\n  }\n  @if (exampleEnable && hasExamples) {\n    <aui-tab>\n      <ng-container *auiTabLabel> Examples </ng-container>\n      <ng-container *auiTabContent>\n        <div class=\"example-list\">\n          @for (example of examples; track example; let i = $index) {\n            <div class=\"example-item\">\n              <h3>\n                {{ i + 1 }}. <span>{{ example.title }}</span>\n              </h3>\n              <p\n                [innerHTML]=\"example.description | pure: processDescription\"\n              ></p>\n              <p class=\"example-actions\">\n                <a\n                  href=\"javascript:\"\n                  (click)=\"tryExample(example)\"\n                >\n                  <aui-icon\n                    icon=\"arrow_turn_up\"\n                    size=\"14\"\n                    margin=\"right\"\n                  ></aui-icon>\n                  <span>Try it</span>\n                </a>\n                <a\n                  href=\"javascript:\"\n                  (click)=\"downloadYaml(example)\"\n                >\n                  <aui-icon\n                    icon=\"download\"\n                    size=\"14\"\n                    margin=\"right\"\n                  ></aui-icon>\n                  <span>Download YAML</span>\n                </a>\n              </p>\n            </div>\n          }\n        </div>\n      </ng-container>\n    </aui-tab>\n  }\n</aui-tab-group>\n", styles: [":host{display:block;box-sizing:border-box;min-width:360px;padding:16px;background-color:rgb(var(--aui-color-n-10));box-shadow:0 0 4px rgba(var(--aui-color-n-1),.16);margin-left:12px;overflow-y:scroll}:host::-webkit-scrollbar{width:8px;height:4px}:host::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}:host::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}:host::-webkit-scrollbar-corner{background-color:transparent}aui-tab-group{display:block;margin-top:5px}.schema-header{height:40px;display:flex;justify-content:space-between;align-items:center;font-size:18px}.schema-header aui-icon{font-size:16px;color:rgb(var(--aui-color-n-6));cursor:pointer}.schema-header aui-icon:hover{color:rgb(var(--aui-color-primary))}.schema-content{line-height:20px;overflow-y:auto;height:calc(100% - 40px)}.schema-content::-webkit-scrollbar{width:8px;height:4px}.schema-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.schema-content::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.schema-content::-webkit-scrollbar-corner{background-color:transparent}.schema-desc{margin-bottom:12px}.schema-desc a{color:#007bff;text-decoration:none}.schema-desc a:hover{text-decoration:underline}.schema-path{display:flex;flex-wrap:wrap}.schema-path *{margin-left:2px;word-break:break-all}.schema-path span:first-child{margin-right:2px}.schema-path .path-mark{margin:0 4px;color:rgb(var(--aui-color-n-6))}.schema-path{margin-bottom:12px}.schema-list .schema-item:not(:last-of-type),.schema-list .example-item:not(:last-of-type),.example-list .schema-item:not(:last-of-type),.example-list .example-item:not(:last-of-type){border-bottom:1px solid rgb(var(--aui-color-border));margin-bottom:12px}.schema-list .schema-item,.schema-list .example-item,.example-list .schema-item,.example-list .example-item{padding-left:16px}.schema-list .schema-item h3:before,.example-list .schema-item h3:before{content:\"\";display:block;width:6px;height:6px;border-radius:50%;background-color:rgb(var(--aui-color-n-6));position:absolute;left:-12px;top:8px}.schema-list .example-actions,.example-list .example-actions{display:flex;justify-content:space-between}.schema-list h3,.example-list h3{position:relative;font-weight:500;margin-bottom:12px;word-break:break-word}.schema-list h3 span,.example-list h3 span{margin-right:4px}.schema-list h3 .obj-type,.example-list h3 .obj-type{color:rgb(var(--aui-color-n-4))}.schema-list p,.example-list p{margin-bottom:12px;word-break:break-word}.schema-list p a,.example-list p a{color:#007bff;text-decoration:none}.schema-list p a:hover,.example-list p a:hover{text-decoration:underline}.schema-examples{padding:16px}.examples-header{margin-bottom:16px}.examples-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.examples-content .examples-list .example-item{margin-bottom:24px;border:1px solid #e1e5e9;border-radius:6px;overflow:hidden}.examples-content .examples-list .example-item:last-child{margin-bottom:0}.examples-content .examples-list .example-item .example-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:#f8f9fa;border-bottom:1px solid #e1e5e9}.examples-content .examples-list .example-item .example-header .example-title{margin:0;font-size:16px;font-weight:600;color:#333}.examples-content .examples-list .example-item .example-header .example-actions{display:flex;gap:8px}.examples-content .examples-list .example-item .example-header .example-actions .btn{padding:4px 12px;font-size:12px;border-radius:4px;cursor:pointer;transition:all .2s ease}.examples-content .examples-list .example-item .example-header .example-actions .btn.btn-outline-primary{color:#007bff;border:1px solid #007bff;background-color:transparent}.examples-content .examples-list .example-item .example-header .example-actions .btn.btn-outline-primary:hover{color:#fff;background-color:#007bff}.examples-content .examples-list .example-item .example-header .example-actions .btn.btn-outline-secondary{color:#6c757d;border:1px solid #6c757d;background-color:transparent}.examples-content .examples-list .example-item .example-header .example-actions .btn.btn-outline-secondary:hover{color:#fff;background-color:#6c757d}.examples-content .examples-list .example-item .example-header .example-list .example-item .example-actions{display:flex;justify-content:space-between}.examples-content .examples-list .example-item .example-description{padding:12px 16px;color:#666;font-size:14px;line-height:1.5;border-bottom:1px solid #e1e5e9}.examples-content .examples-list .example-item .example-description a{color:#007bff;text-decoration:none}.examples-content .examples-list .example-item .example-description a:hover{text-decoration:underline}.examples-content .examples-list .example-item .example-yaml{background-color:#f8f9fa}.examples-content .examples-list .example-item .example-yaml pre{margin:0;padding:16px;background-color:transparent;border:none;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.4;color:#333;overflow-x:auto}.examples-content .examples-list .example-item .example-yaml pre code{background-color:transparent;padding:0;color:inherit}\n"] }]
+        }], propDecorators: { resource: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], tryYaml: [{
+                type: Output
+            }], schemaEnable: [{
+                type: Input
+            }], exampleEnable: [{
+                type: Input
+            }], extraExamples: [{
+                type: Input
+            }] } });
+
+class ResourceYamlEditorComponent {
+    set originalValue(value) {
+        this._originalValue = value || '';
+    }
+    get originalValue() {
+        return this._originalValue;
+    }
+    constructor() {
+        this.destroy$ = new Subject();
+        this._value = '';
+        this._originalValue = '';
+        this.onChange = (_value) => {
+            // Placeholder for form control change callback
+        };
+        this.onTouched = () => {
+            // Placeholder for form control touched callback
+        };
+        this.showSidebar$$ = new BehaviorSubject(true);
+        this.showDebugPanel$$ = new BehaviorSubject(true);
+        this.monacoEditor = null;
+        this.registeredSchemas = new Set();
+        this.pendingSchemas = new Set();
+        this.schemaService = inject(KubernetesSchemaService);
+        this.monacoLanguageService = inject(MonacoLanguageService);
+        this.hasWrapper = true;
+        this.showDebugInfo = false;
+        this.sidebarEnable = true;
+        this.schemaEnable = true;
+        this.exampleEnable = true;
+        this.autoFoldManagedFields = true;
+        this.options = yamlWriteMinimapOptions;
+        this.actionsConfig = updateActions;
+        this.tryYaml = new EventEmitter();
+        this.autoFillNamespace = true;
+        this.hasFolded = false;
+        /**
+         * 自动获取的 schema，当没有手动提供 schema 时使用
+        /**
+         *
+         *
+         * @memberof ResourceYamlEditorComponent
+         */
+        this.autoSchema$ = combineLatest([this.resource$, this.clusterName$]).pipe(switchMap(([resource, clusterName]) => {
+            if (!resource || !clusterName) {
+                return of(null);
+            }
+            const firstResource = (Array.isArray(resource) ? resource[0] : resource);
+            if (!firstResource?.apiVersion || !firstResource?.kind) {
+                return of(null);
+            }
+            return this.schemaService.getResourceSchema(firstResource.apiVersion, firstResource.kind, clusterName);
+        }), publishRef());
+        /**
+         * 最终使用的 schema，优先使用手动提供的，否则使用自动获取的
+         */
+        this.finalSchema$ = combineLatest([this.schema$, this.autoSchema$]).pipe(map(([manualSchema, autoSchema]) => manualSchema || autoSchema), distinctUntilChanged(), shareReplay(1));
+        this.yamlSchemaService = this.monacoLanguageService.getYamlSchemaService();
+        // 自动设置 schema
+        combineLatest([this.resource$, this.finalSchema$])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(([resource, schema]) => {
+            if (resource && schema) {
+                const firstResource = Array.isArray(resource)
+                    ? resource[0]
+                    : resource;
+                if (firstResource && !Array.isArray(firstResource)) {
+                    this.setYamlSchema(firstResource, schema);
+                }
+            }
+        });
+        this.autoSchema$.pipe(takeUntil(this.destroy$)).subscribe();
+    }
+    ngAfterViewInit() {
+        // 监听 YAML 内容变化，自动折叠 managedFields
+        // if (this.autoFoldManagedFields && this.schemaService.definitions) {
+        //   this.selfFoldManagedFields();
+        // }
+        if (this.autoFoldManagedFields) {
+            this.selfFoldManagedFields();
+        }
+    }
+    selfFoldManagedFields() {
+        if (this.hasFolded) {
+            return;
+        }
+        this.hasFolded = true;
+        setTimeout(() => {
+            const editor = this.getEditorInstance();
+            if (editor) {
+                foldManagedFields(editor);
+            }
+        }, 0);
+    }
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+        this.onChange(val);
+        this.onTouched();
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this._value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    toggleSidebar() {
+        this.showSidebar$$.next(!this.showSidebar$$.value);
+    }
+    toggleDebugInfo() {
+        this.showDebugPanel$$.next(!this.showDebugPanel$$.value);
+    }
+    getCurrentResource() {
+        const resource = this.resource;
+        if (Array.isArray(resource)) {
+            return resource.length > 0 ? resource[0] : null;
+        }
+        return resource || null;
+    }
+    getCurrentSchema() {
+        return this.schema || null;
+    }
+    getDebugInfo() {
+        const resource = this.getCurrentResource();
+        return {
+            hasResource: !!resource,
+            resourceApiVersion: resource?.apiVersion,
+            resourceKind: resource?.kind,
+            hasManualSchema: !!this.schema,
+        };
+    }
+    onTryYaml(yamlContent) {
+        let targetYaml = yamlContent;
+        if (this.autoFillNamespace && this.namespace) {
+            targetYaml = parseAll(yamlContent)
+                .filter(r => !!r)
+                .map((r) => {
+                if (!r?.metadata?.namespace) {
+                    return {
+                        ...r,
+                        metadata: {
+                            ...r.metadata,
+                            namespace: this.namespace,
+                        },
+                    };
+                }
+                return r;
+            })
+                .map(r => stringify$1(r, { sortMapEntries: true }))
+                .join('---\r\n');
+        }
+        this.tryYaml.emit(targetYaml);
+    }
+    /**
+     * 设置 YAML schema 以提供 hover 提示和自动完成
+     */
+    setYamlSchema(resource, schema) {
+        if (!schema) {
+            return;
+        }
+        // 使用 apiVersion + kind 组合作为标识
+        const apiVersion = resource?.apiVersion || 'unknown';
+        const kind = resource?.kind || 'unknown';
+        const schemaKey = `${apiVersion}/${kind}`;
+        this.modelUri = `${schemaKey}.yaml`;
+        this.selfFoldManagedFields();
+        // 检查是否已经注册过相同的 schema，避免重复注册
+        if (this.registeredSchemas.has(schemaKey) ||
+            this.pendingSchemas.has(schemaKey)) {
+            return;
+        }
+        this.pendingSchemas.add(schemaKey);
+        const registerSchema = (schemaToRegister) => {
+            this.yamlSchemaService.addSchema({
+                uri: `k8s://${schemaKey}.schema.json`,
+                fileMatch: [this.modelUri],
+                schema: schemaToRegister,
+            });
+            this.registeredSchemas.add(schemaKey);
+            this.pendingSchemas.delete(schemaKey);
+        };
+        const schemaDefinitions = schema?.definitions;
+        if (schemaDefinitions && Object.keys(schemaDefinitions).length > 0) {
+            registerSchema(schema);
+            return;
+        }
+        this.schemaService
+            .getAllResourceDefinitionsCached(this.clusterName)
+            .pipe(take(1), takeUntil(this.destroy$))
+            .subscribe(definitions => {
+            const fullSchema = {
+                ...schema,
+                definitions: definitions || schemaDefinitions || {},
+            };
+            registerSchema(fullSchema);
+        });
+    }
+    /**
+     * 获取 Monaco 编辑器实例
+     */
+    getEditorInstance() {
+        if (!this.monacoEditor && this.codeEditorRef?.editor) {
+            this.monacoEditor = this.codeEditorRef.editor;
+        }
+        return this.monacoEditor;
+    }
+    /**
+     * 手动折叠 managedFields
+     */
+    foldManagedFields() {
+        const editor = this.getEditorInstance();
+        if (editor) {
+            foldManagedFields(editor);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceYamlEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceYamlEditorComponent, isStandalone: true, selector: "acl-resource-yaml-editor", inputs: { hasWrapper: "hasWrapper", showDebugInfo: "showDebugInfo", sidebarEnable: "sidebarEnable", schema: "schema", schemaEnable: "schemaEnable", exampleEnable: "exampleEnable", resource: "resource", autoFoldManagedFields: "autoFoldManagedFields", originalValue: "originalValue", options: "options", actionsConfig: "actionsConfig", autoFillNamespace: "autoFillNamespace", extraExamples: "extraExamples", clusterName: "clusterName", namespace: "namespace" }, outputs: { tryYaml: "tryYaml" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ResourceYamlEditorComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "codeEditorRef", first: true, predicate: ["codeEditor"], descendants: true }], ngImport: i0, template: "@if (hasWrapper) {\n  <aui-card>\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </aui-card>\n} @else {\n  <div\n    class=\"yaml-editor-container\"\n    [class.with-sidebar]=\"showSidebar$$ | async\"\n  >\n    <div class=\"yaml-editor-section\">\n      <aui-code-editor\n        #codeEditor\n        name=\"yaml\"\n        [originalValue]=\"originalValue\"\n        [(ngModel)]=\"value\"\n        [options]=\"options\"\n        [actionsConfig]=\"actionsConfig\"\n        [modelUri]=\"modelUri\"\n      >\n        <ng-container auiCodeEditorToolbarRightSide>\n          <!-- Schema \u6309\u94AE\uFF1A\u5F53\u542F\u7528\u4FA7\u8FB9\u680F\u65F6\u663E\u793A -->\n          @if (sidebarEnable && !!(resource$ | async)) {\n            <button\n              [hidden]=\"!!codeEditor.fullscreenDialog\"\n              class=\"aui-code-editor-toolbar__control-button\"\n              type=\"button\"\n              [disabled]=\"!(finalSchema$ | async) && !exampleEnable\"\n              (click)=\"toggleSidebar()\"\n              [auiTooltip]=\"\n                ((showSidebar$$ | async) ? 'hide_sidebar' : 'view_sidebar')\n                  | translate\n              \"\n            >\n              <aui-icon\n                [icon]=\"\n                  (showSidebar$$ | async)\n                    ? 'prod:expand_sidebar'\n                    : 'prod:collapse_sidebar'\n                \"\n              ></aui-icon>\n            </button>\n          }\n        </ng-container>\n      </aui-code-editor>\n    </div>\n    @if ((showSidebar$$ | async) && (resource$ | async)) {\n      <div class=\"yaml-sidebar-section\">\n        <acl-resource-yaml-sidebar\n          [resource]=\"getCurrentResource()\"\n          [schema]=\"finalSchema$ | async\"\n          [schemaEnable]=\"schemaEnable\"\n          [exampleEnable]=\"exampleEnable\"\n          [extraExamples]=\"extraExamples\"\n          (close)=\"toggleSidebar()\"\n          (tryYaml)=\"onTryYaml($event)\"\n        ></acl-resource-yaml-sidebar>\n      </div>\n    }\n  </div>\n}\n<ng-template #content>\n  <div\n    class=\"yaml-editor-container\"\n    [class.with-sidebar]=\"showSidebar$$ | async\"\n  >\n    <div class=\"yaml-editor-section\">\n      <aui-code-editor\n        #codeEditor\n        name=\"yaml\"\n        [originalValue]=\"originalValue\"\n        [(ngModel)]=\"value\"\n        [options]=\"options\"\n        [actionsConfig]=\"actionsConfig\"\n        [modelUri]=\"modelUri\"\n      >\n        <ng-container auiCodeEditorToolbarRightSide>\n          <!-- Schema \u6309\u94AE\uFF1A\u5F53\u542F\u7528\u4FA7\u8FB9\u680F\u65F6\u663E\u793A -->\n          @if (sidebarEnable && !!(resource$ | async)) {\n            <button\n              [hidden]=\"!!codeEditor.fullscreenDialog\"\n              class=\"aui-code-editor-toolbar__control-button\"\n              type=\"button\"\n              [disabled]=\"!(finalSchema$ | async) && !exampleEnable\"\n              (click)=\"toggleSidebar()\"\n              [auiTooltip]=\"\n                ((showSidebar$$ | async) ? 'hide_sidebar' : 'view_sidebar')\n                  | translate\n              \"\n            >\n              <aui-icon\n                [icon]=\"\n                  (showSidebar$$ | async)\n                    ? 'prod:expand_sidebar'\n                    : 'prod:collapse_sidebar'\n                \"\n              ></aui-icon>\n            </button>\n          }\n        </ng-container>\n      </aui-code-editor>\n    </div>\n    @if ((showSidebar$$ | async) && (resource$ | async)) {\n      <div class=\"yaml-sidebar-section\">\n        <acl-resource-yaml-sidebar\n          [resource]=\"getCurrentResource()\"\n          [schema]=\"finalSchema$ | async\"\n          [schemaEnable]=\"schemaEnable\"\n          [exampleEnable]=\"exampleEnable\"\n          [extraExamples]=\"extraExamples\"\n          (close)=\"toggleSidebar()\"\n          (tryYaml)=\"onTryYaml($event)\"\n        ></acl-resource-yaml-sidebar>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host(:not(.dialog-content)) ::ng-deep .aui-code-editor{min-height:100%}:host(:not(.dialog-content)){display:block;height:calc(100vh - (var(--acl-page-header-height) + 44px) - 147px)}:host(:not(.dialog-content))>.aui-card{height:100%}:host(:not(.dialog-content))>.aui-card .aui-card__content,:host(:not(.dialog-content))>.aui-card aui-code-editor,:host(:not(.dialog-content))>.aui-card .aui-code-editor{height:100%;min-height:100%}:host{display:block}:host ::ng-deep aui-card,:host ::ng-deep .aui-card,:host ::ng-deep .aui-card__content{height:100%}:host ::ng-deep .aui-checkbox{margin-right:0}:host aui-code-editor{height:100%}.yaml-editor-container{display:flex;height:100%}.yaml-editor-container.with-sidebar .yaml-editor-section{flex:2;min-width:0}.yaml-editor-container.with-sidebar .yaml-sidebar-section{flex:1 0 0%}.yaml-editor-container:not(.with-sidebar) .yaml-editor-section{flex:1}.yaml-editor-section{display:flex;flex-direction:column;height:100%}.yaml-editor-section aui-code-editor{flex:1;height:100%}.yaml-sidebar-section{display:flex;flex-direction:column;height:100%}.yaml-sidebar-section acl-resource-yaml-sidebar{flex:1;height:100%}.yaml-debug-section{position:absolute;top:0;right:0;width:350px;height:100%;background:var(--aui-color-bg-container);border-left:1px solid var(--aui-color-border-default);z-index:1000;overflow-y:auto}.debug-panel{padding:16px;font-size:12px}.debug-panel h4{margin:0 0 12px;font-size:14px;color:var(--aui-color-text-primary)}.debug-panel .debug-item{margin-bottom:16px}.debug-panel .debug-item strong{color:var(--aui-color-text-primary);display:block;margin-bottom:4px}.debug-panel .debug-item ul{margin:0;padding-left:16px}.debug-panel .debug-item ul li{margin-bottom:2px;color:var(--aui-color-text-secondary)}.debug-panel .debug-actions{border-top:1px solid var(--aui-color-border-default);padding-top:12px;text-align:right}@media (width <= 1200px){.yaml-editor-container.with-sidebar .yaml-sidebar-section{width:350px}}@media (width <= 992px){.yaml-editor-container.with-sidebar{flex-direction:column}.yaml-editor-container.with-sidebar .yaml-editor-section{flex:1;min-height:50%}.yaml-editor-container.with-sidebar .yaml-sidebar-section{width:100%;height:50%;border-top:1px solid var(--aui-color-border, #e0e0e0);border-left:none}}\n"], dependencies: [{ kind: "component", type: i1.CardComponent, selector: "aui-card", inputs: ["divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: CodeEditorComponent, selector: "aui-code-editor", inputs: ["options", "plain", "showLanguageLabel", "value", "originalValue", "actionsConfig", "previewMode", "diffMode", "modelUri"], outputs: ["editorChange", "editorBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResourceYamlSidebarComponent, selector: "acl-resource-yaml-sidebar", inputs: ["resource", "schema", "schemaEnable", "exampleEnable", "extraExamples"], outputs: ["close", "tryYaml"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], ResourceYamlEditorComponent.prototype, "resource$", void 0);
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], ResourceYamlEditorComponent.prototype, "schema$", void 0);
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], ResourceYamlEditorComponent.prototype, "clusterName$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceYamlEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-resource-yaml-editor', preserveWhitespaces: false, standalone: true, imports: [
+                        CARD_MODULE,
+                        FormsModule,
+                        CHECKBOX_MODULE,
+                        ButtonModule,
+                        CodeEditorComponent,
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                        ResourceYamlSidebarComponent,
+                        IconModule,
+                        TooltipModule,
+                        TranslatePipe,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ResourceYamlEditorComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasWrapper) {\n  <aui-card>\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </aui-card>\n} @else {\n  <div\n    class=\"yaml-editor-container\"\n    [class.with-sidebar]=\"showSidebar$$ | async\"\n  >\n    <div class=\"yaml-editor-section\">\n      <aui-code-editor\n        #codeEditor\n        name=\"yaml\"\n        [originalValue]=\"originalValue\"\n        [(ngModel)]=\"value\"\n        [options]=\"options\"\n        [actionsConfig]=\"actionsConfig\"\n        [modelUri]=\"modelUri\"\n      >\n        <ng-container auiCodeEditorToolbarRightSide>\n          <!-- Schema \u6309\u94AE\uFF1A\u5F53\u542F\u7528\u4FA7\u8FB9\u680F\u65F6\u663E\u793A -->\n          @if (sidebarEnable && !!(resource$ | async)) {\n            <button\n              [hidden]=\"!!codeEditor.fullscreenDialog\"\n              class=\"aui-code-editor-toolbar__control-button\"\n              type=\"button\"\n              [disabled]=\"!(finalSchema$ | async) && !exampleEnable\"\n              (click)=\"toggleSidebar()\"\n              [auiTooltip]=\"\n                ((showSidebar$$ | async) ? 'hide_sidebar' : 'view_sidebar')\n                  | translate\n              \"\n            >\n              <aui-icon\n                [icon]=\"\n                  (showSidebar$$ | async)\n                    ? 'prod:expand_sidebar'\n                    : 'prod:collapse_sidebar'\n                \"\n              ></aui-icon>\n            </button>\n          }\n        </ng-container>\n      </aui-code-editor>\n    </div>\n    @if ((showSidebar$$ | async) && (resource$ | async)) {\n      <div class=\"yaml-sidebar-section\">\n        <acl-resource-yaml-sidebar\n          [resource]=\"getCurrentResource()\"\n          [schema]=\"finalSchema$ | async\"\n          [schemaEnable]=\"schemaEnable\"\n          [exampleEnable]=\"exampleEnable\"\n          [extraExamples]=\"extraExamples\"\n          (close)=\"toggleSidebar()\"\n          (tryYaml)=\"onTryYaml($event)\"\n        ></acl-resource-yaml-sidebar>\n      </div>\n    }\n  </div>\n}\n<ng-template #content>\n  <div\n    class=\"yaml-editor-container\"\n    [class.with-sidebar]=\"showSidebar$$ | async\"\n  >\n    <div class=\"yaml-editor-section\">\n      <aui-code-editor\n        #codeEditor\n        name=\"yaml\"\n        [originalValue]=\"originalValue\"\n        [(ngModel)]=\"value\"\n        [options]=\"options\"\n        [actionsConfig]=\"actionsConfig\"\n        [modelUri]=\"modelUri\"\n      >\n        <ng-container auiCodeEditorToolbarRightSide>\n          <!-- Schema \u6309\u94AE\uFF1A\u5F53\u542F\u7528\u4FA7\u8FB9\u680F\u65F6\u663E\u793A -->\n          @if (sidebarEnable && !!(resource$ | async)) {\n            <button\n              [hidden]=\"!!codeEditor.fullscreenDialog\"\n              class=\"aui-code-editor-toolbar__control-button\"\n              type=\"button\"\n              [disabled]=\"!(finalSchema$ | async) && !exampleEnable\"\n              (click)=\"toggleSidebar()\"\n              [auiTooltip]=\"\n                ((showSidebar$$ | async) ? 'hide_sidebar' : 'view_sidebar')\n                  | translate\n              \"\n            >\n              <aui-icon\n                [icon]=\"\n                  (showSidebar$$ | async)\n                    ? 'prod:expand_sidebar'\n                    : 'prod:collapse_sidebar'\n                \"\n              ></aui-icon>\n            </button>\n          }\n        </ng-container>\n      </aui-code-editor>\n    </div>\n    @if ((showSidebar$$ | async) && (resource$ | async)) {\n      <div class=\"yaml-sidebar-section\">\n        <acl-resource-yaml-sidebar\n          [resource]=\"getCurrentResource()\"\n          [schema]=\"finalSchema$ | async\"\n          [schemaEnable]=\"schemaEnable\"\n          [exampleEnable]=\"exampleEnable\"\n          [extraExamples]=\"extraExamples\"\n          (close)=\"toggleSidebar()\"\n          (tryYaml)=\"onTryYaml($event)\"\n        ></acl-resource-yaml-sidebar>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host(:not(.dialog-content)) ::ng-deep .aui-code-editor{min-height:100%}:host(:not(.dialog-content)){display:block;height:calc(100vh - (var(--acl-page-header-height) + 44px) - 147px)}:host(:not(.dialog-content))>.aui-card{height:100%}:host(:not(.dialog-content))>.aui-card .aui-card__content,:host(:not(.dialog-content))>.aui-card aui-code-editor,:host(:not(.dialog-content))>.aui-card .aui-code-editor{height:100%;min-height:100%}:host{display:block}:host ::ng-deep aui-card,:host ::ng-deep .aui-card,:host ::ng-deep .aui-card__content{height:100%}:host ::ng-deep .aui-checkbox{margin-right:0}:host aui-code-editor{height:100%}.yaml-editor-container{display:flex;height:100%}.yaml-editor-container.with-sidebar .yaml-editor-section{flex:2;min-width:0}.yaml-editor-container.with-sidebar .yaml-sidebar-section{flex:1 0 0%}.yaml-editor-container:not(.with-sidebar) .yaml-editor-section{flex:1}.yaml-editor-section{display:flex;flex-direction:column;height:100%}.yaml-editor-section aui-code-editor{flex:1;height:100%}.yaml-sidebar-section{display:flex;flex-direction:column;height:100%}.yaml-sidebar-section acl-resource-yaml-sidebar{flex:1;height:100%}.yaml-debug-section{position:absolute;top:0;right:0;width:350px;height:100%;background:var(--aui-color-bg-container);border-left:1px solid var(--aui-color-border-default);z-index:1000;overflow-y:auto}.debug-panel{padding:16px;font-size:12px}.debug-panel h4{margin:0 0 12px;font-size:14px;color:var(--aui-color-text-primary)}.debug-panel .debug-item{margin-bottom:16px}.debug-panel .debug-item strong{color:var(--aui-color-text-primary);display:block;margin-bottom:4px}.debug-panel .debug-item ul{margin:0;padding-left:16px}.debug-panel .debug-item ul li{margin-bottom:2px;color:var(--aui-color-text-secondary)}.debug-panel .debug-actions{border-top:1px solid var(--aui-color-border-default);padding-top:12px;text-align:right}@media (width <= 1200px){.yaml-editor-container.with-sidebar .yaml-sidebar-section{width:350px}}@media (width <= 992px){.yaml-editor-container.with-sidebar{flex-direction:column}.yaml-editor-container.with-sidebar .yaml-editor-section{flex:1;min-height:50%}.yaml-editor-container.with-sidebar .yaml-sidebar-section{width:100%;height:50%;border-top:1px solid var(--aui-color-border, #e0e0e0);border-left:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { codeEditorRef: [{
+                type: ViewChild,
+                args: ['codeEditor', { static: false }]
+            }], hasWrapper: [{
+                type: Input
+            }], showDebugInfo: [{
+                type: Input
+            }], sidebarEnable: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], schemaEnable: [{
+                type: Input
+            }], exampleEnable: [{
+                type: Input
+            }], resource: [{
+                type: Input
+            }], autoFoldManagedFields: [{
+                type: Input
+            }], originalValue: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], actionsConfig: [{
+                type: Input
+            }], tryYaml: [{
+                type: Output
+            }], resource$: [], schema$: [], autoFillNamespace: [{
+                type: Input
+            }], extraExamples: [{
+                type: Input
+            }], clusterName: [{
+                type: Input
+            }], clusterName$: [], namespace: [{
+                type: Input
+            }] } });
+
+/**
  * [[include:code/README.md]]
  * @module code
  * @preferred
@@ -12652,9 +14008,773 @@ const ASYNC_DATA_MODULE = [
     ErrorStateComponent,
 ];
 
+/**
+ * @packageDocumentation
+ * @module notification
+ */
+const ZH_ERRORS = {
+    Unknown: '未知错误',
+    Unauthorized: '授权不足',
+    Forbidden: '资源不可用',
+    NotFound: '找不到资源',
+    AlreadyExists: '资源已存在',
+    Conflict: '资源版本冲突，请重新获取资源',
+    Gone: '资源位置已变更',
+    Invalid: '数据错误',
+    ServerTimeout: '响应超时',
+    Timeout: '请求超时',
+    TooManyRequests: '请求太多，超过服务能力',
+    BadRequest: '无效的请求',
+    MethodNotAllowed: '请求的操作不被允许',
+    NotAcceptable: '接收的数据类型不被支持',
+    RequestEntityTooLarge: '请求实体太大',
+    UnsupportedMediaType: '发送的数据类型不被支持',
+    InternalError: '内部错误',
+    Expired: '请求内容已过期',
+    ServiceUnavailable: '当前请求的服务不可用，可稍后重试',
+    ProjectNamespaceConflict: '平台级命名空间已存在，请处理',
+};
+const DEFAULT_ZH_ERROR = '网络错误';
+
+/**
+ * @packageDocumentation
+ * @module notification
+ */
+class FeedbackNotificationComponent {
+    constructor() {
+        this.onPrimary = new EventEmitter();
+        this.onSecondary = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FeedbackNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FeedbackNotificationComponent, isStandalone: true, selector: "ng-component", inputs: { primary: "primary", secondary: "secondary", content: "content", pre: "pre" }, outputs: { onPrimary: "onPrimary", onSecondary: "onSecondary" }, ngImport: i0, template: "@if (content) {\n  <main>\n    @if (pre) {\n      <pre [innerHTML]=\"content\"></pre>\n    } @else {\n      <div [innerHTML]=\"content\"></div>\n    }\n  </main>\n}\n<footer>\n  @if (primary) {\n    <button\n      aui-button=\"primary\"\n      type=\"button\"\n      size=\"mini\"\n      (click)=\"onPrimary.emit()\"\n    >\n      {{ primary | translate }}\n    </button>\n  }\n  @if (secondary) {\n    <button\n      aui-button=\"default\"\n      type=\"button\"\n      size=\"mini\"\n      (click)=\"onSecondary.emit()\"\n    >\n      {{ secondary | translate }}\n    </button>\n  }\n</footer>\n", styles: [":host{display:flex;flex-direction:column;max-height:150px}main{display:flex;flex:1;overflow:hidden}main>*{flex:1;overflow:auto}footer{padding-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FeedbackNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TRANSLATE_MODULE, ButtonModule], template: "@if (content) {\n  <main>\n    @if (pre) {\n      <pre [innerHTML]=\"content\"></pre>\n    } @else {\n      <div [innerHTML]=\"content\"></div>\n    }\n  </main>\n}\n<footer>\n  @if (primary) {\n    <button\n      aui-button=\"primary\"\n      type=\"button\"\n      size=\"mini\"\n      (click)=\"onPrimary.emit()\"\n    >\n      {{ primary | translate }}\n    </button>\n  }\n  @if (secondary) {\n    <button\n      aui-button=\"default\"\n      type=\"button\"\n      size=\"mini\"\n      (click)=\"onSecondary.emit()\"\n    >\n      {{ secondary | translate }}\n    </button>\n  }\n</footer>\n", styles: [":host{display:flex;flex-direction:column;max-height:150px}main{display:flex;flex:1;overflow:hidden}main>*{flex:1;overflow:auto}footer{padding-top:12px}\n"] }]
+        }], propDecorators: { primary: [{
+                type: Input
+            }], secondary: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], pre: [{
+                type: Input
+            }], onPrimary: [{
+                type: Output
+            }], onSecondary: [{
+                type: Output
+            }] } });
+
+function isK8sErrorStatus(e) {
+    return e?.metadata && e.apiVersion && e.kind === 'Status' && e.status;
+}
+
+/**
+ * @packageDocumentation
+ * @module notification
+ */
+class NotificationUtilService {
+    constructor() {
+        this.injector = inject(Injector);
+        this.dialog = inject(DialogService);
+        this.time = inject(TimeService);
+        this.notification = inject(NotificationService);
+    }
+    viewDetail(json, title, notificationId) {
+        this.dialog.open(CodeDisplayDialogComponent, {
+            data: {
+                code: this.normalizeJson(json),
+                language: 'json',
+                title: title || 'view_detail',
+                ellipsis: true,
+            },
+            size: DialogSize.Big,
+        });
+        if (notificationId) {
+            this.notification.remove(notificationId);
+        }
+    }
+    createFeedback(config, { content, onPrimary, onSecondary, pre, primary, secondary, summary, } = {}) {
+        const { instance } = this.notification.create({
+            type: MessageType.Error,
+            ...config,
+            content: null,
+            contentRef: FeedbackNotificationComponent,
+        });
+        const feedback = instance.childComponentInstance;
+        if (primary === true) {
+            primary = 'view_detail';
+        }
+        else if (secondary === true) {
+            secondary = 'view_detail';
+        }
+        content = this.normalizeJson(content || config.content);
+        const viewDetail = this.viewDetail.bind(this, content, config.title, instance.uniqueId);
+        if (primary && !onPrimary) {
+            onPrimary = viewDetail;
+        }
+        if (onPrimary) {
+            feedback.onPrimary.pipe(take(1)).subscribe(onPrimary);
+        }
+        else if (secondary && !onSecondary) {
+            onSecondary = viewDetail;
+        }
+        if (onSecondary) {
+            feedback.onSecondary.pipe(take(1)).subscribe(onSecondary);
+        }
+        Object.assign(feedback, {
+            content: this.normalizeJson(summary),
+            pre,
+            primary,
+            secondary,
+        });
+    }
+    normalizeJson(json) {
+        return typeof json === 'string'
+            ? json
+            : json && JSON.stringify(json, null, 2);
+    }
+    async notify(reqOrStatus, res) {
+        // we stored original req in `err.__req__`
+        const req = ('__req__' in reqOrStatus ? get(reqOrStatus, '__req__') : reqOrStatus);
+        if (isK8sErrorStatus(reqOrStatus)) {
+            res = reqOrStatus?.['__origin__'];
+        }
+        const duration = Math.round(numberAttribute(req.headers.get(NOTIFY_DURATION_HEADER$1), NOTIFICATION_DEFAULT_CONFIG.duration));
+        let reason;
+        let resError = res.error;
+        if (resError instanceof Blob && resError.type === 'application/json') {
+            try {
+                resError = JSON.parse(await resError.text());
+            }
+            catch { }
+        }
+        if (isK8sErrorStatus(resError)) {
+            reason = resError.reason;
+            reason =
+                this.injector.get(TranslateService).locale === 'zh'
+                    ? ZH_ERRORS[reason] || DEFAULT_ZH_ERROR
+                    : reason;
+        }
+        this.createFeedback({
+            title: reason || this.getResErrorMessage(res),
+            duration,
+        }, {
+            content: {
+                apiVersion: 'v1',
+                RequestURI: req.urlWithParams,
+                Method: req.method,
+                RequestObject: {
+                    Time: this.time.format(req.requestAt),
+                    Header: this.getAllHeaders(req.headers),
+                    Body: req.body,
+                },
+                ResponseObject: {
+                    Time: this.time.format(),
+                    RelativeTime: this.time.distance(req.requestAt),
+                    StatusCode: res.status,
+                    Header: this.getAllHeaders(res.headers),
+                    Body: resError,
+                },
+            },
+            secondary: true,
+        });
+    }
+    getResErrorMessage(res) {
+        return typeof res.error === 'string'
+            ? res.error
+            : (res.statusText === 'OK' && res.error.message) ||
+                // compatible with legacy ACE API
+                get(res.error, 'errors[0].message') ||
+                res.statusText;
+    }
+    getAllHeaders(headers) {
+        return headers
+            .keys()
+            .reduce((acc, key) => {
+            let values = headers.getAll(key);
+            if (Array.isArray(values) && values.length === 1) {
+                values = values[0];
+            }
+            acc[key] = values;
+            return acc;
+        }, {});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NotificationUtilService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NotificationUtilService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NotificationUtilService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * @packageDocumentation
+ * @module notification
+ */
+const WRITABLE_METHODS = ['delete', 'patch', 'post', 'put'];
+class ResourceErrorInterceptor {
+    constructor() {
+        this.notificationUtil = inject(NotificationUtilService);
+    }
+    intercept(req, next) {
+        // Maybe used later in custom `catchError`
+        req.requestAt = Date.now();
+        let notifyOnError = this.notifyOnError(req);
+        if (notifyOnError || req.headers.has(NOTIFY_ON_ERROR_HEADER)) {
+            const notifyOnErrorHeader = req.headers.get(NOTIFY_ON_ERROR_HEADER);
+            req = req.clone({
+                headers: req.headers.delete(NOTIFY_ON_ERROR_HEADER),
+            });
+            const skipNotifyOnError = notifyOnErrorHeader != null &&
+                [EMPTY$2, FALSE$1].includes(notifyOnErrorHeader);
+            if (skipNotifyOnError) {
+                notifyOnError = false;
+            }
+            else {
+                if (!notifyOnError) {
+                    notifyOnError = true;
+                }
+            }
+        }
+        return next.handle(req).pipe(catchError((err) => {
+            console.error(err);
+            if (notifyOnError) {
+                this.notificationUtil.notify(req, err);
+            }
+            return throwError(() => isK8sErrorStatus(err.error)
+                ? {
+                    ...err.error,
+                    __origin__: err,
+                    __req__: req,
+                }
+                : {
+                    ...err,
+                    __req__: req,
+                });
+        }));
+    }
+    notifyOnError(req) {
+        return (WRITABLE_METHODS.includes(req.method.toLowerCase()) &&
+            !req.url.endsWith('/v1/selfsubjectaccessreviews'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceErrorInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceErrorInterceptor }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceErrorInterceptor, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * [[include:notification/README.md]]
+ * @module notification
+ * @preferred
+ */
+/** imports */
+
+class GraphActionsComponent {
+    constructor() {
+        this.position = 'right top';
+    }
+    get positionClass() {
+        return this.position
+            .split(' ')
+            .reduce((acc, v) => (v ? { ...acc, [v]: true } : acc), {});
+    }
+    handleMouseDown(e) {
+        e.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: GraphActionsComponent, isStandalone: true, selector: "acl-graph-actions", inputs: { position: "position" }, host: { listeners: { "mousedown": "handleMouseDown($event)" } }, ngImport: i0, template: `<div
+    class="acl-graph-canvas__action-wrapper"
+    [ngClass]="positionClass"
+  >
+    <ng-content></ng-content>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'acl-graph-actions',
+                    template: `<div
+    class="acl-graph-canvas__action-wrapper"
+    [ngClass]="positionClass"
+  >
+    <ng-content></ng-content>
+  </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true,
+                    imports: [CommonModule],
+                }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], handleMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class GraphStoreService {
+    constructor() {
+        this.nodeStore = {};
+        this.scale = 1;
+        this.nodeChanged$$ = new ReplaySubject(1);
+        this.nodeChanged$ = this.nodeChanged$$
+            .asObservable()
+            .pipe(debounceTime(0));
+        this.resizeObserver = new ResizeObserver(throttle(() => this.nodeChanged$$.next(), 100));
+    }
+    registerSurfaceNode(surface) {
+        this.surfaceNode = surface;
+    }
+    registerNode(id, node) {
+        if (id) {
+            this.resizeObserver.observe(node.el.nativeElement);
+        }
+        this.nodeStore[id] = node;
+        this.nodeChanged$$.next();
+    }
+    unregisterNode(id) {
+        if (id && this.getNode(id)) {
+            this.resizeObserver.unobserve(this.nodeStore[id].el.nativeElement);
+        }
+        this.nodeStore[id] = null;
+        this.nodeChanged$$.next();
+    }
+    getNode(id) {
+        return this.nodeStore[id];
+    }
+    getSurfaceNode() {
+        return this.surfaceNode;
+    }
+    nodeChanged() {
+        return this.nodeChanged$;
+    }
+    getScale() {
+        return this.scale;
+    }
+    setScale(scale) {
+        return (this.scale = scale);
+    }
+    disconnectObserver() {
+        this.resizeObserver.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphStoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphStoreService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphStoreService, decorators: [{
+            type: Injectable
+        }] });
+
+function getRect(el) {
+    const r = el.getBoundingClientRect();
+    return {
+        top: r.top,
+        bottom: r.bottom,
+        left: r.left,
+        right: r.right,
+        width: r.width,
+        height: r.height,
+        offsetTop: el.offsetTop,
+        offsetLeft: el.offsetLeft,
+        offsetWidth: el.offsetWidth,
+        offsetHeight: el.offsetHeight,
+    };
+}
+
+const isMacSystem = isMac();
+class GraphCanvasComponent {
+    constructor() {
+        this.minScale = 0.25;
+        this.maxScale = 2;
+        this.originX = 'center';
+        this.originY = 'top';
+        this.boundary = 60;
+        this.loading = false;
+        this.loadFailed = false;
+        this.retry = new EventEmitter();
+        this.getCanvasRect = () => getRect(this.canvasRef.nativeElement);
+        this.graphStore = inject(GraphStoreService);
+        this.getSurfaceRect = () => getRect(this.surfaceRef.nativeElement);
+    }
+    get dragging() {
+        return !!this.dragStartPoint;
+    }
+    get canvasStyle() {
+        return {
+            padding: this.boundary + 'px',
+            justifyContent: xSelector(this.transformState.origin[0], [
+                'flex-start',
+                'center',
+                'flex-end',
+            ]),
+            alignItems: ySelector(this.transformState.origin[1], [
+                'flex-start',
+                'center',
+                'flex-end',
+            ]),
+            cursor: this.dragging ? 'grabbing' : 'grab',
+        };
+    }
+    get surfaceStyle() {
+        return {
+            transformOrigin: this.transformState.origin.join(' '),
+            transform: `translate(${this.transformState.translate[0]}px, ${this.transformState.translate[1]}px)  scale(${this.transformState.scale})`,
+        };
+    }
+    ngOnInit() {
+        this.transformState = {
+            origin: [this.originX, this.originY],
+            translate: [0, 0],
+            scale: this.graphStore.getScale(),
+        };
+    }
+    ngAfterViewInit() {
+        this.graphStore.registerSurfaceNode({ getRect: this.getSurfaceRect });
+    }
+    ngOnDestroy() {
+        this.graphStore.disconnectObserver();
+    }
+    handleWheelEvent(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const { deltaX, deltaY, ctrlKey, shiftKey, clientX, clientY } = e;
+        if (ctrlKey) {
+            this.zoomByWheel(-deltaY, [clientX, clientY]);
+        }
+        else if (shiftKey && !isMacSystem) {
+            this.move(-deltaY, -deltaX);
+        }
+        else {
+            this.move(-deltaX, -deltaY);
+        }
+    }
+    handleMouseDown(e) {
+        this.dragStartPoint = [e.clientX, e.clientY];
+    }
+    handleMouseMove(e) {
+        if (!this.dragStartPoint) {
+            return;
+        }
+        this.move(e.clientX - this.dragStartPoint[0], e.clientY - this.dragStartPoint[1]);
+        this.dragStartPoint = [e.clientX, e.clientY];
+    }
+    handleMouseUp() {
+        this.dragStartPoint = null;
+    }
+    zoomByWheel(v, pointerPosition) {
+        this.dispatchTransform((transform, rects) => {
+            const { scale, translate } = transform;
+            const nextScale = scaleLimit(scale + v / 500);
+            const origin = originCoordinatePoint(transform, rects);
+            const pointer = coordinate(rects.canvasRect, pointerPosition);
+            const deltaX = ((pointer[0] - origin[0]) / scale) * nextScale -
+                (pointer[0] - origin[0]);
+            const deltaY = ((pointer[1] - origin[1]) / scale) * nextScale -
+                (pointer[1] - origin[1]);
+            return {
+                translate: [translate[0] - deltaX, translate[1] - deltaY],
+                scale: nextScale,
+            };
+        });
+    }
+    zoomByDefaultStep(direction) {
+        this.dispatchTransform(({ scale }) => ({
+            scale: scaleLimit(scale + (direction === 'in' ? 0.25 : -0.25)),
+        }));
+    }
+    zoomOriginal() {
+        this.dispatchTransform(() => ({
+            origin: [this.originX, this.originY],
+            translate: [0, 0],
+            scale: 1,
+        }));
+    }
+    zoomOverview() {
+        this.dispatchTransform((_, { canvasRect, surfaceRect }) => {
+            const scaleX = (canvasRect.offsetWidth - this.boundary * 2) / surfaceRect.offsetWidth;
+            const scaleY = (canvasRect.offsetHeight - this.boundary * 2) /
+                surfaceRect.offsetHeight;
+            return {
+                origin: ['center', 'center'],
+                translate: [0, 0],
+                scale: scaleLimit(min([scaleX, scaleY, 1])),
+            };
+        });
+    }
+    move(x, y) {
+        this.dispatchTransform(({ translate }) => ({
+            translate: [translate[0] + x, translate[1] + y],
+        }));
+    }
+    dispatchTransform(action) {
+        const rects = {
+            canvasRect: this.getCanvasRect(),
+            surfaceRect: this.getSurfaceRect(),
+        };
+        const nextTransform = mergeRight(this.transformState, action(this.transformState, rects));
+        this.transformState = applyCanvasBoundaries({
+            rects,
+            transform: nextTransform,
+            boundary: this.boundary,
+        });
+        this.graphStore.setScale(this.transformState.scale);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: GraphCanvasComponent, isStandalone: true, selector: "acl-graph-canvas", inputs: { minScale: "minScale", maxScale: "maxScale", originX: "originX", originY: "originY", boundary: "boundary", loading: "loading", loadFailed: "loadFailed" }, outputs: { retry: "retry" }, host: { listeners: { "document:mousemove": "handleMouseMove($event)", "document:mouseup": "handleMouseUp()" } }, providers: [GraphStoreService], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "surfaceRef", first: true, predicate: ["surface"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #canvas\n  class=\"acl-graph-canvas\"\n  [ngStyle]=\"canvasStyle\"\n  (wheel)=\"handleWheelEvent($event)\"\n  (mousedown)=\"handleMouseDown($event)\"\n>\n  <div\n    #surface\n    class=\"acl-graph-canvas__surface\"\n    [ngStyle]=\"surfaceStyle\"\n  >\n    <ng-content></ng-content>\n    <ng-content select=\"acl-graph-links\"></ng-content>\n  </div>\n\n  <div class=\"acl-graph-canvas__action-wrapper right bottom\">\n    <div\n      class=\"acl-graph-canvas__action square\"\n      [title]=\"'panoramic_view' | translate\"\n      (click)=\"zoomOverview()\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <aui-icon icon=\"full_size\"></aui-icon>\n    </div>\n    <div class=\"acl-graph-canvas__scale-controller\">\n      <aui-icon\n        icon=\"minus\"\n        [title]=\"'zoom_out' | translate\"\n        [class.disabled]=\"transformState.scale <= minScale\"\n        (click)=\"zoomByDefaultStep('out')\"\n        (mousedown)=\"$event.stopPropagation()\"\n      ></aui-icon>\n      <span>{{ (transformState.scale * 100).toFixed(0) }}%</span>\n      <aui-icon\n        icon=\"plus\"\n        [title]=\"'zoom_in' | translate\"\n        [class.disabled]=\"transformState.scale >= maxScale\"\n        (click)=\"zoomByDefaultStep('in')\"\n        (mousedown)=\"$event.stopPropagation()\"\n      ></aui-icon>\n    </div>\n    <div\n      class=\"acl-graph-canvas__action square\"\n      [title]=\"'isometric_view' | translate\"\n      (click)=\"zoomOriginal()\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <aui-icon icon=\"actual_size\"></aui-icon>\n    </div>\n  </div>\n  <ng-content select=\"acl-graph-actions\"></ng-content>\n  <div\n    class=\"acl-graph-canvas__loading-mask\"\n    (wheel)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.stopPropagation()\"\n    [hidden]=\"!loading && !loadFailed\"\n  >\n    <div class=\"acl-graph-canvas__loading\">\n      @if (loading) {\n        <aui-icon icon=\"spinner\"></aui-icon>\n        <span>{{ 'loading_please_wait' | translate }}</span>\n      }\n      @if (loadFailed) {\n        <span>{{ 'failed_load_please' | translate }}</span>\n        <button\n          aui-button=\"text\"\n          (click)=\"retry.emit()\"\n        >\n          {{ 'retry' | translate }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep .acl-graph-canvas{display:flex;width:100%;height:100%;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));background-image:radial-gradient(rgba(var(--aui-color-n-7),.5) 1px,transparent 1px);background-size:10px 10px;background-position:center center;position:relative;overflow:hidden}::ng-deep .acl-graph-canvas:after{content:\"\";display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}:root ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__surface{position:relative}::ng-deep .acl-graph-canvas__links{position:absolute;top:0;left:0;width:1000px;height:1000px;overflow:visible;color:rgb(var(--aui-color-primary));pointer-events:none}::ng-deep .acl-graph-canvas__links .acl-graph-link__line{fill:none;stroke:currentcolor;stroke-width:2px}::ng-deep .acl-graph-canvas__links .acl-graph-link__dot,::ng-deep .acl-graph-canvas__links .acl-graph-link__arrow{fill:currentcolor}::ng-deep .acl-graph-canvas__loading{padding:8px 16px;border-radius:var(--aui-border-radius-m)}::ng-deep .acl-graph-canvas__loading{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}::ng-deep .acl-graph-canvas__loading aui-icon{margin-right:8px;color:rgb(var(--aui-color-primary));font-size:var(--aui-icon-size-m)}::ng-deep .acl-graph-canvas__loading-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:default}::ng-deep .acl-graph-canvas__action-wrapper{position:absolute;display:flex}::ng-deep .acl-graph-canvas__action-wrapper.top{top:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.right{right:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.left{left:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.bottom{bottom:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas acl-graph-actions .acl-graph-canvas__action-wrapper.bottom.right{right:168px}::ng-deep .acl-graph-canvas__action{padding:0 6px;height:24px;display:flex;align-items:center;justify-content:center;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .acl-graph-canvas__action{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__action.square{width:24px}::ng-deep .acl-graph-canvas__action:hover,::ng-deep .acl-graph-canvas__action.active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .acl-graph-canvas__action.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10))}::ng-deep .acl-graph-canvas__action+::ng-deep .acl-graph-canvas__action{margin-left:4px}::ng-deep .acl-graph-canvas__scale-controller{display:flex;align-items:center;justify-content:center;margin:0 4px}::ng-deep .acl-graph-canvas__scale-controller{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}::ng-deep .acl-graph-canvas__scale-controller{background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m)}:root ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__scale-controller{-webkit-user-select:none;user-select:none}::ng-deep .acl-graph-canvas__scale-controller aui-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}::ng-deep .acl-graph-canvas__scale-controller aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .acl-graph-canvas__scale-controller aui-icon.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}::ng-deep .acl-graph-canvas__scale-controller span{text-align:center;height:16px;width:50px;border-left:1px solid rgb(var(--aui-color-n-8));border-right:1px solid rgb(var(--aui-color-n-8))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-graph-canvas', changeDetection: ChangeDetectionStrategy.OnPush, providers: [GraphStoreService], standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, TranslatePipe], template: "<div\n  #canvas\n  class=\"acl-graph-canvas\"\n  [ngStyle]=\"canvasStyle\"\n  (wheel)=\"handleWheelEvent($event)\"\n  (mousedown)=\"handleMouseDown($event)\"\n>\n  <div\n    #surface\n    class=\"acl-graph-canvas__surface\"\n    [ngStyle]=\"surfaceStyle\"\n  >\n    <ng-content></ng-content>\n    <ng-content select=\"acl-graph-links\"></ng-content>\n  </div>\n\n  <div class=\"acl-graph-canvas__action-wrapper right bottom\">\n    <div\n      class=\"acl-graph-canvas__action square\"\n      [title]=\"'panoramic_view' | translate\"\n      (click)=\"zoomOverview()\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <aui-icon icon=\"full_size\"></aui-icon>\n    </div>\n    <div class=\"acl-graph-canvas__scale-controller\">\n      <aui-icon\n        icon=\"minus\"\n        [title]=\"'zoom_out' | translate\"\n        [class.disabled]=\"transformState.scale <= minScale\"\n        (click)=\"zoomByDefaultStep('out')\"\n        (mousedown)=\"$event.stopPropagation()\"\n      ></aui-icon>\n      <span>{{ (transformState.scale * 100).toFixed(0) }}%</span>\n      <aui-icon\n        icon=\"plus\"\n        [title]=\"'zoom_in' | translate\"\n        [class.disabled]=\"transformState.scale >= maxScale\"\n        (click)=\"zoomByDefaultStep('in')\"\n        (mousedown)=\"$event.stopPropagation()\"\n      ></aui-icon>\n    </div>\n    <div\n      class=\"acl-graph-canvas__action square\"\n      [title]=\"'isometric_view' | translate\"\n      (click)=\"zoomOriginal()\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <aui-icon icon=\"actual_size\"></aui-icon>\n    </div>\n  </div>\n  <ng-content select=\"acl-graph-actions\"></ng-content>\n  <div\n    class=\"acl-graph-canvas__loading-mask\"\n    (wheel)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.stopPropagation()\"\n    [hidden]=\"!loading && !loadFailed\"\n  >\n    <div class=\"acl-graph-canvas__loading\">\n      @if (loading) {\n        <aui-icon icon=\"spinner\"></aui-icon>\n        <span>{{ 'loading_please_wait' | translate }}</span>\n      }\n      @if (loadFailed) {\n        <span>{{ 'failed_load_please' | translate }}</span>\n        <button\n          aui-button=\"text\"\n          (click)=\"retry.emit()\"\n        >\n          {{ 'retry' | translate }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep .acl-graph-canvas{display:flex;width:100%;height:100%;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));background-image:radial-gradient(rgba(var(--aui-color-n-7),.5) 1px,transparent 1px);background-size:10px 10px;background-position:center center;position:relative;overflow:hidden}::ng-deep .acl-graph-canvas:after{content:\"\";display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}:root ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas:after{box-shadow:inset 0 0 4px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__surface{position:relative}::ng-deep .acl-graph-canvas__links{position:absolute;top:0;left:0;width:1000px;height:1000px;overflow:visible;color:rgb(var(--aui-color-primary));pointer-events:none}::ng-deep .acl-graph-canvas__links .acl-graph-link__line{fill:none;stroke:currentcolor;stroke-width:2px}::ng-deep .acl-graph-canvas__links .acl-graph-link__dot,::ng-deep .acl-graph-canvas__links .acl-graph-link__arrow{fill:currentcolor}::ng-deep .acl-graph-canvas__loading{padding:8px 16px;border-radius:var(--aui-border-radius-m)}::ng-deep .acl-graph-canvas__loading{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.05)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__loading{background-color:rgba(var(--aui-color-n-1),.1)}::ng-deep .acl-graph-canvas__loading aui-icon{margin-right:8px;color:rgb(var(--aui-color-primary));font-size:var(--aui-icon-size-m)}::ng-deep .acl-graph-canvas__loading-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:default}::ng-deep .acl-graph-canvas__action-wrapper{position:absolute;display:flex}::ng-deep .acl-graph-canvas__action-wrapper.top{top:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.right{right:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.left{left:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas__action-wrapper.bottom{bottom:var(--aui-spacing-m)}::ng-deep .acl-graph-canvas acl-graph-actions .acl-graph-canvas__action-wrapper.bottom.right{right:168px}::ng-deep .acl-graph-canvas__action{padding:0 6px;height:24px;display:flex;align-items:center;justify-content:center;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);cursor:pointer;-webkit-user-select:none;user-select:none}::ng-deep .acl-graph-canvas__action{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}:root ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__action{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__action.square{width:24px}::ng-deep .acl-graph-canvas__action:hover,::ng-deep .acl-graph-canvas__action.active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .acl-graph-canvas__action.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10))}::ng-deep .acl-graph-canvas__action+::ng-deep .acl-graph-canvas__action{margin-left:4px}::ng-deep .acl-graph-canvas__scale-controller{display:flex;align-items:center;justify-content:center;margin:0 4px}::ng-deep .acl-graph-canvas__scale-controller{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}::ng-deep .acl-graph-canvas__scale-controller{background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m)}:root ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] ::ng-deep .acl-graph-canvas__scale-controller{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-graph-canvas__scale-controller{-webkit-user-select:none;user-select:none}::ng-deep .acl-graph-canvas__scale-controller aui-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}::ng-deep .acl-graph-canvas__scale-controller aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .acl-graph-canvas__scale-controller aui-icon.disabled{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}::ng-deep .acl-graph-canvas__scale-controller span{text-align:center;height:16px;width:50px;border-left:1px solid rgb(var(--aui-color-n-8));border-right:1px solid rgb(var(--aui-color-n-8))}\n"] }]
+        }], propDecorators: { minScale: [{
+                type: Input
+            }], maxScale: [{
+                type: Input
+            }], originX: [{
+                type: Input
+            }], originY: [{
+                type: Input
+            }], boundary: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], loadFailed: [{
+                type: Input
+            }], retry: [{
+                type: Output
+            }], canvasRef: [{
+                type: ViewChild,
+                args: ['canvas', { static: true }]
+            }], surfaceRef: [{
+                type: ViewChild,
+                args: ['surface', { static: true }]
+            }], handleMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], handleMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', []]
+            }] } });
+function scaleLimit(scale) {
+    return clamp(round(scale, 2), 0.25, 2);
+}
+function applyCanvasBoundaries({ transform, rects, boundary, }) {
+    const { origin: [originX, originY], scale, translate, } = transform;
+    const { surfaceRect: { offsetWidth: surfaceWidth, offsetHeight: surfaceHeight }, canvasRect: { offsetWidth: canvasWidth, offsetHeight: canvasHeight }, } = rects;
+    const x = xSelector(originX, [
+        boundary,
+        canvasWidth / 2,
+        canvasWidth - boundary,
+    ]);
+    const x1 = x +
+        xSelector(originX, [surfaceWidth * scale, (surfaceWidth * scale) / 2, 0]);
+    const x2 = canvasWidth -
+        (x -
+            xSelector(originX, [
+                0,
+                (surfaceWidth * scale) / 2,
+                surfaceWidth * scale,
+            ]));
+    const y = ySelector(originY, [
+        boundary,
+        canvasHeight / 2,
+        canvasHeight - boundary,
+    ]);
+    const y1 = y +
+        ySelector(originY, [surfaceHeight * scale, (surfaceHeight * scale) / 2, 0]);
+    const y2 = canvasHeight -
+        (y -
+            ySelector(originY, [
+                0,
+                (surfaceHeight * scale) / 2,
+                surfaceHeight * scale,
+            ]));
+    return mergeRight(transform, {
+        translate: [
+            clamp(translate[0], boundary - x1, x2 - boundary),
+            clamp(translate[1], boundary - y1, y2 - boundary),
+        ],
+    });
+}
+function originCoordinatePoint({ origin: [originX, originY] }, { surfaceRect, canvasRect }) {
+    const [left, top] = coordinate(canvasRect, [
+        surfaceRect.left,
+        surfaceRect.top,
+    ]);
+    const x = xSelector(originX, [
+        left,
+        left + surfaceRect.width / 2,
+        left + surfaceRect.width,
+    ]);
+    const y = ySelector(originY, [
+        top,
+        top + surfaceRect.height / 2,
+        top + surfaceRect.height,
+    ]);
+    return [x, y];
+}
+function xSelector(x, [l, c, r]) {
+    return x === 'left' ? l : x === 'center' ? c : r;
+}
+function ySelector(y, [t, c, b]) {
+    return y === 'top' ? t : y === 'center' ? c : b;
+}
+function coordinate(canvas, [left, top]) {
+    return [left - canvas.left, top - canvas.top];
+}
+
+class GraphLinkComponent {
+    get arrowTransform() {
+        const [[x1, y1], [x2, y2]] = this.points;
+        const deg = this.direction === 'v' && y1 < y2
+            ? -90
+            : this.direction === 'v'
+                ? 90
+                : this.direction === 'h' && x1 < x2
+                    ? 180
+                    : 0;
+        return `translate(${x2}px, ${y2}px) rotate(${deg}deg)`;
+    }
+    constructor() {
+        this.direction = 'v';
+        this.radius = 12;
+        this.arrow = true;
+        this.path = ([[x1, y1], [x2, y2]]) => {
+            const mX = x1 + (x2 - x1) / 2;
+            const mY = y1 + (y2 - y1) / 2;
+            const r = Math.min(Math.abs(x1 - x2) / 2, Math.abs(y1 - y2) / 2, this.radius);
+            return this.direction === 'h'
+                ? `M ${x1} ${y1}
+         L ${addOrMinus(x1 > x2, mX, r)} ${y1}
+         Q ${mX} ${y1} ${mX} ${addOrMinus(y1 < y2, y1, r)}
+         L ${mX} ${addOrMinus(y1 > y2, y2, r)}
+         Q ${mX} ${y2} ${addOrMinus(x1 < x2, mX, r)} ${y2}
+         L ${this.arrow ? addOrMinus(x1 > x2, x2, 8) : x2} ${y2}`
+                : `M ${x1} ${y1}
+         L ${x1} ${addOrMinus(y1 > y2, mY, r)}
+         Q ${x1} ${mY} ${addOrMinus(x1 < x2, x1, r)} ${mY}
+         L ${addOrMinus(x1 > x2, x2, r)} ${mY}
+         Q ${x2} ${mY} ${x2} ${addOrMinus(y1 < y2, mY, r)}
+         L ${x2} ${this.arrow ? addOrMinus(y1 > y2, y2, 8) : y2}`;
+        };
+        this.parallelDirection = (a, b, al, bl) => a + al < b ? [a + al, b] : [a, b + bl];
+        this.verticalDirection = (a, b, al, bl) => [
+            a + al / 2,
+            b + bl / 2,
+        ];
+        this.onDestroy$$ = new Subject();
+        this.store = inject(GraphStoreService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.store
+            .nodeChanged()
+            .pipe(takeUntil(this.onDestroy$$))
+            .subscribe(() => {
+            const currentPoints = this.points;
+            const nextPoints = this.findPoints();
+            if (isEqual(currentPoints, nextPoints)) {
+                return;
+            }
+            this.points = nextPoints;
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.onDestroy$$.next();
+    }
+    findPoints() {
+        const r1 = this.store.getNode(this.from)?.getRect();
+        const r2 = this.store.getNode(this.to)?.getRect();
+        if (!r1 || !r2) {
+            return;
+        }
+        const s = this.store.getSurfaceNode().getRect();
+        const [x1, x2] = (this.direction === 'h' ? this.parallelDirection : this.verticalDirection)(r1.left - s.left, r2.left - s.left, r1.width, r2.width);
+        const [y1, y2] = (this.direction === 'h' ? this.verticalDirection : this.parallelDirection)(r1.top - s.top, r2.top - s.top, r1.height, r2.height);
+        return this.unScale([
+            [x1, y1],
+            [x2, y2],
+        ]);
+    }
+    unScale(points) {
+        return points.map(p => p.map(n => n / this.store.getScale()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: GraphLinkComponent, isStandalone: true, selector: "g[aclGraphLink]", inputs: { from: "from", to: "to", direction: "direction", radius: "radius", arrow: "arrow", color: "color", path: "path", parallelDirection: "parallelDirection", verticalDirection: "verticalDirection" }, ngImport: i0, template: "@if (points) {\n  <svg:path\n    class=\"acl-graph-link__line\"\n    [attr.d]=\"path(points)\"\n    [style.stroke]=\"color\"\n  />\n  @if (arrow) {\n    <svg:circle\n      class=\"acl-graph-link__dot\"\n      r=\"4\"\n      [attr.cx]=\"points[0][0]\"\n      [attr.cy]=\"points[0][1]\"\n      [style.fill]=\"color\"\n    ></svg:circle>\n    <svg:polygon\n      class=\"acl-graph-link__arrow\"\n      points=\"0,0 8,-4 8,4\"\n      [style.transform]=\"arrowTransform\"\n      [style.fill]=\"color\"\n    ></svg:polygon>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'g[aclGraphLink]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "@if (points) {\n  <svg:path\n    class=\"acl-graph-link__line\"\n    [attr.d]=\"path(points)\"\n    [style.stroke]=\"color\"\n  />\n  @if (arrow) {\n    <svg:circle\n      class=\"acl-graph-link__dot\"\n      r=\"4\"\n      [attr.cx]=\"points[0][0]\"\n      [attr.cy]=\"points[0][1]\"\n      [style.fill]=\"color\"\n    ></svg:circle>\n    <svg:polygon\n      class=\"acl-graph-link__arrow\"\n      points=\"0,0 8,-4 8,4\"\n      [style.transform]=\"arrowTransform\"\n      [style.fill]=\"color\"\n    ></svg:polygon>\n  }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { from: [{
+                type: Input
+            }], to: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], arrow: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], path: [{
+                type: Input
+            }], parallelDirection: [{
+                type: Input
+            }], verticalDirection: [{
+                type: Input
+            }] } });
+function addOrMinus(condition, v1, v2) {
+    return (condition ? add : subtract)(v1, v2);
+}
+
+class GraphLinksComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: GraphLinksComponent, isStandalone: true, selector: "acl-graph-links", ngImport: i0, template: "<svg class=\"acl-graph-canvas__links\">\n  <ng-content select=\"[aclGraphLink]\"></ng-content>\n</svg>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphLinksComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-graph-links', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<svg class=\"acl-graph-canvas__links\">\n  <ng-content select=\"[aclGraphLink]\"></ng-content>\n</svg>\n" }]
+        }] });
+
+class GraphNodeDirective {
+    constructor() {
+        this.hostRect = () => getRect(this.el.nativeElement);
+        this.el = inject(ElementRef);
+        this.store = inject(GraphStoreService);
+    }
+    ngOnInit() {
+        this.store.registerNode(this.id, { getRect: this.hostRect, el: this.el });
+    }
+    ngOnDestroy() {
+        this.store.unregisterNode(this.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphNodeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: GraphNodeDirective, isStandalone: true, selector: "[aclGraphNode]", inputs: { id: ["aclGraphNode", "id"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GraphNodeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[aclGraphNode]',
+                    standalone: true,
+                }]
+        }], propDecorators: { id: [{
+                type: Input,
+                args: ['aclGraphNode']
+            }] } });
+
+const GRAPH_COMPONENTS = [
+    GraphActionsComponent,
+    GraphCanvasComponent,
+    GraphLinksComponent,
+    GraphLinkComponent,
+    GraphNodeDirective,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION, AIT_API_GROUP, ALL, ALL_VALUE, ANNOTATIONS, API_GATEWAY, ARGOCD_GROUP, ARRAY_FORM_TABLE_MODULE, ARRAY_TABLE_FORM_ERROR_BG, ASSIGN_ALL, ASYNC_DATA_MODULE, AccessMode, AccessModes, AclTableVirtualComponent, AclTableVirtualHeaderDefDirective, AclTableVirtualModule, AclTableVirtualPlaceholderDefDirective, AclTableVirtualRowDefDirective, AlaudaDeployStatus, AlaudaRunningStatus, ArrayFormTableComponent, ArrayFormTableFooterDirective, ArrayFormTableHeaderDirective, ArrayFormTableRowControlDirective, ArrayFormTableRowDirective, ArrayFormTableRowErrorDirective, ArrayFormTableRowSeparatorDirective, ArrayFormTableZeroStateDirective, AsyncDataLoader, AsyncFunctionValidatorDirective, AuiCodeEditorHelperDirective, BASE_TIMEZONE, BaseFormContainer, BaseNestedFormControl, BaseNestedFormControlPure, BaseStringMapFormComponent, Bracket, CHART_PICKER_TIME_RANGES, CLUSTER, COMMON_RESOURCE_DEFINITIONS, CORE_UNITS, CORE_UNIT_REG, CREATE, CREATED_AT, CREATION_TIMESTAMP, CREATOR, CRON_ENABLE_7_FOR_SUNDAY, CRON_FORMAT_ERROR, CRON_MIN_INTERVAL_ERROR, CRYPTO_HEADER_KEY, CRYPTO_KEY, CRYPTO_RANDOM_HEADER_KEY, CRYPTO_TYPE, CUSTOM, CUSTOMIZED, CUSTOM_RANGE, CalcPipe, CardSectionComponent, ClickOutsideDirective, CloudHelmRequestStateEnum, CodeDisplayDialogComponent, CoerceNumberDirective, ConfirmDeleteComponent, ConfirmDeleteContentDirective, ConfirmDeleteLabelDirective, ConfirmDeleteTipDirective, ControlValueTraceDirective, CronHumanReadablePipe, CronWeekDays, CrontabNextPipe, CurrentTimeComponent, DATE_FORMAT, DATE_TIME_FORMAT, DEFAULT_CODE_EDITOR_OPTIONS, DEFAULT_CONTAINER_ANNOTATION, DEFAULT_OPERATOR, DEFAULT_OPTIONS, DEFAULT_REASON, DELIMITER, DESCRIPTION, DISPLAY_NAME, DNS1123SubdomainValidator, DOMAIN_PATTERN, DOMAIN_PATTERN_BASE, DOT, DOWNGRADE_WATCH_ENABLED, DOWNGRADE_WATCH_POLLING, DUPLICATE_ERROR_KEY, DUPLICATION_JUSTIFY_STRATEGY, DataSource, DateRangePickerComponent, DeclareDirective, DefaultStatusColorMapper, DefaultStatusIconMapper, DeleteType, DeletingTagComponent, DisabledContainerComponent, DisabledDirective, DragHandleDirective, DurationPipe, E2eAttributeBindingDirective, EFFECT_DIRECTIVE_MODULE, EMAIL_PATTERN, EMPTY, ERRORS_MAPPER_MODULE, ESCAPE_DEACTIVATE_CHECK, ErrorStateComponent, ErrorsMapperComponent, ErrorsMapperDirective, FALSE, FIELDSET_GROUP_COMPONENTS, FeatureGateDirective, FieldSetColumnComponent, FieldSetColumnGroupComponent, FieldSetGroupComponent, FieldSetItemActionDirective, FieldSetItemComponent, FileResultType, FoldableBlockComponent, FoldableItemInTableComponent, FormItemMarginEffectDirective, FunctionValidatorDirective, GLOBAL_CLUSTER, GenericStatusColor, GenericStatusIcon, GuardStatus, HTTP_ADDRESS_PATTERN, HTTP_DUAL_IP_OR_DOMAIN_PATTERN, HTTP_IP_OR_DOMAIN_PATTERN, HYPHEN, HelmRequestPhaseEnum, HelpDocDirective, HelpDocUrlPipe, HelpDocumentComponent, HelpDocumentService, IMAGE_TAG_PATTERN, INT_PATTERN, INT_ZERO_PATTERN, IPV4_IPV6_ADDRESS_HOSTNAME_PORT_PATTERN, IPV6_ADDRESS_HOSTNAME_PATTERN, IPV6_ADDRESS_HOSTNAME_PORT_PATTERN, IPV6_PATTERN_BASE, IP_ADDRESS_HOSTNAME_PATTERN, IP_ADDRESS_HOSTNAME_PATTERN_EXTEND, IP_ADDRESS_HOSTNAME_PORT_PATTERN, IP_ADDRESS_PATTERN, IP_ADDRESS_PORT_PATTERN, IP_ADDRESS_SUBNET_PATTERN, IP_PATTERN, IP_PATTERN_BASE, IP_V4_OR_V6_PATTERN, IP_V6_ADDRESS_PATTERN, IP_V6_PATTERN, InterceptDeactivateDirective, InterceptDeactivateGuard, InterceptDeactivateService, JobStatusColorMapper, JobStatusEnum, JobStatusIconMapper, K8SResourceList, K8SResourceListFooterComponent, K8SResourcePagedList, K8S_APP_API_GROUP, K8S_CORE_API_GROUP, K8S_RESOURCE_LABEL_KEY_NAME_PATTERN, K8S_RESOURCE_LABEL_KEY_PREFIX_PATTERN, K8S_RESOURCE_LABEL_VALUE_PATTERN, K8S_RESOURCE_LIST_MODULE, K8S_RESOURCE_NAME_START_WITH_CHARS_ONLY, K8S_RESOURCE_TRANSLATE_KEY, K8sListFooterLoadingErrorDirective, K8sListFooterNoDataDirective, K8sResourceAction, K8sResourceMarkComponent, K8sResourceTranslateKeyPipe, K8sSharedUtilService, K8sYamlDisplayDialogComponent, KNOWN_COLUMNS, KeyValueFormTableComponent, KeyValueTableComponent, LABELS, LINK, LOCAL_STORAGE_KEY_THEME_MODE, ListDisplayComponent, ListenResizeDirective, LoadAction, LocaleTransformPipe, MACHINE_API_GROUP, METADATA, MUTABLE_BASIC_OPTIONS, MUTABLE_MODULE, MarkedPipe, MaxLengthValidatorDirective, MaxValidatorDirective, MinLengthValidatorDirective, MinValidatorDirective, MinimumFormatPipe, MosaicComponent, MosaicLeftDirective, MosaicRightDirective, MultiSearchActionInputComponent, MultiSearchAdvanced, MultiSearchBasic, MultiSearchComponent, MutableDirective, NAME, NAMESPACE, NOTIFICATION_SERVER_NAME, NOTIFY_DURATION_HEADER, NOTIFY_ON_ERROR_HEADER, NOTIFY_ON_ERROR_HEADERS, NOT_NOTIFY_ON_ERROR_HEADERS, NUMBER_PATTERN, NamespaceBadgeComponent, NotBeValidatorDirective, OAM_GROUP, OnResizeChangeService, OneOfValidatorDirective, OverviewBannerComponent, PACKAGE_RUNTIME_VALUE, PAGE_GUARD_MODULE, PLATFORM_OPS_MODE, PORT_PATTERN, POSITIVE_INT_PATTERN, POSITIVE_NUMBER_PATTERN, PREFIX_LABEL_CLASS, PROJECT, PUBLIC_NAMESPACE, PageGuardComponent, PageGuardContentDirective, PageGuardDescriptionDirective, PageGuardImageDirective, PageGuardOperationDirective, PageStateComponent, ParseJsonTranslatePipe, PasswordInputComponent, PodStatusColorMapper, PodStatusComponent, PodStatusEnum, PodStatusIconMapper, PreventClipboardDirective, PreventDirective, PreventHandler, ProductKey, REASON_MAP, RESOURCE_MAC_TYPES, RESOURCE_REQUIREMENT_KEYS, ReadonlyFieldDirective, Reason, RelativeTimeComponent, RequestPool, ResizeDirective, ResourceLabelComponent, ResourceMultiSelectComponent, ResourceYamlDisplayComponent, SERVICE_PORT_BASE_PROTOCOLS, SERVICE_PORT_PROTOCOLS, SERVICE_SESSION_AFFINITIES, SERVICE_TYPES, SLASH, SPACE, SPEC, STATUS, STRATEGY_JUDGE_MAPPER, STRONG_PASSWORD_SPECIAL_CHARS, ScrollBorderObserverDirective, ScrollToFirstInvalidDirective, ScrollToFirstInvalidMarkerDirective, SearchItemComponent, SearchItemLabelDirective, SearchPanelComponent, SecretType, SelectPrefixLabelDirective, SpanComponent, StatusIconComponent, StopDirective, StringArrayFormTableComponent, StrongPasswordDirective, StrongPasswordTooltipComponent, TEMPLATE_OPTIONS, TIMEZONES, TIME_FORMAT, TOKEN_HELP_DOC_DATA, TRUE, TableCellDefDirective, TableComponent, TableCustomColumnsComponent, TableUtilService, TagsLabelComponent, TaintEffect, TestTagComponent, TextEllipsisComponent, TextTooltipDirective, TextWithUrlComponent, ThemeTransformPipe, TimezoneDisplayPipe, TolerationOperator, TrimDirective, UNDERSCORE, UNITS, UNIT_REG, UPDATE, UPDATED_AT, UPDATED__AT, UpdateDescriptionDialogComponent, UpdateDisplayNameDialogComponent, UpdateKeyValueDialogComponent, UploadFileComponent, UserSecurityPolicyRule, UserState, VOLUME_SNAPSHOT_GROUP, ValidateRowDuplicateService, ValidatorsDirective, VolumeMode, VolumeModes, VolumeTypeEnum, WEEK_DAYS, WILDCARD, WORKSPACE_PARAMS, WorkloadKind, WorkloadStatusColorMapper, WorkloadStatusEnum, WorkloadStatusIconComponent, WorkloadStatusIconMapper, YamlUtilService, ZeroStateComponent, addUnitCoreM, addUnitGi, addUnitMi, appendImageHeader, atobWithFallback, buildImageAddress, buildUrl, checkValueExit, clearWindowsXtermTools, commonOptions, compareMinorVersion, compareVersion, copyValue, createActions, createNestedFormControl, cronValidator, cronValidatorBasic, dataTransfer, dateValueOf, defaultFilter, defaultSorter, emptyObjectRemoveRuleFactory, errorColor, extractListParamsFromRoute, extractPagedListParams, extractWorkspace, extractWorkspaceFromRoute, filterEmptyValue, filterTrees, findPath, firstPath, formatCPU, formatMemory, formatNumber, genControlDepsMap, getAppropriateMemory, getBaseHref, getCpu, getCronWeekDayNumbers, getDisabledState, getDisabledState$, getHelpDocUrl, getHostname, getJobStatus, getK8sResourceAnnotationErrorMapper, getK8sResourceAnnotationErrorMapper$, getK8sResourceLabelErrorMapper, getK8sResourceLabelErrorMapper$, getMemory, getPickerTimeRanges, getPodAggregatedStatus, getPodIPs, getPodStatus, getPrivateIP, getPrivateIPv4, getPrivateIPv6, getRelativePath, getResourceLimitAsyncValidatorFn, getResourceLimitValidatorFn, getResourceValue, getResourceViewModel, getToPath, getValidVersion, getWorkloadStatus, initGreaterValidator, isAbsoluteUrl, isB, isCronFieldCountCorrect, isCronWeekDayCorrect, isCronWeekDaysContinuous, isErrorMessage, isJsonObjectString, isK8sResource, isL, isR, isSelectAll, isT, isValidRID, isValidWorkspace, k8sResourceAnnotationKeyValidator, k8sResourceAnnotationValidator, k8sResourceLabelKeyValidator, k8sResourceLabelValidator, k8sResourceLabelValueValidator, loadEnv, logsActions, logsReadOptions, mapTrees, matchExpressionsToString, matchLabelsToString, maxParallelByHttpVersion, noShowRowError, normalizeParams, numToStr, parseDaemonSetStatus, parseDeploymentStatus, parseImageAddress, parseRID, parseStatefulSetStatus, parseToWorkloadStatus, parseUrlInText, parseValidImageName, parseValueAndUnit, parseVersion, parseWorkspace, prefixFilterRuleFactory, primaryColor, queryListParams, randomPassword, readonlyOptions, reduceTrees, removeDirtyFieldsBeforeUpdate, resourceUnits, rowBackgroundColorFn, safeAssign, scrollIntoView, setNode, setupErrorMapper, shortNum, sortByCreationTimestamp, stringToMatchLabels, stringifyRID, stringifyWorkspace, successColor, tableSort, tableSortAdvance, tagRenderDefault, textWriteOptions, toLowerFirstLetter, toNumber, toPercent, toPx, toUnitGi, toUnitI, toUnitMi, toUnitNum, toUnitNumM, trackByName, trackByUid, transferResource, updateActions, versionRegex, viewActions, warnColor, withLoadState, workspaceToPath, yamlFilterField, yamlReadOptions, yamlWriteOptions };
+export { ACTION, AIT_API_GROUP, ALL, ALL_VALUE, ANNOTATIONS, API_GATEWAY, ARGOCD_GROUP, ARRAY_FORM_TABLE_MODULE, ARRAY_TABLE_FORM_ERROR_BG, ASSIGN_ALL, ASYNC_DATA_MODULE, AccessMode, AccessModes, AclTableVirtualComponent, AclTableVirtualHeaderDefDirective, AclTableVirtualPlaceholderDefDirective, AclTableVirtualRowDefDirective, AlaudaDeployStatus, AlaudaRunningStatus, ArrayFormTableComponent, ArrayFormTableFooterDirective, ArrayFormTableHeaderDirective, ArrayFormTableRowControlDirective, ArrayFormTableRowDirective, ArrayFormTableRowErrorDirective, ArrayFormTableRowSeparatorDirective, ArrayFormTableZeroStateDirective, AsyncDataLoader, AsyncFunctionValidatorDirective, AuiCodeEditorHelperDirective, BASE_TIMEZONE, BUILT_IN_YAML_EXAMPLES, BaseFormContainer, BaseNestedFormControl, BaseNestedFormControlPure, BaseStringMapFormComponent, Bracket, CHART_PICKER_TIME_RANGES, CLUSTER, COMMON_RESOURCE_DEFINITIONS, CORE_UNITS, CORE_UNIT_REG, CREATE, CREATED_AT, CREATION_TIMESTAMP, CREATOR, CRON_ENABLE_7_FOR_SUNDAY, CRON_FORMAT_ERROR, CRON_MIN_INTERVAL_ERROR, CRYPTO_HEADER_KEY, CRYPTO_KEY, CRYPTO_RANDOM_HEADER_KEY, CRYPTO_TYPE, CUSTOM, CUSTOMIZED, CUSTOM_RANGE, CalcPipe, CardSectionComponent, ClickOutsideDirective, CloudHelmRequestStateEnum, CodeDisplayDialogComponent, CoerceNumberDirective, ConfirmDeleteComponent, ConfirmDeleteContentDirective, ConfirmDeleteLabelDirective, ConfirmDeleteTipDirective, ControlValueTraceDirective, CronHumanReadablePipe, CronWeekDays, CrontabNextPipe, CurrentTimeComponent, DATE_FORMAT, DATE_TIME_FORMAT, DEFAULT_CODE_EDITOR_OPTIONS, DEFAULT_CONTAINER_ANNOTATION, DEFAULT_OPERATOR, DEFAULT_OPTIONS, DEFAULT_REASON, DEFAULT_ZH_ERROR, DELIMITER, DESCRIPTION, DISPLAY_NAME, DNS1123SubdomainValidator, DOMAIN_PATTERN, DOMAIN_PATTERN_BASE, DOT, DOWNGRADE_WATCH_ENABLED, DOWNGRADE_WATCH_POLLING, DUPLICATE_ERROR_KEY, DUPLICATION_JUSTIFY_STRATEGY, DataSource, DateRangePickerComponent, DeclareDirective, DefaultStatusColorMapper, DefaultStatusIconMapper, DeleteType, DeletingTagComponent, DisabledContainerComponent, DisabledDirective, DragHandleDirective, DurationPipe, E2eAttributeBindingDirective, EFFECT_DIRECTIVE_MODULE, EMAIL_PATTERN, EMPTY, ERRORS_MAPPER_MODULE, ESCAPE_DEACTIVATE_CHECK, ErrorStateComponent, ErrorsMapperComponent, ErrorsMapperDirective, FALSE, FIELDSET_GROUP_COMPONENTS, FeatureGateDirective, FeedbackNotificationComponent, FieldSetColumnComponent, FieldSetColumnGroupComponent, FieldSetGroupComponent, FieldSetItemActionDirective, FieldSetItemComponent, FileResultType, FoldableBlockComponent, FoldableItemInTableComponent, FormItemMarginEffectDirective, FunctionValidatorDirective, GLOBAL_CLUSTER, GRAPH_COMPONENTS, GenericStatusColor, GenericStatusIcon, GraphActionsComponent, GraphCanvasComponent, GraphLinkComponent, GraphLinksComponent, GraphNodeDirective, GuardStatus, HTTP_ADDRESS_PATTERN, HTTP_DUAL_IP_OR_DOMAIN_PATTERN, HTTP_IP_OR_DOMAIN_PATTERN, HYPHEN, HelmRequestPhaseEnum, HelpDocDirective, HelpDocUrlPipe, HelpDocumentComponent, HelpDocumentService, IMAGE_TAG_PATTERN, INT_PATTERN, INT_ZERO_PATTERN, IPV4_IPV6_ADDRESS_HOSTNAME_PORT_PATTERN, IPV6_ADDRESS_HOSTNAME_PATTERN, IPV6_ADDRESS_HOSTNAME_PORT_PATTERN, IPV6_PATTERN_BASE, IP_ADDRESS_HOSTNAME_PATTERN, IP_ADDRESS_HOSTNAME_PATTERN_EXTEND, IP_ADDRESS_HOSTNAME_PORT_PATTERN, IP_ADDRESS_PATTERN, IP_ADDRESS_PORT_PATTERN, IP_ADDRESS_SUBNET_PATTERN, IP_PATTERN, IP_PATTERN_BASE, IP_V4_OR_V6_PATTERN, IP_V6_ADDRESS_PATTERN, IP_V6_PATTERN, InterceptDeactivateDirective, InterceptDeactivateGuard, InterceptDeactivateService, JobStatusColorMapper, JobStatusEnum, JobStatusIconMapper, K8SResourceList, K8SResourceListFooterComponent, K8SResourcePagedList, K8S_APP_API_GROUP, K8S_CORE_API_GROUP, K8S_RESOURCE_LABEL_KEY_NAME_PATTERN, K8S_RESOURCE_LABEL_KEY_PREFIX_PATTERN, K8S_RESOURCE_LABEL_VALUE_PATTERN, K8S_RESOURCE_LIST_MODULE, K8S_RESOURCE_NAME_START_WITH_CHARS_ONLY, K8S_RESOURCE_TRANSLATE_KEY, K8sListFooterLoadingErrorDirective, K8sListFooterNoDataDirective, K8sResourceAction, K8sResourceMarkComponent, K8sResourceTranslateKeyPipe, K8sSharedUtilService, K8sYamlDisplayDialogComponent, KNOWN_COLUMNS, KeyValueFormTableComponent, KeyValueTableComponent, LABELS, LINK, LOCAL_STORAGE_KEY_THEME_MODE, ListDisplayComponent, ListenResizeDirective, LoadAction, LocaleTransformPipe, MACHINE_API_GROUP, METADATA, MUTABLE_BASIC_OPTIONS, MUTABLE_MODULE, MarkedPipe, MaxLengthValidatorDirective, MaxValidatorDirective, MinLengthValidatorDirective, MinValidatorDirective, MinimumFormatPipe, MosaicComponent, MosaicLeftDirective, MosaicRightDirective, MultiSearchActionInputComponent, MultiSearchAdvanced, MultiSearchBasic, MultiSearchComponent, MutableDirective, NAME, NAMESPACE, NOTIFICATION_SERVER_NAME, NOTIFY_DURATION_HEADER, NOTIFY_ON_ERROR_HEADER, NOTIFY_ON_ERROR_HEADERS, NOT_NOTIFY_ON_ERROR_HEADERS, NUMBER_PATTERN, NamespaceBadgeComponent, NotBeValidatorDirective, NotificationUtilService, OAM_GROUP, OnResizeChangeService, OneOfValidatorDirective, OverviewBannerComponent, PACKAGE_RUNTIME_VALUE, PAGE_GUARD_MODULE, PLATFORM_OPS_MODE, PORT_PATTERN, POSITIVE_INT_PATTERN, POSITIVE_NUMBER_PATTERN, PREFIX_LABEL_CLASS, PROJECT, PUBLIC_NAMESPACE, PageGuardComponent, PageGuardContentDirective, PageGuardDescriptionDirective, PageGuardImageDirective, PageGuardOperationDirective, PageStateComponent, ParseJsonTranslatePipe, PasswordInputComponent, PluginClusterSelectorComponent, PodStatusColorMapper, PodStatusComponent, PodStatusEnum, PodStatusIconMapper, PreventClipboardDirective, PreventDirective, PreventHandler, ProductKey, REASON_MAP, RESOURCE_MAC_TYPES, RESOURCE_REQUIREMENT_KEYS, ReadonlyFieldDirective, Reason, RelativeTimeComponent, RequestPool, ResizeDirective, ResourceErrorInterceptor, ResourceLabelComponent, ResourceMultiSelectComponent, ResourceYamlDisplayComponent, ResourceYamlEditorComponent, SERVICE_PORT_BASE_PROTOCOLS, SERVICE_PORT_PROTOCOLS, SERVICE_SESSION_AFFINITIES, SERVICE_TYPES, SLASH, SPACE, SPEC, STATUS, STRATEGY_JUDGE_MAPPER, STRONG_PASSWORD_SPECIAL_CHARS, ScrollBorderObserverDirective, ScrollToFirstInvalidDirective, ScrollToFirstInvalidMarkerDirective, SearchItemComponent, SearchItemLabelDirective, SearchPanelComponent, SecretType, SelectPrefixLabelDirective, SpanComponent, StatusIconComponent, StopDirective, StringArrayFormTableComponent, StrongPasswordDirective, StrongPasswordTooltipComponent, TABLE_VIRTUAL_MODULE, TEMPLATE_OPTIONS, TIMEZONES, TIME_FORMAT, TOKEN_HELP_DOC_DATA, TRUE, TableCellDefDirective, TableComponent, TableCustomColumnsComponent, TableHeaderCellDefDirective, TableUtilService, TagsLabelComponent, TaintEffect, TerminatingTagComponent, TestTagComponent, TextEllipsisComponent, TextTooltipDirective, TextWithUrlComponent, ThemeTransformPipe, TimezoneDisplayPipe, TolerationOperator, TrimDirective, UNDERSCORE, UNITS, UNIT_REG, UPDATE, UPDATED_AT, UPDATED__AT, UpdateDescriptionDialogComponent, UpdateDisplayNameDialogComponent, UpdateKeyValueDialogComponent, UploadFileComponent, UserSecurityPolicyRule, UserState, VOLUME_SNAPSHOT_GROUP, ValidateRowDuplicateService, ValidatorsDirective, VolumeMode, VolumeModes, VolumeTypeEnum, WEEK_DAYS, WILDCARD, WORKSPACE_PARAMS, WRITABLE_METHODS, WorkloadKind, WorkloadStatusColorMapper, WorkloadStatusEnum, WorkloadStatusIconComponent, WorkloadStatusIconMapper, YamlUtilService, ZH_ERRORS, ZeroStateComponent, addUnitCoreM, addUnitGi, addUnitMi, appendImageHeader, atobWithFallback, buildImageAddress, buildUrl, checkValueExit, clearWindowsXtermTools, compareMinorVersion, compareVersion, copyValue, createNestedFormControl, cronValidator, cronValidatorBasic, dataTransfer, dateValueOf, defaultFilter, defaultSorter, emptyObjectRemoveRuleFactory, errorColor, extractListParamsFromRoute, extractPagedListParams, extractWorkspace, extractWorkspaceFromRoute, filterEmptyValue, filterTrees, findPath, firstPath, formatCPU, formatMemory, formatNumber, genControlDepsMap, getAppropriateMemory, getBaseHref, getCpu, getCronWeekDayNumbers, getDisabledState, getDisabledState$, getHelpDocUrl, getHostname, getJobStatus, getK8sResourceAnnotationErrorMapper, getK8sResourceAnnotationErrorMapper$, getK8sResourceLabelErrorMapper, getK8sResourceLabelErrorMapper$, getMemory, getPickerTimeRanges, getPodAggregatedStatus, getPodIPs, getPodStatus, getPrivateIP, getPrivateIPv4, getPrivateIPv6, getRelativePath, getResourceLimitAsyncValidatorFn, getResourceLimitValidatorFn, getResourceValue, getResourceViewModel, getToPath, getValidVersion, getWorkloadStatus, initGreaterValidator, isAbsoluteUrl, isB, isCronFieldCountCorrect, isCronWeekDayCorrect, isCronWeekDaysContinuous, isErrorMessage, isJsonObjectString, isK8sErrorStatus, isK8sResource, isL, isR, isSelectAll, isT, isValidRID, isValidWorkspace, k8sResourceAnnotationKeyValidator, k8sResourceAnnotationValidator, k8sResourceLabelKeyValidator, k8sResourceLabelValidator, k8sResourceLabelValueValidator, loadEnv, logsReadOptions, mapTrees, matchExpressionsToString, matchLabelsToString, maxParallelByHttpVersion, noShowRowError, normalizeParams, numToStr, parseDaemonSetStatus, parseDeploymentStatus, parseImageAddress, parseRID, parseStatefulSetStatus, parseToWorkloadStatus, parseUrlInText, parseValidImageName, parseValueAndUnit, parseVersion, parseWorkspace, prefixFilterRuleFactory, primaryColor, queryListParams, randomPassword, reduceTrees, removeDirtyFieldsBeforeUpdate, resourceUnits, rowBackgroundColorFn, safeAssign, scrollIntoView, setNode, setupErrorMapper, shortNum, sortByCreationTimestamp, stringToMatchLabels, stringifyRID, stringifyWorkspace, successColor, tableSort, tableSortAdvance, tagRenderDefault, toLowerFirstLetter, toNumber, toPercent, toPx, toUnitGi, toUnitI, toUnitMi, toUnitNum, toUnitNumM, trackByName, trackByUid, transferResource, versionRegex, warnColor, withLoadState, workspaceToPath, yamlFilterField };
 //# sourceMappingURL=alauda-fe-dynamic-plugin-shared.mjs.map