@vgip/meta-ui 1.5.0 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3064,9 +3064,11 @@ class FieldSelect extends FieldAbstract {
|
|
|
3064
3064
|
break;
|
|
3065
3065
|
}
|
|
3066
3066
|
case 'Backspace': {
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3067
|
+
if (!this.dropdown.classList.contains('Vlt-dropdown--expanded')) {
|
|
3068
|
+
event.preventDefault();
|
|
3069
|
+
event.stopPropagation();
|
|
3070
|
+
this.clear();
|
|
3071
|
+
}
|
|
3070
3072
|
break;
|
|
3071
3073
|
}
|
|
3072
3074
|
}
|
|
@@ -3225,6 +3227,7 @@ class FieldSelect extends FieldAbstract {
|
|
|
3225
3227
|
this.input = ev.srcElement;
|
|
3226
3228
|
if (!this.dropdown) {
|
|
3227
3229
|
this.dropdown = ev.srcElement.parentNode.parentNode.parentNode;
|
|
3230
|
+
this.searchInput = this.dropdown.querySelector('.vgip-search_input');
|
|
3228
3231
|
}
|
|
3229
3232
|
this.showDropdown();
|
|
3230
3233
|
}
|
|
@@ -3243,6 +3246,9 @@ class FieldSelect extends FieldAbstract {
|
|
|
3243
3246
|
}
|
|
3244
3247
|
if (this.keyListenerActive && !internalControl) {
|
|
3245
3248
|
this.input.removeEventListener('keydown', this.keydown);
|
|
3249
|
+
if (this.searchInput) {
|
|
3250
|
+
this.searchInput.removeEventListener('keydown', this.keydown);
|
|
3251
|
+
}
|
|
3246
3252
|
setTimeout(() => {
|
|
3247
3253
|
if (!this.keyListenerActive) {
|
|
3248
3254
|
document.removeEventListener('click', this.clickout);
|
|
@@ -3321,6 +3327,10 @@ class FieldSelect extends FieldAbstract {
|
|
|
3321
3327
|
showDropdown() {
|
|
3322
3328
|
this.dropdown.classList.add('Vlt-dropdown--expanded');
|
|
3323
3329
|
if (!this.keyListenerActive) {
|
|
3330
|
+
if (this.searchInput) {
|
|
3331
|
+
this.searchInput.focus(); // Focus directly on search input first visit
|
|
3332
|
+
this.searchInput.addEventListener('keydown', this.keydown);
|
|
3333
|
+
}
|
|
3324
3334
|
this.input.addEventListener('keydown', this.keydown);
|
|
3325
3335
|
setTimeout(() => {
|
|
3326
3336
|
document.addEventListener('click', this.clickout);
|
|
@@ -3346,14 +3356,14 @@ class FieldSelect extends FieldAbstract {
|
|
|
3346
3356
|
delete this.activeSuggestionIndex;
|
|
3347
3357
|
}
|
|
3348
3358
|
onSearchChange() {
|
|
3349
|
-
const search = new RegExp(this.
|
|
3350
|
-
if (this.
|
|
3359
|
+
const search = new RegExp(this.searchInputText, 'gi');
|
|
3360
|
+
if (this.searchInputText === '') {
|
|
3351
3361
|
this.filteredOptions = [...this.optionsBackup];
|
|
3352
3362
|
}
|
|
3353
3363
|
this.filteredOptions = this.optionsBackup.filter(option => option.label.match(search));
|
|
3354
3364
|
}
|
|
3355
3365
|
clearSearchField() {
|
|
3356
|
-
this.
|
|
3366
|
+
this.searchInputText = '';
|
|
3357
3367
|
this.onSearchChange();
|
|
3358
3368
|
}
|
|
3359
3369
|
ensureDropdownIsVisible() {
|
|
@@ -3437,10 +3447,10 @@ class FieldSelect extends FieldAbstract {
|
|
|
3437
3447
|
}
|
|
3438
3448
|
}
|
|
3439
3449
|
FieldSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldSelect, deps: [{ token: i0.ComponentFactoryResolver }, { token: MetaReferenceService }, { token: MetaResourceService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3440
|
-
FieldSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", 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'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{model.label || model.id || model}}\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)]=\"searchInput\" placeholder=\"Search\" (input)=\"onSearchChange()\" [ngModelOptions]=\"{standalone: true}\">\n </div>\n <div class=\"Vlt-composite__append--icon\"\n style=\"top: 2px;\" (click)=\"clearSearchField()\" [hidden]=\"searchInput === ''\">\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. </span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </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: i4.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: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.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 }] });
|
|
3450
|
+
FieldSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", 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'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{model.label || model.id || model}}\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. </span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </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: i4.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: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.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 }] });
|
|
3441
3451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FieldSelect, decorators: [{
|
|
3442
3452
|
type: Component,
|
|
3443
|
-
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'>\n {{model.label || model.id || model}}\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)]=\"searchInput\" placeholder=\"Search\" (input)=\"onSearchChange()\" [ngModelOptions]=\"{standalone: true}\">\n </div>\n <div class=\"Vlt-composite__append--icon\"\n style=\"top: 2px;\" (click)=\"clearSearchField()\" [hidden]=\"searchInput === ''\">\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. </span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </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"] }]
|
|
3453
|
+
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'>\n {{model.label || model.id || model}}\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. </span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </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"] }]
|
|
3444
3454
|
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: MetaReferenceService }, { type: MetaResourceService }]; } });
|
|
3445
3455
|
//// FIELD REFERENCE
|
|
3446
3456
|
class FieldReference extends FieldAbstract {
|