@vgip/meta-ui 1.4.1 → 1.4.3
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.
- package/esm2020/lib/common/fieldNormalizer/index.mjs +7 -1
- package/esm2020/lib/common/metaNormalizer.mjs +9 -1
- package/esm2020/lib/common/utils/smartProp.mjs +17 -0
- package/esm2020/lib/field.mjs +5 -5
- package/esm2020/lib/fieldAbstract.mjs +58 -14
- package/esm2020/lib/fieldDatetime/index.mjs +20 -7
- package/fesm2015/vgip-meta-ui.mjs +110 -23
- package/fesm2015/vgip-meta-ui.mjs.map +1 -1
- package/fesm2020/vgip-meta-ui.mjs +110 -23
- package/fesm2020/vgip-meta-ui.mjs.map +1 -1
- package/lib/common/utils/smartProp.d.ts +1 -0
- package/package.json +1 -1
|
@@ -376,6 +376,9 @@ const fieldNormalizer = (field, uniqFieldNames) => {
|
|
|
376
376
|
if (field.selectable) {
|
|
377
377
|
f.selectable = field.selectable;
|
|
378
378
|
}
|
|
379
|
+
if (field.resourceType) {
|
|
380
|
+
f.resourceType = field.resourceType;
|
|
381
|
+
}
|
|
379
382
|
}
|
|
380
383
|
else {
|
|
381
384
|
f = {
|
|
@@ -437,6 +440,9 @@ const fieldNormalizer = (field, uniqFieldNames) => {
|
|
|
437
440
|
if (field.visible || field.alwaysVisible) {
|
|
438
441
|
f.visible = field.visible || field.alwaysVisible;
|
|
439
442
|
}
|
|
443
|
+
if (field.hidden) {
|
|
444
|
+
f.hidden = field.hidden;
|
|
445
|
+
}
|
|
440
446
|
if (field.hint || field.helpText) {
|
|
441
447
|
f.hint = field.hint || field.helpText;
|
|
442
448
|
}
|
|
@@ -786,6 +792,14 @@ const metaNormalizer = (meta, integration, resourceType) => {
|
|
|
786
792
|
if (resourceType === 'CandidateNote' || resourceType === 'ContactNote') {
|
|
787
793
|
metaV3.layout.editable = false;
|
|
788
794
|
}
|
|
795
|
+
// } else if (integrationCode === 'CLIO') {
|
|
796
|
+
// if (resourceType === 'PhoneCommunication') {
|
|
797
|
+
// for (const f of metaV3.layout.sections[0].fields) {
|
|
798
|
+
// if (f.name === 'time_entries') {
|
|
799
|
+
// f.visible = 'CREATE';
|
|
800
|
+
// }
|
|
801
|
+
// }
|
|
802
|
+
// }
|
|
789
803
|
}
|
|
790
804
|
return sortObj(metaV3);
|
|
791
805
|
};
|
|
@@ -882,6 +896,23 @@ const templateBuilder = (metaContext, pattern) => {
|
|
|
882
896
|
return patternBuilder;
|
|
883
897
|
};
|
|
884
898
|
|
|
899
|
+
const extractValueBySmartProp = (rootObj, prop) => {
|
|
900
|
+
// { WhoId: { id: 1, type: 'Contact' } } // "WhoId.type" -> 'Contact'
|
|
901
|
+
if (rootObj.hasOwnProperty(prop)) {
|
|
902
|
+
return rootObj[prop];
|
|
903
|
+
}
|
|
904
|
+
else {
|
|
905
|
+
const parts = prop.split('.');
|
|
906
|
+
if (parts.length > 1) {
|
|
907
|
+
if (rootObj.hasOwnProperty(parts[0])) {
|
|
908
|
+
if (typeof (rootObj[parts[0]]) === 'object' && rootObj[parts[0]][parts[1]]) {
|
|
909
|
+
return extractValueBySmartProp(rootObj[parts[0]], prop.substring(parts[0].length + 1));
|
|
910
|
+
}
|
|
911
|
+
}
|
|
912
|
+
}
|
|
913
|
+
}
|
|
914
|
+
};
|
|
915
|
+
|
|
885
916
|
/*
|
|
886
917
|
* @Author: Alexander.Vangelov@vonage.com
|
|
887
918
|
* @Date: 2019-09-19 17:34:44
|
|
@@ -930,30 +961,65 @@ class FieldAbstract {
|
|
|
930
961
|
configurable: true,
|
|
931
962
|
enumerable: false
|
|
932
963
|
});
|
|
964
|
+
if (typeof (this.meta.hidden) !== 'undefined') {
|
|
965
|
+
if (typeof (this.meta.hidden) === 'object') {
|
|
966
|
+
const setHiddenByPropertyConfig = (par) => {
|
|
967
|
+
if (typeof (this.meta.hidden[par]) === 'boolean') { // any value makes me hidden
|
|
968
|
+
this.meta.$hidden = !!this.parent[par];
|
|
969
|
+
}
|
|
970
|
+
else {
|
|
971
|
+
const value = extractValueBySmartProp(this.parent, par);
|
|
972
|
+
const parValue = value ? (value.id || value.value || value) : value;
|
|
973
|
+
this.meta.$hidden = this.meta.hidden[par] === parValue;
|
|
974
|
+
}
|
|
975
|
+
};
|
|
976
|
+
for (const par of Object.keys(this.meta.hidden)) {
|
|
977
|
+
setHiddenByPropertyConfig(par);
|
|
978
|
+
this.parentChangeSubject.subscribe((value) => {
|
|
979
|
+
if (value && value.hasOwnProperty(par.split('.')[0])) {
|
|
980
|
+
setHiddenByPropertyConfig(par);
|
|
981
|
+
if (this.meta.$hidden) {
|
|
982
|
+
delete this.parent[this.meta.name];
|
|
983
|
+
}
|
|
984
|
+
}
|
|
985
|
+
});
|
|
986
|
+
}
|
|
987
|
+
}
|
|
988
|
+
else if (typeof (this.meta.hidden) === 'string') {
|
|
989
|
+
if (this.meta.hidden.toUpperCase() === 'CREATE') {
|
|
990
|
+
this.meta.$hidden = !this.isPersistedParent;
|
|
991
|
+
}
|
|
992
|
+
else if (this.meta.hidden.toUpperCase() === 'UPDATE') {
|
|
993
|
+
this.meta.$hidden = this.isPersistedParent;
|
|
994
|
+
}
|
|
995
|
+
}
|
|
996
|
+
else {
|
|
997
|
+
this.meta.$hidden = !!this.meta.hidden;
|
|
998
|
+
}
|
|
999
|
+
}
|
|
933
1000
|
Object.defineProperty(this.meta, '$invisible', {
|
|
934
1001
|
value: false,
|
|
935
1002
|
writable: true,
|
|
936
1003
|
configurable: true,
|
|
937
1004
|
enumerable: false
|
|
938
1005
|
});
|
|
939
|
-
if (typeof (this.meta.visible) !== undefined) {
|
|
1006
|
+
if (typeof (this.meta.visible) !== 'undefined') {
|
|
940
1007
|
if (typeof (this.meta.visible) === 'object') {
|
|
941
|
-
|
|
942
|
-
if (typeof (this.meta.visible[par]) === 'boolean') { // any value makes me
|
|
1008
|
+
const setInvisibleByPropertyConfig = (par) => {
|
|
1009
|
+
if (typeof (this.meta.visible[par]) === 'boolean') { // any value makes me hidden
|
|
943
1010
|
this.meta.$invisible = !this.parent[par];
|
|
944
1011
|
}
|
|
945
|
-
else {
|
|
946
|
-
|
|
1012
|
+
else {
|
|
1013
|
+
const value = extractValueBySmartProp(this.parent, par);
|
|
1014
|
+
const parValue = value ? (value.id || value.value || value) : value;
|
|
1015
|
+
this.meta.$invisible = this.meta.visible[par] !== parValue;
|
|
947
1016
|
}
|
|
1017
|
+
};
|
|
1018
|
+
for (const par of Object.keys(this.meta.visible)) {
|
|
1019
|
+
setInvisibleByPropertyConfig(par);
|
|
948
1020
|
this.parentChangeSubject.subscribe((value) => {
|
|
949
|
-
if (value && value.hasOwnProperty(par)) {
|
|
950
|
-
|
|
951
|
-
if (typeof (this.meta.visible[par]) === 'boolean') { // any value makes me visible
|
|
952
|
-
this.meta.$invisible = !parValue;
|
|
953
|
-
}
|
|
954
|
-
else {
|
|
955
|
-
this.meta.$invisible = (parValue !== this.meta.visible[par]);
|
|
956
|
-
}
|
|
1021
|
+
if (value && value.hasOwnProperty(par.split('.')[0])) {
|
|
1022
|
+
setInvisibleByPropertyConfig(par);
|
|
957
1023
|
if (this.meta.$invisible) {
|
|
958
1024
|
delete this.parent[this.meta.name];
|
|
959
1025
|
}
|
|
@@ -961,6 +1027,14 @@ class FieldAbstract {
|
|
|
961
1027
|
});
|
|
962
1028
|
}
|
|
963
1029
|
}
|
|
1030
|
+
else if (typeof (this.meta.visible) === 'string') {
|
|
1031
|
+
if (this.meta.visible.toUpperCase() === 'CREATE') {
|
|
1032
|
+
this.meta.$invisible = this.isPersistedParent;
|
|
1033
|
+
}
|
|
1034
|
+
else if (this.meta.visible.toUpperCase() === 'UPDATE') {
|
|
1035
|
+
this.meta.$invisible = !this.isPersistedParent;
|
|
1036
|
+
}
|
|
1037
|
+
}
|
|
964
1038
|
}
|
|
965
1039
|
if (this.theme !== 'inherit') {
|
|
966
1040
|
const metaTheme = this.theme === 'dark' ? metaDark : metaLight;
|
|
@@ -2063,7 +2137,10 @@ class FieldDatetime extends FieldAbstract {
|
|
|
2063
2137
|
}
|
|
2064
2138
|
}
|
|
2065
2139
|
}
|
|
2066
|
-
if (this.meta.valueType === '
|
|
2140
|
+
if (this.meta.valueType === 'isostring') {
|
|
2141
|
+
this.value = date.toISOString();
|
|
2142
|
+
}
|
|
2143
|
+
else if (this.meta.valueType === 'string') {
|
|
2067
2144
|
if ((this.meta.type || this.meta.subtype) === 'date') {
|
|
2068
2145
|
this.value = date.toISOString().split('T')[0];
|
|
2069
2146
|
}
|
|
@@ -2104,11 +2181,21 @@ class FieldDatetime extends FieldAbstract {
|
|
|
2104
2181
|
date = new Date(Date.parse(new Date().toISOString().replace(/T.*Z/, `T${value}Z`)) + (new Date().getTimezoneOffset() * 60000));
|
|
2105
2182
|
}
|
|
2106
2183
|
this.model = date.toTimeString().split(' ')[0];
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2184
|
+
if (this.meta.valueType === 'isostring') {
|
|
2185
|
+
this.value = date.toISOString();
|
|
2186
|
+
}
|
|
2187
|
+
else {
|
|
2188
|
+
date.setFullYear(1970);
|
|
2189
|
+
date.setMonth(0);
|
|
2190
|
+
date.setDate(1);
|
|
2191
|
+
date.setMilliseconds(0);
|
|
2192
|
+
if (this.meta.valueType === 'string') {
|
|
2193
|
+
this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().split('T')[1].substring(0, 8);
|
|
2194
|
+
}
|
|
2195
|
+
else {
|
|
2196
|
+
this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).getTime();
|
|
2197
|
+
}
|
|
2198
|
+
}
|
|
2112
2199
|
}
|
|
2113
2200
|
catch (e) {
|
|
2114
2201
|
console.error('Date parse error', e.message, `"${value}"`, `(${typeof (value)})`);
|
|
@@ -2888,10 +2975,10 @@ class FieldComposite extends FieldAbstract {
|
|
|
2888
2975
|
}
|
|
2889
2976
|
}
|
|
2890
2977
|
FieldComposite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldComposite, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2891
|
-
FieldComposite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FieldComposite, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\" >\n <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngFor='let field of fields'>\n <vgip-meta-field *ngIf='!meta.$invisible' class='shown' [index]='index' [meta]='field' [parent]='value' [integrationCode]='integrationCode' [preview]='preview' theme='inherit'></vgip-meta-field>\n </div>\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"], components: [{ type: i0.forwardRef(function () { return MetaField; }), selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2978
|
+
FieldComposite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FieldComposite, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\" >\n <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngFor='let field of fields'>\n <vgip-meta-field *ngIf='!meta.$invisible' class='shown' [index]='index' [meta]='field' [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' theme='inherit'></vgip-meta-field>\n </div>\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"], components: [{ type: i0.forwardRef(function () { return MetaField; }), selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2892
2979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldComposite, decorators: [{
|
|
2893
2980
|
type: Component,
|
|
2894
|
-
args: [{ template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\" >\n <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngFor='let field of fields'>\n <vgip-meta-field *ngIf='!meta.$invisible' class='shown' [index]='index' [meta]='field' [parent]='value' [integrationCode]='integrationCode' [preview]='preview' theme='inherit'></vgip-meta-field>\n </div>\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"] }]
|
|
2981
|
+
args: [{ template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\" >\n <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngFor='let field of fields'>\n <vgip-meta-field *ngIf='!meta.$invisible' class='shown' [index]='index' [meta]='field' [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' theme='inherit'></vgip-meta-field>\n </div>\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"] }]
|
|
2895
2982
|
}], propDecorators: { meta: [{
|
|
2896
2983
|
type: Input
|
|
2897
2984
|
}] } });
|
|
@@ -4177,10 +4264,10 @@ class FieldList extends FieldAbstract {
|
|
|
4177
4264
|
}
|
|
4178
4265
|
}
|
|
4179
4266
|
FieldList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldList, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4180
|
-
FieldList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FieldList, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div *ngIf='true' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': (f | metaModel)._parent.submitted && f.invalid }\">\n <label class=\"Vlt-label\">{{meta.label || meta.name}} ({{(model || []).length}})<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n <small style='margin-bottom: 4px;' *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n <ng-container *ngIf='model'>\n <div *ngFor='let item of model; let i = index;' style='display: flex; border-bottom: 1px solid var(--vgip-meta-separator-color);'>\n <vgip-meta-field style='flex: 1;' [index]='i' [meta]='list' [parent]='item' [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n <vgip-meta-field *ngIf='meta.selectable' [meta]=\"{ name: meta.selectable.name, label: ' ', type: 'radio', options: [ { id: meta.selectable.value, label: meta.selectable.label } ] }\" [parent]='item' [integrationCode]='integrationCode' theme='inherit' style='margin-left: 12px; margin-top: 12px; margin-right: -12px;'></vgip-meta-field>\n <div style='padding-left: 12px; margin-top: 3px;'>\n <button type='button' (click)='remove(i)' class=\"Vlt-btn Vlt-btn--link\" [disabled]='model.length === (validations.min || 0)'
|
|
4267
|
+
FieldList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FieldList, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div *ngIf='true' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': (f | metaModel)._parent.submitted && f.invalid }\">\n <label class=\"Vlt-label\">{{meta.label || meta.name}} ({{(model || []).length}})<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n <small style='margin-bottom: 4px;' *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n <ng-container *ngIf='model'>\n <div *ngFor='let item of model; let i = index;' style='display: flex; border-bottom: 1px solid var(--vgip-meta-separator-color);'>\n <vgip-meta-field style='flex: 1;' [index]='i' [meta]='list' [parent]='item' [integrationCode]='integrationCode' [resourceType]='meta.resourceType || resourceType' theme='inherit'></vgip-meta-field>\n <vgip-meta-field *ngIf='meta.selectable' [meta]=\"{ name: meta.selectable.name, label: ' ', type: 'radio', options: [ { id: meta.selectable.value, label: meta.selectable.label } ] }\" [parent]='item' [integrationCode]='integrationCode' theme='inherit' style='margin-left: 12px; margin-top: 12px; margin-right: -12px;'></vgip-meta-field>\n <div style='padding-left: 12px; margin-top: 3px;'>\n <button type='button' (click)='remove(i)' class=\"Vlt-btn Vlt-btn--link item-remove-button\" [disabled]='model.length === (validations.min || 0)' aria-label='Remove'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-bin\"/></svg>\n </button>\n </div>\n </div>\n </ng-container>\n <button *ngIf='!validations.max || !model || model.length < validations.max' style='width: 100%;' type='button' (click)='add()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--tertiary Vlt-btn--app Vlt-btn--no-focus item-add-button\" [disabled]='validations.max && model && model.length === validations.max'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{list.label}}\n </button>\n <small *ngIf='(f | metaModel)._parent.submitted && f.invalid' class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required</span>\n <span *ngIf=\"f.errors.maxlength\">Length can not exceed {{validations.maxlength}} characters</span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.helpText' class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n</div>\n", styles: [".Vlt-btn--link:not([disabled]) svg{fill:#e84545}.Vlt-btn--link:not([disabled]):hover svg{fill:#de1c1c}.item-add-button{background-color:var(--vgip-meta-input-action-hover-bg-color);color:var(--vgip-meta-input-color)}.item-add-button svg{fill:var(--vgip-meta-input-color)}.item-add-button:hover{transform:scale(1.02);box-shadow:inset 0 0 0 1px var(--vgip-meta-input-active-border-color)}.item-remove-button{border:0}.item-remove-button:disabled{cursor:not-allowed}\n"], components: [{ type: i0.forwardRef(function () { return MetaField; }), selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i4.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i4.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i4.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "metaModel": i0.forwardRef(function () { return MetaModelPipe; }) }, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
|
|
4181
4268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldList, decorators: [{
|
|
4182
4269
|
type: Component,
|
|
4183
|
-
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div *ngIf='true' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': (f | metaModel)._parent.submitted && f.invalid }\">\n <label class=\"Vlt-label\">{{meta.label || meta.name}} ({{(model || []).length}})<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n <small style='margin-bottom: 4px;' *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n <ng-container *ngIf='model'>\n <div *ngFor='let item of model; let i = index;' style='display: flex; border-bottom: 1px solid var(--vgip-meta-separator-color);'>\n <vgip-meta-field style='flex: 1;' [index]='i' [meta]='list' [parent]='item' [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n <vgip-meta-field *ngIf='meta.selectable' [meta]=\"{ name: meta.selectable.name, label: ' ', type: 'radio', options: [ { id: meta.selectable.value, label: meta.selectable.label } ] }\" [parent]='item' [integrationCode]='integrationCode' theme='inherit' style='margin-left: 12px; margin-top: 12px; margin-right: -12px;'></vgip-meta-field>\n <div style='padding-left: 12px; margin-top: 3px;'>\n <button type='button' (click)='remove(i)' class=\"Vlt-btn Vlt-btn--link\" [disabled]='model.length === (validations.min || 0)'
|
|
4270
|
+
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div *ngIf='true' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': (f | metaModel)._parent.submitted && f.invalid }\">\n <label class=\"Vlt-label\">{{meta.label || meta.name}} ({{(model || []).length}})<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n <small style='margin-bottom: 4px;' *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n <ng-container *ngIf='model'>\n <div *ngFor='let item of model; let i = index;' style='display: flex; border-bottom: 1px solid var(--vgip-meta-separator-color);'>\n <vgip-meta-field style='flex: 1;' [index]='i' [meta]='list' [parent]='item' [integrationCode]='integrationCode' [resourceType]='meta.resourceType || resourceType' theme='inherit'></vgip-meta-field>\n <vgip-meta-field *ngIf='meta.selectable' [meta]=\"{ name: meta.selectable.name, label: ' ', type: 'radio', options: [ { id: meta.selectable.value, label: meta.selectable.label } ] }\" [parent]='item' [integrationCode]='integrationCode' theme='inherit' style='margin-left: 12px; margin-top: 12px; margin-right: -12px;'></vgip-meta-field>\n <div style='padding-left: 12px; margin-top: 3px;'>\n <button type='button' (click)='remove(i)' class=\"Vlt-btn Vlt-btn--link item-remove-button\" [disabled]='model.length === (validations.min || 0)' aria-label='Remove'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-bin\"/></svg>\n </button>\n </div>\n </div>\n </ng-container>\n <button *ngIf='!validations.max || !model || model.length < validations.max' style='width: 100%;' type='button' (click)='add()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--tertiary Vlt-btn--app Vlt-btn--no-focus item-add-button\" [disabled]='validations.max && model && model.length === validations.max'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{list.label}}\n </button>\n <small *ngIf='(f | metaModel)._parent.submitted && f.invalid' class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required</span>\n <span *ngIf=\"f.errors.maxlength\">Length can not exceed {{validations.maxlength}} characters</span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.helpText' class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n</div>\n", styles: [".Vlt-btn--link:not([disabled]) svg{fill:#e84545}.Vlt-btn--link:not([disabled]):hover svg{fill:#de1c1c}.item-add-button{background-color:var(--vgip-meta-input-action-hover-bg-color);color:var(--vgip-meta-input-color)}.item-add-button svg{fill:var(--vgip-meta-input-color)}.item-add-button:hover{transform:scale(1.02);box-shadow:inset 0 0 0 1px var(--vgip-meta-input-active-border-color)}.item-remove-button{border:0}.item-remove-button:disabled{cursor:not-allowed}\n"] }]
|
|
4184
4271
|
}] });
|
|
4185
4272
|
//// LAYOUT
|
|
4186
4273
|
class MetaLayout {
|