@vgip/meta-ui 2.3.1 → 2.3.2

package/fesm2022/vgip-meta-ui.mjs

@@ -3401,11 +3401,11 @@ class FieldInput extends FieldAbstract {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldInput, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldInput, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>\n      @if (isPhoneNumber) {\n        <a href='#' (click)=\"click2dial($event)\" class=\"Vlt-text-link\" aria-label='Dial'>\n          <svg class=\"Vlt-icon Vlt-icon--smaller\" style=\"margin-top: -3px;\">\n            <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-phone-full\" />\n          </svg>\n          {{model}}\n        </a>\n      } @else {\n        {{model}}\n      }\n    </div>\n  </div>\n}\n@if (!preview) {\n  <div 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    @if (multiple) {\n      <div class='items-container'>\n        @if (model) {\n          <div class='badges-container keep-focus' (click)='focus()'> <!-- eslint-disable-line -->\n            @for (item of model; track item) {\n              <div class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\">\n                {{item}}\n                <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button> <!-- eslint-disable-line @angular-eslint/template/elements-content -->\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    <div class=\"Vlt-input Vlt-dropdown\" style='display: block;' [ngClass]=\"{'vgip-disable': disabled}\">\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' : (logicalSubtype || meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        @if (multiple) {\n          <input 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]=\"logicalSubtype || meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        }\n        <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n          {{meta.label || meta.name}}\n          @if (validations.required) {\n            <span class='Vlt-red'>*</span>\n          }\n          &nbsp;\n          @if (model && multiple) {\n            <span class='Vlt-black'>({{model.length}})</span>\n          }\n        </label>\n      </label>\n      <div class='Vlt-composite__append right-actions'>\n        @if (model && showClear) {\n          <a href='#' 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          </a>\n        }\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    @if (suggestions.length) {\n      <div 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        @if (dropdown) {\n          <div class=\"Vlt-dropdown__scroll\">\n            @for (suggestion of suggestions; track suggestion; let i = $index) {\n              <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n                @if (multiple) {\n                  <div 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                }\n                @if (!multiple) {\n                  <div style='padding: 12px 20px;'>\n                    {{suggestion.label || suggestion}}\n                  </div>\n                }\n              </a>\n            }\n          </div>\n        }\n        @if (!multiple) {\n          <div class=\"Vlt-dropdown__block\"></div>\n        }\n        @if (multiple) {\n          <div 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        }\n      </div>\n    </div>\n  }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))) {\n  <small class=\"Vlt-form__element__error\">\n    @if (f.errors.required) {\n      <span>Required.&nbsp;</span>\n    }\n    @if (f.errors.minlength) {\n      <span>Must be longer than {{validations.minlength}} characters.&nbsp;</span>\n    }\n    @if (f.errors.maxlength) {\n      <span>Must be lest than {{validations.maxlength}} characters.&nbsp;</span>\n    }\n    @if (f.errors.pattern) {\n      <span>{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}.&nbsp;</span>\n    }\n    @if (f.errors.custom) {\n      <span>{{f.errors.custom}}&nbsp;</span>\n    }\n  </small>\n}\n@if (meta.hint) {\n  <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\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:#2c2d300d}.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)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldInput, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>\n      @if (isPhoneNumber) {\n        <a href='#' (click)=\"click2dial($event)\" class=\"Vlt-text-link\" aria-label='Dial'>\n          <svg class=\"Vlt-icon Vlt-icon--smaller\" style=\"margin-top: -3px;\">\n            <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-phone-full\" />\n          </svg>\n          {{model}}\n        </a>\n      } @else {\n        {{model}}\n      }\n    </div>\n  </div>\n}\n@if (!preview) {\n  <div 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    @if (multiple) {\n      <div class='items-container'>\n        @if (model) {\n          <div class='badges-container keep-focus' (click)='focus()'> <!-- eslint-disable-line -->\n            @for (item of model; track item) {\n              <div class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\">\n                {{item}}\n                <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button> <!-- eslint-disable-line @angular-eslint/template/elements-content -->\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    <div class=\"Vlt-input Vlt-dropdown\" style='display: block;' [ngClass]=\"{'vgip-disable': disabled}\">\n      <label class='wrapper'>\n        <input [attr.title]='model' 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' : (logicalSubtype || meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        @if (multiple) {\n          <input 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]=\"logicalSubtype || meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        }\n        <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n          {{meta.label || meta.name}}\n          @if (validations.required) {\n            <span class='Vlt-red'>*</span>\n          }\n          &nbsp;\n          @if (model && multiple) {\n            <span class='Vlt-black'>({{model.length}})</span>\n          }\n        </label>\n      </label>\n      <div class='Vlt-composite__append right-actions'>\n        @if (model && showClear) {\n          <a href='#' 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          </a>\n        }\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    @if (suggestions.length) {\n      <div 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        @if (dropdown) {\n          <div class=\"Vlt-dropdown__scroll\">\n            @for (suggestion of suggestions; track suggestion; let i = $index) {\n              <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link\" style='padding: 0;'\n              [attr.title]=\"suggestion.label || suggestion\">\n                @if (multiple) {\n                  <div 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                }\n                @if (!multiple) {\n                  <div style='padding: 12px 20px;text-overflow: ellipsis;overflow: hidden;'>\n                    {{suggestion.label || suggestion}}\n                  </div>\n                }\n              </a>\n            }\n          </div>\n        }\n        @if (!multiple) {\n          <div class=\"Vlt-dropdown__block\"></div>\n        }\n        @if (multiple) {\n          <div 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        }\n      </div>\n    </div>\n  }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))) {\n  <small class=\"Vlt-form__element__error\">\n    @if (f.errors.required) {\n      <span>Required.&nbsp;</span>\n    }\n    @if (f.errors.minlength) {\n      <span>Must be longer than {{validations.minlength}} characters.&nbsp;</span>\n    }\n    @if (f.errors.maxlength) {\n      <span>Must be lest than {{validations.maxlength}} characters.&nbsp;</span>\n    }\n    @if (f.errors.pattern) {\n      <span>{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}.&nbsp;</span>\n    }\n    @if (f.errors.custom) {\n      <span>{{f.errors.custom}}&nbsp;</span>\n    }\n  </small>\n}\n@if (meta.hint) {\n  <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\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:#2c2d300d}.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)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "21.2.1", ngImport: i0, type: FieldInput, decorators: [{
             type: Component,
-            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>\n      @if (isPhoneNumber) {\n        <a href='#' (click)=\"click2dial($event)\" class=\"Vlt-text-link\" aria-label='Dial'>\n          <svg class=\"Vlt-icon Vlt-icon--smaller\" style=\"margin-top: -3px;\">\n            <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-phone-full\" />\n          </svg>\n          {{model}}\n        </a>\n      } @else {\n        {{model}}\n      }\n    </div>\n  </div>\n}\n@if (!preview) {\n  <div 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    @if (multiple) {\n      <div class='items-container'>\n        @if (model) {\n          <div class='badges-container keep-focus' (click)='focus()'> <!-- eslint-disable-line -->\n            @for (item of model; track item) {\n              <div class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\">\n                {{item}}\n                <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button> <!-- eslint-disable-line @angular-eslint/template/elements-content -->\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    <div class=\"Vlt-input Vlt-dropdown\" style='display: block;' [ngClass]=\"{'vgip-disable': disabled}\">\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' : (logicalSubtype || meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        @if (multiple) {\n          <input 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]=\"logicalSubtype || meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        }\n        <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n          {{meta.label || meta.name}}\n          @if (validations.required) {\n            <span class='Vlt-red'>*</span>\n          }\n          &nbsp;\n          @if (model && multiple) {\n            <span class='Vlt-black'>({{model.length}})</span>\n          }\n        </label>\n      </label>\n      <div class='Vlt-composite__append right-actions'>\n        @if (model && showClear) {\n          <a href='#' 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          </a>\n        }\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    @if (suggestions.length) {\n      <div 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        @if (dropdown) {\n          <div class=\"Vlt-dropdown__scroll\">\n            @for (suggestion of suggestions; track suggestion; let i = $index) {\n              <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n                @if (multiple) {\n                  <div 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                }\n                @if (!multiple) {\n                  <div style='padding: 12px 20px;'>\n                    {{suggestion.label || suggestion}}\n                  </div>\n                }\n              </a>\n            }\n          </div>\n        }\n        @if (!multiple) {\n          <div class=\"Vlt-dropdown__block\"></div>\n        }\n        @if (multiple) {\n          <div 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        }\n      </div>\n    </div>\n  }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))) {\n  <small class=\"Vlt-form__element__error\">\n    @if (f.errors.required) {\n      <span>Required.&nbsp;</span>\n    }\n    @if (f.errors.minlength) {\n      <span>Must be longer than {{validations.minlength}} characters.&nbsp;</span>\n    }\n    @if (f.errors.maxlength) {\n      <span>Must be lest than {{validations.maxlength}} characters.&nbsp;</span>\n    }\n    @if (f.errors.pattern) {\n      <span>{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}.&nbsp;</span>\n    }\n    @if (f.errors.custom) {\n      <span>{{f.errors.custom}}&nbsp;</span>\n    }\n  </small>\n}\n@if (meta.hint) {\n  <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\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:#2c2d300d}.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)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}\n"] }]
+            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>\n      @if (isPhoneNumber) {\n        <a href='#' (click)=\"click2dial($event)\" class=\"Vlt-text-link\" aria-label='Dial'>\n          <svg class=\"Vlt-icon Vlt-icon--smaller\" style=\"margin-top: -3px;\">\n            <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-phone-full\" />\n          </svg>\n          {{model}}\n        </a>\n      } @else {\n        {{model}}\n      }\n    </div>\n  </div>\n}\n@if (!preview) {\n  <div 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    @if (multiple) {\n      <div class='items-container'>\n        @if (model) {\n          <div class='badges-container keep-focus' (click)='focus()'> <!-- eslint-disable-line -->\n            @for (item of model; track item) {\n              <div class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\">\n                {{item}}\n                <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button> <!-- eslint-disable-line @angular-eslint/template/elements-content -->\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    <div class=\"Vlt-input Vlt-dropdown\" style='display: block;' [ngClass]=\"{'vgip-disable': disabled}\">\n      <label class='wrapper'>\n        <input [attr.title]='model' 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' : (logicalSubtype || meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        @if (multiple) {\n          <input 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]=\"logicalSubtype || meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n        }\n        <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n          {{meta.label || meta.name}}\n          @if (validations.required) {\n            <span class='Vlt-red'>*</span>\n          }\n          &nbsp;\n          @if (model && multiple) {\n            <span class='Vlt-black'>({{model.length}})</span>\n          }\n        </label>\n      </label>\n      <div class='Vlt-composite__append right-actions'>\n        @if (model && showClear) {\n          <a href='#' 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          </a>\n        }\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    @if (suggestions.length) {\n      <div 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        @if (dropdown) {\n          <div class=\"Vlt-dropdown__scroll\">\n            @for (suggestion of suggestions; track suggestion; let i = $index) {\n              <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link\" style='padding: 0;'\n              [attr.title]=\"suggestion.label || suggestion\">\n                @if (multiple) {\n                  <div 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                }\n                @if (!multiple) {\n                  <div style='padding: 12px 20px;text-overflow: ellipsis;overflow: hidden;'>\n                    {{suggestion.label || suggestion}}\n                  </div>\n                }\n              </a>\n            }\n          </div>\n        }\n        @if (!multiple) {\n          <div class=\"Vlt-dropdown__block\"></div>\n        }\n        @if (multiple) {\n          <div 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        }\n      </div>\n    </div>\n  }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))) {\n  <small class=\"Vlt-form__element__error\">\n    @if (f.errors.required) {\n      <span>Required.&nbsp;</span>\n    }\n    @if (f.errors.minlength) {\n      <span>Must be longer than {{validations.minlength}} characters.&nbsp;</span>\n    }\n    @if (f.errors.maxlength) {\n      <span>Must be lest than {{validations.maxlength}} characters.&nbsp;</span>\n    }\n    @if (f.errors.pattern) {\n      <span>{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}.&nbsp;</span>\n    }\n    @if (f.errors.custom) {\n      <span>{{f.errors.custom}}&nbsp;</span>\n    }\n  </small>\n}\n@if (meta.hint) {\n  <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\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:#2c2d300d}.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)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: MetaContextService }] });
 
 var index$a = /*#__PURE__*/Object.freeze({
@@ -3479,11 +3479,11 @@ class FieldText extends FieldAbstract {
         this.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldText, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldText, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n    <label class='wrapper'>\n      <div class=\"Vlt-textarea\">\n        <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n        <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n        {{meta.label || meta.name}}\n        @if (validations.required) {\n          <span class='Vlt-red'>*</span>\n        }\n      </label>\n    </div>\n  </label>\n  @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n    <small class=\"Vlt-form__element__error\">\n      @if (f.errors.required) {\n        <span>Required</span>\n      }\n      @if (f.errors.maxlength) {\n        <span>Length can not exceed {{validations.maxlength}} characters</span>\n      }\n      @if (f.errors.custom) {\n        <span>{{f.errors.custom}}&nbsp;</span>\n      }\n    </small>\n  }\n  @if (meta.helpText) {\n    <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n  }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:var(--vgip-meta-input-bg-color)}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldText, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n    <label class='wrapper'>\n      <div class=\"Vlt-textarea\">\n        <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n        <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n        {{meta.label || meta.name}}\n        @if (validations.required) {\n          <span class='Vlt-red'>*</span>\n        }\n      </label>\n    </div>\n  </label>\n  @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n    <small class=\"Vlt-form__element__error\">\n      @if (f.errors.required) {\n        <span>Required</span>\n      }\n      @if (f.errors.maxlength) {\n        <span>Length can not exceed {{validations.maxlength}} characters</span>\n      }\n      @if (f.errors.custom) {\n        <span>{{f.errors.custom}}&nbsp;</span>\n      }\n    </small>\n  }\n  @if (meta.helpText) {\n    <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n  }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:transparent}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldText, decorators: [{
             type: Component,
-            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n    <label class='wrapper'>\n      <div class=\"Vlt-textarea\">\n        <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n        <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n        {{meta.label || meta.name}}\n        @if (validations.required) {\n          <span class='Vlt-red'>*</span>\n        }\n      </label>\n    </div>\n  </label>\n  @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n    <small class=\"Vlt-form__element__error\">\n      @if (f.errors.required) {\n        <span>Required</span>\n      }\n      @if (f.errors.maxlength) {\n        <span>Length can not exceed {{validations.maxlength}} characters</span>\n      }\n      @if (f.errors.custom) {\n        <span>{{f.errors.custom}}&nbsp;</span>\n      }\n    </small>\n  }\n  @if (meta.helpText) {\n    <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n  }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:var(--vgip-meta-input-bg-color)}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"] }]
+            args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n  <div class='vgip-meta-field-preview'>\n    <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n    <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n  </div>\n}\n@if (!preview) {\n  <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n    <label class='wrapper'>\n      <div class=\"Vlt-textarea\">\n        <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n        <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n        <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n          <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n        </div>\n      </div> -->\n      <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n        {{meta.label || meta.name}}\n        @if (validations.required) {\n          <span class='Vlt-red'>*</span>\n        }\n      </label>\n    </div>\n  </label>\n  @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n    <small class=\"Vlt-form__element__error\">\n      @if (f.errors.required) {\n        <span>Required</span>\n      }\n      @if (f.errors.maxlength) {\n        <span>Length can not exceed {{validations.maxlength}} characters</span>\n      }\n      @if (f.errors.custom) {\n        <span>{{f.errors.custom}}&nbsp;</span>\n      }\n    </small>\n  }\n  @if (meta.helpText) {\n    <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n  }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:transparent}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"] }]
         }], ctorParameters: () => [{ type: MetaContextService }] });
 
 var index$9 = /*#__PURE__*/Object.freeze({