@vgip/meta-ui 2.3.0 → 2.3.1

package/fesm2022/vgip-meta-ui.mjs

@@ -3479,11 +3479,11 @@ class FieldText extends FieldAbstract {
         this.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldText, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldText, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n    <label class='wrapper'>\n      <div class=\"Vlt-textarea\">\n        <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n        <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n        {{meta.label || meta.name}}\n        @if (validations.required) {\n          <span class='Vlt-red'>*</span>\n        }\n      </label>\n    </div>\n  </label>\n  @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n    <small class=\"Vlt-form__element__error\">\n      @if (f.errors.required) {\n        <span>Required</span>\n      }\n      @if (f.errors.maxlength) {\n        <span>Length can not exceed {{validations.maxlength}} characters</span>\n      }\n      @if (f.errors.custom) {\n        <span>{{f.errors.custom}}&nbsp;</span>\n      }\n    </small>\n  }\n  @if (meta.helpText) {\n    <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n  }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:transparent}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldText, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n    <label class='wrapper'>\n      <div class=\"Vlt-textarea\">\n        <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n        <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n        {{meta.label || meta.name}}\n        @if (validations.required) {\n          <span class='Vlt-red'>*</span>\n        }\n      </label>\n    </div>\n  </label>\n  @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n    <small class=\"Vlt-form__element__error\">\n      @if (f.errors.required) {\n        <span>Required</span>\n      }\n      @if (f.errors.maxlength) {\n        <span>Length can not exceed {{validations.maxlength}} characters</span>\n      }\n      @if (f.errors.custom) {\n        <span>{{f.errors.custom}}&nbsp;</span>\n      }\n    </small>\n  }\n  @if (meta.helpText) {\n    <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n  }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:var(--vgip-meta-input-bg-color)}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldText, decorators: [{
             type: Component,
-            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n    <label class='wrapper'>\n      <div class=\"Vlt-textarea\">\n        <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n        <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n        {{meta.label || meta.name}}\n        @if (validations.required) {\n          <span class='Vlt-red'>*</span>\n        }\n      </label>\n    </div>\n  </label>\n  @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n    <small class=\"Vlt-form__element__error\">\n      @if (f.errors.required) {\n        <span>Required</span>\n      }\n      @if (f.errors.maxlength) {\n        <span>Length can not exceed {{validations.maxlength}} characters</span>\n      }\n      @if (f.errors.custom) {\n        <span>{{f.errors.custom}}&nbsp;</span>\n      }\n    </small>\n  }\n  @if (meta.helpText) {\n    <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n  }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:transparent}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"] }]
+            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n    <label class='wrapper'>\n      <div class=\"Vlt-textarea\">\n        <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n        <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n        {{meta.label || meta.name}}\n        @if (validations.required) {\n          <span class='Vlt-red'>*</span>\n        }\n      </label>\n    </div>\n  </label>\n  @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n    <small class=\"Vlt-form__element__error\">\n      @if (f.errors.required) {\n        <span>Required</span>\n      }\n      @if (f.errors.maxlength) {\n        <span>Length can not exceed {{validations.maxlength}} characters</span>\n      }\n      @if (f.errors.custom) {\n        <span>{{f.errors.custom}}&nbsp;</span>\n      }\n    </small>\n  }\n  @if (meta.helpText) {\n    <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n  }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:var(--vgip-meta-input-bg-color)}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"] }]
         }], ctorParameters: () => [{ type: MetaContextService }] });
 
 var index$9 = /*#__PURE__*/Object.freeze({
@@ -4057,11 +4057,11 @@ class FieldSelect extends FieldAbstract {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldSelect, deps: [{ token: MetaReferenceService }, { token: MetaResourceService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldSelect, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>\n      {{showText}}\n    </div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element\"\n    [ngClass]=\"{ 'Vlt-form__element--big': !meta.small ,'has-value': f.value, active: keyListenerActive, 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched), 'no-x': meta.noX }\">\n    <div class=\"Vlt-composite Vlt-dropdown Vlt-input\" style='display: block;'\n      [ngClass]=\"{ 'has-append-button': isCreatable && !disabled }\">\n      <div class=\"Vlt-select\">\n        <label class='wrapper'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n          <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n            {{meta.label || meta.name}}\n            @if (validations.required && options.length) {\n              <span class='Vlt-red'>*</span>\n            }\n          </label>\n          <input class='main' [required]='validations.required && !!options.length' readonly [ngModel]='showText'\n            #ft='ngModel' [ngModelOptions]=\"{standalone: true}\" type=\"text\"\n            [placeholder]=\"meta.placeholder || ' '\" (click)='onActivated($event)' (focus)='onActivated($event)'\n            (blur)='onBlur($event)' [ngClass]=\"{ 'standalone': meta.standalone }\"\n            [disabled]='disabled' [attr.aria-label]='meta.label' />\n        </label>\n        <select class='model' [required]='validations.required && !!options.length' style='display: none;'\n          [(ngModel)]='model' [ngModelOptions]=\"{standalone: meta.standalone}\"\n        (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name'></select>\n        @if (searching) {\n          <div class='search-progress'>\n            <div class=\"container\">\n              <div class=\"bar Vlt-bg-purple\"></div>\n            </div>\n          </div>\n        }\n        <div class='Vlt-composite__append right-actions'>\n          @if (model && !meta.noX && !disabled) {\n            <a href='#' class=\"Vlt-composite__append--icon\"\n              (click)='clear($event)'>\n              <div class=\"Vlt-composite__icon\">\n                <svg>\n                  <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n                </svg>\n              </div>\n            </a>\n          }\n        </div>\n      </div>\n      <div class='Vlt-dropdown__panel'>\n        <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\">\n          <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 15px;'>\n          Select ({{options.length}})\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 Vlt-search_wrap\">\n          @if (optionsBackup.length > 12) {\n            <div class=\"Vlt-composite\" [ngClass]=\"{'vgip-disable': disabled}\">\n              <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\"\n                style=\"top: 0; padding-top: 15px;\">\n                <div class=\"Vlt-composite__icon\">\n                  <svg class='Vlt-grey'>\n                    <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-search\"></use>\n                  </svg>\n                </div>\n              </div>\n              <div class=\"Vlt-input\">\n                <input type=\"text\" class=\"vgip-search_input\" [(ngModel)]=\"searchInputText\" placeholder=\"Search\" (input)=\"onSearchChange()\" (blur)='onBlur($event)' [ngModelOptions]=\"{standalone: true}\">\n              </div>\n              <a href='#' class=\"Vlt-composite__append--icon\" style=\"top: 2px;\" (click)=\"clearSearchField($event)\" [hidden]=\"!searchInputText\">\n                <div class=\"Vlt-composite__icon\">\n                  <svg class='Vlt-icon Vlt-icon--small'>\n                    <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/>\n                  </svg>\n                </div>\n              </a>\n            </div>\n          }\n        </div>\n        @if (dropdown) {\n          <div class='Vlt-dropdown__scroll'>\n            @for (option of options; track option; let i = $index) {\n              <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n                (click)='onOptionSelect($event, option)'\n                class=\"Vlt-dropdown__link\" title=\"{{option.hint}}\">\n                @if (multiple) {\n                  <div class=\"Vlt-checkbox\" style='width: 100%;'>\n                    <label>\n                      <span class=\"Vlt-checkbox__button\">\n                        <input type=\"checkbox\" [checked]='model && model.indexOf(option) !== -1' />\n                        <span class=\"Vlt-checkbox__icon\"></span>\n                      </span>\n                      {{option.label || (option.id === '' ? '--empty--' : option)}}\n                    </label>\n                  </div>\n                }\n                @if (!multiple) {\n                  <div style='padding: 12px 20px;'>{{option.label || (option.id === '' ?\n                  '--empty--' : option)}}</div>\n                }\n              </a>\n            }\n            <!-- No Option Found -->\n            @if (options.length === 0) {\n              <div class=\"Vlt-dropdown__link\">\n                <span style='padding: 12px 20px;'>\n                  No Option Found\n                </span>\n                @if (isCreatable && !disabled) {\n                  <button type=\"button\" class=\"Vlt-btn Vlt-btn--link\" (click)='openResource($event)'>\n                    <svg>\n                      <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n                    </svg> Add new\n                  </button>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (!multiple) {\n          <div class=\"Vlt-dropdown__block\"></div>\n        }\n        @if (multiple) {\n          <div class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\"\n            style='padding: 8px 16px 16px;'>\n            <button (click)='clear($event)' type='button'\n              class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\"\n            style='margin-right: 8px;'>Clear all</button>\n            <button (click)='dismissDropdown($event)' type='button'\n            class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n          </div>\n        }\n      </div>\n    </div>\n    <!-- <span *ngIf='isCreatable'>\n    <button type='button' (click)='openResource($event)' 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  </span> -->\n  @if (isCreatable && !disabled) {\n    <div class=\"Vlt-composite__append\">\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' (click)='openResource($event)'\n        class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon add-button\" aria-label='Add new'>\n        <svg>\n          <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n        </svg>\n      </button>\n    </div>\n  }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))) {\n  <small\n    class=\"Vlt-form__element__error\">\n    @if (f.errors.required) {\n      <span>Required.&nbsp;</span>\n    }\n    @if (f.errors.custom) {\n      <span>{{f.errors.custom}}&nbsp;</span>\n    }\n  </small>\n}\n@if (meta.hint) {\n  <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element.no-x input.main{padding-right:40px}.Vlt-form__element--big:not(.has-value)>.Vlt-input>.Vlt-select>label>label{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big input[readonly].main:not([disabled]){background:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color)}.Vlt-form__element--big:hover input[readonly].main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:focus input[readonly].main,.Vlt-form__element--big:focus .Vlt-composite__append button,.Vlt-form__element--big.active input[readonly].main,.Vlt-form__element--big.active .Vlt-composite__append button{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error input[readonly].main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{border-color:#f25a6b;box-shadow:none}.Vlt-form__element--big .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon);margin-right:2px}.Vlt-form__element--big .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}.Vlt-composite.has-append-button input[readonly].main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-composite.has-append-button .Vlt-select:after{margin-right:-10px}.Vlt-composite__append{z-index:initial}.Vlt-composite__append button{height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-right:16px;padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.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-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link{padding:0 20px 0 0}.Vlt-dropdown__panel .Vlt-dropdown__link.Vlt-dropdown__link--selected{background:#2c2d300d}.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}input.main{cursor:pointer}input.main:disabled{cursor:not-allowed}input.main{padding-right:76px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:42px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:53px;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)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-search_wrap{padding-top:10px}.Vlt-search_wrap .vgip-search_input{padding:8px 36px 8px 38px;width:100%;border:1px solid var(--vgip-meta-input-border-color)!important;border-radius:6px!important}.Vlt-search_wrap .vgip-search_input:focus,.Vlt-search_wrap .vgip-search_input:active,.Vlt-search_wrap .vgip-search_input:hover{border-color:var(--vgip-meta-input-active-border-color)!important}.Vlt-search_wrap .Vlt-composite__append--icon{cursor:pointer}.Vlt-search_wrap .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-search_wrap .Vlt-composite__append--icon:focus svg,.Vlt-search_wrap .Vlt-composite__append--icon:active svg,.Vlt-search_wrap .Vlt-composite__append--icon:hover svg{fill:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldSelect, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>\n      {{showText}}\n    </div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element\"\n    [ngClass]=\"{ 'Vlt-form__element--big': !meta.small ,'has-value': f.value, active: keyListenerActive, 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched), 'no-x': meta.noX }\">\n    <div class=\"Vlt-composite Vlt-dropdown Vlt-input\" style='display: block;'\n      [ngClass]=\"{ 'has-append-button': isCreatable && !disabled }\">\n      <div class=\"Vlt-select\">\n        <label class='wrapper'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n          <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n            {{meta.label || meta.name}}\n            @if (validations.required && options.length) {\n              <span class='Vlt-red'>*</span>\n            }\n          </label>\n          <input class='main' [required]='validations.required && !!options.length' readonly [ngModel]='showText' #ft='ngModel'\n            [ngModelOptions]=\"{standalone: true}\" type=\"text\" [placeholder]=\"meta.placeholder || ' '\"\n            (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'\n            [ngClass]=\"{ 'standalone': meta.standalone }\" [disabled]='disabled' [attr.aria-label]='meta.label'\n            [attr.title]=\"showText\" />\n        </label>\n        <select class='model' [required]='validations.required && !!options.length' style='display: none;'\n          [(ngModel)]='model' [ngModelOptions]=\"{standalone: meta.standalone}\"\n        (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name'></select>\n        @if (searching) {\n          <div class='search-progress'>\n            <div class=\"container\">\n              <div class=\"bar Vlt-bg-purple\"></div>\n            </div>\n          </div>\n        }\n        <div class='Vlt-composite__append right-actions'>\n          @if (model && !meta.noX && !disabled) {\n            <a href='#' class=\"Vlt-composite__append--icon\"\n              (click)='clear($event)'>\n              <div class=\"Vlt-composite__icon\">\n                <svg>\n                  <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n                </svg>\n              </div>\n            </a>\n          }\n        </div>\n      </div>\n      <div class='Vlt-dropdown__panel'>\n        <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\">\n          <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 15px;'>\n          Select ({{options.length}})\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 Vlt-search_wrap\">\n          @if (optionsBackup.length > 12) {\n            <div class=\"Vlt-composite\" [ngClass]=\"{'vgip-disable': disabled}\">\n              <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\"\n                style=\"top: 0; padding-top: 15px;\">\n                <div class=\"Vlt-composite__icon\">\n                  <svg class='Vlt-grey'>\n                    <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-search\"></use>\n                  </svg>\n                </div>\n              </div>\n              <div class=\"Vlt-input\">\n                <input type=\"text\" class=\"vgip-search_input\" [(ngModel)]=\"searchInputText\" placeholder=\"Search\" (input)=\"onSearchChange()\" (blur)='onBlur($event)' [ngModelOptions]=\"{standalone: true}\">\n              </div>\n              <a href='#' class=\"Vlt-composite__append--icon\" style=\"top: 2px;\" (click)=\"clearSearchField($event)\" [hidden]=\"!searchInputText\">\n                <div class=\"Vlt-composite__icon\">\n                  <svg class='Vlt-icon Vlt-icon--small'>\n                    <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/>\n                  </svg>\n                </div>\n              </a>\n            </div>\n          }\n        </div>\n        @if (dropdown) {\n          <div class='Vlt-dropdown__scroll'>\n            @for (option of options; track option; let i = $index) {\n            <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n              (click)='onOptionSelect($event, option)' class=\"Vlt-dropdown__link\"\n              [attr.title]=\"option.label || option.id || option\">\n              @if (multiple) {\n              <div class=\"Vlt-checkbox\" style='width: 100%;'>\n                <label>\n                  <span class=\"Vlt-checkbox__button\">\n                    <input type=\"checkbox\" [checked]='model && model.indexOf(option) !== -1' />\n                    <span class=\"Vlt-checkbox__icon\"></span>\n                  </span>\n                  {{option.label || (option.id === '' ? '--empty--' : option)}}\n                </label>\n              </div>\n              }\n              @if (!multiple) {\n              <div style='padding: 12px 20px;overflow: hidden;text-overflow: ellipsis;'>{{option.label || (option.id === '' ?\n                '--empty--' : option)}}</div>\n              }\n            </a>\n            }\n            <!-- No Option Found -->\n            @if (options.length === 0) {\n              <div class=\"Vlt-dropdown__link\">\n                <span style='padding: 12px 20px;'>\n                  No Option Found\n                </span>\n                @if (isCreatable && !disabled) {\n                  <button type=\"button\" class=\"Vlt-btn Vlt-btn--link\" (click)='openResource($event)'>\n                    <svg>\n                      <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n                    </svg> Add new\n                  </button>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (!multiple) {\n          <div class=\"Vlt-dropdown__block\"></div>\n        }\n        @if (multiple) {\n          <div class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\"\n            style='padding: 8px 16px 16px;'>\n            <button (click)='clear($event)' type='button'\n              class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\"\n            style='margin-right: 8px;'>Clear all</button>\n            <button (click)='dismissDropdown($event)' type='button'\n            class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n          </div>\n        }\n      </div>\n    </div>\n    <!-- <span *ngIf='isCreatable'>\n    <button type='button' (click)='openResource($event)' 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  </span> -->\n  @if (isCreatable && !disabled) {\n    <div class=\"Vlt-composite__append\">\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' (click)='openResource($event)'\n        class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon add-button\" aria-label='Add new'>\n        <svg>\n          <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n        </svg>\n      </button>\n    </div>\n  }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))) {\n  <small\n    class=\"Vlt-form__element__error\">\n    @if (f.errors.required) {\n      <span>Required.&nbsp;</span>\n    }\n    @if (f.errors.custom) {\n      <span>{{f.errors.custom}}&nbsp;</span>\n    }\n  </small>\n}\n@if (meta.hint) {\n  <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element.no-x input.main{padding-right:40px}.Vlt-form__element--big:not(.has-value)>.Vlt-input>.Vlt-select>label>label{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big input[readonly].main:not([disabled]){background:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color)}.Vlt-form__element--big:hover input[readonly].main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:focus input[readonly].main,.Vlt-form__element--big:focus .Vlt-composite__append button,.Vlt-form__element--big.active input[readonly].main,.Vlt-form__element--big.active .Vlt-composite__append button{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error input[readonly].main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{border-color:#f25a6b;box-shadow:none}.Vlt-form__element--big .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon);margin-right:2px}.Vlt-form__element--big .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}.Vlt-composite.has-append-button input[readonly].main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-composite.has-append-button .Vlt-select:after{margin-right:-10px}.Vlt-composite__append{z-index:initial}.Vlt-composite__append button{height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-right:16px;padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.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-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link{padding:0 20px 0 0}.Vlt-dropdown__panel .Vlt-dropdown__link.Vlt-dropdown__link--selected{background:#2c2d300d}.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}input.main{cursor:pointer}input.main:disabled{cursor:not-allowed}input.main{padding-right:76px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:42px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:53px;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)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-search_wrap{padding-top:10px}.Vlt-search_wrap .vgip-search_input{padding:8px 36px 8px 38px;width:100%;border:1px solid var(--vgip-meta-input-border-color)!important;border-radius:6px!important}.Vlt-search_wrap .vgip-search_input:focus,.Vlt-search_wrap .vgip-search_input:active,.Vlt-search_wrap .vgip-search_input:hover{border-color:var(--vgip-meta-input-active-border-color)!important}.Vlt-search_wrap .Vlt-composite__append--icon{cursor:pointer}.Vlt-search_wrap .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-search_wrap .Vlt-composite__append--icon:focus svg,.Vlt-search_wrap .Vlt-composite__append--icon:active svg,.Vlt-search_wrap .Vlt-composite__append--icon:hover svg{fill:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldSelect, decorators: [{
             type: Component,
-            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>\n      {{showText}}\n    </div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element\"\n    [ngClass]=\"{ 'Vlt-form__element--big': !meta.small ,'has-value': f.value, active: keyListenerActive, 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched), 'no-x': meta.noX }\">\n    <div class=\"Vlt-composite Vlt-dropdown Vlt-input\" style='display: block;'\n      [ngClass]=\"{ 'has-append-button': isCreatable && !disabled }\">\n      <div class=\"Vlt-select\">\n        <label class='wrapper'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n          <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n            {{meta.label || meta.name}}\n            @if (validations.required && options.length) {\n              <span class='Vlt-red'>*</span>\n            }\n          </label>\n          <input class='main' [required]='validations.required && !!options.length' readonly [ngModel]='showText'\n            #ft='ngModel' [ngModelOptions]=\"{standalone: true}\" type=\"text\"\n            [placeholder]=\"meta.placeholder || ' '\" (click)='onActivated($event)' (focus)='onActivated($event)'\n            (blur)='onBlur($event)' [ngClass]=\"{ 'standalone': meta.standalone }\"\n            [disabled]='disabled' [attr.aria-label]='meta.label' />\n        </label>\n        <select class='model' [required]='validations.required && !!options.length' style='display: none;'\n          [(ngModel)]='model' [ngModelOptions]=\"{standalone: meta.standalone}\"\n        (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name'></select>\n        @if (searching) {\n          <div class='search-progress'>\n            <div class=\"container\">\n              <div class=\"bar Vlt-bg-purple\"></div>\n            </div>\n          </div>\n        }\n        <div class='Vlt-composite__append right-actions'>\n          @if (model && !meta.noX && !disabled) {\n            <a href='#' class=\"Vlt-composite__append--icon\"\n              (click)='clear($event)'>\n              <div class=\"Vlt-composite__icon\">\n                <svg>\n                  <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n                </svg>\n              </div>\n            </a>\n          }\n        </div>\n      </div>\n      <div class='Vlt-dropdown__panel'>\n        <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\">\n          <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 15px;'>\n          Select ({{options.length}})\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 Vlt-search_wrap\">\n          @if (optionsBackup.length > 12) {\n            <div class=\"Vlt-composite\" [ngClass]=\"{'vgip-disable': disabled}\">\n              <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\"\n                style=\"top: 0; padding-top: 15px;\">\n                <div class=\"Vlt-composite__icon\">\n                  <svg class='Vlt-grey'>\n                    <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-search\"></use>\n                  </svg>\n                </div>\n              </div>\n              <div class=\"Vlt-input\">\n                <input type=\"text\" class=\"vgip-search_input\" [(ngModel)]=\"searchInputText\" placeholder=\"Search\" (input)=\"onSearchChange()\" (blur)='onBlur($event)' [ngModelOptions]=\"{standalone: true}\">\n              </div>\n              <a href='#' class=\"Vlt-composite__append--icon\" style=\"top: 2px;\" (click)=\"clearSearchField($event)\" [hidden]=\"!searchInputText\">\n                <div class=\"Vlt-composite__icon\">\n                  <svg class='Vlt-icon Vlt-icon--small'>\n                    <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/>\n                  </svg>\n                </div>\n              </a>\n            </div>\n          }\n        </div>\n        @if (dropdown) {\n          <div class='Vlt-dropdown__scroll'>\n            @for (option of options; track option; let i = $index) {\n              <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n                (click)='onOptionSelect($event, option)'\n                class=\"Vlt-dropdown__link\" title=\"{{option.hint}}\">\n                @if (multiple) {\n                  <div class=\"Vlt-checkbox\" style='width: 100%;'>\n                    <label>\n                      <span class=\"Vlt-checkbox__button\">\n                        <input type=\"checkbox\" [checked]='model && model.indexOf(option) !== -1' />\n                        <span class=\"Vlt-checkbox__icon\"></span>\n                      </span>\n                      {{option.label || (option.id === '' ? '--empty--' : option)}}\n                    </label>\n                  </div>\n                }\n                @if (!multiple) {\n                  <div style='padding: 12px 20px;'>{{option.label || (option.id === '' ?\n                  '--empty--' : option)}}</div>\n                }\n              </a>\n            }\n            <!-- No Option Found -->\n            @if (options.length === 0) {\n              <div class=\"Vlt-dropdown__link\">\n                <span style='padding: 12px 20px;'>\n                  No Option Found\n                </span>\n                @if (isCreatable && !disabled) {\n                  <button type=\"button\" class=\"Vlt-btn Vlt-btn--link\" (click)='openResource($event)'>\n                    <svg>\n                      <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n                    </svg> Add new\n                  </button>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (!multiple) {\n          <div class=\"Vlt-dropdown__block\"></div>\n        }\n        @if (multiple) {\n          <div class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\"\n            style='padding: 8px 16px 16px;'>\n            <button (click)='clear($event)' type='button'\n              class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\"\n            style='margin-right: 8px;'>Clear all</button>\n            <button (click)='dismissDropdown($event)' type='button'\n            class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n          </div>\n        }\n      </div>\n    </div>\n    <!-- <span *ngIf='isCreatable'>\n    <button type='button' (click)='openResource($event)' 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  </span> -->\n  @if (isCreatable && !disabled) {\n    <div class=\"Vlt-composite__append\">\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' (click)='openResource($event)'\n        class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon add-button\" aria-label='Add new'>\n        <svg>\n          <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n        </svg>\n      </button>\n    </div>\n  }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))) {\n  <small\n    class=\"Vlt-form__element__error\">\n    @if (f.errors.required) {\n      <span>Required.&nbsp;</span>\n    }\n    @if (f.errors.custom) {\n      <span>{{f.errors.custom}}&nbsp;</span>\n    }\n  </small>\n}\n@if (meta.hint) {\n  <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element.no-x input.main{padding-right:40px}.Vlt-form__element--big:not(.has-value)>.Vlt-input>.Vlt-select>label>label{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big input[readonly].main:not([disabled]){background:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color)}.Vlt-form__element--big:hover input[readonly].main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:focus input[readonly].main,.Vlt-form__element--big:focus .Vlt-composite__append button,.Vlt-form__element--big.active input[readonly].main,.Vlt-form__element--big.active .Vlt-composite__append button{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error input[readonly].main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{border-color:#f25a6b;box-shadow:none}.Vlt-form__element--big .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon);margin-right:2px}.Vlt-form__element--big .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}.Vlt-composite.has-append-button input[readonly].main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-composite.has-append-button .Vlt-select:after{margin-right:-10px}.Vlt-composite__append{z-index:initial}.Vlt-composite__append button{height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-right:16px;padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.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-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link{padding:0 20px 0 0}.Vlt-dropdown__panel .Vlt-dropdown__link.Vlt-dropdown__link--selected{background:#2c2d300d}.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}input.main{cursor:pointer}input.main:disabled{cursor:not-allowed}input.main{padding-right:76px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:42px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:53px;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)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-search_wrap{padding-top:10px}.Vlt-search_wrap .vgip-search_input{padding:8px 36px 8px 38px;width:100%;border:1px solid var(--vgip-meta-input-border-color)!important;border-radius:6px!important}.Vlt-search_wrap .vgip-search_input:focus,.Vlt-search_wrap .vgip-search_input:active,.Vlt-search_wrap .vgip-search_input:hover{border-color:var(--vgip-meta-input-active-border-color)!important}.Vlt-search_wrap .Vlt-composite__append--icon{cursor:pointer}.Vlt-search_wrap .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-search_wrap .Vlt-composite__append--icon:focus svg,.Vlt-search_wrap .Vlt-composite__append--icon:active svg,.Vlt-search_wrap .Vlt-composite__append--icon:hover svg{fill:var(--vgip-meta-input-accent-color)}\n"] }]
+            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>\n      {{showText}}\n    </div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element\"\n    [ngClass]=\"{ 'Vlt-form__element--big': !meta.small ,'has-value': f.value, active: keyListenerActive, 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched), 'no-x': meta.noX }\">\n    <div class=\"Vlt-composite Vlt-dropdown Vlt-input\" style='display: block;'\n      [ngClass]=\"{ 'has-append-button': isCreatable && !disabled }\">\n      <div class=\"Vlt-select\">\n        <label class='wrapper'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n          <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n            {{meta.label || meta.name}}\n            @if (validations.required && options.length) {\n              <span class='Vlt-red'>*</span>\n            }\n          </label>\n          <input class='main' [required]='validations.required && !!options.length' readonly [ngModel]='showText' #ft='ngModel'\n            [ngModelOptions]=\"{standalone: true}\" type=\"text\" [placeholder]=\"meta.placeholder || ' '\"\n            (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'\n            [ngClass]=\"{ 'standalone': meta.standalone }\" [disabled]='disabled' [attr.aria-label]='meta.label'\n            [attr.title]=\"showText\" />\n        </label>\n        <select class='model' [required]='validations.required && !!options.length' style='display: none;'\n          [(ngModel)]='model' [ngModelOptions]=\"{standalone: meta.standalone}\"\n        (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name'></select>\n        @if (searching) {\n          <div class='search-progress'>\n            <div class=\"container\">\n              <div class=\"bar Vlt-bg-purple\"></div>\n            </div>\n          </div>\n        }\n        <div class='Vlt-composite__append right-actions'>\n          @if (model && !meta.noX && !disabled) {\n            <a href='#' class=\"Vlt-composite__append--icon\"\n              (click)='clear($event)'>\n              <div class=\"Vlt-composite__icon\">\n                <svg>\n                  <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n                </svg>\n              </div>\n            </a>\n          }\n        </div>\n      </div>\n      <div class='Vlt-dropdown__panel'>\n        <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\">\n          <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 15px;'>\n          Select ({{options.length}})\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 Vlt-search_wrap\">\n          @if (optionsBackup.length > 12) {\n            <div class=\"Vlt-composite\" [ngClass]=\"{'vgip-disable': disabled}\">\n              <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\"\n                style=\"top: 0; padding-top: 15px;\">\n                <div class=\"Vlt-composite__icon\">\n                  <svg class='Vlt-grey'>\n                    <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-search\"></use>\n                  </svg>\n                </div>\n              </div>\n              <div class=\"Vlt-input\">\n                <input type=\"text\" class=\"vgip-search_input\" [(ngModel)]=\"searchInputText\" placeholder=\"Search\" (input)=\"onSearchChange()\" (blur)='onBlur($event)' [ngModelOptions]=\"{standalone: true}\">\n              </div>\n              <a href='#' class=\"Vlt-composite__append--icon\" style=\"top: 2px;\" (click)=\"clearSearchField($event)\" [hidden]=\"!searchInputText\">\n                <div class=\"Vlt-composite__icon\">\n                  <svg class='Vlt-icon Vlt-icon--small'>\n                    <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/>\n                  </svg>\n                </div>\n              </a>\n            </div>\n          }\n        </div>\n        @if (dropdown) {\n          <div class='Vlt-dropdown__scroll'>\n            @for (option of options; track option; let i = $index) {\n            <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n              (click)='onOptionSelect($event, option)' class=\"Vlt-dropdown__link\"\n              [attr.title]=\"option.label || option.id || option\">\n              @if (multiple) {\n              <div class=\"Vlt-checkbox\" style='width: 100%;'>\n                <label>\n                  <span class=\"Vlt-checkbox__button\">\n                    <input type=\"checkbox\" [checked]='model && model.indexOf(option) !== -1' />\n                    <span class=\"Vlt-checkbox__icon\"></span>\n                  </span>\n                  {{option.label || (option.id === '' ? '--empty--' : option)}}\n                </label>\n              </div>\n              }\n              @if (!multiple) {\n              <div style='padding: 12px 20px;overflow: hidden;text-overflow: ellipsis;'>{{option.label || (option.id === '' ?\n                '--empty--' : option)}}</div>\n              }\n            </a>\n            }\n            <!-- No Option Found -->\n            @if (options.length === 0) {\n              <div class=\"Vlt-dropdown__link\">\n                <span style='padding: 12px 20px;'>\n                  No Option Found\n                </span>\n                @if (isCreatable && !disabled) {\n                  <button type=\"button\" class=\"Vlt-btn Vlt-btn--link\" (click)='openResource($event)'>\n                    <svg>\n                      <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n                    </svg> Add new\n                  </button>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (!multiple) {\n          <div class=\"Vlt-dropdown__block\"></div>\n        }\n        @if (multiple) {\n          <div class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\"\n            style='padding: 8px 16px 16px;'>\n            <button (click)='clear($event)' type='button'\n              class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\"\n            style='margin-right: 8px;'>Clear all</button>\n            <button (click)='dismissDropdown($event)' type='button'\n            class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n          </div>\n        }\n      </div>\n    </div>\n    <!-- <span *ngIf='isCreatable'>\n    <button type='button' (click)='openResource($event)' 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  </span> -->\n  @if (isCreatable && !disabled) {\n    <div class=\"Vlt-composite__append\">\n      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' (click)='openResource($event)'\n        class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon add-button\" aria-label='Add new'>\n        <svg>\n          <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n        </svg>\n      </button>\n    </div>\n  }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))) {\n  <small\n    class=\"Vlt-form__element__error\">\n    @if (f.errors.required) {\n      <span>Required.&nbsp;</span>\n    }\n    @if (f.errors.custom) {\n      <span>{{f.errors.custom}}&nbsp;</span>\n    }\n  </small>\n}\n@if (meta.hint) {\n  <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element.no-x input.main{padding-right:40px}.Vlt-form__element--big:not(.has-value)>.Vlt-input>.Vlt-select>label>label{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big input[readonly].main:not([disabled]){background:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color)}.Vlt-form__element--big:hover input[readonly].main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:focus input[readonly].main,.Vlt-form__element--big:focus .Vlt-composite__append button,.Vlt-form__element--big.active input[readonly].main,.Vlt-form__element--big.active .Vlt-composite__append button{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error input[readonly].main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{border-color:#f25a6b;box-shadow:none}.Vlt-form__element--big .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon);margin-right:2px}.Vlt-form__element--big .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}.Vlt-composite.has-append-button input[readonly].main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-composite.has-append-button .Vlt-select:after{margin-right:-10px}.Vlt-composite__append{z-index:initial}.Vlt-composite__append button{height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-right:16px;padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.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-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link{padding:0 20px 0 0}.Vlt-dropdown__panel .Vlt-dropdown__link.Vlt-dropdown__link--selected{background:#2c2d300d}.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}input.main{cursor:pointer}input.main:disabled{cursor:not-allowed}input.main{padding-right:76px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:42px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:53px;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)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-search_wrap{padding-top:10px}.Vlt-search_wrap .vgip-search_input{padding:8px 36px 8px 38px;width:100%;border:1px solid var(--vgip-meta-input-border-color)!important;border-radius:6px!important}.Vlt-search_wrap .vgip-search_input:focus,.Vlt-search_wrap .vgip-search_input:active,.Vlt-search_wrap .vgip-search_input:hover{border-color:var(--vgip-meta-input-active-border-color)!important}.Vlt-search_wrap .Vlt-composite__append--icon{cursor:pointer}.Vlt-search_wrap .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-search_wrap .Vlt-composite__append--icon:focus svg,.Vlt-search_wrap .Vlt-composite__append--icon:active svg,.Vlt-search_wrap .Vlt-composite__append--icon:hover svg{fill:var(--vgip-meta-input-accent-color)}\n"] }]
         }], ctorParameters: () => [{ type: MetaReferenceService }, { type: MetaResourceService }, { type: i0.ViewContainerRef }] });
 
 var index$8 = /*#__PURE__*/Object.freeze({