@alauda-fe/crd-form 0.0.9 → 1.0.1-alpha.1

package/fesm2022/alauda-fe-crd-form.mjs

@@ -0,0 +1,3100 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, inject, Output, Input, Directive, forwardRef, ChangeDetectorRef, ChangeDetectionStrategy, Component, ViewChild, Injector, HostBinding, NgModule } from '@angular/core';
+import { escapeRegExp, get, includes, some, cloneDeep, map, reduce, find, set, last, isEmpty, identity, toPath, flatten, times, isArray, flatMap, flatMapDepth, union, pick, startCase, parseInt as parseInt$1, uniqWith, groupBy, sortBy, omit, merge, template, differenceBy, uniq, flattenDeep, fromPairs, toString } from 'lodash-es';
+import * as i4 from '@alauda-fe/dynamic-plugin-sdk';
+import { parseJSONStream, TRUE, FALSE, parseJson, isEqual, PurePipe, TranslatePipe, K8sApiService, TranslateService, K8S_RESOURCE_NAME_BASE, SecretType, COMMON_RESOURCE_DEFINITIONS, K8sUtilService, publishRef, skipError, ObservableInput, K8S_UTIL_PIPES_MODULE, TOKEN_RESOURCE_DEFINITIONS, ValueHook, SanitizePipe, FieldNotAvailablePipe, bind, stringify, parse, API_GATEWAY, startWithCondition } from '@alauda-fe/dynamic-plugin-sdk';
+import * as i2$1 from '@alauda-fe/dynamic-plugin-shared';
+import { isJsonObjectString, ErrorsMapperComponent, HelpDocDirective, ARRAY_FORM_TABLE_MODULE, StrongPasswordDirective, createNestedFormControl, formatCPU, formatMemory, resourceUnits, getResourceValue, getResourceViewModel, initGreaterValidator, transferResource, RESOURCE_MAC_TYPES, PasswordInputComponent, ReadonlyFieldDirective, ParseJsonTranslatePipe, ScrollToFirstInvalidDirective, ErrorsMapperDirective } from '@alauda-fe/dynamic-plugin-shared';
+import { __decorate, __metadata } from 'tslib';
+import * as i2 from '@alauda/ui';
+import { FormModule, IconModule, TooltipModule, ButtonModule, DIALOG_DATA, DialogRef, MessageService, InputModule, DialogModule, DialogService, DialogSize, SelectModule, TagModule, RadioModule, SwitchModule, LabelPosition } from '@alauda/ui';
+import * as i1 from '@angular/forms';
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormGroupDirective, NG_VALUE_ACCESSOR, ControlContainer, FormControl } from '@angular/forms';
+import { isImmutable, fromJS, Map as Map$1, List } from 'immutable';
+import { finalize, filter, map as map$1, Subject, combineLatest, startWith, switchMap, takeUntil, Observable, BehaviorSubject, pluck, tap, of, debounceTime, distinctUntilChanged, isObservable, take } from 'rxjs';
+import { CodeEditorComponent, yamlWriteOptions, createActions, viewActions, yamlReadOptions } from '@alauda/code-editor';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { encode, decode } from 'ab64';
+import { BaseResourceFormComponent, BaseResourceFormGroupComponent } from 'ng-resource-form-util';
+import { hashSync } from 'bcryptjs';
+
+const CRD_FORM_CONTEXT = new InjectionToken('CRD_FORM_CONTEXT');
+
+var Validations;
+(function (Validations) {
+    Validations["maximum"] = "maximum";
+    Validations["minimum"] = "minimum";
+    Validations["maxLength"] = "maxLength";
+    Validations["minLength"] = "minLength";
+    Validations["pattern"] = "pattern";
+    Validations["required"] = "required";
+})(Validations || (Validations = {}));
+const SpecCapabilityUIPrefix = 'urn:alm:descriptor:com.tectonic.ui';
+const SpecCapabilityWidgetsPrefix = 'urn:alm:descriptor:widgets';
+var SpecCapability;
+(function (SpecCapability) {
+    /**
+     * 表单 UI 控件
+     */
+    // 基础 UI 控件
+    SpecCapability["text"] = "urn:alm:descriptor:com.tectonic.ui:text";
+    SpecCapability["textarea"] = "urn:alm:descriptor:com.tectonic.ui:textarea";
+    SpecCapability["yaml"] = "urn:alm:descriptor:com.tectonic.ui:yaml";
+    SpecCapability["number"] = "urn:alm:descriptor:com.tectonic.ui:number";
+    SpecCapability["podCount"] = "urn:alm:descriptor:com.tectonic.ui:podCount";
+    SpecCapability["booleanSwitch"] = "urn:alm:descriptor:com.tectonic.ui:booleanSwitch";
+    SpecCapability["radio"] = "urn:alm:descriptor:com.tectonic.ui:radio:";
+    SpecCapability["tagsInput"] = "urn:alm:descriptor:com.tectonic.ui:tagsInput";
+    SpecCapability["select"] = "urn:alm:descriptor:com.tectonic.ui:select:";
+    SpecCapability["password"] = "urn:alm:descriptor:com.tectonic.ui:password";
+    SpecCapability["confirmPassword"] = "urn:alm:descriptor:com.tectonic.ui:password:confirm";
+    SpecCapability["externalPassword"] = "urn:alm:descriptor:com.tectonic.ui:externalPassword";
+    // 高级 UI 控件 widgets
+    SpecCapability["widgets"] = "urn:alm:descriptor:widgets:";
+    SpecCapability["remote"] = "urn:alm:descriptor:remote:";
+    SpecCapability["k8sResourcePrefix"] = "urn:alm:descriptor:io.kubernetes:";
+    SpecCapability["basicAuthSecret"] = "urn:alm:descriptor:com.tectonic.ui:basicAuthSecret";
+    SpecCapability["resourceRequirements"] = "urn:alm:descriptor:com.tectonic.ui:resourceRequirements";
+    SpecCapability["arrayFieldGroup"] = "urn:alm:descriptor:com.tectonic.ui:arrayFieldGroup:";
+    SpecCapability["arrayTable"] = "urn:alm:descriptor:widgets:common:arrayTable";
+    SpecCapability["array"] = "urn:alm:descriptor:com.tectonic.ui:array";
+    /**
+     * @deprecated
+     */
+    SpecCapability["object"] = "urn:alm:descriptor:com.tectonic.ui:object";
+    /**
+     * aui-form 表单元素
+     */
+    SpecCapability["label"] = "urn:alm:descriptor:label:";
+    SpecCapability["description"] = "urn:alm:descriptor:description:";
+    SpecCapability["placeholder"] = "urn:alm:descriptor:placeholder:";
+    SpecCapability["tooltip"] = "urn:alm:descriptor:tooltip:";
+    SpecCapability["descriptionAsLink"] = "urn:alm:descriptor:descriptionAsLink";
+    SpecCapability["docOption"] = "urn:alm:descriptor:docOption:";
+    SpecCapability["docLink"] = "urn:alm:descriptor:docLink:";
+    SpecCapability["validation"] = "urn:alm:descriptor:com.tectonic.ui:validation:";
+    SpecCapability["copyable"] = "urn:alm:descriptor:copyable";
+    /**
+     * 表单布局/控制能力
+     */
+    SpecCapability["hidden"] = "urn:alm:descriptor:com.tectonic.ui:hidden";
+    SpecCapability["defaultValue"] = "urn:alm:descriptor:com.tectonic.default:";
+    SpecCapability["fieldGroup"] = "urn:alm:descriptor:com.tectonic.ui:fieldGroup:";
+    SpecCapability["advanced"] = "urn:alm:descriptor:com.tectonic.ui:advanced";
+    SpecCapability["fieldDependency"] = "urn:alm:descriptor:com.tectonic.ui:fieldDependency:";
+    SpecCapability["oneOf"] = "urn:alm:descriptor:oneOf:";
+    /**
+     * UI 控件特性扩展
+     */
+    SpecCapability["expression"] = "urn:alm:descriptor:expression:";
+    // urn:alm:descriptor:yaml:actions:disabled:diffMode,recover
+    SpecCapability["yamlActionsDisabled"] = "urn:alm:descriptor:yaml:actions:disabled:";
+    // urn:alm:descriptor:yaml:result:json
+    // urn:alm:descriptor:yaml:result:stringify
+    SpecCapability["yamlResult"] = "urn:alm:descriptor:yaml:result:";
+    // object 和 array 组件折叠, 默认为展开
+    SpecCapability["folded"] = "urn:alm:descriptor:com.tectonic.ui:folded";
+    // array 组件在没有 Value 的前提下支持不保留首项
+    SpecCapability["emptyArray"] = "urn:alm:descriptor:com.tectonic.ui:emptyArray";
+    // 用于支持复数场景，如 multiselect，tags-input 等
+    SpecCapability["multiple"] = "urn:alm:descriptor:com.tectonic.ui:multiple";
+    SpecCapability["allowCreate"] = "urn:alm:descriptor:com.tectonic.ui:allowCreate";
+    SpecCapability["creatable"] = "urn:alm:descriptor:com.tectonic.ui:creatable";
+    SpecCapability["clearable"] = "urn:alm:descriptor:com.tectonic.ui:clearable";
+    SpecCapability["disabled"] = "urn:alm:descriptor:com.tectonic.ui:disabled";
+    /**
+     * 其他
+     */
+    // 用于做control唯一识别的依据，缺省情况下 path 将作为依据
+    SpecCapability["pathTag"] = "urn:alm:descriptor:com.tectonic.ui:path.tag:";
+})(SpecCapability || (SpecCapability = {}));
+
+const NodeModel = {
+    apiVersion: 'v1',
+    label: 'Node',
+    labelKey: 'public~Node',
+    plural: 'nodes',
+    abbr: 'N',
+    kind: 'Node',
+    id: 'node',
+    labelPlural: 'Nodes',
+    labelPluralKey: 'public~Nodes',
+};
+
+var ServiceModels = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    NodeModel: NodeModel
+});
+
+const MAX_DEPTH = 1;
+const SCHEMA_PATH = ['properties', 'spec'];
+const DESCRIPTOR_DEFINITION_KEY = 'x-descriptors';
+const NamespacedResourceKind = Object.values(ServiceModels)
+    .filter(i => i.namespaced)
+    .map(i => i.kind);
+// Regex for SpecCapability.arrayFieldGroup and SpecCapability.fieldGroup
+const ARRAY_FIELD_GROUP_PATTERN = escapeRegExp(SpecCapability.arrayFieldGroup);
+const FIELD_GROUP_PATTERN = escapeRegExp(SpecCapability.fieldGroup);
+const GROUP_PATTERN = new RegExp(`^(${FIELD_GROUP_PATTERN}|${ARRAY_FIELD_GROUP_PATTERN})(.*)$`);
+const DEFAULT_VALUE_PATTERN = new RegExp(`^${escapeRegExp(SpecCapability.defaultValue)}(.*)$`);
+const REGEXP_K8S_RESOURCE_CAPABILITY = escapeRegExp(SpecCapability.k8sResourcePrefix);
+const REGEXP_CAPABILITY_VALIDATION = escapeRegExp(SpecCapability.validation);
+const REGEXP_FIELD_DEPENDENCY_CAPABILITY = escapeRegExp(SpecCapability.fieldDependency);
+const REGEXP_SELECT_CAPABILITY = escapeRegExp(SpecCapability.select);
+const REGEXP_K8S_RESOURCE_SUFFIX = new RegExp(`^${REGEXP_K8S_RESOURCE_CAPABILITY}(?:core[:~]v1[:~])?([^?]*)(?:\\?\\+)?([^?]*)?(?:\\?\\=)?([^?]*)?$`);
+const SupportValidation = Object.values(Validations).join('|');
+const REGEXP_VALIDATION_SUFFIX = new RegExp(`^${REGEXP_CAPABILITY_VALIDATION}(${SupportValidation})(?::(.+))?$`);
+
+const isRequired = (field) => field?.required ||
+    Object.keys(field?.validations || {})?.includes(Validations.required);
+const filterMapByKey = (map, predicate) => {
+    const m = new Map();
+    map.forEach((v, k) => {
+        if (predicate(k)) {
+            m.set(k, v);
+        }
+    });
+    return m;
+};
+const getMatchArrayIndex = (arrPath) => {
+    const matched = arrPath.match(/(^.*)\[(\d+)]$/);
+    return +get(matched, '[2]', 0);
+};
+const isGroupField = (field) => field.type === 'object';
+const isArrayField = (field) => field.type === 'array';
+const isRemoteField = (field) => field.capabilities.some(c => c.startsWith(SpecCapability.remote));
+const isArrayFieldTable = (field) => isArrayField(field) &&
+    field.capabilities.some(c => c.startsWith(SpecCapability.arrayTable));
+const isCreatable = (field) => field.capabilities.some(c => c.startsWith(SpecCapability.creatable));
+const isMultiple = (field) => field.capabilities.some(c => c.startsWith(SpecCapability.multiple));
+const isAllowCreate = (field) => field.capabilities.some(c => c.startsWith(SpecCapability.allowCreate));
+const isClearable = (field) => field.capabilities.some(c => c.startsWith(SpecCapability.clearable));
+const isFolded = (field) => field.capabilities.some(c => c.startsWith(SpecCapability.folded));
+const isEmptyArray = (field) => field.capabilities.some(c => c.startsWith(SpecCapability.emptyArray));
+function hasDescriptor(field, prefix, suffix = null) {
+    return suffix
+        ? includes(field.capabilities, `${prefix}${suffix}`)
+        : some(field.capabilities, capability => capability.startsWith(prefix));
+}
+/*
+ * Matches a path that contains an array index. Use Sting.match against an OperandField 'path'
+ * property to determine if it contains an array index. It will parse the path into three parts,
+ * [match, pathBeforeIndex, index, pathAfterIndex]. For example:
+ *
+ *   const [match, pathBeforeIndex, index, pathAfterIndex] =
+ *     'path.before[0].path.after'.match(ARRAY_INDEX_PATTERN);
+ *
+ *   console.log(match);
+ *   > 'path.before[0].path.after'
+ *
+ *   console.log(pathBeforeIndex);
+ *   > 'path.before'
+ *
+ *   console.log(index)
+ *   > '0'
+ *
+ *   console.log(pathAfterIndex)
+ *   > 'path.after'
+ *
+ */
+const ARRAY_INDEX_PATTERN = /^(.*)\[(\d+)]\.?(.*)$/;
+function parseArrayPath(path) {
+    const [match, pathBeforeIndex, index, pathAfterIndex] = ARRAY_INDEX_PATTERN.exec(path) || [];
+    return match
+        ? { index: parseInt(index, 10), match, pathBeforeIndex, pathAfterIndex }
+        : { match };
+}
+function getArrayGroupName(field) {
+    if (hasDescriptor(field, SpecCapability.arrayFieldGroup)) {
+        return field.capabilities
+            .find(capability => capability.startsWith(SpecCapability.arrayFieldGroup))
+            .slice(SpecCapability.arrayFieldGroup.length);
+    }
+    return '';
+}
+function getGroupName(field) {
+    if (hasDescriptor(field, SpecCapability.fieldGroup)) {
+        return field.capabilities
+            .find(capability => capability.startsWith(SpecCapability.fieldGroup))
+            .slice(SpecCapability.fieldGroup.length);
+    }
+    return '';
+}
+/**
+ * 递归修复树形结构中 数组类型的索引
+ *
+ * @export
+ * @param {OperandField} field
+ * @param {string} fromPath
+ * @param {string} toPath
+ * @returns
+ *
+ */
+const repairFieldChildPathByCorrectIndex = (field, fromPath, toPath) => {
+    const targetField = cloneDeep(field);
+    if (isGroupField(targetField)) {
+        targetField.fieldList = map(targetField.fieldList, f => ({
+            ...f,
+            path: f.path.replace(fromPath, toPath),
+        }));
+    }
+    else if (isArrayField(targetField)) {
+        targetField.fieldLists = reduce(targetField.fieldLists, (t, c) => [
+            ...t,
+            map(c, f => repairFieldChildPathByCorrectIndex(f, fromPath, toPath)),
+        ], []);
+    }
+    return {
+        ...targetField,
+        path: targetField.path.replace(fromPath, toPath),
+    };
+};
+const getRelatedFields = (normalFields) => map(normalFields, field => {
+    if (getArrayGroupName(field)) {
+        const { pathBeforeIndex, index } = parseArrayPath(field.path);
+        return {
+            ...field,
+            parent: pathBeforeIndex,
+            inParentIndex: index,
+        };
+    }
+    if (getGroupName(field)) {
+        const groupNameFromDefinition = `spec.${getGroupName(field)}`;
+        const parent = field.path.slice(0, groupNameFromDefinition.length);
+        return {
+            ...field,
+            parent,
+        };
+    }
+    return field;
+});
+const getTreeFields = (rootFields, basicFields) => {
+    if (basicFields.length > 0) {
+        return rootFields.reduce((acc, field) => {
+            field._dirty = true;
+            const children = basicFields.filter(f => f.parent === field.path);
+            children.forEach(c => (c._dirty = true));
+            if (isArrayField(field)) {
+                field.fieldLists = children
+                    .reduce((acc, child) => {
+                    acc[child.inParentIndex] = [
+                        ...(acc[child.inParentIndex] || []),
+                        child,
+                    ];
+                    return acc;
+                }, [])
+                    .map(m => getTreeFields(m, basicFields.filter(f => !f._dirty)));
+            }
+            else if (isGroupField(field)) {
+                field.fieldList = getTreeFields(children, basicFields.filter(f => !f._dirty));
+            }
+            return [...acc, field];
+        }, []);
+    }
+    return rootFields.map(f => {
+        f._dirty = true;
+        return f;
+    });
+};
+const getMatchedCapabilityValue = (capabilities, descriptor) => capabilities
+    .find(capability => capability.startsWith(descriptor))
+    ?.slice(descriptor.length) || '';
+function evalInContext(stringExpression, context) {
+    // replace eval, skip eslint & sonar safe check
+    function evil(fn) {
+        const Fn = Function;
+        return new Fn(`return ${fn}`);
+    }
+    try {
+        return evil(stringExpression).call(context);
+    }
+    catch {
+        console.error('expression is invalid:', stringExpression);
+        return stringExpression;
+    }
+}
+function coerceBoolean(val) {
+    return val === 'true';
+}
+function coerceNumber(val, fallbackValue = 0) {
+    return _isNumberValue(val) ? Number(val) : fallbackValue;
+}
+function _isNumberValue(value) {
+    // parseFloat(value) handles most of the cases we're interested in (it treats null, empty string,
+    // and other non-number values as NaN, where Number just uses 0) but it considers the string
+    // '123hello' to be a valid number. Therefore we also check if Number(value) is NaN.
+    return (!isNaN(typeof value === 'string' && parseFloat(value)) &&
+        !isNaN(Number(value)));
+}
+function getOperandPath(field) {
+    const idField = field?.capabilities.find(c => c.startsWith(SpecCapability.pathTag));
+    if (idField) {
+        return `${field.path}@${idField.slice(SpecCapability.pathTag.length)}`;
+    }
+    return field.path;
+}
+function getPathFromTagPath(pathWithTag) {
+    return pathWithTag.split('@')[0];
+}
+// 获取path下所有的filed，例如spec.a 能匹配到 spec.a.a1 spec.a.a2
+const getFieldsByPath = (path, fields) => fields.filter(field => getOperandPath(field).startsWith(path));
+
+function getBasicAuthSecretConfig(field) {
+    const configPrefix = `${SpecCapability.basicAuthSecret}:`;
+    const capability = find(field.capabilities, descriptor => descriptor.startsWith(configPrefix));
+    if (!capability) {
+        return null;
+    }
+    const configStr = capability.slice(configPrefix.length);
+    return parseJSONStream(configStr)[0];
+}
+function getRadioOptions(capabilities) {
+    const items = capabilities
+        .filter(c => c.startsWith(SpecCapability.radio))
+        .map(c => c.split(SpecCapability.radio)[1]);
+    return items
+        .filter(item => item.split(':').length === 1)
+        .map(item => {
+        const zhPrefix = `${item}:zh:`;
+        const enPrefix = `${item}:en:`;
+        const zhDescriptor = items.find(value => value.startsWith(zhPrefix));
+        const enDescriptor = items.find(value => value.startsWith(enPrefix));
+        return {
+            value: item,
+            display: {
+                zh: zhDescriptor ? zhDescriptor.split(zhPrefix)[1] : item,
+                en: enDescriptor ? enDescriptor.split(enPrefix)[1] : item,
+            },
+        };
+    });
+}
+function setRadiosDefaultValue(descriptors) {
+    // Set radio default selected item
+    const defaultValueMap = (descriptors || [])
+        .filter(d => d[DESCRIPTOR_DEFINITION_KEY].some(item => item.startsWith(SpecCapability.radio)))
+        .map(item => ({
+        path: item.path,
+        value: item[DESCRIPTOR_DEFINITION_KEY].filter(c => c.startsWith(SpecCapability.radio))
+            .map(c => c.split(SpecCapability.radio)[1])
+            .find(c => c.split(':').length === 1),
+    }))
+        .reduce((acc, cur) => ({
+        ...set(acc, cur.path, cur.value),
+    }), {});
+    return {
+        spec: {
+            ...defaultValueMap,
+        },
+    };
+}
+const getBooleanSwitchOptions = (capabilities) => {
+    const items = capabilities
+        .filter(c => c.startsWith(SpecCapability.booleanSwitch))
+        .map(c => c.split(SpecCapability.booleanSwitch)[1]);
+    return [TRUE, FALSE].map(item => {
+        const zhPrefix = `:${item}:zh:`;
+        const enPrefix = `:${item}:en:`;
+        const zhDescriptor = items.find(value => value.startsWith(zhPrefix));
+        const enDescriptor = items.find(value => value.startsWith(enPrefix));
+        return {
+            value: item,
+            display: zhDescriptor && enDescriptor
+                ? {
+                    zh: zhDescriptor ? zhDescriptor.split(zhPrefix)[1] : item,
+                    en: enDescriptor ? enDescriptor.split(enPrefix)[1] : item,
+                }
+                : item === TRUE
+                    ? 'yes'
+                    : 'no',
+        };
+    });
+};
+const convertBooleanSwitchValue = (value, capabilities) => {
+    const options = getBooleanSwitchOptions(capabilities);
+    return options.find(item => item.value === (value ? TRUE : FALSE))?.display;
+};
+function convertValue(value, type) {
+    switch (type) {
+        case 'number':
+        case 'integer': {
+            return coerceNumber(value);
+        }
+        case 'boolean': {
+            return coerceBoolean(value);
+        }
+        default: {
+            // 兼容 value 为 json 字符串的情况
+            return isJsonObjectString(value)
+                ? parseJson(value, value)
+                : value || undefined;
+        }
+    }
+}
+function getDefaultValue(field) {
+    const defaultValueDescriptor = find(field.capabilities, descriptor => descriptor.startsWith(SpecCapability.defaultValue));
+    if (defaultValueDescriptor) {
+        const [, value] = DEFAULT_VALUE_PATTERN.exec(defaultValueDescriptor) || [];
+        return convertValue(value, field.type);
+    }
+}
+const UI_FIELDS = [
+    SpecCapability.text,
+    {
+        spec: `${SpecCapability.text}:link`,
+        refer: SpecCapability.text,
+    },
+    {
+        spec: `${SpecCapability.text}:link:`,
+        prefix: true,
+    },
+    SpecCapability.password,
+    SpecCapability.confirmPassword,
+    SpecCapability.externalPassword,
+    SpecCapability.number,
+    SpecCapability.textarea,
+    {
+        spec: SpecCapability.podCount,
+        refer: SpecCapability.number,
+    },
+    SpecCapability.booleanSwitch,
+    {
+        spec: SpecCapability.select,
+        prefix: true,
+    },
+    SpecCapability.resourceRequirements,
+    SpecCapability.yaml,
+    SpecCapability.object,
+    SpecCapability.array,
+    {
+        spec: SpecCapability.radio,
+        prefix: true,
+    },
+    {
+        spec: SpecCapability.k8sResourcePrefix,
+        prefix: true,
+    },
+    {
+        spec: SpecCapability.basicAuthSecret,
+        prefix: true,
+    },
+    {
+        spec: SpecCapability.widgets,
+        prefix: true,
+    },
+    {
+        spec: SpecCapability.remote,
+        prefix: true,
+    },
+    {
+        spec: SpecCapability.tagsInput,
+        prefix: true,
+    },
+];
+function getFieldType(field) {
+    const { capabilities } = field;
+    const result = UI_FIELDS.find(specField => {
+        if (typeof specField === 'string') {
+            return capabilities.includes(specField);
+        }
+        return specField.prefix
+            ? capabilities.some(c => c.startsWith(specField.spec))
+            : capabilities.includes(specField.spec);
+    });
+    return typeof result === 'string' ? result : (result?.refer ?? result?.spec);
+}
+function getBasicCapabilityType(capabilities) {
+    if (capabilities.includes(SpecCapability.text)) {
+        return 'string';
+    }
+    if (capabilities.includes(SpecCapability.number) ||
+        capabilities.includes(SpecCapability.podCount)) {
+        return 'number';
+    }
+    if (capabilities.includes(SpecCapability.booleanSwitch)) {
+        return 'boolean';
+    }
+    if (capabilities.includes(SpecCapability.object)) {
+        return 'object';
+    }
+    if (capabilities.includes(SpecCapability.array)) {
+        return 'array';
+    }
+}
+function getDisplayByCapability(capabilities, name, fallback) {
+    const enDes = `${name}en:`;
+    const zhDes = `${name}zh:`;
+    const en = find(capabilities, descriptor => descriptor.startsWith(enDes))?.split(enDes)?.[1];
+    const zh = find(capabilities, descriptor => descriptor.startsWith(zhDes))?.split(zhDes)?.[1];
+    return en || zh
+        ? { en: en || zh || fallback, zh: zh || en || fallback }
+        : fallback
+            ? { en: fallback, zh: fallback }
+            : null;
+}
+function getFieldDisplayName(field) {
+    return getDisplayByCapability(field.capabilities, SpecCapability.label, field.displayName ?? '');
+}
+function getFieldDescription$1(field) {
+    return getDisplayByCapability(field.capabilities, SpecCapability.description, field.description ?? '');
+}
+function getFieldPlaceholder$1(field) {
+    return getDisplayByCapability(field.capabilities, SpecCapability.placeholder);
+}
+function getFieldTooltip(field) {
+    return getDisplayByCapability(field.capabilities, SpecCapability.tooltip);
+}
+function isFieldCopyable(field) {
+    return !!find(field.capabilities, descriptor => descriptor === SpecCapability.copyable);
+}
+function isFieldDescriptionAsLink(field) {
+    return !!find(field.capabilities, descriptor => descriptor === SpecCapability.descriptionAsLink);
+}
+function getFieldDocLink(field) {
+    const docLinkDescriptor = find(field.capabilities, descriptor => descriptor.startsWith(SpecCapability.docLink));
+    if (docLinkDescriptor) {
+        return docLinkDescriptor.split(SpecCapability.docLink)[1];
+    }
+}
+// cspell:disable-next-line
+// k8s params should conform to urn:alm:descriptor:io.kubernetes:Secret?=isGlobal=true:labelSelector=plugins.cpaas.io%2Fvictoriametrics%3Dtrue
+// : is used by dividing meta params and queryParams,both should be url encoded(percent encoding)
+const K8S_RESOURCE_META_PARAMS_DIVIDER = ':';
+function getK8sResourcePrefixOptions(field) {
+    const capability = find(field.capabilities, descriptor => descriptor.startsWith(SpecCapability.k8sResourcePrefix));
+    const multiple = field.capabilities.some(descriptor => descriptor.startsWith(SpecCapability.multiple));
+    const validations = getCapabilityValidations(field.capabilities);
+    const [, resource, , qComponents] = capability.match(REGEXP_K8S_RESOURCE_SUFFIX) ?? [];
+    const groupVersionKind = resource?.replace(/:/g, '~');
+    const kind = last(groupVersionKind.split('~'));
+    const [metaStr, queryParamsStr] = (qComponents ?? '').split(K8S_RESOURCE_META_PARAMS_DIVIDER);
+    const meta = resolveKVParams(metaStr);
+    const queryParams = resolveKVParams(queryParamsStr);
+    return {
+        namespaced: NamespacedResourceKind.includes(kind),
+        labelSelector: queryParams.labelSelector,
+        isGlobal: !!meta.isGlobal,
+        groupVersionKind, // 现有的 apiversion，apiGroup 皆由环境配置，可以暂时不用
+        type: last(groupVersionKind.split('~')),
+        multiple,
+        validations,
+    };
+}
+// resolve a=b&c=d 格式数据
+function resolveKVParams(str) {
+    return (str || '')
+        .split('&')
+        .filter(i => !isEmpty(i))
+        .reduce((acc, curr) => {
+        const [k, v] = curr.split('=');
+        acc[k] = decodeURIComponent(v);
+        return acc;
+    }, {});
+}
+function getCapabilityDisabled(capabilities) {
+    return capabilities.includes(SpecCapability.disabled);
+}
+function getCapabilityValidations(capabilities) {
+    const validations = capabilities?.filter(c => c.startsWith(SpecCapability.validation));
+    return validations.reduce((acc, descriptor) => {
+        const [, validation, param] = descriptor.match(REGEXP_VALIDATION_SUFFIX) ?? [];
+        if (!validation) {
+            return acc;
+        }
+        if (validation === Validations.pattern) {
+            acc[validation] = param;
+        }
+        else if (validation === Validations.required) {
+            acc[validation] = Boolean(param);
+        }
+        else {
+            acc[validation] = +param;
+        }
+        return acc;
+    }, {});
+}
+function getOneOfMap(field) {
+    const map = {};
+    const capabilities = field.capabilities.filter(c => c.startsWith(SpecCapability.oneOf));
+    capabilities.forEach(c => {
+        const str = c.split(SpecCapability.oneOf)[1];
+        // 这里 path 与后端约束直接支持 path@tag 模式
+        const [value, ...path] = str.split(':');
+        map[value] = [...path];
+    });
+    return map;
+}
+function fieldShouldReveal(field) {
+    return (!field.capabilities.includes(SpecCapability.hidden) &&
+        identity(getFieldType(field)));
+}
+
+function getPropertyDepth(property, depth = 0) {
+    if (!property || !['object', 'array'].includes(property.type)) {
+        return depth;
+    }
+    return Math.max(0, ...Object.values(property.properties || property.items?.properties || {}).map(nestedProperty => getPropertyDepth(nestedProperty, depth + 1)));
+}
+function getFieldsFromDescriptor({ path, description, displayName, 'x-descriptors': capabilities = [], }, data, openApi, _originDescriptors) {
+    const { match, pathBeforeIndex, pathAfterIndex } = parseArrayPath(path);
+    const filedBasicType = getBasicCapabilityType(capabilities);
+    const disabled = getCapabilityDisabled(capabilities);
+    const validations = getCapabilityValidations(capabilities);
+    if (match) {
+        const n = get(data, toPath(`spec.${pathBeforeIndex}`), []).length || 1;
+        const pathAfterIndexStr = `.${pathAfterIndex}`;
+        let extra = [];
+        if (_originDescriptors) {
+            extra = flatten(_originDescriptors
+                .filter(d => d.path.startsWith(`${pathBeforeIndex}[0]`) && d.path !== path)
+                .map(d => times(n, index => {
+                const oPath = d.path.replace(`${pathBeforeIndex}[0]`, `${pathBeforeIndex}[${index}]`);
+                return {
+                    ...d,
+                    path: oPath,
+                };
+            }).slice(1)));
+        }
+        return flatten([
+            ...times(n, index => {
+                const propertyPath = `spec.${pathBeforeIndex}[${index}]${pathAfterIndex && pathAfterIndexStr}`;
+                const property = getOpenApiPropertyByPath(`spec.${path}`, openApi);
+                return {
+                    path: propertyPath,
+                    value: get(data, propertyPath),
+                    description,
+                    displayName,
+                    capabilities,
+                    type: filedBasicType || property?.type,
+                    required: null,
+                    disabled,
+                    validations: {
+                        ...validations,
+                        ...(property?.required && { required: true }),
+                    },
+                };
+            }),
+            ...extra.map(e => getFieldsFromDescriptor(e, data, openApi)),
+        ]);
+    }
+    // 通过 descriptor 查找原始 CRD 节点，推导类型、validation 等信息
+    const propertyPath = `spec.${path}`;
+    const property = getOpenApiPropertyByPath(propertyPath, openApi);
+    return [
+        {
+            path: propertyPath,
+            description,
+            displayName,
+            capabilities,
+            disabled,
+            value: get(data, propertyPath),
+            type: filedBasicType || property?.type,
+            required: null,
+            validations: {
+                ...validations,
+                ...(property?.required && { required: true }),
+            },
+        },
+    ];
+}
+function getOpenApiPropertyByPath(descriptorPath, openApi) {
+    const paths = descriptorPath.split('.');
+    try {
+        return paths.reduce((acc, path) => {
+            acc = path.includes('[0]')
+                ? acc.items.properties[path.split('[0]')[0]]
+                : acc.properties[path];
+            return acc;
+        }, openApi);
+    }
+    catch {
+        return null;
+    }
+}
+function getFieldsFromOpenApiSchema(openApi, descriptors, data, openApiSchemaPath = SCHEMA_PATH, maxDepth = MAX_DEPTH) {
+    const path = isArray(openApiSchemaPath)
+        ? openApiSchemaPath
+        : openApiSchemaPath.split('.').filter(Boolean);
+    const properties = get(openApi, [...path, 'properties'], {});
+    const required = get(openApi, [...path, 'required'], []);
+    return reduce(properties, (accumulator, _property, propertyName) => {
+        const property = _property;
+        if (!property.type || getPropertyDepth(property) > maxDepth) {
+            return accumulator;
+        }
+        return [
+            ...accumulator,
+            ...flattenNestedProperties(propertyName, property, descriptors, data, {
+                required: required.includes(propertyName),
+            }),
+        ];
+    }, []);
+}
+function flattenNestedProperties(propertyName, property, descriptors, data, { currentCapabilities = [], currentPath = [], required = false, }) {
+    if (!property) {
+        return [];
+    }
+    const handleObjectProperty = () => flatMap(property.properties, (nestedProperty, nestedPropertyName) => flattenNestedProperties(nestedPropertyName, nestedProperty, descriptors, data, {
+        currentCapabilities: [
+            ...currentCapabilities,
+            `${SpecCapability.fieldGroup}${propertyName}`,
+        ],
+        currentPath: [...currentPath, propertyName],
+        required: (property.required || []).includes(nestedPropertyName),
+    }));
+    const handleArrayProperty = () => {
+        // Find the number of array elements that are already defined in the provided object
+        const n = get(data, `spec.${currentPath.join('.')}${propertyName}`, []).length || 1;
+        // Since _.times will return a multidimensional array of OperandFields (OperandField[][]), we
+        // need to flatten one level deeper than _.flatMap provides.
+        return flatMapDepth(property.items.properties, (nestedProperty, nestedPropertyName) => 
+        // Repeat recursion (n) times so that the correct number of fields are created for
+        // existing values in obj. This ensures that further nested fields also get created.
+        times(n, index => flattenNestedProperties(nestedPropertyName, nestedProperty, descriptors, data, {
+            currentCapabilities: [
+                ...currentCapabilities,
+                `${SpecCapability.arrayFieldGroup}${propertyName}`,
+            ],
+            currentPath: [...currentPath, `${propertyName}[${index}]`], // Array field paths must include an index
+            required: (property?.required || []).includes(nestedPropertyName),
+        })), 2);
+    };
+    const handleAtomicProperty = () => {
+        const path = [...currentPath, propertyName].join('.');
+        const descriptor = descriptors.find(item => item.path === modifyArrayFieldPathIndex(path, () => 0));
+        const capabilities = union(descriptor?.[DESCRIPTOR_DEFINITION_KEY] || [], currentCapabilities, getCapabilitiesForOpenApiProperty(property, descriptor?.[DESCRIPTOR_DEFINITION_KEY]));
+        const validations = getCapabilityValidations(capabilities);
+        const fieldPath = `spec.${path}`;
+        return [
+            {
+                path: fieldPath,
+                type: property.type,
+                required,
+                capabilities,
+                description: descriptor?.description || property.description,
+                displayName: descriptor?.displayName || startCase(propertyName),
+                validations: {
+                    ...pick(property, Object.keys(Validations)),
+                    ...validations,
+                },
+                value: get(data, fieldPath),
+            },
+        ];
+    };
+    switch (property.type) {
+        case 'object': {
+            return handleObjectProperty();
+        }
+        case 'array': {
+            return handleArrayProperty();
+        }
+        default: {
+            return handleAtomicProperty();
+        }
+    }
+}
+// Accepts an OpenAPI spec property and returns a corresponding SpecCapability[] array.
+function getCapabilitiesForOpenApiProperty(property, capabilities = []) {
+    const formControlCapabilities = [
+        SpecCapabilityUIPrefix,
+        SpecCapabilityWidgetsPrefix,
+        SpecCapability.k8sResourcePrefix,
+    ];
+    if (capabilities.some(i => formControlCapabilities.some(k => i.startsWith(k)))) {
+        return [];
+    }
+    if (property.enum) {
+        return (property.enum || []).map((option) => `${SpecCapability.select}${option}`);
+    }
+    switch (property.type) {
+        case 'integer': {
+            return [SpecCapability.number];
+        }
+        case 'boolean': {
+            return [SpecCapability.booleanSwitch];
+        }
+        default: {
+            return [SpecCapability.text];
+        }
+    }
+}
+function modifyArrayFieldPathIndex(path, operation) {
+    const { match, index, pathBeforeIndex, pathAfterIndex } = parseArrayPath(path);
+    const pathAfterIndexStr = `.${pathAfterIndex}`;
+    return match
+        ? `${pathBeforeIndex}[${operation(index)}]${pathAfterIndex && pathAfterIndexStr}`
+        : path;
+}
+function pathToArray(path) {
+    return map(toPath(path), subPath => /^\d+$/.test(subPath) ? parseInt$1(subPath, 10) : subPath);
+}
+function parseGroupDescriptor(field) {
+    const groupDescriptor = find(field.capabilities, descriptor => descriptor.startsWith(SpecCapability.fieldGroup) ||
+        descriptor.startsWith(SpecCapability.arrayFieldGroup));
+    const [match, groupType, groupName] = GROUP_PATTERN.exec(groupDescriptor) || [];
+    return { match, groupName, groupType };
+}
+function normalizePath(path) {
+    return path?.startsWith('spec.') ? path : `spec.${path}`;
+}
+function getFormData(formData, path, enableConvert = true) {
+    const value = formData.getIn(pathToArray(normalizePath(path)));
+    return enableConvert && value == null ? null : value;
+}
+function createCapabilityField(descriptors = [], openApiSchema, data, openApiSchemaPath) {
+    const openApiFields = getFieldsFromOpenApiSchema(openApiSchema, descriptors, data, openApiSchemaPath);
+    const descriptorFields = uniqWith(reduce(descriptors, (accumulator, descriptor) => openApiFields?.some(field => field.path === `spec.${descriptor.path}`)
+        ? accumulator
+        : [
+            ...accumulator,
+            ...getFieldsFromDescriptor(descriptor, data, openApiSchema, descriptors),
+        ], []), isEqual);
+    const basicFields = [...openApiFields, ...descriptorFields];
+    const relationFields = getRelatedFields(basicFields.filter(fieldShouldReveal));
+    const treeFields = [
+        ...getTreeFields(relationFields.filter(f => !f.parent), relationFields.filter(f => !!f.parent)),
+        // 兼容老的数据结构
+        ...relationFields.filter(f => !f._dirty),
+    ];
+    // 保留，兼容老数据结构
+    const [advancedFields = [], arrayFields = [], groupFields = [], normalFields = [],] = reduce(treeFields, ([advancedFieldsAccumulator = [], arrayFieldsAccumulator = [], groupFieldsAccumulator = [], normalFieldsAccumulator = [],], field) => {
+        const mappers = [
+            { spec: SpecCapability.arrayFieldGroup, acc: arrayFieldsAccumulator },
+            { spec: SpecCapability.fieldGroup, acc: groupFieldsAccumulator },
+            { spec: SpecCapability.advanced, acc: advancedFieldsAccumulator },
+        ];
+        const acc = mappers.find(mapper => hasDescriptor(field, mapper.spec))?.acc;
+        return [
+            advancedFieldsAccumulator,
+            arrayFieldsAccumulator,
+            groupFieldsAccumulator,
+            normalFieldsAccumulator,
+        ].map(r => {
+            if ((!acc && r === normalFieldsAccumulator) || r === acc) {
+                return [...r, field];
+            }
+            return r;
+        });
+    }, []);
+    return {
+        normalFields: sortFields(normalFields, descriptors),
+        fieldGroups: sortGroupFields(groupFields, descriptors, descriptorFields),
+        arrayFieldGroups: getArrayFields(arrayFields, descriptorFields),
+        advancedFields: sortFields(advancedFields, descriptors),
+        descriptorFields,
+        openApiFields,
+        basicFields,
+        treeFields,
+    };
+}
+function getArrayFields(fields, descriptorFields) {
+    // array fields
+    const groupedArrayFieldsByName = groupBy(fields, field => {
+        const { groupName } = parseGroupDescriptor(field);
+        return groupName;
+    });
+    // Map {groupName: string, fieldLists: OperandField[][]}, where OperandField is a nested array
+    // of the appropriate fields, grouped by index.
+    return map(groupedArrayFieldsByName, (fieldsInGroup, groupName) => ({
+        groupName,
+        displayName: startCase(groupName),
+        capabilities: descriptorFields.find(field => field.path === `spec.${groupName}`)
+            ?.capabilities ?? [],
+        fieldLists: reduce(fieldsInGroup, (fieldListsAccumulator, field) => {
+            const { index, match } = parseArrayPath(field.path);
+            if (match) {
+                fieldListsAccumulator[index] = [
+                    ...(fieldListsAccumulator[index] || []),
+                    field,
+                ];
+            }
+            return fieldListsAccumulator;
+        }, []),
+        _dirty: false,
+    }));
+}
+function sortFields(fields, descriptors) {
+    return sortBy(fields, field => descriptors.findIndex(d => normalizePath(d.path) === normalizePath(field.path)));
+}
+function sortGroupFields(fields, descriptors, descriptorFields) {
+    const groupedFieldsByName = groupBy(sortFields(fields, descriptors), field => {
+        const { groupName } = parseGroupDescriptor(field);
+        return groupName;
+    });
+    return map(groupedFieldsByName, (fieldList, groupName) => ({
+        groupName,
+        displayName: startCase(groupName),
+        capabilities: descriptorFields.find(field => field.path === `spec.${groupName}`)
+            ?.capabilities ?? [],
+        fieldList,
+    }));
+}
+
+class BaseOperandFiledArrayComponent {
+    constructor() {
+        this.readonly = false;
+        this.valueChange = new EventEmitter();
+        this.itemRemove = new EventEmitter();
+        this.getFieldDisplayName = getFieldDisplayName;
+        this.crdForm = inject(CRD_FORM_CONTEXT);
+    }
+    get expanded() {
+        return this._expanded ?? !isFolded(this.arrayFieldGroup);
+    }
+    set expanded(expanded) {
+        this._expanded = expanded;
+    }
+    ngOnChanges({ arrayFieldGroup, formDataState }) {
+        if (!this.basicArrayFieldTemplate &&
+            arrayFieldGroup.currentValue?.fieldLists?.length > 0) {
+            this.basicArrayFieldTemplate = last(arrayFieldGroup.currentValue.fieldLists);
+        }
+        if (formDataState?.currentValue && formDataState?.previousValue) {
+            const currValue = getFormData(formDataState.currentValue, this.arrayFieldGroup.path);
+            const arrayFieldLength = this.arrayFieldGroup.fieldLists?.length;
+            if (currValue?.size > arrayFieldLength) {
+                Array.from({ length: currValue.size - arrayFieldLength }).forEach(() => {
+                    this.addItem();
+                });
+            }
+        }
+    }
+    fieldValueChange(e) {
+        this.valueChange.emit(e);
+    }
+    addItem() {
+        const newFields = this.basicArrayFieldTemplate.map(field => {
+            const toPath = modifyArrayFieldPathIndex(field.path, () => this.arrayFieldGroup.fieldLists.length);
+            return {
+                ...repairFieldChildPathByCorrectIndex(field, field.path, toPath),
+            };
+        });
+        this.arrayFieldGroup.fieldLists = [
+            ...this.arrayFieldGroup.fieldLists,
+            newFields,
+        ];
+    }
+    removeItem(index) {
+        const groupToRemove = this.arrayFieldGroup.fieldLists[index];
+        const groupUntouched = this.arrayFieldGroup.fieldLists.filter((_, idx) => idx < index);
+        const groupToLeftShift = this.arrayFieldGroup.fieldLists.filter((_, idx) => idx > index);
+        const leftShiftedGroups = groupToLeftShift.map(group => group.map(field => {
+            const toPath = modifyArrayFieldPathIndex(field.path, idx => idx - 1);
+            return {
+                ...repairFieldChildPathByCorrectIndex(field, field.path, toPath),
+            };
+        }));
+        this.arrayFieldGroup.fieldLists = [...groupUntouched, ...leftShiftedGroups];
+        const [match, formDataPathToRemove] = /^(.*\[\d+]).*$/.exec(groupToRemove?.[0].path) || [];
+        if (match) {
+            this.itemRemove.next(formDataPathToRemove);
+        }
+        this.crdForm.controlMap.forEach((_, key) => {
+            if (key.startsWith(`${this.arrayFieldGroup.path}[${this.arrayFieldGroup.fieldLists.length}]`)) {
+                this.crdForm.controlMap.delete(key);
+            }
+        });
+        this.crdForm.refreshValidation();
+        this.deleteFormData(`${this.arrayFieldGroup.path}[${index}]`);
+    }
+    deleteFormData(path) {
+        this.valueChange.next({
+            field: {
+                ...this.arrayFieldGroup,
+                path,
+            },
+            data: null,
+        });
+    }
+    fieldIsRequired(field) {
+        return (field?.required ||
+            Object.keys(field?.validations || {})?.includes(Validations.required));
+    }
+    get columnFields() {
+        return this.basicArrayFieldTemplate;
+    }
+    trackByFn(index) {
+        return index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseOperandFiledArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: BaseOperandFiledArrayComponent, isStandalone: true, inputs: { arrayFieldGroup: "arrayFieldGroup", formDataState: "formDataState", formErrors: "formErrors", isArrayTable: "isArrayTable", readonly: "readonly", fields: "fields" }, outputs: { valueChange: "valueChange", itemRemove: "itemRemove" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseOperandFiledArrayComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { arrayFieldGroup: [{
+                type: Input
+            }], formDataState: [{
+                type: Input
+            }], formErrors: [{
+                type: Input
+            }], isArrayTable: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], itemRemove: [{
+                type: Output
+            }] } });
+
+const EXPRESSION_PROPS_PREFIX = `${SpecCapability.expression}props.`;
+const EXPRESSION_PROPS_OPTIONS_PREFIX = `${EXPRESSION_PROPS_PREFIX}options:`;
+const EXPRESSION_PROPS_DEFAULT_PREFIX = `${EXPRESSION_PROPS_PREFIX}default:`;
+const EXPRESSION_PROPS_HIDDEN_PREFIX = `${EXPRESSION_PROPS_PREFIX}hidden:`;
+const EXPRESSION_PROPS_ALLOW_CREATE_PREFIX = `${EXPRESSION_PROPS_PREFIX}allowCreate:`;
+class PropsFieldExpression {
+    constructor(field) {
+        this.expressions = this.evaluatePropsExpressions(field);
+    }
+    evaluatePropsExpressions(field) {
+        return {
+            options: this.evaluateOptionsExpression(field),
+            default: this.evaluateCommonPropsExpression(field, EXPRESSION_PROPS_DEFAULT_PREFIX),
+            hidden: this.evaluateCommonPropsExpression(field, EXPRESSION_PROPS_HIDDEN_PREFIX),
+            subscribedContextPaths: this.evaluateSubscribedContextPaths(field),
+            subscribedFormDataPaths: this.evaluateSubscribedFormDataPaths(field),
+        };
+    }
+    evaluateOptionsExpression(field) {
+        const propsVisible = field.capabilities.some(c => c.startsWith(EXPRESSION_PROPS_OPTIONS_PREFIX));
+        return propsVisible
+            ? {
+                api: getMatchedCapabilityValue(field.capabilities, `${EXPRESSION_PROPS_OPTIONS_PREFIX}api:`),
+                labelPath: getMatchedCapabilityValue(field.capabilities, `${EXPRESSION_PROPS_OPTIONS_PREFIX}label:path:`),
+                valuePath: getMatchedCapabilityValue(field.capabilities, `${EXPRESSION_PROPS_OPTIONS_PREFIX}value:path:`),
+                expression: getMatchedCapabilityValue(field.capabilities, `${EXPRESSION_PROPS_OPTIONS_PREFIX}`),
+            }
+            : null;
+    }
+    evaluateCommonPropsExpression(field, prefix) {
+        return getMatchedCapabilityValue(field.capabilities, prefix);
+    }
+    evaluateSubscribedContextPaths(field) {
+        return field.capabilities.reduce((p, c) => {
+            const matched = c.match(/(?<=\${context.)[^\t\n\v\f\r{}]+(?=})/g) || [];
+            return [...p, ...matched];
+        }, []);
+    }
+    evaluateSubscribedFormDataPaths(field) {
+        return field.capabilities.reduce((p, c) => {
+            const matched = c.match(/(?<=\${formData.)[^\t\n\v\f\r{}]+(?=})/g) || [];
+            return [...p, ...matched];
+        }, []);
+    }
+}
+const compareWithSubscribedPaths = (dynamicExpression, prev, next) => {
+    const [prevFormContext, prevFormDataState] = prev;
+    const [nextFormContext, nextFormDataState] = next;
+    return (!dynamicExpression.subscribedContextPaths.some(path => !isEqual(get(prevFormContext, path), get(nextFormContext, path))) &&
+        !dynamicExpression.subscribedFormDataPaths.some(path => !isEqual(getFormData(prevFormDataState, path), getFormData(nextFormDataState, path))));
+};
+
+class FormItemComponent {
+    constructor() {
+        this.getFieldTooltip = getFieldTooltip;
+        this.getFieldDescription = getFieldDescription$1;
+        this.getFieldDocLink = getFieldDocLink;
+        this.isFieldDescriptionAsLink = isFieldDescriptionAsLink;
+        this.fieldComponent = inject(forwardRef(() => OperandFieldComponent));
+        this.cdr = inject(ChangeDetectorRef);
+        // FIXME: 部分页面需要调用 markForCheck 才行， 需要确认为啥使用了 ChangeDetectionStrategy.Default 数据变更之后视图依旧不同步更新
+        this.fieldComponent.crdForm.form.ngSubmit.subscribe(() => this.cdr.markForCheck());
+    }
+    showFieldCopyable(field, isDisabled) {
+        return isFieldCopyable(field) && isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormItemComponent, isStandalone: true, selector: "acl-crd-form-item", inputs: { plain: "plain" }, ngImport: i0, template: "@if (\n  {\n    label: fieldComponent.field | pure: fieldComponent.getFieldDisplayName,\n  };\n  as _\n) {\n  <aui-form-item\n    [emptyAddon]=\"false\"\n    [plain]=\"plain\"\n    [attr.data-test]=\"_.label ? 'AUI-FORM-ITEM/' + (_.label | translate) : null\"\n    width=\"large\"\n  >\n    @if (_.label) {\n      <label auiFormItemLabel>{{ _.label | translate }}</label>\n    }\n    <!-- for a required mark in aui-form-item label -->\n    @if (!fieldComponent.isDisabled) {\n      <ng-container\n        auiFormItemControl\n        [required]=\"fieldComponent.isRequired\"\n      ></ng-container>\n    }\n    <ng-content></ng-content>\n    @if (!fieldComponent.isDisabled) {\n      <div auiFormItemHint>\n        @if (\n          (fieldComponent.crdForm.form.submitted ||\n            fieldComponent.control.dirty) &&\n          fieldComponent.control.invalid &&\n          !fieldComponent.isCustomErrorsMapper\n        ) {\n          <acl-errors-mapper [errors]=\"fieldComponent.control.errors\">\n          </acl-errors-mapper>\n        }\n        <div>\n          @if (!(fieldComponent.field | pure: isFieldDescriptionAsLink)) {\n            {{ fieldComponent.field | pure: getFieldDescription | translate }}\n          }\n          @if (fieldComponent.field | pure: getFieldDocLink; as link) {\n            <a\n              href=\"javascript:;\"\n              [aclHelpDoc]=\"link\"\n              aclHelpDocTarget=\"blank\"\n            >\n              @if (fieldComponent.field | pure: isFieldDescriptionAsLink) {\n                {{\n                  fieldComponent.field | pure: getFieldDescription | translate\n                }}\n              }\n              <aui-icon icon=\"jump\"></aui-icon>\n            </a>\n          }\n        </div>\n      </div>\n    }\n    @if (\n      (fieldComponent.field | pure: getFieldTooltip) ||\n      (fieldComponent.field\n        | pure: showFieldCopyable : fieldComponent.isDisabled)\n    ) {\n      <div auiFormItemAddon>\n        @if (\n          fieldComponent.field\n            | pure: showFieldCopyable : fieldComponent.isDisabled\n        ) {\n          <aui-icon\n            icon=\"copy\"\n            [auiTooltipCopy]=\"fieldComponent.control.value\"\n          ></aui-icon>\n        }\n        @if (fieldComponent.field | pure: getFieldTooltip; as tooltip) {\n          <aui-icon\n            icon=\"question_circle\"\n            [class]=\"\n              (fieldComponent.field\n              | pure: showFieldCopyable : fieldComponent.isDisabled)\n                ? 'tw-ml-8'\n                : ''\n            \"\n            [auiTooltip]=\"tooltipTmp\"\n          ></aui-icon>\n          <ng-template #tooltipTmp>\n            <span style=\"white-space: pre-line\">\n              {{ tooltip | translate }}</span\n            >\n          </ng-template>\n        }\n      </div>\n    }\n  </aui-form-item>\n}\n", styles: [":host::ng-deep label{word-break:break-word}aui-form-item ::ng-deep .aui-form-item__content--large aui-switch.aui-form-item__control{flex:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "component", type: i2.FormItemComponent, selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i2.FormItemAddonDirective, selector: "[auiFormItemAddon]" }, { kind: "directive", type: i2.FormItemHintDirective, selector: "[auiFormItemHint]" }, { kind: "directive", type: i2.FormItemLabelDirective, selector: "label[auiFormItemLabel]" }, { kind: "directive", type: i2.FormItemControlDirective, selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "directive", type: i2.TooltipCopyDirective, selector: "[auiTooltipCopy]", inputs: ["auiTooltipPosition", "auiTooltipDisabled", "auiTooltipCopy", "auiTooltipCopyTip", "auiTooltipCopySuccessTip", "auiTooltipCopyFailTip"] }, { kind: "component", type: ErrorsMapperComponent, selector: "acl-errors-mapper", inputs: ["errors", "errorsMapper", "errorsMapperFn", "controlName", "ignoreUnknownError"] }, { kind: "directive", type: HelpDocDirective, selector: "[aclHelpDoc]", inputs: ["aclHelpDoc", "aclHelpDocTarget"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-crd-form-item', changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [
+                        PurePipe,
+                        TranslatePipe,
+                        FormModule,
+                        IconModule,
+                        TooltipModule,
+                        ErrorsMapperComponent,
+                        HelpDocDirective,
+                    ], template: "@if (\n  {\n    label: fieldComponent.field | pure: fieldComponent.getFieldDisplayName,\n  };\n  as _\n) {\n  <aui-form-item\n    [emptyAddon]=\"false\"\n    [plain]=\"plain\"\n    [attr.data-test]=\"_.label ? 'AUI-FORM-ITEM/' + (_.label | translate) : null\"\n    width=\"large\"\n  >\n    @if (_.label) {\n      <label auiFormItemLabel>{{ _.label | translate }}</label>\n    }\n    <!-- for a required mark in aui-form-item label -->\n    @if (!fieldComponent.isDisabled) {\n      <ng-container\n        auiFormItemControl\n        [required]=\"fieldComponent.isRequired\"\n      ></ng-container>\n    }\n    <ng-content></ng-content>\n    @if (!fieldComponent.isDisabled) {\n      <div auiFormItemHint>\n        @if (\n          (fieldComponent.crdForm.form.submitted ||\n            fieldComponent.control.dirty) &&\n          fieldComponent.control.invalid &&\n          !fieldComponent.isCustomErrorsMapper\n        ) {\n          <acl-errors-mapper [errors]=\"fieldComponent.control.errors\">\n          </acl-errors-mapper>\n        }\n        <div>\n          @if (!(fieldComponent.field | pure: isFieldDescriptionAsLink)) {\n            {{ fieldComponent.field | pure: getFieldDescription | translate }}\n          }\n          @if (fieldComponent.field | pure: getFieldDocLink; as link) {\n            <a\n              href=\"javascript:;\"\n              [aclHelpDoc]=\"link\"\n              aclHelpDocTarget=\"blank\"\n            >\n              @if (fieldComponent.field | pure: isFieldDescriptionAsLink) {\n                {{\n                  fieldComponent.field | pure: getFieldDescription | translate\n                }}\n              }\n              <aui-icon icon=\"jump\"></aui-icon>\n            </a>\n          }\n        </div>\n      </div>\n    }\n    @if (\n      (fieldComponent.field | pure: getFieldTooltip) ||\n      (fieldComponent.field\n        | pure: showFieldCopyable : fieldComponent.isDisabled)\n    ) {\n      <div auiFormItemAddon>\n        @if (\n          fieldComponent.field\n            | pure: showFieldCopyable : fieldComponent.isDisabled\n        ) {\n          <aui-icon\n            icon=\"copy\"\n            [auiTooltipCopy]=\"fieldComponent.control.value\"\n          ></aui-icon>\n        }\n        @if (fieldComponent.field | pure: getFieldTooltip; as tooltip) {\n          <aui-icon\n            icon=\"question_circle\"\n            [class]=\"\n              (fieldComponent.field\n              | pure: showFieldCopyable : fieldComponent.isDisabled)\n                ? 'tw-ml-8'\n                : ''\n            \"\n            [auiTooltip]=\"tooltipTmp\"\n          ></aui-icon>\n          <ng-template #tooltipTmp>\n            <span style=\"white-space: pre-line\">\n              {{ tooltip | translate }}</span\n            >\n          </ng-template>\n        }\n      </div>\n    }\n  </aui-form-item>\n}\n", styles: [":host::ng-deep label{word-break:break-word}aui-form-item ::ng-deep .aui-form-item__content--large aui-switch.aui-form-item__control{flex:unset}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { plain: [{
+                type: Input
+            }] } });
+
+class OperandArrayFieldGroupComponent extends BaseOperandFiledArrayComponent {
+    ngOnInit() {
+        // 如果 arrayFieldGroup 配置了 urn:alm:descriptor:com.tectonic.ui:emptyArray 并且没有 value 值，则不保留首项
+        if (!get(this.arrayFieldGroup.value, 'length') &&
+            isEmptyArray(this.arrayFieldGroup)) {
+            this.removeItem(0);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OperandArrayFieldGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OperandArrayFieldGroupComponent, isStandalone: true, selector: "acl-operand-array-field-group", usesInheritance: true, ngImport: i0, template: "<div\n  [class.expanded]=\"expanded\"\n  class=\"field-group\"\n>\n  <div class=\"header\">\n    <div\n      class=\"title\"\n      (click)=\"expanded = !expanded\"\n    >\n      @if (!expanded) {\n        <aui-icon\n          size=\"20px,20px\"\n          icon=\"caret_down_s\"\n        ></aui-icon>\n      }\n      @if (expanded) {\n        <aui-icon\n          size=\"20px,20px\"\n          icon=\"caret_down_s\"\n        ></aui-icon>\n      }\n      <span>{{ arrayFieldGroup | pure: getFieldDisplayName | translate }}</span>\n    </div>\n    <div class=\"description\"></div>\n  </div>\n  <div\n    class=\"content\"\n    [hidden]=\"!expanded\"\n  >\n    @for (list of arrayFieldGroup.fieldLists; track list; let i = $index) {\n      <div class=\"array-item\">\n        @if (!readonly) {\n          <div class=\"array-item__remove\">\n            <button\n              aui-button=\"text\"\n              size=\"small\"\n              (click)=\"removeItem(i)\"\n            >\n              <aui-icon icon=\"minus_circle\"></aui-icon>\n              <span>{{ 'remove' | translate }}</span>\n            </button>\n          </div>\n        }\n        @for (field of list; track field) {\n          <div>\n            <acl-operand-field\n              [field]=\"field\"\n              [fields]=\"fields\"\n              [formDataState]=\"formDataState\"\n              [formErrors]=\"formErrors\"\n              [readonly]=\"readonly\"\n              (valueChange)=\"fieldValueChange($event)\"\n            >\n            </acl-operand-field>\n          </div>\n        }\n      </div>\n    }\n    @if (!readonly) {\n      <div class=\"array-item__add\">\n        <button\n          aui-button=\"text\"\n          size=\"small\"\n          (click)=\"addItem()\"\n        >\n          <aui-icon icon=\"plus_circle\"></aui-icon>\n          <span\n            >{{ 'add' | translate }}\n            {{ arrayFieldGroup | pure: getFieldDisplayName | translate }}</span\n          >\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".field-group{border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-10));position:relative;margin-bottom:16px;border-radius:2px}.field-group .title{padding:0 20px;font-size:14px;font-weight:500;display:flex;align-items:center;height:60px;line-height:20px;color:rgb(var(--aui-color-n-1));cursor:pointer}.field-group .title aui-icon{margin-right:20px;font-size:20px}.field-group .description{display:block;padding-left:22px;font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.field-group:not(.expanded) aui-icon[icon=caret_down_s]{transform:rotate(-90deg)}.field-group.expanded>.header>.title{border-bottom:1px solid rgb(var(--aui-color-n-8))}.field-group.expanded>.header>.description{display:block;margin-top:4px}.field-group .content{padding:8px 12px}.field-group .content.no-title{padding-top:0}.field-group .array-item__remove{display:flex;justify-content:flex-end;margin-bottom:4px}.field-group .array-item__add,.field-group .array-item__remove{text-align:center}.field-group .array-item__add aui-icon,.field-group .array-item__remove aui-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => IconModule) }, { kind: "component", type: i0.forwardRef(() => i2.IconComponent), selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: i0.forwardRef(() => ButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2.ButtonComponent), selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "component", type: i0.forwardRef(() => OperandFieldComponent), selector: "acl-operand-field", inputs: ["field", "readonly", "fields", "formDataState", "formErrors"], outputs: ["valueChange", "itemRemove"] }, { kind: "pipe", type: i0.forwardRef(() => PurePipe), name: "pure" }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OperandArrayFieldGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-operand-array-field-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        PurePipe,
+                        TranslatePipe,
+                        IconModule,
+                        ButtonModule,
+                        forwardRef(() => OperandFieldComponent),
+                    ], template: "<div\n  [class.expanded]=\"expanded\"\n  class=\"field-group\"\n>\n  <div class=\"header\">\n    <div\n      class=\"title\"\n      (click)=\"expanded = !expanded\"\n    >\n      @if (!expanded) {\n        <aui-icon\n          size=\"20px,20px\"\n          icon=\"caret_down_s\"\n        ></aui-icon>\n      }\n      @if (expanded) {\n        <aui-icon\n          size=\"20px,20px\"\n          icon=\"caret_down_s\"\n        ></aui-icon>\n      }\n      <span>{{ arrayFieldGroup | pure: getFieldDisplayName | translate }}</span>\n    </div>\n    <div class=\"description\"></div>\n  </div>\n  <div\n    class=\"content\"\n    [hidden]=\"!expanded\"\n  >\n    @for (list of arrayFieldGroup.fieldLists; track list; let i = $index) {\n      <div class=\"array-item\">\n        @if (!readonly) {\n          <div class=\"array-item__remove\">\n            <button\n              aui-button=\"text\"\n              size=\"small\"\n              (click)=\"removeItem(i)\"\n            >\n              <aui-icon icon=\"minus_circle\"></aui-icon>\n              <span>{{ 'remove' | translate }}</span>\n            </button>\n          </div>\n        }\n        @for (field of list; track field) {\n          <div>\n            <acl-operand-field\n              [field]=\"field\"\n              [fields]=\"fields\"\n              [formDataState]=\"formDataState\"\n              [formErrors]=\"formErrors\"\n              [readonly]=\"readonly\"\n              (valueChange)=\"fieldValueChange($event)\"\n            >\n            </acl-operand-field>\n          </div>\n        }\n      </div>\n    }\n    @if (!readonly) {\n      <div class=\"array-item__add\">\n        <button\n          aui-button=\"text\"\n          size=\"small\"\n          (click)=\"addItem()\"\n        >\n          <aui-icon icon=\"plus_circle\"></aui-icon>\n          <span\n            >{{ 'add' | translate }}\n            {{ arrayFieldGroup | pure: getFieldDisplayName | translate }}</span\n          >\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".field-group{border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-10));position:relative;margin-bottom:16px;border-radius:2px}.field-group .title{padding:0 20px;font-size:14px;font-weight:500;display:flex;align-items:center;height:60px;line-height:20px;color:rgb(var(--aui-color-n-1));cursor:pointer}.field-group .title aui-icon{margin-right:20px;font-size:20px}.field-group .description{display:block;padding-left:22px;font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.field-group:not(.expanded) aui-icon[icon=caret_down_s]{transform:rotate(-90deg)}.field-group.expanded>.header>.title{border-bottom:1px solid rgb(var(--aui-color-n-8))}.field-group.expanded>.header>.description{display:block;margin-top:4px}.field-group .content{padding:8px 12px}.field-group .content.no-title{padding-top:0}.field-group .array-item__remove{display:flex;justify-content:flex-end;margin-bottom:4px}.field-group .array-item__add,.field-group .array-item__remove{text-align:center}.field-group .array-item__add aui-icon,.field-group .array-item__remove aui-icon{margin-right:4px}\n"] }]
+        }] });
+
+class OperandFieldGroupComponent {
+    constructor() {
+        this.readonly = false;
+        this.valueChange = new EventEmitter();
+    }
+    get expanded() {
+        return this._expanded ?? !isFolded(this.fieldGroup);
+    }
+    set expanded(expanded) {
+        this._expanded = expanded;
+    }
+    fieldValueChange(e) {
+        this.valueChange.emit(e);
+    }
+    getGroupName(field) {
+        return getFieldDisplayName(field) || field.groupName;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OperandFieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OperandFieldGroupComponent, isStandalone: true, selector: "acl-operand-field-group", inputs: { fields: "fields", fieldGroup: "fieldGroup", formDataState: "formDataState", formErrors: "formErrors", readonly: "readonly" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  class=\"field-group\"\n  [class.expanded]=\"expanded\"\n>\n  <div class=\"header\">\n    <div\n      class=\"title\"\n      (click)=\"expanded = !expanded\"\n    >\n      @if (!expanded) {\n        <aui-icon icon=\"caret_down_s\"></aui-icon>\n      }\n      @if (expanded) {\n        <aui-icon icon=\"caret_down_s\"></aui-icon>\n      }\n      <span>{{ fieldGroup | pure: getGroupName | translate }}</span>\n    </div>\n  </div>\n  <div\n    class=\"content\"\n    [hidden]=\"!expanded\"\n  >\n    @for (field of fieldGroup.fieldList; track field) {\n      <acl-operand-field\n        [field]=\"$any(field)\"\n        [fields]=\"fields\"\n        [readonly]=\"readonly\"\n        [formDataState]=\"formDataState\"\n        [formErrors]=\"formErrors\"\n        (valueChange)=\"fieldValueChange($event)\"\n      >\n      </acl-operand-field>\n    }\n  </div>\n</div>\n", styles: [".field-group{border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-10));position:relative;margin-bottom:16px;border-radius:2px}.field-group .title{padding:0 20px;font-size:14px;font-weight:500;display:flex;align-items:center;height:60px;line-height:20px;color:rgb(var(--aui-color-n-1));cursor:pointer}.field-group .title aui-icon{margin-right:20px;font-size:20px}.field-group .description{display:block;padding-left:22px;font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.field-group:not(.expanded) aui-icon[icon=caret_down_s]{transform:rotate(-90deg)}.field-group.expanded>.header>.title{border-bottom:1px solid rgb(var(--aui-color-n-8))}.field-group.expanded>.header>.description{display:block;margin-top:4px}.field-group .content{padding:8px 12px}.field-group .content.no-title{padding-top:0}.field-group .array-item__remove{display:flex;justify-content:flex-end;margin-bottom:4px}.field-group .array-item__add,.field-group .array-item__remove{text-align:center}.field-group .array-item__add aui-icon,.field-group .array-item__remove aui-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => IconModule) }, { kind: "component", type: i0.forwardRef(() => i2.IconComponent), selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: i0.forwardRef(() => OperandFieldComponent), selector: "acl-operand-field", inputs: ["field", "readonly", "fields", "formDataState", "formErrors"], outputs: ["valueChange", "itemRemove"] }, { kind: "pipe", type: i0.forwardRef(() => PurePipe), name: "pure" }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OperandFieldGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-operand-field-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        PurePipe,
+                        TranslatePipe,
+                        IconModule,
+                        forwardRef(() => OperandFieldComponent),
+                    ], template: "<div\n  class=\"field-group\"\n  [class.expanded]=\"expanded\"\n>\n  <div class=\"header\">\n    <div\n      class=\"title\"\n      (click)=\"expanded = !expanded\"\n    >\n      @if (!expanded) {\n        <aui-icon icon=\"caret_down_s\"></aui-icon>\n      }\n      @if (expanded) {\n        <aui-icon icon=\"caret_down_s\"></aui-icon>\n      }\n      <span>{{ fieldGroup | pure: getGroupName | translate }}</span>\n    </div>\n  </div>\n  <div\n    class=\"content\"\n    [hidden]=\"!expanded\"\n  >\n    @for (field of fieldGroup.fieldList; track field) {\n      <acl-operand-field\n        [field]=\"$any(field)\"\n        [fields]=\"fields\"\n        [readonly]=\"readonly\"\n        [formDataState]=\"formDataState\"\n        [formErrors]=\"formErrors\"\n        (valueChange)=\"fieldValueChange($event)\"\n      >\n      </acl-operand-field>\n    }\n  </div>\n</div>\n", styles: [".field-group{border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-10));position:relative;margin-bottom:16px;border-radius:2px}.field-group .title{padding:0 20px;font-size:14px;font-weight:500;display:flex;align-items:center;height:60px;line-height:20px;color:rgb(var(--aui-color-n-1));cursor:pointer}.field-group .title aui-icon{margin-right:20px;font-size:20px}.field-group .description{display:block;padding-left:22px;font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.field-group:not(.expanded) aui-icon[icon=caret_down_s]{transform:rotate(-90deg)}.field-group.expanded>.header>.title{border-bottom:1px solid rgb(var(--aui-color-n-8))}.field-group.expanded>.header>.description{display:block;margin-top:4px}.field-group .content{padding:8px 12px}.field-group .content.no-title{padding-top:0}.field-group .array-item__remove{display:flex;justify-content:flex-end;margin-bottom:4px}.field-group .array-item__add,.field-group .array-item__remove{text-align:center}.field-group .array-item__add aui-icon,.field-group .array-item__remove aui-icon{margin-right:4px}\n"] }]
+        }], propDecorators: { fields: [{
+                type: Input
+            }], fieldGroup: [{
+                type: Input
+            }], formDataState: [{
+                type: Input
+            }], formErrors: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class CrdFormArrayTableComponent extends BaseOperandFiledArrayComponent {
+    ngOnInit() {
+        // arrayField group 不需要默认保留一项
+        if (!get(this.arrayFieldGroup.value, 'length')) {
+            this.removeItem(0);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CrdFormArrayTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CrdFormArrayTableComponent, isStandalone: true, selector: "acl-crd-array-table", usesInheritance: true, ngImport: i0, template: "<aui-form-item [emptyAddon]=\"false\">\n  <label auiFormItemLabel>{{\n    arrayFieldGroup | pure: getFieldDisplayName | translate\n  }}</label>\n\n  <acl-array-form-table\n    style=\"flex: 1\"\n    (remove)=\"removeItem($event)\"\n    (add)=\"addItem()\"\n    [rows]=\"arrayFieldGroup.fieldLists\"\n    [readonly]=\"readonly\"\n    class=\"form-table__flex-layout\"\n    [resourceNameTranslated]=\"\n      arrayFieldGroup | pure: getFieldDisplayName | translate\n    \"\n  >\n    <ng-container *aclArrayFormTableHeader>\n      @for (field of basicArrayFieldTemplate; track field) {\n        @if (field | pure: fieldIsRequired) {\n          <th required>\n            {{ field | pure: getFieldDisplayName | translate }}\n          </th>\n        } @else {\n          <th>{{ field | pure: getFieldDisplayName | translate }}</th>\n        }\n      }\n    </ng-container>\n\n    <!-- Input row -->\n    <ng-container *aclArrayFormTableRow=\"let fieldList; let index = index\">\n      @for (field of fieldList; track trackByFn(index); let index = $index) {\n        <td>\n          <acl-operand-field\n            [field]=\"field\"\n            [formDataState]=\"formDataState\"\n            [formErrors]=\"formErrors\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"fieldValueChange($event)\"\n          >\n          </acl-operand-field>\n        </td>\n      }\n    </ng-container>\n  </acl-array-form-table>\n</aui-form-item>\n", styles: [":host{flex:1}:host ::ng-deep acl-array-form-table .acl-array-form-table__readonly-mode tbody tr{height:auto}:host ::ng-deep acl-array-form-table .aui-form-item{margin-bottom:0}:host ::ng-deep acl-array-form-table .aui-form-item .aui-form-item__label-wrapper{display:none}:host ::ng-deep acl-array-form-table .aui-form-item .aui-form-item__content{min-height:auto}:host ::ng-deep acl-array-form-table .aui-form-item .aui-form-item__content .aui-form-item__control{max-width:100%}:host ::ng-deep acl-array-form-table .acl-array-form-table tbody td{vertical-align:top}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => FormModule) }, { kind: "component", type: i0.forwardRef(() => i2.FormItemComponent), selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormItemLabelDirective), selector: "label[auiFormItemLabel]" }, { kind: "component", type: i0.forwardRef(() => i2$1.ArrayFormTableComponent), selector: "acl-array-form-table", inputs: ["rowSeparator", "rows", "resourceName", "resourceNameTranslated", "readonly", "addDisabled", "actionColumnDivider", "showZeroState", "showRowError", "rowBackgroundColorFn", "minRow", "minRowTooltip", "maxRow", "maxRowTooltip"], outputs: ["add", "remove"] }, { kind: "directive", type: i0.forwardRef(() => i2$1.ArrayFormTableHeaderDirective), selector: "[aclArrayFormTableHeader]" }, { kind: "directive", type: i0.forwardRef(() => i2$1.ArrayFormTableRowDirective), selector: "[aclArrayFormTableRow]" }, { kind: "component", type: i0.forwardRef(() => OperandFieldComponent), selector: "acl-operand-field", inputs: ["field", "readonly", "fields", "formDataState", "formErrors"], outputs: ["valueChange", "itemRemove"] }, { kind: "pipe", type: i0.forwardRef(() => PurePipe), name: "pure" }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CrdFormArrayTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-crd-array-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormModule,
+                        ARRAY_FORM_TABLE_MODULE,
+                        forwardRef(() => OperandFieldComponent),
+                        PurePipe,
+                        TranslatePipe,
+                    ], template: "<aui-form-item [emptyAddon]=\"false\">\n  <label auiFormItemLabel>{{\n    arrayFieldGroup | pure: getFieldDisplayName | translate\n  }}</label>\n\n  <acl-array-form-table\n    style=\"flex: 1\"\n    (remove)=\"removeItem($event)\"\n    (add)=\"addItem()\"\n    [rows]=\"arrayFieldGroup.fieldLists\"\n    [readonly]=\"readonly\"\n    class=\"form-table__flex-layout\"\n    [resourceNameTranslated]=\"\n      arrayFieldGroup | pure: getFieldDisplayName | translate\n    \"\n  >\n    <ng-container *aclArrayFormTableHeader>\n      @for (field of basicArrayFieldTemplate; track field) {\n        @if (field | pure: fieldIsRequired) {\n          <th required>\n            {{ field | pure: getFieldDisplayName | translate }}\n          </th>\n        } @else {\n          <th>{{ field | pure: getFieldDisplayName | translate }}</th>\n        }\n      }\n    </ng-container>\n\n    <!-- Input row -->\n    <ng-container *aclArrayFormTableRow=\"let fieldList; let index = index\">\n      @for (field of fieldList; track trackByFn(index); let index = $index) {\n        <td>\n          <acl-operand-field\n            [field]=\"field\"\n            [formDataState]=\"formDataState\"\n            [formErrors]=\"formErrors\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"fieldValueChange($event)\"\n          >\n          </acl-operand-field>\n        </td>\n      }\n    </ng-container>\n  </acl-array-form-table>\n</aui-form-item>\n", styles: [":host{flex:1}:host ::ng-deep acl-array-form-table .acl-array-form-table__readonly-mode tbody tr{height:auto}:host ::ng-deep acl-array-form-table .aui-form-item{margin-bottom:0}:host ::ng-deep acl-array-form-table .aui-form-item .aui-form-item__label-wrapper{display:none}:host ::ng-deep acl-array-form-table .aui-form-item .aui-form-item__content{min-height:auto}:host ::ng-deep acl-array-form-table .aui-form-item .aui-form-item__content .aui-form-item__control{max-width:100%}:host ::ng-deep acl-array-form-table .acl-array-form-table tbody td{vertical-align:top}\n"] }]
+        }] });
+
+class BasicAuthCreateSecretDialogComponent {
+    constructor() {
+        this.dialogData = inject(DIALOG_DATA);
+        this.dialogRef = inject(DialogRef);
+        this.fb = inject(FormBuilder);
+        this.k8sApi = inject(K8sApiService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.message = inject(MessageService);
+        this.translate = inject(TranslateService);
+        this.submitting = false;
+        this.K8S_RESOURCE_NAME_BASE = K8S_RESOURCE_NAME_BASE;
+        this.usernameKey = this.dialogData.config?.usernameKey ?? 'username';
+        this.passwordKey = this.dialogData.config?.passwordKey ?? 'password';
+        this.usernameReadonly = !!this.dialogData.config?.usernameReadonly;
+        this.strongPassword = !!this.dialogData.config?.strongPassword;
+        this.password = !!this.dialogData.config?.password;
+        this.showPassword = false;
+        this.formGroup = this.fb.group({
+            name: this.fb.control(this.dialogData.config?.secretName || '', [
+                Validators.required,
+                Validators.pattern(K8S_RESOURCE_NAME_BASE.pattern),
+                Validators.maxLength(63),
+            ]),
+            username: this.fb.control(this.dialogData.config?.usernameDefault || ''),
+            password: this.fb.control('', [Validators.required]),
+        });
+    }
+    confirm() {
+        this.form.onSubmit(null);
+        if (!this.form.valid) {
+            return;
+        }
+        this.submitting = true;
+        const value = this.form.value;
+        const data = {
+            [this.passwordKey]: encode(value.password),
+        };
+        if (value.username) {
+            data[this.usernameKey] = encode(value.username);
+        }
+        const resource = {
+            kind: 'Secret',
+            apiVersion: 'v1',
+            metadata: {
+                name: value.name,
+                namespace: this.dialogData.namespace,
+            },
+            type: SecretType.Opaque,
+            data,
+        };
+        this.k8sApi
+            .postResource({
+            definition: COMMON_RESOURCE_DEFINITIONS.SECRET,
+            cluster: this.dialogData.cluster,
+            namespace: this.dialogData.namespace,
+            resource,
+        })
+            .pipe(finalize(() => {
+            this.submitting = false;
+            this.cdr.markForCheck();
+        }))
+            .subscribe(res => {
+            this.dialogRef.close(res);
+            this.message.success(this.translate.get('create_success'));
+        });
+    }
+    toggleShowPassword() {
+        this.showPassword = !this.showPassword;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BasicAuthCreateSecretDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BasicAuthCreateSecretDialogComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FormGroupDirective, descendants: true, static: true }], ngImport: i0, template: "<aui-dialog-header>\n  {{ 'create_secret' | translate }}\n</aui-dialog-header>\n\n<aui-dialog-content>\n  <form\n    auiForm\n    [formGroup]=\"formGroup\"\n  >\n    <aui-form-item>\n      <label auiFormItemLabel>\n        {{ 'name' | translate }}\n      </label>\n      <input\n        type=\"text\"\n        required\n        aui-input\n        auiFormItemControl\n        formControlName=\"name\"\n      />\n      <acl-errors-mapper\n        auiFormItemError\n        [errors]=\"formGroup.get('name').errors\"\n        [errorsMapper]=\"{\n          pattern: K8S_RESOURCE_NAME_BASE.tip | translate,\n        }\"\n      ></acl-errors-mapper>\n    </aui-form-item>\n    <aui-form-item>\n      <label auiFormItemLabel>{{ 'config' | translate }}</label>\n      <div class=\"form-table__flex-layout tw-flex-1\">\n        <table class=\"acl-array-form-table\">\n          <thead>\n            <tr>\n              <th>{{ 'key' | translate }}</th>\n              <th>{{ 'value' | translate }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>\n                <input\n                  type=\"text\"\n                  required\n                  aui-input\n                  readonly\n                  [ngModel]=\"usernameKey\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                />\n              </td>\n              <td>\n                <input\n                  type=\"text\"\n                  aui-input\n                  auiFormItemControl\n                  formControlName=\"username\"\n                  [readonly]=\"usernameReadonly\"\n                />\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <input\n                  type=\"text\"\n                  required\n                  aui-input\n                  readonly\n                  [ngModel]=\"passwordKey\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                />\n              </td>\n              <td>\n                @if (strongPassword && !password) {\n                  <input\n                    type=\"password\"\n                    required\n                    aui-input\n                    auiFormItemControl\n                    formControlName=\"password\"\n                    aclStrongPassword\n                  />\n                }\n                @if (!strongPassword && !password) {\n                  <input\n                    type=\"text\"\n                    required\n                    aui-input\n                    auiFormItemControl\n                    formControlName=\"password\"\n                  />\n                }\n                @if (password && !strongPassword) {\n                  <aui-input-group\n                    auiFormItemControl\n                    required\n                  >\n                    <input\n                      auiFormItemControl\n                      aui-input\n                      required\n                      formControlName=\"password\"\n                      [type]=\"showPassword ? 'text' : 'password'\"\n                    />\n                    <div\n                      auiInputSuffix\n                      class=\"password__suffix\"\n                      (click)=\"toggleShowPassword()\"\n                    >\n                      <aui-icon\n                        [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n                      ></aui-icon>\n                    </div>\n                  </aui-input-group>\n                }\n\n                @if (formGroup.get('password').dirty || form?.submitted) {\n                  <acl-errors-mapper\n                    auiFormItemError\n                    [errors]=\"formGroup.get('password').errors\"\n                  ></acl-errors-mapper>\n                }\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </aui-form-item>\n  </form>\n</aui-dialog-content>\n\n<aui-dialog-footer>\n  <button\n    aui-button=\"primary\"\n    (click)=\"confirm()\"\n    [loading]=\"submitting\"\n    [disabled]=\"submitting\"\n  >\n    {{ 'create' | translate }}\n  </button>\n  <button\n    aui-button\n    auiDialogClose\n  >\n    {{ 'cancel' | translate }}\n  </button>\n</aui-dialog-footer>\n", styles: [":host::ng-deep .aui-form-item__label-wrapper{width:114px}:host::ng-deep label{word-break:break-all}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2.FormDirective, selector: "form[auiForm]", inputs: ["auiFormLabelWidth", "auiFormLabelPosition", "auiFormEmptyAddon", "auiFormInline"], exportAs: ["auiForm"] }, { kind: "component", type: i2.FormItemComponent, selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i2.FormItemErrorDirective, selector: "[auiFormItemError]" }, { kind: "directive", type: i2.FormItemLabelDirective, selector: "label[auiFormItemLabel]" }, { kind: "directive", type: i2.FormItemControlDirective, selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2.InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "component", type: i2.InputGroupComponent, selector: "aui-input-group" }, { kind: "directive", type: i2.InputSuffixDirective, selector: "[auiInputSuffix]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.DialogHeaderComponent, selector: "aui-dialog-header", inputs: ["divider", "closeable", "result"] }, { kind: "component", type: i2.DialogContentComponent, selector: "aui-dialog-content" }, { kind: "component", type: i2.DialogFooterComponent, selector: "aui-dialog-footer" }, { kind: "directive", type: i2.DialogCloseDirective, selector: "[auiDialogClose]", inputs: ["auiDialogClose"], exportAs: ["auiDialogClose"] }, { kind: "component", type: ErrorsMapperComponent, selector: "acl-errors-mapper", inputs: ["errors", "errorsMapper", "errorsMapperFn", "controlName", "ignoreUnknownError"] }, { kind: "directive", type: StrongPasswordDirective, selector: "input[aclStrongPassword][ngModel],input[aclStrongPassword][formControl],input[aclStrongPassword][formControlName]", inputs: ["aclStrongPassword", "required", "specialChars", "minlength", "maxlength", "notStartsWith"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BasicAuthCreateSecretDialogComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FormModule,
+                        InputModule,
+                        ButtonModule,
+                        IconModule,
+                        DialogModule,
+                        ErrorsMapperComponent,
+                        StrongPasswordDirective,
+                        TranslatePipe,
+                    ], template: "<aui-dialog-header>\n  {{ 'create_secret' | translate }}\n</aui-dialog-header>\n\n<aui-dialog-content>\n  <form\n    auiForm\n    [formGroup]=\"formGroup\"\n  >\n    <aui-form-item>\n      <label auiFormItemLabel>\n        {{ 'name' | translate }}\n      </label>\n      <input\n        type=\"text\"\n        required\n        aui-input\n        auiFormItemControl\n        formControlName=\"name\"\n      />\n      <acl-errors-mapper\n        auiFormItemError\n        [errors]=\"formGroup.get('name').errors\"\n        [errorsMapper]=\"{\n          pattern: K8S_RESOURCE_NAME_BASE.tip | translate,\n        }\"\n      ></acl-errors-mapper>\n    </aui-form-item>\n    <aui-form-item>\n      <label auiFormItemLabel>{{ 'config' | translate }}</label>\n      <div class=\"form-table__flex-layout tw-flex-1\">\n        <table class=\"acl-array-form-table\">\n          <thead>\n            <tr>\n              <th>{{ 'key' | translate }}</th>\n              <th>{{ 'value' | translate }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>\n                <input\n                  type=\"text\"\n                  required\n                  aui-input\n                  readonly\n                  [ngModel]=\"usernameKey\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                />\n              </td>\n              <td>\n                <input\n                  type=\"text\"\n                  aui-input\n                  auiFormItemControl\n                  formControlName=\"username\"\n                  [readonly]=\"usernameReadonly\"\n                />\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <input\n                  type=\"text\"\n                  required\n                  aui-input\n                  readonly\n                  [ngModel]=\"passwordKey\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                />\n              </td>\n              <td>\n                @if (strongPassword && !password) {\n                  <input\n                    type=\"password\"\n                    required\n                    aui-input\n                    auiFormItemControl\n                    formControlName=\"password\"\n                    aclStrongPassword\n                  />\n                }\n                @if (!strongPassword && !password) {\n                  <input\n                    type=\"text\"\n                    required\n                    aui-input\n                    auiFormItemControl\n                    formControlName=\"password\"\n                  />\n                }\n                @if (password && !strongPassword) {\n                  <aui-input-group\n                    auiFormItemControl\n                    required\n                  >\n                    <input\n                      auiFormItemControl\n                      aui-input\n                      required\n                      formControlName=\"password\"\n                      [type]=\"showPassword ? 'text' : 'password'\"\n                    />\n                    <div\n                      auiInputSuffix\n                      class=\"password__suffix\"\n                      (click)=\"toggleShowPassword()\"\n                    >\n                      <aui-icon\n                        [icon]=\"showPassword ? 'eye_s' : 'eye_slash_s'\"\n                      ></aui-icon>\n                    </div>\n                  </aui-input-group>\n                }\n\n                @if (formGroup.get('password').dirty || form?.submitted) {\n                  <acl-errors-mapper\n                    auiFormItemError\n                    [errors]=\"formGroup.get('password').errors\"\n                  ></acl-errors-mapper>\n                }\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </aui-form-item>\n  </form>\n</aui-dialog-content>\n\n<aui-dialog-footer>\n  <button\n    aui-button=\"primary\"\n    (click)=\"confirm()\"\n    [loading]=\"submitting\"\n    [disabled]=\"submitting\"\n  >\n    {{ 'create' | translate }}\n  </button>\n  <button\n    aui-button\n    auiDialogClose\n  >\n    {{ 'cancel' | translate }}\n  </button>\n</aui-dialog-footer>\n", styles: [":host::ng-deep .aui-form-item__label-wrapper{width:114px}:host::ng-deep label{word-break:break-all}\n"] }]
+        }], propDecorators: { form: [{
+                type: ViewChild,
+                args: [FormGroupDirective, { static: true }]
+            }] } });
+
+class BasicAuthSecretComponent extends BaseResourceFormComponent {
+    constructor() {
+        super(inject(Injector));
+        this.k8sApi = inject(K8sApiService);
+        this.crdForm = inject(CRD_FORM_CONTEXT);
+        this.dialog = inject(DialogService);
+        this.k8sUtil = inject(K8sUtilService);
+        this.config$ = this.field$.pipe(filter(field => !!field), map$1(field => getBasicAuthSecretConfig(field)), publishRef());
+        this.reload$ = new Subject();
+        this.resources$ = combineLatest([
+            this.crdForm.formContext$,
+            this.config$,
+            this.reload$.pipe(startWith(null)),
+        ]).pipe(switchMap(([{ cluster, namespace }, config]) => this.k8sApi
+            .getResourceList({
+            definition: COMMON_RESOURCE_DEFINITIONS.SECRET,
+            namespace: config?.namespace ?? namespace,
+            cluster: config?.cluster ?? cluster,
+        })
+            .pipe(map$1(res => res.items), skipError([]), map$1(items => items.filter(item => [SecretType.Opaque, SecretType.BasicAuth].includes(item.type))))), publishRef());
+        this.resources$.pipe(takeUntil(this.destroy$)).subscribe(items => {
+            if (this.form.value &&
+                !items.some(item => this.k8sUtil.getName(item) === this.form.value)) {
+                this.form.reset();
+            }
+        });
+    }
+    createForm() {
+        // 使用 control 的 validators 而非 required 指令目地是后者会导致 control 实例化后 dirty
+        return this.fb.control(null, this.required ? Validators.required : null);
+    }
+    create() {
+        this.config$.subscribe(config => {
+            const dialogRef = this.dialog.open(BasicAuthCreateSecretDialogComponent, {
+                size: DialogSize.Big,
+                data: {
+                    cluster: config?.cluster ?? this.crdForm.formContext.cluster,
+                    namespace: config?.namespace ?? this.crdForm.formContext.namespace,
+                    config,
+                },
+            });
+            return dialogRef.afterClosed().subscribe((res) => {
+                if (res) {
+                    this.reload$.next();
+                    this.form.setValue(res.metadata.name);
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BasicAuthSecretComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BasicAuthSecretComponent, isStandalone: true, selector: "acl-crd-basic-auth-secret", inputs: { required: "required", field: "field" }, usesInheritance: true, ngImport: i0, template: "<aui-select\n  class=\"tw-flex-1 tw-mr-[4px]\"\n  [formControl]=\"form\"\n>\n  @for (item of resources$ | async; track item) {\n    <aui-option\n      [value]=\"item | aclName\"\n      [label]=\"item | aclName\"\n    >\n      {{ item | aclName }}\n    </aui-option>\n  }\n  <aui-option-placeholder>{{ 'no_data' | translate }}</aui-option-placeholder>\n</aui-select>\n<button\n  aui-button=\"default\"\n  type=\"button\"\n  (click)=\"create()\"\n>\n  {{ 'create' | translate }}\n</button>\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.SelectComponent, selector: "aui-select" }, { kind: "component", type: i2.OptionComponent, selector: "aui-option", inputs: ["label", "labelContext", "value", "disabled"] }, { kind: "component", type: i2.OptionPlaceholderComponent, selector: "aui-option-placeholder" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.K8sNamePipe, name: "aclName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], BasicAuthSecretComponent.prototype, "field$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BasicAuthSecretComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-crd-basic-auth-secret', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        ButtonModule,
+                        TranslatePipe,
+                        K8S_UTIL_PIPES_MODULE,
+                    ], template: "<aui-select\n  class=\"tw-flex-1 tw-mr-[4px]\"\n  [formControl]=\"form\"\n>\n  @for (item of resources$ | async; track item) {\n    <aui-option\n      [value]=\"item | aclName\"\n      [label]=\"item | aclName\"\n    >\n      {{ item | aclName }}\n    </aui-option>\n  }\n  <aui-option-placeholder>{{ 'no_data' | translate }}</aui-option-placeholder>\n</aui-select>\n<button\n  aui-button=\"default\"\n  type=\"button\"\n  (click)=\"create()\"\n>\n  {{ 'create' | translate }}\n</button>\n", styles: [":host{display:flex}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { required: [{
+                type: Input
+            }], field: [{
+                type: Input
+            }], field$: [] } });
+
+function findResourceType(type, definitions) {
+    type = plural(type.toLowerCase());
+    return Object.entries(definitions).find(([_k, v]) => v.type === type)?.[0];
+}
+function plural(word) {
+    const plural = {
+        '(quiz)$': '$1zes',
+        '^(ox)$': '$1en',
+        '([m|l])ouse$': '$1ice',
+        // cspell:disable-next-line
+        '(matr|vert|ind)ix|ex$': '$1ices',
+        '(x|ch|ss|sh)$': '$1es',
+        // cspell:disable-next-line
+        '([^aeiouy]|qu)y$': '$1ies',
+        '(hive)$': '$1s',
+        '(?:([^f])fe|([lr])f)$': '$1$2ves',
+        // cspell:disable-next-line
+        '(shea|lea|loa|thie)f$': '$1ves',
+        sis$: 'ses',
+        '([ti])um$': '$1a',
+        // cspell:disable-next-line
+        '(tomat|potat|ech|her|vet)o$': '$1oes',
+        '(bu)s$': '$1ses',
+        '(alias)$': '$1es',
+        // cspell:disable-next-line
+        '(octop)us$': '$1i',
+        '(ax|test)is$': '$1es',
+        '(us)$': '$1es',
+        '([^s]+)$': '$1s',
+    };
+    // check for matches using regular expressions
+    Object.keys(plural).forEach(reg => {
+        const pattern = new RegExp(reg, 'i');
+        if (pattern.test(word)) {
+            word = word.replace(pattern, plural[reg]);
+        }
+    });
+    return word;
+}
+
+class K8sResourcePrefixComponent extends BaseResourceFormComponent {
+    constructor() {
+        super(inject(Injector));
+        this.k8sApi = inject(K8sApiService);
+        this.crdForm = inject(CRD_FORM_CONTEXT);
+        this.resourceDefinitions = inject(TOKEN_RESOURCE_DEFINITIONS);
+        this.init$$ = new BehaviorSubject(false);
+        this.readonly = false;
+        this.options$ = this.field$.pipe(map$1(field => getK8sResourcePrefixOptions(field)));
+        this.resources$ = this.options$.pipe(switchMap(option => this.k8sApi[option.isGlobal ? 'getGlobalResourceList' : 'getResourceList']({
+            type: findResourceType(option.type, this.resourceDefinitions),
+            ...(option.namespaced
+                ? option.isGlobal
+                    ? { namespaced: true }
+                    : { namespace: this.crdForm?.formContext?.namespace }
+                : null),
+            ...(!option.isGlobal && {
+                cluster: this.crdForm?.formContext?.cluster,
+            }),
+            ...(option.labelSelector && {
+                queryParams: { labelSelector: option.labelSelector },
+            }),
+        }).pipe(pluck('items'))), skipError(), tap(() => this.init$$.next(true)));
+    }
+    createForm() {
+        return this.fb.control(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: K8sResourcePrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: K8sResourcePrefixComponent, isStandalone: true, selector: "acl-crd-resource-prefix", inputs: { field: "field", readonly: "readonly", formErrors: "formErrors" }, usesInheritance: true, ngImport: i0, template: "@if ((options$ | async)?.multiple) {\n  <aui-multi-select\n    class=\"select\"\n    [formControl]=\"form\"\n    [hidden]=\"readonly || !(init$$ | async)\"\n    [maxRowCount]=\"3\"\n  >\n    @for (item of resources$ | async; track item) {\n      <aui-option\n        [value]=\"item | aclName\"\n        [label]=\"item | aclName\"\n      >\n        {{ item | aclName }}\n      </aui-option>\n    }\n  </aui-multi-select>\n  @if (readonly) {\n    @for (tag of $any(form.value); track tag; let ind = $index) {\n      <aui-tag\n        type=\"info\"\n        size=\"mini\"\n        [border]=\"true\"\n        [auiTooltip]=\"tag\"\n      >\n        {{ tag }}\n      </aui-tag>\n    }\n  }\n} @else {\n  <aui-select\n    [formControl]=\"form\"\n    class=\"select\"\n    [hidden]=\"readonly\"\n  >\n    @for (item of resources$ | async; track item) {\n      <aui-option\n        [value]=\"item | aclName\"\n        [label]=\"item | aclName\"\n      >\n        {{ item | aclName }}\n      </aui-option>\n    }\n    <aui-option-placeholder>{{ 'no_data' | translate }}</aui-option-placeholder>\n  </aui-select>\n  @if (readonly) {\n    <span>{{ form.value }}</span>\n  }\n}\n", styles: [":host{flex:1}.select{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.SelectComponent, selector: "aui-select" }, { kind: "component", type: i2.OptionComponent, selector: "aui-option", inputs: ["label", "labelContext", "value", "disabled"] }, { kind: "component", type: i2.OptionPlaceholderComponent, selector: "aui-option-placeholder" }, { kind: "component", type: i2.MultiSelectComponent, selector: "aui-multi-select", inputs: ["tagClassFn", "maxRowCount", "customRowHeight", "allowSelectAll"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2.TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.K8sNamePipe, name: "aclName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], K8sResourcePrefixComponent.prototype, "field$", void 0);
+__decorate([
+    ValueHook(function (formErrors) {
+        this.form?.setErrors(isEmpty(formErrors) ? null : formErrors);
+    }),
+    __metadata("design:type", Object)
+], K8sResourcePrefixComponent.prototype, "formErrors", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: K8sResourcePrefixComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-crd-resource-prefix', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        TagModule,
+                        TooltipModule,
+                        TranslatePipe,
+                        K8S_UTIL_PIPES_MODULE,
+                    ], template: "@if ((options$ | async)?.multiple) {\n  <aui-multi-select\n    class=\"select\"\n    [formControl]=\"form\"\n    [hidden]=\"readonly || !(init$$ | async)\"\n    [maxRowCount]=\"3\"\n  >\n    @for (item of resources$ | async; track item) {\n      <aui-option\n        [value]=\"item | aclName\"\n        [label]=\"item | aclName\"\n      >\n        {{ item | aclName }}\n      </aui-option>\n    }\n  </aui-multi-select>\n  @if (readonly) {\n    @for (tag of $any(form.value); track tag; let ind = $index) {\n      <aui-tag\n        type=\"info\"\n        size=\"mini\"\n        [border]=\"true\"\n        [auiTooltip]=\"tag\"\n      >\n        {{ tag }}\n      </aui-tag>\n    }\n  }\n} @else {\n  <aui-select\n    [formControl]=\"form\"\n    class=\"select\"\n    [hidden]=\"readonly\"\n  >\n    @for (item of resources$ | async; track item) {\n      <aui-option\n        [value]=\"item | aclName\"\n        [label]=\"item | aclName\"\n      >\n        {{ item | aclName }}\n      </aui-option>\n    }\n    <aui-option-placeholder>{{ 'no_data' | translate }}</aui-option-placeholder>\n  </aui-select>\n  @if (readonly) {\n    <span>{{ form.value }}</span>\n  }\n}\n", styles: [":host{flex:1}.select{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { field: [{
+                type: Input
+            }], field$: [], readonly: [{
+                type: Input
+            }], formErrors: [{
+                type: Input
+            }] } });
+
+function isLink(field) {
+    const { capabilities } = field;
+    return capabilities.some(c => c.startsWith(`${SpecCapability.text}:link`));
+}
+/**
+ * 获取链接参数
+ *
+ * @see https://jira.alauda.cn/browse/ACP-32703
+ */
+function resolveLinkOptions(field) {
+    const linkCapability = field.capabilities.find(capability => capability.startsWith(SpecCapability.text));
+    const target = linkCapability?.split(`${SpecCapability.text}:link:`)?.[1];
+    return { target: target || '_blank' };
+}
+class LinkComponent extends createNestedFormControl({
+    autoEmitChange: true,
+}) {
+    get options() {
+        return resolveLinkOptions(this.field);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: LinkComponent, isStandalone: true, selector: "acl-crd-link", inputs: { field: "field" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => LinkComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<a\n  [href]=\"model | aclSanitize: 'url'\"\n  [target]=\"options.target\"\n>\n  <span>{{ model }}</span>\n  @if (options.target === '_blank') {\n    <aui-icon\n      icon=\"jump\"\n      margin=\"left\"\n    >\n    </aui-icon>\n  }\n</a>\n", styles: [":host{flex:none!important}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: i2.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "pipe", type: SanitizePipe, name: "aclSanitize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LinkComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'acl-crd-link', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LinkComponent),
+                            multi: true,
+                        },
+                    ], imports: [IconModule, SanitizePipe], template: "<a\n  [href]=\"model | aclSanitize: 'url'\"\n  [target]=\"options.target\"\n>\n  <span>{{ model }}</span>\n  @if (options.target === '_blank') {\n    <aui-icon\n      icon=\"jump\"\n      margin=\"left\"\n    >\n    </aui-icon>\n  }\n</a>\n", styles: [":host{flex:none!important}\n"] }]
+        }], propDecorators: { field: [{
+                type: Input
+            }] } });
+
+function getConfigurations(specCapability, part) {
+    const regExp = new RegExp(`^${escapeRegExp(part)}(.*)$`);
+    const [_, config] = regExp.exec(specCapability) || [];
+    return config;
+}
+// urn:alm:descriptor:com.tectonic.ui:resourceRequirements:required
+// urn:alm:descriptor:com.tectonic.ui:resourceRequirements:required:limit-memory&limit-cpu&request-memory&request-cpu
+// urn:alm:descriptor:com.tectonic.ui:resourceRequirements:required:limit&request-memory
+function resolveRequirementsRequiredOptions(field) {
+    if (!field) {
+        return null;
+    }
+    const options = field.capabilities.filter(descriptor => descriptor.startsWith(SpecCapability.resourceRequirements));
+    const allRequired = options.includes(`${SpecCapability.resourceRequirements}:required`);
+    if (allRequired) {
+        return {
+            required: {
+                limit: ['cpu', 'memory'],
+                request: ['cpu', 'memory'],
+            },
+        };
+    }
+    const requiredMap = options.reduce((prev, curr) => {
+        const partsStr = curr.split(`${SpecCapability.resourceRequirements}:required:`)?.[1];
+        partsStr?.split('&')?.forEach(optionStr => {
+            const options = optionStr?.split('-');
+            if (options.length === 1) {
+                prev[options[0]].add('memory').add('cpu');
+            }
+            if (options.length > 1) {
+                prev[options[0]].add(options[1]);
+            }
+        });
+        return prev;
+    }, {
+        limit: new Set(),
+        request: new Set(),
+    });
+    return {
+        required: {
+            limit: Array.from(requiredMap.limit),
+            request: Array.from(requiredMap.request),
+        },
+    };
+}
+// urn:alm:descriptor:com.tectonic.ui:resourceRequirements:min:{"limits": {"cpu":"2c", "memory":"500Mi"}, "requests":{"cpu":"100m", "memory":"250Mi"}}
+// urn:alm:descriptor:com.tectonic.ui:resourceRequirements:max:{"limits": {"cpu":"4c", "memory":"500Mi"}, "requests":{"cpu":"4c", "memory":"500Mi"}}
+function resolveRequirementsMinOrMaxOptions(field) {
+    if (!field) {
+        return null;
+    }
+    const options = field.capabilities.filter(descriptor => descriptor.startsWith(SpecCapability.resourceRequirements));
+    const getConfigurationMap = (option, capability) => {
+        const configuration = getConfigurations(option, capability);
+        const { limits, requests } = parseJson(configuration, {
+            limits: { cpu: null, memory: null },
+            requests: { cpu: null, memory: null },
+        });
+        return { limits, requests };
+    };
+    const getResourceMinOrMaxMap = (suffix) => {
+        const option = options.find(option => option.includes(`${SpecCapability.resourceRequirements}:${suffix}:`));
+        return getConfigurationMap(option, `${SpecCapability.resourceRequirements}:${suffix}:`);
+    };
+    return {
+        min: getResourceMinOrMaxMap('min'),
+        max: getResourceMinOrMaxMap('max'),
+    };
+}
+
+function handleValidationErrors(valueCtrl, errors) {
+    // 这里避免覆盖其它 errors
+    const combinedErrors = { ...valueCtrl.errors, ...errors };
+    valueCtrl.setErrors(combinedErrors);
+    return combinedErrors;
+}
+function valueFormat(type, value) {
+    return type === 'cpu' ? formatCPU(value) : formatMemory(value);
+}
+function getCurrentValue(group, type) {
+    const valueCtrl = group.get('value');
+    const value = valueCtrl.value;
+    const unit = group.get('unit').value;
+    return valueFormat(type, (value || 0) + unit);
+}
+class ResourceRequirementsComponent extends BaseResourceFormGroupComponent {
+    get requiredOptions() {
+        return resolveRequirementsRequiredOptions(this.fieldComponent?.field);
+    }
+    get limitMemoryRequired() {
+        return this.requiredOptions.required?.limit?.includes('memory');
+    }
+    get limitCpuRequired() {
+        return this.requiredOptions.required?.limit?.includes('cpu');
+    }
+    get requestMemoryRequired() {
+        return this.requiredOptions.required?.request?.includes('memory');
+    }
+    get requestCpuRequired() {
+        return this.requiredOptions.required?.request?.includes('cpu');
+    }
+    get minMaxOptions() {
+        return resolveRequirementsMinOrMaxOptions(this.fieldComponent?.field);
+    }
+    get limitMemoryMin() {
+        return this.minMaxOptions.min.limits?.memory;
+    }
+    get limitCpuMin() {
+        return this.minMaxOptions.min.limits?.cpu;
+    }
+    get requestMemoryMin() {
+        return this.minMaxOptions.min.requests?.memory;
+    }
+    get requestCpuMin() {
+        return this.minMaxOptions.min.requests?.cpu;
+    }
+    get limitMemoryMax() {
+        return this.minMaxOptions.max.limits?.memory;
+    }
+    get limitCpuMax() {
+        return this.minMaxOptions.max.limits?.cpu;
+    }
+    get requestMemoryMax() {
+        return this.minMaxOptions.max.requests?.memory;
+    }
+    get requestCpuMax() {
+        return this.minMaxOptions.max.requests?.cpu;
+    }
+    constructor() {
+        super(inject(Injector));
+        this.resourceUnits = resourceUnits;
+        this.getResourceValue = getResourceValue;
+        this.getResourceViewModel = getResourceViewModel;
+        this.fieldComponent = inject(forwardRef(() => OperandFieldComponent), {
+            optional: true,
+        });
+        this.controlContainer = inject(ControlContainer, {
+            optional: true,
+        });
+        this.translate = inject(TranslateService);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const greaterValidatorSubscriptions = [
+            initGreaterValidator('cpu', this.form),
+            initGreaterValidator('memory', this.form),
+        ];
+        this.destroy$.subscribe(() => {
+            greaterValidatorSubscriptions.forEach(sub => sub.unsubscribe());
+        });
+    }
+    createForm() {
+        return this.fb.group({
+            limits: this.fb.group({
+                cpu: this.fb.group({
+                    value: '',
+                    unit: 'c',
+                }, {
+                    validators: [
+                        this.minValidator(this.limitCpuMin, 'cpu'),
+                        this.maxValidator(this.limitCpuMax, 'cpu'),
+                    ],
+                }),
+                memory: this.fb.group({
+                    value: '',
+                    unit: 'Mi',
+                }, {
+                    validators: [
+                        this.minValidator(this.limitMemoryMin, 'memory'),
+                        this.maxValidator(this.limitMemoryMax, 'memory'),
+                    ],
+                }),
+            }),
+            requests: this.fb.group({
+                cpu: this.fb.group({
+                    value: '',
+                    unit: 'c',
+                }, {
+                    validators: [
+                        this.minValidator(this.requestCpuMin, 'cpu'),
+                        this.maxValidator(this.requestCpuMax, 'cpu'),
+                    ],
+                }),
+                memory: this.fb.group({
+                    value: '',
+                    unit: 'Mi',
+                }, {
+                    validators: [
+                        this.minValidator(this.requestMemoryMin, 'memory'),
+                        this.maxValidator(this.requestMemoryMax, 'memory'),
+                    ],
+                }),
+            }),
+        });
+    }
+    getDefaultFormModel() {
+        return {
+            limits: {
+                cpu: {
+                    value: '',
+                    unit: 'c',
+                },
+                memory: {
+                    value: '',
+                    unit: 'Mi',
+                },
+            },
+            requests: {
+                cpu: {
+                    value: '',
+                    unit: 'c',
+                },
+                memory: {
+                    value: '',
+                    unit: 'Mi',
+                },
+            },
+        };
+    }
+    adaptFormModel(formModel) {
+        this.formatFormModel(formModel);
+        return {
+            requests: transferResource(formModel.requests),
+            limits: transferResource(formModel.limits),
+        };
+    }
+    minValidator(min, type) {
+        return (group) => {
+            if (!min) {
+                return null;
+            }
+            const valueCtrl = group.get('value');
+            const currentValue = getCurrentValue(group, type);
+            const minThreshold = valueFormat(type, min);
+            if (currentValue < minThreshold) {
+                return handleValidationErrors(valueCtrl, { min: true });
+            }
+            const errors = omit(valueCtrl.errors, 'min');
+            valueCtrl.setErrors(isEmpty(errors) ? null : errors);
+            return null;
+        };
+    }
+    maxValidator(max, type) {
+        return (group) => {
+            if (!max) {
+                return null;
+            }
+            const valueCtrl = group.get('value');
+            const currentValue = getCurrentValue(group, type);
+            const maxThreshold = valueFormat(type, max);
+            if (currentValue > maxThreshold) {
+                return handleValidationErrors(valueCtrl, { max: true });
+            }
+            const errors = omit(valueCtrl.errors, 'max');
+            valueCtrl.setErrors(isEmpty(errors) ? null : errors);
+            return null;
+        };
+    }
+    formatFormModel(formModel) {
+        Object.values(formModel).forEach(modelValue => {
+            Object.values(modelValue).forEach(v => {
+                v.value = `${v.value}`;
+            });
+        });
+    }
+    getCpuUnitLabel(value) {
+        return value === 'm'
+            ? ''
+            : resourceUnits.cpu.find(unit => unit.value === value).label;
+    }
+    adaptResourceModel(resources) {
+        const resourcesModel = {};
+        if (resources) {
+            Object.keys(resources).forEach(kind => {
+                const resourceKind = kind;
+                resourcesModel[resourceKind] = Object.keys(resources[resourceKind])
+                    .filter(key => RESOURCE_MAC_TYPES.includes(key))
+                    .reduce((item, type) => {
+                    const resourceType = type;
+                    item[resourceType] = getResourceViewModel(resources[resourceKind][resourceType], resourceType);
+                    return item;
+                }, {});
+            });
+        }
+        return merge(this.getDefaultFormModel(), resourcesModel);
+    }
+    getMinOrMaxErrorsMapper(value, kind, type, _locale) {
+        const resourceCtrl = getResourceViewModel(value, type);
+        return this.translate.get(`warning_${kind}`, {
+            value: resourceCtrl.value + this.translate.get(resourceCtrl.unit),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceRequirementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ResourceRequirementsComponent, isStandalone: true, selector: "acl-crd-resource-requirements", inputs: { readOnly: "readOnly", field: "field" }, usesInheritance: true, ngImport: i0, template: "@if (!readOnly) {\n  <form [formGroup]=\"form\">\n    <div class=\"resource_requirements\">\n      <div class=\"input-group-label\">\n        {{ 'resource_requirements_requests' | translate }}\n      </div>\n      <div\n        class=\"input-group-wrapper tw-items-start\"\n        formGroupName=\"requests\"\n      >\n        <div class=\"tw-flex tw-flex-col tw-flex-1\">\n          <div\n            class=\"input-groups-wrapper cpu\"\n            formGroupName=\"cpu\"\n          >\n            <aui-input-group>\n              <div\n                auiInputAddonBefore\n                class=\"addon-label\"\n                [ngClass]=\"{\n                  'tw-required-mark': requestCpuRequired,\n                }\"\n              >\n                CPU\n              </div>\n              <input\n                aui-input\n                type=\"number\"\n                [required]=\"requestCpuRequired\"\n                auiFormItemControl\n                formControlName=\"value\"\n              />\n              <aui-select\n                auiInputAddonAfter\n                auiFormItemControl\n                formControlName=\"unit\"\n              >\n                @for (unit of resourceUnits['cpu']; track unit) {\n                  <aui-option\n                    [value]=\"unit.value\"\n                    [label]=\"unit.label | translate\"\n                  >\n                    {{ unit.label | translate }}\n                  </aui-option>\n                }\n              </aui-select>\n            </aui-input-group>\n          </div>\n          @if (\n            form.get('requests.cpu.value')?.dirty ||\n            $any(controlContainer?.formDirective)?.submitted\n          ) {\n            <acl-errors-mapper\n              [errors]=\"form.get('requests.cpu.value').errors\"\n              [errorsMapper]=\"{\n                min:\n                  requestCpuMin\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'min'\n                    : 'cpu'\n                    : translate.locale,\n                max:\n                  requestCpuMax\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'max'\n                    : 'cpu'\n                    : translate.locale,\n              }\"\n              class=\"tw-text-s tw-text-red\"\n            >\n            </acl-errors-mapper>\n          }\n        </div>\n        <div class=\"tw-flex tw-flex-col tw-flex-1\">\n          <div\n            class=\"input-groups-wrapper memory\"\n            [formGroupName]=\"'memory'\"\n          >\n            <aui-input-group>\n              <div\n                auiInputAddonBefore\n                class=\"addon-label\"\n                [ngClass]=\"{\n                  'tw-required-mark': requestMemoryRequired,\n                }\"\n              >\n                {{ 'memory' | translate }}\n              </div>\n              <input\n                aui-input\n                type=\"number\"\n                auiFormItemControl\n                formControlName=\"value\"\n                [required]=\"requestMemoryRequired\"\n              />\n              <aui-select\n                auiInputAddonAfter\n                auiFormItemControl\n                formControlName=\"unit\"\n              >\n                @for (unit of resourceUnits['memory']; track unit) {\n                  <aui-option [value]=\"unit\">\n                    {{ unit }}\n                  </aui-option>\n                }\n              </aui-select>\n            </aui-input-group>\n          </div>\n          @if (\n            form.get('requests.memory.value')?.dirty ||\n            $any(controlContainer?.formDirective)?.submitted\n          ) {\n            <acl-errors-mapper\n              [errors]=\"form.get('requests.memory.value').errors\"\n              [errorsMapper]=\"{\n                min:\n                  requestMemoryMin\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'min'\n                    : 'memory'\n                    : translate.locale,\n                max:\n                  requestMemoryMax\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'max'\n                    : 'memory'\n                    : translate.locale,\n              }\"\n              class=\"tw-text-s tw-text-red\"\n            >\n            </acl-errors-mapper>\n          }\n        </div>\n      </div>\n    </div>\n    <div class=\"resource_requirements\">\n      <div class=\"input-group-label\">\n        {{ 'resource_requirements_limits' | translate }}\n      </div>\n      <div\n        class=\"input-group-wrapper tw-items-start\"\n        formGroupName=\"limits\"\n      >\n        <div class=\"tw-flex tw-flex-col tw-flex-1\">\n          <div\n            class=\"input-groups-wrapper cpu\"\n            [formGroupName]=\"'cpu'\"\n          >\n            <aui-input-group>\n              <div\n                auiInputAddonBefore\n                class=\"addon-label\"\n                [ngClass]=\"{\n                  'tw-required-mark': limitCpuRequired,\n                }\"\n              >\n                CPU\n              </div>\n              <input\n                aui-input\n                type=\"number\"\n                auiFormItemControl\n                formControlName=\"value\"\n                [required]=\"limitCpuRequired\"\n              />\n              <aui-select\n                auiInputAddonAfter\n                auiFormItemControl\n                formControlName=\"unit\"\n              >\n                @for (unit of resourceUnits['cpu']; track unit) {\n                  <aui-option\n                    [value]=\"unit.value\"\n                    [label]=\"unit.label | translate\"\n                  >\n                    {{ unit.label | translate }}\n                  </aui-option>\n                }\n              </aui-select>\n            </aui-input-group>\n          </div>\n          @if (\n            form.get('limits.cpu.value')?.dirty ||\n            $any(controlContainer?.formDirective)?.submitted\n          ) {\n            <acl-errors-mapper\n              [errors]=\"form.get('limits.cpu.value').errors\"\n              [errorsMapper]=\"{\n                cpu_max: 'request_greater_than_limits_error' | translate,\n                min:\n                  limitCpuMin\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'min'\n                    : 'cpu'\n                    : translate.locale,\n                max:\n                  limitCpuMax\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'max'\n                    : 'cpu'\n                    : translate.locale,\n              }\"\n              class=\"tw-text-s tw-text-red\"\n            >\n            </acl-errors-mapper>\n          }\n        </div>\n        <div class=\"tw-flex tw-flex-col tw-flex-1\">\n          <div\n            class=\"input-groups-wrapper memory\"\n            [formGroupName]=\"'memory'\"\n          >\n            <aui-input-group>\n              <div\n                auiInputAddonBefore\n                class=\"addon-label\"\n                [ngClass]=\"{\n                  'tw-required-mark': limitMemoryRequired,\n                }\"\n              >\n                {{ 'memory' | translate }}\n              </div>\n              <input\n                aui-input\n                type=\"number\"\n                auiFormItemControl\n                formControlName=\"value\"\n                [required]=\"limitMemoryRequired\"\n              />\n              <aui-select\n                auiInputAddonAfter\n                auiFormItemControl\n                formControlName=\"unit\"\n              >\n                @for (unit of resourceUnits['memory']; track unit) {\n                  <aui-option [value]=\"unit\">\n                    {{ unit }}\n                  </aui-option>\n                }\n              </aui-select>\n            </aui-input-group>\n          </div>\n          @if (\n            form.get('limits.memory.value')?.dirty ||\n            $any(controlContainer?.formDirective)?.submitted\n          ) {\n            <acl-errors-mapper\n              [errors]=\"form.get('limits.memory.value').errors\"\n              [errorsMapper]=\"{\n                memory_max: 'request_greater_than_limits_error' | translate,\n                min:\n                  limitMemoryMin\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'min'\n                    : 'memory'\n                    : translate.locale,\n                max:\n                  limitMemoryMax\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'max'\n                    : 'memory'\n                    : translate.locale,\n              }\"\n              class=\"tw-text-s tw-text-red\"\n            >\n            </acl-errors-mapper>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n} @else {\n  <div class=\"resource_requirements-display\">\n    <div class=\"resource_requirements-display-item\">\n      <label class=\"resource_requirements-display-item__label\">{{\n        'resource_requirements_requests' | translate\n      }}</label>\n      <aui-icon\n        icon=\"prod:cpu\"\n        size=\"16px\"\n        color=\"#6359b4\"\n        margin=\"right\"\n        [title]=\"'cpu' | translate\"\n      ></aui-icon\n      ><span class=\"tw-mr-16\"\n        >{{\n          form.get('requests').get('cpu').value\n            | pure: getResourceValue\n            | aclFieldNotAvailable\n        }}{{\n          form.get('requests').get('cpu.unit').value\n            | pure: getCpuUnitLabel\n            | translate\n        }}\n      </span>\n      <aui-icon\n        icon=\"prod:memory\"\n        size=\"16px\"\n        color=\"#007cb5\"\n        margin=\"right\"\n        [title]=\"'memory' | translate\"\n      ></aui-icon\n      >{{\n        form.get('requests').get('memory').value\n          | pure: getResourceValue\n          | aclFieldNotAvailable\n      }}\n    </div>\n    <div class=\"resource_requirements-display-item\">\n      <label class=\"resource_requirements-display-item__label\">{{\n        'resource_requirements_limits' | translate\n      }}</label>\n      <aui-icon\n        icon=\"prod:cpu\"\n        size=\"16px\"\n        color=\"#6359b4\"\n        margin=\"right\"\n        [title]=\"'cpu' | translate\"\n      ></aui-icon\n      ><span class=\"tw-mr-16\"\n        >{{\n          form.get('limits').get('cpu').value\n            | pure: getResourceValue\n            | aclFieldNotAvailable\n        }}{{\n          form.get('limits').get('cpu.unit').value\n            | pure: getCpuUnitLabel\n            | translate\n        }}\n      </span>\n      <aui-icon\n        icon=\"prod:memory\"\n        size=\"16px\"\n        color=\"#007cb5\"\n        margin=\"right\"\n        [title]=\"'memory' | translate\"\n      ></aui-icon\n      >{{\n        form.get('limits').get('memory').value\n          | pure: getResourceValue\n          | aclFieldNotAvailable\n      }}\n    </div>\n  </div>\n}\n", styles: [":host .resource_requirements:not(:last-of-type){margin-bottom:8px}:host .input-group-wrapper{display:flex}:host .input-group-label{line-height:var(--aui-inline-height-m)}:host aui-input-group{flex:1}:host aui-input-group ::ng-deep .aui-input-group__addon--after{padding:0}:host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select{width:60px}:host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select .aui-input-group{width:62px}html:not([lang|=zh]) :host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select{width:78px}html:not([lang|=zh]) :host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select .aui-input-group{width:80px}:host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select .aui-input{border:0;background-color:transparent!important;border-top-right-radius:var(--aui-border-radius-m);border-bottom-right-radius:var(--aui-border-radius-m)}:host .addon-label{white-space:nowrap}:host .input-groups-wrapper{display:flex;flex:1;align-items:center}:host .input-groups-wrapper:first-child{margin-right:8px}:host .resource_requirements-display-item{display:flex;font-size:14px;line-height:20px;color:rgb(var(--aui-color-main-text));align-items:center;margin-top:8px}:host .resource_requirements-display-item:first-child{margin-top:0}:host .resource_requirements-display-item__label{white-space:nowrap;margin-right:8px}:host .resource_requirements-display-item__value{min-width:0;flex:1;white-space:nowrap;display:flex}:host .resource_requirements-display-item__value__overflow{display:block;overflow:hidden;text-overflow:ellipsis}:host .resource_requirements-display-item__value__wrap{white-space:pre-wrap;flex-wrap:wrap}:host .resource_requirements-display-item__label,:host .resource_requirements-display-item__value{height:100%;align-items:flex-start}:host ::ng-deep .aui-input-group__addon--before{width:70px}html:not([lang|=zh]) :host ::ng-deep .memory .aui-input-group__addon--before{width:82px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2.FormItemControlDirective, selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2.InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "component", type: i2.InputGroupComponent, selector: "aui-input-group" }, { kind: "directive", type: i2.InputAddonBeforeDirective, selector: "[auiInputAddonBefore]" }, { kind: "directive", type: i2.InputAddonAfterDirective, selector: "[auiInputAddonAfter]" }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.SelectComponent, selector: "aui-select" }, { kind: "component", type: i2.OptionComponent, selector: "aui-option", inputs: ["label", "labelContext", "value", "disabled"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: ErrorsMapperComponent, selector: "acl-errors-mapper", inputs: ["errors", "errorsMapper", "errorsMapperFn", "controlName", "ignoreUnknownError"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: FieldNotAvailablePipe, name: "aclFieldNotAvailable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    bind,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String]),
+    __metadata("design:returntype", void 0)
+], ResourceRequirementsComponent.prototype, "minValidator", null);
+__decorate([
+    bind,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String]),
+    __metadata("design:returntype", void 0)
+], ResourceRequirementsComponent.prototype, "maxValidator", null);
+__decorate([
+    bind,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String, String, String]),
+    __metadata("design:returntype", void 0)
+], ResourceRequirementsComponent.prototype, "getMinOrMaxErrorsMapper", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceRequirementsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-crd-resource-requirements', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormModule,
+                        InputModule,
+                        SelectModule,
+                        IconModule,
+                        ErrorsMapperComponent,
+                        TranslatePipe,
+                        PurePipe,
+                        FieldNotAvailablePipe,
+                    ], template: "@if (!readOnly) {\n  <form [formGroup]=\"form\">\n    <div class=\"resource_requirements\">\n      <div class=\"input-group-label\">\n        {{ 'resource_requirements_requests' | translate }}\n      </div>\n      <div\n        class=\"input-group-wrapper tw-items-start\"\n        formGroupName=\"requests\"\n      >\n        <div class=\"tw-flex tw-flex-col tw-flex-1\">\n          <div\n            class=\"input-groups-wrapper cpu\"\n            formGroupName=\"cpu\"\n          >\n            <aui-input-group>\n              <div\n                auiInputAddonBefore\n                class=\"addon-label\"\n                [ngClass]=\"{\n                  'tw-required-mark': requestCpuRequired,\n                }\"\n              >\n                CPU\n              </div>\n              <input\n                aui-input\n                type=\"number\"\n                [required]=\"requestCpuRequired\"\n                auiFormItemControl\n                formControlName=\"value\"\n              />\n              <aui-select\n                auiInputAddonAfter\n                auiFormItemControl\n                formControlName=\"unit\"\n              >\n                @for (unit of resourceUnits['cpu']; track unit) {\n                  <aui-option\n                    [value]=\"unit.value\"\n                    [label]=\"unit.label | translate\"\n                  >\n                    {{ unit.label | translate }}\n                  </aui-option>\n                }\n              </aui-select>\n            </aui-input-group>\n          </div>\n          @if (\n            form.get('requests.cpu.value')?.dirty ||\n            $any(controlContainer?.formDirective)?.submitted\n          ) {\n            <acl-errors-mapper\n              [errors]=\"form.get('requests.cpu.value').errors\"\n              [errorsMapper]=\"{\n                min:\n                  requestCpuMin\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'min'\n                    : 'cpu'\n                    : translate.locale,\n                max:\n                  requestCpuMax\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'max'\n                    : 'cpu'\n                    : translate.locale,\n              }\"\n              class=\"tw-text-s tw-text-red\"\n            >\n            </acl-errors-mapper>\n          }\n        </div>\n        <div class=\"tw-flex tw-flex-col tw-flex-1\">\n          <div\n            class=\"input-groups-wrapper memory\"\n            [formGroupName]=\"'memory'\"\n          >\n            <aui-input-group>\n              <div\n                auiInputAddonBefore\n                class=\"addon-label\"\n                [ngClass]=\"{\n                  'tw-required-mark': requestMemoryRequired,\n                }\"\n              >\n                {{ 'memory' | translate }}\n              </div>\n              <input\n                aui-input\n                type=\"number\"\n                auiFormItemControl\n                formControlName=\"value\"\n                [required]=\"requestMemoryRequired\"\n              />\n              <aui-select\n                auiInputAddonAfter\n                auiFormItemControl\n                formControlName=\"unit\"\n              >\n                @for (unit of resourceUnits['memory']; track unit) {\n                  <aui-option [value]=\"unit\">\n                    {{ unit }}\n                  </aui-option>\n                }\n              </aui-select>\n            </aui-input-group>\n          </div>\n          @if (\n            form.get('requests.memory.value')?.dirty ||\n            $any(controlContainer?.formDirective)?.submitted\n          ) {\n            <acl-errors-mapper\n              [errors]=\"form.get('requests.memory.value').errors\"\n              [errorsMapper]=\"{\n                min:\n                  requestMemoryMin\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'min'\n                    : 'memory'\n                    : translate.locale,\n                max:\n                  requestMemoryMax\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'max'\n                    : 'memory'\n                    : translate.locale,\n              }\"\n              class=\"tw-text-s tw-text-red\"\n            >\n            </acl-errors-mapper>\n          }\n        </div>\n      </div>\n    </div>\n    <div class=\"resource_requirements\">\n      <div class=\"input-group-label\">\n        {{ 'resource_requirements_limits' | translate }}\n      </div>\n      <div\n        class=\"input-group-wrapper tw-items-start\"\n        formGroupName=\"limits\"\n      >\n        <div class=\"tw-flex tw-flex-col tw-flex-1\">\n          <div\n            class=\"input-groups-wrapper cpu\"\n            [formGroupName]=\"'cpu'\"\n          >\n            <aui-input-group>\n              <div\n                auiInputAddonBefore\n                class=\"addon-label\"\n                [ngClass]=\"{\n                  'tw-required-mark': limitCpuRequired,\n                }\"\n              >\n                CPU\n              </div>\n              <input\n                aui-input\n                type=\"number\"\n                auiFormItemControl\n                formControlName=\"value\"\n                [required]=\"limitCpuRequired\"\n              />\n              <aui-select\n                auiInputAddonAfter\n                auiFormItemControl\n                formControlName=\"unit\"\n              >\n                @for (unit of resourceUnits['cpu']; track unit) {\n                  <aui-option\n                    [value]=\"unit.value\"\n                    [label]=\"unit.label | translate\"\n                  >\n                    {{ unit.label | translate }}\n                  </aui-option>\n                }\n              </aui-select>\n            </aui-input-group>\n          </div>\n          @if (\n            form.get('limits.cpu.value')?.dirty ||\n            $any(controlContainer?.formDirective)?.submitted\n          ) {\n            <acl-errors-mapper\n              [errors]=\"form.get('limits.cpu.value').errors\"\n              [errorsMapper]=\"{\n                cpu_max: 'request_greater_than_limits_error' | translate,\n                min:\n                  limitCpuMin\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'min'\n                    : 'cpu'\n                    : translate.locale,\n                max:\n                  limitCpuMax\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'max'\n                    : 'cpu'\n                    : translate.locale,\n              }\"\n              class=\"tw-text-s tw-text-red\"\n            >\n            </acl-errors-mapper>\n          }\n        </div>\n        <div class=\"tw-flex tw-flex-col tw-flex-1\">\n          <div\n            class=\"input-groups-wrapper memory\"\n            [formGroupName]=\"'memory'\"\n          >\n            <aui-input-group>\n              <div\n                auiInputAddonBefore\n                class=\"addon-label\"\n                [ngClass]=\"{\n                  'tw-required-mark': limitMemoryRequired,\n                }\"\n              >\n                {{ 'memory' | translate }}\n              </div>\n              <input\n                aui-input\n                type=\"number\"\n                auiFormItemControl\n                formControlName=\"value\"\n                [required]=\"limitMemoryRequired\"\n              />\n              <aui-select\n                auiInputAddonAfter\n                auiFormItemControl\n                formControlName=\"unit\"\n              >\n                @for (unit of resourceUnits['memory']; track unit) {\n                  <aui-option [value]=\"unit\">\n                    {{ unit }}\n                  </aui-option>\n                }\n              </aui-select>\n            </aui-input-group>\n          </div>\n          @if (\n            form.get('limits.memory.value')?.dirty ||\n            $any(controlContainer?.formDirective)?.submitted\n          ) {\n            <acl-errors-mapper\n              [errors]=\"form.get('limits.memory.value').errors\"\n              [errorsMapper]=\"{\n                memory_max: 'request_greater_than_limits_error' | translate,\n                min:\n                  limitMemoryMin\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'min'\n                    : 'memory'\n                    : translate.locale,\n                max:\n                  limitMemoryMax\n                  | pure\n                    : getMinOrMaxErrorsMapper\n                    : 'max'\n                    : 'memory'\n                    : translate.locale,\n              }\"\n              class=\"tw-text-s tw-text-red\"\n            >\n            </acl-errors-mapper>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n} @else {\n  <div class=\"resource_requirements-display\">\n    <div class=\"resource_requirements-display-item\">\n      <label class=\"resource_requirements-display-item__label\">{{\n        'resource_requirements_requests' | translate\n      }}</label>\n      <aui-icon\n        icon=\"prod:cpu\"\n        size=\"16px\"\n        color=\"#6359b4\"\n        margin=\"right\"\n        [title]=\"'cpu' | translate\"\n      ></aui-icon\n      ><span class=\"tw-mr-16\"\n        >{{\n          form.get('requests').get('cpu').value\n            | pure: getResourceValue\n            | aclFieldNotAvailable\n        }}{{\n          form.get('requests').get('cpu.unit').value\n            | pure: getCpuUnitLabel\n            | translate\n        }}\n      </span>\n      <aui-icon\n        icon=\"prod:memory\"\n        size=\"16px\"\n        color=\"#007cb5\"\n        margin=\"right\"\n        [title]=\"'memory' | translate\"\n      ></aui-icon\n      >{{\n        form.get('requests').get('memory').value\n          | pure: getResourceValue\n          | aclFieldNotAvailable\n      }}\n    </div>\n    <div class=\"resource_requirements-display-item\">\n      <label class=\"resource_requirements-display-item__label\">{{\n        'resource_requirements_limits' | translate\n      }}</label>\n      <aui-icon\n        icon=\"prod:cpu\"\n        size=\"16px\"\n        color=\"#6359b4\"\n        margin=\"right\"\n        [title]=\"'cpu' | translate\"\n      ></aui-icon\n      ><span class=\"tw-mr-16\"\n        >{{\n          form.get('limits').get('cpu').value\n            | pure: getResourceValue\n            | aclFieldNotAvailable\n        }}{{\n          form.get('limits').get('cpu.unit').value\n            | pure: getCpuUnitLabel\n            | translate\n        }}\n      </span>\n      <aui-icon\n        icon=\"prod:memory\"\n        size=\"16px\"\n        color=\"#007cb5\"\n        margin=\"right\"\n        [title]=\"'memory' | translate\"\n      ></aui-icon\n      >{{\n        form.get('limits').get('memory').value\n          | pure: getResourceValue\n          | aclFieldNotAvailable\n      }}\n    </div>\n  </div>\n}\n", styles: [":host .resource_requirements:not(:last-of-type){margin-bottom:8px}:host .input-group-wrapper{display:flex}:host .input-group-label{line-height:var(--aui-inline-height-m)}:host aui-input-group{flex:1}:host aui-input-group ::ng-deep .aui-input-group__addon--after{padding:0}:host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select{width:60px}:host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select .aui-input-group{width:62px}html:not([lang|=zh]) :host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select{width:78px}html:not([lang|=zh]) :host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select .aui-input-group{width:80px}:host aui-input-group ::ng-deep .aui-input-group__addon--after aui-select .aui-input{border:0;background-color:transparent!important;border-top-right-radius:var(--aui-border-radius-m);border-bottom-right-radius:var(--aui-border-radius-m)}:host .addon-label{white-space:nowrap}:host .input-groups-wrapper{display:flex;flex:1;align-items:center}:host .input-groups-wrapper:first-child{margin-right:8px}:host .resource_requirements-display-item{display:flex;font-size:14px;line-height:20px;color:rgb(var(--aui-color-main-text));align-items:center;margin-top:8px}:host .resource_requirements-display-item:first-child{margin-top:0}:host .resource_requirements-display-item__label{white-space:nowrap;margin-right:8px}:host .resource_requirements-display-item__value{min-width:0;flex:1;white-space:nowrap;display:flex}:host .resource_requirements-display-item__value__overflow{display:block;overflow:hidden;text-overflow:ellipsis}:host .resource_requirements-display-item__value__wrap{white-space:pre-wrap;flex-wrap:wrap}:host .resource_requirements-display-item__label,:host .resource_requirements-display-item__value{height:100%;align-items:flex-start}:host ::ng-deep .aui-input-group__addon--before{width:70px}html:not([lang|=zh]) :host ::ng-deep .memory .aui-input-group__addon--before{width:82px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { readOnly: [{
+                type: Input
+            }], field: [{
+                type: Input
+            }], minValidator: [], maxValidator: [], getMinOrMaxErrorsMapper: [] } });
+
+class YamlEditorComponent extends BaseResourceFormGroupComponent {
+    constructor() {
+        super(inject(Injector));
+        this.disabledActionsConfig = {};
+        this.resultFormat = 'json';
+        this.fieldComponent = inject(forwardRef(() => OperandFieldComponent));
+        this.disabledActionsConfig = this.getDisabledActionsConfig(this.fieldComponent?.field);
+        this.resultFormat = this.getResultFormat(this.fieldComponent?.field);
+    }
+    getResultFormat(field) {
+        return (field?.capabilities
+            .find(c => c.startsWith(SpecCapability.yamlResult))
+            ?.split(SpecCapability.yamlResult)?.[1] || 'json');
+    }
+    createForm() {
+        return this.fb.group({
+            yaml: null,
+        });
+    }
+    getDisabledActionsConfig(field) {
+        const disabledActions = field?.capabilities
+            .find(c => c.startsWith(SpecCapability.yamlActionsDisabled))
+            ?.split(SpecCapability.yamlActionsDisabled)?.[1]
+            ?.split(',') || [];
+        return disabledActions.reduce((acc, cur) => ({ ...acc, [cur]: false }), {});
+    }
+    adaptResourceModel(resource) {
+        try {
+            return {
+                yaml: resource
+                    ? stringify(this.resultFormat === 'json'
+                        ? resource
+                        : JSON.parse(resource))
+                    : '',
+            };
+        }
+        catch (e) {
+            console.error(e);
+            return {
+                yaml: '',
+            };
+        }
+    }
+    adaptFormModel(formModel) {
+        try {
+            const parsedYaml = parse(formModel.yaml);
+            return this.resultFormat === 'json'
+                ? parsedYaml
+                : parsedYaml
+                    ? JSON.stringify(parsedYaml)
+                    : '';
+        }
+        catch { }
+        return null;
+    }
+    getActionsConfig(defaultActions, disabledActions) {
+        return {
+            ...defaultActions,
+            ...disabledActions,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: YamlEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: YamlEditorComponent, isStandalone: true, selector: "acl-crd-yaml-editor", inputs: { actionsConfig: "actionsConfig", options: "options" }, usesInheritance: true, ngImport: i0, template: "<form\n  aui-form\n  [formGroup]=\"form\"\n>\n  <aui-code-editor\n    auiFormItemControl\n    formControlName=\"yaml\"\n    [actionsConfig]=\"\n      actionsConfig | pure: getActionsConfig : disabledActionsConfig\n    \"\n    [options]=\"options\"\n  ></aui-code-editor>\n</form>\n", styles: [":host{width:100%}:host form{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2.FormItemControlDirective, selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "component", type: CodeEditorComponent, selector: "aui-code-editor", inputs: ["options", "plain", "showLanguageLabel", "value", "originalValue", "actionsConfig", "previewMode", "diffMode", "modelUri"], outputs: ["editorChange", "editorBlur"] }, { kind: "pipe", type: PurePipe, name: "pure" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: YamlEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-crd-yaml-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ReactiveFormsModule, FormModule, CodeEditorComponent, PurePipe], template: "<form\n  aui-form\n  [formGroup]=\"form\"\n>\n  <aui-code-editor\n    auiFormItemControl\n    formControlName=\"yaml\"\n    [actionsConfig]=\"\n      actionsConfig | pure: getActionsConfig : disabledActionsConfig\n    \"\n    [options]=\"options\"\n  ></aui-code-editor>\n</form>\n", styles: [":host{width:100%}:host form{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { actionsConfig: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+const PASSWORD_REVEAL = '******';
+const ENCODING_MAPPER = {
+    base64: {
+        decode,
+        encode,
+    },
+};
+class OperandFieldComponent {
+    constructor() {
+        this.readonly = false;
+        this.valueChange = new EventEmitter();
+        this.itemRemove = new EventEmitter();
+        this.control = new FormControl();
+        this.onDestroy$ = new Subject();
+        this.getFieldType = getFieldType;
+        this.isLink = isLink;
+        this.SpecCapability = SpecCapability;
+        this.getFieldDisplayName = getFieldDisplayName;
+        this.getFieldDescription = getFieldDescription$1;
+        this.getFieldPlaceholder = getFieldPlaceholder$1;
+        this.getRadioOptions = getRadioOptions;
+        this.editorOptions = yamlWriteOptions;
+        this.editorActions = createActions;
+        this.isGroupField = isGroupField;
+        this.isArrayField = isArrayField;
+        this.isArrayFieldTable = isArrayFieldTable;
+        this.convertBooleanSwitchValue = convertBooleanSwitchValue;
+        this.loading$ = new BehaviorSubject(false);
+        this.PASSWORD_REVEAL = PASSWORD_REVEAL;
+        this.isBasicTypeField = (filed) => ![
+            SpecCapability.object,
+            SpecCapability.array,
+            SpecCapability.password,
+            SpecCapability.confirmPassword,
+            SpecCapability.externalPassword,
+        ].includes(getFieldType(filed));
+        this.viewActions = viewActions;
+        this.viewOptions = yamlReadOptions;
+        this.crdForm = inject(CRD_FORM_CONTEXT);
+        this.http = inject(HttpClient);
+        this.cdr = inject(ChangeDetectorRef);
+        this.getWidgets = (capabilities) => {
+            const descriptor = capabilities.find(c => c.startsWith(SpecCapability.widgets));
+            return descriptor
+                ? this.crdForm.widgets?.find(w => w.descriptor === descriptor.split('?=')[0])
+                : null;
+        };
+        this.dynamicOptionRefresh$$ = new BehaviorSubject(null);
+        this.dynamicOptionRefreshDisabled$$ = new BehaviorSubject(false);
+        this.dynamicOptionLoading$$ = new Subject();
+        this.dynamicExpression$ = this.field$.pipe(map$1(field => {
+            return new PropsFieldExpression(field).expressions;
+        }), publishRef());
+        this.dynamicOptions$ = this.field$.pipe(switchMap(field => {
+            const dynamicExpression = new PropsFieldExpression(field).expressions;
+            if (!dynamicExpression.options) {
+                return of(this.getSelectOptions(field).map(value => ({
+                    label: value,
+                    value,
+                })));
+            }
+            return combineLatest([
+                this.dynamicOptionRefresh$$,
+                combineLatest([this.crdForm.formContext$, this.formDataState$]).pipe(debounceTime(100), distinctUntilChanged((p, n) => compareWithSubscribedPaths(dynamicExpression, p, n)), tap(([formContext, formDataState]) => {
+                    if (this.crdForm.debug) {
+                        /* eslint-disable  no-console */
+                        console.log('field: ', field, 'formContext: ', formContext, 'formDataState: ', formDataState.toJS());
+                    }
+                })),
+            ]).pipe(map$1(([, [formContext, formDataState]]) => [formContext, formDataState]), tap(() => {
+                this.dynamicOptionLoading$$.next(true);
+            }), switchMap(([formContext, formDataState]) => {
+                let result = [];
+                const { api, labelPath, valuePath, expression } = dynamicExpression.options;
+                const stringExpressionContext = this.getStringExpressionContext(formContext, formDataState);
+                // console.log('api: ', api);
+                const url = template(api)(stringExpressionContext);
+                this.dynamicOptionRefreshDisabled$$.next(url.includes('//'));
+                if (!api && expression) {
+                    result = evalInContext(expression, stringExpressionContext);
+                }
+                else {
+                    return stringExpressionContext.fetchResourceList(url, (item) => {
+                        const value = get(item, valuePath, '');
+                        return {
+                            label: get(item, labelPath, value),
+                            value,
+                        };
+                    });
+                }
+                return isObservable(result) ? result : of(result);
+            }), tap(() => {
+                this.dynamicOptionLoading$$.next(false);
+            }));
+        }), publishRef());
+        this.staticDefaultValue$ = this.field$.pipe(switchMap(field => {
+            const defaultValueExpression = new PropsFieldExpression(field)
+                .expressions;
+            if (!defaultValueExpression.default ||
+                this.getFieldCurrentValue() !== undefined) {
+                return of({
+                    value: this.getFieldValue(),
+                    isDynamic: false,
+                });
+            }
+            return combineLatest([
+                this.crdForm.formContext$,
+                this.formDataState$,
+            ]).pipe(distinctUntilChanged((p, n) => compareWithSubscribedPaths(defaultValueExpression, p, n)), map$1(([formContext, formDataState]) => template(defaultValueExpression.default)(this.getStringExpressionContext(formContext, formDataState))), map$1(value => ({
+                value,
+                isDynamic: true,
+            })));
+        }), publishRef());
+        this.dynamicHiddenValue$ = this.field$.pipe(switchMap(field => {
+            const { expressions } = new PropsFieldExpression(field);
+            if (!expressions.hidden) {
+                return of(false);
+            }
+            return combineLatest([
+                this.crdForm.formContext$,
+                this.formDataState$,
+            ]).pipe(distinctUntilChanged((p, n) => compareWithSubscribedPaths(expressions, p, n)), map$1(([formContext, formDataState]) => template(expressions.hidden)(this.getStringExpressionContext(formContext, formDataState)) === 'true'));
+        }));
+        this.getStringExpressionContext = (formContext, formDataState) => ({
+            fetchResourceList: this.fetchResourceList,
+            context: formContext || {},
+            formData: formDataState.toJS()?.spec || {},
+        });
+        this.fetchResourceList = (url, callback) => {
+            // 例如 '/kubernetes/global/api/v1/namespaces//secrets' 表示 formData.namespace 没有插值
+            if (url.includes('//')) {
+                return of([]);
+            }
+            this.loading$.next(true);
+            return this.http
+                .get(`${API_GATEWAY}${url}`)
+                .pipe(map$1(res => res.items.map(item => callback.call(this, item))), skipError([]), finalize(() => {
+                this.loading$.next(false);
+            }));
+        };
+    }
+    get isDisabled() {
+        return this.readonly || this.field?.disabled;
+    }
+    get effectControlDefaultValue() {
+        return this.crdForm.effectControlDefaultValue;
+    }
+    get isRequired() {
+        return isRequired(this.field);
+    }
+    get isCreatable() {
+        return isCreatable(this.field);
+    }
+    get isMultiple() {
+        return isMultiple(this.field);
+    }
+    get isAllowCreate() {
+        return isAllowCreate(this.field);
+    }
+    get isClearable() {
+        return isClearable(this.field);
+    }
+    // 通过hidden属性隐藏不必要的元素，和 aclScrollToFirstInvalid 指令过滤隐藏元素保持一致
+    get isHidden() {
+        return ((this.hasFieldDependency() && !this.checkFieldDependency(this.field)) ||
+            this._hidden);
+    }
+    set isHidden(hidden) {
+        this._hidden = hidden;
+        this.cdr.markForCheck();
+    }
+    get isCustomErrorsMapper() {
+        return getFieldType(this.field) === SpecCapability.resourceRequirements;
+    }
+    registerControl() {
+        this.crdForm.controlMap.set(getOperandPath(this.field), this.control);
+    }
+    unRegisterControl() {
+        this.crdForm.controlMap.delete(getOperandPath(this.field));
+    }
+    ngOnInit() {
+        this.dynamicHiddenValue$.subscribe(value => {
+            this.isHidden = value;
+        });
+        this.registerControl();
+        if (this.field.validations) {
+            const validators = map(this.field.validations, (val, rule) => {
+                switch (rule) {
+                    case Validations.maximum: {
+                        return Validators.max(val);
+                    }
+                    case Validations.minimum: {
+                        return Validators.min(val);
+                    }
+                    case Validations.required: {
+                        return Validators.required;
+                    }
+                    case Validations.maxLength: {
+                        return Validators.maxLength(val);
+                    }
+                    case Validations.minLength: {
+                        return Validators.minLength(val);
+                    }
+                    case Validations.pattern: {
+                        return Validators.pattern(val);
+                    }
+                    default: {
+                        return null;
+                    }
+                }
+            }).filter(v => !!v);
+            if (validators.length) {
+                this.control.addValidators((this._validators = validators));
+            }
+        }
+    }
+    // 将 valueChanges 的逻辑移动到 ngAfterViewInit 中，主要是为了避免全局 ValidatorsDirective带来的影响，需要等到ValidatorsDirective的ngAfterViewInit之后再订阅control的valueChanges
+    ngAfterViewInit() {
+        this.control.valueChanges
+            .pipe(startWithCondition(this.effectControlDefaultValue, this.control.value), debounceTime(50), distinctUntilChanged(), takeUntil(this.onDestroy$), filter(v => 
+        // FIXME: This is hack. yaml value will only be null if format error(because try-catch), the data flow now is from control => formDataState => control(will judge equality)，this will make control be empty
+        getFieldType(this.field) === SpecCapability.yaml ? v !== null : true))
+            .subscribe(value => {
+            this.valueChange.emit({
+                field: this.field,
+                data: value,
+                errors: this.control.errors,
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+        this.unRegisterControl();
+        if (this._validators?.length) {
+            this.control.removeValidators(this._validators);
+        }
+    }
+    ngOnChanges({ formDataState }) {
+        if (this.field && formDataState?.firstChange) {
+            this.staticDefaultValue$
+                .pipe(take(1), filter(({ value }) => value !== undefined))
+                .subscribe(({ value, isDynamic }) => {
+                this.control.setValue(value, { emitEvent: isDynamic });
+            });
+        }
+        else if (formDataState?.currentValue) {
+            const currentValue = getFormData(formDataState.currentValue, this.field.path, false);
+            const prevValue = getFormData(formDataState.previousValue, this.field.path, false);
+            const rawValue = isImmutable(currentValue)
+                ? currentValue.toJS()
+                : currentValue;
+            if (!isEqual(rawValue, prevValue) &&
+                !isEqual(rawValue, this.control.value)) {
+                this.control.setValue(rawValue);
+            }
+        }
+    }
+    getFieldCurrentValue() {
+        let value = getFormData(this.formDataState, this.field.path, false);
+        // 如果值是 Immutable object 类型，需要转成原始 JS Object
+        if (isImmutable(value)) {
+            value = value.toJS();
+        }
+        return value;
+    }
+    getFieldValue(useDefault = true) {
+        const currentValue = this.getFieldCurrentValue();
+        if (currentValue === undefined && useDefault) {
+            return getDefaultValue(this.field);
+        }
+        return currentValue;
+    }
+    getOptionDisplay(value, options) {
+        return options.find(item => item.value === value)?.display;
+    }
+    getSelectOptions(field) {
+        return field.capabilities
+            .filter(c => c.startsWith(SpecCapability.select))
+            .map(c => c.split(SpecCapability.select)?.[1]);
+    }
+    getEncoding(field, type) {
+        const prefix = `urn:alm:descriptor:${type}:encoding:`;
+        const capability = field.capabilities.find(it => it.startsWith(prefix));
+        let encoding;
+        if (capability) {
+            encoding = ENCODING_MAPPER[capability.slice(prefix.length)];
+        }
+        return (encoding || {
+            encode: identity,
+            decode: identity,
+        });
+    }
+    hasFieldDependency() {
+        return this.field.capabilities.some(c => c.startsWith(SpecCapability.fieldDependency));
+    }
+    checkFieldDependency(field) {
+        try {
+            const dependencies = field?.capabilities
+                .filter(c => c.startsWith(SpecCapability.fieldDependency))
+                .map(i => i.split(SpecCapability.fieldDependency)[1]);
+            if (!dependencies?.length) {
+                return true;
+            }
+            const parentPaths = dependencies.map(d => d.split(':'));
+            const state = parentPaths.every(([path, ...values]) => {
+                // Support depend one of values
+                const dependencyField = this.fields.find(f => f.path === normalizePath(path));
+                const dependencyDefaultValue = getDefaultValue(dependencyField);
+                const formStateValue = getFormData(this.formDataState, path);
+                const currentValue = formStateValue === null || formStateValue === undefined
+                    ? dependencyDefaultValue
+                    : formStateValue;
+                return values.some(val => convertValue(val, dependencyField.type) === currentValue);
+            });
+            /**
+             * 父 field dependency 不满足时，即隐藏时，本 field 也应当隐藏。
+             * 因为在大部分情形下，fieldDependency 与 oneOf 搭配来描述一组关联关系，很少只有 b 仅依赖于 a，当 a 隐藏后，还要根据 a 的默认值要求显示 b 的情况，
+             * 对于该情况，可以多加一个配备了额外 fieldDependency 的 Descriptor 来描述 b
+             */
+            return (parentPaths.every(([path]) => this.checkFieldDependency(this.fields.find(i => i.path === path))) && state);
+        }
+        catch (error) {
+            console.error(error);
+            return false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OperandFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: OperandFieldComponent, isStandalone: true, selector: "acl-operand-field", inputs: { field: "field", readonly: "readonly", fields: "fields", formDataState: "formDataState", formErrors: "formErrors" }, outputs: { valueChange: "valueChange", itemRemove: "itemRemove" }, host: { properties: { "hidden": "this.isHidden" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\">\n  <ng-container\n    *ngIf=\"{\n      fieldType: field | pure: getFieldType,\n      isBasicTypeField: field | pure: isBasicTypeField,\n    } as meta\"\n  >\n    <ng-container *ngIf=\"meta.isBasicTypeField; else advancedFiled\">\n      <acl-crd-form-item\n        *ngIf=\"!(field.capabilities | pure: getWidgets)\"\n        [ngSwitch]=\"meta.fieldType\"\n      >\n        <input\n          *ngSwitchCase=\"SpecCapability.number\"\n          type=\"number\"\n          aui-input\n          auiFormItemControl\n          [required]=\"isRequired\"\n          [formControl]=\"control\"\n          [aclReadonlyField]=\"isDisabled\"\n          [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n        />\n        <ng-container *ngSwitchCase=\"SpecCapability.booleanSwitch\">\n          <aui-switch\n            auiFormItemControl\n            [aclReadonlyField]=\"isDisabled\"\n            [aclReadonlyFieldTemplate]=\"switchReadonly\"\n            [formControl]=\"control\"\n          ></aui-switch>\n          <ng-template #switchReadonly>{{\n            control.value\n              | pure: convertBooleanSwitchValue : field.capabilities\n              | translate\n          }}</ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SpecCapability.select\">\n          <aui-multi-select\n            *ngIf=\"isMultiple\"\n            [maxRowCount]=\"3\"\n            auiFormItemControl\n            [clearable]=\"true\"\n            [filterable]=\"true\"\n            [formControl]=\"control\"\n            [required]=\"isRequired\"\n            [aclReadonlyField]=\"isDisabled\"\n            [loading]=\"loading$ | async\"\n            [allowCreate]=\"isAllowCreate\"\n          >\n            <aui-option\n              *ngFor=\"let option of dynamicOptions$ | async\"\n              [value]=\"option.value\"\n              [label]=\"option.label\"\n            >\n              {{ option.label }}\n            </aui-option>\n            <aui-option-placeholder>{{\n              'no_data' | translate\n            }}</aui-option-placeholder>\n          </aui-multi-select>\n\n          <aui-select\n            *ngIf=\"!isMultiple\"\n            auiFormItemControl\n            [clearable]=\"true\"\n            [filterable]=\"true\"\n            [formControl]=\"control\"\n            [required]=\"isRequired\"\n            [aclReadonlyField]=\"isDisabled\"\n            [loading]=\"loading$ | async\"\n            [allowCreate]=\"isAllowCreate\"\n          >\n            <aui-option\n              *ngFor=\"let option of dynamicOptions$ | async\"\n              [value]=\"option.value\"\n              [label]=\"option.label | aclParseJsonTranslate\"\n            >\n              {{ option.label | aclParseJsonTranslate }}\n            </aui-option>\n            <aui-option-placeholder>{{\n              'no_data' | translate\n            }}</aui-option-placeholder>\n          </aui-select>\n\n          <button\n            *ngIf=\"(dynamicExpression$ | async).options\"\n            style=\"margin-left: 4px\"\n            aui-button\n            type=\"button\"\n            [square]=\"true\"\n            [disabled]=\"\n              (dynamicOptionRefreshDisabled$$ | async) ||\n              (dynamicOptionLoading$$ | async)\n            \"\n            [loading]=\"dynamicOptionLoading$$ | async\"\n            (click)=\"dynamicOptionRefresh$$.next()\"\n          >\n            <aui-icon icon=\"rotate_right\"></aui-icon>\n          </button>\n        </ng-container>\n        <aui-radio-group\n          *ngSwitchCase=\"SpecCapability.radio\"\n          auiFormItemControl\n          [formControl]=\"control\"\n          [required]=\"isRequired\"\n          [aclReadonlyField]=\"isDisabled\"\n          [aclReadonlyFieldTemplate]=\"radioLabel\"\n        >\n          <ng-container>\n            <aui-radio-button\n              *ngFor=\"let option of field.capabilities | pure: getRadioOptions\"\n              [value]=\"option.value\"\n            >\n              {{ option.display | translate }}\n            </aui-radio-button>\n            <ng-template #radioLabel>\n              {{\n                control.value\n                  | pure\n                    : getOptionDisplay\n                    : (field.capabilities | pure: getRadioOptions)\n                  | translate\n              }}\n            </ng-template>\n          </ng-container>\n        </aui-radio-group>\n        <ng-container *ngSwitchCase=\"SpecCapability.resourceRequirements\">\n          <acl-crd-resource-requirements\n            auiFormItemControl\n            [required]=\"isRequired\"\n            [formControl]=\"control\"\n            [aclReadonlyField]=\"isDisabled\"\n            [aclReadonlyFieldTemplate]=\"resourceRequirementsReadonly\"\n          ></acl-crd-resource-requirements>\n          <ng-template #resourceRequirementsReadonly>\n            <acl-crd-resource-requirements\n              auiFormItemControl\n              [ngModel]=\"control.value\"\n              [readOnly]=\"true\"\n            ></acl-crd-resource-requirements>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SpecCapability.yaml\">\n          <acl-crd-yaml-editor\n            auiFormItemControl\n            [formControl]=\"control\"\n            [required]=\"isRequired\"\n            [actionsConfig]=\"editorActions\"\n            [options]=\"editorOptions\"\n            [aclReadonlyField]=\"isDisabled\"\n            [aclReadonlyFieldTemplate]=\"yamlReadonly\"\n          ></acl-crd-yaml-editor>\n          <ng-template #yamlReadonly>\n            <acl-crd-yaml-editor\n              auiFormItemControl\n              [ngModel]=\"control.value\"\n              [actionsConfig]=\"viewActions\"\n              [options]=\"viewOptions\"\n            ></acl-crd-yaml-editor>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SpecCapability.k8sResourcePrefix\">\n          <acl-crd-resource-prefix\n            auiFormItemControl\n            [formErrors]=\"control.errors\"\n            [field]=\"field\"\n            [required]=\"isRequired\"\n            [formControl]=\"control\"\n            [aclReadonlyField]=\"isDisabled\"\n            [aclReadonlyFieldTemplate]=\"resourcePrefixReadonly\"\n          ></acl-crd-resource-prefix>\n          <ng-template #resourcePrefixReadonly>\n            <acl-crd-resource-prefix\n              auiFormItemControl\n              [field]=\"field\"\n              [ngModel]=\"control.value\"\n              [readonly]=\"true\"\n            ></acl-crd-resource-prefix>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SpecCapability.basicAuthSecret\">\n          <acl-crd-basic-auth-secret\n            auiFormItemControl\n            [field]=\"field\"\n            [required]=\"isRequired\"\n            [formControl]=\"control\"\n            [aclReadonlyField]=\"isDisabled\"\n          ></acl-crd-basic-auth-secret>\n        </ng-container>\n        <textarea\n          *ngSwitchCase=\"SpecCapability.textarea\"\n          auiFormItemControl\n          aui-input\n          [required]=\"isRequired\"\n          [formControl]=\"control\"\n          [aclReadonlyField]=\"isDisabled\"\n          [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n        ></textarea>\n        <aui-tags-input\n          *ngSwitchCase=\"SpecCapability.tagsInput\"\n          auiFormItemControl\n          class=\"tw-flex-1\"\n          [required]=\"isRequired\"\n          [formControl]=\"control\"\n          [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n          [aclReadonlyField]=\"isDisabled\"\n          [clearable]=\"isClearable\"\n        ></aui-tags-input>\n        <ng-container *ngSwitchDefault>\n          <acl-crd-link\n            *ngIf=\"(field | pure: isLink) && isDisabled; else textField\"\n            auiFormItemControl\n            [field]=\"field\"\n            [formControl]=\"control\"\n          ></acl-crd-link>\n        </ng-container>\n        <ng-template #textField>\n          <input\n            type=\"text\"\n            auiFormItemControl\n            [required]=\"isRequired\"\n            aui-input\n            [formControl]=\"control\"\n            [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n            [aclReadonlyField]=\"isDisabled\"\n          />\n        </ng-template>\n      </acl-crd-form-item>\n      <div\n        class=\"tw-flex tw-w-full tw-flex-col\"\n        *ngIf=\"field.capabilities | pure: getWidgets as widget\"\n      >\n        <ng-container *ngComponentOutlet=\"widget.component\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-template #advancedFiled>\n      <ng-container\n        *ngIf=\"\n          meta.fieldType === SpecCapability.password ||\n          meta.fieldType === SpecCapability.confirmPassword ||\n          meta.fieldType === SpecCapability.externalPassword\n        \"\n      >\n        <acl-crd-form-item\n          *ngIf=\"isDisabled\"\n          [plain]=\"true\"\n        >\n          <ng-container *ngTemplateOutlet=\"passwordView\"></ng-container>\n        </acl-crd-form-item>\n        <acl-password-input\n          *ngIf=\"!isDisabled\"\n          [initPassword]=\"control.value\"\n          [label]=\"field | pure: getFieldDisplayName | translate\"\n          [hint]=\"field | pure: getFieldDescription | translate\"\n          [formControl]=\"control\"\n          [required]=\"isRequired\"\n          [readonly]=\"crdForm.readonly\"\n          [isUpdate]=\"!!control.value && !control.dirty\"\n          [strongPassword]=\"meta.fieldType !== SpecCapability.externalPassword\"\n          [enableConfirm]=\"meta.fieldType === SpecCapability.confirmPassword\"\n          width=\"large\"\n          [encoding]=\"field | pure: getEncoding : 'password'\"\n          [pattern]=\"field.validations?.pattern\"\n          [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n        ></acl-password-input>\n      </ng-container>\n      <!-- group field  -->\n      <ng-container *ngIf=\"isGroupField(field) && field.fieldList?.length > 0\">\n        <acl-operand-field-group\n          [fields]=\"fields\"\n          [fieldGroup]=\"field\"\n          [readonly]=\"isDisabled\"\n          [formDataState]=\"formDataState\"\n          [formErrors]=\"formErrors\"\n          (valueChange)=\"valueChange.emit($event)\"\n        >\n        </acl-operand-field-group>\n      </ng-container>\n      <!-- array field groups -->\n      <!-- array field table -->\n      <ng-container *ngIf=\"isArrayField(field)\">\n        <acl-crd-array-table\n          *ngIf=\"field | pure: isArrayFieldTable; else defaultArrayFiled\"\n          [arrayFieldGroup]=\"field\"\n          [formDataState]=\"formDataState\"\n          [readonly]=\"isDisabled\"\n          (valueChange)=\"valueChange.emit($event)\"\n        >\n        </acl-crd-array-table>\n        <ng-template #defaultArrayFiled>\n          <acl-operand-array-field-group\n            [arrayFieldGroup]=\"field\"\n            [fields]=\"fields\"\n            [readonly]=\"isDisabled\"\n            [formDataState]=\"formDataState\"\n            (valueChange)=\"valueChange.emit($event)\"\n          >\n          </acl-operand-array-field-group>\n        </ng-template>\n      </ng-container>\n    </ng-template>\n  </ng-container>\n</ng-container>\n\n<ng-template #passwordView>\n  {{ PASSWORD_REVEAL }}\n</ng-template>\n", styles: [":host .input-group{width:100%}:host ::ng-deep .aui-form-item__label-wrapper:not(.hasLabel){display:none}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgSwitchCase), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgSwitchDefault), selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NumberValueAccessor), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i1.PatternValidator), selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormModule) }, { kind: "directive", type: i0.forwardRef(() => i2.FormItemControlDirective), selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "ngmodule", type: i0.forwardRef(() => InputModule) }, { kind: "component", type: i0.forwardRef(() => i2.InputComponent), selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "component", type: i0.forwardRef(() => i2.TagsInputComponent), selector: "aui-tags-input", inputs: ["placeholder", "size", "clearable", "allowRepeat", "allowEmpty", "readonlyTags", "maxRowCount", "customRowHeight", "inputValidator", "inputAsyncValidator"] }, { kind: "ngmodule", type: i0.forwardRef(() => SelectModule) }, { kind: "component", type: i0.forwardRef(() => i2.SelectComponent), selector: "aui-select" }, { kind: "component", type: i0.forwardRef(() => i2.OptionComponent), selector: "aui-option", inputs: ["label", "labelContext", "value", "disabled"] }, { kind: "component", type: i0.forwardRef(() => i2.OptionPlaceholderComponent), selector: "aui-option-placeholder" }, { kind: "component", type: i0.forwardRef(() => i2.MultiSelectComponent), selector: "aui-multi-select", inputs: ["tagClassFn", "maxRowCount", "customRowHeight", "allowSelectAll"] }, { kind: "ngmodule", type: i0.forwardRef(() => RadioModule) }, { kind: "component", type: i0.forwardRef(() => i2.RadioGroupComponent), selector: "aui-radio-group", inputs: ["size", "direction", "plain", "name"] }, { kind: "component", type: i0.forwardRef(() => i2.RadioButtonComponent), selector: "aui-radio-button" }, { kind: "ngmodule", type: i0.forwardRef(() => SwitchModule) }, { kind: "component", type: i0.forwardRef(() => i2.SwitchComponent), selector: "aui-switch", inputs: ["loading"] }, { kind: "ngmodule", type: i0.forwardRef(() => TagModule) }, { kind: "ngmodule", type: i0.forwardRef(() => IconModule) }, { kind: "component", type: i0.forwardRef(() => i2.IconComponent), selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: i0.forwardRef(() => ButtonModule) }, { kind: "component", type: i0.forwardRef(() => i2.ButtonComponent), selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: i0.forwardRef(() => TooltipModule) }, { kind: "component", type: i0.forwardRef(() => FormItemComponent), selector: "acl-crd-form-item", inputs: ["plain"] }, { kind: "component", type: i0.forwardRef(() => OperandFieldGroupComponent), selector: "acl-operand-field-group", inputs: ["fields", "fieldGroup", "formDataState", "formErrors", "readonly"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => OperandArrayFieldGroupComponent), selector: "acl-operand-array-field-group" }, { kind: "component", type: i0.forwardRef(() => CrdFormArrayTableComponent), selector: "acl-crd-array-table" }, { kind: "component", type: i0.forwardRef(() => ResourceRequirementsComponent), selector: "acl-crd-resource-requirements", inputs: ["readOnly", "field"] }, { kind: "component", type: i0.forwardRef(() => YamlEditorComponent), selector: "acl-crd-yaml-editor", inputs: ["actionsConfig", "options"] }, { kind: "component", type: i0.forwardRef(() => K8sResourcePrefixComponent), selector: "acl-crd-resource-prefix", inputs: ["field", "readonly", "formErrors"] }, { kind: "component", type: i0.forwardRef(() => BasicAuthSecretComponent), selector: "acl-crd-basic-auth-secret", inputs: ["required", "field"] }, { kind: "component", type: i0.forwardRef(() => LinkComponent), selector: "acl-crd-link", inputs: ["field"] }, { kind: "component", type: i0.forwardRef(() => PasswordInputComponent), selector: "acl-password-input", inputs: ["initPassword", "label", "hint", "specialChars", "strongPassword", "enableConfirm", "width", "toggleable", "pattern", "encoding", "placeholder", "readonly", "isUpdate", "required"] }, { kind: "directive", type: i0.forwardRef(() => ReadonlyFieldDirective), selector: "[aclReadonlyField]", inputs: ["aclReadonlyField", "hidden", "aclReadonlyFieldTemplate", "aclReadonlyFieldTemplateContext"] }, { kind: "pipe", type: i0.forwardRef(() => i1$1.AsyncPipe), name: "async" }, { kind: "pipe", type: i0.forwardRef(() => ParseJsonTranslatePipe), name: "aclParseJsonTranslate" }, { kind: "pipe", type: i0.forwardRef(() => PurePipe), name: "pure" }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], OperandFieldComponent.prototype, "field$", void 0);
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], OperandFieldComponent.prototype, "formDataState$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OperandFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-operand-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FormModule,
+                        InputModule,
+                        SelectModule,
+                        RadioModule,
+                        SwitchModule,
+                        TagModule,
+                        IconModule,
+                        ButtonModule,
+                        TooltipModule,
+                        forwardRef(() => FormItemComponent),
+                        forwardRef(() => OperandFieldGroupComponent),
+                        forwardRef(() => OperandArrayFieldGroupComponent),
+                        forwardRef(() => CrdFormArrayTableComponent),
+                        forwardRef(() => ResourceRequirementsComponent),
+                        forwardRef(() => YamlEditorComponent),
+                        K8sResourcePrefixComponent,
+                        BasicAuthSecretComponent,
+                        LinkComponent,
+                        PasswordInputComponent,
+                        ReadonlyFieldDirective,
+                        ParseJsonTranslatePipe,
+                        PurePipe,
+                        TranslatePipe,
+                    ], template: "<ng-container *ngIf=\"field\">\n  <ng-container\n    *ngIf=\"{\n      fieldType: field | pure: getFieldType,\n      isBasicTypeField: field | pure: isBasicTypeField,\n    } as meta\"\n  >\n    <ng-container *ngIf=\"meta.isBasicTypeField; else advancedFiled\">\n      <acl-crd-form-item\n        *ngIf=\"!(field.capabilities | pure: getWidgets)\"\n        [ngSwitch]=\"meta.fieldType\"\n      >\n        <input\n          *ngSwitchCase=\"SpecCapability.number\"\n          type=\"number\"\n          aui-input\n          auiFormItemControl\n          [required]=\"isRequired\"\n          [formControl]=\"control\"\n          [aclReadonlyField]=\"isDisabled\"\n          [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n        />\n        <ng-container *ngSwitchCase=\"SpecCapability.booleanSwitch\">\n          <aui-switch\n            auiFormItemControl\n            [aclReadonlyField]=\"isDisabled\"\n            [aclReadonlyFieldTemplate]=\"switchReadonly\"\n            [formControl]=\"control\"\n          ></aui-switch>\n          <ng-template #switchReadonly>{{\n            control.value\n              | pure: convertBooleanSwitchValue : field.capabilities\n              | translate\n          }}</ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SpecCapability.select\">\n          <aui-multi-select\n            *ngIf=\"isMultiple\"\n            [maxRowCount]=\"3\"\n            auiFormItemControl\n            [clearable]=\"true\"\n            [filterable]=\"true\"\n            [formControl]=\"control\"\n            [required]=\"isRequired\"\n            [aclReadonlyField]=\"isDisabled\"\n            [loading]=\"loading$ | async\"\n            [allowCreate]=\"isAllowCreate\"\n          >\n            <aui-option\n              *ngFor=\"let option of dynamicOptions$ | async\"\n              [value]=\"option.value\"\n              [label]=\"option.label\"\n            >\n              {{ option.label }}\n            </aui-option>\n            <aui-option-placeholder>{{\n              'no_data' | translate\n            }}</aui-option-placeholder>\n          </aui-multi-select>\n\n          <aui-select\n            *ngIf=\"!isMultiple\"\n            auiFormItemControl\n            [clearable]=\"true\"\n            [filterable]=\"true\"\n            [formControl]=\"control\"\n            [required]=\"isRequired\"\n            [aclReadonlyField]=\"isDisabled\"\n            [loading]=\"loading$ | async\"\n            [allowCreate]=\"isAllowCreate\"\n          >\n            <aui-option\n              *ngFor=\"let option of dynamicOptions$ | async\"\n              [value]=\"option.value\"\n              [label]=\"option.label | aclParseJsonTranslate\"\n            >\n              {{ option.label | aclParseJsonTranslate }}\n            </aui-option>\n            <aui-option-placeholder>{{\n              'no_data' | translate\n            }}</aui-option-placeholder>\n          </aui-select>\n\n          <button\n            *ngIf=\"(dynamicExpression$ | async).options\"\n            style=\"margin-left: 4px\"\n            aui-button\n            type=\"button\"\n            [square]=\"true\"\n            [disabled]=\"\n              (dynamicOptionRefreshDisabled$$ | async) ||\n              (dynamicOptionLoading$$ | async)\n            \"\n            [loading]=\"dynamicOptionLoading$$ | async\"\n            (click)=\"dynamicOptionRefresh$$.next()\"\n          >\n            <aui-icon icon=\"rotate_right\"></aui-icon>\n          </button>\n        </ng-container>\n        <aui-radio-group\n          *ngSwitchCase=\"SpecCapability.radio\"\n          auiFormItemControl\n          [formControl]=\"control\"\n          [required]=\"isRequired\"\n          [aclReadonlyField]=\"isDisabled\"\n          [aclReadonlyFieldTemplate]=\"radioLabel\"\n        >\n          <ng-container>\n            <aui-radio-button\n              *ngFor=\"let option of field.capabilities | pure: getRadioOptions\"\n              [value]=\"option.value\"\n            >\n              {{ option.display | translate }}\n            </aui-radio-button>\n            <ng-template #radioLabel>\n              {{\n                control.value\n                  | pure\n                    : getOptionDisplay\n                    : (field.capabilities | pure: getRadioOptions)\n                  | translate\n              }}\n            </ng-template>\n          </ng-container>\n        </aui-radio-group>\n        <ng-container *ngSwitchCase=\"SpecCapability.resourceRequirements\">\n          <acl-crd-resource-requirements\n            auiFormItemControl\n            [required]=\"isRequired\"\n            [formControl]=\"control\"\n            [aclReadonlyField]=\"isDisabled\"\n            [aclReadonlyFieldTemplate]=\"resourceRequirementsReadonly\"\n          ></acl-crd-resource-requirements>\n          <ng-template #resourceRequirementsReadonly>\n            <acl-crd-resource-requirements\n              auiFormItemControl\n              [ngModel]=\"control.value\"\n              [readOnly]=\"true\"\n            ></acl-crd-resource-requirements>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SpecCapability.yaml\">\n          <acl-crd-yaml-editor\n            auiFormItemControl\n            [formControl]=\"control\"\n            [required]=\"isRequired\"\n            [actionsConfig]=\"editorActions\"\n            [options]=\"editorOptions\"\n            [aclReadonlyField]=\"isDisabled\"\n            [aclReadonlyFieldTemplate]=\"yamlReadonly\"\n          ></acl-crd-yaml-editor>\n          <ng-template #yamlReadonly>\n            <acl-crd-yaml-editor\n              auiFormItemControl\n              [ngModel]=\"control.value\"\n              [actionsConfig]=\"viewActions\"\n              [options]=\"viewOptions\"\n            ></acl-crd-yaml-editor>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SpecCapability.k8sResourcePrefix\">\n          <acl-crd-resource-prefix\n            auiFormItemControl\n            [formErrors]=\"control.errors\"\n            [field]=\"field\"\n            [required]=\"isRequired\"\n            [formControl]=\"control\"\n            [aclReadonlyField]=\"isDisabled\"\n            [aclReadonlyFieldTemplate]=\"resourcePrefixReadonly\"\n          ></acl-crd-resource-prefix>\n          <ng-template #resourcePrefixReadonly>\n            <acl-crd-resource-prefix\n              auiFormItemControl\n              [field]=\"field\"\n              [ngModel]=\"control.value\"\n              [readonly]=\"true\"\n            ></acl-crd-resource-prefix>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"SpecCapability.basicAuthSecret\">\n          <acl-crd-basic-auth-secret\n            auiFormItemControl\n            [field]=\"field\"\n            [required]=\"isRequired\"\n            [formControl]=\"control\"\n            [aclReadonlyField]=\"isDisabled\"\n          ></acl-crd-basic-auth-secret>\n        </ng-container>\n        <textarea\n          *ngSwitchCase=\"SpecCapability.textarea\"\n          auiFormItemControl\n          aui-input\n          [required]=\"isRequired\"\n          [formControl]=\"control\"\n          [aclReadonlyField]=\"isDisabled\"\n          [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n        ></textarea>\n        <aui-tags-input\n          *ngSwitchCase=\"SpecCapability.tagsInput\"\n          auiFormItemControl\n          class=\"tw-flex-1\"\n          [required]=\"isRequired\"\n          [formControl]=\"control\"\n          [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n          [aclReadonlyField]=\"isDisabled\"\n          [clearable]=\"isClearable\"\n        ></aui-tags-input>\n        <ng-container *ngSwitchDefault>\n          <acl-crd-link\n            *ngIf=\"(field | pure: isLink) && isDisabled; else textField\"\n            auiFormItemControl\n            [field]=\"field\"\n            [formControl]=\"control\"\n          ></acl-crd-link>\n        </ng-container>\n        <ng-template #textField>\n          <input\n            type=\"text\"\n            auiFormItemControl\n            [required]=\"isRequired\"\n            aui-input\n            [formControl]=\"control\"\n            [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n            [aclReadonlyField]=\"isDisabled\"\n          />\n        </ng-template>\n      </acl-crd-form-item>\n      <div\n        class=\"tw-flex tw-w-full tw-flex-col\"\n        *ngIf=\"field.capabilities | pure: getWidgets as widget\"\n      >\n        <ng-container *ngComponentOutlet=\"widget.component\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-template #advancedFiled>\n      <ng-container\n        *ngIf=\"\n          meta.fieldType === SpecCapability.password ||\n          meta.fieldType === SpecCapability.confirmPassword ||\n          meta.fieldType === SpecCapability.externalPassword\n        \"\n      >\n        <acl-crd-form-item\n          *ngIf=\"isDisabled\"\n          [plain]=\"true\"\n        >\n          <ng-container *ngTemplateOutlet=\"passwordView\"></ng-container>\n        </acl-crd-form-item>\n        <acl-password-input\n          *ngIf=\"!isDisabled\"\n          [initPassword]=\"control.value\"\n          [label]=\"field | pure: getFieldDisplayName | translate\"\n          [hint]=\"field | pure: getFieldDescription | translate\"\n          [formControl]=\"control\"\n          [required]=\"isRequired\"\n          [readonly]=\"crdForm.readonly\"\n          [isUpdate]=\"!!control.value && !control.dirty\"\n          [strongPassword]=\"meta.fieldType !== SpecCapability.externalPassword\"\n          [enableConfirm]=\"meta.fieldType === SpecCapability.confirmPassword\"\n          width=\"large\"\n          [encoding]=\"field | pure: getEncoding : 'password'\"\n          [pattern]=\"field.validations?.pattern\"\n          [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n        ></acl-password-input>\n      </ng-container>\n      <!-- group field  -->\n      <ng-container *ngIf=\"isGroupField(field) && field.fieldList?.length > 0\">\n        <acl-operand-field-group\n          [fields]=\"fields\"\n          [fieldGroup]=\"field\"\n          [readonly]=\"isDisabled\"\n          [formDataState]=\"formDataState\"\n          [formErrors]=\"formErrors\"\n          (valueChange)=\"valueChange.emit($event)\"\n        >\n        </acl-operand-field-group>\n      </ng-container>\n      <!-- array field groups -->\n      <!-- array field table -->\n      <ng-container *ngIf=\"isArrayField(field)\">\n        <acl-crd-array-table\n          *ngIf=\"field | pure: isArrayFieldTable; else defaultArrayFiled\"\n          [arrayFieldGroup]=\"field\"\n          [formDataState]=\"formDataState\"\n          [readonly]=\"isDisabled\"\n          (valueChange)=\"valueChange.emit($event)\"\n        >\n        </acl-crd-array-table>\n        <ng-template #defaultArrayFiled>\n          <acl-operand-array-field-group\n            [arrayFieldGroup]=\"field\"\n            [fields]=\"fields\"\n            [readonly]=\"isDisabled\"\n            [formDataState]=\"formDataState\"\n            (valueChange)=\"valueChange.emit($event)\"\n          >\n          </acl-operand-array-field-group>\n        </ng-template>\n      </ng-container>\n    </ng-template>\n  </ng-container>\n</ng-container>\n\n<ng-template #passwordView>\n  {{ PASSWORD_REVEAL }}\n</ng-template>\n", styles: [":host .input-group{width:100%}:host ::ng-deep .aui-form-item__label-wrapper:not(.hasLabel){display:none}\n"] }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], field$: [], readonly: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], formDataState: [{
+                type: Input
+            }], formDataState$: [], formErrors: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], itemRemove: [{
+                type: Output
+            }], isHidden: [{
+                type: HostBinding,
+                args: ['hidden']
+            }] } });
+
+class OperandAdvancedFieldGroupComponent {
+    constructor() {
+        this.readonly = false;
+        this.valueChange = new EventEmitter();
+        this.expanded = false;
+        this.startCase = startCase;
+    }
+    fieldValueChange(e) {
+        this.valueChange.emit(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OperandAdvancedFieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OperandAdvancedFieldGroupComponent, isStandalone: true, selector: "acl-operand-advanced-field-group", inputs: { fields: "fields", fieldList: "fieldList", formDataState: "formDataState", formErrors: "formErrors", readonly: "readonly" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  [class.expanded]=\"expanded\"\n  class=\"field-group\"\n>\n  <div class=\"header\">\n    <div\n      class=\"title\"\n      (click)=\"expanded = !expanded\"\n    >\n      @if (!expanded) {\n        <aui-icon\n          size=\"20px,20px\"\n          icon=\"caret_down_s\"\n        ></aui-icon>\n      }\n      @if (expanded) {\n        <aui-icon\n          size=\"20px,20px\"\n          icon=\"caret_down_s\"\n        ></aui-icon>\n      }\n      <span>{{ 'advanced_fields' | translate }}</span>\n    </div>\n  </div>\n  <div\n    class=\"content\"\n    [hidden]=\"!expanded\"\n  >\n    @for (field of fieldList; track field) {\n      <acl-operand-field\n        [field]=\"field\"\n        [fields]=\"fields\"\n        [formDataState]=\"formDataState\"\n        [formErrors]=\"formErrors\"\n        [readonly]=\"readonly\"\n        (valueChange)=\"fieldValueChange($event)\"\n      >\n      </acl-operand-field>\n    }\n  </div>\n</div>\n", styles: [".field-group{border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-10));position:relative;margin-bottom:16px;border-radius:2px}.field-group .title{padding:0 20px;font-size:14px;font-weight:500;display:flex;align-items:center;height:60px;line-height:20px;color:rgb(var(--aui-color-n-1));cursor:pointer}.field-group .title aui-icon{margin-right:20px;font-size:20px}.field-group .description{display:block;padding-left:22px;font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.field-group:not(.expanded) aui-icon[icon=caret_down_s]{transform:rotate(-90deg)}.field-group.expanded>.header>.title{border-bottom:1px solid rgb(var(--aui-color-n-8))}.field-group.expanded>.header>.description{display:block;margin-top:4px}.field-group .content{padding:8px 12px}.field-group .content.no-title{padding-top:0}.field-group .array-item__remove{display:flex;justify-content:flex-end;margin-bottom:4px}.field-group .array-item__add,.field-group .array-item__remove{text-align:center}.field-group .array-item__add aui-icon,.field-group .array-item__remove aui-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => IconModule) }, { kind: "component", type: i0.forwardRef(() => i2.IconComponent), selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "component", type: i0.forwardRef(() => OperandFieldComponent), selector: "acl-operand-field", inputs: ["field", "readonly", "fields", "formDataState", "formErrors"], outputs: ["valueChange", "itemRemove"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OperandAdvancedFieldGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-operand-advanced-field-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TranslatePipe, IconModule, forwardRef(() => OperandFieldComponent)], template: "<div\n  [class.expanded]=\"expanded\"\n  class=\"field-group\"\n>\n  <div class=\"header\">\n    <div\n      class=\"title\"\n      (click)=\"expanded = !expanded\"\n    >\n      @if (!expanded) {\n        <aui-icon\n          size=\"20px,20px\"\n          icon=\"caret_down_s\"\n        ></aui-icon>\n      }\n      @if (expanded) {\n        <aui-icon\n          size=\"20px,20px\"\n          icon=\"caret_down_s\"\n        ></aui-icon>\n      }\n      <span>{{ 'advanced_fields' | translate }}</span>\n    </div>\n  </div>\n  <div\n    class=\"content\"\n    [hidden]=\"!expanded\"\n  >\n    @for (field of fieldList; track field) {\n      <acl-operand-field\n        [field]=\"field\"\n        [fields]=\"fields\"\n        [formDataState]=\"formDataState\"\n        [formErrors]=\"formErrors\"\n        [readonly]=\"readonly\"\n        (valueChange)=\"fieldValueChange($event)\"\n      >\n      </acl-operand-field>\n    }\n  </div>\n</div>\n", styles: [".field-group{border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-10));position:relative;margin-bottom:16px;border-radius:2px}.field-group .title{padding:0 20px;font-size:14px;font-weight:500;display:flex;align-items:center;height:60px;line-height:20px;color:rgb(var(--aui-color-n-1));cursor:pointer}.field-group .title aui-icon{margin-right:20px;font-size:20px}.field-group .description{display:block;padding-left:22px;font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.field-group:not(.expanded) aui-icon[icon=caret_down_s]{transform:rotate(-90deg)}.field-group.expanded>.header>.title{border-bottom:1px solid rgb(var(--aui-color-n-8))}.field-group.expanded>.header>.description{display:block;margin-top:4px}.field-group .content{padding:8px 12px}.field-group .content.no-title{padding-top:0}.field-group .array-item__remove{display:flex;justify-content:flex-end;margin-bottom:4px}.field-group .array-item__add,.field-group .array-item__remove{text-align:center}.field-group .array-item__add aui-icon,.field-group .array-item__remove aui-icon{margin-right:4px}\n"] }]
+        }], propDecorators: { fields: [{
+                type: Input
+            }], fieldList: [{
+                type: Input
+            }], formDataState: [{
+                type: Input
+            }], formErrors: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+// 去除 others 和 paths 中主 path 相同的部分
+function differPathsTag(paths, others) {
+    return differenceBy(paths, others, pathWithTag => getPathFromTagPath(pathWithTag));
+}
+function getAllOtherTagPath(fields, paths) {
+    return fields
+        .map(path => getOperandPath(path))
+        .filter(path => !paths.includes(path));
+}
+function matchValueAgainstOneOf(field, currentValue) {
+    // oneOfMap 里应当为 tagged path
+    const oneOfMap = getOneOfMap(field);
+    // 使用两个 set 处理多条 OneOf 中存在公共 path 的情形
+    const dirtyPathSet = new Set();
+    const validPathSet = new Set();
+    Object.entries(oneOfMap).forEach(([value, paths]) => {
+        paths.forEach(path => {
+            (convertValue(value, field.type) === currentValue
+                ? validPathSet
+                : dirtyPathSet).add(path);
+        });
+    });
+    return {
+        dirtyPaths: Array.from(dirtyPathSet)
+            .filter(i => !validPathSet.has(i))
+            .map(path => normalizePath(path)),
+        validPaths: Array.from(validPathSet).map(path => normalizePath(path)),
+    };
+}
+
+class CrdFormComponent {
+    constructor() {
+        this.debug = false;
+        this.openApiSchemaPath = SCHEMA_PATH;
+        this.readonly = false;
+        this.labelPosition = LabelPosition.Right;
+        this.formStateChange = new EventEmitter();
+        this.formSchemaChange = new EventEmitter();
+        this.formErrors = {};
+        // 一个全局的 controlMap，方便控制 field 主动校验。
+        // 该 controlMap 以及所有 field 里的 control 实例，都是为了数据追踪与错误同步（control.error -> crdForm error），本身不影响提交，由 crd-form 的 error 去阻塞提交。
+        this.controlMap = new Map();
+        // 被隐藏起来的表单的路径集合
+        this.dirtyPathsSet = new Set();
+    }
+    ngOnChanges({ openApiSchema, descriptors, data }) {
+        if (openApiSchema?.currentValue || descriptors?.currentValue) {
+            this.setUpForm();
+        }
+        else if (data?.currentValue) {
+            this.formDataState = fromJS(data.currentValue);
+        }
+    }
+    setUpForm() {
+        this.formDataState = fromJS(this.data || {});
+        const { normalFields, fieldGroups, arrayFieldGroups, advancedFields, descriptorFields, openApiFields, basicFields, treeFields, } = createCapabilityField(this.descriptors || [], this.openApiSchema || {}, this.data, this.openApiSchemaPath);
+        this.fields = basicFields.filter(fieldShouldReveal);
+        if (this.debug) {
+            /* eslint-disable  no-console */
+            console.info('openApiFields:', openApiFields);
+            console.info('descriptorFields:', descriptorFields);
+            console.info('basicFields:', basicFields);
+            console.info('normalFields', normalFields);
+            console.info('fieldGroups:', fieldGroups);
+            console.info('arrayFieldGroups:', arrayFieldGroups);
+            console.info('advancedFields:', advancedFields);
+            console.info('treeFields:', treeFields);
+            /* eslint-enable no-console */
+        }
+        this.normalFields = normalFields;
+        this.fieldGroups = fieldGroups;
+        this.arrayFieldGroups = arrayFieldGroups;
+        this.advancedFields = advancedFields;
+        this.formSchemaChange.emit({
+            openApiFields,
+            descriptorFields,
+        });
+    }
+    fieldValueChange(event) {
+        let onceDirtyPathsSet = new Set();
+        // TODO: 待review确认后移除该开关
+        if (this.formContext?.gates?.includes('onceDirtyPathsSet')) {
+            const operandPath = getOperandPath(event.field);
+            // 如果表单被隐藏且这次change是因为直接改变了包含该路径的父路径的值（例如编辑yaml）
+            // 那就阻止此子路径值的change逻辑
+            if (this.dirtyPathsSet.has(operandPath) &&
+                this._lastUpdateField?.path &&
+                operandPath.startsWith(`${this._lastUpdateField.path}.`)) {
+                return;
+            }
+        }
+        else {
+            onceDirtyPathsSet = this.dirtyPathsSet;
+        }
+        const eventData = event.data;
+        if (event.field.capabilities.some(c => c.startsWith(SpecCapability.oneOf))) {
+            const { dirtyPaths, validPaths } = this.resolveExpiredPath(event.field, eventData);
+            dirtyPaths.forEach(path => {
+                this.dirtyPathsSet.add(normalizePath(path));
+                onceDirtyPathsSet.add(normalizePath(path));
+            });
+            validPaths.forEach(path => {
+                this.updateValidPathValue(path);
+            });
+        }
+        const allOtherPaths = getAllOtherTagPath(this.fields, Array.from(onceDirtyPathsSet));
+        const removedPaths = uniq(
+        // 同一 path 可能有多个 tag，假设某个 tagged path 有效，则其对应 path 数据不应该删除
+        differPathsTag(Array.from(onceDirtyPathsSet), allOtherPaths).map(path => getPathFromTagPath(path))).filter(
+        // 只清空叶子结点，以适配 yaml 情况
+        path => !this.fields.some(field => {
+            const isParentPath = field.path.startsWith(`${path}.`);
+            if (isParentPath) {
+                // 该 field 亦为 dirty，不以为依据
+                return !onceDirtyPathsSet.has(field.path);
+            }
+            return false;
+        }));
+        if (eventData == null && !this.keepEmptyPath) {
+            if (!onceDirtyPathsSet.has(getOperandPath(event.field))) {
+                this.deleteFormData(event.field.path);
+            }
+        }
+        else {
+            this.updateFormData(event.field, eventData);
+        }
+        removedPaths.forEach(path => {
+            this.deleteFormData(path);
+        });
+        this.refreshValidation();
+        this.formStateChange.emit({
+            data: this.formDataState.toJS(),
+            errors: this.formErrors,
+        });
+    }
+    deleteFormData(path) {
+        this.formDataState = this.formDataState.deleteIn(pathToArray(path));
+        this.controlMap.get(path)?.setValue(null);
+        this.formStateChange.emit({
+            data: this.formDataState.toJS(),
+            errors: this.formErrors,
+        });
+    }
+    updateValidPathValue(path) {
+        // 如果有效路径是上一次的无效路径，则意味着该路径的值在上次被重置了，所以当该路径又需要显示给用户时应该使用默认值
+        const useDefault = this.dirtyPathsSet.has(normalizePath(path));
+        this.dirtyPathsSet.delete(normalizePath(path));
+        // 如果对一组表单都有依赖，那路径可能是这组表单的父路径，所以需要把所有子孙都找出来
+        const fields = getFieldsByPath(path, [
+            ...this.normalFields,
+            ...flattenDeep(this.fieldGroups.map(group => group.fieldList)),
+            ...flattenDeep(this.arrayFieldGroups.map(arrayGroup => arrayGroup.fieldLists)),
+            ...this.advancedFields,
+        ]);
+        fields.forEach(field => {
+            // 理论上 oneof 只影响视图，但实际还会影响 formDataState，所以需要同步更新 formDataState
+            let value = this.controlMap.get(getOperandPath(field)).value;
+            if (!value && useDefault) {
+                value = getDefaultValue(field);
+            }
+            this.updateFormData(field, value);
+        });
+    }
+    updateFormData(field, data) {
+        if (!field)
+            return;
+        const { match, index, pathBeforeIndex, pathAfterIndex } = parseArrayPath(field.path);
+        if (match && index === 0) {
+            this.formDataState = this.initializeFormDataArrayProperty(this.formDataState, pathBeforeIndex, pathAfterIndex, data);
+        }
+        this.formDataState = this.formDataState.setIn(pathToArray(field.path), data);
+        this._lastUpdateField = field;
+    }
+    refreshValidation() {
+        const errors = Array.from(this.controlMap).reduce((acc, [pathWithTag, control]) => {
+            if (this.dirtyPathsSet.has(pathWithTag)) {
+                return acc;
+            }
+            const path = getPathFromTagPath(pathWithTag);
+            acc[path] = isEmpty(control.errors) ? null : control.errors;
+            return acc;
+        }, {});
+        const result = fromPairs(Object.entries(errors ?? {}).filter(([_k, v]) => !!v));
+        this.formErrors = isEmpty(result) ? null : result;
+    }
+    // 当某个 field 发生数据变化，返回其相关 oneOf path 是否应该移除
+    // 仅当当前 field 中 oneOf 条件与当前数据不匹配，
+    resolveExpiredPath(field, currentValue) {
+        const { dirtyPaths, validPaths } = matchValueAgainstOneOf(field, currentValue);
+        const otherFieldStatus = this.fields
+            .filter(i => getOperandPath(i) !== getOperandPath(field))
+            .map(field => ({
+            path: getOperandPath(field),
+            result: matchValueAgainstOneOf(field, this.controlMap.get(getOperandPath(field))?.value),
+        }));
+        const newDirtyPaths = validPaths.filter(path => {
+            // 当前 valid path 在其他 field 中为 dirty，若该 field 本身也为 dirty 则忽略该影响，仍然判定为 valid，否则（该 field 有效）认定为 dirty
+            const fieldCandidates = otherFieldStatus.filter(status => status.result.dirtyPaths.includes(path));
+            return fieldCandidates.some(({ path }) => !otherFieldStatus.some(status => status.result.dirtyPaths.includes(path)));
+        });
+        return {
+            dirtyPaths: [...dirtyPaths, ...newDirtyPaths],
+            validPaths: validPaths.filter(path => !newDirtyPaths.includes(path)),
+        };
+    }
+    initializeFormDataArrayProperty(state, pathBeforeIndex, pathAfterIndex, value) {
+        if (state.getIn([...pathToArray(pathBeforeIndex), 0])) {
+            return state;
+        }
+        const item = Map$1({}).setIn(pathToArray(pathAfterIndex), value);
+        const list = List([item]);
+        return state.setIn(pathToArray(pathBeforeIndex), list);
+    }
+    submit() {
+        this.refreshValidation();
+        this.form.onSubmit(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CrdFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CrdFormComponent, isStandalone: true, selector: "acl-crd-form", inputs: { openApiSchema: "openApiSchema", descriptors: "descriptors", data: "data", debug: "debug", openApiSchemaPath: "openApiSchemaPath", readonly: "readonly", labelWidth: "labelWidth", labelPosition: "labelPosition", cluster: "cluster", namespace: "namespace", formContext: "formContext", keepEmptyPath: "keepEmptyPath", effectControlDefaultValue: "effectControlDefaultValue", uiContext: "uiContext", widgets: "widgets" }, outputs: { formStateChange: "formStateChange", formSchemaChange: "formSchemaChange" }, providers: [
+            {
+                provide: CRD_FORM_CONTEXT,
+                useExisting: CrdFormComponent,
+            },
+        ], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  auiForm\n  [aclScrollToFirstInvalid]=\"!!formErrors\"\n  #form=\"ngForm\"\n  [auiFormLabelPosition]=\"labelPosition\"\n  [auiFormLabelWidth]=\"labelWidth\"\n>\n  <!-- normal fields -->\n  @for (field of normalFields; track field) {\n    <acl-operand-field\n      [fields]=\"fields\"\n      [field]=\"field\"\n      [formDataState]=\"formDataState\"\n      [readonly]=\"readonly\"\n      (valueChange)=\"fieldValueChange($event)\"\n    >\n    </acl-operand-field>\n  }\n\n  <!-- field groups \u517C\u5BB9\uFF0C\u9700\u8981\u4FDD\u7559-->\n  @for (group of fieldGroups; track group) {\n    <acl-operand-field-group\n      [fields]=\"fields\"\n      [fieldGroup]=\"group\"\n      [formDataState]=\"formDataState\"\n      [formErrors]=\"formErrors\"\n      [readonly]=\"readonly\"\n      (valueChange)=\"fieldValueChange($event)\"\n    >\n    </acl-operand-field-group>\n  }\n\n  <!-- array field groups \u517C\u5BB9\uFF0C\u9700\u8981\u4FDD\u7559 -->\n  @for (group of arrayFieldGroups; track group) {\n    <acl-operand-array-field-group\n      [arrayFieldGroup]=\"group\"\n      [formDataState]=\"formDataState\"\n      [readonly]=\"readonly\"\n      (valueChange)=\"fieldValueChange($event)\"\n      (itemRemove)=\"deleteFormData($event)\"\n    >\n    </acl-operand-array-field-group>\n  }\n\n  <!-- advanced fields -->\n  @if (advancedFields?.length) {\n    <acl-operand-advanced-field-group\n      [fields]=\"fields\"\n      [fieldList]=\"advancedFields\"\n      [formDataState]=\"formDataState\"\n      [readonly]=\"readonly\"\n      (valueChange)=\"fieldValueChange($event)\"\n    ></acl-operand-advanced-field-group>\n  }\n</form>\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormModule) }, { kind: "directive", type: i0.forwardRef(() => i2.FormDirective), selector: "form[auiForm]", inputs: ["auiFormLabelWidth", "auiFormLabelPosition", "auiFormEmptyAddon", "auiFormInline"], exportAs: ["auiForm"] }, { kind: "component", type: i0.forwardRef(() => OperandFieldComponent), selector: "acl-operand-field", inputs: ["field", "readonly", "fields", "formDataState", "formErrors"], outputs: ["valueChange", "itemRemove"] }, { kind: "component", type: i0.forwardRef(() => OperandFieldGroupComponent), selector: "acl-operand-field-group", inputs: ["fields", "fieldGroup", "formDataState", "formErrors", "readonly"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => OperandArrayFieldGroupComponent), selector: "acl-operand-array-field-group" }, { kind: "component", type: i0.forwardRef(() => OperandAdvancedFieldGroupComponent), selector: "acl-operand-advanced-field-group", inputs: ["fields", "fieldList", "formDataState", "formErrors", "readonly"], outputs: ["valueChange"] }, { kind: "directive", type: i0.forwardRef(() => ScrollToFirstInvalidDirective), selector: "[aclScrollToFirstInvalid]", inputs: ["labelOffset", "aclScrollToFirstInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    ObservableInput(),
+    __metadata("design:type", Observable)
+], CrdFormComponent.prototype, "formContext$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CrdFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-crd-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, providers: [
+                        {
+                            provide: CRD_FORM_CONTEXT,
+                            useExisting: CrdFormComponent,
+                        },
+                    ], imports: [
+                        FormsModule,
+                        FormModule,
+                        forwardRef(() => OperandFieldComponent),
+                        forwardRef(() => OperandFieldGroupComponent),
+                        forwardRef(() => OperandArrayFieldGroupComponent),
+                        forwardRef(() => OperandAdvancedFieldGroupComponent),
+                        ScrollToFirstInvalidDirective,
+                    ], template: "<form\n  auiForm\n  [aclScrollToFirstInvalid]=\"!!formErrors\"\n  #form=\"ngForm\"\n  [auiFormLabelPosition]=\"labelPosition\"\n  [auiFormLabelWidth]=\"labelWidth\"\n>\n  <!-- normal fields -->\n  @for (field of normalFields; track field) {\n    <acl-operand-field\n      [fields]=\"fields\"\n      [field]=\"field\"\n      [formDataState]=\"formDataState\"\n      [readonly]=\"readonly\"\n      (valueChange)=\"fieldValueChange($event)\"\n    >\n    </acl-operand-field>\n  }\n\n  <!-- field groups \u517C\u5BB9\uFF0C\u9700\u8981\u4FDD\u7559-->\n  @for (group of fieldGroups; track group) {\n    <acl-operand-field-group\n      [fields]=\"fields\"\n      [fieldGroup]=\"group\"\n      [formDataState]=\"formDataState\"\n      [formErrors]=\"formErrors\"\n      [readonly]=\"readonly\"\n      (valueChange)=\"fieldValueChange($event)\"\n    >\n    </acl-operand-field-group>\n  }\n\n  <!-- array field groups \u517C\u5BB9\uFF0C\u9700\u8981\u4FDD\u7559 -->\n  @for (group of arrayFieldGroups; track group) {\n    <acl-operand-array-field-group\n      [arrayFieldGroup]=\"group\"\n      [formDataState]=\"formDataState\"\n      [readonly]=\"readonly\"\n      (valueChange)=\"fieldValueChange($event)\"\n      (itemRemove)=\"deleteFormData($event)\"\n    >\n    </acl-operand-array-field-group>\n  }\n\n  <!-- advanced fields -->\n  @if (advancedFields?.length) {\n    <acl-operand-advanced-field-group\n      [fields]=\"fields\"\n      [fieldList]=\"advancedFields\"\n      [formDataState]=\"formDataState\"\n      [readonly]=\"readonly\"\n      (valueChange)=\"fieldValueChange($event)\"\n    ></acl-operand-advanced-field-group>\n  }\n</form>\n", styles: [":host{width:100%}\n"] }]
+        }], propDecorators: { openApiSchema: [{
+                type: Input
+            }], descriptors: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], openApiSchemaPath: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], labelWidth: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], cluster: [{
+                type: Input
+            }], namespace: [{
+                type: Input
+            }], formContext: [{
+                type: Input
+            }], formContext$: [], keepEmptyPath: [{
+                type: Input
+            }], effectControlDefaultValue: [{
+                type: Input
+            }], uiContext: [{
+                type: Input
+            }], formStateChange: [{
+                type: Output
+            }], formSchemaChange: [{
+                type: Output
+            }], form: [{
+                type: ViewChild,
+                args: ['form', { static: true }]
+            }], widgets: [{
+                type: Input
+            }] } });
+
+const WIDGETS = [
+    CrdFormArrayTableComponent,
+    K8sResourcePrefixComponent,
+    ResourceRequirementsComponent,
+    YamlEditorComponent,
+    BasicAuthSecretComponent,
+    BasicAuthCreateSecretDialogComponent,
+];
+const EXPORTABLES = [
+    FormItemComponent,
+    OperandAdvancedFieldGroupComponent,
+    OperandArrayFieldGroupComponent,
+    OperandFieldGroupComponent,
+    OperandFieldComponent,
+    ...WIDGETS,
+];
+class FieldControlsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: FieldControlsModule, imports: [FormItemComponent,
+            OperandAdvancedFieldGroupComponent,
+            OperandArrayFieldGroupComponent,
+            OperandFieldGroupComponent,
+            OperandFieldComponent, CrdFormArrayTableComponent,
+            K8sResourcePrefixComponent,
+            ResourceRequirementsComponent,
+            YamlEditorComponent,
+            BasicAuthSecretComponent,
+            BasicAuthCreateSecretDialogComponent], exports: [FormItemComponent,
+            OperandAdvancedFieldGroupComponent,
+            OperandArrayFieldGroupComponent,
+            OperandFieldGroupComponent,
+            OperandFieldComponent, CrdFormArrayTableComponent,
+            K8sResourcePrefixComponent,
+            ResourceRequirementsComponent,
+            YamlEditorComponent,
+            BasicAuthSecretComponent,
+            BasicAuthCreateSecretDialogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldControlsModule, imports: [EXPORTABLES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldControlsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...EXPORTABLES],
+                    exports: EXPORTABLES,
+                }]
+        }] });
+
+function getFieldCapability(field, type, capabilityKey, language) {
+    const capabilities = field.capabilities;
+    let prefix = `urn:alm:descriptor:${type}:${capabilityKey}`;
+    if (language) {
+        prefix += `:${language}:`;
+    }
+    else {
+        prefix += ':';
+    }
+    const capability = capabilities?.find(c => c.startsWith(prefix));
+    return capability?.slice(prefix.length);
+}
+function getFieldLabel(field, type) {
+    return {
+        en: getFieldCapability(field, type, 'label', 'en'),
+        zh: getFieldCapability(field, type, 'label', 'zh'),
+    };
+}
+function getFieldDescription(field, type) {
+    return {
+        en: getFieldCapability(field, type, 'description', 'en'),
+        zh: getFieldCapability(field, type, 'description', 'zh'),
+    };
+}
+function getFieldPlaceholder(field, type) {
+    return {
+        en: getFieldCapability(field, type, 'placeholder', 'en'),
+        zh: getFieldCapability(field, type, 'placeholder', 'zh'),
+    };
+}
+function getUsernameDefaultValue(field) {
+    return getFieldCapability(field, 'username', 'default');
+}
+function isFieldDisabled(field, type) {
+    const capabilities = field.capabilities;
+    return !!capabilities?.find(c => c === `urn:alm:descriptor:${type}:disabled`);
+}
+
+class HtpasswdFormComponent extends BaseResourceFormComponent {
+    constructor() {
+        super(...arguments);
+        this.isDisabled = false;
+        // `null` is required because the default value is `null`,
+        // if it is `undefined` here, it will cause form value change event unexpectedly...
+        this.originalResource = null;
+        this.getFieldDescription = getFieldDescription;
+        this.isFieldDisabled = isFieldDisabled;
+        this.getFieldPlaceholder = getFieldPlaceholder;
+        this.getFieldLabel = getFieldLabel;
+    }
+    createForm() {
+        return this.fb.group({
+            username: '',
+            password: '',
+        });
+    }
+    adaptResourceModel(resource) {
+        let username = '';
+        if (resource) {
+            const parts = resource.split(':');
+            parts.pop();
+            username = parts.join(':');
+            if (!this.originalUsername) {
+                this.originalUsername = username;
+                this.originalResource = resource;
+            }
+        }
+        return {
+            username,
+            password: '',
+        };
+    }
+    adaptFormModel({ username, password, }) {
+        if (!username || !password || !this.form.get('password').dirty) {
+            return this.originalResource;
+        }
+        return [username, hashSync(password)].join(':');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: HtpasswdFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: HtpasswdFormComponent, isStandalone: true, selector: "acl-htpasswd-form", inputs: { field: "field", required: "required", isUpdate: "isUpdate", isDisabled: "isDisabled" }, usesInheritance: true, ngImport: i0, template: `<ng-container [formGroup]="form">
+    @if (
+      (field | pure: getFieldLabel : 'username' | translate) || 'username'
+        | translate;
+      as label
+    ) {
+      <aui-form-item width="large">
+        <label auiFormItemLabel>{{ label }}</label>
+        <input
+          aui-input
+          auiFormItemControl
+          formControlName="username"
+          [required]="required"
+          aclErrorsMapper
+          [aclErrorsMapperOutlet]="usernameError"
+          [aclReadonlyField]="
+            isDisabled || (field | pure: isFieldDisabled : 'username')
+          "
+          [placeholder]="
+            field | pure: getFieldPlaceholder : 'username' | translate
+          "
+        />
+        <div
+          #usernameError
+          auiFormItemError
+        ></div>
+        @if (
+          field | pure: getFieldDescription : 'username' | translate;
+          as description
+        ) {
+          <div auiFormItemHint>
+            {{ description }}
+          </div>
+        }
+      </aui-form-item>
+    }
+    @if (
+      (field | pure: getFieldLabel : 'password' | translate) || 'password'
+        | translate;
+      as label
+    ) {
+      <aui-form-item width="large">
+        <label auiFormItemLabel>{{ label }}</label>
+        <input
+          aui-input
+          type="password"
+          auiFormItemControl
+          formControlName="password"
+          aclStrongPassword
+          [required]="
+            (!isUpdate || originalUsername !== form.get('username').value) &&
+            required
+          "
+          aclErrorsMapper
+          [aclErrorsMapperOutlet]="passwordError"
+          [aclReadonlyField]="
+            isDisabled || (field | pure: isFieldDisabled : 'password')
+          "
+          [aclReadonlyFieldTemplate]="passwordTemplate"
+          [placeholder]="
+            field | pure: getFieldPlaceholder : 'password' | translate
+          "
+        />
+        <div
+          #passwordError
+          auiFormItemError
+        ></div>
+        @if (
+          field | pure: getFieldDescription : 'password' | translate;
+          as description
+        ) {
+          <div auiFormItemHint>
+            {{ description }}
+          </div>
+        }
+      </aui-form-item>
+    }
+    <ng-template #passwordTemplate> ****** </ng-template>
+  </ng-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i2.FormItemComponent, selector: "aui-form-item", inputs: ["labelWidth", "width", "labelPosition", "emptyAddon", "plain"] }, { kind: "directive", type: i2.FormItemErrorDirective, selector: "[auiFormItemError]" }, { kind: "directive", type: i2.FormItemHintDirective, selector: "[auiFormItemHint]" }, { kind: "directive", type: i2.FormItemLabelDirective, selector: "label[auiFormItemLabel]" }, { kind: "directive", type: i2.FormItemControlDirective, selector: "[auiFormItemControl]", inputs: ["required"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2.InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { kind: "directive", type: ErrorsMapperDirective, selector: "[aclErrorsMapper]", inputs: ["aclErrorsMapper", "aclErrorsMapperFn", "aclErrorsMapperDisabled", "aclErrorsMapperOutlet", "aclErrorsMapperControlName"] }, { kind: "directive", type: ReadonlyFieldDirective, selector: "[aclReadonlyField]", inputs: ["aclReadonlyField", "hidden", "aclReadonlyFieldTemplate", "aclReadonlyFieldTemplateContext"] }, { kind: "directive", type: StrongPasswordDirective, selector: "input[aclStrongPassword][ngModel],input[aclStrongPassword][formControl],input[aclStrongPassword][formControlName]", inputs: ["aclStrongPassword", "required", "specialChars", "minlength", "maxlength", "notStartsWith"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: HtpasswdFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'acl-htpasswd-form',
+                    template: `<ng-container [formGroup]="form">
+    @if (
+      (field | pure: getFieldLabel : 'username' | translate) || 'username'
+        | translate;
+      as label
+    ) {
+      <aui-form-item width="large">
+        <label auiFormItemLabel>{{ label }}</label>
+        <input
+          aui-input
+          auiFormItemControl
+          formControlName="username"
+          [required]="required"
+          aclErrorsMapper
+          [aclErrorsMapperOutlet]="usernameError"
+          [aclReadonlyField]="
+            isDisabled || (field | pure: isFieldDisabled : 'username')
+          "
+          [placeholder]="
+            field | pure: getFieldPlaceholder : 'username' | translate
+          "
+        />
+        <div
+          #usernameError
+          auiFormItemError
+        ></div>
+        @if (
+          field | pure: getFieldDescription : 'username' | translate;
+          as description
+        ) {
+          <div auiFormItemHint>
+            {{ description }}
+          </div>
+        }
+      </aui-form-item>
+    }
+    @if (
+      (field | pure: getFieldLabel : 'password' | translate) || 'password'
+        | translate;
+      as label
+    ) {
+      <aui-form-item width="large">
+        <label auiFormItemLabel>{{ label }}</label>
+        <input
+          aui-input
+          type="password"
+          auiFormItemControl
+          formControlName="password"
+          aclStrongPassword
+          [required]="
+            (!isUpdate || originalUsername !== form.get('username').value) &&
+            required
+          "
+          aclErrorsMapper
+          [aclErrorsMapperOutlet]="passwordError"
+          [aclReadonlyField]="
+            isDisabled || (field | pure: isFieldDisabled : 'password')
+          "
+          [aclReadonlyFieldTemplate]="passwordTemplate"
+          [placeholder]="
+            field | pure: getFieldPlaceholder : 'password' | translate
+          "
+        />
+        <div
+          #passwordError
+          auiFormItemError
+        ></div>
+        @if (
+          field | pure: getFieldDescription : 'password' | translate;
+          as description
+        ) {
+          <div auiFormItemHint>
+            {{ description }}
+          </div>
+        }
+      </aui-form-item>
+    }
+    <ng-template #passwordTemplate> ****** </ng-template>
+  </ng-container>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [
+                        ReactiveFormsModule,
+                        FormModule,
+                        InputModule,
+                        ErrorsMapperDirective,
+                        ReadonlyFieldDirective,
+                        StrongPasswordDirective,
+                        PurePipe,
+                        TranslatePipe,
+                    ],
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], isUpdate: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }] } });
+
+class HtpasswdComponent {
+    constructor() {
+        this.fieldComponent = inject(forwardRef(() => OperandFieldComponent));
+        this.isUpdate =
+            !!this.fieldComponent.control.value && !this.fieldComponent.control.dirty;
+        const defaultUsername = getUsernameDefaultValue(this.fieldComponent.field);
+        if (defaultUsername && !this.isUpdate) {
+            this.fieldComponent.control.setValue(`${defaultUsername}:`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: HtpasswdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: HtpasswdComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `<acl-htpasswd-form
+    [isDisabled]="fieldComponent.isDisabled"
+    [formControl]="fieldComponent.control"
+    [field]="fieldComponent.field"
+    [required]="fieldComponent.isRequired"
+    [isUpdate]="isUpdate"
+  ></acl-htpasswd-form>`, isInline: true, dependencies: [{ kind: "component", type: HtpasswdFormComponent, selector: "acl-htpasswd-form", inputs: ["field", "required", "isUpdate", "isDisabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: HtpasswdComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<acl-htpasswd-form
+    [isDisabled]="fieldComponent.isDisabled"
+    [formControl]="fieldComponent.control"
+    [field]="fieldComponent.field"
+    [required]="fieldComponent.isRequired"
+    [isUpdate]="isUpdate"
+  ></acl-htpasswd-form>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [HtpasswdFormComponent, ReactiveFormsModule],
+                }]
+        }], ctorParameters: () => [] });
+
+const COMPONENTS = [HtpasswdComponent, HtpasswdFormComponent];
+class HtpasswdModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: HtpasswdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: HtpasswdModule, imports: [HtpasswdComponent, HtpasswdFormComponent], exports: [HtpasswdComponent, HtpasswdFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: HtpasswdModule, imports: [COMPONENTS] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: HtpasswdModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...COMPONENTS],
+                    exports: COMPONENTS,
+                }]
+        }] });
+
+const capabilityComponents = Map$1()
+    .set(SpecCapability.resourceRequirements, SpecCapability.resourceRequirements)
+    .set(SpecCapability.select, SpecCapability.resourceRequirements);
+const capabilityFor = (specCapability) => {
+    if (isEmpty(specCapability)) {
+        return SpecCapability.text;
+    }
+    return specCapability;
+};
+
+class SpecCapabilityComponent {
+    constructor() {
+        this.fields = [];
+        this.SpecCapability = SpecCapability;
+        this.getFieldDisplayName = getFieldDisplayName;
+        this.getFieldDescription = getFieldDescription$1;
+        this.yamlReadOptions = yamlReadOptions;
+        this.viewActions = viewActions;
+        this.isArrayField = isArrayField;
+    }
+    get isHidden() {
+        return this.shouldBeHidden();
+    }
+    getCapability(capabilities) {
+        const capability = capabilities.find(c => c.startsWith(SpecCapability.resourceRequirements) ||
+            c.startsWith(SpecCapability.booleanSwitch) ||
+            c.startsWith(SpecCapability.yaml) ||
+            c.startsWith(SpecCapability.object) ||
+            c.startsWith(SpecCapability.array));
+        return capabilityFor(capability);
+    }
+    toDefault(input) {
+        return input ? toString(input) : '-';
+    }
+    shouldBeHidden() {
+        if (this.field.capabilities.some(c => c.startsWith(SpecCapability.fieldDependency))) {
+            const dependency = this.field.capabilities
+                .find(c => c.startsWith(SpecCapability.fieldDependency))
+                .split(SpecCapability.fieldDependency)[1];
+            const [path, value] = dependency.split(':');
+            const dependencyField = this.fields.find(f => f.path === normalizePath(path));
+            const dependencyDefaultValue = getDefaultValue(dependencyField);
+            return ((get(this.data, dependencyField.path) ?? dependencyDefaultValue) !==
+                convertValue(value, dependencyField.type));
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SpecCapabilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SpecCapabilityComponent, isStandalone: true, selector: "acl-spec-descriptor-capability", inputs: { field: "field", fields: "fields", data: "data" }, host: { properties: { "class.hidden": "this.isHidden" } }, ngImport: i0, template: "<ng-container *ngIf=\"field?.capabilities | pure: getCapability as type\">\n  <div class=\"field-set-item__label\">\n    {{ field | pure: getFieldDisplayName | translate }}\n  </div>\n\n  <ng-container [ngSwitch]=\"type\">\n    <ng-container *ngSwitchCase=\"SpecCapability.resourceRequirements\">\n      <acl-crd-resource-requirements\n        [ngModel]=\"field?.value\"\n        [field]=\"field\"\n        [readOnly]=\"true\"\n      >\n      </acl-crd-resource-requirements>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SpecCapability.booleanSwitch\">\n      {{ (field.value ? 'switch_open' : 'switch_close') | translate }}\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SpecCapability.yaml\">\n      <acl-crd-yaml-editor\n        [ngModel]=\"field?.value\"\n        [actionsConfig]=\"viewActions\"\n        [options]=\"yamlReadOptions\"\n      >\n      </acl-crd-yaml-editor>\n    </ng-container>\n\n    <ng-container>\n      <div\n        *ngSwitchDefault\n        class=\"field-set-item__value field-set-item__value__overflow field-set-item__value__wrap\"\n      >\n        {{ field?.value | pure: toDefault }}\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;min-height:20px;line-height:20px;align-items:flex-start;overflow:hidden;color:use-rgb(n-1)}:host.hidden{display:none}:host ::ng-deep .edit-icon{margin-left:9px;cursor:pointer}.field-set-item__label{margin-right:8px;text-align:right}.field-set-item__label:not(:empty):after{content:\":\";margin-left:2px}.field-set-item__value{min-width:0;flex:1;white-space:nowrap;display:flex}.field-set-item__value__overflow{display:block;overflow:hidden;text-overflow:ellipsis}.field-set-item__value__wrap{white-space:pre-wrap;flex-wrap:wrap}.field-set-item__label,.field-set-item__value{height:100%;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResourceRequirementsComponent, selector: "acl-crd-resource-requirements", inputs: ["readOnly", "field"] }, { kind: "component", type: YamlEditorComponent, selector: "acl-crd-yaml-editor", inputs: ["actionsConfig", "options"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SpecCapabilityComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-spec-descriptor-capability', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        PurePipe,
+                        TranslatePipe,
+                        ResourceRequirementsComponent,
+                        YamlEditorComponent,
+                    ], template: "<ng-container *ngIf=\"field?.capabilities | pure: getCapability as type\">\n  <div class=\"field-set-item__label\">\n    {{ field | pure: getFieldDisplayName | translate }}\n  </div>\n\n  <ng-container [ngSwitch]=\"type\">\n    <ng-container *ngSwitchCase=\"SpecCapability.resourceRequirements\">\n      <acl-crd-resource-requirements\n        [ngModel]=\"field?.value\"\n        [field]=\"field\"\n        [readOnly]=\"true\"\n      >\n      </acl-crd-resource-requirements>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SpecCapability.booleanSwitch\">\n      {{ (field.value ? 'switch_open' : 'switch_close') | translate }}\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SpecCapability.yaml\">\n      <acl-crd-yaml-editor\n        [ngModel]=\"field?.value\"\n        [actionsConfig]=\"viewActions\"\n        [options]=\"yamlReadOptions\"\n      >\n      </acl-crd-yaml-editor>\n    </ng-container>\n\n    <ng-container>\n      <div\n        *ngSwitchDefault\n        class=\"field-set-item__value field-set-item__value__overflow field-set-item__value__wrap\"\n      >\n        {{ field?.value | pure: toDefault }}\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;min-height:20px;line-height:20px;align-items:flex-start;overflow:hidden;color:use-rgb(n-1)}:host.hidden{display:none}:host ::ng-deep .edit-icon{margin-left:9px;cursor:pointer}.field-set-item__label{margin-right:8px;text-align:right}.field-set-item__label:not(:empty):after{content:\":\";margin-left:2px}.field-set-item__value{min-width:0;flex:1;white-space:nowrap;display:flex}.field-set-item__value__overflow{display:block;overflow:hidden;text-overflow:ellipsis}.field-set-item__value__wrap{white-space:pre-wrap;flex-wrap:wrap}.field-set-item__label,.field-set-item__value{height:100%;align-items:flex-start}\n"] }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], isHidden: [{
+                type: HostBinding,
+                args: ['class.hidden']
+            }] } });
+
+class SpecCapabilityListComponent {
+    constructor() {
+        this.openApiSchemaPath = SCHEMA_PATH;
+        this.createCapabilityField = createCapabilityField;
+        // TODO: Need Correct Ux For Deep Object & Array Type
+        this.excludes = (fields) => fields.filter(field => !['object', 'array'].includes(getFieldType(field) || field.type));
+        this.debugLog = (fields) => {
+            /* eslint-disable no-console */
+            if (this.debug) {
+                console.log('treeFields:', fields.treeFields);
+                console.log('openApiFields:', fields.openApiFields);
+                console.log('descriptorFields:', fields.descriptorFields);
+                console.log('basicFields:', fields.basicFields);
+                console.log('normalFields', fields.normalFields);
+                console.log('fieldGroups:', fields.fieldGroups);
+                console.log('arrayFieldGroups:', fields.arrayFieldGroups);
+                console.log('advancedFields:', fields.advancedFields);
+            }
+            /* eslint-enable no-console */
+            return fields;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SpecCapabilityListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SpecCapabilityListComponent, isStandalone: true, selector: "acl-spec-descriptor-capability-list", inputs: { descriptors: "descriptors", debug: "debug", data: "data", openApiSchema: "openApiSchema", openApiSchemaPath: "openApiSchemaPath" }, ngImport: i0, template: "@if (\n  descriptors\n    | pure: createCapabilityField : openApiSchema : data : openApiSchemaPath\n    | pure: debugLog;\n  as fields\n) {\n  @for (field of fields.normalFields | pure: excludes; track field) {\n    <acl-spec-descriptor-capability\n      [field]=\"field\"\n      [fields]=\"fields.basicFields\"\n      [data]=\"data\"\n    ></acl-spec-descriptor-capability>\n  }\n  @if (fields.fieldGroups; as groups) {\n    @for (group of groups; track group) {\n      <div class=\"group-field-capability\">\n        <div class=\"group-field-capability--header\">{{ group.groupName }}</div>\n        <div class=\"group-field-capability--content\">\n          @for (field of group.fieldList | pure: excludes; track field) {\n            <acl-spec-descriptor-capability\n              [field]=\"$any(field)\"\n              [fields]=\"fields.basicFields\"\n              [data]=\"data\"\n            ></acl-spec-descriptor-capability>\n          }\n        </div>\n      </div>\n    }\n  }\n  @if (fields.advancedFields; as advanced) {\n    @if (advanced.length > 0) {\n      <div class=\"group-field-capability\">\n        <div class=\"group-field-capability--header\">\n          {{ 'advanced_fields' | translate }}\n        </div>\n        <div class=\"group-field-capability--content\">\n          @for (field of advanced | pure: excludes; track field) {\n            <acl-spec-descriptor-capability\n              [field]=\"field\"\n              [fields]=\"fields.basicFields\"\n              [data]=\"data\"\n            ></acl-spec-descriptor-capability>\n          }\n        </div>\n      </div>\n    }\n  }\n  @if (fields.arrayFieldGroups; as arrayGroups) {\n    <div class=\"array-group-field-capability\">\n      @for (groups of arrayGroups; track groups) {\n        <div class=\"group-field-capability\">\n          <div class=\"group-field-capability--header\">\n            {{ groups.groupName | translate }}\n          </div>\n          @for (fieldList of groups.fieldLists; track fieldList) {\n            <div class=\"group-field-capability--content\">\n              @for (field of fieldList | pure: excludes; track field) {\n                <acl-spec-descriptor-capability\n                  [field]=\"field\"\n                  [fields]=\"fields.basicFields\"\n                  [data]=\"data\"\n                ></acl-spec-descriptor-capability>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [":host:after{clear:both;content:\".\";display:block;width:0;height:0;visibility:hidden}:host acl-spec-descriptor-capability{margin-bottom:12px;min-height:22px}:host>acl-spec-descriptor-capability{width:100%;box-sizing:border-box}:host .group-field-capability{padding:15px 0 12px;border-top:1px dashed #ededed}:host .group-field-capability--header{font-size:16px;font-weight:500;display:flex;line-height:22px;color:rgb(var(--aui-color-n-1))}:host .group-field-capability--content acl-spec-descriptor-capability:first-child{margin-top:12px}:host .group-field-capability--content acl-spec-descriptor-capability:last-child{margin-bottom:0}:host .array-group-field-capability .group-field-capability--content{padding:8px;margin-top:8px;background-color:#fafafa;border-left:4px solid #f0f0f0}:host .array-group-field-capability .group-field-capability--content acl-spec-descriptor-capability:first-child{margin-top:0}\n"], dependencies: [{ kind: "component", type: SpecCapabilityComponent, selector: "acl-spec-descriptor-capability", inputs: ["field", "fields", "data"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SpecCapabilityListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-spec-descriptor-capability-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PurePipe, TranslatePipe, SpecCapabilityComponent], template: "@if (\n  descriptors\n    | pure: createCapabilityField : openApiSchema : data : openApiSchemaPath\n    | pure: debugLog;\n  as fields\n) {\n  @for (field of fields.normalFields | pure: excludes; track field) {\n    <acl-spec-descriptor-capability\n      [field]=\"field\"\n      [fields]=\"fields.basicFields\"\n      [data]=\"data\"\n    ></acl-spec-descriptor-capability>\n  }\n  @if (fields.fieldGroups; as groups) {\n    @for (group of groups; track group) {\n      <div class=\"group-field-capability\">\n        <div class=\"group-field-capability--header\">{{ group.groupName }}</div>\n        <div class=\"group-field-capability--content\">\n          @for (field of group.fieldList | pure: excludes; track field) {\n            <acl-spec-descriptor-capability\n              [field]=\"$any(field)\"\n              [fields]=\"fields.basicFields\"\n              [data]=\"data\"\n            ></acl-spec-descriptor-capability>\n          }\n        </div>\n      </div>\n    }\n  }\n  @if (fields.advancedFields; as advanced) {\n    @if (advanced.length > 0) {\n      <div class=\"group-field-capability\">\n        <div class=\"group-field-capability--header\">\n          {{ 'advanced_fields' | translate }}\n        </div>\n        <div class=\"group-field-capability--content\">\n          @for (field of advanced | pure: excludes; track field) {\n            <acl-spec-descriptor-capability\n              [field]=\"field\"\n              [fields]=\"fields.basicFields\"\n              [data]=\"data\"\n            ></acl-spec-descriptor-capability>\n          }\n        </div>\n      </div>\n    }\n  }\n  @if (fields.arrayFieldGroups; as arrayGroups) {\n    <div class=\"array-group-field-capability\">\n      @for (groups of arrayGroups; track groups) {\n        <div class=\"group-field-capability\">\n          <div class=\"group-field-capability--header\">\n            {{ groups.groupName | translate }}\n          </div>\n          @for (fieldList of groups.fieldLists; track fieldList) {\n            <div class=\"group-field-capability--content\">\n              @for (field of fieldList | pure: excludes; track field) {\n                <acl-spec-descriptor-capability\n                  [field]=\"field\"\n                  [fields]=\"fields.basicFields\"\n                  [data]=\"data\"\n                ></acl-spec-descriptor-capability>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [":host:after{clear:both;content:\".\";display:block;width:0;height:0;visibility:hidden}:host acl-spec-descriptor-capability{margin-bottom:12px;min-height:22px}:host>acl-spec-descriptor-capability{width:100%;box-sizing:border-box}:host .group-field-capability{padding:15px 0 12px;border-top:1px dashed #ededed}:host .group-field-capability--header{font-size:16px;font-weight:500;display:flex;line-height:22px;color:rgb(var(--aui-color-n-1))}:host .group-field-capability--content acl-spec-descriptor-capability:first-child{margin-top:12px}:host .group-field-capability--content acl-spec-descriptor-capability:last-child{margin-bottom:0}:host .array-group-field-capability .group-field-capability--content{padding:8px;margin-top:8px;background-color:#fafafa;border-left:4px solid #f0f0f0}:host .array-group-field-capability .group-field-capability--content acl-spec-descriptor-capability:first-child{margin-top:0}\n"] }]
+        }], propDecorators: { descriptors: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], openApiSchema: [{
+                type: Input
+            }], openApiSchemaPath: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseOperandFiledArrayComponent, BasicAuthCreateSecretDialogComponent, BasicAuthSecretComponent, CRD_FORM_CONTEXT, CrdFormArrayTableComponent, CrdFormComponent, DEFAULT_VALUE_PATTERN, DESCRIPTOR_DEFINITION_KEY, FieldControlsModule, FormItemComponent, GROUP_PATTERN, HtpasswdComponent, HtpasswdFormComponent, HtpasswdModule, K8sResourcePrefixComponent, LinkComponent, MAX_DEPTH, NamespacedResourceKind, NodeModel, OperandAdvancedFieldGroupComponent, OperandArrayFieldGroupComponent, OperandFieldComponent, OperandFieldGroupComponent, PASSWORD_REVEAL, REGEXP_CAPABILITY_VALIDATION, REGEXP_FIELD_DEPENDENCY_CAPABILITY, REGEXP_K8S_RESOURCE_CAPABILITY, REGEXP_K8S_RESOURCE_SUFFIX, REGEXP_SELECT_CAPABILITY, REGEXP_VALIDATION_SUFFIX, ResourceRequirementsComponent, SCHEMA_PATH, SpecCapability, SpecCapabilityComponent, SpecCapabilityListComponent, SpecCapabilityUIPrefix, SpecCapabilityWidgetsPrefix, Validations, YamlEditorComponent, _isNumberValue, capabilityComponents, capabilityFor, coerceBoolean, coerceNumber, convertBooleanSwitchValue, convertValue, createCapabilityField, evalInContext, fieldShouldReveal, filterMapByKey, flattenNestedProperties, getArrayGroupName, getBasicAuthSecretConfig, getBasicCapabilityType, getBooleanSwitchOptions, getCapabilitiesForOpenApiProperty, getCapabilityDisabled, getCapabilityValidations, getDefaultValue, getFieldDescription$1 as getFieldDescription, getFieldDisplayName, getFieldDocLink, getFieldPlaceholder$1 as getFieldPlaceholder, getFieldTooltip, getFieldType, getFieldsByPath, getFieldsFromDescriptor, getFieldsFromOpenApiSchema, getFormData, getGroupName, getK8sResourcePrefixOptions, getMatchArrayIndex, getMatchedCapabilityValue, getOneOfMap, getOpenApiPropertyByPath, getOperandPath, getPathFromTagPath, getPropertyDepth, getRadioOptions, getRelatedFields, getTreeFields, hasDescriptor, isAllowCreate, isArrayField, isArrayFieldTable, isClearable, isCreatable, isEmptyArray, isFieldCopyable, isFieldDescriptionAsLink, isFolded, isGroupField, isLink, isMultiple, isRemoteField, isRequired, modifyArrayFieldPathIndex, normalizePath, parseArrayPath, parseGroupDescriptor, pathToArray, repairFieldChildPathByCorrectIndex, resolveKVParams, resolveLinkOptions, setRadiosDefaultValue };
+//# sourceMappingURL=alauda-fe-crd-form.mjs.map