@alauda-fe/dynamic-plugin-shared 0.0.4-alpha.20 → 0.0.4-alpha.22

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

@@ -4633,6 +4633,7 @@ class ZeroStateComponent {
     constructor() {
         this.zeroState = true;
         this.fetching = false;
+        this.showEmptyIcon = true;
         this.context = 'form';
         this.image = [
             '/console-assets/images/light/no-data-for-list-or-card.svg',
@@ -4645,7 +4646,7 @@ class ZeroStateComponent {
         return !this.zeroState && !this.fetching;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ZeroStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ZeroStateComponent, isStandalone: true, selector: "acl-zero-state", inputs: { resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", customPlaceholder: "customPlaceholder", zeroState: "zeroState", fetching: "fetching", context: "context", minHeight: "minHeight" }, host: { properties: { "hidden": "this.hiddenState" } }, ngImport: i0, template: "@if (zeroState && !fetching) {\n  <div\n    class=\"zero-placeholder\"\n    [ngClass]=\"context\"\n    [ngStyle]=\"{\n      minHeight: (minHeight | pure: handlePixel),\n    }\"\n  >\n    @if (customPlaceholder) {\n      <ng-container\n        [ngTemplateOutlet]=\"\n          isTemplateRef(customPlaceholder) ? customPlaceholder : literal\n        \"\n      ></ng-container>\n      <ng-template #literal>{{ customPlaceholder }}</ng-template>\n    } @else if (!(resourceName || resourceNameTranslated)) {\n      <div class=\"no-data-placeholder\">\n        <img\n          width=\"70\"\n          [src]=\"image | auiThemePicker\"\n        />\n        {{ 'no_data' | translate }}\n      </div>\n    } @else {\n      <div class=\"no-data-placeholder\">\n        <img\n          width=\"70\"\n          [src]=\"image | auiThemePicker\"\n        />\n        {{\n          'no_named_data_hint'\n            | translate\n              : {\n                  name: resourceNameTranslated || (resourceName | translate),\n                }\n        }}\n      </div>\n    }\n  </div>\n}\n<acl-loading-mask\n  class=\"zero-placeholder\"\n  [loading]=\"fetching\"\n></acl-loading-mask>\n", styles: [":host::ng-deep .zero-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 .zero-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 .zero-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.zero-placeholder{border-top-left-radius:0;border-top-right-radius:0}.zero-placeholder.form{border:none;padding:14px 0}.no-data-placeholder{margin-top:35px;margin-bottom:35px;display:flex;flex-direction:column;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingMaskComponent, selector: "acl-loading-mask", inputs: ["loading", "type", "text"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { 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: ZeroStateComponent, isStandalone: true, selector: "acl-zero-state", inputs: { resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", customPlaceholder: "customPlaceholder", zeroState: "zeroState", fetching: "fetching", showEmptyIcon: "showEmptyIcon", context: "context", minHeight: "minHeight" }, host: { properties: { "hidden": "this.hiddenState" } }, ngImport: i0, template: "@if (zeroState && !fetching) {\n  <div\n    class=\"zero-placeholder\"\n    [ngClass]=\"context\"\n    [ngStyle]=\"{\n      minHeight: (minHeight | pure: handlePixel),\n    }\"\n  >\n    @if (customPlaceholder) {\n      <ng-container\n        [ngTemplateOutlet]=\"\n          isTemplateRef(customPlaceholder) ? customPlaceholder : literal\n        \"\n      ></ng-container>\n      <ng-template #literal>{{ customPlaceholder }}</ng-template>\n    } @else if (!(resourceName || resourceNameTranslated)) {\n      <div [class.no-data-placeholder]=\"showEmptyIcon\">\n        @if (showEmptyIcon) {\n          <img\n            width=\"70\"\n            [src]=\"image | auiThemePicker\"\n          />\n        }\n        {{ 'no_data' | translate }}\n      </div>\n    } @else {\n      <div [class.no-data-placeholder]=\"showEmptyIcon\">\n        @if (showEmptyIcon) {\n          <img\n            width=\"70\"\n            [src]=\"image | auiThemePicker\"\n          />\n        }\n        {{\n          'no_named_data_hint'\n            | translate\n              : {\n                  name: resourceNameTranslated || (resourceName | translate),\n                }\n        }}\n      </div>\n    }\n  </div>\n}\n<acl-loading-mask\n  class=\"zero-placeholder\"\n  [loading]=\"fetching\"\n></acl-loading-mask>\n", styles: [":host::ng-deep .zero-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 .zero-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 .zero-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.zero-placeholder{border-top-left-radius:0;border-top-right-radius:0}.zero-placeholder.form{border:none;padding:14px 0}.no-data-placeholder{margin-top:35px;margin-bottom:35px;display:flex;flex-direction:column;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingMaskComponent, selector: "acl-loading-mask", inputs: ["loading", "type", "text"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ThemePickerPipe, name: "auiThemePicker" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ZeroStateComponent, decorators: [{
             type: Component,
@@ -4657,7 +4658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         LoadingMaskComponent,
                         NgTemplateOutlet,
                         ThemePickerPipe,
-                    ], standalone: true, template: "@if (zeroState && !fetching) {\n  <div\n    class=\"zero-placeholder\"\n    [ngClass]=\"context\"\n    [ngStyle]=\"{\n      minHeight: (minHeight | pure: handlePixel),\n    }\"\n  >\n    @if (customPlaceholder) {\n      <ng-container\n        [ngTemplateOutlet]=\"\n          isTemplateRef(customPlaceholder) ? customPlaceholder : literal\n        \"\n      ></ng-container>\n      <ng-template #literal>{{ customPlaceholder }}</ng-template>\n    } @else if (!(resourceName || resourceNameTranslated)) {\n      <div class=\"no-data-placeholder\">\n        <img\n          width=\"70\"\n          [src]=\"image | auiThemePicker\"\n        />\n        {{ 'no_data' | translate }}\n      </div>\n    } @else {\n      <div class=\"no-data-placeholder\">\n        <img\n          width=\"70\"\n          [src]=\"image | auiThemePicker\"\n        />\n        {{\n          'no_named_data_hint'\n            | translate\n              : {\n                  name: resourceNameTranslated || (resourceName | translate),\n                }\n        }}\n      </div>\n    }\n  </div>\n}\n<acl-loading-mask\n  class=\"zero-placeholder\"\n  [loading]=\"fetching\"\n></acl-loading-mask>\n", styles: [":host::ng-deep .zero-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 .zero-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 .zero-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.zero-placeholder{border-top-left-radius:0;border-top-right-radius:0}.zero-placeholder.form{border:none;padding:14px 0}.no-data-placeholder{margin-top:35px;margin-bottom:35px;display:flex;flex-direction:column;align-items:center}\n"] }]
+                    ], standalone: true, template: "@if (zeroState && !fetching) {\n  <div\n    class=\"zero-placeholder\"\n    [ngClass]=\"context\"\n    [ngStyle]=\"{\n      minHeight: (minHeight | pure: handlePixel),\n    }\"\n  >\n    @if (customPlaceholder) {\n      <ng-container\n        [ngTemplateOutlet]=\"\n          isTemplateRef(customPlaceholder) ? customPlaceholder : literal\n        \"\n      ></ng-container>\n      <ng-template #literal>{{ customPlaceholder }}</ng-template>\n    } @else if (!(resourceName || resourceNameTranslated)) {\n      <div [class.no-data-placeholder]=\"showEmptyIcon\">\n        @if (showEmptyIcon) {\n          <img\n            width=\"70\"\n            [src]=\"image | auiThemePicker\"\n          />\n        }\n        {{ 'no_data' | translate }}\n      </div>\n    } @else {\n      <div [class.no-data-placeholder]=\"showEmptyIcon\">\n        @if (showEmptyIcon) {\n          <img\n            width=\"70\"\n            [src]=\"image | auiThemePicker\"\n          />\n        }\n        {{\n          'no_named_data_hint'\n            | translate\n              : {\n                  name: resourceNameTranslated || (resourceName | translate),\n                }\n        }}\n      </div>\n    }\n  </div>\n}\n<acl-loading-mask\n  class=\"zero-placeholder\"\n  [loading]=\"fetching\"\n></acl-loading-mask>\n", styles: [":host::ng-deep .zero-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 .zero-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 .zero-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.zero-placeholder{border-top-left-radius:0;border-top-right-radius:0}.zero-placeholder.form{border:none;padding:14px 0}.no-data-placeholder{margin-top:35px;margin-bottom:35px;display:flex;flex-direction:column;align-items:center}\n"] }]
         }], propDecorators: { resourceName: [{
                 type: Input
             }], resourceNameTranslated: [{
@@ -4668,6 +4669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], fetching: [{
                 type: Input
+            }], showEmptyIcon: [{
+                type: Input
             }], context: [{
                 type: Input
             }], minHeight: [{
@@ -11585,7 +11588,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=\"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 }); }
+    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              [showEmptyIcon]=\"false\"\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", "showEmptyIcon", "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,
@@ -11599,7 +11602,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=\"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"] }]
+                    ], 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              [showEmptyIcon]=\"false\"\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, {
@@ -12681,11 +12684,11 @@ class K8sYamlDisplayDialogComponent {
         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", "showDebugInfo", "conciseEnable", "manageFieldActionEnable", "sidebarEnable", "schemaEnable", "exampleEnable", "autoFoldManagedFields", "schema", "resource", "minimap", "clusterName"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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    class=\"dialog-content\"\n  ></acl-resource-yaml-display>\n</aui-dialog-content>\n" }]
+            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" }]
         }] });
 
 /**
@@ -13325,7 +13328,7 @@ class ResourceYamlSidebarComponent {
         });
     }
     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 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 }); }
+    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,
@@ -13337,7 +13340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         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 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"] }]
+                    ], 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: [{
@@ -13391,16 +13394,20 @@ class ResourceYamlEditorComponent {
         this.hasFolded = false;
         /**
          * 自动获取的 schema，当没有手动提供 schema 时使用
+        /**
+         *
+         *
+         * @memberof ResourceYamlEditorComponent
          */
-        this.autoSchema$ = this.resource$.pipe(switchMap(resource => {
-            if (!resource) {
+        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, this.clusterName);
+            return this.schemaService.getResourceSchema(firstResource.apiVersion, firstResource.kind, clusterName);
         }), publishRef());
         /**
          * 最终使用的 schema，优先使用手动提供的，否则使用自动获取的
@@ -13591,6 +13598,10 @@ __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: [
@@ -13645,7 +13656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], clusterName: [{
                 type: Input
-            }], namespace: [{
+            }], clusterName$: [], namespace: [{
                 type: Input
             }] } });