@vgip/meta-ui 1.7.0 → 1.7.3

package/fesm2022/vgip-meta-ui-index-b48e32ce.mjs

@@ -0,0 +1,502 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import { F as FieldAbstract } from './vgip-meta-ui-fieldAbstract-9955be39.mjs';
+import * as i2 from '@angular/forms';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { M as MetaRefDialog, b as MetaReferenceService, a as MetaResourceService } from './vgip-meta-ui-index-3bc3d41b.mjs';
+import * as i1 from '@angular/common';
+import { M as MetaModelPipe } from './vgip-meta-ui-metaModel.pipe-6b803e66.mjs';
+import 'rxjs';
+import 'rxjs/operators';
+import './vgip-meta-ui-index-ea5c2466.mjs';
+import '@angular/common/http';
+import '@angular/router';
+import './vgip-meta-ui-index-39011b04.mjs';
+
+class FieldSelect extends FieldAbstract {
+    constructor(referenceService, metaResource, viewContainerRef) {
+        super();
+        this.referenceService = referenceService;
+        this.metaResource = metaResource;
+        this.viewContainerRef = viewContainerRef;
+        this.isCreatable = false;
+        this.clickout = (event) => {
+            if (event.target.className === 'Vlt-dropdown__link' && this.elementRef.nativeElement.contains(event.target)) {
+                this.focus();
+            }
+            else if (event.target !== this.input &&
+                !event.target.classList.contains('Vlt-dropdown__block') &&
+                !this.detectSearchBlock(event.target)) {
+                this.dismissDropdown();
+            }
+            else if (this.detectSearchBlock(event.target)) {
+                event.target.focus();
+            }
+            else {
+                this.focus();
+            }
+        };
+        this.keydown = (event) => {
+            switch (event.key) {
+                case 'ArrowDown': {
+                    this.showDropdown();
+                    if (typeof (this.activeSuggestionIndex) === 'undefined') {
+                        this.activeSuggestionIndex = 0;
+                    }
+                    else {
+                        this.activeSuggestionIndex++;
+                        if (this.activeSuggestionIndex >= this.options.length) {
+                            this.activeSuggestionIndex = 0;
+                        }
+                    }
+                    this.ensureDropdownOptionIsVisible();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                }
+                case 'ArrowUp': {
+                    this.showDropdown();
+                    if (typeof (this.activeSuggestionIndex) === 'undefined') {
+                        this.activeSuggestionIndex = this.options.length - 1;
+                    }
+                    else {
+                        this.activeSuggestionIndex--;
+                        if (this.activeSuggestionIndex < 0) {
+                            this.activeSuggestionIndex = this.options.length - 1;
+                        }
+                    }
+                    this.ensureDropdownOptionIsVisible();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                }
+                case 'Enter':
+                case 'Space':
+                case ' ': {
+                    if (typeof (this.activeSuggestionIndex) !== 'undefined') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.onOptionSelect(event, this.options[this.activeSuggestionIndex]);
+                        if (!this.multiple) {
+                            delete this.activeSuggestionIndex;
+                        }
+                    }
+                    break;
+                }
+                case 'Escape': {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.dismissDropdown();
+                    break;
+                }
+                case 'Backspace': {
+                    if (!this.dropdown.classList.contains('Vlt-dropdown--expanded')) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.clear();
+                    }
+                    break;
+                }
+            }
+        };
+    }
+    get options() {
+        return this.filteredOptions || this.asyncOptions || this.meta.options || this.meta.picklist || [];
+    }
+    get groupedOptions() {
+        return this.options.reduce((r, { group }) => {
+            if (!r.some(o => o.group === group)) {
+                r.push({ group, groupItem: this.options.filter(v => v.group === group) });
+            }
+            return r;
+        }, []);
+    }
+    get resourceService() {
+        if (!this.metaResourceService) {
+            const metaResourceConfig = {
+                integrationCode: this.integrationCode,
+                resourceType: this.resourceType
+            };
+            this.metaResourceService = this.metaResource.new(metaResourceConfig);
+        }
+        return this.metaResourceService;
+    }
+    get optionsBackup() {
+        return this.asyncOptions || this.meta.options || this.meta.picklist || [];
+    }
+    static setup(instance, parent, meta) { } // eslint-disable-line @typescript-eslint/no-unused-vars
+    ngOnInit() {
+        // console.log('parent', this.parent);
+        this.validationAttributes = ['required'];
+        this.multiple = (this.meta.type === 'multipicklist') || this.meta.multiple;
+        const origValue = this.parent[this.meta.name];
+        if (this.meta.reference) {
+            this.isCreatable = true;
+        }
+        Object.defineProperty(this.parent, this.meta.name, {
+            set: (value) => {
+                if (this.multiple) {
+                    if (value && value instanceof Array === false) {
+                        for (const o of this.options) {
+                            if ((value.id || value) === (o.id || o.value || o.name || 0)) {
+                                this.model = [o];
+                                this.value = [this.modelToValue(o, this.meta.valueType)];
+                                break;
+                            }
+                        }
+                    }
+                    if (!value || value.length) {
+                        const values = (value instanceof Array) ? value : (value || '').split(';'); // should not handle incorrect values
+                        this.value = [];
+                        this.model = [];
+                        for (const v of values) {
+                            if (v) {
+                                for (const o of this.options) {
+                                    if ((v.id || v) === (o.id || o.value || o.name || 0)) {
+                                        this.model.push(o);
+                                        this.value.push(this.modelToValue(o, this.meta.valueType));
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+                        if (!this.model.length && !this.isPersistedParent) {
+                            delete this.model;
+                            delete this.value;
+                            delete this.showText;
+                        }
+                        else {
+                            this.showText = (this.model || []).map((o) => o.label || o).join(', ');
+                        }
+                    }
+                }
+                else {
+                    if (value) {
+                        for (const o of this.options) {
+                            if ((value.id || value) === (o.id || o.value || o.name || o)) {
+                                this.model = o;
+                                this.value = this.modelToValue(o, this.meta.valueType);
+                                this.showText = o.label || o;
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        delete this.model;
+                        delete this.value;
+                        delete this.showText;
+                    }
+                }
+                this.onSubjectChange(this.model);
+                this.meta.$optional = this.isOptional;
+            },
+            get: () => this.value,
+            enumerable: this.sendToServer,
+            configurable: true
+        });
+        if (origValue) {
+            this.parent[this.meta.name] = origValue;
+        }
+        if (this.default && !this.model) {
+            setTimeout(() => {
+                this.parent[this.meta.name] = this.default.id || this.default;
+            }, 0);
+        }
+        if (typeof (this.meta.enabled) !== 'undefined') {
+            if (typeof (this.meta.enabled) === 'object') {
+                for (const par of Object.keys(this.meta.enabled)) {
+                    const parValue = this.parent[par];
+                    if (parValue) {
+                        // logic for specific values, this works only for true
+                    }
+                    else {
+                        this.logicalDisabled = true;
+                        this.clear();
+                    }
+                    this.parentChangeSubject.subscribe((value) => {
+                        if (value && value.hasOwnProperty(par)) {
+                            this.logicalDisabled = !value[par];
+                            if (this.logicalDisabled) {
+                                this.clear();
+                            }
+                            else {
+                                this.filterOptions();
+                            }
+                        }
+                    });
+                }
+                this.filterOptions();
+            }
+        }
+        if (this.meta.search) {
+            const searchParams = this.meta.search.params;
+            if (searchParams) {
+                for (const par of Object.keys(searchParams)) {
+                    const parValue = this.parent[searchParams[par]];
+                    if (parValue) {
+                        const params = {};
+                        params[par] = parValue;
+                        this.searchOptions(params);
+                    }
+                    this.parentChangeSubject.subscribe((value) => {
+                        if (value && value.hasOwnProperty(searchParams[par])) {
+                            this.searchOptions(value);
+                        }
+                    });
+                }
+            }
+        }
+    }
+    onActivated(ev) {
+        // ev.preventDefault();
+        // ev.stopPropagation();
+        this.input = ev.srcElement;
+        if (!this.dropdown) {
+            this.dropdown = ev.srcElement.parentNode.parentNode.parentNode;
+            this.searchInput = this.dropdown.querySelector('.vgip-search_input');
+        }
+        this.showDropdown();
+    }
+    detectSearchBlock(element) {
+        return this.elementRef.nativeElement.querySelector('.Vlt-search_wrap').contains(element);
+    }
+    onBlur(ev) {
+        let internalControl = false;
+        if (ev.relatedTarget) {
+            if (!this.detectSearchBlock(ev.relatedTarget) && !this.elementRef.nativeElement.contains(ev.relatedTarget)) {
+                this.dismissDropdown();
+            }
+            else {
+                internalControl = true;
+            }
+        }
+        if (this.keyListenerActive && !internalControl) {
+            this.input.removeEventListener('keydown', this.keydown);
+            if (this.searchInput) {
+                this.searchInput.removeEventListener('keydown', this.keydown);
+            }
+            setTimeout(() => {
+                if (!this.keyListenerActive) {
+                    document.removeEventListener('click', this.clickout);
+                }
+            }, 400);
+            delete this.keyListenerActive;
+        }
+        this.onLeave.emit(ev);
+    }
+    onOptionSelect(ev, option) {
+        if (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+        this.focus();
+        if (this.multiple) {
+            if (!this.model) {
+                this.model = [];
+            }
+            const optionIndex = this.model.indexOf(option);
+            if (optionIndex === -1) {
+                this.model.push(option);
+            }
+            else {
+                this.model.splice(optionIndex, 1);
+                if (!this.model.length) {
+                    delete this.model;
+                }
+            }
+            this.onModelChange(this.model);
+            if (this.model) {
+                this.showText = (this.model || []).map((o) => o.label || o).join(', ');
+            }
+            else {
+                delete this.showText;
+            }
+        }
+        else {
+            this.dismissDropdown();
+            if (typeof option !== 'undefined') {
+                this.model = option;
+                this.onModelChange(option);
+                this.showText = option.label || (option.id === '' ? '--empty--' : option);
+                if (typeof (option) === 'object' && !option.id && option.id !== '') {
+                    delete this.showText;
+                }
+            }
+        }
+    }
+    clear(ev) {
+        delete this.model;
+        this.onModelChange(this.model);
+        delete this.showText;
+        if (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            return false;
+        }
+    }
+    openResource(ev) {
+        const refDialogComponent = this.viewContainerRef.createComponent(MetaRefDialog);
+        this.referenceService.openDialog(refDialogComponent, this.metaResource, this.integrationCode, this.meta.reference, null).subscribe((result) => {
+            if (result) {
+                const existingOptions = (this.meta.options || []).find((o) => (o.id === result.id && o.type === result.type));
+                if (existingOptions) {
+                    existingOptions.label = result.label;
+                }
+                else {
+                    if (!this.meta.options) {
+                        this.meta.options = [];
+                    }
+                    this.meta.options.unshift(result);
+                }
+                this.onOptionSelect(ev, result);
+            }
+        });
+    }
+    showDropdown() {
+        this.dropdown.classList.add('Vlt-dropdown--expanded');
+        if (!this.keyListenerActive) {
+            if (this.searchInput) {
+                this.searchInput.focus(); // Focus directly on search input first visit
+                this.searchInput.addEventListener('keydown', this.keydown);
+            }
+            this.input.addEventListener('keydown', this.keydown);
+            setTimeout(() => {
+                document.addEventListener('click', this.clickout);
+            }, 200);
+            this.keyListenerActive = true;
+            if (this.options && this.model) {
+                for (let suggestionIndex = 0; suggestionIndex < this.options.length; suggestionIndex++) {
+                    if (this.model === this.options[suggestionIndex]) {
+                        this.activeSuggestionIndex = suggestionIndex;
+                    }
+                }
+            }
+        }
+        this.ensureDropdownIsVisible();
+    }
+    dismissDropdown(event) {
+        if (event) {
+            this.focus();
+        }
+        if (this.dropdown) {
+            this.dropdown.classList.remove('Vlt-dropdown--expanded');
+        }
+        if (this.searchInput) {
+            this.clearSearchField();
+        }
+        delete this.activeSuggestionIndex;
+    }
+    onSearchChange() {
+        const search = new RegExp(this.searchInputText, 'gi');
+        if (this.searchInputText === '') {
+            this.filteredOptions = [...this.optionsBackup];
+        }
+        else {
+            this.filteredOptions = this.optionsBackup.filter(option => (option.label || option.id || option.name || option).match(search));
+        }
+    }
+    clearSearchField(ev) {
+        this.searchInputText = '';
+        this.onSearchChange();
+        if (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            return false;
+        }
+    }
+    ensureDropdownIsVisible() {
+        setTimeout(() => {
+            const holder = this.dropdown.closest('.Vlt-card__content');
+            if (holder) {
+                const el = this.elementRef.nativeElement.querySelector('.Vlt-dropdown__panel');
+                const elRect = el.getBoundingClientRect();
+                const holderRect = holder.getBoundingClientRect();
+                if (holderRect.top + holderRect.height < elRect.top + elRect.height) {
+                    el.scrollIntoView({ block: 'end' });
+                }
+            }
+        }, 400);
+    }
+    ensureDropdownOptionIsVisible() {
+        if (!this.dropdownScrollContainer) {
+            this.dropdownScrollContainer = this.dropdown.querySelector('.Vlt-dropdown__scroll');
+        }
+        if (this.dropdownScrollContainer && typeof (this.activeSuggestionIndex) === 'number') {
+            const scrollTop = 44 * this.activeSuggestionIndex;
+            const scrollBottom = 44 * (this.activeSuggestionIndex - 7);
+            if (scrollTop < this.dropdownScrollContainer.scrollTop) {
+                this.dropdownScrollContainer.scrollTop = scrollTop;
+            }
+            else if (scrollBottom > this.dropdownScrollContainer.scrollTop) {
+                this.dropdownScrollContainer.scrollTop = scrollBottom;
+            }
+        }
+    }
+    filterOptions() {
+        this.asyncOptions = [];
+        if (!this.logicalDisabled) {
+            for (const o of this.meta.options) {
+                if (o.for) {
+                    for (const par of Object.keys(o.for)) {
+                        const parValue = this.parent[par];
+                        if (o.for[par].indexOf(parValue) !== -1) {
+                            this.asyncOptions.push(o);
+                        }
+                    }
+                }
+                else {
+                    this.asyncOptions.push(o);
+                }
+            }
+        }
+        // remove current selection if not one of the filtered options
+        if (this.model && this.asyncOptions.indexOf(this.model) === -1) {
+            delete this.model;
+            delete this.value;
+            delete this.showText;
+            delete this.parent[this.meta.name];
+        }
+    }
+    searchOptions(params) {
+        let searchUrl = `/fields/${this.meta.name}/search`;
+        if (this.meta.search) {
+            if (this.meta.search.url) {
+                searchUrl = this.meta.search.url;
+            }
+            const searchParams = this.meta.search.params;
+            if (searchParams) {
+                for (const par of Object.keys(searchParams)) {
+                    const val = this.parent[searchParams[par]];
+                    if (val) {
+                        searchUrl += `${searchUrl.indexOf('?') === -1 ? '?' : '&'}${par}=${val.id || val}`;
+                    }
+                }
+            }
+        }
+        this.searching = true;
+        this.resourceService.getByPath(searchUrl).subscribe((options) => {
+            this.asyncOptions = options;
+            let validValue = false;
+            if (this.value) {
+                for (const o of options) {
+                    if ((o.id || o) === (this.value.id || this.value)) {
+                        validValue = true;
+                    }
+                }
+                if (!validValue) {
+                    this.clear();
+                }
+            }
+            delete this.searching;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: FieldSelect, deps: [{ token: MetaReferenceService }, { token: MetaResourceService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: FieldSelect, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\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<div *ngIf='!preview' 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'>\n        <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required && options.length' class='Vlt-red'>*</span></label> <!-- eslint-disable-line -->\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      <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        <a href='#' *ngIf='model && !meta.noX && !disabled' 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      </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          <div *ngIf=\"optionsBackup.length > 12\" class=\"Vlt-composite\">\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        </div>\n        <div *ngIf='dropdown' class='Vlt-dropdown__scroll'>\n          <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n            (click)='onOptionSelect($event, option)' *ngFor='let option of options; let i = index'\n            class=\"Vlt-dropdown__link\">\n            <div *ngIf='multiple' 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            <div *ngIf='!multiple' style='padding: 12px 20px;'>{{option.label || (option.id === '' ?\n              '--empty--' : option)}}</div>\n          </a>\n          <!-- No Option Found -->\n          <div class=\"Vlt-dropdown__link\" *ngIf=\"options.length === 0\">\n            <div style='padding: 12px 20px;'>No Option Found</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\"\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      </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    <div *ngIf='isCreatable && !disabled' 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 xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))'\n    class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&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.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}.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: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}input.main{cursor:pointer;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)}.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.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.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: "16.2.11", ngImport: i0, type: FieldSelect, 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' [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<div *ngIf='!preview' 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'>\n        <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required && options.length' class='Vlt-red'>*</span></label> <!-- eslint-disable-line -->\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      <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        <a href='#' *ngIf='model && !meta.noX && !disabled' 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      </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          <div *ngIf=\"optionsBackup.length > 12\" class=\"Vlt-composite\">\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        </div>\n        <div *ngIf='dropdown' class='Vlt-dropdown__scroll'>\n          <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n            (click)='onOptionSelect($event, option)' *ngFor='let option of options; let i = index'\n            class=\"Vlt-dropdown__link\">\n            <div *ngIf='multiple' 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            <div *ngIf='!multiple' style='padding: 12px 20px;'>{{option.label || (option.id === '' ?\n              '--empty--' : option)}}</div>\n          </a>\n          <!-- No Option Found -->\n          <div class=\"Vlt-dropdown__link\" *ngIf=\"options.length === 0\">\n            <div style='padding: 12px 20px;'>No Option Found</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\"\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      </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    <div *ngIf='isCreatable && !disabled' 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 xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))'\n    class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&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.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}.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: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}input.main{cursor:pointer;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)}.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: function () { return [{ type: MetaReferenceService }, { type: MetaResourceService }, { type: i0.ViewContainerRef }]; } });
+
+export { FieldSelect };
+//# sourceMappingURL=vgip-meta-ui-index-b48e32ce.mjs.map