@alauda-fe/dynamic-plugin-shared 0.0.4-alpha.26 → 0.0.4-alpha.27

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

@@ -1,5 +1,5 @@
 import * as i1 from '@alauda/ui';
-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, 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 { rgbColor, ThemeService, coerceAttrBoolean, FormItemControlDirective, observeResizeOn, MessageService, NotificationService, DialogRef, 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, CardComponent, TOOLTIP_MODULE, CheckboxComponent, BackTopComponent, SortDirective, SortHeaderComponent, PaginatorComponent, TABLE_MODULE, DROPDOWN_MODULE, 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';
@@ -4339,7 +4339,7 @@ class ConfirmDeleteComponent {
     constructor() {
         this.message = inject(MessageService);
         this.notification = inject(NotificationService);
-        this.dialogRef = inject(DIALOG_DATA, { optional: true });
+        this.dialogRef = inject(DialogRef, { optional: true });
         this.data = inject(DIALOG_DATA, {
             optional: true,
         });
@@ -5283,7 +5283,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        '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 }); }
+        ], 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 rgb(var(--aui-color-divider))}.range-picker-footer .range-date-tip{display:flex;font-size:14px;align-items:center;margin-right:6px;color:rgb(var(--aui-color-main-text))}.date-range-picker[readonly]{background-color:rgb(var(--aui-color-n-9));border-color:rgb(var(--aui-color-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 rgb(var(--aui-color-divider))}::ng-deep .acl-date-range-picker__panel .control-row{padding:8px 12px;font-size:12px;color:rgb(var(--aui-color-main-text))}::ng-deep .acl-date-range-picker__panel .control-row:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary));cursor:pointer}::ng-deep .acl-date-range-picker__panel .control-row.active{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-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:rgb(var(--aui-color-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,
@@ -5306,7 +5306,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        '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"] }]
+                    ], 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 rgb(var(--aui-color-divider))}.range-picker-footer .range-date-tip{display:flex;font-size:14px;align-items:center;margin-right:6px;color:rgb(var(--aui-color-main-text))}.date-range-picker[readonly]{background-color:rgb(var(--aui-color-n-9));border-color:rgb(var(--aui-color-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 rgb(var(--aui-color-divider))}::ng-deep .acl-date-range-picker__panel .control-row{padding:8px 12px;font-size:12px;color:rgb(var(--aui-color-main-text))}::ng-deep .acl-date-range-picker__panel .control-row:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary));cursor:pointer}::ng-deep .acl-date-range-picker__panel .control-row.active{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-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:rgb(var(--aui-color-n-2))}.icon-spacer{margin-left:-4px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], format: [{
@@ -5480,7 +5480,7 @@ class TagsLabelComponent extends ListenResizeDirective {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TagsLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TagsLabelComponent, isStandalone: true, selector: "acl-tags-label", inputs: { tagClickable: "tagClickable", border: "border", tagType: "tagType", tagRound: "tagRound", tags: "tags", tooltipPosition: "tooltipPosition", showMore: "showMore", isWrapped: "isWrapped", controlSize: "controlSize", isControlSize: "isControlSize", tagRender: "tagRender" }, outputs: { tagClick: "tagClick" }, queries: [{ propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }], viewQueries: [{ propertyName: "tagsContainerMirror", first: true, predicate: ["tagsContainerMirror"], descendants: true }, { propertyName: "tagsContainer", first: true, predicate: ["tagsContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #tagsContainer\n  class=\"tags-strut\"\n>\n  @if ((tagsValue$ | async)?.length) {\n    <div\n      class=\"tags-container\"\n      [class.tags-container--multiline]=\"isWrapped\"\n    >\n      @for (tag of tagsValue$ | async; track tag; let index = $index) {\n        <!-- \u4FEE\u6539 tag \u65F6\u5FC5\u987B\u540C\u65F6\u8C03\u6574 mirror \u5185\u7684 tag \u6837\u5F0F\uFF0C\u4FDD\u8BC1\u6E32\u67D3\u4E00\u81F4 -->\n        <aui-tag\n          [type]=\"tagType\"\n          size=\"mini\"\n          [border]=\"border\"\n          [title]=\"tag | pure: tagRender\"\n          [round]=\"tagRound\"\n          [hidden]=\"index >= shouldRenderCount\"\n          [class.last-display-tag]=\"shouldRenderCount - index === 1\"\n          [class.tag-clickable]=\"tagClickable\"\n          (click)=\"tagClick.next(tag)\"\n        >\n          <!-- {{ tag | pure: renderTag }} -->\n          <ng-container\n            *ngTemplateOutlet=\"\n              tagTemplate || defaultTagTemplate;\n              context: { $implicit: tag, index }\n            \"\n          ></ng-container>\n        </aui-tag>\n      }\n    </div>\n  } @else {\n    <div>-</div>\n  }\n\n  @if (\n    !isWrapped &&\n    showMore &&\n    (tagsValue$ | async)?.length &&\n    shouldRenderEllipse\n  ) {\n    <aui-tag\n      class=\"tooltip-toggle\"\n      [round]=\"tagRound\"\n      [auiTooltip]=\"labels\"\n      auiTooltipType=\"info\"\n      auiTooltipClass=\"tag-tooltip\"\n      [auiTooltipPosition]=\"tooltipPosition\"\n      [type]=\"tagType\"\n      size=\"mini\"\n    >\n      <aui-icon icon=\"ellipsis_s\"></aui-icon>\n    </aui-tag>\n  }\n</div>\n\n<!-- \u901A\u8FC7\u521B\u5EFA\u955C\u50CF\u5143\u7D20\uFF0C\u6765\u8BA1\u7B97\u6240\u6709\u5B50tag\u5BBD\u5EA6\uFF0C\u8FD9\u6837\u65E2\u80FD\u4FDD\u8BC1\u5B50tag\u6A2A\u5411\u6392\u5217\uFF0C\u540C\u65F6\u7531\u4E8E\u662Fabsolute\u5143\u7D20\uFF0C\u5BF9\u5176\u4EE5\u53CA\u5176\u5B50\u5143\u7D20\u8FDB\u884CDOM\u67E5\u8BE2\uFF0C\u4EE3\u4EF7\u8F83\u4F4E -->\n<div\n  class=\"tags-container--mirror\"\n  #tagsContainerMirror\n>\n  @for (tag of tagsValue$ | async; track tag) {\n    <aui-tag\n      [type]=\"tagType\"\n      size=\"mini\"\n      [border]=\"true\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          tagTemplate || defaultTagTemplate;\n          context: { $implicit: tag }\n        \"\n      ></ng-container>\n    </aui-tag>\n  }\n</div>\n\n<ng-template #labels>\n  <div class=\"tooltip-container\">\n    @for (tag of tagsValue$ | async; track tag; let index = $index) {\n      <div class=\"tooltip-tag\">\n        <aui-tag\n          [type]=\"tagType\"\n          size=\"mini\"\n          [title]=\"tag | pure: tagRender\"\n          [class.tag-clickable]=\"tagClickable\"\n          [border]=\"border\"\n          [round]=\"tagRound\"\n          (click)=\"tagClick.next(tag)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              tagTemplate || defaultTagTemplate;\n              context: { $implicit: tag, index }\n            \"\n          ></ng-container>\n        </aui-tag>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultTagTemplate\n  let-tag\n>\n  {{ tag | pure: tagRender }}\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;position:relative;max-width:100%;min-width:0;width:auto;line-height:1.4285714286}.tags-container,.tags-container--mirror{border-radius:use-var(border-radius-m);min-width:0;display:flex;overflow:hidden;flex-wrap:nowrap}.tags-container--multiline{flex-wrap:wrap;margin-bottom:-4px}.tags-container--multiline aui-tag{margin-bottom:4px;margin-right:4px}.tags-container--multiline aui-tag ::ng-deep .aui-tag{margin-left:0}.tags-strut{width:100%;display:flex;overflow:hidden}.tags-container--mirror{position:absolute;z-index:-99;opacity:0;width:100%;flex-wrap:nowrap;overflow:hidden}.tooltip-container{display:flex;max-width:600px;flex-wrap:wrap;margin:-14px -6px -8px 0}.tooltip-tag{margin:6px 6px 0 0}.tooltip-toggle{margin-left:6px}.tooltip-toggle ::ng-deep .aui-tag__content,.tooltip-toggle ::ng-deep aui-icon{display:inline-flex;align-items:center}.tooltip-toggle:hover ::ng-deep .aui-tag{color:use-rgb(primary);background-color:use-rgb(p-6)}::ng-deep .aui-tooltip.tag-tooltip{max-height:calc(100vh - 8px);overflow-y:auto}.tag-clickable{cursor:pointer}.tags-container aui-tag{flex:0 0 auto}.tags-container aui-tag ::ng-deep .aui-tag{width:100%}.tags-container:not(.tags-container--multiline) aui-tag+aui-tag ::ng-deep .aui-tag{width:calc(100% - 6px)}.tags-container:not(.tags-container--multiline) .last-display-tag{overflow:hidden;flex:1 1 0%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { 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: AsyncPipe, name: "async" }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TagsLabelComponent, isStandalone: true, selector: "acl-tags-label", inputs: { tagClickable: "tagClickable", border: "border", tagType: "tagType", tagRound: "tagRound", tags: "tags", tooltipPosition: "tooltipPosition", showMore: "showMore", isWrapped: "isWrapped", controlSize: "controlSize", isControlSize: "isControlSize", tagRender: "tagRender" }, outputs: { tagClick: "tagClick" }, queries: [{ propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }], viewQueries: [{ propertyName: "tagsContainerMirror", first: true, predicate: ["tagsContainerMirror"], descendants: true }, { propertyName: "tagsContainer", first: true, predicate: ["tagsContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #tagsContainer\n  class=\"tags-strut\"\n>\n  @if ((tagsValue$ | async)?.length) {\n    <div\n      class=\"tags-container\"\n      [class.tags-container--multiline]=\"isWrapped\"\n    >\n      @for (tag of tagsValue$ | async; track tag; let index = $index) {\n        <!-- \u4FEE\u6539 tag \u65F6\u5FC5\u987B\u540C\u65F6\u8C03\u6574 mirror \u5185\u7684 tag \u6837\u5F0F\uFF0C\u4FDD\u8BC1\u6E32\u67D3\u4E00\u81F4 -->\n        <aui-tag\n          [type]=\"tagType\"\n          size=\"mini\"\n          [border]=\"border\"\n          [title]=\"tag | pure: tagRender\"\n          [round]=\"tagRound\"\n          [hidden]=\"index >= shouldRenderCount\"\n          [class.last-display-tag]=\"shouldRenderCount - index === 1\"\n          [class.tag-clickable]=\"tagClickable\"\n          (click)=\"tagClick.next(tag)\"\n        >\n          <!-- {{ tag | pure: renderTag }} -->\n          <ng-container\n            *ngTemplateOutlet=\"\n              tagTemplate || defaultTagTemplate;\n              context: { $implicit: tag, index }\n            \"\n          ></ng-container>\n        </aui-tag>\n      }\n    </div>\n  } @else {\n    <div>-</div>\n  }\n\n  @if (\n    !isWrapped &&\n    showMore &&\n    (tagsValue$ | async)?.length &&\n    shouldRenderEllipse\n  ) {\n    <aui-tag\n      class=\"tooltip-toggle\"\n      [round]=\"tagRound\"\n      [auiTooltip]=\"labels\"\n      auiTooltipType=\"info\"\n      auiTooltipClass=\"tag-tooltip\"\n      [auiTooltipPosition]=\"tooltipPosition\"\n      [type]=\"tagType\"\n      size=\"mini\"\n    >\n      <aui-icon icon=\"ellipsis_s\"></aui-icon>\n    </aui-tag>\n  }\n</div>\n\n<!-- \u901A\u8FC7\u521B\u5EFA\u955C\u50CF\u5143\u7D20\uFF0C\u6765\u8BA1\u7B97\u6240\u6709\u5B50tag\u5BBD\u5EA6\uFF0C\u8FD9\u6837\u65E2\u80FD\u4FDD\u8BC1\u5B50tag\u6A2A\u5411\u6392\u5217\uFF0C\u540C\u65F6\u7531\u4E8E\u662Fabsolute\u5143\u7D20\uFF0C\u5BF9\u5176\u4EE5\u53CA\u5176\u5B50\u5143\u7D20\u8FDB\u884CDOM\u67E5\u8BE2\uFF0C\u4EE3\u4EF7\u8F83\u4F4E -->\n<div\n  class=\"tags-container--mirror\"\n  #tagsContainerMirror\n>\n  @for (tag of tagsValue$ | async; track tag) {\n    <aui-tag\n      [type]=\"tagType\"\n      size=\"mini\"\n      [border]=\"true\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          tagTemplate || defaultTagTemplate;\n          context: { $implicit: tag }\n        \"\n      ></ng-container>\n    </aui-tag>\n  }\n</div>\n\n<ng-template #labels>\n  <div class=\"tooltip-container\">\n    @for (tag of tagsValue$ | async; track tag; let index = $index) {\n      <div class=\"tooltip-tag\">\n        <aui-tag\n          [type]=\"tagType\"\n          size=\"mini\"\n          [title]=\"tag | pure: tagRender\"\n          [class.tag-clickable]=\"tagClickable\"\n          [border]=\"border\"\n          [round]=\"tagRound\"\n          (click)=\"tagClick.next(tag)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              tagTemplate || defaultTagTemplate;\n              context: { $implicit: tag, index }\n            \"\n          ></ng-container>\n        </aui-tag>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultTagTemplate\n  let-tag\n>\n  {{ tag | pure: tagRender }}\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;position:relative;max-width:100%;min-width:0;width:auto;line-height:1.4285714286}.tags-container,.tags-container--mirror{border-radius:var(--aui-border-radius-m);min-width:0;display:flex;overflow:hidden;flex-wrap:nowrap}.tags-container--multiline{flex-wrap:wrap;margin-bottom:-4px}.tags-container--multiline aui-tag{margin-bottom:4px;margin-right:4px}.tags-container--multiline aui-tag ::ng-deep .aui-tag{margin-left:0}.tags-strut{width:100%;display:flex;overflow:hidden}.tags-container--mirror{position:absolute;z-index:-99;opacity:0;width:100%;flex-wrap:nowrap;overflow:hidden}.tooltip-container{display:flex;max-width:600px;flex-wrap:wrap;margin:-14px -6px -8px 0}.tooltip-tag{margin:6px 6px 0 0}.tooltip-toggle{margin-left:6px}.tooltip-toggle ::ng-deep .aui-tag__content,.tooltip-toggle ::ng-deep aui-icon{display:inline-flex;align-items:center}.tooltip-toggle:hover ::ng-deep .aui-tag{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .aui-tooltip.tag-tooltip{max-height:calc(100vh - 8px);overflow-y:auto}.tag-clickable{cursor:pointer}.tags-container aui-tag{flex:0 0 auto}.tags-container aui-tag ::ng-deep .aui-tag{width:100%}.tags-container:not(.tags-container--multiline) aui-tag+aui-tag ::ng-deep .aui-tag{width:calc(100% - 6px)}.tags-container:not(.tags-container--multiline) .last-display-tag{overflow:hidden;flex:1 1 0%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { 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: AsyncPipe, name: "async" }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     ObservableInput(),
@@ -5499,7 +5499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         TooltipModule,
                         IconModule,
                         PurePipe,
-                    ], template: "<div\n  #tagsContainer\n  class=\"tags-strut\"\n>\n  @if ((tagsValue$ | async)?.length) {\n    <div\n      class=\"tags-container\"\n      [class.tags-container--multiline]=\"isWrapped\"\n    >\n      @for (tag of tagsValue$ | async; track tag; let index = $index) {\n        <!-- \u4FEE\u6539 tag \u65F6\u5FC5\u987B\u540C\u65F6\u8C03\u6574 mirror \u5185\u7684 tag \u6837\u5F0F\uFF0C\u4FDD\u8BC1\u6E32\u67D3\u4E00\u81F4 -->\n        <aui-tag\n          [type]=\"tagType\"\n          size=\"mini\"\n          [border]=\"border\"\n          [title]=\"tag | pure: tagRender\"\n          [round]=\"tagRound\"\n          [hidden]=\"index >= shouldRenderCount\"\n          [class.last-display-tag]=\"shouldRenderCount - index === 1\"\n          [class.tag-clickable]=\"tagClickable\"\n          (click)=\"tagClick.next(tag)\"\n        >\n          <!-- {{ tag | pure: renderTag }} -->\n          <ng-container\n            *ngTemplateOutlet=\"\n              tagTemplate || defaultTagTemplate;\n              context: { $implicit: tag, index }\n            \"\n          ></ng-container>\n        </aui-tag>\n      }\n    </div>\n  } @else {\n    <div>-</div>\n  }\n\n  @if (\n    !isWrapped &&\n    showMore &&\n    (tagsValue$ | async)?.length &&\n    shouldRenderEllipse\n  ) {\n    <aui-tag\n      class=\"tooltip-toggle\"\n      [round]=\"tagRound\"\n      [auiTooltip]=\"labels\"\n      auiTooltipType=\"info\"\n      auiTooltipClass=\"tag-tooltip\"\n      [auiTooltipPosition]=\"tooltipPosition\"\n      [type]=\"tagType\"\n      size=\"mini\"\n    >\n      <aui-icon icon=\"ellipsis_s\"></aui-icon>\n    </aui-tag>\n  }\n</div>\n\n<!-- \u901A\u8FC7\u521B\u5EFA\u955C\u50CF\u5143\u7D20\uFF0C\u6765\u8BA1\u7B97\u6240\u6709\u5B50tag\u5BBD\u5EA6\uFF0C\u8FD9\u6837\u65E2\u80FD\u4FDD\u8BC1\u5B50tag\u6A2A\u5411\u6392\u5217\uFF0C\u540C\u65F6\u7531\u4E8E\u662Fabsolute\u5143\u7D20\uFF0C\u5BF9\u5176\u4EE5\u53CA\u5176\u5B50\u5143\u7D20\u8FDB\u884CDOM\u67E5\u8BE2\uFF0C\u4EE3\u4EF7\u8F83\u4F4E -->\n<div\n  class=\"tags-container--mirror\"\n  #tagsContainerMirror\n>\n  @for (tag of tagsValue$ | async; track tag) {\n    <aui-tag\n      [type]=\"tagType\"\n      size=\"mini\"\n      [border]=\"true\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          tagTemplate || defaultTagTemplate;\n          context: { $implicit: tag }\n        \"\n      ></ng-container>\n    </aui-tag>\n  }\n</div>\n\n<ng-template #labels>\n  <div class=\"tooltip-container\">\n    @for (tag of tagsValue$ | async; track tag; let index = $index) {\n      <div class=\"tooltip-tag\">\n        <aui-tag\n          [type]=\"tagType\"\n          size=\"mini\"\n          [title]=\"tag | pure: tagRender\"\n          [class.tag-clickable]=\"tagClickable\"\n          [border]=\"border\"\n          [round]=\"tagRound\"\n          (click)=\"tagClick.next(tag)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              tagTemplate || defaultTagTemplate;\n              context: { $implicit: tag, index }\n            \"\n          ></ng-container>\n        </aui-tag>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultTagTemplate\n  let-tag\n>\n  {{ tag | pure: tagRender }}\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;position:relative;max-width:100%;min-width:0;width:auto;line-height:1.4285714286}.tags-container,.tags-container--mirror{border-radius:use-var(border-radius-m);min-width:0;display:flex;overflow:hidden;flex-wrap:nowrap}.tags-container--multiline{flex-wrap:wrap;margin-bottom:-4px}.tags-container--multiline aui-tag{margin-bottom:4px;margin-right:4px}.tags-container--multiline aui-tag ::ng-deep .aui-tag{margin-left:0}.tags-strut{width:100%;display:flex;overflow:hidden}.tags-container--mirror{position:absolute;z-index:-99;opacity:0;width:100%;flex-wrap:nowrap;overflow:hidden}.tooltip-container{display:flex;max-width:600px;flex-wrap:wrap;margin:-14px -6px -8px 0}.tooltip-tag{margin:6px 6px 0 0}.tooltip-toggle{margin-left:6px}.tooltip-toggle ::ng-deep .aui-tag__content,.tooltip-toggle ::ng-deep aui-icon{display:inline-flex;align-items:center}.tooltip-toggle:hover ::ng-deep .aui-tag{color:use-rgb(primary);background-color:use-rgb(p-6)}::ng-deep .aui-tooltip.tag-tooltip{max-height:calc(100vh - 8px);overflow-y:auto}.tag-clickable{cursor:pointer}.tags-container aui-tag{flex:0 0 auto}.tags-container aui-tag ::ng-deep .aui-tag{width:100%}.tags-container:not(.tags-container--multiline) aui-tag+aui-tag ::ng-deep .aui-tag{width:calc(100% - 6px)}.tags-container:not(.tags-container--multiline) .last-display-tag{overflow:hidden;flex:1 1 0%}\n"] }]
+                    ], template: "<div\n  #tagsContainer\n  class=\"tags-strut\"\n>\n  @if ((tagsValue$ | async)?.length) {\n    <div\n      class=\"tags-container\"\n      [class.tags-container--multiline]=\"isWrapped\"\n    >\n      @for (tag of tagsValue$ | async; track tag; let index = $index) {\n        <!-- \u4FEE\u6539 tag \u65F6\u5FC5\u987B\u540C\u65F6\u8C03\u6574 mirror \u5185\u7684 tag \u6837\u5F0F\uFF0C\u4FDD\u8BC1\u6E32\u67D3\u4E00\u81F4 -->\n        <aui-tag\n          [type]=\"tagType\"\n          size=\"mini\"\n          [border]=\"border\"\n          [title]=\"tag | pure: tagRender\"\n          [round]=\"tagRound\"\n          [hidden]=\"index >= shouldRenderCount\"\n          [class.last-display-tag]=\"shouldRenderCount - index === 1\"\n          [class.tag-clickable]=\"tagClickable\"\n          (click)=\"tagClick.next(tag)\"\n        >\n          <!-- {{ tag | pure: renderTag }} -->\n          <ng-container\n            *ngTemplateOutlet=\"\n              tagTemplate || defaultTagTemplate;\n              context: { $implicit: tag, index }\n            \"\n          ></ng-container>\n        </aui-tag>\n      }\n    </div>\n  } @else {\n    <div>-</div>\n  }\n\n  @if (\n    !isWrapped &&\n    showMore &&\n    (tagsValue$ | async)?.length &&\n    shouldRenderEllipse\n  ) {\n    <aui-tag\n      class=\"tooltip-toggle\"\n      [round]=\"tagRound\"\n      [auiTooltip]=\"labels\"\n      auiTooltipType=\"info\"\n      auiTooltipClass=\"tag-tooltip\"\n      [auiTooltipPosition]=\"tooltipPosition\"\n      [type]=\"tagType\"\n      size=\"mini\"\n    >\n      <aui-icon icon=\"ellipsis_s\"></aui-icon>\n    </aui-tag>\n  }\n</div>\n\n<!-- \u901A\u8FC7\u521B\u5EFA\u955C\u50CF\u5143\u7D20\uFF0C\u6765\u8BA1\u7B97\u6240\u6709\u5B50tag\u5BBD\u5EA6\uFF0C\u8FD9\u6837\u65E2\u80FD\u4FDD\u8BC1\u5B50tag\u6A2A\u5411\u6392\u5217\uFF0C\u540C\u65F6\u7531\u4E8E\u662Fabsolute\u5143\u7D20\uFF0C\u5BF9\u5176\u4EE5\u53CA\u5176\u5B50\u5143\u7D20\u8FDB\u884CDOM\u67E5\u8BE2\uFF0C\u4EE3\u4EF7\u8F83\u4F4E -->\n<div\n  class=\"tags-container--mirror\"\n  #tagsContainerMirror\n>\n  @for (tag of tagsValue$ | async; track tag) {\n    <aui-tag\n      [type]=\"tagType\"\n      size=\"mini\"\n      [border]=\"true\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          tagTemplate || defaultTagTemplate;\n          context: { $implicit: tag }\n        \"\n      ></ng-container>\n    </aui-tag>\n  }\n</div>\n\n<ng-template #labels>\n  <div class=\"tooltip-container\">\n    @for (tag of tagsValue$ | async; track tag; let index = $index) {\n      <div class=\"tooltip-tag\">\n        <aui-tag\n          [type]=\"tagType\"\n          size=\"mini\"\n          [title]=\"tag | pure: tagRender\"\n          [class.tag-clickable]=\"tagClickable\"\n          [border]=\"border\"\n          [round]=\"tagRound\"\n          (click)=\"tagClick.next(tag)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              tagTemplate || defaultTagTemplate;\n              context: { $implicit: tag, index }\n            \"\n          ></ng-container>\n        </aui-tag>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultTagTemplate\n  let-tag\n>\n  {{ tag | pure: tagRender }}\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;position:relative;max-width:100%;min-width:0;width:auto;line-height:1.4285714286}.tags-container,.tags-container--mirror{border-radius:var(--aui-border-radius-m);min-width:0;display:flex;overflow:hidden;flex-wrap:nowrap}.tags-container--multiline{flex-wrap:wrap;margin-bottom:-4px}.tags-container--multiline aui-tag{margin-bottom:4px;margin-right:4px}.tags-container--multiline aui-tag ::ng-deep .aui-tag{margin-left:0}.tags-strut{width:100%;display:flex;overflow:hidden}.tags-container--mirror{position:absolute;z-index:-99;opacity:0;width:100%;flex-wrap:nowrap;overflow:hidden}.tooltip-container{display:flex;max-width:600px;flex-wrap:wrap;margin:-14px -6px -8px 0}.tooltip-tag{margin:6px 6px 0 0}.tooltip-toggle{margin-left:6px}.tooltip-toggle ::ng-deep .aui-tag__content,.tooltip-toggle ::ng-deep aui-icon{display:inline-flex;align-items:center}.tooltip-toggle:hover ::ng-deep .aui-tag{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}::ng-deep .aui-tooltip.tag-tooltip{max-height:calc(100vh - 8px);overflow-y:auto}.tag-clickable{cursor:pointer}.tags-container aui-tag{flex:0 0 auto}.tags-container aui-tag ::ng-deep .aui-tag{width:100%}.tags-container:not(.tags-container--multiline) aui-tag+aui-tag ::ng-deep .aui-tag{width:calc(100% - 6px)}.tags-container:not(.tags-container--multiline) .last-display-tag{overflow:hidden;flex:1 1 0%}\n"] }]
         }], propDecorators: { tagsContainerMirror: [{
                 type: ViewChild,
                 args: ['tagsContainerMirror', { static: false }]
@@ -8182,11 +8182,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(/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 }); }
+    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:var(--aui-border-radius-l);margin-bottom:var(--aui-spacing-xl);background-color:rgb(var(--aui-color-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:var(--aui-font-weight-bolder)}.overview-banner__description{margin-top:4px;font-size:var(--aui-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(/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"] }]
+            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:var(--aui-border-radius-l);margin-bottom:var(--aui-spacing-xl);background-color:rgb(var(--aui-color-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:var(--aui-font-weight-bolder)}.overview-banner__description{margin-top:4px;font-size:var(--aui-font-size-m)}\n"] }]
         }], propDecorators: { option: [{
                 type: Input
             }] } });
@@ -9857,7 +9857,7 @@ class K8SResourceListFooterComponent extends ScrollBorderObserverDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: K8SResourceListFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: K8SResourceListFooterComponent, isStandalone: true, selector: "acl-k8s-resource-list-footer", inputs: { list: "list", autoLoad: "autoLoad", backTop: "backTop", bottomDistance: "bottomDistance", resourceNameTranslated: "resourceNameTranslated", firstScrollLoad: "firstScrollLoad", resourceName: "resourceName" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: K8sListFooterNoDataDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingErrorTemplate", first: true, predicate: K8sListFooterLoadingErrorDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "@if (isEmptyList$ | async) {\n  <div class=\"empty-placeholder\">\n    @if (noDataTemplate) {\n      <ng-template *ngTemplateOutlet=\"noDataTemplate\"></ng-template>\n    }\n    @if (!noDataTemplate) {\n      <div class=\"no-data-placeholder\">\n        <img\n          width=\"70\"\n          [src]=\"image | auiThemePicker\"\n        />\n        <div>{{ noDataHint$ | async }}</div>\n      </div>\n    }\n  </div>\n}\n\n@if (!(isEmptyList$ | async)) {\n  @if (list.loadingError$ | async) {\n    <div class=\"table-placeholder\">\n      @if (loadingErrorTemplate) {\n        <ng-template *ngTemplateOutlet=\"loadingErrorTemplate\"></ng-template>\n      } @else {\n        @if (![410, 403].includes(loadingErrorCode$ | async)) {\n          <span\n            >{{ 'error_loading_data' | translate }},{{\n              'please' | translate\n            }}</span\n          >\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"retry()\"\n          >\n            {{ ('retry' | translate).toLowerCase() }}\n          </button>\n        }\n        @if ((loadingErrorCode$ | async) === 410) {\n          <span>\n            {{ 'list_data_has_expired' | translate }},\n            {{ 'please' | translate }}\n          </span>\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.reload()\"\n          >\n            {{ 'refresh' | translate }}\n          </button>\n          <span>{{ 'or' | translate }}</span>\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.loadMore()\"\n          >\n            {{ 'continue_load' | translate }}\n          </button>\n        }\n        @if ((loadingErrorCode$ | async) === 403) {\n          <span>\n            {{ 'no_permission_description' | translate }}\n          </span>\n        }\n      }\n    </div>\n  }\n  @if (!(list.loadingError$ | async)) {\n    @if (\n      {\n        loading: list.loading$ | async,\n        loadMore:\n          !autoLoad && !(list.loading$ | async) && list.hasMore$ | async,\n      };\n      as meta\n    ) {\n      @if (meta.loading) {\n        <div class=\"table-placeholder\">\n          <aui-icon icon=\"spinner\"></aui-icon>\n          <span>{{ 'loading_please_wait' | translate }}</span>\n        </div>\n      }\n      @if (meta.loadMore) {\n        <div class=\"table-placeholder\">\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.loadMore()\"\n          >\n            {{ 'load_more' | translate }}\n          </button>\n        </div>\n      }\n      @if (!meta.loadMore && !meta.loading) {\n        <div class=\"table-last-row--empty\">\n          <div class=\"table-last-row--empty-inner\"></div>\n        </div>\n      }\n    }\n  }\n}\n\n@if (backTop) {\n  <aui-back-top [target]=\"window\"></aui-back-top>\n}\n", styles: [":host::ng-deep{position:sticky;left:0;display:flex;justify-content:center;align-items:center;z-index:1}:host::ng-deep{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-help-text))}:host::ng-deep .empty-placeholder,:host::ng-deep .table-placeholder{flex:1;flex-direction:column}:host::ng-deep .table-last-row--empty{height:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));position:relative;margin-top:-3px;flex:1}:host::ng-deep .table-last-row--empty-inner{background-color:rgb(var(--aui-color-n-10));height:var(--aui-border-radius-l);border:1px solid rgb(var(--aui-color-n-8));border-top:0;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .table-placeholder{box-sizing:border-box;display:flex;justify-content:center;align-items:center;padding:15px 10px;min-height:60px;background-color:rgb(var(--aui-color-n-10));border:solid 1px rgb(var(--aui-color-n-8));border-radius:var(--aui-border-radius-l);position:sticky;left:0}:host::ng-deep .table-placeholder{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-placeholder-text))}:host::ng-deep .table-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.table-placeholder{border-top-left-radius:0;border-top-right-radius:0}\n"], dependencies: [{ 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: BackTopComponent, selector: "aui-back-top", inputs: ["visibilityHeight", "position", "target"], outputs: ["click"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ThemePickerPipe, name: "auiThemePicker" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: K8SResourceListFooterComponent, isStandalone: true, selector: "acl-k8s-resource-list-footer", inputs: { list: "list", autoLoad: "autoLoad", backTop: "backTop", bottomDistance: "bottomDistance", resourceNameTranslated: "resourceNameTranslated", firstScrollLoad: "firstScrollLoad", resourceName: "resourceName" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: K8sListFooterNoDataDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingErrorTemplate", first: true, predicate: K8sListFooterLoadingErrorDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "@if (isEmptyList$ | async) {\n  <div class=\"empty-placeholder\">\n    @if (noDataTemplate) {\n      <ng-template *ngTemplateOutlet=\"noDataTemplate\"></ng-template>\n    }\n    @if (!noDataTemplate) {\n      <div class=\"no-data-placeholder\">\n        <img\n          width=\"70\"\n          [src]=\"image | auiThemePicker\"\n        />\n        <div>{{ noDataHint$ | async }}</div>\n      </div>\n    }\n  </div>\n}\n\n@if (!(isEmptyList$ | async)) {\n  @if (list.loadingError$ | async) {\n    <div class=\"table-placeholder\">\n      @if (loadingErrorTemplate) {\n        <ng-template *ngTemplateOutlet=\"loadingErrorTemplate\"></ng-template>\n      } @else {\n        @if (![410, 403].includes(loadingErrorCode$ | async)) {\n          <span\n            >{{ 'error_loading_data' | translate }},{{\n              'please' | translate\n            }}</span\n          >\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"retry()\"\n          >\n            {{ ('retry' | translate).toLowerCase() }}\n          </button>\n        }\n        @if ((loadingErrorCode$ | async) === 410) {\n          <span>\n            {{ 'list_data_has_expired' | translate }},\n            {{ 'please' | translate }}\n          </span>\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.reload()\"\n          >\n            {{ 'refresh' | translate }}\n          </button>\n          <span>{{ 'or' | translate }}</span>\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.loadMore()\"\n          >\n            {{ 'continue_load' | translate }}\n          </button>\n        }\n        @if ((loadingErrorCode$ | async) === 403) {\n          <span>\n            {{ 'no_permission_description' | translate }}\n          </span>\n        }\n      }\n    </div>\n  }\n  @if (!(list.loadingError$ | async)) {\n    @if (\n      {\n        loading: list.loading$ | async,\n        loadMore:\n          !autoLoad && !(list.loading$ | async) && list.hasMore$ | async,\n      };\n      as meta\n    ) {\n      @if (meta.loading) {\n        <div class=\"table-placeholder\">\n          <aui-icon icon=\"spinner\"></aui-icon>\n          <span>{{ 'loading_please_wait' | translate }}</span>\n        </div>\n      }\n      @if (meta.loadMore) {\n        <div class=\"table-placeholder\">\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.loadMore()\"\n          >\n            {{ 'load_more' | translate }}\n          </button>\n        </div>\n      }\n      @if (!meta.loadMore && !meta.loading) {\n        <div class=\"table-last-row--empty\">\n          <div class=\"table-last-row--empty-inner\"></div>\n        </div>\n      }\n    }\n  }\n}\n\n@if (backTop) {\n  <aui-back-top [target]=\"window\"></aui-back-top>\n}\n", styles: [":host::ng-deep{position:sticky;left:0;display:flex;justify-content:center;align-items:center;z-index:1}:host::ng-deep{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-help-text))}:host::ng-deep .empty-placeholder,:host::ng-deep .table-placeholder{flex:1;flex-direction:column}:host::ng-deep .table-last-row--empty{height:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));position:relative;margin-top:-3px;flex:1}:host::ng-deep .table-last-row--empty-inner{background-color:rgb(var(--aui-color-n-10));height:var(--aui-border-radius-l);border:1px solid rgb(var(--aui-color-n-8));border-top:0;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .table-placeholder{box-sizing:border-box;display:flex;justify-content:center;align-items:center;padding:15px 10px;min-height:60px;background-color:rgb(var(--aui-color-n-10));border:solid 1px rgb(var(--aui-color-n-8));border-radius:var(--aui-border-radius-l);position:sticky;left:0}:host::ng-deep .table-placeholder{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-placeholder-text))}:host::ng-deep .table-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.table-placeholder{border-top-left-radius:0;border-top-right-radius:0}.no-data-placeholder{margin-top:35px;margin-bottom:35px;display:flex;flex-direction:column;align-items:center}\n"], dependencies: [{ 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: BackTopComponent, selector: "aui-back-top", inputs: ["visibilityHeight", "position", "target"], outputs: ["click"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ThemePickerPipe, name: "auiThemePicker" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     ObservableInput(),
@@ -9876,7 +9876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         IconComponent,
                         BackTopComponent,
                         ThemePickerPipe,
-                    ], template: "@if (isEmptyList$ | async) {\n  <div class=\"empty-placeholder\">\n    @if (noDataTemplate) {\n      <ng-template *ngTemplateOutlet=\"noDataTemplate\"></ng-template>\n    }\n    @if (!noDataTemplate) {\n      <div class=\"no-data-placeholder\">\n        <img\n          width=\"70\"\n          [src]=\"image | auiThemePicker\"\n        />\n        <div>{{ noDataHint$ | async }}</div>\n      </div>\n    }\n  </div>\n}\n\n@if (!(isEmptyList$ | async)) {\n  @if (list.loadingError$ | async) {\n    <div class=\"table-placeholder\">\n      @if (loadingErrorTemplate) {\n        <ng-template *ngTemplateOutlet=\"loadingErrorTemplate\"></ng-template>\n      } @else {\n        @if (![410, 403].includes(loadingErrorCode$ | async)) {\n          <span\n            >{{ 'error_loading_data' | translate }},{{\n              'please' | translate\n            }}</span\n          >\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"retry()\"\n          >\n            {{ ('retry' | translate).toLowerCase() }}\n          </button>\n        }\n        @if ((loadingErrorCode$ | async) === 410) {\n          <span>\n            {{ 'list_data_has_expired' | translate }},\n            {{ 'please' | translate }}\n          </span>\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.reload()\"\n          >\n            {{ 'refresh' | translate }}\n          </button>\n          <span>{{ 'or' | translate }}</span>\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.loadMore()\"\n          >\n            {{ 'continue_load' | translate }}\n          </button>\n        }\n        @if ((loadingErrorCode$ | async) === 403) {\n          <span>\n            {{ 'no_permission_description' | translate }}\n          </span>\n        }\n      }\n    </div>\n  }\n  @if (!(list.loadingError$ | async)) {\n    @if (\n      {\n        loading: list.loading$ | async,\n        loadMore:\n          !autoLoad && !(list.loading$ | async) && list.hasMore$ | async,\n      };\n      as meta\n    ) {\n      @if (meta.loading) {\n        <div class=\"table-placeholder\">\n          <aui-icon icon=\"spinner\"></aui-icon>\n          <span>{{ 'loading_please_wait' | translate }}</span>\n        </div>\n      }\n      @if (meta.loadMore) {\n        <div class=\"table-placeholder\">\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.loadMore()\"\n          >\n            {{ 'load_more' | translate }}\n          </button>\n        </div>\n      }\n      @if (!meta.loadMore && !meta.loading) {\n        <div class=\"table-last-row--empty\">\n          <div class=\"table-last-row--empty-inner\"></div>\n        </div>\n      }\n    }\n  }\n}\n\n@if (backTop) {\n  <aui-back-top [target]=\"window\"></aui-back-top>\n}\n", styles: [":host::ng-deep{position:sticky;left:0;display:flex;justify-content:center;align-items:center;z-index:1}:host::ng-deep{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-help-text))}:host::ng-deep .empty-placeholder,:host::ng-deep .table-placeholder{flex:1;flex-direction:column}:host::ng-deep .table-last-row--empty{height:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));position:relative;margin-top:-3px;flex:1}:host::ng-deep .table-last-row--empty-inner{background-color:rgb(var(--aui-color-n-10));height:var(--aui-border-radius-l);border:1px solid rgb(var(--aui-color-n-8));border-top:0;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .table-placeholder{box-sizing:border-box;display:flex;justify-content:center;align-items:center;padding:15px 10px;min-height:60px;background-color:rgb(var(--aui-color-n-10));border:solid 1px rgb(var(--aui-color-n-8));border-radius:var(--aui-border-radius-l);position:sticky;left:0}:host::ng-deep .table-placeholder{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-placeholder-text))}:host::ng-deep .table-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.table-placeholder{border-top-left-radius:0;border-top-right-radius:0}\n"] }]
+                    ], template: "@if (isEmptyList$ | async) {\n  <div class=\"empty-placeholder\">\n    @if (noDataTemplate) {\n      <ng-template *ngTemplateOutlet=\"noDataTemplate\"></ng-template>\n    }\n    @if (!noDataTemplate) {\n      <div class=\"no-data-placeholder\">\n        <img\n          width=\"70\"\n          [src]=\"image | auiThemePicker\"\n        />\n        <div>{{ noDataHint$ | async }}</div>\n      </div>\n    }\n  </div>\n}\n\n@if (!(isEmptyList$ | async)) {\n  @if (list.loadingError$ | async) {\n    <div class=\"table-placeholder\">\n      @if (loadingErrorTemplate) {\n        <ng-template *ngTemplateOutlet=\"loadingErrorTemplate\"></ng-template>\n      } @else {\n        @if (![410, 403].includes(loadingErrorCode$ | async)) {\n          <span\n            >{{ 'error_loading_data' | translate }},{{\n              'please' | translate\n            }}</span\n          >\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"retry()\"\n          >\n            {{ ('retry' | translate).toLowerCase() }}\n          </button>\n        }\n        @if ((loadingErrorCode$ | async) === 410) {\n          <span>\n            {{ 'list_data_has_expired' | translate }},\n            {{ 'please' | translate }}\n          </span>\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.reload()\"\n          >\n            {{ 'refresh' | translate }}\n          </button>\n          <span>{{ 'or' | translate }}</span>\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.loadMore()\"\n          >\n            {{ 'continue_load' | translate }}\n          </button>\n        }\n        @if ((loadingErrorCode$ | async) === 403) {\n          <span>\n            {{ 'no_permission_description' | translate }}\n          </span>\n        }\n      }\n    </div>\n  }\n  @if (!(list.loadingError$ | async)) {\n    @if (\n      {\n        loading: list.loading$ | async,\n        loadMore:\n          !autoLoad && !(list.loading$ | async) && list.hasMore$ | async,\n      };\n      as meta\n    ) {\n      @if (meta.loading) {\n        <div class=\"table-placeholder\">\n          <aui-icon icon=\"spinner\"></aui-icon>\n          <span>{{ 'loading_please_wait' | translate }}</span>\n        </div>\n      }\n      @if (meta.loadMore) {\n        <div class=\"table-placeholder\">\n          <button\n            aui-button=\"text\"\n            size=\"small\"\n            (click)=\"list.loadMore()\"\n          >\n            {{ 'load_more' | translate }}\n          </button>\n        </div>\n      }\n      @if (!meta.loadMore && !meta.loading) {\n        <div class=\"table-last-row--empty\">\n          <div class=\"table-last-row--empty-inner\"></div>\n        </div>\n      }\n    }\n  }\n}\n\n@if (backTop) {\n  <aui-back-top [target]=\"window\"></aui-back-top>\n}\n", styles: [":host::ng-deep{position:sticky;left:0;display:flex;justify-content:center;align-items:center;z-index:1}:host::ng-deep{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-help-text))}:host::ng-deep .empty-placeholder,:host::ng-deep .table-placeholder{flex:1;flex-direction:column}:host::ng-deep .table-last-row--empty{height:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-9));position:relative;margin-top:-3px;flex:1}:host::ng-deep .table-last-row--empty-inner{background-color:rgb(var(--aui-color-n-10));height:var(--aui-border-radius-l);border:1px solid rgb(var(--aui-color-n-8));border-top:0;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .table-placeholder{box-sizing:border-box;display:flex;justify-content:center;align-items:center;padding:15px 10px;min-height:60px;background-color:rgb(var(--aui-color-n-10));border:solid 1px rgb(var(--aui-color-n-8));border-radius:var(--aui-border-radius-l);position:sticky;left:0}:host::ng-deep .table-placeholder{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-placeholder-text))}:host::ng-deep .table-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.table-placeholder{border-top-left-radius:0;border-top-right-radius:0}.no-data-placeholder{margin-top:35px;margin-bottom:35px;display:flex;flex-direction:column;align-items:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { list: [{
                 type: Input
             }], autoLoad: [{