@netgrif/components/esm2022/lib/data-fields/user-list-field/user-list-default-field/user-list-default-field.component.mjs

Netgrif Application Engine frontend Angular components

import { Component, Inject, Optional } from '@angular/core';
import { AbstractUserListDefaultFieldComponent, DATA_FIELD_PORTAL_DATA } from "@netgrif/components-core";
import { MultiUserAssignDialogComponent } from '../../../dialog/multi-user-assign-dialog/multi-user-assign-dialog.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
import * as i2 from "@netgrif/components-core";
import * as i3 from "@ngx-translate/core";
import * as i4 from "@angular/common";
import * as i5 from "@ngbracket/ngx-layout/extended";
import * as i6 from "@angular/material/button";
import * as i7 from "@angular/material/chips";
import * as i8 from "@angular/material/icon";
import * as i9 from "@angular/material/input";
import * as i10 from "@angular/material/form-field";
import * as i11 from "@angular/material/tooltip";
export class UserListDefaultFieldComponent extends AbstractUserListDefaultFieldComponent {
    constructor(dialog, snackbar, translate, dataFieldPortalData) {
        super(dialog, snackbar, translate, dataFieldPortalData);
    }
    selectUser() {
        this.selectAbstractUser(MultiUserAssignDialogComponent);
    }
    deleteUser(userId) {
        this.removeAbstractUser(userId);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserListDefaultFieldComponent, deps: [{ token: i1.MatDialog }, { token: i2.SnackBarService }, { token: i3.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: UserListDefaultFieldComponent, selector: "nc-user-list-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width chip-fix\" [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <button mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <button *ngIf=\"!formControlRef.disabled\" mat-icon-button matPrefix\n            [disabled]='formControlRef.disabled || !dataField.value || dataField?.value?.userValues?.size === 0'\n            color='warn'\n            (click)='removeAll()'\n            [matTooltip]=\"'dataField.user.deleteAll' | translate\">\n        <mat-icon>delete_outline</mat-icon>\n    </button>\n    <mat-chip-grid #chipList aria-label=\"Autocomplete\">\n        <mat-chip-row\n            *ngFor='let user of dataField.value?.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{user.value.fullName}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip-row>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            disabled\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-grid>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserListDefaultFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nc-user-list-default-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width chip-fix\" [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <button mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <button *ngIf=\"!formControlRef.disabled\" mat-icon-button matPrefix\n            [disabled]='formControlRef.disabled || !dataField.value || dataField?.value?.userValues?.size === 0'\n            color='warn'\n            (click)='removeAll()'\n            [matTooltip]=\"'dataField.user.deleteAll' | translate\">\n        <mat-icon>delete_outline</mat-icon>\n    </button>\n    <mat-chip-grid #chipList aria-label=\"Autocomplete\">\n        <mat-chip-row\n            *ngFor='let user of dataField.value?.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{user.value.fullName}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip-row>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            disabled\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-grid>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.SnackBarService }, { type: i3.TranslateService }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [DATA_FIELD_PORTAL_DATA]
                }] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1saXN0LWRlZmF1bHQtZmllbGQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvZGF0YS1maWVsZHMvdXNlci1saXN0LWZpZWxkL3VzZXItbGlzdC1kZWZhdWx0LWZpZWxkL3VzZXItbGlzdC1kZWZhdWx0LWZpZWxkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25ldGdyaWYtY29tcG9uZW50cy9zcmMvbGliL2RhdGEtZmllbGRzL3VzZXItbGlzdC1maWVsZC91c2VyLWxpc3QtZGVmYXVsdC1maWVsZC91c2VyLWxpc3QtZGVmYXVsdC1maWVsZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDMUQsT0FBTyxFQUNILHFDQUFxQyxFQUNyQyxzQkFBc0IsRUFJekIsTUFBTSwwQkFBMEIsQ0FBQztBQUVsQyxPQUFPLEVBQ0gsOEJBQThCLEVBQ2pDLE1BQU0sNkVBQTZFLENBQUM7Ozs7Ozs7Ozs7Ozs7QUFRckYsTUFBTSxPQUFPLDZCQUE4QixTQUFRLHFDQUFxQztJQUVwRixZQUFZLE1BQWlCLEVBQ2pCLFFBQXlCLEVBQ3pCLFNBQTJCLEVBQ2lCLG1CQUF1RDtRQUMzRyxLQUFLLENBQUMsTUFBTSxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsbUJBQW1CLENBQUMsQ0FBQztJQUM1RCxDQUFDO0lBRU0sVUFBVTtRQUNiLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyw4QkFBOEIsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFTSxVQUFVLENBQUMsTUFBYztRQUM1QixJQUFJLENBQUMsa0JBQWtCLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDcEMsQ0FBQzt3R0FmUSw2QkFBNkIsMEdBS04sc0JBQXNCOzRGQUw3Qyw2QkFBNkIseUZDbkIxQyw4K0RBcUNBOzs0RkRsQmEsNkJBQTZCO2tCQUx6QyxTQUFTOytCQUNFLDRCQUE0Qjs7MEJBU3ZCLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEluamVjdCwgT3B0aW9uYWx9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBBYnN0cmFjdFVzZXJMaXN0RGVmYXVsdEZpZWxkQ29tcG9uZW50LFxuICAgIERBVEFfRklFTERfUE9SVEFMX0RBVEEsXG4gICAgRGF0YUZpZWxkUG9ydGFsRGF0YSxcbiAgICBTbmFja0JhclNlcnZpY2UsXG4gICAgVXNlckxpc3RGaWVsZFxufSBmcm9tIFwiQG5ldGdyaWYvY29tcG9uZW50cy1jb3JlXCI7XG5pbXBvcnQge1RyYW5zbGF0ZVNlcnZpY2V9IGZyb20gXCJAbmd4LXRyYW5zbGF0ZS9jb3JlXCI7XG5pbXBvcnQge1xuICAgIE11bHRpVXNlckFzc2lnbkRpYWxvZ0NvbXBvbmVudFxufSBmcm9tICcuLi8uLi8uLi9kaWFsb2cvbXVsdGktdXNlci1hc3NpZ24tZGlhbG9nL211bHRpLXVzZXItYXNzaWduLWRpYWxvZy5jb21wb25lbnQnO1xuaW1wb3J0IHtNYXREaWFsb2d9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2RpYWxvZyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25jLXVzZXItbGlzdC1kZWZhdWx0LWZpZWxkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3VzZXItbGlzdC1kZWZhdWx0LWZpZWxkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdXNlci1saXN0LWRlZmF1bHQtZmllbGQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBVc2VyTGlzdERlZmF1bHRGaWVsZENvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0VXNlckxpc3REZWZhdWx0RmllbGRDb21wb25lbnR7XG5cbiAgICBjb25zdHJ1Y3RvcihkaWFsb2c6IE1hdERpYWxvZyxcbiAgICAgICAgICAgICAgICBzbmFja2JhcjogU25hY2tCYXJTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHRyYW5zbGF0ZTogVHJhbnNsYXRlU2VydmljZSxcbiAgICAgICAgICAgICAgICBAT3B0aW9uYWwoKSBASW5qZWN0KERBVEFfRklFTERfUE9SVEFMX0RBVEEpIGRhdGFGaWVsZFBvcnRhbERhdGE6IERhdGFGaWVsZFBvcnRhbERhdGE8VXNlckxpc3RGaWVsZD4pIHtcbiAgICAgICAgc3VwZXIoZGlhbG9nLCBzbmFja2JhciwgdHJhbnNsYXRlLCBkYXRhRmllbGRQb3J0YWxEYXRhKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgc2VsZWN0VXNlcigpIHtcbiAgICAgICAgdGhpcy5zZWxlY3RBYnN0cmFjdFVzZXIoTXVsdGlVc2VyQXNzaWduRGlhbG9nQ29tcG9uZW50KTtcbiAgICB9XG5cbiAgICBwdWJsaWMgZGVsZXRlVXNlcih1c2VySWQ6IHN0cmluZykge1xuICAgICAgICB0aGlzLnJlbW92ZUFic3RyYWN0VXNlcih1c2VySWQpO1xuICAgIH1cblxufVxuIiwiPG1hdC1mb3JtLWZpZWxkIFthcHBlYXJhbmNlXT1cImRhdGFGaWVsZC5tYXRlcmlhbEFwcGVhcmFuY2VcIiBjbGFzcz1cImZ1bGwtd2lkdGggY2hpcC1maXhcIiBbbmdDbGFzc109XCJ7J25ldGdyaWYtY2hpcC1maXgnIDogZGF0YUZpZWxkLnZhbHVlPy51c2VyVmFsdWVzPy5zaXplID4gMH1cIiBjb2xvcj1cInByaW1hcnlcIj5cbiAgICA8bWF0LWxhYmVsIGNsYXNzPVwibmV0Z3JpZi1sYWJlbFwiIFtuZ0NsYXNzXT1cInsnbmV0Z3JpZi1sYWJlbC1kaXNhYmxlZCc6IGZvcm1Db250cm9sUmVmLmRpc2FibGVkfVwiICpuZ0lmPVwiIXNob3dMYXJnZUxheW91dC52YWx1ZVwiPnt7ZGF0YUZpZWxkLnRpdGxlfX08L21hdC1sYWJlbD5cbiAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiBtYXRQcmVmaXhcbiAgICAgICAgICAgIFtkaXNhYmxlZF09XCJmb3JtQ29udHJvbFJlZi5kaXNhYmxlZFwiXG4gICAgICAgICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgICAgICAgKGNsaWNrKT1cInNlbGVjdFVzZXIoKVwiXG4gICAgICAgICAgICBbbWF0VG9vbHRpcF09XCInZGF0YUZpZWxkLnVzZXIuc2VsZWN0VXNlcicgfCB0cmFuc2xhdGVcIlxuICAgICAgICAgICAgW2NsYXNzLmRvLW5vdC1jbGlja109XCJmb3JtQ29udHJvbFJlZi5kaXNhYmxlZFwiPlxuICAgICAgICA8bWF0LWljb24+aG93X3RvX3JlZzwvbWF0LWljb24+XG4gICAgPC9idXR0b24+XG4gICAgPGJ1dHRvbiAqbmdJZj1cIiFmb3JtQ29udHJvbFJlZi5kaXNhYmxlZFwiIG1hdC1pY29uLWJ1dHRvbiBtYXRQcmVmaXhcbiAgICAgICAgICAgIFtkaXNhYmxlZF09J2Zvcm1Db250cm9sUmVmLmRpc2FibGVkIHx8ICFkYXRhRmllbGQudmFsdWUgfHwgZGF0YUZpZWxkPy52YWx1ZT8udXNlclZhbHVlcz8uc2l6ZSA9PT0gMCdcbiAgICAgICAgICAgIGNvbG9yPSd3YXJuJ1xuICAgICAgICAgICAgKGNsaWNrKT0ncmVtb3ZlQWxsKCknXG4gICAgICAgICAgICBbbWF0VG9vbHRpcF09XCInZGF0YUZpZWxkLnVzZXIuZGVsZXRlQWxsJyB8IHRyYW5zbGF0ZVwiPlxuICAgICAgICA8bWF0LWljb24+ZGVsZXRlX291dGxpbmU8L21hdC1pY29uPlxuICAgIDwvYnV0dG9uPlxuICAgIDxtYXQtY2hpcC1ncmlkICNjaGlwTGlzdCBhcmlhLWxhYmVsPVwiQXV0b2NvbXBsZXRlXCI+XG4gICAgICAgIDxtYXQtY2hpcC1yb3dcbiAgICAgICAgICAgICpuZ0Zvcj0nbGV0IHVzZXIgb2YgZGF0YUZpZWxkLnZhbHVlPy51c2VyVmFsdWVzIHwga2V5dmFsdWUnIChyZW1vdmVkKT1cImRlbGV0ZVVzZXIodXNlci5rZXkpXCI+XG4gICAgICAgICAgICB7e3VzZXIudmFsdWUuZnVsbE5hbWV9fVxuICAgICAgICAgICAgPGJ1dHRvbiAqbmdJZj1cIiFmb3JtQ29udHJvbFJlZi5kaXNhYmxlZFwiIG1hdENoaXBSZW1vdmU+XG4gICAgICAgICAgICAgICAgPG1hdC1pY29uPmNhbmNlbDwvbWF0LWljb24+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9tYXQtY2hpcC1yb3c+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgYXJpYS1sYWJlbD1cIkF1dG9jb21wbGV0ZVwiXG4gICAgICAgICAgICBtYXRJbnB1dFxuICAgICAgICAgICAgZGlzYWJsZWRcbiAgICAgICAgICAgICNpbnB1dFxuICAgICAgICAgICAgW3BsYWNlaG9sZGVyXT1cImRhdGFGaWVsZC5wbGFjZWhvbGRlclwiXG4gICAgICAgICAgICBbcmVxdWlyZWRdPVwiZGF0YUZpZWxkLmJlaGF2aW9yLnJlcXVpcmVkXCJcbiAgICAgICAgICAgIFttYXRDaGlwSW5wdXRGb3JdPVwiY2hpcExpc3RcIj5cbiAgICA8L21hdC1jaGlwLWdyaWQ+XG4gICAgPG1hdC1oaW50IFtuZ0NsYXNzXT1cInsnbWF0LWhpbnQtZGlzYWJsZWQnOiBmb3JtQ29udHJvbFJlZi5kaXNhYmxlZH1cIj57e2RhdGFGaWVsZC5kZXNjcmlwdGlvbn19PC9tYXQtaGludD5cbiAgICA8bWF0LWVycm9yICpuZ0lmPSdkYXRhRmllbGQuaXNJbnZhbGlkKGZvcm1Db250cm9sUmVmKSc+e3snZGF0YUZpZWxkLnZhbGlkYXRpb25zLnJlcXVpcmVkJyB8IHRyYW5zbGF0ZX19PC9tYXQtZXJyb3I+XG48L21hdC1mb3JtLWZpZWxkPlxuIl19