@vgip/meta-ui 1.3.8 → 1.3.9

package/fesm2020/vgip-meta-ui.mjs

@@ -249,9 +249,29 @@ const radioFieldNormalizer = (field) => {
     const f = {
         label: field.label,
         name: field.name,
-        options: field.picklist || []
+        options: field.options || []
     };
     f.type = field.name ? 'radio' : 'missing name';
+    if (field.picklist) {
+        for (const o of field.picklist) {
+            const opt = {
+                id: o.name || o.id,
+                label: o.label
+            };
+            if (field.for) {
+                opt.for = field.for;
+            }
+            if (o.validFor && field.controllerName) {
+                const validFor = {};
+                validFor[field.controllerName] = o.validFor;
+                opt.for = validFor;
+            }
+            f.options.push(opt);
+            if (o.defaultValue && !field.default) {
+                f.default = opt.id;
+            }
+        }
+    }
     return f;
 };
 
@@ -341,6 +361,9 @@ const fieldNormalizer = (field, uniqFieldNames) => {
             name: field.name,
             fields: uniqueNameFilter(field.fields || field.reference || [], uniqFieldNames, (typeof (field.name) !== 'undefined')).map((v) => fieldNormalizer(v, uniqFieldNames))
         };
+        if (field.subtype) {
+            f.subtype = field.subtype;
+        }
     }
     else if (fieldType === 'list') {
         const list = field.list || field.reference;
@@ -348,8 +371,11 @@ const fieldNormalizer = (field, uniqFieldNames) => {
             type: field.name ? 'list' : 'missing name',
             label: field.label,
             name: field.name,
-            list: fieldNormalizer(uniqueNameFilter(list, uniqFieldNames), uniqFieldNames)
+            list: fieldNormalizer(uniqueNameFilter(list, uniqFieldNames), field.name ? [] : uniqFieldNames)
         };
+        if (field.selectable) {
+            f.selectable = field.selectable;
+        }
     }
     else {
         f = {
@@ -1799,6 +1825,7 @@ class FieldRadio extends FieldAbstract {
         if (this.default && !this.model) {
             setTimeout(() => {
                 this.parent[this.meta.name] = this.meta.valueType === 'object' ? this.default : (this.default.id || this.default);
+                this.onModelChange(this.model);
             }, 0);
         }
     }
@@ -2850,10 +2877,10 @@ class FieldComposite extends FieldAbstract {
     }
 }
 FieldComposite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldComposite, deps: null, target: i0.ɵɵFactoryTarget.Component });
-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' [ngClass]=\"{ shown: !field.$invisible }\"></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"] }] });
+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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldComposite, decorators: [{
             type: Component,
-            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' [ngClass]=\"{ shown: !field.$invisible }\"></vgip-meta-field>\n  </div>\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"] }]
+            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"] }]
         }], propDecorators: { meta: [{
                 type: Input
             }] } });
@@ -4139,10 +4166,10 @@ class FieldList extends FieldAbstract {
     }
 }
 FieldList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-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}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.helpText' class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n</div>", 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 }] });
+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}}&nbsp;</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 }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FieldList, decorators: [{
             type: Component,
-            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}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.helpText' class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n</div>", 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"] }]
+            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}}&nbsp;</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"] }]
         }] });
 //// LAYOUT
 class MetaLayout {