@vgip/meta-ui 1.3.7 → 1.3.9
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 +8 -2
- package/esm2020/lib/common/fieldNormalizer/radio.mjs +22 -2
- package/esm2020/lib/field.mjs +13 -7
- package/esm2020/lib/fieldRadio/index.mjs +2 -1
- package/fesm2015/vgip-meta-ui.mjs +41 -8
- package/fesm2015/vgip-meta-ui.mjs.map +1 -1
- package/fesm2020/vgip-meta-ui.mjs +41 -8
- package/fesm2020/vgip-meta-ui.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -249,9 +249,29 @@ const radioFieldNormalizer = (field) => {
|
|
|
249
249
|
const f = {
|
|
250
250
|
label: field.label,
|
|
251
251
|
name: field.name,
|
|
252
|
-
options: field.
|
|
252
|
+
options: field.options || []
|
|
253
253
|
};
|
|
254
254
|
f.type = field.name ? 'radio' : 'missing name';
|
|
255
|
+
if (field.picklist) {
|
|
256
|
+
for (const o of field.picklist) {
|
|
257
|
+
const opt = {
|
|
258
|
+
id: o.name || o.id,
|
|
259
|
+
label: o.label
|
|
260
|
+
};
|
|
261
|
+
if (field.for) {
|
|
262
|
+
opt.for = field.for;
|
|
263
|
+
}
|
|
264
|
+
if (o.validFor && field.controllerName) {
|
|
265
|
+
const validFor = {};
|
|
266
|
+
validFor[field.controllerName] = o.validFor;
|
|
267
|
+
opt.for = validFor;
|
|
268
|
+
}
|
|
269
|
+
f.options.push(opt);
|
|
270
|
+
if (o.defaultValue && !field.default) {
|
|
271
|
+
f.default = opt.id;
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
}
|
|
255
275
|
return f;
|
|
256
276
|
};
|
|
257
277
|
|
|
@@ -341,6 +361,9 @@ const fieldNormalizer = (field, uniqFieldNames) => {
|
|
|
341
361
|
name: field.name,
|
|
342
362
|
fields: uniqueNameFilter(field.fields || field.reference || [], uniqFieldNames, (typeof (field.name) !== 'undefined')).map((v) => fieldNormalizer(v, uniqFieldNames))
|
|
343
363
|
};
|
|
364
|
+
if (field.subtype) {
|
|
365
|
+
f.subtype = field.subtype;
|
|
366
|
+
}
|
|
344
367
|
}
|
|
345
368
|
else if (fieldType === 'list') {
|
|
346
369
|
const list = field.list || field.reference;
|
|
@@ -348,8 +371,11 @@ const fieldNormalizer = (field, uniqFieldNames) => {
|
|
|
348
371
|
type: field.name ? 'list' : 'missing name',
|
|
349
372
|
label: field.label,
|
|
350
373
|
name: field.name,
|
|
351
|
-
list: fieldNormalizer(uniqueNameFilter(list, uniqFieldNames), uniqFieldNames)
|
|
374
|
+
list: fieldNormalizer(uniqueNameFilter(list, uniqFieldNames), field.name ? [] : uniqFieldNames)
|
|
352
375
|
};
|
|
376
|
+
if (field.selectable) {
|
|
377
|
+
f.selectable = field.selectable;
|
|
378
|
+
}
|
|
353
379
|
}
|
|
354
380
|
else {
|
|
355
381
|
f = {
|
|
@@ -1799,6 +1825,7 @@ class FieldRadio extends FieldAbstract {
|
|
|
1799
1825
|
if (this.default && !this.model) {
|
|
1800
1826
|
setTimeout(() => {
|
|
1801
1827
|
this.parent[this.meta.name] = this.meta.valueType === 'object' ? this.default : (this.default.id || this.default);
|
|
1828
|
+
this.onModelChange(this.model);
|
|
1802
1829
|
}, 0);
|
|
1803
1830
|
}
|
|
1804
1831
|
}
|
|
@@ -2850,10 +2877,10 @@ class FieldComposite extends FieldAbstract {
|
|
|
2850
2877
|
}
|
|
2851
2878
|
}
|
|
2852
2879
|
FieldComposite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldComposite, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2853
|
-
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 class='shown' [index]='index' [meta]='field' [parent]='value' [integrationCode]='integrationCode' [preview]='preview' theme='inherit'
|
|
2880
|
+
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"] }] });
|
|
2854
2881
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldComposite, decorators: [{
|
|
2855
2882
|
type: Component,
|
|
2856
|
-
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 class='shown' [index]='index' [meta]='field' [parent]='value' [integrationCode]='integrationCode' [preview]='preview' theme='inherit'
|
|
2883
|
+
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"] }]
|
|
2857
2884
|
}], propDecorators: { meta: [{
|
|
2858
2885
|
type: Input
|
|
2859
2886
|
}] } });
|
|
@@ -2952,7 +2979,13 @@ class FieldSelect extends FieldAbstract {
|
|
|
2952
2979
|
set: (value) => {
|
|
2953
2980
|
if (this.multiple) {
|
|
2954
2981
|
if (value && value instanceof Array === false) {
|
|
2955
|
-
|
|
2982
|
+
for (const o of this.options) {
|
|
2983
|
+
if ((value.id || value) === (o.id || o.value || o.name || 0)) {
|
|
2984
|
+
this.model = [o];
|
|
2985
|
+
this.value = [this.modelToValue(o, this.meta.valueType)];
|
|
2986
|
+
break;
|
|
2987
|
+
}
|
|
2988
|
+
}
|
|
2956
2989
|
}
|
|
2957
2990
|
if (!value || value.length) {
|
|
2958
2991
|
const values = (value instanceof Array) ? value : (value || '').split(';'); // should not handle incorrect values
|
|
@@ -2963,7 +2996,7 @@ class FieldSelect extends FieldAbstract {
|
|
|
2963
2996
|
for (const o of this.options) {
|
|
2964
2997
|
if ((v.id || v) === (o.id || o.value || o.name || 0)) {
|
|
2965
2998
|
this.model.push(o);
|
|
2966
|
-
this.value.push(
|
|
2999
|
+
this.value.push(this.modelToValue(o, this.meta.valueType));
|
|
2967
3000
|
break;
|
|
2968
3001
|
}
|
|
2969
3002
|
}
|
|
@@ -4133,10 +4166,10 @@ class FieldList extends FieldAbstract {
|
|
|
4133
4166
|
}
|
|
4134
4167
|
}
|
|
4135
4168
|
FieldList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldList, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4136
|
-
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 <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)' style='border: 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 style='width: 100%;' type='button' (click)='add()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--tertiary Vlt-btn--app 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
|
|
4169
|
+
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)' style='border: 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 style='width: 100%;' type='button' (click)='add()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--tertiary Vlt-btn--app 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)}\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 }] });
|
|
4137
4170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldList, decorators: [{
|
|
4138
4171
|
type: Component,
|
|
4139
|
-
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 <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)' style='border: 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 style='width: 100%;' type='button' (click)='add()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--tertiary Vlt-btn--app 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
|
|
4172
|
+
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)' style='border: 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 style='width: 100%;' type='button' (click)='add()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--tertiary Vlt-btn--app 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)}\n"] }]
|
|
4140
4173
|
}] });
|
|
4141
4174
|
//// LAYOUT
|
|
4142
4175
|
class MetaLayout {
|