@vgip/meta-ui 1.6.1 → 1.6.2

package/esm2020/lib/common/metaAutofocus.directive.mjs

@@ -21,9 +21,9 @@ export class MetaAutofocusDirective {
         }
     }
 }
-MetaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MetaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: { vgipMetaFormAutofocus: "vgipMetaFormAutofocus" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaAutofocusDirective, decorators: [{
+MetaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+MetaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: { vgipMetaFormAutofocus: "vgipMetaFormAutofocus" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaAutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line

package/esm2020/lib/common/metaIcons.pipe.mjs

@@ -18,9 +18,9 @@ export class MetaIconsPipe {
         }
     }
 }
-MetaIconsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaIconsPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-MetaIconsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: MetaIconsPipe, name: "metaIcons" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaIconsPipe, decorators: [{
+MetaIconsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaIconsPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+MetaIconsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: MetaIconsPipe, name: "metaIcons" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaIconsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'metaIcons'

package/esm2020/lib/common/metaModel.pipe.mjs

@@ -13,9 +13,9 @@ export class MetaModelPipe {
         return value;
     }
 }
-MetaModelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaModelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MetaModelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: MetaModelPipe, name: "metaModel" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaModelPipe, decorators: [{
+MetaModelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaModelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MetaModelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: MetaModelPipe, name: "metaModel" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaModelPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'metaModel',

package/esm2020/lib/common/metaStripHtml.pipe.mjs

@@ -11,9 +11,9 @@ export class MetaStripHtmlPipe {
         return value.replace(/<[^>]*>/g, '');
     }
 }
-MetaStripHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaStripHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MetaStripHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: MetaStripHtmlPipe, name: "metaStripHtml" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaStripHtmlPipe, decorators: [{
+MetaStripHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaStripHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MetaStripHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: MetaStripHtmlPipe, name: "metaStripHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaStripHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'metaStripHtml'

package/esm2020/lib/fieldAbstract.mjs

@@ -271,9 +271,9 @@ export class FieldAbstract {
         });
     }
 }
-FieldAbstract.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldAbstract, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FieldAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: FieldAbstract, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldAbstract, decorators: [{
+FieldAbstract.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldAbstract, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FieldAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: FieldAbstract, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldAbstract, decorators: [{
             type: Directive
         }] });
 export class MetaElem {

package/esm2020/lib/fieldBoolean/index.mjs

@@ -41,9 +41,9 @@ export class FieldBoolean extends FieldAbstract {
         }
     }
 }
-FieldBoolean.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldBoolean, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FieldBoolean.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FieldBoolean, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>\n    {{ model ? '\u2714' : '\u2718'}}\n  </div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n\t<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n\t<div class=\"Vlt-switch\" *ngIf=\"meta.subtype === 'switch'\">\n\t\t<label style='vertical-align: middle;'>\n\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='parent[meta.name]' [name]='name'/>\n\t\t\t<span class=\"Vlt-switch__slider\"></span>\n\t\t\t<span style='margin-left: 60px; line-height: 30px; white-space: nowrap;'>{{meta.label || meta.name}}</span>\n\t\t</label>\n\t</div>\n\t<div class=\"Vlt-checkbox\" *ngIf=\"meta.subtype !== 'switch'\">\n\t\t<label style='cursor: pointer;'>\n\t\t\t<span class=\"Vlt-checkbox__button\">\n\t\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='parent[meta.name]' [name]='name'/>\n\t\t\t\t<span class=\"Vlt-checkbox__icon\"></span>\n\t\t\t</span>\n\t\t\t{{meta.label || meta.name}}\n\t\t</label>\n\t</div>\n\t<small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n\t<small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-checkbox+.Vlt-form__element__hint{margin-top:4px}.Vlt-checkbox__button input:not(:checked)~.Vlt-checkbox__icon{background-color:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:hover:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:not(:checked)~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-checkbox__button input:hover:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldBoolean, decorators: [{
+FieldBoolean.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldBoolean, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FieldBoolean.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldBoolean, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>\n    {{ model ? '\u2714' : '\u2718'}}\n  </div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n\t<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n\t<div class=\"Vlt-switch\" *ngIf=\"meta.subtype === 'switch'\">\n\t\t<label style='vertical-align: middle;'>\n\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='parent[meta.name]' [name]='name'/>\n\t\t\t<span class=\"Vlt-switch__slider\"></span>\n\t\t\t<span style='margin-left: 60px; line-height: 30px; white-space: nowrap;'>{{meta.label || meta.name}}</span>\n\t\t</label>\n\t</div>\n\t<div class=\"Vlt-checkbox\" *ngIf=\"meta.subtype !== 'switch'\">\n\t\t<label style='cursor: pointer;'>\n\t\t\t<span class=\"Vlt-checkbox__button\">\n\t\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='parent[meta.name]' [name]='name'/>\n\t\t\t\t<span class=\"Vlt-checkbox__icon\"></span>\n\t\t\t</span>\n\t\t\t{{meta.label || meta.name}}\n\t\t</label>\n\t</div>\n\t<small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n\t<small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-checkbox+.Vlt-form__element__hint{margin-top:4px}.Vlt-checkbox__button input:not(:checked)~.Vlt-checkbox__icon{background-color:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:hover:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:not(:checked)~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-checkbox__button input:hover:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldBoolean, decorators: [{
             type: Component,
             args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>\n    {{ model ? '\u2714' : '\u2718'}}\n  </div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n\t<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n\t<div class=\"Vlt-switch\" *ngIf=\"meta.subtype === 'switch'\">\n\t\t<label style='vertical-align: middle;'>\n\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='parent[meta.name]' [name]='name'/>\n\t\t\t<span class=\"Vlt-switch__slider\"></span>\n\t\t\t<span style='margin-left: 60px; line-height: 30px; white-space: nowrap;'>{{meta.label || meta.name}}</span>\n\t\t</label>\n\t</div>\n\t<div class=\"Vlt-checkbox\" *ngIf=\"meta.subtype !== 'switch'\">\n\t\t<label style='cursor: pointer;'>\n\t\t\t<span class=\"Vlt-checkbox__button\">\n\t\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='parent[meta.name]' [name]='name'/>\n\t\t\t\t<span class=\"Vlt-checkbox__icon\"></span>\n\t\t\t</span>\n\t\t\t{{meta.label || meta.name}}\n\t\t</label>\n\t</div>\n\t<small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n\t<small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-checkbox+.Vlt-form__element__hint{margin-top:4px}.Vlt-checkbox__button input:not(:checked)~.Vlt-checkbox__icon{background-color:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:hover:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:not(:checked)~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-checkbox__button input:hover:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-accent-color)}\n"] }]
         }], propDecorators: { meta: [{

package/esm2020/lib/fieldComposite/index.mjs

@@ -55,9 +55,9 @@ export class FieldComposite extends FieldAbstract {
         }
     }
 }
-FieldComposite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldComposite, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FieldComposite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FieldComposite, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\">\n  <ng-container *ngFor='let field of fields'>\n    <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngIf=\"!field.$invisible\">\n      <vgip-meta-field *ngIf='!meta.$invisible' [ngClass]=\"{ shown: !field.$invisible}\" [index]='index' [scope]='scope' [meta]='field'\n        [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview'\n        theme='inherit'></vgip-meta-field>\n    </div>\n  </ng-container>\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme"], outputs: ["onChange", "onLeave"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldComposite, decorators: [{
+FieldComposite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldComposite, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FieldComposite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldComposite, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\">\n  <ng-container *ngFor='let field of fields'>\n    <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngIf=\"!field.$invisible\">\n      <vgip-meta-field *ngIf='!meta.$invisible' [ngClass]=\"{ shown: !field.$invisible}\" [index]='index' [scope]='scope' [meta]='field'\n        [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview'\n        theme='inherit'></vgip-meta-field>\n    </div>\n  </ng-container>\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme"], outputs: ["onChange", "onLeave"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldComposite, decorators: [{
             type: Component,
             args: [{ template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\">\n  <ng-container *ngFor='let field of fields'>\n    <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngIf=\"!field.$invisible\">\n      <vgip-meta-field *ngIf='!meta.$invisible' [ngClass]=\"{ shown: !field.$invisible}\" [index]='index' [scope]='scope' [meta]='field'\n        [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview'\n        theme='inherit'></vgip-meta-field>\n    </div>\n  </ng-container>\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"] }]
         }], propDecorators: { meta: [{

package/esm2020/lib/fieldDatetime/index.mjs

@@ -354,9 +354,9 @@ export class FieldDatetime extends FieldAbstract {
         }
     }
 }
-FieldDatetime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldDatetime, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FieldDatetime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FieldDatetime, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{model}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'has-value': f.value, active: keyListenerActive }\">\n  <div class=\"Vlt-input\">\n    <label class='wrapper'>\n      <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]='readonly' [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"type\" [placeholder]=\"placeholder\" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model' class=\"Vlt-composite__append--icon\" (click)='clear()'>\n        <div class=\"Vlt-composite__icon\">\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n        </div>\n      </div>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n    <span *ngIf=\"f.errors.min\">Must be later than {{validations.min}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.max\">Must be no later than {{validations}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>", styles: [".Vlt-form__element--big.Vlt-form__element--error input.main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{background:var(--vgip-meta-input-bg-color);border-color:#f25a6b;box-shadow:none}@-moz-document url-prefix(){.Vlt-composite__append.right-actions{right:10px!important}}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}@media screen and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.Vlt-composite__append.right-actions{right:53px}}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:#2c2d30}:host-context ::ng-deep input::-webkit-calendar-picker-indicator{height:48px;width:51px;margin-top:-15px;margin-right:-15px;padding:0 2px 0 0;cursor:pointer;color:transparent;background-origin:content-box;background-size:initial;background-repeat:no-repeat;background-position:center;opacity:1;visibility:visible;background-image:var(--vgip-meta-date-icon)}:host-context ::ng-deep input::-webkit-calendar-picker-indicator:hover{background-color:var(--vgip-meta-input-action-hover-bg-color)}:host-context ::ng-deep input[type=time]::-webkit-calendar-picker-indicator{background-image:var(--vgip-meta-time-icon)}:host-context ::ng-deep input[readonly]::-webkit-calendar-picker-indicator{visibility:visible}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button{opacity:0;pointer-events:none}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldDatetime, decorators: [{
+FieldDatetime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldDatetime, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FieldDatetime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldDatetime, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{model}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'has-value': f.value, active: keyListenerActive }\">\n  <div class=\"Vlt-input\">\n    <label class='wrapper'>\n      <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]='readonly' [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"type\" [placeholder]=\"placeholder\" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model' class=\"Vlt-composite__append--icon\" (click)='clear()'>\n        <div class=\"Vlt-composite__icon\">\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n        </div>\n      </div>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n    <span *ngIf=\"f.errors.min\">Must be later than {{validations.min}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.max\">Must be no later than {{validations}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>", styles: [".Vlt-form__element--big.Vlt-form__element--error input.main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{background:var(--vgip-meta-input-bg-color);border-color:#f25a6b;box-shadow:none}@-moz-document url-prefix(){.Vlt-composite__append.right-actions{right:10px!important}}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}@media screen and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.Vlt-composite__append.right-actions{right:53px}}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:#2c2d30}:host-context ::ng-deep input::-webkit-calendar-picker-indicator{height:48px;width:51px;margin-top:-15px;margin-right:-15px;padding:0 2px 0 0;cursor:pointer;color:transparent;background-origin:content-box;background-size:initial;background-repeat:no-repeat;background-position:center;opacity:1;visibility:visible;background-image:var(--vgip-meta-date-icon)}:host-context ::ng-deep input::-webkit-calendar-picker-indicator:hover{background-color:var(--vgip-meta-input-action-hover-bg-color)}:host-context ::ng-deep input[type=time]::-webkit-calendar-picker-indicator{background-image:var(--vgip-meta-time-icon)}:host-context ::ng-deep input[readonly]::-webkit-calendar-picker-indicator{visibility:visible}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button{opacity:0;pointer-events:none}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldDatetime, decorators: [{
             type: Component,
             args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{model}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'has-value': f.value, active: keyListenerActive }\">\n  <div class=\"Vlt-input\">\n    <label class='wrapper'>\n      <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]='readonly' [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"type\" [placeholder]=\"placeholder\" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model' class=\"Vlt-composite__append--icon\" (click)='clear()'>\n        <div class=\"Vlt-composite__icon\">\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n        </div>\n      </div>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n    <span *ngIf=\"f.errors.min\">Must be later than {{validations.min}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.max\">Must be no later than {{validations}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>", styles: [".Vlt-form__element--big.Vlt-form__element--error input.main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{background:var(--vgip-meta-input-bg-color);border-color:#f25a6b;box-shadow:none}@-moz-document url-prefix(){.Vlt-composite__append.right-actions{right:10px!important}}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}@media screen and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.Vlt-composite__append.right-actions{right:53px}}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:#2c2d30}:host-context ::ng-deep input::-webkit-calendar-picker-indicator{height:48px;width:51px;margin-top:-15px;margin-right:-15px;padding:0 2px 0 0;cursor:pointer;color:transparent;background-origin:content-box;background-size:initial;background-repeat:no-repeat;background-position:center;opacity:1;visibility:visible;background-image:var(--vgip-meta-date-icon)}:host-context ::ng-deep input::-webkit-calendar-picker-indicator:hover{background-color:var(--vgip-meta-input-action-hover-bg-color)}:host-context ::ng-deep input[type=time]::-webkit-calendar-picker-indicator{background-image:var(--vgip-meta-time-icon)}:host-context ::ng-deep input[readonly]::-webkit-calendar-picker-indicator{visibility:visible}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button{opacity:0;pointer-events:none}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button{opacity:0;pointer-events:none}\n"] }]
         }] });

package/esm2020/lib/fieldInput/index.mjs

@@ -448,9 +448,9 @@ export class FieldInput extends FieldAbstract {
         }
     }
 }
-FieldInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldInput, deps: [{ token: i1.MetaContextService }], target: i0.ɵɵFactoryTarget.Component });
-FieldInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FieldInput, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{model}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()'>\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\">\n        {{item}}\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-input Vlt-dropdown\" style='display: block;'>\n    <label class='wrapper'>\n      <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]=\"readonly\" [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"multiple ? 'hidden' : (meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <input *ngIf='multiple' class='main' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]=\"{ standalone: true }\" [type]=\"meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span class='Vlt-black' *ngIf='model && multiple'>({{model.length}})</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model && showClear' class=\"Vlt-composite__append--icon\" (click)='clear($event)'>\n        <div class=\"Vlt-composite__icon\">\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n        </div>\n      </div>\n    </div>\n    <!-- <div *ngIf=\"!meta.subtype || meta.subtype == 'text'\" class=\"Vlt-composite__append Vlt-composite__append--icon\" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>\n      <div *ngIf=\"!meta.type || meta.type === 'string'\" class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n      </div>\n    </div> -->\n    <div *ngIf=\"suggestions.length\" class=\"Vlt-dropdown__panel\">\n      <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions\">\n        <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 13px;'>\n          Suggestions\n          <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n            <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n          </div>\n        </div> -->\n        <div class=\"Vlt-dropdown__block\"></div>\n        <div *ngIf='dropdown' class=\"Vlt-dropdown__scroll\">\n          <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n            <div *ngIf='multiple' class=\"Vlt-checkbox\" style='width: 100%;'>\n              <label [title]='suggestion.label || suggestion'>\n                <span class=\"Vlt-checkbox__button\">\n                  <input type=\"checkbox\" [checked]='model && model.indexOf(suggestion) !== -1'/>\n                  <span class=\"Vlt-checkbox__icon\"></span>\n                </span>\n                {{suggestion.label || suggestion}}\n              </label>\n            </div>\n            <div *ngIf='!multiple' style='padding: 12px 20px;'>\n              {{suggestion.label || suggestion}}\n            </div>\n          </div>\n        </div>\n        <div *ngIf='!multiple' class=\"Vlt-dropdown__block\"></div>\n        <div *ngIf='multiple' class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\" style='padding: 8px 16px 16px;'>\n          <button (click)='clear($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\">Clear all</button>\n          <button (click)='dismissDropdown($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n    <span *ngIf=\"f.errors.minlength\">Must be longer than {{validations.minlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.maxlength\">Must be lest than {{validations.maxlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.pattern\">{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}.&nbsp;</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input{padding-right:40px;text-overflow:ellipsis}@media screen and (-webkit-min-device-pixel-ratio: 0){.Vlt-form__element--big .Vlt-input input{line-height:20px}}.Vlt-form__element--big .Vlt-input input:disabled{cursor:not-allowed}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover input,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) input,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container.creatable{margin-right:62px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;max-height:140px;padding:6px 4px 0 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value input{border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error input{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}label.Vlt-truncate{padding-right:42px}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:rgba(44,45,48,.05)}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldInput, decorators: [{
+FieldInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldInput, deps: [{ token: i1.MetaContextService }], target: i0.ɵɵFactoryTarget.Component });
+FieldInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldInput, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{model}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()'>\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\">\n        {{item}}\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-input Vlt-dropdown\" style='display: block;'>\n    <label class='wrapper'>\n      <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]=\"readonly\" [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"multiple ? 'hidden' : (meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <input *ngIf='multiple' class='main' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]=\"{ standalone: true }\" [type]=\"meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span class='Vlt-black' *ngIf='model && multiple'>({{model.length}})</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model && showClear' class=\"Vlt-composite__append--icon\" (click)='clear($event)'>\n        <div class=\"Vlt-composite__icon\">\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n        </div>\n      </div>\n    </div>\n    <!-- <div *ngIf=\"!meta.subtype || meta.subtype == 'text'\" class=\"Vlt-composite__append Vlt-composite__append--icon\" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>\n      <div *ngIf=\"!meta.type || meta.type === 'string'\" class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n      </div>\n    </div> -->\n    <div *ngIf=\"suggestions.length\" class=\"Vlt-dropdown__panel\">\n      <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions\">\n        <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 13px;'>\n          Suggestions\n          <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n            <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n          </div>\n        </div> -->\n        <div class=\"Vlt-dropdown__block\"></div>\n        <div *ngIf='dropdown' class=\"Vlt-dropdown__scroll\">\n          <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n            <div *ngIf='multiple' class=\"Vlt-checkbox\" style='width: 100%;'>\n              <label [title]='suggestion.label || suggestion'>\n                <span class=\"Vlt-checkbox__button\">\n                  <input type=\"checkbox\" [checked]='model && model.indexOf(suggestion) !== -1'/>\n                  <span class=\"Vlt-checkbox__icon\"></span>\n                </span>\n                {{suggestion.label || suggestion}}\n              </label>\n            </div>\n            <div *ngIf='!multiple' style='padding: 12px 20px;'>\n              {{suggestion.label || suggestion}}\n            </div>\n          </div>\n        </div>\n        <div *ngIf='!multiple' class=\"Vlt-dropdown__block\"></div>\n        <div *ngIf='multiple' class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\" style='padding: 8px 16px 16px;'>\n          <button (click)='clear($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\">Clear all</button>\n          <button (click)='dismissDropdown($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n    <span *ngIf=\"f.errors.minlength\">Must be longer than {{validations.minlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.maxlength\">Must be lest than {{validations.maxlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.pattern\">{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}.&nbsp;</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input{padding-right:40px;text-overflow:ellipsis}@media screen and (-webkit-min-device-pixel-ratio: 0){.Vlt-form__element--big .Vlt-input input{line-height:20px}}.Vlt-form__element--big .Vlt-input input:disabled{cursor:not-allowed}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover input,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) input,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container.creatable{margin-right:62px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;max-height:140px;padding:6px 4px 0 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value input{border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error input{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}label.Vlt-truncate{padding-right:42px}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:rgba(44,45,48,.05)}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldInput, decorators: [{
             type: Component,
             args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{model}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()'>\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\">\n        {{item}}\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-input Vlt-dropdown\" style='display: block;'>\n    <label class='wrapper'>\n      <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]=\"readonly\" [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"multiple ? 'hidden' : (meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <input *ngIf='multiple' class='main' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]=\"{ standalone: true }\" [type]=\"meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span class='Vlt-black' *ngIf='model && multiple'>({{model.length}})</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model && showClear' class=\"Vlt-composite__append--icon\" (click)='clear($event)'>\n        <div class=\"Vlt-composite__icon\">\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n        </div>\n      </div>\n    </div>\n    <!-- <div *ngIf=\"!meta.subtype || meta.subtype == 'text'\" class=\"Vlt-composite__append Vlt-composite__append--icon\" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>\n      <div *ngIf=\"!meta.type || meta.type === 'string'\" class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n      </div>\n    </div> -->\n    <div *ngIf=\"suggestions.length\" class=\"Vlt-dropdown__panel\">\n      <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions\">\n        <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 13px;'>\n          Suggestions\n          <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n            <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n          </div>\n        </div> -->\n        <div class=\"Vlt-dropdown__block\"></div>\n        <div *ngIf='dropdown' class=\"Vlt-dropdown__scroll\">\n          <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n            <div *ngIf='multiple' class=\"Vlt-checkbox\" style='width: 100%;'>\n              <label [title]='suggestion.label || suggestion'>\n                <span class=\"Vlt-checkbox__button\">\n                  <input type=\"checkbox\" [checked]='model && model.indexOf(suggestion) !== -1'/>\n                  <span class=\"Vlt-checkbox__icon\"></span>\n                </span>\n                {{suggestion.label || suggestion}}\n              </label>\n            </div>\n            <div *ngIf='!multiple' style='padding: 12px 20px;'>\n              {{suggestion.label || suggestion}}\n            </div>\n          </div>\n        </div>\n        <div *ngIf='!multiple' class=\"Vlt-dropdown__block\"></div>\n        <div *ngIf='multiple' class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\" style='padding: 8px 16px 16px;'>\n          <button (click)='clear($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\">Clear all</button>\n          <button (click)='dismissDropdown($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n    <span *ngIf=\"f.errors.minlength\">Must be longer than {{validations.minlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.maxlength\">Must be lest than {{validations.maxlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.pattern\">{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}.&nbsp;</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input{padding-right:40px;text-overflow:ellipsis}@media screen and (-webkit-min-device-pixel-ratio: 0){.Vlt-form__element--big .Vlt-input input{line-height:20px}}.Vlt-form__element--big .Vlt-input input:disabled{cursor:not-allowed}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover input,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) input,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container.creatable{margin-right:62px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;max-height:140px;padding:6px 4px 0 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value input{border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error input{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}label.Vlt-truncate{padding-right:42px}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:rgba(44,45,48,.05)}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MetaContextService }]; } });

package/esm2020/lib/fieldList/index.mjs

@@ -60,9 +60,9 @@ export class FieldList extends FieldAbstract {
         this.value = this.model;
     }
 }
-FieldList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FieldList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", 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' [scope]='scope' [meta]='cloneList' [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}}&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);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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: i4.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldList, decorators: [{
+FieldList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FieldList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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' [scope]='scope' [meta]='cloneList' [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}}&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);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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: i4.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", 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' [scope]='scope' [meta]='cloneList' [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}}&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);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"] }]
         }] });

package/esm2020/lib/fieldRadio/index.mjs

@@ -79,9 +79,9 @@ export class FieldRadio extends FieldAbstract {
         }
     }
 }
-FieldRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldRadio, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FieldRadio.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FieldRadio, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n\t<label class=\"Vlt-label\">{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n\t<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n\t<fieldset *ngFor='let option of options' class=\"Vlt-radio Vlt-radio--inline\">\n\t\t<label style='cursor: pointer;'>\n\t\t\t<span class=\"Vlt-radio__button\">\n        <input class='main' (change)='onOptionChange(option)' type=\"radio\" [checked]='option === model' [value]='option' [name]='name' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        <span class=\"Vlt-radio__icon\"></span>\n      </span>\n\t\t\t<span style='white-space: nowrap;'>{{option.label || option}}</span>\n\t\t</label>\n\t</fieldset>\n\t<small *ngIf='f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched)' class=\"Vlt-form__element__error\">\n\t\t<span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n\t\t<span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n\t</small>\n\t<small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>", styles: [".Vlt-form__element{padding-bottom:4px}.Vlt-form__element__hint,.Vlt-form__element__error{margin-top:4px}.Vlt-radio--inline{margin-bottom:4px}.Vlt-radio .Vlt-radio__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-radio:hover .Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon:after{background:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:focus+.Vlt-radio__icon,.Vlt-radio input:active+.Vlt-radio__icon{background:var(--vgip-meta-input-bg-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldRadio, decorators: [{
+FieldRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldRadio, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FieldRadio.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldRadio, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n\t<label class=\"Vlt-label\">{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n\t<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n\t<fieldset *ngFor='let option of options' class=\"Vlt-radio Vlt-radio--inline\">\n\t\t<label style='cursor: pointer;'>\n\t\t\t<span class=\"Vlt-radio__button\">\n        <input class='main' (change)='onOptionChange(option)' type=\"radio\" [checked]='option === model' [value]='option' [name]='name' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        <span class=\"Vlt-radio__icon\"></span>\n      </span>\n\t\t\t<span style='white-space: nowrap;'>{{option.label || option}}</span>\n\t\t</label>\n\t</fieldset>\n\t<small *ngIf='f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched)' class=\"Vlt-form__element__error\">\n\t\t<span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n\t\t<span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n\t</small>\n\t<small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>", styles: [".Vlt-form__element{padding-bottom:4px}.Vlt-form__element__hint,.Vlt-form__element__error{margin-top:4px}.Vlt-radio--inline{margin-bottom:4px}.Vlt-radio .Vlt-radio__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-radio:hover .Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon:after{background:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:focus+.Vlt-radio__icon,.Vlt-radio input:active+.Vlt-radio__icon{background:var(--vgip-meta-input-bg-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldRadio, decorators: [{
             type: Component,
             args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n\t<label class=\"Vlt-label\">{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n\t<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n\t<fieldset *ngFor='let option of options' class=\"Vlt-radio Vlt-radio--inline\">\n\t\t<label style='cursor: pointer;'>\n\t\t\t<span class=\"Vlt-radio__button\">\n        <input class='main' (change)='onOptionChange(option)' type=\"radio\" [checked]='option === model' [value]='option' [name]='name' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        <span class=\"Vlt-radio__icon\"></span>\n      </span>\n\t\t\t<span style='white-space: nowrap;'>{{option.label || option}}</span>\n\t\t</label>\n\t</fieldset>\n\t<small *ngIf='f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched)' class=\"Vlt-form__element__error\">\n\t\t<span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n\t\t<span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n\t</small>\n\t<small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>", styles: [".Vlt-form__element{padding-bottom:4px}.Vlt-form__element__hint,.Vlt-form__element__error{margin-top:4px}.Vlt-radio--inline{margin-bottom:4px}.Vlt-radio .Vlt-radio__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-radio:hover .Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon:after{background:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:focus+.Vlt-radio__icon,.Vlt-radio input:active+.Vlt-radio__icon{background:var(--vgip-meta-input-bg-color)}\n"] }]
         }], propDecorators: { meta: [{

package/esm2020/lib/fieldReference/index.mjs

@@ -814,9 +814,9 @@ export class FieldReference extends FieldAbstract {
         }
     }
 }
-FieldReference.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldReference, deps: [{ token: i1.MetaReferenceService }, { token: i2.MetaResourceService }, { token: i3.MetaMsgService }, { token: i4.MetaContextService }, { token: i5.MetaTrackerService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-FieldReference.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FieldReference, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model && (!multiple || (multiple && model.length))'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div *ngIf='!multiple' class='vgip-meta-field-value __gu'>\n    <svg class=\"Vlt-icon Vlt-icon--smaller\" style='margin-top: -3px;'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n    {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>\n  </div>\n  <div *ngIf='multiple' class='vgip-meta-field-value __gu'>\n    <span *ngFor='let m of (model || [])' class='Vlt-badge Vlt-badge--app'>\n      {{m.label || m.id || m}} <span class='Vlt-grey-dark' *ngIf='isPolymorphic'>({{m.type}})</span>\n    </span>\n  </div>\n</div>\n<div *ngIf='!preview' class=\"meta-field-reference Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container' [ngClass]='{ creatable: isCreatable }'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()' style='width: 100%;'>\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\" [ngClass]=\"{ grid: (item.label || item.id || '').length > 56}\">\n        <span class='Vlt-truncate'>{{item.label || item.id || item }} <span *ngIf='isPolymorphic' class='Vlt-grey-dark' style='font-weight: normal;'>({{item.type}})</span></span>\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-composite\">\n    <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>\n      <div class=\"Vlt-dropdown__panel\">\n        <div *ngIf='searchError'>\n          <div class=\"Vlt-callout Vlt-callout--critical keep-focus\">\n            <i></i>\n            <div class=\"Vlt-callout__content\">{{searchError}}</div>\n          </div>\n        </div>\n        <div *ngIf='!searchError && (suggestions.length || searchResults)' [ngClass]=\"{ suggestions: !searchResults}\" class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\" style='padding: 0;'>\n          <div class=\"Vlt-dropdown__block\"></div>\n          <div *ngIf='!searchResults' class=\"Vlt-dropdown__scroll\">\n            <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon  Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </div>\n          </div>\n          <div *ngIf='searchResults' class=\"Vlt-dropdown__scroll\">\n            <div *ngIf='!searchResults.length' class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>\n            <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of searchResults; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </div>\n          </div>\n          <!-- <div *ngIf='searchResults' class=\"Vlt-dropdown__block\" style='text-align: right; padding-top: 0;'>\n            <small>\n              {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>\n            </small>\n          </div> -->\n          <div class=\"Vlt-dropdown__block\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"Vlt-composite__prepend\" *ngIf='isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))'>\n      <div class=\"search-scope\" [ngClass]=\"{ 'has-value': searchResourceType.resourceType }\">\n        <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType' (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)' [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n        <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon' style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>\n          <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-menu\"/>\n        </svg>\n        <label class='mobile-label hidden-mobile hidden-desktop'>Search</label>\n      </div>\n    </div>\n    <div *ngIf='!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))'><!-- required by css --></div>\n    <div class=\"Vlt-composite__wrapper Vlt-input\" style='overflow: hidden;' [ngClass]=\"{ 'has-append-button': hasAppendButton && !disabled }\">\n      <label class='wrapper'>\n        <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\" style='top: 0; padding-top: 15px;'>\n          <div class=\"Vlt-composite__icon\">\n            <svg *ngIf='isSearchable && (!model || multiple)' class='Vlt-grey'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}\"/></svg>\n            <svg *ngIf='!isSearchable || (model && !multiple)' [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\"><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n          </div>\n          <div *ngIf='suggestions.length' class=\"Vlt-badge Vlt-badge--small Vlt-badge--purple\" style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>{{suggestions.length}}</div>\n        </div>\n        <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n        <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]=\"{standalone: true}\" type=\"text\" placeholder=\"{{ placeHolderLabel || ' ' }}\" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]=\"model ? model.label : ''\"/>\n        <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'>{{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label>\n        <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label>\n      </label>\n      <div *ngIf='searching' class='search-progress'>\n        <div class=\"container\">\n          <div class=\"bar Vlt-bg-purple\"></div>\n        </div>\n      </div>\n      <div class='Vlt-composite__append right-actions'>\n        <!-- <div *ngIf='prevModel && !model' class=\"Vlt-composite__append--icon\" (click)='revert()'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-reply\"/></svg>\n          </div>\n        </div> -->\n        <div *ngIf='model && !multiple' class=\"Vlt-composite__append--icon\" (click)='removeSelection()'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n          </div>\n        </div>\n        <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon\" aria-label='Open external'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg>\n          </div>\n        </a>\n      </div>\n    </div>\n    <!-- <span *ngIf='hasCreatables'>\n      <button type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n      </button>\n      <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n      </button>\n    </span> -->\n    <div *ngIf='hasAppendButton && !disabled' class=\"Vlt-composite__append\">\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Add new'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n      </button>\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Edit'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n      </button>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.pattern\">Should match '{{validations.pattern}}' pattern</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.helpText || meta.hint' class=\"Vlt-form__element__hint\">{{meta.helpText || meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus)~label.Vlt-truncate{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:hover ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active .Vlt-composite__append button,.Vlt-form__element--big.active ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button,.Vlt-form__element--big.Vlt-form__element--error ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:#f25a6b}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;padding:6px 4px 3px 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%;position:relative;padding-right:30px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge.grid{display:grid}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button,.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-left-radius:0;border-top-right-radius:0;height:48px}.Vlt-form__element--big.multiple.has-value .main:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone:not(.Vlt-btn--icon){border-top:0}.Vlt-form__element--big.multiple.has-value .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-right-radius:6px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button{border-top-left-radius:6px;border-top:0}.Vlt-composite__prepend{z-index:initial}.Vlt-composite__prepend--icon{top:0;padding-top:15px;left:3px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:0}.Vlt-input.has-append-button .Vlt-composite__append.right-actions .Vlt-composite__append--icon:last-child{width:36px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:5px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.Vlt-composite__append button{height:48px;padding-right:16px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-left:16px;border-left:0}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-input input{padding-left:38px;text-overflow:ellipsis;padding-right:36px}.Vlt-input input.ext{padding-right:72px}.Vlt-composite__wrapper.has-append-button input.main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-input input{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);font-weight:700}.Vlt-dropdown__panel{max-width:100%;width:100%;min-width:280px}.Vlt-dropdown__panel .Vlt-dropdown__link.smart{font-weight:700;background:var(--vgip-meta-dropdown-bg-color)}.Vlt-dropdown__panel .Vlt-dropdown__link.smart.hidden{display:none}.Vlt-dropdown__panel .Vlt-dropdown__link.bold:after{background-color:#e1e2e6;content:\"\";height:1px;left:0;position:absolute;right:0;bottom:0}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:rgba(44,45,48,.05)}.Vlt-dropdown__panel .Vlt-dropdown__link>div{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Vlt-dropdown__panel .Vlt-dropdown__link>svg{margin-right:8px}.vgip-meta-field-preview .Vlt-badge{margin:1px 3px 1px 0;overflow:hidden;max-width:100%}:host .search-scope{width:130px}:host .search-scope ::ng-deep .Vlt-form__element.has-value .Vlt-select:after{display:none}:host .search-scope ::ng-deep .Vlt-form__element .right-actions{right:12px}:host .search-scope ::ng-deep .Vlt-form__element label.Vlt-truncate{padding-right:48px}:host .search-scope .mobile-icon{display:none}@media only screen and (max-width: 575px){:host .search-scope{width:60px}:host .search-scope:not(.has-value) .mobile-icon{display:block}:host .search-scope.has-value .mobile-label{display:block}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-composite__append{display:none}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-select:after{margin-right:-7px}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big label.Vlt-truncate{visibility:hidden}}:host .search-scope ::ng-deep vgip-meta-field .Vlt-input input.main.standalone{padding-right:initial;background:var(--vgip-meta-input-accent-bg-color);border-color:var(--vgip-meta-input-border-color)}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element{padding:0}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element .Vlt-dropdown__panel{width:initial}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: i9.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldReference, decorators: [{
+FieldReference.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldReference, deps: [{ token: i1.MetaReferenceService }, { token: i2.MetaResourceService }, { token: i3.MetaMsgService }, { token: i4.MetaContextService }, { token: i5.MetaTrackerService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+FieldReference.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldReference, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model && (!multiple || (multiple && model.length))'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div *ngIf='!multiple' class='vgip-meta-field-value __gu'>\n    <svg class=\"Vlt-icon Vlt-icon--smaller\" style='margin-top: -3px;'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n    {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>\n  </div>\n  <div *ngIf='multiple' class='vgip-meta-field-value __gu'>\n    <span *ngFor='let m of (model || [])' class='Vlt-badge Vlt-badge--app'>\n      {{m.label || m.id || m}} <span class='Vlt-grey-dark' *ngIf='isPolymorphic'>({{m.type}})</span>\n    </span>\n  </div>\n</div>\n<div *ngIf='!preview' class=\"meta-field-reference Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container' [ngClass]='{ creatable: isCreatable }'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()' style='width: 100%;'>\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\" [ngClass]=\"{ grid: (item.label || item.id || '').length > 56}\">\n        <span class='Vlt-truncate'>{{item.label || item.id || item }} <span *ngIf='isPolymorphic' class='Vlt-grey-dark' style='font-weight: normal;'>({{item.type}})</span></span>\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-composite\">\n    <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>\n      <div class=\"Vlt-dropdown__panel\">\n        <div *ngIf='searchError'>\n          <div class=\"Vlt-callout Vlt-callout--critical keep-focus\">\n            <i></i>\n            <div class=\"Vlt-callout__content\">{{searchError}}</div>\n          </div>\n        </div>\n        <div *ngIf='!searchError && (suggestions.length || searchResults)' [ngClass]=\"{ suggestions: !searchResults}\" class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\" style='padding: 0;'>\n          <div class=\"Vlt-dropdown__block\"></div>\n          <div *ngIf='!searchResults' class=\"Vlt-dropdown__scroll\">\n            <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon  Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </div>\n          </div>\n          <div *ngIf='searchResults' class=\"Vlt-dropdown__scroll\">\n            <div *ngIf='!searchResults.length' class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>\n            <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of searchResults; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </div>\n          </div>\n          <!-- <div *ngIf='searchResults' class=\"Vlt-dropdown__block\" style='text-align: right; padding-top: 0;'>\n            <small>\n              {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>\n            </small>\n          </div> -->\n          <div class=\"Vlt-dropdown__block\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"Vlt-composite__prepend\" *ngIf='isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))'>\n      <div class=\"search-scope\" [ngClass]=\"{ 'has-value': searchResourceType.resourceType }\">\n        <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType' (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)' [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n        <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon' style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>\n          <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-menu\"/>\n        </svg>\n        <label class='mobile-label hidden-mobile hidden-desktop'>Search</label>\n      </div>\n    </div>\n    <div *ngIf='!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))'><!-- required by css --></div>\n    <div class=\"Vlt-composite__wrapper Vlt-input\" style='overflow: hidden;' [ngClass]=\"{ 'has-append-button': hasAppendButton && !disabled }\">\n      <label class='wrapper'>\n        <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\" style='top: 0; padding-top: 15px;'>\n          <div class=\"Vlt-composite__icon\">\n            <svg *ngIf='isSearchable && (!model || multiple)' class='Vlt-grey'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}\"/></svg>\n            <svg *ngIf='!isSearchable || (model && !multiple)' [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\"><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n          </div>\n          <div *ngIf='suggestions.length' class=\"Vlt-badge Vlt-badge--small Vlt-badge--purple\" style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>{{suggestions.length}}</div>\n        </div>\n        <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n        <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]=\"{standalone: true}\" type=\"text\" placeholder=\"{{ placeHolderLabel || ' ' }}\" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]=\"model ? model.label : ''\"/>\n        <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'>{{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label>\n        <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label>\n      </label>\n      <div *ngIf='searching' class='search-progress'>\n        <div class=\"container\">\n          <div class=\"bar Vlt-bg-purple\"></div>\n        </div>\n      </div>\n      <div class='Vlt-composite__append right-actions'>\n        <!-- <div *ngIf='prevModel && !model' class=\"Vlt-composite__append--icon\" (click)='revert()'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-reply\"/></svg>\n          </div>\n        </div> -->\n        <div *ngIf='model && !multiple' class=\"Vlt-composite__append--icon\" (click)='removeSelection()'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n          </div>\n        </div>\n        <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon\" aria-label='Open external'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg>\n          </div>\n        </a>\n      </div>\n    </div>\n    <!-- <span *ngIf='hasCreatables'>\n      <button type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n      </button>\n      <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n      </button>\n    </span> -->\n    <div *ngIf='hasAppendButton && !disabled' class=\"Vlt-composite__append\">\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Add new'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n      </button>\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Edit'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n      </button>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.pattern\">Should match '{{validations.pattern}}' pattern</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.helpText || meta.hint' class=\"Vlt-form__element__hint\">{{meta.helpText || meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus)~label.Vlt-truncate{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:hover ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active .Vlt-composite__append button,.Vlt-form__element--big.active ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button,.Vlt-form__element--big.Vlt-form__element--error ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:#f25a6b}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;padding:6px 4px 3px 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%;position:relative;padding-right:30px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge.grid{display:grid}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button,.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-left-radius:0;border-top-right-radius:0;height:48px}.Vlt-form__element--big.multiple.has-value .main:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone:not(.Vlt-btn--icon){border-top:0}.Vlt-form__element--big.multiple.has-value .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-right-radius:6px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button{border-top-left-radius:6px;border-top:0}.Vlt-composite__prepend{z-index:initial}.Vlt-composite__prepend--icon{top:0;padding-top:15px;left:3px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:0}.Vlt-input.has-append-button .Vlt-composite__append.right-actions .Vlt-composite__append--icon:last-child{width:36px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:5px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.Vlt-composite__append button{height:48px;padding-right:16px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-left:16px;border-left:0}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-input input{padding-left:38px;text-overflow:ellipsis;padding-right:36px}.Vlt-input input.ext{padding-right:72px}.Vlt-composite__wrapper.has-append-button input.main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-input input{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);font-weight:700}.Vlt-dropdown__panel{max-width:100%;width:100%;min-width:280px}.Vlt-dropdown__panel .Vlt-dropdown__link.smart{font-weight:700;background:var(--vgip-meta-dropdown-bg-color)}.Vlt-dropdown__panel .Vlt-dropdown__link.smart.hidden{display:none}.Vlt-dropdown__panel .Vlt-dropdown__link.bold:after{background-color:#e1e2e6;content:\"\";height:1px;left:0;position:absolute;right:0;bottom:0}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:rgba(44,45,48,.05)}.Vlt-dropdown__panel .Vlt-dropdown__link>div{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Vlt-dropdown__panel .Vlt-dropdown__link>svg{margin-right:8px}.vgip-meta-field-preview .Vlt-badge{margin:1px 3px 1px 0;overflow:hidden;max-width:100%}:host .search-scope{width:130px}:host .search-scope ::ng-deep .Vlt-form__element.has-value .Vlt-select:after{display:none}:host .search-scope ::ng-deep .Vlt-form__element .right-actions{right:12px}:host .search-scope ::ng-deep .Vlt-form__element label.Vlt-truncate{padding-right:48px}:host .search-scope .mobile-icon{display:none}@media only screen and (max-width: 575px){:host .search-scope{width:60px}:host .search-scope:not(.has-value) .mobile-icon{display:block}:host .search-scope.has-value .mobile-label{display:block}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-composite__append{display:none}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-select:after{margin-right:-7px}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big label.Vlt-truncate{visibility:hidden}}:host .search-scope ::ng-deep vgip-meta-field .Vlt-input input.main.standalone{padding-right:initial;background:var(--vgip-meta-input-accent-bg-color);border-color:var(--vgip-meta-input-border-color)}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element{padding:0}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element .Vlt-dropdown__panel{width:initial}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: i9.MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldReference, decorators: [{
             type: Component,
             args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class='vgip-meta-field-preview' *ngIf='preview && model && (!multiple || (multiple && model.length))'>\n  <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n  <div *ngIf='!multiple' class='vgip-meta-field-value __gu'>\n    <svg class=\"Vlt-icon Vlt-icon--smaller\" style='margin-top: -3px;'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n    {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>\n  </div>\n  <div *ngIf='multiple' class='vgip-meta-field-value __gu'>\n    <span *ngFor='let m of (model || [])' class='Vlt-badge Vlt-badge--app'>\n      {{m.label || m.id || m}} <span class='Vlt-grey-dark' *ngIf='isPolymorphic'>({{m.type}})</span>\n    </span>\n  </div>\n</div>\n<div *ngIf='!preview' class=\"meta-field-reference Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container' [ngClass]='{ creatable: isCreatable }'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()' style='width: 100%;'>\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\" [ngClass]=\"{ grid: (item.label || item.id || '').length > 56}\">\n        <span class='Vlt-truncate'>{{item.label || item.id || item }} <span *ngIf='isPolymorphic' class='Vlt-grey-dark' style='font-weight: normal;'>({{item.type}})</span></span>\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-composite\">\n    <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>\n      <div class=\"Vlt-dropdown__panel\">\n        <div *ngIf='searchError'>\n          <div class=\"Vlt-callout Vlt-callout--critical keep-focus\">\n            <i></i>\n            <div class=\"Vlt-callout__content\">{{searchError}}</div>\n          </div>\n        </div>\n        <div *ngIf='!searchError && (suggestions.length || searchResults)' [ngClass]=\"{ suggestions: !searchResults}\" class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\" style='padding: 0;'>\n          <div class=\"Vlt-dropdown__block\"></div>\n          <div *ngIf='!searchResults' class=\"Vlt-dropdown__scroll\">\n            <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon  Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </div>\n          </div>\n          <div *ngIf='searchResults' class=\"Vlt-dropdown__scroll\">\n            <div *ngIf='!searchResults.length' class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>\n            <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of searchResults; let i = index'  class=\"Vlt-dropdown__link has-type\">\n              <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n            </div>\n          </div>\n          <!-- <div *ngIf='searchResults' class=\"Vlt-dropdown__block\" style='text-align: right; padding-top: 0;'>\n            <small>\n              {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>\n            </small>\n          </div> -->\n          <div class=\"Vlt-dropdown__block\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"Vlt-composite__prepend\" *ngIf='isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))'>\n      <div class=\"search-scope\" [ngClass]=\"{ 'has-value': searchResourceType.resourceType }\">\n        <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType' (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)' [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n        <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon' style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>\n          <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-menu\"/>\n        </svg>\n        <label class='mobile-label hidden-mobile hidden-desktop'>Search</label>\n      </div>\n    </div>\n    <div *ngIf='!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))'><!-- required by css --></div>\n    <div class=\"Vlt-composite__wrapper Vlt-input\" style='overflow: hidden;' [ngClass]=\"{ 'has-append-button': hasAppendButton && !disabled }\">\n      <label class='wrapper'>\n        <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\" style='top: 0; padding-top: 15px;'>\n          <div class=\"Vlt-composite__icon\">\n            <svg *ngIf='isSearchable && (!model || multiple)' class='Vlt-grey'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}\"/></svg>\n            <svg *ngIf='!isSearchable || (model && !multiple)' [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\"><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n          </div>\n          <div *ngIf='suggestions.length' class=\"Vlt-badge Vlt-badge--small Vlt-badge--purple\" style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>{{suggestions.length}}</div>\n        </div>\n        <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n        <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]=\"{standalone: true}\" type=\"text\" placeholder=\"{{ placeHolderLabel || ' ' }}\" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]=\"model ? model.label : ''\"/>\n        <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'>{{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label>\n        <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label>\n      </label>\n      <div *ngIf='searching' class='search-progress'>\n        <div class=\"container\">\n          <div class=\"bar Vlt-bg-purple\"></div>\n        </div>\n      </div>\n      <div class='Vlt-composite__append right-actions'>\n        <!-- <div *ngIf='prevModel && !model' class=\"Vlt-composite__append--icon\" (click)='revert()'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-reply\"/></svg>\n          </div>\n        </div> -->\n        <div *ngIf='model && !multiple' class=\"Vlt-composite__append--icon\" (click)='removeSelection()'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n          </div>\n        </div>\n        <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon\" aria-label='Open external'>\n          <div class=\"Vlt-composite__icon\">\n            <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg>\n          </div>\n        </a>\n      </div>\n    </div>\n    <!-- <span *ngIf='hasCreatables'>\n      <button type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n      </button>\n      <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n      </button>\n    </span> -->\n    <div *ngIf='hasAppendButton && !disabled' class=\"Vlt-composite__append\">\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Add new'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n      </button>\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Edit'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n      </button>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.pattern\">Should match '{{validations.pattern}}' pattern</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.helpText || meta.hint' class=\"Vlt-form__element__hint\">{{meta.helpText || meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus)~label.Vlt-truncate{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:hover ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active .Vlt-composite__append button,.Vlt-form__element--big.active ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button,.Vlt-form__element--big.Vlt-form__element--error ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:#f25a6b}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;padding:6px 4px 3px 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%;position:relative;padding-right:30px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge.grid{display:grid}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button,.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-left-radius:0;border-top-right-radius:0;height:48px}.Vlt-form__element--big.multiple.has-value .main:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone:not(.Vlt-btn--icon){border-top:0}.Vlt-form__element--big.multiple.has-value .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-right-radius:6px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button{border-top-left-radius:6px;border-top:0}.Vlt-composite__prepend{z-index:initial}.Vlt-composite__prepend--icon{top:0;padding-top:15px;left:3px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:0}.Vlt-input.has-append-button .Vlt-composite__append.right-actions .Vlt-composite__append--icon:last-child{width:36px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:5px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.Vlt-composite__append button{height:48px;padding-right:16px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-left:16px;border-left:0}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-input input{padding-left:38px;text-overflow:ellipsis;padding-right:36px}.Vlt-input input.ext{padding-right:72px}.Vlt-composite__wrapper.has-append-button input.main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-input input{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);font-weight:700}.Vlt-dropdown__panel{max-width:100%;width:100%;min-width:280px}.Vlt-dropdown__panel .Vlt-dropdown__link.smart{font-weight:700;background:var(--vgip-meta-dropdown-bg-color)}.Vlt-dropdown__panel .Vlt-dropdown__link.smart.hidden{display:none}.Vlt-dropdown__panel .Vlt-dropdown__link.bold:after{background-color:#e1e2e6;content:\"\";height:1px;left:0;position:absolute;right:0;bottom:0}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:rgba(44,45,48,.05)}.Vlt-dropdown__panel .Vlt-dropdown__link>div{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Vlt-dropdown__panel .Vlt-dropdown__link>svg{margin-right:8px}.vgip-meta-field-preview .Vlt-badge{margin:1px 3px 1px 0;overflow:hidden;max-width:100%}:host .search-scope{width:130px}:host .search-scope ::ng-deep .Vlt-form__element.has-value .Vlt-select:after{display:none}:host .search-scope ::ng-deep .Vlt-form__element .right-actions{right:12px}:host .search-scope ::ng-deep .Vlt-form__element label.Vlt-truncate{padding-right:48px}:host .search-scope .mobile-icon{display:none}@media only screen and (max-width: 575px){:host .search-scope{width:60px}:host .search-scope:not(.has-value) .mobile-icon{display:block}:host .search-scope.has-value .mobile-label{display:block}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-composite__append{display:none}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-select:after{margin-right:-7px}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big label.Vlt-truncate{visibility:hidden}}:host .search-scope ::ng-deep vgip-meta-field .Vlt-input input.main.standalone{padding-right:initial;background:var(--vgip-meta-input-accent-bg-color);border-color:var(--vgip-meta-input-border-color)}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element{padding:0}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element .Vlt-dropdown__panel{width:initial}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MetaReferenceService }, { type: i2.MetaResourceService }, { type: i3.MetaMsgService }, { type: i4.MetaContextService }, { type: i5.MetaTrackerService }, { type: i0.ViewContainerRef }]; } });