@vgip/meta-ui 1.7.0 → 1.7.2

package/fesm2020/vgip-meta-ui-index-aee28354.mjs

@@ -1,497 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
-import { F as FieldAbstract } from './vgip-meta-ui-fieldAbstract-f7d80db6.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-4fcefde0.mjs';
-import * as i1 from '@angular/common';
-import { M as MetaModelPipe } from './vgip-meta-ui-metaModel.pipe-4b068359.mjs';
-import 'rxjs';
-import 'rxjs/operators';
-import './vgip-meta-ui-index-6e77c362.mjs';
-import '@angular/common/http';
-import '@angular/router';
-import './vgip-meta-ui-index-301b28cd.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) { }
-    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() {
-        this.searchInputText = '';
-        this.onSearchChange();
-    }
-    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;
-        });
-    }
-}
-FieldSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldSelect, deps: [{ token: MetaReferenceService }, { token: MetaResourceService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-FieldSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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\n            *ngIf='validations.required && options.length' class='Vlt-red'>*</span></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      <div *ngIf='searching' class='search-progress'>\n        <div class=\"container\">\n          <div class=\"bar Vlt-bg-purple\"></div>\n        </div>\n      </div>\n      <div class='Vlt-composite__append right-actions'>\n        <div *ngIf='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        </div>\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            <div class=\"Vlt-composite__append--icon\"\n              style=\"top: 2px;\" (click)=\"clearSearchField()\" [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            </div>\n          </div>\n        </div>\n        <div *ngIf='dropdown' class='Vlt-dropdown__scroll'>\n          <div [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          </div>\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: "15.2.8", 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\n            *ngIf='validations.required && options.length' class='Vlt-red'>*</span></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      <div *ngIf='searching' class='search-progress'>\n        <div class=\"container\">\n          <div class=\"bar Vlt-bg-purple\"></div>\n        </div>\n      </div>\n      <div class='Vlt-composite__append right-actions'>\n        <div *ngIf='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        </div>\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            <div class=\"Vlt-composite__append--icon\"\n              style=\"top: 2px;\" (click)=\"clearSearchField()\" [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            </div>\n          </div>\n        </div>\n        <div *ngIf='dropdown' class='Vlt-dropdown__scroll'>\n          <div [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          </div>\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-aee28354.mjs.map

package/fesm2020/vgip-meta-ui-index-bf5b6c0f.mjs

@@ -1,61 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, Input } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { ControlContainer, NgForm } from '@angular/forms';
-import { F as FieldAbstract } from './vgip-meta-ui-fieldAbstract-f7d80db6.mjs';
-import * as i1 from '@angular/common';
-import { M as MetaModelPipe } from './vgip-meta-ui-metaModel.pipe-4b068359.mjs';
-import 'rxjs';
-import 'rxjs/operators';
-
-/*
- * @Author: Alexander.Vangelov@vonage.com
- * @Date: 2019-09-19 17:34:49
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2020-03-26 12:57:51
- */
-// import { tMetaField } from '../../../metaTypes/tMetaField'
-class FieldBoolean extends FieldAbstract {
-    ngOnInit() {
-        const origValue = this.parent[this.meta.name];
-        Object.defineProperty(this.parent, this.meta.name, {
-            set: (value) => {
-                if (typeof (value) === 'object' && value !== null) {
-                    value = value.value || value.id || false;
-                }
-                if (!value && (typeof (this.prevModel) === 'boolean') && this.isPersistedParent) {
-                    value = false;
-                }
-                console.log('boolean field setting model', value);
-                this.model = (value === true) || (value != null && (['true', '1'].indexOf(value.toString().toLowerCase()) !== -1));
-                this.value = this.model;
-                this.meta.$optional = this.isOptional;
-            },
-            get: () => this.value,
-            enumerable: this.sendToServer,
-            configurable: true
-        });
-        if (typeof (origValue) !== 'undefined') {
-            this.parent[this.meta.name] = origValue;
-        }
-        if (typeof (this.meta.default) !== 'undefined' && typeof (this.model) === 'undefined' && !(this.meta.default instanceof Array)) {
-            setTimeout(() => {
-                this.onModelChange(this.meta.default);
-            }, 0);
-        }
-    }
-    onOptionChange() {
-        this.onModelChange(this.model);
-    }
-}
-FieldBoolean.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldBoolean, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FieldBoolean.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldBoolean, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>\n    {{ model ? '\u2714' : '\u2718'}}\n  </div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n\t<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n\t<div class=\"Vlt-switch\" *ngIf=\"meta.subtype === 'switch'\">\n\t\t<label style='vertical-align: middle;'>\n\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>\n\t\t\t<span class=\"Vlt-switch__slider\"></span>\n\t\t\t<span style='margin-left: 60px; line-height: 30px; white-space: nowrap;'>{{meta.label || meta.name}}</span>\n\t\t</label>\n\t</div>\n\t<div class=\"Vlt-checkbox\" *ngIf=\"meta.subtype !== 'switch'\">\n\t\t<label style='cursor: pointer;'>\n\t\t\t<span class=\"Vlt-checkbox__button\">\n\t\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>\n\t\t\t\t<span class=\"Vlt-checkbox__icon\"></span>\n\t\t\t</span>\n\t\t\t{{meta.label || meta.name}}\n\t\t</label>\n\t</div>\n\t<small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n\t<small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-checkbox+.Vlt-form__element__hint{margin-top:4px}.Vlt-checkbox__button input:not(:checked)~.Vlt-checkbox__icon{background-color:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:hover:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:not(:checked)~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-checkbox__button input:hover:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldBoolean, decorators: [{
-            type: Component,
-            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>\n    {{ model ? '\u2714' : '\u2718'}}\n  </div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n\t<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n\t<div class=\"Vlt-switch\" *ngIf=\"meta.subtype === 'switch'\">\n\t\t<label style='vertical-align: middle;'>\n\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>\n\t\t\t<span class=\"Vlt-switch__slider\"></span>\n\t\t\t<span style='margin-left: 60px; line-height: 30px; white-space: nowrap;'>{{meta.label || meta.name}}</span>\n\t\t</label>\n\t</div>\n\t<div class=\"Vlt-checkbox\" *ngIf=\"meta.subtype !== 'switch'\">\n\t\t<label style='cursor: pointer;'>\n\t\t\t<span class=\"Vlt-checkbox__button\">\n\t\t\t\t<input class='model' type=\"checkbox\" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>\n\t\t\t\t<span class=\"Vlt-checkbox__icon\"></span>\n\t\t\t</span>\n\t\t\t{{meta.label || meta.name}}\n\t\t</label>\n\t</div>\n\t<small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n\t<small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-checkbox+.Vlt-form__element__hint{margin-top:4px}.Vlt-checkbox__button input:not(:checked)~.Vlt-checkbox__icon{background-color:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:hover:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:not(:checked)~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-checkbox__button input:hover:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-accent-color)}\n"] }]
-        }], propDecorators: { meta: [{
-                type: Input
-            }] } });
-
-export { FieldBoolean };
-//# sourceMappingURL=vgip-meta-ui-index-bf5b6c0f.mjs.map

package/fesm2020/vgip-meta-ui-metaModel.pipe-4b068359.mjs

@@ -1,28 +0,0 @@
-import * as i0 from '@angular/core';
-import { Pipe } from '@angular/core';
-
-/*
- * @Author: Alexander.Vangelov@vonage.com
- * @Date: 2019-09-19 17:35:19
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2019-11-05 13:46:26
- */
-class MetaModelPipe {
-    constructor() {
-    }
-    transform(value, args) {
-        return value;
-    }
-}
-MetaModelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaModelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MetaModelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: MetaModelPipe, name: "metaModel" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetaModelPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'metaModel',
-                    pure: true
-                }]
-        }], ctorParameters: function () { return []; } });
-
-export { MetaModelPipe as M };
-//# sourceMappingURL=vgip-meta-ui-metaModel.pipe-4b068359.mjs.map

package/fesm2020/vgip-meta-ui-metaModel.pipe-4b068359.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"vgip-meta-ui-metaModel.pipe-4b068359.mjs","sources":["../../../projects/meta-ui/src/lib/common/metaModel.pipe.ts"],"sourcesContent":["/*\n * @Author: Alexander.Vangelov@vonage.com \n * @Date: 2019-09-19 17:35:19 \n * @Last Modified by: Alexander.Vangelov@vonage.com\n * @Last Modified time: 2019-11-05 13:46:26\n */\n\nimport { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'metaModel',\n  pure: true\n})\nexport class MetaModelPipe implements PipeTransform {\n\n  constructor() {\n  }\n\n  transform(value: any, args?: any): any {\n    return value;\n  }\n}\n"],"names":[],"mappings":";;;AAAA;;;;;AAKG;MAQU,aAAa,CAAA;AAExB,IAAA,WAAA,GAAA;KACC;IAED,SAAS,CAAC,KAAU,EAAE,IAAU,EAAA;AAC9B,QAAA,OAAO,KAAK,CAAC;KACd;;0GAPU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;wGAAb,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,CAAA;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBAJzB,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,WAAW;AACjB,oBAAA,IAAI,EAAE,IAAI;AACX,iBAAA,CAAA;;;;;"}