@netgrif/components/esm2022/lib/data-fields/enumeration-field/enumeration-autocomplete-dynamic-field/enumeration-autocomplete-dynamic-field.component.mjs

Netgrif Application Engine frontend Angular components

import { Component, Inject, Optional } from '@angular/core';
import { AbstractEnumerationAutocompleteDynamicFieldComponent, DATA_FIELD_PORTAL_DATA } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@ngx-translate/core";
import * as i2 from "@angular/common";
import * as i3 from "@ngbracket/ngx-layout";
import * as i4 from "@ngbracket/ngx-layout/extended";
import * as i5 from "@angular/material/autocomplete";
import * as i6 from "@angular/material/core";
import * as i7 from "@angular/material/input";
import * as i8 from "@angular/material/form-field";
import * as i9 from "@angular/material/progress-spinner";
import * as i10 from "@angular/forms";
export class EnumerationAutocompleteDynamicFieldComponent extends AbstractEnumerationAutocompleteDynamicFieldComponent {
    _translate;
    constructor(_translate, dataFieldPortalData) {
        super(_translate, dataFieldPortalData);
        this._translate = _translate;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EnumerationAutocompleteDynamicFieldComponent, deps: [{ token: i1.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EnumerationAutocompleteDynamicFieldComponent, selector: "nc-enumeration-autocomplete-dynamic-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input type=\"text\"\n           aria-label=\"Autocomplete\"\n           matInput\n           #input\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [matAutocomplete]=\"auto\"\n           [required]=\"dataField.behavior.required\"\n           (keyup)=\"change()\">\n    <mat-spinner *ngIf=\"dataField.loading\" matSuffix diameter=\"30\"></mat-spinner>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n\n        <mat-option disabled *ngIf=\"(filteredOptions | async)?.length === 0 && !dataField.loading && dataField.value && dataField.value.length > 0\" fxLayoutAlign=\"center center\">\n            {{ 'dataField.dynamicEnum.noData' | translate }}\n        </mat-option>\n\n        <ng-container *ngIf=\"!dataField.loading\">\n            <mat-option [value]=\"null\">---</mat-option>\n            <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"change()\">\n                {{option.value}}\n            </mat-option>\n        </ng-container>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EnumerationAutocompleteDynamicFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nc-enumeration-autocomplete-dynamic-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input type=\"text\"\n           aria-label=\"Autocomplete\"\n           matInput\n           #input\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [matAutocomplete]=\"auto\"\n           [required]=\"dataField.behavior.required\"\n           (keyup)=\"change()\">\n    <mat-spinner *ngIf=\"dataField.loading\" matSuffix diameter=\"30\"></mat-spinner>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n\n        <mat-option disabled *ngIf=\"(filteredOptions | async)?.length === 0 && !dataField.loading && dataField.value && dataField.value.length > 0\" fxLayoutAlign=\"center center\">\n            {{ 'dataField.dynamicEnum.noData' | translate }}\n        </mat-option>\n\n        <ng-container *ngIf=\"!dataField.loading\">\n            <mat-option [value]=\"null\">---</mat-option>\n            <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"change()\">\n                {{option.value}}\n            </mat-option>\n        </ng-container>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1.TranslateService }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [DATA_FIELD_PORTAL_DATA]
                }] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW51bWVyYXRpb24tYXV0b2NvbXBsZXRlLWR5bmFtaWMtZmllbGQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvZGF0YS1maWVsZHMvZW51bWVyYXRpb24tZmllbGQvZW51bWVyYXRpb24tYXV0b2NvbXBsZXRlLWR5bmFtaWMtZmllbGQvZW51bWVyYXRpb24tYXV0b2NvbXBsZXRlLWR5bmFtaWMtZmllbGQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvZGF0YS1maWVsZHMvZW51bWVyYXRpb24tZmllbGQvZW51bWVyYXRpb24tYXV0b2NvbXBsZXRlLWR5bmFtaWMtZmllbGQvZW51bWVyYXRpb24tYXV0b2NvbXBsZXRlLWR5bmFtaWMtZmllbGQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQzFELE9BQU8sRUFDSCxvREFBb0QsRUFDcEQsc0JBQXNCLEVBR3pCLE1BQU0sMEJBQTBCLENBQUM7Ozs7Ozs7Ozs7OztBQVFsQyxNQUFNLE9BQU8sNENBQTZDLFNBQVEsb0RBQW9EO0lBRTVGO0lBQXRCLFlBQXNCLFVBQTRCLEVBQ00sbUJBQWlFO1FBQ3JILEtBQUssQ0FBQyxVQUFVLEVBQUUsbUJBQW1CLENBQUMsQ0FBQztRQUZyQixlQUFVLEdBQVYsVUFBVSxDQUFrQjtJQUdsRCxDQUFDO3dHQUxRLDRDQUE0QyxrREFHckIsc0JBQXNCOzRGQUg3Qyw0Q0FBNEMsd0dDZHpELHFoREE2QkE7OzRGRGZhLDRDQUE0QztrQkFMeEQsU0FBUzsrQkFDRSwyQ0FBMkM7OzBCQU90QyxRQUFROzswQkFBSSxNQUFNOzJCQUFDLHNCQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbmplY3QsIE9wdGlvbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQWJzdHJhY3RFbnVtZXJhdGlvbkF1dG9jb21wbGV0ZUR5bmFtaWNGaWVsZENvbXBvbmVudCxcbiAgICBEQVRBX0ZJRUxEX1BPUlRBTF9EQVRBLFxuICAgIERhdGFGaWVsZFBvcnRhbERhdGEsXG4gICAgRHluYW1pY0VudW1lcmF0aW9uRmllbGRcbn0gZnJvbSAnQG5ldGdyaWYvY29tcG9uZW50cy1jb3JlJztcbmltcG9ydCB7VHJhbnNsYXRlU2VydmljZX0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25jLWVudW1lcmF0aW9uLWF1dG9jb21wbGV0ZS1keW5hbWljLWZpZWxkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2VudW1lcmF0aW9uLWF1dG9jb21wbGV0ZS1keW5hbWljLWZpZWxkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZW51bWVyYXRpb24tYXV0b2NvbXBsZXRlLWR5bmFtaWMtZmllbGQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBFbnVtZXJhdGlvbkF1dG9jb21wbGV0ZUR5bmFtaWNGaWVsZENvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0RW51bWVyYXRpb25BdXRvY29tcGxldGVEeW5hbWljRmllbGRDb21wb25lbnQge1xuXG4gICAgY29uc3RydWN0b3IocHJvdGVjdGVkIF90cmFuc2xhdGU6IFRyYW5zbGF0ZVNlcnZpY2UsXG4gICAgICAgICAgICAgICAgQE9wdGlvbmFsKCkgQEluamVjdChEQVRBX0ZJRUxEX1BPUlRBTF9EQVRBKSBkYXRhRmllbGRQb3J0YWxEYXRhOiBEYXRhRmllbGRQb3J0YWxEYXRhPER5bmFtaWNFbnVtZXJhdGlvbkZpZWxkPikge1xuICAgICAgICBzdXBlcihfdHJhbnNsYXRlLCBkYXRhRmllbGRQb3J0YWxEYXRhKTtcbiAgICB9XG59XG4iLCI8bWF0LWZvcm0tZmllbGQgW2FwcGVhcmFuY2VdPVwiZGF0YUZpZWxkLm1hdGVyaWFsQXBwZWFyYW5jZVwiIGNsYXNzPVwiZnVsbC13aWR0aFwiIGNvbG9yPVwicHJpbWFyeVwiPlxuICAgIDxtYXQtbGFiZWwgKm5nSWY9XCIhc2hvd0xhcmdlTGF5b3V0LnZhbHVlXCI+e3tkYXRhRmllbGQudGl0bGV9fTwvbWF0LWxhYmVsPlxuICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgIGFyaWEtbGFiZWw9XCJBdXRvY29tcGxldGVcIlxuICAgICAgICAgICBtYXRJbnB1dFxuICAgICAgICAgICAjaW5wdXRcbiAgICAgICAgICAgW3BsYWNlaG9sZGVyXT1cImRhdGFGaWVsZC5wbGFjZWhvbGRlclwiXG4gICAgICAgICAgIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFJlZlwiXG4gICAgICAgICAgIFttYXRBdXRvY29tcGxldGVdPVwiYXV0b1wiXG4gICAgICAgICAgIFtyZXF1aXJlZF09XCJkYXRhRmllbGQuYmVoYXZpb3IucmVxdWlyZWRcIlxuICAgICAgICAgICAoa2V5dXApPVwiY2hhbmdlKClcIj5cbiAgICA8bWF0LXNwaW5uZXIgKm5nSWY9XCJkYXRhRmllbGQubG9hZGluZ1wiIG1hdFN1ZmZpeCBkaWFtZXRlcj1cIjMwXCI+PC9tYXQtc3Bpbm5lcj5cbiAgICA8bWF0LWF1dG9jb21wbGV0ZSBbZGlzcGxheVdpdGhdPVwicmVuZGVyU2VsZWN0aW9uXCIgYXV0b0FjdGl2ZUZpcnN0T3B0aW9uICNhdXRvPVwibWF0QXV0b2NvbXBsZXRlXCI+XG5cbiAgICAgICAgPG1hdC1vcHRpb24gZGlzYWJsZWQgKm5nSWY9XCIoZmlsdGVyZWRPcHRpb25zIHwgYXN5bmMpPy5sZW5ndGggPT09IDAgJiYgIWRhdGFGaWVsZC5sb2FkaW5nICYmIGRhdGFGaWVsZC52YWx1ZSAmJiBkYXRhRmllbGQudmFsdWUubGVuZ3RoID4gMFwiIGZ4TGF5b3V0QWxpZ249XCJjZW50ZXIgY2VudGVyXCI+XG4gICAgICAgICAgICB7eyAnZGF0YUZpZWxkLmR5bmFtaWNFbnVtLm5vRGF0YScgfCB0cmFuc2xhdGUgfX1cbiAgICAgICAgPC9tYXQtb3B0aW9uPlxuXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhZGF0YUZpZWxkLmxvYWRpbmdcIj5cbiAgICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCJudWxsXCI+LS0tPC9tYXQtb3B0aW9uPlxuICAgICAgICAgICAgPG1hdC1vcHRpb24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBmaWx0ZXJlZE9wdGlvbnMgfCBhc3luY1wiIFt2YWx1ZV09XCJvcHRpb24ua2V5XCIgKGNsaWNrKT1cImNoYW5nZSgpXCI+XG4gICAgICAgICAgICAgICAge3tvcHRpb24udmFsdWV9fVxuICAgICAgICAgICAgPC9tYXQtb3B0aW9uPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L21hdC1hdXRvY29tcGxldGU+XG4gICAgPG1hdC1oaW50IFtuZ0NsYXNzXT1cInsnbWF0LWhpbnQtZGlzYWJsZWQnOiBmb3JtQ29udHJvbFJlZi5kaXNhYmxlZH1cIj57e2RhdGFGaWVsZC5kZXNjcmlwdGlvbn19PC9tYXQtaGludD5cbiAgICA8bWF0LWVycm9yICpuZ0lmPVwiZGF0YUZpZWxkLmlzSW52YWxpZChmb3JtQ29udHJvbFJlZilcIj57e2J1aWxkRXJyb3JNZXNzYWdlKCl9fTwvbWF0LWVycm9yPlxuPC9tYXQtZm9ybS1maWVsZD5cblxuIl19