@vgip/meta-ui 1.9.9 → 2.1.0

package/fesm2022/vgip-meta-ui-index-86d5c4b7.mjs

@@ -1,575 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
-import { F as FieldAbstract } from './vgip-meta-ui-fieldAbstract-baeaf24d.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-f2a08550.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-37358620.mjs';
-import '@angular/common/http';
-import '@angular/router';
-import './vgip-meta-ui-index-fa271433.mjs';
-
-class FieldSelect extends FieldAbstract {
-    constructor(referenceService, metaResource, viewContainerRef) {
-        super();
-        this.referenceService = referenceService;
-        this.metaResource = metaResource;
-        this.viewContainerRef = viewContainerRef;
-        this.isCreatable = false;
-        this.isUpdatable = 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(false);
-                    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(false);
-                    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;
-            this.isUpdatable = this.meta.reference.updatable;
-        }
-        Object.defineProperty(this.parent, this.meta.name, {
-            set: (value) => {
-                this.desiredValue = value;
-                if (this.multiple) {
-                    if (value && value instanceof Array === false) {
-                        for (const o of this.optionsBackup) {
-                            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.optionsBackup) {
-                                    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(() => {
-                if (!this.model) {
-                    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)) {
-                    console.log('this.meta.enabled', 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)) {
-                            setTimeout(() => {
-                                this.logicalDisabled = !value[par];
-                                if (this.logicalDisabled) {
-                                    this.clear();
-                                }
-                                else {
-                                    this.filterOptions();
-                                }
-                            }, 0);
-                        }
-                    });
-                }
-                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?.hasOwnProperty(searchParams[par])) {
-                            if (!this.logicalDisabled) {
-                                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) {
-        this.dismissDropdown();
-        if (this.model && typeof (this.meta.reference.updatable) === 'function') {
-            return this.meta.reference.updatable(this);
-        }
-        else if (typeof (this.meta.reference.creatable) === 'function') {
-            return this.meta.reference.creatable(this);
-        }
-        const refDialogComponent = this.viewContainerRef.createComponent(MetaRefDialog);
-        let theme = this.elementRef.nativeElement.dataset.theme;
-        if (!theme || theme === 'inherit') {
-            let parentComponent = this.elementRef.nativeElement.closest('vgip-meta-layout');
-            if (parentComponent) {
-                theme = parentComponent.dataset.theme;
-            }
-            if (!theme || theme === 'inherit') {
-                parentComponent = this.elementRef.nativeElement.closest('vgip-meta-resource');
-                if (parentComponent) {
-                    theme = parentComponent.dataset.theme;
-                }
-            }
-        }
-        this.referenceService.openDialog(refDialogComponent, this.metaResource, this.integrationCode, this.meta.reference, null, false, null, theme, this.overlayContainer).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(updateActiveSuggestionIndex = true) {
-        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 (updateActiveSuggestionIndex && this.options && this.model) {
-            for (let suggestionIndex = 0; suggestionIndex < this.options.length; suggestionIndex++) {
-                if (this.model === this.options[suggestionIndex]) {
-                    this.activeSuggestionIndex = suggestionIndex;
-                    break;
-                }
-            }
-        }
-        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, .Vlt-modal__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() {
-        console.log('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);
-                }
-            }
-        }
-        if (this.model) {
-            // replace current selections with valid ones from the new options list (support duplicate id)
-            if (this.multiple) {
-                const validSelections = [];
-                for (let i = this.model.length - 1; i >= 0; i--) {
-                    const applicable = this.asyncOptions.find((o) => o.id === this.model[i].id);
-                    if (applicable) {
-                        validSelections.push(applicable);
-                    }
-                }
-                this.model = validSelections;
-                if (this.model) {
-                    this.showText = (this.model || []).map((o) => o.label || o).join(', ');
-                }
-                else {
-                    delete this.showText;
-                }
-            }
-            else {
-                this.model = this.asyncOptions.find((m) => m.id === this.model.id);
-            }
-            this.onModelChange(this.model);
-        }
-    }
-    searchOptions(params) {
-        let searchUrl = `/fields/${this.meta.name}/search`;
-        if (this.meta.search) {
-            const searchParams = this.meta.search.params;
-            if (this.meta.search.url) {
-                searchUrl = this.meta.search.url.replace(/\${\s*([\w.]+)\s*}/g, (match, key) => {
-                    if (searchParams.hasOwnProperty(key)) {
-                        const props = searchParams[key].split('.');
-                        const field = props[0];
-                        const prop = props[1];
-                        delete searchParams[key]; // if it is URL param, remove it as query param
-                        let parValue = this.parent[field];
-                        if (parValue) {
-                            if (prop) {
-                                parValue = parValue[prop];
-                            }
-                            if (parValue) {
-                                return parValue;
-                            }
-                        }
-                    }
-                    return 'undefined';
-                });
-            }
-            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;
-            const value = this.value || this.desiredValue;
-            if (this.multiple) {
-                if (value) {
-                    const values = value instanceof Array ? value : (value || "").split(";");
-                    validValue = values.some((v) => options.find((o) => (v.id || v) === (o.id || o.value || o.name || 0)) !== undefined);
-                }
-            }
-            else {
-                if (value) {
-                    validValue = options.find((o) => (o.id || o) === (value.id || value)) !== undefined;
-                }
-            }
-            if (!validValue) {
-                this.clear();
-            }
-            else {
-                this.parent[this.meta.name] = value;
-            }
-            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\" [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        </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            <span style='padding: 12px 20px;'>\n              No Option Found\n            </span>\n            <button *ngIf='isCreatable && !disabled' 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          </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 attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))'\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}input.main:disabled{cursor:not-allowed}.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.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\" [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        </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            <span style='padding: 12px 20px;'>\n              No Option Found\n            </span>\n            <button *ngIf='isCreatable && !disabled' 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          </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 attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))'\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}input.main:disabled{cursor:not-allowed}.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: function () { return [{ type: MetaReferenceService }, { type: MetaResourceService }, { type: i0.ViewContainerRef }]; } });
-
-export { FieldSelect };
-//# sourceMappingURL=vgip-meta-ui-index-86d5c4b7.mjs.map