@vgip/meta-ui 1.7.0 → 1.7.2

package/fesm2020/vgip-meta-ui-index-1d2b4c69.mjs

@@ -1,68 +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 { t as templateBuilder, M as MetaContextService } from './vgip-meta-ui-index-6e77c362.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:35:13
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2020-02-26 20:00:33
- */
-class FieldText extends FieldAbstract {
-    constructor(metaContext) {
-        super();
-        this.metaContext = metaContext;
-    }
-    static setup(instance, parent, meta) {
-        const d = meta.default || meta.defaultValue;
-        if (d && !parent[meta.name]) {
-            if (typeof (d) === 'string') {
-                parent[meta.name] = d;
-            }
-            else {
-                parent[meta.name] = d.id || d.value;
-            }
-        }
-    }
-    ngOnInit() {
-        if (typeof (this.parent[this.meta.name]) === 'string') {
-            this.parent[this.meta.name] = templateBuilder(this.metaContext, this.parent[this.meta.name]);
-        }
-        // if (this.default && !this.model) {
-        //   setTimeout(()=>{
-        //     if (typeof(this.default) == 'string') {
-        //       this.parent[this.meta.name] = this.default;
-        //     } else {
-        //       this.parent[this.meta.name] = this.default.id || this.default.value;
-        //     }
-        //   }, 0);
-        // }
-    }
-    onModelChangeLocal(value) {
-        if (!value && this.prevModel && this.isPersistedParent) {
-            value = '';
-        }
-        this.onModelChange(value);
-    }
-    textToSpeech() {
-        this.focus();
-    }
-}
-FieldText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldText, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component });
-FieldText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldText, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && parent[meta.name]'>\n  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n  <label class='wrapper'>\n    <div class=\"Vlt-textarea\">\n      <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='parent[meta.name]' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n      <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\">{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n    </div>\n  </label>\n  <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.maxlength\">Length can not exceed {{validations.maxlength}} characters</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.helpText' class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n</div>\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:transparent}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldText, decorators: [{
-            type: Component,
-            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class='vgip-meta-field-preview' *ngIf='preview && parent[meta.name]'>\n  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n  <label class='wrapper'>\n    <div class=\"Vlt-textarea\">\n      <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='parent[meta.name]' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n      <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\">{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n    </div>\n  </label>\n  <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.maxlength\">Length can not exceed {{validations.maxlength}} characters</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.helpText' class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n</div>\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:transparent}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"] }]
-        }], ctorParameters: function () { return [{ type: MetaContextService }]; }, propDecorators: { meta: [{
-                type: Input
-            }] } });
-
-export { FieldText };
-//# sourceMappingURL=vgip-meta-ui-index-1d2b4c69.mjs.map

package/fesm2020/vgip-meta-ui-index-2b20afc8.mjs

@@ -1,368 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component } 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 { r as relativeTimeBuilder } from './vgip-meta-ui-relativeTimeBuilder-31791ce4.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: 2020-04-18 18:05:46
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2020-04-18 21:09:16
-*/
-class FieldDatetime extends FieldAbstract {
-    constructor() {
-        super(...arguments);
-        this.placeholder = 'dd/mm/yyyy';
-        this.clickout = (event) => {
-            if (event.target.className === 'Vlt-dropdown__link' && this.elementRef.nativeElement.contains(event.target)) {
-                this.focus();
-                // this.dismissDropdown();
-                // this.parent[this.meta.name] = event.target.textContent;
-            }
-            else if (event.target !== this.input && event.target.className !== 'Vlt-dropdown__title') {
-                this.dismissDropdown();
-            }
-            else {
-                this.focus();
-            }
-        };
-        this.keydown = (event) => {
-            switch (event.key) {
-                case 'ArrowDown': {
-                    if (['datetime', 'time', 'date', 'datetime-local'].indexOf(this.meta.type || this.meta.subtype) !== -1) {
-                        break;
-                    }
-                    this.showDropdown();
-                    event.preventDefault();
-                    if (typeof (this.activeSuggestionIndex) === 'undefined') {
-                        this.activeSuggestionIndex = 0;
-                    }
-                    else {
-                        this.activeSuggestionIndex++;
-                        if (this.activeSuggestionIndex >= this.suggestions.length) {
-                            this.activeSuggestionIndex = 0;
-                        }
-                    }
-                    break;
-                }
-                case 'ArrowUp': {
-                    if (['datetime', 'time', 'date', 'datetime-local'].indexOf(this.meta.type || this.meta.subtype) !== -1) {
-                        break;
-                    }
-                    this.showDropdown();
-                    event.preventDefault();
-                    if (typeof (this.activeSuggestionIndex) === 'undefined') {
-                        this.activeSuggestionIndex = this.suggestions.length - 1;
-                    }
-                    else {
-                        this.activeSuggestionIndex--;
-                        if (this.activeSuggestionIndex < 0) {
-                            this.activeSuggestionIndex = this.suggestions.length - 1;
-                        }
-                    }
-                    break;
-                }
-                case 'Space':
-                case 'Enter': {
-                    if (typeof (this.activeSuggestionIndex) !== 'undefined') {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        this.onSuggestionSelect(event, this.suggestions[this.activeSuggestionIndex]);
-                        delete this.activeSuggestionIndex;
-                    }
-                    break;
-                }
-                case 'Escape': {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.dismissDropdown();
-                    break;
-                }
-            }
-        };
-    }
-    get suggestions() {
-        return this.meta.suggestions || [];
-    }
-    ngOnInit() {
-        this.validationAttributes = ['required', 'min', 'max', 'step'];
-        this.type = this.meta.type;
-        if (this.meta.type === 'datetime') {
-            this.type = 'datetime-local';
-            this.placeholder += ' --:-- --';
-        }
-        else if (this.meta.type === 'time') {
-            this.placeholder = '--:-- --';
-        }
-        const origValue = this.parent[this.meta.name];
-        Object.defineProperty(this.parent, this.meta.name, {
-            set: (value) => {
-                if (value) {
-                    if (['datetime', 'date', 'datetime-local'].indexOf(this.meta.type || this.meta.subtype) !== -1 && value) {
-                        try {
-                            let date;
-                            if ((typeof (value) === 'number')) {
-                                date = new Date(parseInt(value, 10));
-                                if ('date' === (this.meta.type || this.meta.subtype)) {
-                                    date = new Date(date.getTime() + (date.getTimezoneOffset() * 60000));
-                                }
-                            }
-                            else {
-                                if ('date' === (this.meta.type || this.meta.subtype)) {
-                                    date = new Date(Date.parse(value));
-                                }
-                                else {
-                                    date = new Date(Date.parse(`${value}Z`) + (new Date().getTimezoneOffset() * 60000));
-                                }
-                            }
-                            if (typeof (value) === 'number') {
-                                switch (this.meta.type || this.meta.subtype) {
-                                    case 'datetime-local':
-                                    case 'datetime': {
-                                        this.model = `${date.getFullYear()}-${('00' + (date.getMonth() + 1)).slice(-2)}-${('00' + date.getDate()).slice(-2)}`;
-                                        this.model += `T${('00' + date.getHours()).slice(-2)}:${('00' + date.getMinutes()).slice(-2)}`;
-                                        break;
-                                    }
-                                    case 'date': {
-                                        this.model = date.toISOString().split('T')[0];
-                                        break;
-                                    }
-                                }
-                            }
-                            if (this.meta.valueType === 'isostring') {
-                                this.value = date.toISOString();
-                            }
-                            else if (this.meta.valueType === 'string') {
-                                if ((this.meta.type || this.meta.subtype) === 'date') {
-                                    this.value = date.toISOString().split('T')[0];
-                                }
-                                else {
-                                    this.value = date.toISOString();
-                                }
-                            }
-                            else {
-                                if ((this.meta.type || this.meta.subtype) === 'date') {
-                                    date.setFullYear(date.getUTCFullYear());
-                                    date.setMonth(date.getUTCMonth());
-                                    date.setDate(date.getUTCDate());
-                                    date.setMinutes(0);
-                                    date.setHours(0);
-                                    date.setSeconds(0);
-                                    date.setMilliseconds(0);
-                                    this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).getTime();
-                                }
-                                else {
-                                    this.value = date.getTime();
-                                }
-                            }
-                        }
-                        catch (e) {
-                            console.error('Date parse error', e.message, `"${value}"`, `(${typeof (value)})`);
-                        }
-                    }
-                    else if ('time' === (this.meta.type || this.meta.subtype)) {
-                        try {
-                            let date;
-                            if (typeof (value) === 'number') {
-                                date = new Date(parseInt(value, 10));
-                                if (value < 86400000) {
-                                    date = new Date(date.getTime() + (date.getTimezoneOffset() * 60000));
-                                }
-                            }
-                            else {
-                                date = new Date(Date.parse(new Date().toISOString().replace(/T.*Z/, `T${value}Z`)) + (new Date().getTimezoneOffset() * 60000));
-                            }
-                            this.model = date.toTimeString().split(' ')[0];
-                            if (this.meta.valueType === 'isostring') {
-                                this.value = date.toISOString();
-                            }
-                            else {
-                                date.setFullYear(1970);
-                                date.setMonth(0);
-                                date.setDate(1);
-                                date.setMilliseconds(0);
-                                if (this.meta.valueType === 'string') {
-                                    this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().split('T')[1].substring(0, 8);
-                                }
-                                else {
-                                    this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).getTime();
-                                }
-                            }
-                        }
-                        catch (e) {
-                            console.error('Date parse error', e.message, `"${value}"`, `(${typeof (value)})`);
-                        }
-                    }
-                }
-                else {
-                    delete this.model;
-                    delete this.value;
-                }
-                this.meta.$optional = this.isOptional;
-            },
-            get: () => this.value,
-            enumerable: this.sendToServer,
-            configurable: true
-        });
-        if (typeof (origValue) !== 'undefined') {
-            this.parent[this.meta.name] = origValue;
-        }
-        const d = this.meta.default || this.meta.defaultValue;
-        if (d && typeof (this.model) === 'undefined') {
-            const defaultValue = (typeof (d) === 'string') ? d : (d.id || d.value);
-            if (defaultValue || defaultValue === 0) {
-                if (/^(date|time)/.test(this.meta.type || this.meta.subtype) && typeof (defaultValue) === 'string') {
-                    this.parent[this.meta.name] = relativeTimeBuilder(this.meta.type || this.meta.subtype, defaultValue, this.validations.step);
-                }
-                else {
-                    this.parent[this.meta.name] = defaultValue;
-                }
-            }
-        }
-        if (typeof (this.meta.auto) === 'object') {
-            Object.keys(this.meta.auto || {}).filter(n => ['gt', 'lt'].indexOf(n) !== -1).map(v => this.setupLogicalValidation(v));
-        }
-    }
-    onActivated(ev) {
-        this.input = ev.srcElement;
-        if (!this.dropdown) {
-            this.dropdown = ev.srcElement.parentNode.parentNode;
-        }
-        this.showDropdown();
-    }
-    clear(ev) {
-        delete this.model;
-        this.onModelChange(this.model);
-        if (ev) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            return false;
-        }
-    }
-    onBlur(ev) {
-        let internalControl = false;
-        if (ev.relatedTarget) {
-            if (!this.elementRef.nativeElement.contains(ev.relatedTarget)) {
-                this.dismissDropdown();
-            }
-            else {
-                internalControl = true;
-            }
-        }
-        if (this.keyListenerActive && !internalControl) {
-            this.input.removeEventListener('keydown', this.keydown);
-            setTimeout(() => {
-                if (!this.keyListenerActive) {
-                    document.removeEventListener('click', this.clickout);
-                }
-            }, 400);
-            delete this.keyListenerActive;
-        }
-    }
-    onSuggestionSelect(ev, suggestion) {
-        if (!suggestion) {
-            return;
-        }
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.focus();
-        this.dismissDropdown();
-        this.model = suggestion;
-        this.onModelChange(suggestion);
-    }
-    dismissDropdown(event) {
-        if (event) {
-            this.focus();
-        }
-        if (this.dropdown) {
-            this.dropdown.classList.remove('Vlt-dropdown--expanded');
-        }
-    }
-    ensureDropdownIsVisible() {
-        setTimeout(() => {
-            const holder = this.dropdown.closest('.Vlt-card__content');
-            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);
-    }
-    showDropdown() {
-        if (this.meta.suggestions && this.meta.suggestions.length) {
-            this.dropdown.classList.add('Vlt-dropdown--expanded');
-            this.ensureDropdownIsVisible();
-        }
-        if (!this.keyListenerActive) {
-            this.input.addEventListener('keydown', this.keydown);
-            setTimeout(() => {
-                document.addEventListener('click', this.clickout);
-            }, 200);
-            this.keyListenerActive = true;
-            if (this.parent[this.meta.name]) {
-                for (let suggestionIndex = 0; suggestionIndex < (this.meta.suggestions || []).length; suggestionIndex++) {
-                    if (this.meta.suggestions[suggestionIndex] === this.parent[this.meta.name]) {
-                        this.activeSuggestionIndex = suggestionIndex;
-                    }
-                }
-            }
-        }
-    }
-    autoSetValue(againstTimestamp, v, cfg) {
-        const compareValue = relativeTimeBuilder(this.meta.type, cfg.offset, this.validations.step, againstTimestamp);
-        if (this.model) {
-            const currentValue = new Date(this.model).getTime();
-            let isInvalid;
-            if (v === 'gt') {
-                isInvalid = compareValue > currentValue;
-            }
-            else if (v === 'lt') {
-                isInvalid = currentValue > compareValue;
-            }
-            if (isInvalid) {
-                this.parent[this.meta.name] = compareValue;
-            }
-        }
-        else {
-            this.parent[this.meta.name] = compareValue;
-        }
-    }
-    setupLogicalValidation(v) {
-        const cfg = this.meta.auto[v];
-        if (typeof (cfg.against) === 'string') {
-            let againstValue = this.parent[cfg.against];
-            try {
-                let againstTimestamp = Date.parse(`${againstValue}Z`) + (new Date().getTimezoneOffset() * 60000);
-                if (againstValue) {
-                    this.autoSetValue(againstTimestamp, v, cfg);
-                }
-                this.parentChangeSubject.subscribe((value) => {
-                    if (value && value.hasOwnProperty(cfg.against)) {
-                        againstValue = value[cfg.against];
-                        if (againstValue) {
-                            againstTimestamp = Date.parse(`${againstValue}Z`) + (new Date().getTimezoneOffset() * 60000);
-                            this.autoSetValue(againstTimestamp, v, cfg);
-                        }
-                    }
-                });
-            }
-            catch (e) { }
-        }
-    }
-}
-FieldDatetime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldDatetime, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FieldDatetime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldDatetime, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{model}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'has-value': f.value, active: keyListenerActive }\">\n  <div class=\"Vlt-input\">\n    <label class='wrapper'>\n      <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]='readonly' [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"type\" [placeholder]=\"placeholder\" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model' class=\"Vlt-composite__append--icon\" (click)='clear()'>\n        <div class=\"Vlt-composite__icon\">\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n        </div>\n      </div>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n    <span *ngIf=\"f.errors.min\">Must be later than {{validations.min}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.max\">Must be no later than {{validations}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big.Vlt-form__element--error input.main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{background:var(--vgip-meta-input-bg-color);border-color:#f25a6b;box-shadow:none}@-moz-document url-prefix(){.Vlt-composite__append.right-actions{right:10px!important}}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}@media screen and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.Vlt-composite__append.right-actions{right:53px}}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:#2c2d30}:host-context ::ng-deep input::-webkit-calendar-picker-indicator{height:48px;width:51px;margin-top:-15px;margin-right:-15px;padding:0 2px 0 0;cursor:pointer;color:transparent;background-origin:content-box;background-size:initial;background-repeat:no-repeat;background-position:center;opacity:1;visibility:visible;background-image:var(--vgip-meta-date-icon)}:host-context ::ng-deep input::-webkit-calendar-picker-indicator:hover{background-color:var(--vgip-meta-input-action-hover-bg-color)}:host-context ::ng-deep input[type=time]::-webkit-calendar-picker-indicator{background-image:var(--vgip-meta-time-icon)}:host-context ::ng-deep input[readonly]::-webkit-calendar-picker-indicator{visibility:visible}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button{opacity:0;pointer-events:none}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldDatetime, decorators: [{
-            type: Component,
-            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n  <div class='vgip-meta-field-value __gu'>{{model}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'has-value': f.value, active: keyListenerActive }\">\n  <div class=\"Vlt-input\">\n    <label class='wrapper'>\n      <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]='readonly' [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"type\" [placeholder]=\"placeholder\" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model' class=\"Vlt-composite__append--icon\" (click)='clear()'>\n        <div class=\"Vlt-composite__icon\">\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n        </div>\n      </div>\n    </div>\n  </div>\n  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n    <span *ngIf=\"f.errors.required\">Required.&nbsp;</span>\n    <span *ngIf=\"f.errors.min\">Must be later than {{validations.min}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.max\">Must be no later than {{validations}}.&nbsp;</span>\n    <span *ngIf=\"f.errors.custom\">{{f.errors.custom}}&nbsp;</span>\n  </small>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big.Vlt-form__element--error input.main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{background:var(--vgip-meta-input-bg-color);border-color:#f25a6b;box-shadow:none}@-moz-document url-prefix(){.Vlt-composite__append.right-actions{right:10px!important}}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}@media screen and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.Vlt-composite__append.right-actions{right:53px}}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:#2c2d30}:host-context ::ng-deep input::-webkit-calendar-picker-indicator{height:48px;width:51px;margin-top:-15px;margin-right:-15px;padding:0 2px 0 0;cursor:pointer;color:transparent;background-origin:content-box;background-size:initial;background-repeat:no-repeat;background-position:center;opacity:1;visibility:visible;background-image:var(--vgip-meta-date-icon)}:host-context ::ng-deep input::-webkit-calendar-picker-indicator:hover{background-color:var(--vgip-meta-input-action-hover-bg-color)}:host-context ::ng-deep input[type=time]::-webkit-calendar-picker-indicator{background-image:var(--vgip-meta-time-icon)}:host-context ::ng-deep input[readonly]::-webkit-calendar-picker-indicator{visibility:visible}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button{opacity:0;pointer-events:none}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button{opacity:0;pointer-events:none}\n"] }]
-        }] });
-
-export { FieldDatetime };
-//# sourceMappingURL=vgip-meta-ui-index-2b20afc8.mjs.map

package/fesm2020/vgip-meta-ui-index-476b6cb7.mjs

@@ -1,24 +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 i1 from '@angular/common';
-import 'rxjs';
-import 'rxjs/operators';
-
-/*
- * @Author: Alexander.Vangelov@vonage.com
- * @Date: 2019-09-19 17:35:19
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2019-11-15 13:04:01
- */
-class FieldUnknown extends FieldAbstract {
-}
-FieldUnknown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldUnknown, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FieldUnknown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FieldUnknown, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"Vlt-form__element Vlt-form__element--big\">\n  <div class=\"Vlt-input\">\n    <input class='main model' type=\"text\" placeholder=\"\" value=\"Unknown field type '{{meta.type}}'.\" disabled/>\n    <label class=\"Vlt-label Vlt-truncate\" style='padding-right: 20px;'>{{meta.label || meta.name}}</label>\n  </div>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FieldUnknown, decorators: [{
-            type: Component,
-            args: [{ template: "<div class=\"Vlt-form__element Vlt-form__element--big\">\n  <div class=\"Vlt-input\">\n    <input class='main model' type=\"text\" placeholder=\"\" value=\"Unknown field type '{{meta.type}}'.\" disabled/>\n    <label class=\"Vlt-label Vlt-truncate\" style='padding-right: 20px;'>{{meta.label || meta.name}}</label>\n  </div>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>" }]
-        }] });
-
-export { FieldUnknown };
-//# sourceMappingURL=vgip-meta-ui-index-476b6cb7.mjs.map

package/fesm2020/vgip-meta-ui-index-476b6cb7.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"vgip-meta-ui-index-476b6cb7.mjs","sources":["../../../projects/meta-ui/src/lib/fieldUnknown/index.ts","../../../projects/meta-ui/src/lib/fieldUnknown/view.html"],"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-15 13:04:01\n */\n\nimport { Component, Input, OnInit } from '@angular/core';\nimport { FieldAbstract } from '../fieldAbstract';\n\n@Component({\n  templateUrl: './view.html'\n})\nexport class FieldUnknown extends FieldAbstract {}\n","<div class=\"Vlt-form__element Vlt-form__element--big\">\n  <div class=\"Vlt-input\">\n    <input class='main model' type=\"text\" placeholder=\"\" value=\"Unknown field type '{{meta.type}}'.\" disabled/>\n    <label class=\"Vlt-label Vlt-truncate\" style='padding-right: 20px;'>{{meta.label || meta.name}}</label>\n  </div>\n  <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>"],"names":[],"mappings":";;;;;;;AAAA;;;;;AAKG;AAQG,MAAO,YAAa,SAAQ,aAAa,CAAA;;yGAAlC,YAAY,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAZ,YAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,2ECbzB,kaAMM,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDOO,YAAY,EAAA,UAAA,EAAA,CAAA;kBAHxB,SAAS;;;;;;"}