@vgip/meta-ui 1.5.6 → 1.5.7

package/fesm2015/vgip-meta-ui-index-f026e8e5.mjs

@@ -0,0 +1,71 @@
+import * as i0 from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { F as FieldAbstract } from './vgip-meta-ui-fieldAbstract-2d0882f1.mjs';
+import * as i1 from '@angular/common';
+import { M as MetaField } from './vgip-meta-ui-index-6dcd556a.mjs';
+import 'rxjs';
+import 'rxjs/operators';
+import 'tslib';
+
+class FieldComposite extends FieldAbstract {
+    get isRow() {
+        return this.meta.subtype !== 'column';
+    }
+    get fields() {
+        return (this.meta.fields || []).map((f) => {
+            if (f.type === 'textarea') { // no textareas inside composite (use string)
+                delete f.type;
+            }
+            return f;
+        });
+    }
+    ngOnInit() {
+        // super.ngOnInit()
+        let nestedFieldsRegex;
+        if (this.meta.name) {
+            this.value = this.parent[this.meta.name] || {};
+            nestedFieldsRegex = new RegExp(`^${this.meta.name}\\.(.*)`);
+            Object.defineProperty(this.parent, this.meta.name, {
+                set: (value) => {
+                    if (value) {
+                        for (const v of Object.keys(value)) {
+                            this.value[v] = value[v];
+                        }
+                    }
+                },
+                get: () => {
+                    if (JSON.stringify(this.value) !== '{}') {
+                        return this.value;
+                    }
+                },
+                enumerable: this.sendToServer,
+                configurable: true
+            });
+            for (const f of this.meta.fields) {
+                if (this.isRow) {
+                    if (f.type === 'text') {
+                        f.type = 'string';
+                    }
+                }
+                const nestedFieldMatch = f.name.match(nestedFieldsRegex);
+                if (nestedFieldMatch) {
+                    f.name = nestedFieldMatch[1]; // for VGIS V2 backward compatibility normalize name with dotted syntax
+                }
+            }
+        }
+        else {
+            this.value = this.parent;
+        }
+    }
+}
+FieldComposite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldComposite, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FieldComposite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FieldComposite, selector: "ng-component", inputs: { meta: "meta" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\">\n  <ng-container *ngFor='let field of fields'>\n    <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngIf=\"!field.$invisible\">\n      <vgip-meta-field *ngIf='!meta.$invisible' [ngClass]=\"{ shown: !field.$invisible}\" [index]='index' [meta]='field'\n        [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview'\n        theme='inherit'></vgip-meta-field>\n    </div>\n  </ng-container>\n</div>", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\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: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldComposite, decorators: [{
+            type: Component,
+            args: [{ template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\">\n  <ng-container *ngFor='let field of fields'>\n    <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngIf=\"!field.$invisible\">\n      <vgip-meta-field *ngIf='!meta.$invisible' [ngClass]=\"{ shown: !field.$invisible}\" [index]='index' [meta]='field'\n        [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview'\n        theme='inherit'></vgip-meta-field>\n    </div>\n  </ng-container>\n</div>", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"] }]
+        }], propDecorators: { meta: [{
+                type: Input
+            }] } });
+
+export { FieldComposite };
+//# sourceMappingURL=vgip-meta-ui-index-f026e8e5.mjs.map

package/fesm2015/vgip-meta-ui-index-f026e8e5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vgip-meta-ui-index-f026e8e5.mjs","sources":["../../../projects/meta-ui/src/lib/fieldComposite/index.ts","../../../projects/meta-ui/src/lib/fieldComposite/view.html"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { FieldAbstract } from '../fieldAbstract';\n\n@Component({\n  templateUrl: './view.html',\n  styleUrls: ['./style.scss'],\n})\nexport class FieldComposite extends FieldAbstract implements OnInit {\n  @Input() meta: any;\n  value: any;\n\n  get isRow() {\n    return this.meta.subtype !== 'column';\n  }\n\n  get fields() {\n    return (this.meta.fields || []).map((f) => {\n      if (f.type === 'textarea') { // no textareas inside composite (use string)\n        delete f.type;\n      }\n      return f;\n    });\n  }\n\n  ngOnInit() {\n    // super.ngOnInit()\n    let nestedFieldsRegex: RegExp;\n    if (this.meta.name) {\n      this.value = this.parent[this.meta.name] || {};\n      nestedFieldsRegex = new RegExp(`^${this.meta.name}\\\\.(.*)`);\n      Object.defineProperty(this.parent, this.meta.name, {\n        set: (value) => {\n          if (value) {\n            for (const v of Object.keys(value)) {\n              this.value[v] = value[v];\n            }\n          }\n        },\n        get: () => {\n          if (JSON.stringify(this.value) !== '{}') {\n            return this.value;\n          }\n        },\n        enumerable: this.sendToServer,\n        configurable: true\n      });\n      for (const f of this.meta.fields) {\n        if (this.isRow) {\n          if (f.type === 'text') {\n            f.type = 'string';\n          }\n        }\n        const nestedFieldMatch = f.name.match(nestedFieldsRegex);\n        if (nestedFieldMatch) {\n          f.name = nestedFieldMatch[1]; // for VGIS V2 backward compatibility normalize name with dotted syntax\n        }\n      }\n    } else {\n      this.value = this.parent;\n    }\n  }\n\n}\n","<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\">\n  <ng-container *ngFor='let field of fields'>\n    <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\" *ngIf=\"!field.$invisible\">\n      <vgip-meta-field *ngIf='!meta.$invisible' [ngClass]=\"{ shown: !field.$invisible}\" [index]='index' [meta]='field'\n        [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview'\n        theme='inherit'></vgip-meta-field>\n    </div>\n  </ng-container>\n</div>"],"names":["i2.MetaField"],"mappings":"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"}

package/fesm2015/vgip-meta-ui-index-fa0b1b8b.mjs

@@ -0,0 +1,460 @@
+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-2d0882f1.mjs';
+import { t as templateBuilder, M as MetaContextService } from './vgip-meta-ui-index-3488da98.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-725f401c.mjs';
+import 'rxjs';
+import 'rxjs/operators';
+
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:09
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-05-12 17:45:46
+ */
+// import { MetaValidations } from '../common/decorators/metaValidations.decorator';
+class FieldInput extends FieldAbstract {
+    constructor(metaContext) {
+        super();
+        this.metaContext = metaContext;
+        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.subtype || this.meta.type) !== -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.subtype || this.meta.type) !== -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;
+                }
+                default: {
+                    setTimeout(() => {
+                        if (!this.model) {
+                            delete this.activeSuggestionIndex;
+                            delete this.asyncSuggestions;
+                        }
+                        else if (typeof (this.model) === 'string') {
+                            this.asyncSuggestions = (this.meta.suggestions || []).filter((s) => {
+                                const suggestionText = (s.id || s.value || s || '').toLowerCase();
+                                return suggestionText.indexOf(this.model.toLowerCase()) !== -1;
+                            });
+                        }
+                    });
+                }
+            }
+        };
+    }
+    get suggestions() {
+        return this.asyncSuggestions || this.meta.suggestions || [];
+    }
+    ngOnInit() {
+        this.multiple = (this.meta.type === 'multistring') || this.meta.multiple;
+        // console.log('FieldInput init', this.meta.name);
+        this.validationAttributes = ['pattern', 'required', 'minlength', 'maxlength', 'min', 'max', 'step'];
+        if (this.meta.picklist) { // just for test! all metadata should be transformed to v3 protocol
+            this.meta.suggestions = (this.meta.picklist || []).map((s) => s.label);
+        }
+        if (this.meta.type === 'number') {
+            if (this.meta.subtype === 'float' && !this.meta.step) {
+                this.meta.step = '0.01';
+            }
+            this.meta.subtype = 'number';
+        }
+        if (['date', 'time', 'datetime'].indexOf(this.meta.type) !== -1) {
+            this.meta.subtype = this.meta.type;
+            if (this.meta.type === 'datetime') {
+                this.meta.subtype = 'datetime-local';
+            }
+            delete this.multiple; // no multiple support for timestamps
+        }
+        this.showClear = !this.multiple && [
+            '', 'string', 'url', 'email', 'password', 'tel', 'date', 'datetime-local', 'time'
+        ].indexOf(this.meta.subtype || '') !== -1;
+        const origValue = this.parent[this.meta.name];
+        Object.defineProperty(this.parent, this.meta.name, {
+            set: (value) => {
+                if (this.multiple) {
+                    if (typeof (value) !== 'undefined') {
+                        const values = (value instanceof Array) ? value : [value];
+                        this.model = [];
+                        for (let v of values) {
+                            if (!this.model) {
+                                this.model = [];
+                            }
+                            if (typeof (v) === 'object' && v !== null) {
+                                v = v.id || v.value;
+                            }
+                            this.model.push(v);
+                        }
+                        this.value = this.model;
+                    }
+                }
+                else {
+                    if (typeof (value) !== 'undefined'
+                        && !(value === null && ((typeof (this.meta.type) === 'undefined') || ['string', 'number'].indexOf(this.meta.type) !== -1))) {
+                        if (this.meta.type === 'number' && typeof (value) === 'string') {
+                            value = parseInt(value, 10);
+                        }
+                        else if (typeof (value) === 'object' && value !== null) {
+                            value = value.id || value.value;
+                        }
+                        if (['datetime', 'date', 'datetime-local'].indexOf(this.meta.subtype || this.meta.type) !== -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.subtype || this.meta.type)) {
+                                        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.subtype || this.meta.type) {
+                                        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 === 'string') {
+                                    if ((this.meta.subtype || this.meta.type) === 'date') {
+                                        this.value = date.toISOString().split('T')[0];
+                                    }
+                                    else {
+                                        this.value = date.toISOString();
+                                    }
+                                }
+                                else {
+                                    if ((this.meta.subtype || this.meta.type) === '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.subtype || this.meta.type)) {
+                            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];
+                                date.setFullYear(1970);
+                                date.setMonth(0);
+                                date.setDate(1);
+                                date.setMilliseconds(0);
+                                this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).getTime();
+                            }
+                            catch (e) {
+                                console.error('Date parse error', e.message, `"${value}"`, `(${typeof (value)})`);
+                            }
+                        }
+                        else {
+                            if (!value && (typeof (this.prevModel) === 'string') && this.isPersistedParent) {
+                                value = '';
+                            }
+                            this.model = value;
+                            this.value = 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') {
+            if (this.multiple) {
+                this.parent[this.meta.name] = [];
+                if (d.length) {
+                    for (const dv of this.default) { // TODO ???
+                        const defaultValueItem = (typeof (dv) === 'string' || dv === null) ? dv : (dv.id || dv.value);
+                        if (defaultValueItem || defaultValueItem === 0) {
+                            this.parent[this.meta.name].push(defaultValueItem);
+                        }
+                    }
+                }
+            }
+            else {
+                const defaultValue = (typeof (d) === 'string') ? d : (d.id || d.value);
+                if (defaultValue || defaultValue === 0) {
+                    if (/^(date|time)/.test(this.meta.subtype) && typeof (defaultValue) === 'string') {
+                        this.parent[this.meta.name] = relativeTimeBuilder(this.meta.subtype, defaultValue, this.validations.step);
+                    }
+                    else {
+                        if (this.meta.type === 'string' && defaultValue) {
+                            this.parent[this.meta.name] = templateBuilder(this.metaContext, defaultValue);
+                        }
+                        else {
+                            this.parent[this.meta.name] = defaultValue;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    onActivated(ev) {
+        this.input = ev.srcElement;
+        if (!this.dropdown) {
+            this.dropdown = ev.srcElement.parentNode.parentNode;
+        }
+        this.showDropdown();
+    }
+    clear(ev) {
+        delete this.model;
+        delete this.activeSuggestionIndex;
+        delete this.asyncSuggestions;
+        this.onModelChange(this.model);
+        if (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.focus();
+            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;
+        }
+    }
+    onAdd(ev) {
+        console.log('onAdd', this.addText);
+        if (this.addText) {
+            if ((this.model || []).indexOf(this.addText) === -1) {
+                this.onSuggestionSelect(ev, this.addText);
+                if (!this.meta.suggestions) {
+                    this.meta.suggestions = [];
+                }
+                this.meta.suggestions.unshift(this.addText);
+            }
+            else {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.focus();
+            }
+            delete this.addText;
+        }
+    }
+    remove(ev, item) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const optionIndex = this.model.indexOf(item);
+        if (optionIndex !== -1) {
+            this.model.splice(optionIndex, 1);
+            if (!this.model.length) {
+                delete this.model;
+                delete this.value;
+            }
+            this.onModelChange(this.model);
+        }
+    }
+    onSuggestionSelect(ev, suggestion) {
+        if (!suggestion) {
+            return;
+        }
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.focus();
+        let suggestionValue = suggestion.id || suggestion.value || suggestion;
+        if (typeof (suggestionValue) === 'string') {
+            if (/^(date|time)/.test(this.meta.subtype)) {
+                suggestionValue = relativeTimeBuilder(this.meta.subtype, suggestionValue, this.validations.step);
+            }
+            else if (this.meta.type === 'string') {
+                suggestionValue = templateBuilder(this.metaContext, suggestionValue);
+            }
+            else {
+                suggestionValue = suggestion;
+            }
+        }
+        if (this.multiple) {
+            if (!this.model) {
+                this.model = [];
+            }
+            let existingItemIndex = this.model.indexOf(suggestionValue);
+            if (existingItemIndex === -1) {
+                this.model.push(suggestionValue);
+            }
+            else {
+                this.model.splice(existingItemIndex, 1);
+                existingItemIndex = undefined;
+            }
+            this.onModelChange(this.model);
+        }
+        else {
+            this.dismissDropdown();
+            this.model = suggestionValue;
+            this.onModelChange(suggestionValue);
+            this.activeSuggestionIndex = this.suggestions.indexOf(suggestion);
+        }
+    }
+    textToSpeech() { }
+    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');
+            if (el) {
+                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 (typeof (this.activeSuggestionIndex) === 'undefined') {
+            if (this.model && this.suggestions.length) {
+                for (let suggestionIndex = 0; suggestionIndex < this.suggestions.length; suggestionIndex++) {
+                    if (this.model === this.suggestions[suggestionIndex]) {
+                        this.activeSuggestionIndex = suggestionIndex;
+                        return;
+                    }
+                }
+                delete this.activeSuggestionIndex;
+            }
+        }
+    }
+}
+FieldInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldInput, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component });
+FieldInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FieldInput, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n  <div class='vgip-meta-field-label'>{{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), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()'>\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\">\n        {{item}}\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-input Vlt-dropdown\" style='display: block;'>\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]=\"multiple ? 'hidden' : (meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <input *ngIf='multiple' class='main' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]=\"{ standalone: true }\" [type]=\"meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (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>&nbsp;<span class='Vlt-black' *ngIf='model && multiple'>({{model.length}})</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model && showClear' class=\"Vlt-composite__append--icon\" (click)='clear($event)'>\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 *ngIf=\"!meta.subtype || meta.subtype == 'text'\" class=\"Vlt-composite__append Vlt-composite__append--icon\" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>\n      <div *ngIf=\"!meta.type || meta.type === 'string'\" class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n      </div>\n    </div> -->\n    <div *ngIf=\"suggestions.length\" class=\"Vlt-dropdown__panel\">\n      <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions\">\n        <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 13px;'>\n          Suggestions\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\"></div>\n        <div *ngIf='dropdown' class=\"Vlt-dropdown__scroll\">\n          <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n            <div *ngIf='multiple' class=\"Vlt-checkbox\" style='width: 100%;'>\n              <label [title]='suggestion.label || suggestion'>\n                <span class=\"Vlt-checkbox__button\">\n                  <input type=\"checkbox\" [checked]='model && model.indexOf(suggestion) !== -1'/>\n                  <span class=\"Vlt-checkbox__icon\"></span>\n                </span>\n                {{suggestion.label || suggestion}}\n              </label>\n            </div>\n            <div *ngIf='!multiple' style='padding: 12px 20px;'>\n              {{suggestion.label || suggestion}}\n            </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\" style='padding: 8px 16px 16px;'>\n          <button (click)='clear($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\">Clear all</button>\n          <button (click)='dismissDropdown($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\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.minlength\">Must be longer than {{validations.minlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.maxlength\">Must be lest than {{validations.maxlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.pattern\">{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}.&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-input input{padding-right:40px;text-overflow:ellipsis}@media screen and (-webkit-min-device-pixel-ratio: 0){.Vlt-form__element--big .Vlt-input input{line-height:20px}}.Vlt-form__element--big .Vlt-input input:disabled{cursor:not-allowed}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover input,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) input,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container.creatable{margin-right:62px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;max-height:140px;padding:6px 4px 0 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value input{border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error input{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}label.Vlt-truncate{padding-right:42px}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .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}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;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)}\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.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.1.0", ngImport: i0, type: FieldInput, 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'>{{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), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }\">\n  <div *ngIf='multiple' class='items-container'>\n    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()'>\n      <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--app Vlt-badge--large keep-focus\">\n        {{item}}\n        <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button>\n      </div>\n    </div>\n  </div>\n  <div class=\"Vlt-input Vlt-dropdown\" style='display: block;'>\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]=\"multiple ? 'hidden' : (meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n      <input *ngIf='multiple' class='main' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]=\"{ standalone: true }\" [type]=\"meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (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>&nbsp;<span class='Vlt-black' *ngIf='model && multiple'>({{model.length}})</span></label>\n    </label>\n    <div class='Vlt-composite__append right-actions'>\n      <div *ngIf='model && showClear' class=\"Vlt-composite__append--icon\" (click)='clear($event)'>\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 *ngIf=\"!meta.subtype || meta.subtype == 'text'\" class=\"Vlt-composite__append Vlt-composite__append--icon\" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>\n      <div *ngIf=\"!meta.type || meta.type === 'string'\" class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n        <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n      </div>\n    </div> -->\n    <div *ngIf=\"suggestions.length\" class=\"Vlt-dropdown__panel\">\n      <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions\">\n        <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 13px;'>\n          Suggestions\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\"></div>\n        <div *ngIf='dropdown' class=\"Vlt-dropdown__scroll\">\n          <div [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n            <div *ngIf='multiple' class=\"Vlt-checkbox\" style='width: 100%;'>\n              <label [title]='suggestion.label || suggestion'>\n                <span class=\"Vlt-checkbox__button\">\n                  <input type=\"checkbox\" [checked]='model && model.indexOf(suggestion) !== -1'/>\n                  <span class=\"Vlt-checkbox__icon\"></span>\n                </span>\n                {{suggestion.label || suggestion}}\n              </label>\n            </div>\n            <div *ngIf='!multiple' style='padding: 12px 20px;'>\n              {{suggestion.label || suggestion}}\n            </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\" style='padding: 8px 16px 16px;'>\n          <button (click)='clear($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\">Clear all</button>\n          <button (click)='dismissDropdown($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\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.minlength\">Must be longer than {{validations.minlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.maxlength\">Must be lest than {{validations.maxlength}} characters.&nbsp;</span>\n    <span *ngIf=\"f.errors.pattern\">{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}.&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-input input{padding-right:40px;text-overflow:ellipsis}@media screen and (-webkit-min-device-pixel-ratio: 0){.Vlt-form__element--big .Vlt-input input{line-height:20px}}.Vlt-form__element--big .Vlt-input input:disabled{cursor:not-allowed}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover input,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) input,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container.creatable{margin-right:62px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;max-height:140px;padding:6px 4px 0 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value input{border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error input{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}label.Vlt-truncate{padding-right:42px}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .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}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;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)}\n"] }]
+        }], ctorParameters: function () { return [{ type: MetaContextService }]; } });
+
+export { FieldInput };
+//# sourceMappingURL=vgip-meta-ui-index-fa0b1b8b.mjs.map