@alauda-fe/crd-form 1.0.1-alpha.0 → 1.0.1-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { InjectionToken, EventEmitter, inject, Output, Input, Directive, forwardRef, ChangeDetectorRef, ChangeDetectionStrategy, Component, ViewChild, Injector, HostBinding, NgModule } from '@angular/core';
|
|
3
3
|
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';
|
|
4
|
-
import { __decorate, __metadata } from 'tslib';
|
|
5
|
-
import * as i2 from '@alauda/ui';
|
|
6
|
-
import { FormModule, IconModule, TooltipModule, ButtonModule, DIALOG_DATA, DialogRef, MessageService, InputModule, DialogModule, DialogService, DialogSize, SelectModule, TagModule, RadioModule, SwitchModule, LabelPosition } from '@alauda/ui';
|
|
7
4
|
import * as i4 from '@alauda-fe/dynamic-plugin-sdk';
|
|
8
5
|
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';
|
|
9
6
|
import * as i2$1 from '@alauda-fe/dynamic-plugin-shared';
|
|
10
7
|
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';
|
|
8
|
+
import { __decorate, __metadata } from 'tslib';
|
|
9
|
+
import * as i2 from '@alauda/ui';
|
|
10
|
+
import { FormModule, IconModule, TooltipModule, ButtonModule, DIALOG_DATA, DialogRef, MessageService, InputModule, DialogModule, DialogService, DialogSize, SelectModule, TagModule, RadioModule, SwitchModule, LabelPosition } from '@alauda/ui';
|
|
11
11
|
import * as i1 from '@angular/forms';
|
|
12
12
|
import { FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormGroupDirective, NG_VALUE_ACCESSOR, ControlContainer, FormControl } from '@angular/forms';
|
|
13
13
|
import { isImmutable, fromJS, Map as Map$1, List } from 'immutable';
|
|
@@ -20,6 +20,8 @@ import { encode, decode } from 'ab64';
|
|
|
20
20
|
import { BaseResourceFormComponent, BaseResourceFormGroupComponent } from 'ng-resource-form-util';
|
|
21
21
|
import { hashSync } from 'bcryptjs';
|
|
22
22
|
|
|
23
|
+
const CRD_FORM_CONTEXT = new InjectionToken('CRD_FORM_CONTEXT');
|
|
24
|
+
|
|
23
25
|
var Validations;
|
|
24
26
|
(function (Validations) {
|
|
25
27
|
Validations["maximum"] = "maximum";
|
|
@@ -929,6 +931,115 @@ function sortGroupFields(fields, descriptors, descriptorFields) {
|
|
|
929
931
|
}));
|
|
930
932
|
}
|
|
931
933
|
|
|
934
|
+
class BaseOperandFiledArrayComponent {
|
|
935
|
+
constructor() {
|
|
936
|
+
this.readonly = false;
|
|
937
|
+
this.valueChange = new EventEmitter();
|
|
938
|
+
this.itemRemove = new EventEmitter();
|
|
939
|
+
this.getFieldDisplayName = getFieldDisplayName;
|
|
940
|
+
this.crdForm = inject(CRD_FORM_CONTEXT);
|
|
941
|
+
}
|
|
942
|
+
get expanded() {
|
|
943
|
+
return this._expanded ?? !isFolded(this.arrayFieldGroup);
|
|
944
|
+
}
|
|
945
|
+
set expanded(expanded) {
|
|
946
|
+
this._expanded = expanded;
|
|
947
|
+
}
|
|
948
|
+
ngOnChanges({ arrayFieldGroup, formDataState }) {
|
|
949
|
+
if (!this.basicArrayFieldTemplate &&
|
|
950
|
+
arrayFieldGroup.currentValue?.fieldLists?.length > 0) {
|
|
951
|
+
this.basicArrayFieldTemplate = last(arrayFieldGroup.currentValue.fieldLists);
|
|
952
|
+
}
|
|
953
|
+
if (formDataState?.currentValue && formDataState?.previousValue) {
|
|
954
|
+
const currValue = getFormData(formDataState.currentValue, this.arrayFieldGroup.path);
|
|
955
|
+
const arrayFieldLength = this.arrayFieldGroup.fieldLists?.length;
|
|
956
|
+
if (currValue?.size > arrayFieldLength) {
|
|
957
|
+
Array.from({ length: currValue.size - arrayFieldLength }).forEach(() => {
|
|
958
|
+
this.addItem();
|
|
959
|
+
});
|
|
960
|
+
}
|
|
961
|
+
}
|
|
962
|
+
}
|
|
963
|
+
fieldValueChange(e) {
|
|
964
|
+
this.valueChange.emit(e);
|
|
965
|
+
}
|
|
966
|
+
addItem() {
|
|
967
|
+
const newFields = this.basicArrayFieldTemplate.map(field => {
|
|
968
|
+
const toPath = modifyArrayFieldPathIndex(field.path, () => this.arrayFieldGroup.fieldLists.length);
|
|
969
|
+
return {
|
|
970
|
+
...repairFieldChildPathByCorrectIndex(field, field.path, toPath),
|
|
971
|
+
};
|
|
972
|
+
});
|
|
973
|
+
this.arrayFieldGroup.fieldLists = [
|
|
974
|
+
...this.arrayFieldGroup.fieldLists,
|
|
975
|
+
newFields,
|
|
976
|
+
];
|
|
977
|
+
}
|
|
978
|
+
removeItem(index) {
|
|
979
|
+
const groupToRemove = this.arrayFieldGroup.fieldLists[index];
|
|
980
|
+
const groupUntouched = this.arrayFieldGroup.fieldLists.filter((_, idx) => idx < index);
|
|
981
|
+
const groupToLeftShift = this.arrayFieldGroup.fieldLists.filter((_, idx) => idx > index);
|
|
982
|
+
const leftShiftedGroups = groupToLeftShift.map(group => group.map(field => {
|
|
983
|
+
const toPath = modifyArrayFieldPathIndex(field.path, idx => idx - 1);
|
|
984
|
+
return {
|
|
985
|
+
...repairFieldChildPathByCorrectIndex(field, field.path, toPath),
|
|
986
|
+
};
|
|
987
|
+
}));
|
|
988
|
+
this.arrayFieldGroup.fieldLists = [...groupUntouched, ...leftShiftedGroups];
|
|
989
|
+
const [match, formDataPathToRemove] = /^(.*\[\d+]).*$/.exec(groupToRemove?.[0].path) || [];
|
|
990
|
+
if (match) {
|
|
991
|
+
this.itemRemove.next(formDataPathToRemove);
|
|
992
|
+
}
|
|
993
|
+
this.crdForm.controlMap.forEach((_, key) => {
|
|
994
|
+
if (key.startsWith(`${this.arrayFieldGroup.path}[${this.arrayFieldGroup.fieldLists.length}]`)) {
|
|
995
|
+
this.crdForm.controlMap.delete(key);
|
|
996
|
+
}
|
|
997
|
+
});
|
|
998
|
+
this.crdForm.refreshValidation();
|
|
999
|
+
this.deleteFormData(`${this.arrayFieldGroup.path}[${index}]`);
|
|
1000
|
+
}
|
|
1001
|
+
deleteFormData(path) {
|
|
1002
|
+
this.valueChange.next({
|
|
1003
|
+
field: {
|
|
1004
|
+
...this.arrayFieldGroup,
|
|
1005
|
+
path,
|
|
1006
|
+
},
|
|
1007
|
+
data: null,
|
|
1008
|
+
});
|
|
1009
|
+
}
|
|
1010
|
+
fieldIsRequired(field) {
|
|
1011
|
+
return (field?.required ||
|
|
1012
|
+
Object.keys(field?.validations || {})?.includes(Validations.required));
|
|
1013
|
+
}
|
|
1014
|
+
get columnFields() {
|
|
1015
|
+
return this.basicArrayFieldTemplate;
|
|
1016
|
+
}
|
|
1017
|
+
trackByFn(index) {
|
|
1018
|
+
return index;
|
|
1019
|
+
}
|
|
1020
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseOperandFiledArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1021
|
+
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 }); }
|
|
1022
|
+
}
|
|
1023
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseOperandFiledArrayComponent, decorators: [{
|
|
1024
|
+
type: Directive
|
|
1025
|
+
}], propDecorators: { arrayFieldGroup: [{
|
|
1026
|
+
type: Input
|
|
1027
|
+
}], formDataState: [{
|
|
1028
|
+
type: Input
|
|
1029
|
+
}], formErrors: [{
|
|
1030
|
+
type: Input
|
|
1031
|
+
}], isArrayTable: [{
|
|
1032
|
+
type: Input
|
|
1033
|
+
}], readonly: [{
|
|
1034
|
+
type: Input
|
|
1035
|
+
}], fields: [{
|
|
1036
|
+
type: Input
|
|
1037
|
+
}], valueChange: [{
|
|
1038
|
+
type: Output
|
|
1039
|
+
}], itemRemove: [{
|
|
1040
|
+
type: Output
|
|
1041
|
+
}] } });
|
|
1042
|
+
|
|
932
1043
|
const EXPRESSION_PROPS_PREFIX = `${SpecCapability.expression}props.`;
|
|
933
1044
|
const EXPRESSION_PROPS_OPTIONS_PREFIX = `${EXPRESSION_PROPS_PREFIX}options:`;
|
|
934
1045
|
const EXPRESSION_PROPS_DEFAULT_PREFIX = `${EXPRESSION_PROPS_PREFIX}default:`;
|
|
@@ -996,7 +1107,7 @@ class FormItemComponent {
|
|
|
996
1107
|
return isFieldCopyable(field) && isDisabled;
|
|
997
1108
|
}
|
|
998
1109
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
999
|
-
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 ? '
|
|
1110
|
+
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 ? '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}.ml-8{margin-left:8px}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 }); }
|
|
1000
1111
|
}
|
|
1001
1112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormItemComponent, decorators: [{
|
|
1002
1113
|
type: Component,
|
|
@@ -1008,7 +1119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
1008
1119
|
TooltipModule,
|
|
1009
1120
|
ErrorsMapperComponent,
|
|
1010
1121
|
HelpDocDirective,
|
|
1011
|
-
], 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 ? '
|
|
1122
|
+
], 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 ? '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}.ml-8{margin-left:8px}aui-form-item ::ng-deep .aui-form-item__content--large aui-switch.aui-form-item__control{flex:unset}\n"] }]
|
|
1012
1123
|
}], ctorParameters: () => [], propDecorators: { plain: [{
|
|
1013
1124
|
type: Input
|
|
1014
1125
|
}] } });
|
|
@@ -1168,7 +1279,7 @@ class BasicAuthCreateSecretDialogComponent {
|
|
|
1168
1279
|
this.showPassword = !this.showPassword;
|
|
1169
1280
|
}
|
|
1170
1281
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BasicAuthCreateSecretDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1171
|
-
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
|
|
1282
|
+
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 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}.flex-1{flex:1}\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 }); }
|
|
1172
1283
|
}
|
|
1173
1284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BasicAuthCreateSecretDialogComponent, decorators: [{
|
|
1174
1285
|
type: Component,
|
|
@@ -1183,7 +1294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
1183
1294
|
ErrorsMapperComponent,
|
|
1184
1295
|
StrongPasswordDirective,
|
|
1185
1296
|
TranslatePipe,
|
|
1186
|
-
], 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
|
|
1297
|
+
], 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 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}.flex-1{flex:1}\n"] }]
|
|
1187
1298
|
}], propDecorators: { form: [{
|
|
1188
1299
|
type: ViewChild,
|
|
1189
1300
|
args: [FormGroupDirective, { static: true }]
|
|
@@ -1193,7 +1304,7 @@ class BasicAuthSecretComponent extends BaseResourceFormComponent {
|
|
|
1193
1304
|
constructor() {
|
|
1194
1305
|
super(inject(Injector));
|
|
1195
1306
|
this.k8sApi = inject(K8sApiService);
|
|
1196
|
-
this.crdForm = inject(
|
|
1307
|
+
this.crdForm = inject(CRD_FORM_CONTEXT);
|
|
1197
1308
|
this.dialog = inject(DialogService);
|
|
1198
1309
|
this.k8sUtil = inject(K8sUtilService);
|
|
1199
1310
|
this.config$ = this.field$.pipe(filter(field => !!field), map$1(field => getBasicAuthSecretConfig(field)), publishRef());
|
|
@@ -1239,7 +1350,7 @@ class BasicAuthSecretComponent extends BaseResourceFormComponent {
|
|
|
1239
1350
|
});
|
|
1240
1351
|
}
|
|
1241
1352
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BasicAuthSecretComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1242
|
-
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=\"
|
|
1353
|
+
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=\"secret-select\"\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}.secret-select{flex:1;margin-right:4px}\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 }); }
|
|
1243
1354
|
}
|
|
1244
1355
|
__decorate([
|
|
1245
1356
|
ObservableInput(),
|
|
@@ -1254,7 +1365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
1254
1365
|
ButtonModule,
|
|
1255
1366
|
TranslatePipe,
|
|
1256
1367
|
K8S_UTIL_PIPES_MODULE,
|
|
1257
|
-
], template: "<aui-select\n class=\"
|
|
1368
|
+
], template: "<aui-select\n class=\"secret-select\"\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}.secret-select{flex:1;margin-right:4px}\n"] }]
|
|
1258
1369
|
}], ctorParameters: () => [], propDecorators: { required: [{
|
|
1259
1370
|
type: Input
|
|
1260
1371
|
}], field: [{
|
|
@@ -1305,7 +1416,7 @@ class K8sResourcePrefixComponent extends BaseResourceFormComponent {
|
|
|
1305
1416
|
constructor() {
|
|
1306
1417
|
super(inject(Injector));
|
|
1307
1418
|
this.k8sApi = inject(K8sApiService);
|
|
1308
|
-
this.crdForm = inject(
|
|
1419
|
+
this.crdForm = inject(CRD_FORM_CONTEXT);
|
|
1309
1420
|
this.resourceDefinitions = inject(TOKEN_RESOURCE_DEFINITIONS);
|
|
1310
1421
|
this.init$$ = new BehaviorSubject(false);
|
|
1311
1422
|
this.readonly = false;
|
|
@@ -1695,7 +1806,7 @@ class ResourceRequirementsComponent extends BaseResourceFormGroupComponent {
|
|
|
1695
1806
|
});
|
|
1696
1807
|
}
|
|
1697
1808
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ResourceRequirementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1698
|
-
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 }); }
|
|
1809
|
+
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 items-start\"\n formGroupName=\"requests\"\n >\n <div class=\"resource-group\">\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 '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=\"error-message\"\n >\n </acl-errors-mapper>\n }\n </div>\n <div class=\"resource-group\">\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 '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=\"error-message\"\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 items-start\"\n formGroupName=\"limits\"\n >\n <div class=\"resource-group\">\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 '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=\"error-message\"\n >\n </acl-errors-mapper>\n }\n </div>\n <div class=\"resource-group\">\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 '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=\"error-message\"\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=\"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=\"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}:host .required-mark:before{content:\"*\";margin-right:4px;color:use-rgb(red)}:host .resource-group{display:flex;flex-direction:column;flex:1}:host .items-start{align-items:flex-start}:host .error-message{font-size:use-var(font-size-s);color:use-rgb(red)}:host .mr-16{margin-right:16px}\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 }); }
|
|
1699
1810
|
}
|
|
1700
1811
|
__decorate([
|
|
1701
1812
|
bind,
|
|
@@ -1728,7 +1839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
1728
1839
|
TranslatePipe,
|
|
1729
1840
|
PurePipe,
|
|
1730
1841
|
FieldNotAvailablePipe,
|
|
1731
|
-
], 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"] }]
|
|
1842
|
+
], 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 items-start\"\n formGroupName=\"requests\"\n >\n <div class=\"resource-group\">\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 '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=\"error-message\"\n >\n </acl-errors-mapper>\n }\n </div>\n <div class=\"resource-group\">\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 '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=\"error-message\"\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 items-start\"\n formGroupName=\"limits\"\n >\n <div class=\"resource-group\">\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 '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=\"error-message\"\n >\n </acl-errors-mapper>\n }\n </div>\n <div class=\"resource-group\">\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 '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=\"error-message\"\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=\"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=\"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}:host .required-mark:before{content:\"*\";margin-right:4px;color:use-rgb(red)}:host .resource-group{display:flex;flex-direction:column;flex:1}:host .items-start{align-items:flex-start}:host .error-message{font-size:use-var(font-size-s);color:use-rgb(red)}:host .mr-16{margin-right:16px}\n"] }]
|
|
1732
1843
|
}], ctorParameters: () => [], propDecorators: { readOnly: [{
|
|
1733
1844
|
type: Input
|
|
1734
1845
|
}], field: [{
|
|
@@ -1846,7 +1957,7 @@ class OperandFieldComponent {
|
|
|
1846
1957
|
].includes(getFieldType(filed));
|
|
1847
1958
|
this.viewActions = viewActions;
|
|
1848
1959
|
this.viewOptions = yamlReadOptions;
|
|
1849
|
-
this.crdForm = inject(
|
|
1960
|
+
this.crdForm = inject(CRD_FORM_CONTEXT);
|
|
1850
1961
|
this.http = inject(HttpClient);
|
|
1851
1962
|
this.cdr = inject(ChangeDetectorRef);
|
|
1852
1963
|
this.getWidgets = (capabilities) => {
|
|
@@ -2136,7 +2247,7 @@ class OperandFieldComponent {
|
|
|
2136
2247
|
}
|
|
2137
2248
|
}
|
|
2138
2249
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OperandFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2139
|
-
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 }); }
|
|
2250
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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: "@if (field) {\n @if (\n {\n fieldType: field | pure: getFieldType,\n isBasicTypeField: field | pure: isBasicTypeField,\n };\n as meta\n ) {\n @if (meta.isBasicTypeField) {\n @if (!(field.capabilities | pure: getWidgets)) {\n <acl-crd-form-item>\n @switch (meta.fieldType) {\n @case (SpecCapability.number) {\n <input\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 }\n @case (SpecCapability.booleanSwitch) {\n <aui-switch\n auiFormItemControl\n [aclReadonlyField]=\"isDisabled\"\n [aclReadonlyFieldTemplate]=\"switchReadonly\"\n [formControl]=\"control\"\n ></aui-switch>\n }\n @case (SpecCapability.select) {\n @if (isMultiple) {\n <aui-multi-select\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 @for (option of dynamicOptions$ | async; track option) {\n <aui-option\n [value]=\"option.value\"\n [label]=\"option.label\"\n >\n {{ option.label }}\n </aui-option>\n }\n <aui-option-placeholder>{{\n 'no_data' | translate\n }}</aui-option-placeholder>\n </aui-multi-select>\n }\n @if (!isMultiple) {\n <aui-select\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 @for (option of dynamicOptions$ | async; track option) {\n <aui-option\n [value]=\"option.value\"\n [label]=\"option.label | aclParseJsonTranslate\"\n >\n {{ option.label | aclParseJsonTranslate }}\n </aui-option>\n }\n <aui-option-placeholder>{{\n 'no_data' | translate\n }}</aui-option-placeholder>\n </aui-select>\n }\n @if ((dynamicExpression$ | async).options) {\n <button\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 }\n }\n @case (SpecCapability.radio) {\n <aui-radio-group\n auiFormItemControl\n [formControl]=\"control\"\n [required]=\"isRequired\"\n [aclReadonlyField]=\"isDisabled\"\n [aclReadonlyFieldTemplate]=\"radioLabel\"\n >\n <ng-container>\n @for (\n option of field.capabilities | pure: getRadioOptions;\n track option\n ) {\n <aui-radio-button [value]=\"option.value\">\n {{ option.display | translate }}\n </aui-radio-button>\n }\n </ng-container>\n </aui-radio-group>\n }\n @case (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 }\n @case (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 }\n @case (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 }\n @case (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 }\n @case (SpecCapability.textarea) {\n <textarea\n auiFormItemControl\n aui-input\n [required]=\"isRequired\"\n [formControl]=\"control\"\n [aclReadonlyField]=\"isDisabled\"\n [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n ></textarea>\n }\n @case (SpecCapability.tagsInput) {\n <aui-tags-input\n auiFormItemControl\n class=\"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 }\n @default {\n @if ((field | pure: isLink) && isDisabled) {\n <acl-crd-link\n auiFormItemControl\n [field]=\"field\"\n [formControl]=\"control\"\n ></acl-crd-link>\n } @else {\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 }\n }\n }\n </acl-crd-form-item>\n }\n @if (field.capabilities | pure: getWidgets; as widget) {\n <div class=\"widget-wrapper\">\n <ng-container *ngComponentOutlet=\"widget.component\"></ng-container>\n </div>\n }\n } @else {\n @if (\n meta.fieldType === SpecCapability.password ||\n meta.fieldType === SpecCapability.confirmPassword ||\n meta.fieldType === SpecCapability.externalPassword\n ) {\n @if (isDisabled) {\n <acl-crd-form-item [plain]=\"true\">\n <ng-container *ngTemplateOutlet=\"passwordView\"></ng-container>\n </acl-crd-form-item>\n }\n @if (!isDisabled) {\n <acl-password-input\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]=\"\n meta.fieldType !== SpecCapability.externalPassword\n \"\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 }\n }\n <!-- group field -->\n @if (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 }\n <!-- array field groups -->\n <!-- array field table -->\n @if (isArrayField(field)) {\n @if (field | pure: isArrayFieldTable) {\n <acl-crd-array-table\n [arrayFieldGroup]=\"field\"\n [formDataState]=\"formDataState\"\n [readonly]=\"isDisabled\"\n (valueChange)=\"valueChange.emit($event)\"\n >\n </acl-crd-array-table>\n } @else {\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 }\n }\n }\n }\n}\n\n<ng-template #passwordView>\n {{ PASSWORD_REVEAL }}\n</ng-template>\n\n<ng-template #radioLabel>\n {{\n control.value\n | pure: getOptionDisplay : (field.capabilities | pure: getRadioOptions)\n | translate\n }}\n</ng-template>\n\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\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\n<ng-template #switchReadonly>{{\n control.value\n | pure: convertBooleanSwitchValue : field.capabilities\n | translate\n}}</ng-template>\n\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", styles: [":host .input-group{width:100%}:host ::ng-deep .aui-form-item__label-wrapper:not(.hasLabel){display:none}:host .flex-1{flex:1 1 0%}:host .widget-wrapper{display:flex;width:100%;flex-direction:column}\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.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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 }); }
|
|
2140
2251
|
}
|
|
2141
2252
|
__decorate([
|
|
2142
2253
|
ObservableInput(),
|
|
@@ -2175,7 +2286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
2175
2286
|
ParseJsonTranslatePipe,
|
|
2176
2287
|
PurePipe,
|
|
2177
2288
|
TranslatePipe,
|
|
2178
|
-
], 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"] }]
|
|
2289
|
+
], template: "@if (field) {\n @if (\n {\n fieldType: field | pure: getFieldType,\n isBasicTypeField: field | pure: isBasicTypeField,\n };\n as meta\n ) {\n @if (meta.isBasicTypeField) {\n @if (!(field.capabilities | pure: getWidgets)) {\n <acl-crd-form-item>\n @switch (meta.fieldType) {\n @case (SpecCapability.number) {\n <input\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 }\n @case (SpecCapability.booleanSwitch) {\n <aui-switch\n auiFormItemControl\n [aclReadonlyField]=\"isDisabled\"\n [aclReadonlyFieldTemplate]=\"switchReadonly\"\n [formControl]=\"control\"\n ></aui-switch>\n }\n @case (SpecCapability.select) {\n @if (isMultiple) {\n <aui-multi-select\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 @for (option of dynamicOptions$ | async; track option) {\n <aui-option\n [value]=\"option.value\"\n [label]=\"option.label\"\n >\n {{ option.label }}\n </aui-option>\n }\n <aui-option-placeholder>{{\n 'no_data' | translate\n }}</aui-option-placeholder>\n </aui-multi-select>\n }\n @if (!isMultiple) {\n <aui-select\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 @for (option of dynamicOptions$ | async; track option) {\n <aui-option\n [value]=\"option.value\"\n [label]=\"option.label | aclParseJsonTranslate\"\n >\n {{ option.label | aclParseJsonTranslate }}\n </aui-option>\n }\n <aui-option-placeholder>{{\n 'no_data' | translate\n }}</aui-option-placeholder>\n </aui-select>\n }\n @if ((dynamicExpression$ | async).options) {\n <button\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 }\n }\n @case (SpecCapability.radio) {\n <aui-radio-group\n auiFormItemControl\n [formControl]=\"control\"\n [required]=\"isRequired\"\n [aclReadonlyField]=\"isDisabled\"\n [aclReadonlyFieldTemplate]=\"radioLabel\"\n >\n <ng-container>\n @for (\n option of field.capabilities | pure: getRadioOptions;\n track option\n ) {\n <aui-radio-button [value]=\"option.value\">\n {{ option.display | translate }}\n </aui-radio-button>\n }\n </ng-container>\n </aui-radio-group>\n }\n @case (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 }\n @case (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 }\n @case (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 }\n @case (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 }\n @case (SpecCapability.textarea) {\n <textarea\n auiFormItemControl\n aui-input\n [required]=\"isRequired\"\n [formControl]=\"control\"\n [aclReadonlyField]=\"isDisabled\"\n [placeholder]=\"field | pure: getFieldPlaceholder | translate\"\n ></textarea>\n }\n @case (SpecCapability.tagsInput) {\n <aui-tags-input\n auiFormItemControl\n class=\"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 }\n @default {\n @if ((field | pure: isLink) && isDisabled) {\n <acl-crd-link\n auiFormItemControl\n [field]=\"field\"\n [formControl]=\"control\"\n ></acl-crd-link>\n } @else {\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 }\n }\n }\n </acl-crd-form-item>\n }\n @if (field.capabilities | pure: getWidgets; as widget) {\n <div class=\"widget-wrapper\">\n <ng-container *ngComponentOutlet=\"widget.component\"></ng-container>\n </div>\n }\n } @else {\n @if (\n meta.fieldType === SpecCapability.password ||\n meta.fieldType === SpecCapability.confirmPassword ||\n meta.fieldType === SpecCapability.externalPassword\n ) {\n @if (isDisabled) {\n <acl-crd-form-item [plain]=\"true\">\n <ng-container *ngTemplateOutlet=\"passwordView\"></ng-container>\n </acl-crd-form-item>\n }\n @if (!isDisabled) {\n <acl-password-input\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]=\"\n meta.fieldType !== SpecCapability.externalPassword\n \"\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 }\n }\n <!-- group field -->\n @if (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 }\n <!-- array field groups -->\n <!-- array field table -->\n @if (isArrayField(field)) {\n @if (field | pure: isArrayFieldTable) {\n <acl-crd-array-table\n [arrayFieldGroup]=\"field\"\n [formDataState]=\"formDataState\"\n [readonly]=\"isDisabled\"\n (valueChange)=\"valueChange.emit($event)\"\n >\n </acl-crd-array-table>\n } @else {\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 }\n }\n }\n }\n}\n\n<ng-template #passwordView>\n {{ PASSWORD_REVEAL }}\n</ng-template>\n\n<ng-template #radioLabel>\n {{\n control.value\n | pure: getOptionDisplay : (field.capabilities | pure: getRadioOptions)\n | translate\n }}\n</ng-template>\n\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\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\n<ng-template #switchReadonly>{{\n control.value\n | pure: convertBooleanSwitchValue : field.capabilities\n | translate\n}}</ng-template>\n\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", styles: [":host .input-group{width:100%}:host ::ng-deep .aui-form-item__label-wrapper:not(.hasLabel){display:none}:host .flex-1{flex:1 1 0%}:host .widget-wrapper{display:flex;width:100%;flex-direction:column}\n"] }]
|
|
2179
2290
|
}], propDecorators: { field: [{
|
|
2180
2291
|
type: Input
|
|
2181
2292
|
}], field$: [], readonly: [{
|
|
@@ -2443,7 +2554,12 @@ class CrdFormComponent {
|
|
|
2443
2554
|
this.form.onSubmit(null);
|
|
2444
2555
|
}
|
|
2445
2556
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CrdFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2446
|
-
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" },
|
|
2557
|
+
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: [
|
|
2558
|
+
{
|
|
2559
|
+
provide: CRD_FORM_CONTEXT,
|
|
2560
|
+
useExisting: CrdFormComponent,
|
|
2561
|
+
},
|
|
2562
|
+
], 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 }); }
|
|
2447
2563
|
}
|
|
2448
2564
|
__decorate([
|
|
2449
2565
|
ObservableInput(),
|
|
@@ -2451,7 +2567,12 @@ __decorate([
|
|
|
2451
2567
|
], CrdFormComponent.prototype, "formContext$", void 0);
|
|
2452
2568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CrdFormComponent, decorators: [{
|
|
2453
2569
|
type: Component,
|
|
2454
|
-
args: [{ selector: 'acl-crd-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true,
|
|
2570
|
+
args: [{ selector: 'acl-crd-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, providers: [
|
|
2571
|
+
{
|
|
2572
|
+
provide: CRD_FORM_CONTEXT,
|
|
2573
|
+
useExisting: CrdFormComponent,
|
|
2574
|
+
},
|
|
2575
|
+
], imports: [
|
|
2455
2576
|
FormsModule,
|
|
2456
2577
|
FormModule,
|
|
2457
2578
|
forwardRef(() => OperandFieldComponent),
|
|
@@ -2499,115 +2620,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
2499
2620
|
type: Input
|
|
2500
2621
|
}] } });
|
|
2501
2622
|
|
|
2502
|
-
class BaseOperandFiledArrayComponent {
|
|
2503
|
-
constructor() {
|
|
2504
|
-
this.readonly = false;
|
|
2505
|
-
this.valueChange = new EventEmitter();
|
|
2506
|
-
this.itemRemove = new EventEmitter();
|
|
2507
|
-
this.getFieldDisplayName = getFieldDisplayName;
|
|
2508
|
-
this.crdForm = inject(CrdFormComponent);
|
|
2509
|
-
}
|
|
2510
|
-
get expanded() {
|
|
2511
|
-
return this._expanded ?? !isFolded(this.arrayFieldGroup);
|
|
2512
|
-
}
|
|
2513
|
-
set expanded(expanded) {
|
|
2514
|
-
this._expanded = expanded;
|
|
2515
|
-
}
|
|
2516
|
-
ngOnChanges({ arrayFieldGroup, formDataState }) {
|
|
2517
|
-
if (!this.basicArrayFieldTemplate &&
|
|
2518
|
-
arrayFieldGroup.currentValue?.fieldLists?.length > 0) {
|
|
2519
|
-
this.basicArrayFieldTemplate = last(arrayFieldGroup.currentValue.fieldLists);
|
|
2520
|
-
}
|
|
2521
|
-
if (formDataState?.currentValue && formDataState?.previousValue) {
|
|
2522
|
-
const currValue = getFormData(formDataState.currentValue, this.arrayFieldGroup.path);
|
|
2523
|
-
const arrayFieldLength = this.arrayFieldGroup.fieldLists?.length;
|
|
2524
|
-
if (currValue?.size > arrayFieldLength) {
|
|
2525
|
-
Array.from({ length: currValue.size - arrayFieldLength }).forEach(() => {
|
|
2526
|
-
this.addItem();
|
|
2527
|
-
});
|
|
2528
|
-
}
|
|
2529
|
-
}
|
|
2530
|
-
}
|
|
2531
|
-
fieldValueChange(e) {
|
|
2532
|
-
this.valueChange.emit(e);
|
|
2533
|
-
}
|
|
2534
|
-
addItem() {
|
|
2535
|
-
const newFields = this.basicArrayFieldTemplate.map(field => {
|
|
2536
|
-
const toPath = modifyArrayFieldPathIndex(field.path, () => this.arrayFieldGroup.fieldLists.length);
|
|
2537
|
-
return {
|
|
2538
|
-
...repairFieldChildPathByCorrectIndex(field, field.path, toPath),
|
|
2539
|
-
};
|
|
2540
|
-
});
|
|
2541
|
-
this.arrayFieldGroup.fieldLists = [
|
|
2542
|
-
...this.arrayFieldGroup.fieldLists,
|
|
2543
|
-
newFields,
|
|
2544
|
-
];
|
|
2545
|
-
}
|
|
2546
|
-
removeItem(index) {
|
|
2547
|
-
const groupToRemove = this.arrayFieldGroup.fieldLists[index];
|
|
2548
|
-
const groupUntouched = this.arrayFieldGroup.fieldLists.filter((_, idx) => idx < index);
|
|
2549
|
-
const groupToLeftShift = this.arrayFieldGroup.fieldLists.filter((_, idx) => idx > index);
|
|
2550
|
-
const leftShiftedGroups = groupToLeftShift.map(group => group.map(field => {
|
|
2551
|
-
const toPath = modifyArrayFieldPathIndex(field.path, idx => idx - 1);
|
|
2552
|
-
return {
|
|
2553
|
-
...repairFieldChildPathByCorrectIndex(field, field.path, toPath),
|
|
2554
|
-
};
|
|
2555
|
-
}));
|
|
2556
|
-
this.arrayFieldGroup.fieldLists = [...groupUntouched, ...leftShiftedGroups];
|
|
2557
|
-
const [match, formDataPathToRemove] = /^(.*\[\d+]).*$/.exec(groupToRemove?.[0].path) || [];
|
|
2558
|
-
if (match) {
|
|
2559
|
-
this.itemRemove.next(formDataPathToRemove);
|
|
2560
|
-
}
|
|
2561
|
-
this.crdForm.controlMap.forEach((_, key) => {
|
|
2562
|
-
if (key.startsWith(`${this.arrayFieldGroup.path}[${this.arrayFieldGroup.fieldLists.length}]`)) {
|
|
2563
|
-
this.crdForm.controlMap.delete(key);
|
|
2564
|
-
}
|
|
2565
|
-
});
|
|
2566
|
-
this.crdForm.refreshValidation();
|
|
2567
|
-
this.deleteFormData(`${this.arrayFieldGroup.path}[${index}]`);
|
|
2568
|
-
}
|
|
2569
|
-
deleteFormData(path) {
|
|
2570
|
-
this.valueChange.next({
|
|
2571
|
-
field: {
|
|
2572
|
-
...this.arrayFieldGroup,
|
|
2573
|
-
path,
|
|
2574
|
-
},
|
|
2575
|
-
data: null,
|
|
2576
|
-
});
|
|
2577
|
-
}
|
|
2578
|
-
fieldIsRequired(field) {
|
|
2579
|
-
return (field?.required ||
|
|
2580
|
-
Object.keys(field?.validations || {})?.includes(Validations.required));
|
|
2581
|
-
}
|
|
2582
|
-
get columnFields() {
|
|
2583
|
-
return this.basicArrayFieldTemplate;
|
|
2584
|
-
}
|
|
2585
|
-
trackByFn(index) {
|
|
2586
|
-
return index;
|
|
2587
|
-
}
|
|
2588
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseOperandFiledArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2589
|
-
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 }); }
|
|
2590
|
-
}
|
|
2591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseOperandFiledArrayComponent, decorators: [{
|
|
2592
|
-
type: Directive
|
|
2593
|
-
}], propDecorators: { arrayFieldGroup: [{
|
|
2594
|
-
type: Input
|
|
2595
|
-
}], formDataState: [{
|
|
2596
|
-
type: Input
|
|
2597
|
-
}], formErrors: [{
|
|
2598
|
-
type: Input
|
|
2599
|
-
}], isArrayTable: [{
|
|
2600
|
-
type: Input
|
|
2601
|
-
}], readonly: [{
|
|
2602
|
-
type: Input
|
|
2603
|
-
}], fields: [{
|
|
2604
|
-
type: Input
|
|
2605
|
-
}], valueChange: [{
|
|
2606
|
-
type: Output
|
|
2607
|
-
}], itemRemove: [{
|
|
2608
|
-
type: Output
|
|
2609
|
-
}] } });
|
|
2610
|
-
|
|
2611
2623
|
const WIDGETS = [
|
|
2612
2624
|
CrdFormArrayTableComponent,
|
|
2613
2625
|
K8sResourcePrefixComponent,
|
|
@@ -3017,18 +3029,17 @@ class SpecCapabilityComponent {
|
|
|
3017
3029
|
return false;
|
|
3018
3030
|
}
|
|
3019
3031
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SpecCapabilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3020
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3032
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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: "@if (field?.capabilities | pure: getCapability; as type) {\n <div class=\"field-set-item__label\">\n {{ field | pure: getFieldDisplayName | translate }}\n </div>\n @switch (type) {\n @case (SpecCapability.resourceRequirements) {\n <acl-crd-resource-requirements\n [ngModel]=\"field?.value\"\n [field]=\"field\"\n [readOnly]=\"true\"\n >\n </acl-crd-resource-requirements>\n }\n @case (SpecCapability.booleanSwitch) {\n {{ (field.value ? 'switch_open' : 'switch_close') | translate }}\n }\n @case (SpecCapability.yaml) {\n <acl-crd-yaml-editor\n [ngModel]=\"field?.value\"\n [actionsConfig]=\"viewActions\"\n [options]=\"yamlReadOptions\"\n >\n </acl-crd-yaml-editor>\n }\n @default {\n <div\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 }\n }\n}\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: 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 }); }
|
|
3021
3033
|
}
|
|
3022
3034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SpecCapabilityComponent, decorators: [{
|
|
3023
3035
|
type: Component,
|
|
3024
3036
|
args: [{ selector: 'acl-spec-descriptor-capability', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3025
|
-
CommonModule,
|
|
3026
3037
|
FormsModule,
|
|
3027
3038
|
PurePipe,
|
|
3028
3039
|
TranslatePipe,
|
|
3029
3040
|
ResourceRequirementsComponent,
|
|
3030
3041
|
YamlEditorComponent,
|
|
3031
|
-
], template: "
|
|
3042
|
+
], template: "@if (field?.capabilities | pure: getCapability; as type) {\n <div class=\"field-set-item__label\">\n {{ field | pure: getFieldDisplayName | translate }}\n </div>\n @switch (type) {\n @case (SpecCapability.resourceRequirements) {\n <acl-crd-resource-requirements\n [ngModel]=\"field?.value\"\n [field]=\"field\"\n [readOnly]=\"true\"\n >\n </acl-crd-resource-requirements>\n }\n @case (SpecCapability.booleanSwitch) {\n {{ (field.value ? 'switch_open' : 'switch_close') | translate }}\n }\n @case (SpecCapability.yaml) {\n <acl-crd-yaml-editor\n [ngModel]=\"field?.value\"\n [actionsConfig]=\"viewActions\"\n [options]=\"yamlReadOptions\"\n >\n </acl-crd-yaml-editor>\n }\n @default {\n <div\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 }\n }\n}\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"] }]
|
|
3032
3043
|
}], propDecorators: { field: [{
|
|
3033
3044
|
type: Input
|
|
3034
3045
|
}], fields: [{
|
|
@@ -3084,5 +3095,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3084
3095
|
* Generated bundle index. Do not edit.
|
|
3085
3096
|
*/
|
|
3086
3097
|
|
|
3087
|
-
export { BaseOperandFiledArrayComponent, BasicAuthCreateSecretDialogComponent, BasicAuthSecretComponent, 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 };
|
|
3098
|
+
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 };
|
|
3088
3099
|
//# sourceMappingURL=alauda-fe-crd-form.mjs.map
|