@netgrif/components 6.2.1 → 6.2.2
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.
- package/esm2020/lib/data-fields/enumeration-field/enumeration-autocomplete-select-field/enumeration-autocomplete-select-field.component.mjs +3 -3
- package/esm2020/lib/search/advanced-search/search-operand-input-component/search-operand-input.component.mjs +3 -3
- package/fesm2015/netgrif-components.mjs +4 -4
- package/fesm2015/netgrif-components.mjs.map +1 -1
- package/fesm2020/netgrif-components.mjs +4 -4
- package/fesm2020/netgrif-components.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -610,10 +610,10 @@ class EnumerationAutocompleteSelectFieldComponent extends AbstractEnumerationAut
|
|
|
610
610
|
}
|
|
611
611
|
}
|
|
612
612
|
EnumerationAutocompleteSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EnumerationAutocompleteSelectFieldComponent, deps: [{ token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
613
|
-
EnumerationAutocompleteSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EnumerationAutocompleteSelectFieldComponent, selector: "nc-enumeration-autocomplete-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"enumerationField.materialAppearance\" class=\"full-width\" color=\"primary\">\n <mat-label *ngIf=\"!showLargeLayout.value\">{{enumerationField.title}}</mat-label>\n <input type=\"text\"\n aria-label=\"Autocomplete\"\n matInput\n #input\n [placeholder]=\"enumerationField.placeholder\"\n [formControl]=\"formControlRef\"\n [matAutocomplete]=\"auto\"\n [required]=\"enumerationField.behavior.required\"\n (keyup)=\"change()\">\n <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\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 </mat-autocomplete>\n <mat-hint>{{enumerationField.description}}</mat-hint>\n <mat-error *ngIf=\"enumerationField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7$2.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"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i5$2.AsyncPipe } });
|
|
613
|
+
EnumerationAutocompleteSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EnumerationAutocompleteSelectFieldComponent, selector: "nc-enumeration-autocomplete-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"enumerationField.materialAppearance\" class=\"full-width\" color=\"primary\">\n <mat-label *ngIf=\"!showLargeLayout.value\">{{enumerationField.title}}</mat-label>\n <input type=\"text\"\n aria-label=\"Autocomplete\"\n matInput\n #input\n [placeholder]=\"enumerationField.placeholder\"\n [formControl]=\"formControlRef\"\n [matAutocomplete]=\"auto\"\n [required]=\"enumerationField.behavior.required\"\n (focus)=\"change()\"\n (keyup)=\"change()\">\n <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\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 </mat-autocomplete>\n <mat-hint>{{enumerationField.description}}</mat-hint>\n <mat-error *ngIf=\"enumerationField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7$2.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"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i5$2.AsyncPipe } });
|
|
614
614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EnumerationAutocompleteSelectFieldComponent, decorators: [{
|
|
615
615
|
type: Component,
|
|
616
|
-
args: [{ selector: 'nc-enumeration-autocomplete-select-field', template: "<mat-form-field [appearance]=\"enumerationField.materialAppearance\" class=\"full-width\" color=\"primary\">\n <mat-label *ngIf=\"!showLargeLayout.value\">{{enumerationField.title}}</mat-label>\n <input type=\"text\"\n aria-label=\"Autocomplete\"\n matInput\n #input\n [placeholder]=\"enumerationField.placeholder\"\n [formControl]=\"formControlRef\"\n [matAutocomplete]=\"auto\"\n [required]=\"enumerationField.behavior.required\"\n (keyup)=\"change()\">\n <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\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 </mat-autocomplete>\n <mat-hint>{{enumerationField.description}}</mat-hint>\n <mat-error *ngIf=\"enumerationField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
|
|
616
|
+
args: [{ selector: 'nc-enumeration-autocomplete-select-field', template: "<mat-form-field [appearance]=\"enumerationField.materialAppearance\" class=\"full-width\" color=\"primary\">\n <mat-label *ngIf=\"!showLargeLayout.value\">{{enumerationField.title}}</mat-label>\n <input type=\"text\"\n aria-label=\"Autocomplete\"\n matInput\n #input\n [placeholder]=\"enumerationField.placeholder\"\n [formControl]=\"formControlRef\"\n [matAutocomplete]=\"auto\"\n [required]=\"enumerationField.behavior.required\"\n (focus)=\"change()\"\n (keyup)=\"change()\">\n <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\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 </mat-autocomplete>\n <mat-hint>{{enumerationField.description}}</mat-hint>\n <mat-error *ngIf=\"enumerationField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
|
|
617
617
|
}], ctorParameters: function () { return [{ type: i2$2.TranslateService }]; } });
|
|
618
618
|
|
|
619
619
|
class EnumerationListFieldComponent extends AbstractEnumerationListFieldComponent {
|
|
@@ -1107,12 +1107,12 @@ class SearchOperandInputComponent extends AbstractSearchOperandInputComponent {
|
|
|
1107
1107
|
SearchOperandInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchOperandInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1108
1108
|
SearchOperandInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SearchOperandInputComponent, selector: "nc-search-operand-input", providers: [
|
|
1109
1109
|
{ provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT }
|
|
1110
|
-
], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isInputFilled; then operandSelection else operandDisplay\"></div>\n\n<ng-template #operandSelection>\n <div [ngSwitch]=\"inputType\">\n <ng-template [ngSwitchCase]=\"searchInputType.TEXT\">\n <mat-form-field appearance=\"outline\">\n <input type=\"text\" matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.AUTOCOMPLETE\">\n <mat-form-field appearance=\"outline\">\n <input type=\"text\" matInput autocomplete=\"off\"\n #autocompleteInput\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [formControl]=\"inputFormControl\"\n [matAutocomplete]=\"searchAutocomplete\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur(); autocompleteTrigger.closePanel()\"\n (focus)=\"editInput()\"\n #operandInput>\n <mat-autocomplete #searchAutocomplete=\"matAutocomplete\"\n [displayWith]=\"renderSelection\"\n (optionSelected)=\"autocompleteInput.blur()\">\n <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n <mat-icon *ngIf=\"option.icon\">{{option.icon}}</mat-icon>\n <span>{{option.text | translate}}</span>\n </mat-option>\n </mat-autocomplete>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.DATE\">\n <mat-form-field appearance=\"outline\">\n <input matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [matDatepicker]=\"searchDatepicker\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"searchDatepicker.close()\"\n (focus)=\"editInput(); searchDatepicker.open()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n <mat-datepicker-toggle matPrefix [for]=\"searchDatepicker\"></mat-datepicker-toggle>\n <mat-datepicker #searchDatepicker></mat-datepicker>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.DATE_TIME\">\n <mat-form-field appearance=\"outline\">\n <input matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [ngxMatDatetimePicker]=\"searchDateTimepicker\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"searchDateTimepicker.close()\"\n (focus)=\"editInput(); searchDateTimepicker.open()\"\n #operandInput>\n <mat-datepicker-toggle matPrefix [for]=\"searchDateTimepicker\">\n <mat-icon matDatepickerToggleIcon>schedule</mat-icon>\n </mat-datepicker-toggle>\n <ngx-mat-datetime-picker #searchDateTimepicker\n [showSpinners]=\"true\"\n [showSeconds]=\"false\"\n [stepHour]=\"1\"\n [stepMinute]=\"5\"\n [color]=\"'primary'\"\n [enableMeridian]=\"false\"\n (closed)=\"confirmInput()\"></ngx-mat-datetime-picker>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.NUMBER\">\n <mat-form-field appearance=\"outline\">\n <input type=\"number\" matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur()\"\n (focus)=\"editInput()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.BOOLEAN\">\n <div fxLayout=\"row\">\n <mat-slide-toggle [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (focus)=\"editInput()\"\n (toggleChange)=\"confirmInput()\"></mat-slide-toggle>\n </div>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #operandDisplay>\n <div [ngSwitch]=\"inputType\" (click)=\"editInput()\" class=\"bold-text\">\n <div *ngSwitchCase=\"searchInputType.AUTOCOMPLETE\">\n {{inputFormControl.value.text | translate}}\n </div>\n <div *ngSwitchCase=\"searchInputType.DATE\">\n {{inputFormControl.value.format(dateFormat)}}\n </div>\n <div *ngSwitchCase=\"searchInputType.DATE_TIME\">\n {{inputFormControl.value.format(dateTimeFormat)}}\n </div>\n <div *ngSwitchDefault>\n {{inputFormControl.value}}\n </div>\n </div>\n</ng-template>\n", styles: [".bold-text{font-weight:700}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5$3.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }, { type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i5$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7$2.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"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i5$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i5$3.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i4$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i7$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i5$2.AsyncPipe, "translate": i2$2.TranslatePipe } });
|
|
1110
|
+
], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isInputFilled(); then operandSelection else operandDisplay\"></div>\n\n<ng-template #operandSelection>\n <div [ngSwitch]=\"inputType\">\n <ng-template [ngSwitchCase]=\"searchInputType.TEXT\">\n <mat-form-field appearance=\"outline\">\n <input type=\"text\" matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.AUTOCOMPLETE\">\n <mat-form-field appearance=\"outline\">\n <input type=\"text\" matInput autocomplete=\"off\"\n #autocompleteInput\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [formControl]=\"inputFormControl\"\n [matAutocomplete]=\"searchAutocomplete\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur(); autocompleteTrigger.closePanel()\"\n (focus)=\"editInput()\"\n #operandInput>\n <mat-autocomplete #searchAutocomplete=\"matAutocomplete\"\n [displayWith]=\"renderSelection\"\n (optionSelected)=\"autocompleteInput.blur()\">\n <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n <mat-icon *ngIf=\"option.icon\">{{option.icon}}</mat-icon>\n <span>{{option.text | translate}}</span>\n </mat-option>\n </mat-autocomplete>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.DATE\">\n <mat-form-field appearance=\"outline\">\n <input matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [matDatepicker]=\"searchDatepicker\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"searchDatepicker.close()\"\n (focus)=\"editInput(); searchDatepicker.open()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n <mat-datepicker-toggle matPrefix [for]=\"searchDatepicker\"></mat-datepicker-toggle>\n <mat-datepicker #searchDatepicker></mat-datepicker>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.DATE_TIME\">\n <mat-form-field appearance=\"outline\">\n <input matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [ngxMatDatetimePicker]=\"searchDateTimepicker\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"searchDateTimepicker.close()\"\n (focus)=\"editInput(); searchDateTimepicker.open()\"\n #operandInput>\n <mat-datepicker-toggle matPrefix [for]=\"searchDateTimepicker\">\n <mat-icon matDatepickerToggleIcon>schedule</mat-icon>\n </mat-datepicker-toggle>\n <ngx-mat-datetime-picker #searchDateTimepicker\n [showSpinners]=\"true\"\n [showSeconds]=\"false\"\n [stepHour]=\"1\"\n [stepMinute]=\"5\"\n [color]=\"'primary'\"\n [enableMeridian]=\"false\"\n (closed)=\"confirmInput()\"></ngx-mat-datetime-picker>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.NUMBER\">\n <mat-form-field appearance=\"outline\">\n <input type=\"number\" matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur()\"\n (focus)=\"editInput()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.BOOLEAN\">\n <div fxLayout=\"row\">\n <mat-slide-toggle [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (focus)=\"editInput()\"\n (toggleChange)=\"confirmInput()\"></mat-slide-toggle>\n </div>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #operandDisplay>\n <div [ngSwitch]=\"inputType\" (click)=\"editInput()\" class=\"bold-text\">\n <div *ngSwitchCase=\"searchInputType.AUTOCOMPLETE\">\n {{inputFormControl.value.text | translate}}\n </div>\n <div *ngSwitchCase=\"searchInputType.DATE\">\n {{inputFormControl.value.format(dateFormat)}}\n </div>\n <div *ngSwitchCase=\"searchInputType.DATE_TIME\">\n {{inputFormControl.value.format(dateTimeFormat)}}\n </div>\n <div *ngSwitchDefault>\n {{inputFormControl.value}}\n </div>\n </div>\n</ng-template>\n", styles: [".bold-text{font-weight:700}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5$3.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }, { type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i5$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7$2.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"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i5$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i5$3.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i4$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i7$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i5$2.AsyncPipe, "translate": i2$2.TranslatePipe } });
|
|
1111
1111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchOperandInputComponent, decorators: [{
|
|
1112
1112
|
type: Component,
|
|
1113
1113
|
args: [{ selector: 'nc-search-operand-input', providers: [
|
|
1114
1114
|
{ provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT }
|
|
1115
|
-
], template: "<div *ngIf=\"!isInputFilled; then operandSelection else operandDisplay\"></div>\n\n<ng-template #operandSelection>\n <div [ngSwitch]=\"inputType\">\n <ng-template [ngSwitchCase]=\"searchInputType.TEXT\">\n <mat-form-field appearance=\"outline\">\n <input type=\"text\" matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.AUTOCOMPLETE\">\n <mat-form-field appearance=\"outline\">\n <input type=\"text\" matInput autocomplete=\"off\"\n #autocompleteInput\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [formControl]=\"inputFormControl\"\n [matAutocomplete]=\"searchAutocomplete\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur(); autocompleteTrigger.closePanel()\"\n (focus)=\"editInput()\"\n #operandInput>\n <mat-autocomplete #searchAutocomplete=\"matAutocomplete\"\n [displayWith]=\"renderSelection\"\n (optionSelected)=\"autocompleteInput.blur()\">\n <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n <mat-icon *ngIf=\"option.icon\">{{option.icon}}</mat-icon>\n <span>{{option.text | translate}}</span>\n </mat-option>\n </mat-autocomplete>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.DATE\">\n <mat-form-field appearance=\"outline\">\n <input matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [matDatepicker]=\"searchDatepicker\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"searchDatepicker.close()\"\n (focus)=\"editInput(); searchDatepicker.open()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n <mat-datepicker-toggle matPrefix [for]=\"searchDatepicker\"></mat-datepicker-toggle>\n <mat-datepicker #searchDatepicker></mat-datepicker>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.DATE_TIME\">\n <mat-form-field appearance=\"outline\">\n <input matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [ngxMatDatetimePicker]=\"searchDateTimepicker\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"searchDateTimepicker.close()\"\n (focus)=\"editInput(); searchDateTimepicker.open()\"\n #operandInput>\n <mat-datepicker-toggle matPrefix [for]=\"searchDateTimepicker\">\n <mat-icon matDatepickerToggleIcon>schedule</mat-icon>\n </mat-datepicker-toggle>\n <ngx-mat-datetime-picker #searchDateTimepicker\n [showSpinners]=\"true\"\n [showSeconds]=\"false\"\n [stepHour]=\"1\"\n [stepMinute]=\"5\"\n [color]=\"'primary'\"\n [enableMeridian]=\"false\"\n (closed)=\"confirmInput()\"></ngx-mat-datetime-picker>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.NUMBER\">\n <mat-form-field appearance=\"outline\">\n <input type=\"number\" matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur()\"\n (focus)=\"editInput()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.BOOLEAN\">\n <div fxLayout=\"row\">\n <mat-slide-toggle [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (focus)=\"editInput()\"\n (toggleChange)=\"confirmInput()\"></mat-slide-toggle>\n </div>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #operandDisplay>\n <div [ngSwitch]=\"inputType\" (click)=\"editInput()\" class=\"bold-text\">\n <div *ngSwitchCase=\"searchInputType.AUTOCOMPLETE\">\n {{inputFormControl.value.text | translate}}\n </div>\n <div *ngSwitchCase=\"searchInputType.DATE\">\n {{inputFormControl.value.format(dateFormat)}}\n </div>\n <div *ngSwitchCase=\"searchInputType.DATE_TIME\">\n {{inputFormControl.value.format(dateTimeFormat)}}\n </div>\n <div *ngSwitchDefault>\n {{inputFormControl.value}}\n </div>\n </div>\n</ng-template>\n", styles: [".bold-text{font-weight:700}\n"] }]
|
|
1115
|
+
], template: "<div *ngIf=\"!isInputFilled(); then operandSelection else operandDisplay\"></div>\n\n<ng-template #operandSelection>\n <div [ngSwitch]=\"inputType\">\n <ng-template [ngSwitchCase]=\"searchInputType.TEXT\">\n <mat-form-field appearance=\"outline\">\n <input type=\"text\" matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.AUTOCOMPLETE\">\n <mat-form-field appearance=\"outline\">\n <input type=\"text\" matInput autocomplete=\"off\"\n #autocompleteInput\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [formControl]=\"inputFormControl\"\n [matAutocomplete]=\"searchAutocomplete\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur(); autocompleteTrigger.closePanel()\"\n (focus)=\"editInput()\"\n #operandInput>\n <mat-autocomplete #searchAutocomplete=\"matAutocomplete\"\n [displayWith]=\"renderSelection\"\n (optionSelected)=\"autocompleteInput.blur()\">\n <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n <mat-icon *ngIf=\"option.icon\">{{option.icon}}</mat-icon>\n <span>{{option.text | translate}}</span>\n </mat-option>\n </mat-autocomplete>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.DATE\">\n <mat-form-field appearance=\"outline\">\n <input matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [matDatepicker]=\"searchDatepicker\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"searchDatepicker.close()\"\n (focus)=\"editInput(); searchDatepicker.open()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n <mat-datepicker-toggle matPrefix [for]=\"searchDatepicker\"></mat-datepicker-toggle>\n <mat-datepicker #searchDatepicker></mat-datepicker>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.DATE_TIME\">\n <mat-form-field appearance=\"outline\">\n <input matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [ngxMatDatetimePicker]=\"searchDateTimepicker\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"searchDateTimepicker.close()\"\n (focus)=\"editInput(); searchDateTimepicker.open()\"\n #operandInput>\n <mat-datepicker-toggle matPrefix [for]=\"searchDateTimepicker\">\n <mat-icon matDatepickerToggleIcon>schedule</mat-icon>\n </mat-datepicker-toggle>\n <ngx-mat-datetime-picker #searchDateTimepicker\n [showSpinners]=\"true\"\n [showSeconds]=\"false\"\n [stepHour]=\"1\"\n [stepMinute]=\"5\"\n [color]=\"'primary'\"\n [enableMeridian]=\"false\"\n (closed)=\"confirmInput()\"></ngx-mat-datetime-picker>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.NUMBER\">\n <mat-form-field appearance=\"outline\">\n <input type=\"number\" matInput autocomplete=\"off\"\n [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (keydown.enter)=\"$event.target.blur()\"\n (focus)=\"editInput()\"\n (blur)=\"confirmInput()\"\n #operandInput>\n </mat-form-field>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"searchInputType.BOOLEAN\">\n <div fxLayout=\"row\">\n <mat-slide-toggle [formControl]=\"inputFormControl\"\n [disabled]=\"!editable\"\n (focus)=\"editInput()\"\n (toggleChange)=\"confirmInput()\"></mat-slide-toggle>\n </div>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #operandDisplay>\n <div [ngSwitch]=\"inputType\" (click)=\"editInput()\" class=\"bold-text\">\n <div *ngSwitchCase=\"searchInputType.AUTOCOMPLETE\">\n {{inputFormControl.value.text | translate}}\n </div>\n <div *ngSwitchCase=\"searchInputType.DATE\">\n {{inputFormControl.value.format(dateFormat)}}\n </div>\n <div *ngSwitchCase=\"searchInputType.DATE_TIME\">\n {{inputFormControl.value.format(dateTimeFormat)}}\n </div>\n <div *ngSwitchDefault>\n {{inputFormControl.value}}\n </div>\n </div>\n</ng-template>\n", styles: [".bold-text{font-weight:700}\n"] }]
|
|
1116
1116
|
}], ctorParameters: function () { return []; } });
|
|
1117
1117
|
|
|
1118
1118
|
class SearchConfigurationInputComponent extends AbstractSearchConfigurationInputComponent {
|